classroom/src/components/dictionary/dictionary.vue

<!--
* @FileDescription: 字典
* @Author: 黄琪勇
* @Date:2022-07-08 16:37:56
-->
<template>
   <el-cascader
      class="dictionary"
      v-model="myValue"
      :disabled="props.disabled"
      :size="props.size"
      :show-all-levels="false"
      :options="props.options"
      :props="propsOpt"
      :clearable="props.clearable"
      :placeholder="placeholder"
      :popperClass="popperClass"
   />
</template>

<script setup lang="ts">
import { CascaderOption, CascaderProps, CascaderValue } from "element-plus"
import { computed } from "vue"
import dictionaryCacheStore from "@/store/modules/dictionaryCache"

const dictionaryCacheStoreHook = dictionaryCacheStore()
const props = withDefaults(
   defineProps<{
      modelValue?: CascaderValue
      options?: CascaderOption[]
      clearable?: boolean
      propsOpt?: Omit<CascaderProps, "lazyLoad" | "emitPath" | "lazy">
      dictionaryKey?: string
      disabled?: boolean
      size?: "default" | "small" | "large"
      placeholder?: string
      popperClass?: string
   }>(),
   {
      clearable: true,
      propsOpt: () => {
         return {}
      }
   }
)
const emits = defineEmits<{
   (e: "update:modelValue", value?: CascaderValue): void
   (e: "change", value?: CascaderValue): void
}>()

const propsOpt: CascaderProps = {
   emitPath: Array.isArray(props.modelValue) ? true : false, //当可能为多级字典时候 emitPath为true 值为数组模式
   lazy: props.dictionaryKey ? true : false,
   leaf: "haveChild",
   async lazyLoad({ level, data }, resolve) {
      const dictionaryData = await dictionaryCacheStoreHook.getDictionary(level === 0 ? props.dictionaryKey! : (data!.itemdetailid as string))
      resolve(dictionaryData)
   }
}
//赋值
Object.assign(propsOpt, props.propsOpt)

const myValue = computed({
   get() {
      return props.modelValue
   },
   set(value) {
      emits("update:modelValue", value)
      emits("change", value)
   }
})
</script>

<style lang="scss">
.dictionary {
   width: 100%;
}
</style>