123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241 |
- import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
- import { ref, watch, computed, reactive, nextTick, onMounted, defineComponent } from "vue";
- import { deepClone } from "../utils/deep-clone.mjs";
- import { pick, extend, makeArrayProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
- import { pickerSharedProps } from "../picker/Picker.mjs";
- import { useExpose } from "../composables/use-expose.mjs";
- import { Picker } from "../picker/index.mjs";
- const [name, bem] = createNamespace("area");
- const EMPTY_CODE = "000000";
- const INHERIT_SLOTS = ["title", "cancel", "confirm", "toolbar", "columns-top", "columns-bottom"];
- const INHERIT_PROPS = ["title", "loading", "readonly", "itemHeight", "swipeDuration", "visibleItemCount", "cancelButtonText", "confirmButtonText"];
- const isOverseaCode = (code) => code[0] === "9";
- const areaProps = extend({}, pickerSharedProps, {
- value: String,
- columnsNum: makeNumericProp(3),
- columnsPlaceholder: makeArrayProp(),
- areaList: {
- type: Object,
- default: () => ({})
- },
- isOverseaCode: {
- type: Function,
- default: isOverseaCode
- }
- });
- var stdin_default = defineComponent({
- name,
- props: areaProps,
- emits: ["change", "confirm", "cancel"],
- setup(props, {
- emit,
- slots
- }) {
- const pickerRef = ref();
- const state = reactive({
- code: props.value,
- columns: [{
- values: []
- }, {
- values: []
- }, {
- values: []
- }]
- });
- const areaList = computed(() => {
- const {
- areaList: areaList2
- } = props;
- return {
- province: areaList2.province_list || {},
- city: areaList2.city_list || {},
- county: areaList2.county_list || {}
- };
- });
- const placeholderMap = computed(() => {
- const {
- columnsPlaceholder
- } = props;
- return {
- province: columnsPlaceholder[0] || "",
- city: columnsPlaceholder[1] || "",
- county: columnsPlaceholder[2] || ""
- };
- });
- const getDefaultCode = () => {
- if (props.columnsPlaceholder.length) {
- return EMPTY_CODE;
- }
- const {
- county,
- city
- } = areaList.value;
- const countyCodes = Object.keys(county);
- if (countyCodes[0]) {
- return countyCodes[0];
- }
- const cityCodes = Object.keys(city);
- if (cityCodes[0]) {
- return cityCodes[0];
- }
- return "";
- };
- const getColumnValues = (type, code) => {
- let column = [];
- if (type !== "province" && !code) {
- return column;
- }
- const list = areaList.value[type];
- column = Object.keys(list).map((listCode) => ({
- code: listCode,
- name: list[listCode]
- }));
- if (code) {
- if (type === "city" && props.isOverseaCode(code)) {
- code = "9";
- }
- column = column.filter((item) => item.code.indexOf(code) === 0);
- }
- if (placeholderMap.value[type] && column.length) {
- let codeFill = "";
- if (type === "city") {
- codeFill = EMPTY_CODE.slice(2, 4);
- } else if (type === "county") {
- codeFill = EMPTY_CODE.slice(4, 6);
- }
- column.unshift({
- code: code + codeFill,
- name: placeholderMap.value[type]
- });
- }
- return column;
- };
- const getIndex = (type, code) => {
- let compareNum = code.length;
- if (type === "province") {
- compareNum = props.isOverseaCode(code) ? 1 : 2;
- }
- if (type === "city") {
- compareNum = 4;
- }
- code = code.slice(0, compareNum);
- const list = getColumnValues(type, compareNum > 2 ? code.slice(0, compareNum - 2) : "");
- for (let i = 0; i < list.length; i++) {
- if (list[i].code.slice(0, compareNum) === code) {
- return i;
- }
- }
- return 0;
- };
- const setValues = () => {
- const picker = pickerRef.value;
- if (!picker) {
- return;
- }
- let code = state.code || getDefaultCode();
- const province = getColumnValues("province");
- const city = getColumnValues("city", code.slice(0, 2));
- picker.setColumnValues(0, province);
- picker.setColumnValues(1, city);
- if (city.length && code.slice(2, 4) === "00" && !props.isOverseaCode(code)) {
- [{
- code
- }] = city;
- }
- picker.setColumnValues(2, getColumnValues("county", code.slice(0, 4)));
- picker.setIndexes([getIndex("province", code), getIndex("city", code), getIndex("county", code)]);
- };
- const parseValues = (values) => values.map((value, index) => {
- if (value) {
- value = deepClone(value);
- if (!value.code || value.name === props.columnsPlaceholder[index]) {
- value.code = "";
- value.name = "";
- }
- }
- return value;
- });
- const getValues = () => {
- if (pickerRef.value) {
- const values = pickerRef.value.getValues().filter(Boolean);
- return parseValues(values);
- }
- return [];
- };
- const getArea = () => {
- const values = getValues();
- const area = {
- code: "",
- country: "",
- province: "",
- city: "",
- county: ""
- };
- if (!values.length) {
- return area;
- }
- const names = values.map((item) => item.name);
- const validValues = values.filter((value) => value.code);
- area.code = validValues.length ? validValues[validValues.length - 1].code : "";
- if (props.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;
- };
- const reset = (newCode = "") => {
- state.code = newCode;
- setValues();
- };
- const onChange = (values, index) => {
- state.code = values[index].code;
- setValues();
- if (pickerRef.value) {
- const parsedValues = parseValues(pickerRef.value.getValues());
- emit("change", parsedValues, index);
- }
- };
- const onConfirm = (values, index) => {
- setValues();
- emit("confirm", parseValues(values), index);
- };
- const onCancel = (...args) => emit("cancel", ...args);
- onMounted(setValues);
- watch(() => props.value, (value) => {
- state.code = value;
- setValues();
- });
- watch(() => props.areaList, setValues, {
- deep: true
- });
- watch(() => props.columnsNum, () => {
- nextTick(setValues);
- });
- useExpose({
- reset,
- getArea,
- getValues
- });
- return () => {
- const columns = state.columns.slice(0, +props.columnsNum);
- return _createVNode(Picker, _mergeProps({
- "ref": pickerRef,
- "class": bem(),
- "columns": columns,
- "columnsFieldNames": {
- text: "name"
- },
- "onChange": onChange,
- "onCancel": onCancel,
- "onConfirm": onConfirm
- }, pick(props, INHERIT_PROPS)), pick(slots, INHERIT_SLOTS));
- };
- }
- });
- export {
- stdin_default as default
- };
|