You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
210 lines
4.8 KiB
210 lines
4.8 KiB
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
|
|
var _utils = require("../utils");
|
|
|
|
var _mobile = require("../utils/validate/mobile");
|
|
|
|
var _cell = _interopRequireDefault(require("../cell"));
|
|
|
|
var _field = _interopRequireDefault(require("../field"));
|
|
|
|
var _button = _interopRequireDefault(require("../button"));
|
|
|
|
var _dialog = _interopRequireDefault(require("../dialog"));
|
|
|
|
var _switch = _interopRequireDefault(require("../switch"));
|
|
|
|
// Utils
|
|
// Components
|
|
var _createNamespace = (0, _utils.createNamespace)('contact-edit'),
|
|
createComponent = _createNamespace[0],
|
|
bem = _createNamespace[1],
|
|
t = _createNamespace[2];
|
|
|
|
var defaultContact = {
|
|
tel: '',
|
|
name: ''
|
|
};
|
|
|
|
var _default2 = createComponent({
|
|
props: {
|
|
isEdit: Boolean,
|
|
isSaving: Boolean,
|
|
isDeleting: Boolean,
|
|
showSetDefault: Boolean,
|
|
setDefaultLabel: String,
|
|
contactInfo: {
|
|
type: Object,
|
|
default: function _default() {
|
|
return (0, _extends2.default)({}, defaultContact);
|
|
}
|
|
},
|
|
telValidator: {
|
|
type: Function,
|
|
default: _mobile.isMobile
|
|
}
|
|
},
|
|
data: function data() {
|
|
return {
|
|
data: (0, _extends2.default)({}, defaultContact, this.contactInfo),
|
|
errorInfo: {
|
|
name: '',
|
|
tel: ''
|
|
}
|
|
};
|
|
},
|
|
watch: {
|
|
contactInfo: function contactInfo(val) {
|
|
this.data = (0, _extends2.default)({}, defaultContact, val);
|
|
}
|
|
},
|
|
methods: {
|
|
onFocus: function onFocus(key) {
|
|
this.errorInfo[key] = '';
|
|
},
|
|
getErrorMessageByKey: function getErrorMessageByKey(key) {
|
|
var value = this.data[key].trim();
|
|
|
|
switch (key) {
|
|
case 'name':
|
|
return value ? '' : t('nameInvalid');
|
|
|
|
case 'tel':
|
|
return this.telValidator(value) ? '' : t('telInvalid');
|
|
}
|
|
},
|
|
onSave: function onSave() {
|
|
var _this = this;
|
|
|
|
var isValid = ['name', 'tel'].every(function (item) {
|
|
var msg = _this.getErrorMessageByKey(item);
|
|
|
|
if (msg) {
|
|
_this.errorInfo[item] = msg;
|
|
}
|
|
|
|
return !msg;
|
|
});
|
|
|
|
if (isValid && !this.isSaving) {
|
|
this.$emit('save', this.data);
|
|
}
|
|
},
|
|
onDelete: function onDelete() {
|
|
var _this2 = this;
|
|
|
|
_dialog.default.confirm({
|
|
title: t('confirmDelete')
|
|
}).then(function () {
|
|
_this2.$emit('delete', _this2.data);
|
|
});
|
|
}
|
|
},
|
|
render: function render() {
|
|
var _this3 = this;
|
|
|
|
var h = arguments[0];
|
|
var data = this.data,
|
|
errorInfo = this.errorInfo;
|
|
|
|
var onFocus = function onFocus(name) {
|
|
return function () {
|
|
return _this3.onFocus(name);
|
|
};
|
|
};
|
|
|
|
return h("div", {
|
|
"class": bem()
|
|
}, [h("div", {
|
|
"class": bem('fields')
|
|
}, [h(_field.default, {
|
|
"attrs": {
|
|
"clearable": true,
|
|
"maxlength": "30",
|
|
"label": t('name'),
|
|
"placeholder": t('nameEmpty'),
|
|
"errorMessage": errorInfo.name
|
|
},
|
|
"on": {
|
|
"focus": onFocus('name')
|
|
},
|
|
"model": {
|
|
value: data.name,
|
|
callback: function callback($$v) {
|
|
_this3.$set(data, "name", $$v);
|
|
}
|
|
}
|
|
}), h(_field.default, {
|
|
"attrs": {
|
|
"clearable": true,
|
|
"type": "tel",
|
|
"label": t('tel'),
|
|
"placeholder": t('telEmpty'),
|
|
"errorMessage": errorInfo.tel
|
|
},
|
|
"on": {
|
|
"focus": onFocus('tel')
|
|
},
|
|
"model": {
|
|
value: data.tel,
|
|
callback: function callback($$v) {
|
|
_this3.$set(data, "tel", $$v);
|
|
}
|
|
}
|
|
})]), this.showSetDefault && h(_cell.default, {
|
|
"attrs": {
|
|
"title": this.setDefaultLabel,
|
|
"border": false
|
|
},
|
|
"class": bem('switch-cell')
|
|
}, [h(_switch.default, {
|
|
"attrs": {
|
|
"size": 24
|
|
},
|
|
"slot": "right-icon",
|
|
"on": {
|
|
"change": function change(event) {
|
|
_this3.$emit('change-default', event);
|
|
}
|
|
},
|
|
"model": {
|
|
value: data.isDefault,
|
|
callback: function callback($$v) {
|
|
_this3.$set(data, "isDefault", $$v);
|
|
}
|
|
}
|
|
})]), h("div", {
|
|
"class": bem('buttons')
|
|
}, [h(_button.default, {
|
|
"attrs": {
|
|
"block": true,
|
|
"round": true,
|
|
"type": "danger",
|
|
"text": t('save'),
|
|
"loading": this.isSaving
|
|
},
|
|
"on": {
|
|
"click": this.onSave
|
|
}
|
|
}), this.isEdit && h(_button.default, {
|
|
"attrs": {
|
|
"block": true,
|
|
"round": true,
|
|
"text": t('delete'),
|
|
"loading": this.isDeleting
|
|
},
|
|
"on": {
|
|
"click": this.onDelete
|
|
}
|
|
})])]);
|
|
}
|
|
});
|
|
|
|
exports.default = _default2; |