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>

src/router/modules/component.extend.example.js

@@ -91,11 +91,11 @@ export default {
             }
         },
         {
-            path: 'area',
-            name: 'componentExtendExampleArea',
-            component: () => import('@/views/component_extend_example/area.demo.vue'),
+            path: 'pcas',
+            name: 'componentExtendExamplePcas',
+            component: () => import('@/views/component_extend_example/pcas.demo.vue'),
             meta: {
-                title: '省市区联动'
+                title: '省市区街道联动'
             }
         },
         {

src/views/component_extend_example/area.demo.vue

@@ -1,57 +0,0 @@
-<route>
-{
-    meta: {
-        enabled: false
-    }
-}
-</route>
-
-<script>
-export default {
-    name: 'ComponentExampleArea',
-    props: {},
-    data() {
-        return {
-            area: ['浙江省', '杭州市', '西湖区'],
-            ruleForm: {
-                area: []
-            },
-            rules: {
-                area: [
-                    { type: 'array', required: true, message: '请选择地区', trigger: 'change' }
-                ]
-            }
-        }
-    },
-    created() {},
-    mounted() {},
-    methods: {
-        submitForm() {
-            this.$refs.ruleForm.validate(valid => {
-                if (valid) {
-                    alert('提交成功')
-                }
-            })
-        }
-    }
-}
-</script>
-
-<template>
-    <div>
-        <page-header title="省市区联动" content="CascaderArea" />
-        <page-main>
-            <cascader-area v-model="area" />
-        </page-main>
-        <page-main title="表单验证">
-            <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
-                <el-form-item label="地区" prop="area">
-                    <cascader-area v-model="ruleForm.area" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="submitForm">提交</el-button>
-                </el-form-item>
-            </el-form>
-        </page-main>
-    </div>
-</template>

src/views/component_extend_example/pcas.demo.vue

@@ -0,0 +1,71 @@
+<route>
+{
+  meta: {
+    enabled: false
+  }
+}
+</route>
+
+<script setup name="ComponentExampleArea">
+const pcas1 = ref([])
+const pcas2 = ref([])
+const pcas3 = ref([])
+const pcasCode = ref(['33', '3301', '330106'])
+const pcasName = ref(['浙江省', '杭州市', '西湖区'])
+const pcasBoth = ref([
+    { code: '33', name: '浙江省' },
+    { code: '3301', name: '杭州市' },
+    { code: '330106', name: '西湖区' }
+])
+
+const formRef = ref()
+const ruleForm = ref({
+    pca: []
+})
+const rules = ref({
+    pca: [
+        { type: 'array', required: true, message: '请选择地区', trigger: 'change' }
+    ]
+})
+function submitForm() {
+    formRef.value.validate(valid => {
+        if (valid) {
+            ElMessage('提交成功')
+        }
+    })
+}
+</script>
+
+<template>
+    <div>
+        <page-header title="省市区街道联动" content="PcasCascader" />
+        <page-main title="多级联动">
+            <p>省份/城市联动</p>
+            <pcas-cascader v-model="pcas1" type="pc" />
+            <p>省份/城市/区县联动</p>
+            <pcas-cascader v-model="pcas2" />
+            <p>省份/城市/区县/街道联动</p>
+            <pcas-cascader v-model="pcas3" type="pcas" />
+        </page-main>
+        <page-main title="数据格式化">
+            <p>{{ pcasCode }}</p>
+            <pcas-cascader v-model="pcasCode" />
+            <p>{{ pcasName }}</p>
+            <pcas-cascader v-model="pcasName" format="name" />
+            <p>{{ pcasBoth }}</p>
+            <pcas-cascader v-model="pcasBoth" format="both" />
+        </page-main>
+        <page-main title="表单验证">
+            <el-form ref="formRef" :model="ruleForm" :rules="rules">
+                <el-form-item label="地区" prop="pca">
+                    <pcas-cascader v-model="ruleForm.pca" />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="submitForm">
+                        提交
+                    </el-button>
+                </el-form-item>
+            </el-form>
+        </page-main>
+    </div>
+</template>