fix: [bpm] web-ele版本 流程表单字典选择器下拉无法选中问题

apps/web-ele/src/components/form-create/components/dict-select.vue

@@ -2,7 +2,7 @@
 <script lang="ts" setup>
 import type { DictSelectProps } from '../typing';
 
-import { computed, useAttrs } from 'vue';
+import { computed, ref, useAttrs, watch } from 'vue';
 
 import { getDictOptions } from '@vben/hooks';
 
@@ -22,8 +22,24 @@ const props = withDefaults(defineProps<DictSelectProps>(), {
   selectType: 'select',
 });
 
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: any): void;
+}>();
+
 const attrs = useAttrs();
 
+/** 内部选中值 */
+const selectedValue = ref<any>();
+
+/** 同步 modelValue 到内部选中值 */
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    selectedValue.value = newVal;
+  },
+  { immediate: true },
+);
+
 /** 获得字典配置 */
 const getDictOption = computed(() => {
   switch (props.valueType) {
@@ -31,20 +47,30 @@ const getDictOption = computed(() => {
       return getDictOptions(props.dictType, 'boolean');
     }
     case 'int': {
-      return getDictOptions(props.dictType);
+      return getDictOptions(props.dictType, 'number');
     }
     case 'str': {
-      return getDictOptions(props.dictType);
+      return getDictOptions(props.dictType, 'string');
     }
     default: {
       return [];
     }
   }
 });
+
+function handleChange(value: any) {
+  emit('update:modelValue', value);
+}
 </script>
 
 <template>
-  <ElSelect v-if="selectType === 'select'" class="w-1/1" v-bind="attrs">
+  <ElSelect
+    v-if="selectType === 'select'"
+    v-model="selectedValue"
+    class="w-full"
+    v-bind="attrs"
+    @change="handleChange"
+  >
     <ElOption
       v-for="(dict, index) in getDictOption"
       :key="index"
@@ -52,24 +78,32 @@ const getDictOption = computed(() => {
       :label="dict.label"
     />
   </ElSelect>
-  <ElRadioGroup v-if="selectType === 'radio'" class="w-1/1" v-bind="attrs">
+  <ElRadioGroup
+    v-if="selectType === 'radio'"
+    v-model="selectedValue"
+    class="w-full"
+    v-bind="attrs"
+    @change="handleChange"
+  >
     <ElRadio
       v-for="(dict, index) in getDictOption"
       :key="index"
-      :label="dict.value"
+      :value="dict.value"
     >
       {{ dict.label }}
     </ElRadio>
   </ElRadioGroup>
   <ElCheckboxGroup
     v-if="selectType === 'checkbox'"
-    class="w-1/1"
+    v-model="selectedValue"
+    class="w-full"
     v-bind="attrs"
+    @change="handleChange"
   >
     <ElCheckbox
       v-for="(dict, index) in getDictOption"
       :key="index"
-      :label="dict.value"
+      :value="dict.value"
     >
       {{ dict.label }}
     </ElCheckbox>

apps/web-ele/src/components/form-create/typing.ts

@@ -3,6 +3,7 @@ export interface DictSelectProps {
   dictType: string; // 字典类型
   valueType?: 'bool' | 'int' | 'str'; // 字典值类型
   selectType?: 'checkbox' | 'radio' | 'select'; // 选择器类型，下拉框 select、多选框 checkbox、单选框 radio
+  modelValue?: any; // 选中值，由 form-create 通过 modelField 绑定
   formCreateInject?: any;
 }