| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201 |
- import _extends from "@babel/runtime/helpers/esm/extends";
- import { use } from '../utils';
- import Picker from '../picker';
- import { pickerProps } from '../picker/shared';
- var _use = use('area'),
- sfc = _use[0],
- bem = _use[1];
- export default sfc({
- props: _extends({}, pickerProps, {
- value: String,
- areaList: {
- type: Object,
- "default": function _default() {
- return {};
- }
- },
- columnsNum: {
- type: [String, Number],
- "default": 3
- }
- }),
- 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);
- }
- },
- watch: {
- value: function value() {
- this.code = this.value;
- this.setValues();
- },
- areaList: {
- deep: true,
- handler: function handler() {
- 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 (code[0] === '9' && type === 'city') {
- code = '9';
- }
- result = result.filter(function (item) {
- return item.code.indexOf(code) === 0;
- });
- }
- 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 (code[0] === '9' && 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;
- },
- onChange: function onChange(picker, values, index) {
- this.code = values[index].code;
- this.setValues();
- this.$emit('change', picker, picker.getValues(), index);
- },
- setValues: function setValues() {
- var code = this.code || Object.keys(this.county)[0] || '';
- 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') {
- 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() {
- return this.$refs.picker ? this.$refs.picker.getValues().filter(function (value) {
- return !!value;
- }) : [];
- },
- 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;
- });
- area.code = values[values.length - 1].code;
- if (area.code[0] === '9') {
- area.country = names[1] || '';
- area.province = names[2] || '';
- } else {
- area.province = names[0] || '';
- area.city = names[1] || '';
- area.county = names[2] || '';
- }
- return area;
- },
- reset: function reset() {
- this.code = '';
- this.setValues();
- }
- },
- render: function render(h) {
- var on = _extends({}, this.$listeners, {
- change: this.onChange
- });
- return h(Picker, {
- "ref": "picker",
- "class": bem(),
- "attrs": {
- "showToolbar": true,
- "valueKey": "name",
- "title": this.title,
- "loading": this.loading,
- "columns": this.displayColumns,
- "itemHeight": this.itemHeight,
- "visibleItemCount": this.visibleItemCount,
- "cancelButtonText": this.cancelButtonText,
- "confirmButtonText": this.confirmButtonText
- },
- "on": _extends({}, on)
- });
- }
- });
|