| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321 | import _extends from "@babel/runtime/helpers/esm/extends";import { createNamespace } from '../utils';import { pickerProps } from '../picker/shared';import Picker from '../picker';var _createNamespace = createNamespace('area'),    createComponent = _createNamespace[0],    bem = _createNamespace[1];var PLACEHOLDER_CODE = '000000';function isOverseaCode(code) {  return code[0] === '9';}function pickSlots(instance, keys) {  var $slots = instance.$slots,      $scopedSlots = instance.$scopedSlots;  var scopedSlots = {};  keys.forEach(function (key) {    if ($scopedSlots[key]) {      scopedSlots[key] = $scopedSlots[key];    } else if ($slots[key]) {      scopedSlots[key] = function () {        return $slots[key];      };    }  });  return scopedSlots;}export default createComponent({  props: _extends({}, pickerProps, {    value: String,    areaList: {      type: Object,      default: function _default() {        return {};      }    },    columnsNum: {      type: [Number, String],      default: 3    },    isOverseaCode: {      type: Function,      default: isOverseaCode    },    columnsPlaceholder: {      type: Array,      default: function _default() {        return [];      }    }  }),  data: function data() {    return {      code: this.value,      columns: [{        values: []      }, {        values: []      }, {        values: []      }]    };  },  computed: {    province: function province() {      return this.areaList.province_list || {};    },    city: function city() {      return this.areaList.city_list || {};    },    county: function county() {      return this.areaList.county_list || {};    },    displayColumns: function displayColumns() {      return this.columns.slice(0, +this.columnsNum);    },    placeholderMap: function placeholderMap() {      return {        province: this.columnsPlaceholder[0] || '',        city: this.columnsPlaceholder[1] || '',        county: this.columnsPlaceholder[2] || ''      };    }  },  watch: {    value: function value(val) {      this.code = val;      this.setValues();    },    areaList: {      deep: true,      handler: 'setValues'    },    columnsNum: function columnsNum() {      var _this = this;      this.$nextTick(function () {        _this.setValues();      });    }  },  mounted: function mounted() {    this.setValues();  },  methods: {    // get list by code    getList: function getList(type, code) {      var result = [];      if (type !== 'province' && !code) {        return result;      }      var list = this[type];      result = Object.keys(list).map(function (listCode) {        return {          code: listCode,          name: list[listCode]        };      });      if (code) {        // oversea code        if (this.isOverseaCode(code) && type === 'city') {          code = '9';        }        result = result.filter(function (item) {          return item.code.indexOf(code) === 0;        });      }      if (this.placeholderMap[type] && result.length) {        // set columns placeholder        var codeFill = '';        if (type === 'city') {          codeFill = PLACEHOLDER_CODE.slice(2, 4);        } else if (type === 'county') {          codeFill = PLACEHOLDER_CODE.slice(4, 6);        }        result.unshift({          code: "" + code + codeFill,          name: this.placeholderMap[type]        });      }      return result;    },    // get index by code    getIndex: function getIndex(type, code) {      var compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;      var list = this.getList(type, code.slice(0, compareNum - 2)); // oversea code      if (this.isOverseaCode(code) && type === 'province') {        compareNum = 1;      }      code = code.slice(0, compareNum);      for (var i = 0; i < list.length; i++) {        if (list[i].code.slice(0, compareNum) === code) {          return i;        }      }      return 0;    },    // parse output columns data    parseOutputValues: function parseOutputValues(values) {      var _this2 = this;      return values.map(function (value, index) {        // save undefined value        if (!value) return value;        value = JSON.parse(JSON.stringify(value));        if (!value.code || value.name === _this2.columnsPlaceholder[index]) {          value.code = '';          value.name = '';        }        return value;      });    },    onChange: function onChange(picker, values, index) {      this.code = values[index].code;      this.setValues();      var parsedValues = this.parseOutputValues(picker.getValues());      this.$emit('change', picker, parsedValues, index);    },    onConfirm: function onConfirm(values, index) {      values = this.parseOutputValues(values);      this.setValues();      this.$emit('confirm', values, index);    },    getDefaultCode: function getDefaultCode() {      if (this.columnsPlaceholder.length) {        return PLACEHOLDER_CODE;      }      var countyCodes = Object.keys(this.county);      if (countyCodes[0]) {        return countyCodes[0];      }      var cityCodes = Object.keys(this.city);      if (cityCodes[0]) {        return cityCodes[0];      }      return '';    },    setValues: function setValues() {      var code = this.code;      if (!code) {        code = this.getDefaultCode();      }      var picker = this.$refs.picker;      var province = this.getList('province');      var city = this.getList('city', code.slice(0, 2));      if (!picker) {        return;      }      picker.setColumnValues(0, province);      picker.setColumnValues(1, city);      if (city.length && code.slice(2, 4) === '00' && !this.isOverseaCode(code)) {        code = city[0].code;      }      picker.setColumnValues(2, this.getList('county', code.slice(0, 4)));      picker.setIndexes([this.getIndex('province', code), this.getIndex('city', code), this.getIndex('county', code)]);    },    getValues: function getValues() {      var picker = this.$refs.picker;      var getValues = picker ? picker.getValues().filter(function (value) {        return !!value;      }) : [];      getValues = this.parseOutputValues(getValues);      return getValues;    },    getArea: function getArea() {      var values = this.getValues();      var area = {        code: '',        country: '',        province: '',        city: '',        county: ''      };      if (!values.length) {        return area;      }      var names = values.map(function (item) {        return item.name;      });      var validValues = values.filter(function (value) {        return !!value.code;      });      area.code = validValues.length ? validValues[validValues.length - 1].code : '';      if (this.isOverseaCode(area.code)) {        area.country = names[1] || '';        area.province = names[2] || '';      } else {        area.province = names[0] || '';        area.city = names[1] || '';        area.county = names[2] || '';      }      return area;    },    // @exposed-api    reset: function reset(code) {      this.code = code || '';      this.setValues();    }  },  render: function render() {    var h = arguments[0];    var on = _extends({}, this.$listeners, {      change: this.onChange,      confirm: this.onConfirm    });    return h(Picker, {      "ref": "picker",      "class": bem(),      "attrs": {        "showToolbar": true,        "valueKey": "name",        "title": this.title,        "columns": this.displayColumns,        "loading": this.loading,        "readonly": this.readonly,        "itemHeight": this.itemHeight,        "swipeDuration": this.swipeDuration,        "visibleItemCount": this.visibleItemCount,        "cancelButtonText": this.cancelButtonText,        "confirmButtonText": this.confirmButtonText      },      "scopedSlots": pickSlots(this, ['title', 'columns-top', 'columns-bottom']),      "on": _extends({}, on)    });  }});
 |