Browse Source

feat: 表单设计器-部门选择器增加可选返回部门id或者部门名称

zhanglc 2 tháng trước cách đây
mục cha
commit
0d26e3b7e2

+ 20 - 4
src/components/FormCreate/src/components/useApiSelect.tsx

@@ -56,6 +56,11 @@ export const useApiSelect = (option: ApiSelectProps) => {
       remoteField: {
         type: String,
         default: 'label'
+      },
+      // 返回值类型(用于部门选择器等):id 返回ID,name 返回名称
+      returnType: {
+        type: String,
+        default: 'id'
       }
     },
     setup(props) {
@@ -119,10 +124,21 @@ export const useApiSelect = (option: ApiSelectProps) => {
 
       function parseOptions0(data: any[]) {
         if (Array.isArray(data)) {
-          options.value = data.map((item: any) => ({
-            label: parseExpression(item, props.labelField),
-            value: parseExpression(item, props.valueField)
-          }))
+          options.value = data.map((item: any) => {
+            const label = parseExpression(item, props.labelField)
+            let value = parseExpression(item, props.valueField)
+
+            // 根据 returnType 决定返回值
+            // 如果设置了 returnType 为 'name',则返回 label 作为 value
+            if (props.returnType === 'name') {
+              value = label
+            }
+
+            return {
+              label: label,
+              value: value
+            }
+          })
           return
         }
         console.warn(`接口[${props.url}] 返回结果不是一个数组`)

+ 14 - 2
src/components/FormCreate/src/useFormCreateDesigner.ts

@@ -35,7 +35,7 @@ export const useFormCreateDesigner = async (designer: Ref) => {
     // 移除自带的上传组件规则,使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
     designer.value?.removeMenuItem('upload')
     // 移除自带的富文本组件规则,使用 editorRule 替代
-    designer.value?.removeMenuItem('fc-editor')
+    designer.value?.removeMenuItem('fcEditor')
     const components = [editorRule, uploadFileRule, uploadImgRule, uploadImgsRule]
     components.forEach((component) => {
       // 插入组件规则
@@ -57,7 +57,19 @@ export const useFormCreateDesigner = async (designer: Ref) => {
   const deptSelectRule = useSelectRule({
     name: 'DeptSelect',
     label: '部门选择器',
-    icon: 'icon-address-card-o'
+    icon: 'icon-address-card-o',
+    props: [
+      {
+        type: 'select',
+        field: 'returnType',
+        title: '返回值类型',
+        value: 'id',
+        options: [
+          { label: '部门ID', value: 'id' },
+          { label: '部门名称', value: 'name' }
+        ]
+      }
+    ]
   })
   const dictSelectRule = useDictSelectRule()
   const apiSelectRule0 = useSelectRule({