| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495 | import _extends from "@babel/runtime/helpers/esm/extends";// Utilsimport { createNamespace, isObject } from '../utils';import { isMobile } from '../utils/validate/mobile'; // Componentsimport Area from '../area';import Cell from '../cell';import Field from '../field';import Popup from '../popup';import Toast from '../toast';import Button from '../button';import Dialog from '../dialog';import Detail from './Detail';import Switch from '../switch';var _createNamespace = createNamespace('address-edit'),    createComponent = _createNamespace[0],    bem = _createNamespace[1],    t = _createNamespace[2];var defaultData = {  name: '',  tel: '',  country: '',  province: '',  city: '',  county: '',  areaCode: '',  postalCode: '',  addressDetail: '',  isDefault: false};function isPostal(value) {  return /^\d{6}$/.test(value);}export default createComponent({  props: {    areaList: Object,    isSaving: Boolean,    isDeleting: Boolean,    validator: Function,    showDelete: Boolean,    showPostal: Boolean,    searchResult: Array,    telMaxlength: [Number, String],    showSetDefault: Boolean,    saveButtonText: String,    areaPlaceholder: String,    deleteButtonText: String,    showSearchResult: Boolean,    showArea: {      type: Boolean,      default: true    },    showDetail: {      type: Boolean,      default: true    },    disableArea: Boolean,    detailRows: {      type: [Number, String],      default: 1    },    detailMaxlength: {      type: [Number, String],      default: 200    },    addressInfo: {      type: Object,      default: function _default() {        return _extends({}, defaultData);      }    },    telValidator: {      type: Function,      default: isMobile    },    postalValidator: {      type: Function,      default: isPostal    },    areaColumnsPlaceholder: {      type: Array,      default: function _default() {        return [];      }    }  },  data: function data() {    return {      data: {},      showAreaPopup: false,      detailFocused: false,      errorInfo: {        tel: '',        name: '',        areaCode: '',        postalCode: '',        addressDetail: ''      }    };  },  computed: {    areaListLoaded: function areaListLoaded() {      return isObject(this.areaList) && Object.keys(this.areaList).length;    },    areaText: function areaText() {      var _this$data = this.data,          country = _this$data.country,          province = _this$data.province,          city = _this$data.city,          county = _this$data.county,          areaCode = _this$data.areaCode;      if (areaCode) {        var arr = [country, province, city, county];        if (province && province === city) {          arr.splice(1, 1);        }        return arr.filter(function (text) {          return text;        }).join('/');      }      return '';    },    // hide bottom field when use search && detail get focused    hideBottomFields: function hideBottomFields() {      var searchResult = this.searchResult;      return searchResult && searchResult.length && this.detailFocused;    }  },  watch: {    addressInfo: {      handler: function handler(val) {        this.data = _extends({}, defaultData, val);        this.setAreaCode(val.areaCode);      },      deep: true,      immediate: true    },    areaList: function areaList() {      this.setAreaCode(this.data.areaCode);    }  },  methods: {    onFocus: function onFocus(key) {      this.errorInfo[key] = '';      this.detailFocused = key === 'addressDetail';      this.$emit('focus', key);    },    onChangeDetail: function onChangeDetail(val) {      this.data.addressDetail = val;      this.$emit('change-detail', val);    },    onAreaConfirm: function onAreaConfirm(values) {      values = values.filter(function (value) {        return !!value;      });      if (values.some(function (value) {        return !value.code;      })) {        Toast(t('areaEmpty'));        return;      }      this.showAreaPopup = false;      this.assignAreaValues();      this.$emit('change-area', values);    },    assignAreaValues: function assignAreaValues() {      var area = this.$refs.area;      if (area) {        var detail = area.getArea();        detail.areaCode = detail.code;        delete detail.code;        _extends(this.data, detail);      }    },    onSave: function onSave() {      var _this = this;      var items = ['name', 'tel'];      if (this.showArea) {        items.push('areaCode');      }      if (this.showDetail) {        items.push('addressDetail');      }      if (this.showPostal) {        items.push('postalCode');      }      var isValid = items.every(function (item) {        var msg = _this.getErrorMessage(item);        if (msg) {          _this.errorInfo[item] = msg;        }        return !msg;      });      if (isValid && !this.isSaving) {        this.$emit('save', this.data);      }    },    getErrorMessage: function getErrorMessage(key) {      var value = String(this.data[key] || '').trim();      if (this.validator) {        var message = this.validator(key, value);        if (message) {          return message;        }      }      switch (key) {        case 'name':          return value ? '' : t('nameEmpty');        case 'tel':          return this.telValidator(value) ? '' : t('telInvalid');        case 'areaCode':          return value ? '' : t('areaEmpty');        case 'addressDetail':          return value ? '' : t('addressEmpty');        case 'postalCode':          return value && !this.postalValidator(value) ? t('postalEmpty') : '';      }    },    onDelete: function onDelete() {      var _this2 = this;      Dialog.confirm({        title: t('confirmDelete')      }).then(function () {        _this2.$emit('delete', _this2.data);      }).catch(function () {        _this2.$emit('cancel-delete', _this2.data);      });    },    // get values of area component    getArea: function getArea() {      return this.$refs.area ? this.$refs.area.getValues() : [];    },    // set area code to area component    setAreaCode: function setAreaCode(code) {      this.data.areaCode = code || '';      if (code) {        this.$nextTick(this.assignAreaValues);      }    },    // @exposed-api    setAddressDetail: function setAddressDetail(value) {      this.data.addressDetail = value;    },    onDetailBlur: function onDetailBlur() {      var _this3 = this;      // await for click search event      setTimeout(function () {        _this3.detailFocused = false;      });    },    genSetDefaultCell: function genSetDefaultCell(h) {      var _this4 = this;      if (this.showSetDefault) {        var slots = {          'right-icon': function rightIcon() {            return h(Switch, {              "attrs": {                "size": "24"              },              "on": {                "change": function change(event) {                  _this4.$emit('change-default', event);                }              },              "model": {                value: _this4.data.isDefault,                callback: function callback($$v) {                  _this4.$set(_this4.data, "isDefault", $$v);                }              }            });          }        };        return h(Cell, {          "directives": [{            name: "show",            value: !this.hideBottomFields          }],          "attrs": {            "center": true,            "title": t('defaultAddress')          },          "class": bem('default'),          "scopedSlots": slots        });      }      return h();    }  },  render: function render(h) {    var _this5 = this;    var data = this.data,        errorInfo = this.errorInfo,        disableArea = this.disableArea,        hideBottomFields = this.hideBottomFields;    var onFocus = function onFocus(name) {      return function () {        return _this5.onFocus(name);      };    };    return h("div", {      "class": bem()    }, [h("div", {      "class": bem('fields')    }, [h(Field, {      "attrs": {        "clearable": true,        "label": t('name'),        "placeholder": t('namePlaceholder'),        "errorMessage": errorInfo.name      },      "on": {        "focus": onFocus('name')      },      "model": {        value: data.name,        callback: function callback($$v) {          _this5.$set(data, "name", $$v);        }      }    }), h(Field, {      "attrs": {        "clearable": true,        "type": "tel",        "label": t('tel'),        "maxlength": this.telMaxlength,        "placeholder": t('telPlaceholder'),        "errorMessage": errorInfo.tel      },      "on": {        "focus": onFocus('tel')      },      "model": {        value: data.tel,        callback: function callback($$v) {          _this5.$set(data, "tel", $$v);        }      }    }), h(Field, {      "directives": [{        name: "show",        value: this.showArea      }],      "attrs": {        "readonly": true,        "clickable": !disableArea,        "label": t('area'),        "placeholder": this.areaPlaceholder || t('areaPlaceholder'),        "errorMessage": errorInfo.areaCode,        "rightIcon": !disableArea ? 'arrow' : null,        "value": this.areaText      },      "on": {        "focus": onFocus('areaCode'),        "click": function click() {          _this5.$emit('click-area');          _this5.showAreaPopup = !disableArea;        }      }    }), h(Detail, {      "directives": [{        name: "show",        value: this.showDetail      }],      "attrs": {        "focused": this.detailFocused,        "value": data.addressDetail,        "errorMessage": errorInfo.addressDetail,        "detailRows": this.detailRows,        "detailMaxlength": this.detailMaxlength,        "searchResult": this.searchResult,        "showSearchResult": this.showSearchResult      },      "on": {        "focus": onFocus('addressDetail'),        "blur": this.onDetailBlur,        "input": this.onChangeDetail,        "select-search": function selectSearch(event) {          _this5.$emit('select-search', event);        }      }    }), this.showPostal && h(Field, {      "directives": [{        name: "show",        value: !hideBottomFields      }],      "attrs": {        "type": "tel",        "maxlength": "6",        "label": t('postal'),        "placeholder": t('postal'),        "errorMessage": errorInfo.postalCode      },      "on": {        "focus": onFocus('postalCode')      },      "model": {        value: data.postalCode,        callback: function callback($$v) {          _this5.$set(data, "postalCode", $$v);        }      }    }), this.slots()]), this.genSetDefaultCell(h), h("div", {      "directives": [{        name: "show",        value: !hideBottomFields      }],      "class": bem('buttons')    }, [h(Button, {      "attrs": {        "block": true,        "round": true,        "loading": this.isSaving,        "type": "danger",        "text": this.saveButtonText || t('save')      },      "on": {        "click": this.onSave      }    }), this.showDelete && h(Button, {      "attrs": {        "block": true,        "round": true,        "loading": this.isDeleting,        "text": this.deleteButtonText || t('delete')      },      "on": {        "click": this.onDelete      }    })]), h(Popup, {      "attrs": {        "round": true,        "position": "bottom",        "lazyRender": false,        "getContainer": "body"      },      "model": {        value: _this5.showAreaPopup,        callback: function callback($$v) {          _this5.showAreaPopup = $$v;        }      }    }, [h(Area, {      "ref": "area",      "attrs": {        "value": data.areaCode,        "loading": !this.areaListLoaded,        "areaList": this.areaList,        "columnsPlaceholder": this.areaColumnsPlaceholder      },      "on": {        "confirm": this.onAreaConfirm,        "cancel": function cancel() {          _this5.showAreaPopup = false;        }      }    })])]);  }});
 |