123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- import _extends from "@babel/runtime/helpers/esm/extends";
- // Utils
- import { createNamespace } from '../utils';
- import { isMobile } from '../utils/validate/mobile'; // Components
- import Cell from '../cell';
- import Field from '../field';
- import Button from '../button';
- import Dialog from '../dialog';
- import Switch from '../switch';
- var _createNamespace = createNamespace('contact-edit'),
- createComponent = _createNamespace[0],
- bem = _createNamespace[1],
- t = _createNamespace[2];
- var defaultContact = {
- tel: '',
- name: ''
- };
- export default createComponent({
- props: {
- isEdit: Boolean,
- isSaving: Boolean,
- isDeleting: Boolean,
- showSetDefault: Boolean,
- setDefaultLabel: String,
- contactInfo: {
- type: Object,
- default: function _default() {
- return _extends({}, defaultContact);
- }
- },
- telValidator: {
- type: Function,
- default: isMobile
- }
- },
- data: function data() {
- return {
- data: _extends({}, defaultContact, this.contactInfo),
- errorInfo: {
- name: '',
- tel: ''
- }
- };
- },
- watch: {
- contactInfo: function contactInfo(val) {
- this.data = _extends({}, 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.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, {
- "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, {
- "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, {
- "attrs": {
- "title": this.setDefaultLabel,
- "border": false
- },
- "class": bem('switch-cell')
- }, [h(Switch, {
- "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, {
- "attrs": {
- "block": true,
- "round": true,
- "type": "danger",
- "text": t('save'),
- "loading": this.isSaving
- },
- "on": {
- "click": this.onSave
- }
- }), this.isEdit && h(Button, {
- "attrs": {
- "block": true,
- "round": true,
- "text": t('delete'),
- "loading": this.isDeleting
- },
- "on": {
- "click": this.onDelete
- }
- })])]);
- }
- });
|