工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-08-08 820397e43a0b64d35c6d31d2a55475061438593b
提交 | 用户 | 时间
820397 1 <!-- 数据字典 Select 选择器 -->
H 2 <template>
3   <el-select v-if="selectType === 'select'" class="w-1/1" v-bind="attrs">
4     <el-option
5       v-for="(dict, index) in getDictOptions"
6       :key="index"
7       :label="dict.label"
8       :value="dict.value"
9     />
10   </el-select>
11   <el-radio-group v-if="selectType === 'radio'" class="w-1/1" v-bind="attrs">
12     <el-radio v-for="(dict, index) in getDictOptions" :key="index" :value="dict.value">
13       {{ dict.label }}
14     </el-radio>
15   </el-radio-group>
16   <el-checkbox-group v-if="selectType === 'checkbox'" class="w-1/1" v-bind="attrs">
17     <el-checkbox
18       v-for="(dict, index) in getDictOptions"
19       :key="index"
20       :label="dict.label"
21       :value="dict.value"
22     />
23   </el-checkbox-group>
24 </template>
25
26 <script lang="ts" setup>
27 import { getBoolDictOptions, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
28
29 defineOptions({ name: 'DictSelect' })
30
31 const attrs = useAttrs()
32
33 // 接受父组件参数
34 interface Props {
35   dictType: string // 字典类型
36   valueType?: 'str' | 'int' | 'bool' // 字典值类型
37   selectType?: 'select' | 'radio' | 'checkbox' // 选择器类型，下拉框 select、多选框 checkbox、单选框 radio
38   formCreateInject?: any
39 }
40
41 const props = withDefaults(defineProps<Props>(), {
42   valueType: 'str',
43   selectType: 'select'
44 })
45
46 // 获得字典配置
47 const getDictOptions = computed(() => {
48   switch (props.valueType) {
49     case 'str':
50       return getStrDictOptions(props.dictType)
51     case 'int':
52       return getIntDictOptions(props.dictType)
53     case 'bool':
54       return getBoolDictOptions(props.dictType)
55     default:
56       return []
57   }
58 })
59 </script>