CascaderArea 组件升级为 PcasCascader 组件

src/components/CascaderArea/index.vue

@@ -1,91 +0,0 @@
-<script setup name="CascaderArea">
-import area from '@/utils/area'
-
-const props = defineProps({
-    // 传入数据为中文数组，例如：['河北省', '唐山市', '市辖区']
-    modelValue: {
-        type: Array,
-        default: () => []
-    },
-    size: {
-        type: String,
-        default: ''
-    },
-    disabled: {
-        type: Boolean,
-        default: false
-    }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const data = ref({
-    options: area,
-    props: {
-        value: 'code',
-        label: 'name'
-    }
-})
-
-const myValue = computed({
-    // 将中文转成 code 码
-    get: () => {
-        const myValue = []
-        if (props.modelValue.length === 3) {
-            const [pName, cName, aName] = props.modelValue
-            area.map(p => {
-                if (p.name === pName) {
-                    myValue.push(p.code)
-                    p.children.map(c => {
-                        if (c.name === cName) {
-                            myValue.push(c.code)
-                            c.children.map(a => {
-                                if (a.name === aName) {
-                                    myValue.push(a.code)
-                                }
-                            })
-                        }
-                    })
-                }
-            })
-        }
-        return myValue
-    },
-    // 将 code 码转成中文
-    set: value => {
-        if (value) {
-            let [pCode, cCode, aCode] = value
-            area.map(p => {
-                if (p.code === pCode) {
-                    pCode = p.name
-                    p.children.map(c => {
-                        if (c.code === cCode) {
-                            cCode = c.name
-                            c.children.map(a => {
-                                if (a.code === aCode) {
-                                    aCode = a.name
-                                }
-                            })
-                        }
-                    })
-                }
-            })
-            emit('update:modelValue', [pCode, cCode, aCode])
-        } else {
-            emit('update:modelValue', [])
-        }
-    }
-})
-</script>
-
-<template>
-    <div>
-        <el-cascader v-model="myValue" :options="data.options" :props="data.props" :size="size" :disabled="disabled" clearable filterable />
-    </div>
-</template>
-
-<style lang="scss" scoped>
-:deep(.el-cascader) {
-    width: 100%;
-}
-</style>

src/components/PcasCascader/index.vue

@@ -0,0 +1,131 @@
+<script setup name="PcasCascader">
+import pcasRaw from './pcas-code.json'
+
+const props = defineProps({
+    modelValue: {
+        type: Array,
+        default: () => []
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    type: {
+        type: String,
+        default: 'pca'
+    },
+    format: {
+        type: String,
+        default: 'code'
+    }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const pcasData = computed(() => {
+    const data = []
+    // 省份
+    pcasRaw.forEach(p => {
+        const tempP = {
+            code: p.code,
+            name: p.name
+        }
+        const tempChildrenC = []
+        // 城市
+        p.children.forEach(c => {
+            const tempC = {
+                code: c.code,
+                name: c.name
+            }
+            if (['pca', 'pcas'].includes(props.type)) {
+                const tempChildrenA = []
+                // 区县
+                c.children.forEach(a => {
+                    const tempA = {
+                        code: a.code,
+                        name: a.name
+                    }
+                    if (props.type === 'pcas') {
+                        const tempChildrenS = []
+                        // 街道
+                        a.children.forEach(s => {
+                            const tempS = {
+                                code: s.code,
+                                name: s.name
+                            }
+                            tempChildrenS.push(tempS)
+                        })
+                        tempA.children = tempChildrenS
+                    }
+                    tempChildrenA.push(tempA)
+                })
+                tempC.children = tempChildrenA
+            }
+            tempChildrenC.push(tempC)
+        })
+        tempP.children = tempChildrenC
+        data.push(tempP)
+    })
+    return data
+})
+
+const myValue = computed({
+    // 将入参数据转成 code 码
+    get: () => {
+        return anyToCode(props.modelValue)
+    },
+    // 将 code 码转成出参数据
+    set: value => {
+        emit('update:modelValue', value ? codeToAny(value) : [])
+    }
+})
+
+function anyToCode(value, dictionarie = pcasData.value) {
+    const input = []
+    if (value.length > 0) {
+        const findItem = dictionarie.find(item => {
+            if (props.format === 'code') {
+                return item.code === value[0]
+            } else if (props.format === 'name') {
+                return item.name === value[0]
+            } else {
+                return item.name === value[0].name && item.code === value[0].code
+            }
+        })
+        input.push(findItem.code)
+        if (findItem.children) {
+            input.push(...anyToCode(value.slice(1 - value.length), findItem.children))
+        }
+    }
+    return input
+}
+
+function codeToAny(codes, dictionarie = pcasData.value) {
+    const output = []
+    const findItem = dictionarie.find(item => item.code === codes[0])
+    if (findItem) {
+        switch (props.format) {
+            case 'code':
+                output.push(findItem.code)
+                break
+            case 'name':
+                output.push(findItem.name)
+                break
+            case 'both':
+                output.push({
+                    code: findItem.code,
+                    name: findItem.name
+                })
+        }
+        const newCodes = codes.slice(1 - codes.length)
+        if (newCodes.length > 0 && findItem.children) {
+            output.push(...codeToAny(newCodes, findItem.children))
+        }
+    }
+    return output
+}
+</script>
+
+<template>
+    <el-cascader v-model="myValue" :options="pcasData" :props="{ value: 'code', label: 'name' }" :disabled="disabled" clearable filterable />
+</template>