添加AreaCascade区域级联选择组件

auto-imports.d.ts

@@ -4,60 +4,5 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const EffectScope: typeof import('vue')['EffectScope']
-  const computed: typeof import('vue')['computed']
-  const createApp: typeof import('vue')['createApp']
-  const customRef: typeof import('vue')['customRef']
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: typeof import('vue')['defineComponent']
-  const effectScope: typeof import('vue')['effectScope']
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: typeof import('vue')['h']
-  const inject: typeof import('vue')['inject']
-  const isProxy: typeof import('vue')['isProxy']
-  const isReactive: typeof import('vue')['isReactive']
-  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: typeof import('vue')['isRef']
-  const markRaw: typeof import('vue')['markRaw']
-  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: typeof import('vue')['onUpdated']
-  const provide: typeof import('vue')['provide']
-  const reactive: typeof import('vue')['reactive']
-  const readonly: typeof import('vue')['readonly']
-  const ref: typeof import('vue')['ref']
-  const resolveComponent: typeof import('vue')['resolveComponent']
-  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: typeof import('vue')['shallowRef']
-  const toRaw: typeof import('vue')['toRaw']
-  const toRef: typeof import('vue')['toRef']
-  const toRefs: typeof import('vue')['toRefs']
-  const triggerRef: typeof import('vue')['triggerRef']
-  const unref: typeof import('vue')['unref']
-  const useAttrs: typeof import('vue')['useAttrs']
-  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVars: typeof import('vue')['useCssVars']
-  const useSlots: typeof import('vue')['useSlots']
-  const watch: typeof import('vue')['watch']
-  const watchEffect: typeof import('vue')['watchEffect']
-  const watchPostEffect: typeof import('vue')['watchPostEffect']
-  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
-}
-// for type re-export
-declare global {
-  // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  const ElCascader: typeof import('element-plus/es')['ElCascader']
 }

components.d.ts

@@ -9,6 +9,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AreaCascade: typeof import('./src/components/select/AreaCascade.vue')['default']
     AreaCascadeSelect: typeof import('./src/components/select/AreaCascadeSelect.vue')['default']
     AreaSelectCascade: typeof import('./src/components/select/AreaSelectCascade.vue')['default']
     BaseChart: typeof import('./src/components/charts/BaseChart.vue')['default']
@@ -22,6 +23,7 @@ declare module '@vue/runtime-core' {
     DySelectCascade: typeof import('./src/components/select/DySelectCascade.vue')['default']
     DySelectTree: typeof import('./src/components/select/DySelectTree.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']

src/components/Forms/models.ts

@@ -19,7 +19,7 @@ export type VbFormItem = {
   placeholder?: string
   rules?: Array<string | Array<FormItemRule> | FormItemRule> //全局规则的KEY 或 自定义的规则
   ruleFormat?: Array<Array<string | number> | undefined> //数组索引对应rules顺序,对应的rule是自定义的（或者没有format数据）要填undefined  eg: [[0,1],undfiend,["名称"]]
-  data?: Array<{ label: string; value: string; class?: string; style?: string; disabled?: boolean }>
+  data?: Array<{ label: string; value: string | number; class?: string; style?: string; disabled?: boolean }>
   itemProps?: object // 注入到 el-form-item 的属性
   props?: object // 当 component 为渲染组件时，注入到渲染组件当中的属性
   listeners?: object // 当 component 为渲染组件时，注入到渲染组件当中的事件

src/components/Modals/VbModal.vue

@@ -118,7 +118,7 @@ function cancel() {
     emits("cancel", modalFormEl.value, (v: boolean) => {
       result = v
     })
-    console.log("cancel", result)
+    //console.log("cancel", result)
     //callback传false 阻止modal关闭
     if (result) {
       modalFormEl.value?.resetFields()

src/components/select/AreaCascade.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+//三级联动
+import { ref, withDefaults, onMounted, computed, type WritableComputedRef } from "vue"
+import Rs from "@/core/services/RequestService"
+
+const props = withDefaults(
+  defineProps<{
+    value: Array<string>
+    clearable?: boolean
+    cascaderProps?: object
+    attrs?: object
+  }>(),
+  {
+    value: () => ["", "", ""],
+    cascaderProps: () => {
+      return {
+        //expandTrigger: "hover" as const,
+        checkStrictly: true,
+      }
+    },
+    clearable: true,
+  }
+)
+const emits = defineEmits<{
+  (e: "update:value", v: Array<string>): void
+  (e: "change", v: Array<string>): void
+}>()
+const value: WritableComputedRef<Array<string>> = computed({
+  get(): Array<string> {
+    return props.value
+  },
+  set(v: Array<string>) {
+    emits("update:value", v)
+  },
+})
+const data = ref()
+const cascader = ref()
+function change() {
+  //const v = [province.value, city.value, district.value]
+
+  emits("change", value.value)
+  cascader.value.togglePopperVisible()
+}
+function init() {
+  Rs.get("sys/dict/getArea").then((res) => {
+    data.value = res.data
+  })
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+<template>
+  <el-cascader
+    ref="cascader"
+    v-model="value"
+    :options="data"
+    :props="cascaderProps"
+    :clearable="clearable"
+    v-bind="attrs"
+    @change="change"
+  ></el-cascader>
+</template>

src/views/overAnalysis/overParam.vue

@@ -5,7 +5,7 @@ import { maper } from "@/core/utils/utils"
 import Rs from "@/core/services/RequestService"
 import type { VbFormItem } from "@/components/Forms/models"
 import OrgSelectTree from "@/components/Tree/OrgSelectTree.vue"
-import AreaCascadeSelect from "@/components/select/AreaCascadeSelect.vue"
+import AreaCascade from "@/components/select/AreaCascade.vue"
 import { ElInput } from "element-plus"
 import { RULE_KEYS } from "@/core/config/rules"
 import { ElSelect, ElRadioGroup, ElCheckboxGroup } from "element-plus"
@@ -39,13 +39,7 @@ const saveUrl = computed(() => {
     ? "sys/organizational/delById"
     : ""
 })
-const areaData = ref([])
-function load() {
-  Rs.get("sys/dict/getArea").then((res) => {
-    areaData.value = res.data
-  })
-}
-load()
+
 //只放增改传到后台的共用参数,其余需要modal显示的参数另外定义
 const emptyData = {
   org_id: "",
@@ -61,6 +55,7 @@ const emptyData = {
 const formData = ref<any>(
   Object.assign({}, emptyData, { province_city_district: ["", "", ""], simple_name2: [], simple_name3: false })
 )
+
 const items: Array<VbFormItem> = [
   {
     field: "parent_id",
@@ -94,15 +89,9 @@ const items: Array<VbFormItem> = [
   {
     field: "province_city_district",
     label: "省/市/区",
-    component: AreaCascadeSelect,
+    class: "w-100",
+    component: AreaCascade,
     listeners: { change: pcdChange },
-    //component: ElCascader,
-    // props: {
-    //   expandTrigger: "hover" as const,
-    //   clearable: true,
-    //   checkStrictly: true,
-    //   options: areaData.value,
-    // },
   },
   {
     field: "description",
@@ -181,7 +170,6 @@ function edit(row: any) {
   formData.value = Object.assign({}, row)
   modal.value.show()
 }
-
 function deleteRow(row: any) {
   //console.log("DELETE_ROW", row)
   opreationType.value = "D"