form-create: 优化 select option 选项解析，增加 el 表达式解析、自定义函数解析 (data: any)=>{ label: string; value: any }

src/components/FormCreate/src/components/useApiSelect.tsx

@@ -27,6 +27,11 @@ export const useApiSelect = (option: ApiSelectProps) => {
         type: String,
         default: 'GET'
       },
+      // 选项解析函数
+      parseFunc: {
+        type: String,
+        default: ''
+      },
       // 请求参数
       data: {
         type: String,
@@ -63,15 +68,43 @@ export const useApiSelect = (option: ApiSelectProps) => {
         }
 
         if (Array.isArray(data)) {
-          options.value = data.map((item: any) => ({
+          let parse: any = null
-            label: item[props.labelField],
+          if (!!props.parseFunc) {
-            value: item[props.valueField]
+            // 解析字符串函数
-          }))
+            parse = new Function(`return ${props.parseFunc}`)()
+          }
+          options.value = data.map(
+            (item: any) =>
+              parse?.(item) ?? {
+                label: parseExpression(item, props.labelField),
+                value: parseExpression(item, props.valueField)
+              }
+          )
           return
         }
         console.log(`接口[${props.url}] 返回结果不是一个数组`)
       }
 
+      function parseExpression(data: any, template: string) {
+        // 检测是否使用了表达式
+        if (template.indexOf('${') === -1) {
+          return data[template]
+        }
+        // 正则表达式匹配模板字符串中的 ${...}
+        const pattern = /\$\{([^}]*)}/g
+        // 使用replace函数配合正则表达式和回调函数来进行替换
+        return template.replace(pattern, (_, expr) => {
+          // expr 是匹配到的 ${} 内的表达式（这里是属性名），从 data 中获取对应的值
+          const result = data[expr.trim()] // 去除前后空白，以防用户输入带空格的属性名
+          if (!result) {
+            console.warn(
+              `接口选择器选项模版[${template}][${expr.trim()}] 解析值失败结果为[${result}], 请检查属性名称是否存在于接口返回值中,存在则忽略此条！！！`
+            )
+          }
+          return result
+        })
+      }
+
       onMounted(async () => {
         await getOptions()
       })

src/components/FormCreate/src/config/selectRule.ts

@@ -13,7 +13,7 @@ const selectRule = [
     control: [
       {
         value: 'select',
-        condition: '=',
+        condition: '==',
         method: 'hidden',
         rule: ['multiple']
       }
@@ -141,6 +141,17 @@ const apiSelectRule = [
     props: {
       placeholder: 'id'
     }
+  },
+  {
+    type: 'input',
+    field: 'parseFunc',
+    title: '选项解析函数',
+    info: '(data: any)=>{ label: string; value: any }',
+    props: {
+      autosize: true,
+      rows: { minRows: 2, maxRows: 6 },
+      type: 'textarea'
+    }
   }
 ]
 

src/components/FormCreate/src/utils/index.ts

@@ -1,4 +1,3 @@
-// TODO puhui999: 借鉴一下 form-create-designer utils 方法 🤣 (导入不了只能先 copy 过来用下)
 export function makeRequiredRule() {
   return {
     type: 'Required',