123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331 |
- "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 _shared = require("../picker/shared");
- var _picker = _interopRequireDefault(require("../picker"));
- var _createNamespace = (0, _utils.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;
- }
- var _default2 = createComponent({
- props: (0, _extends2.default)({}, _shared.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 = (0, _extends2.default)({}, this.$listeners, {
- change: this.onChange,
- confirm: this.onConfirm
- });
- return h(_picker.default, {
- "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": (0, _extends2.default)({}, on)
- });
- }
- });
- exports.default = _default2;
|