refactor: GiForm 新增动态禁用配置项

package.json

@@ -29,7 +29,7 @@
     "dayjs": "^1.11.4",
     "echarts": "^5.4.2",
     "jsencrypt": "^3.3.2",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "md-editor-v3": "^4.6.2",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",

pnpm-lock.yaml

@@ -56,7 +56,7 @@ dependencies:
   jsencrypt:
     specifier: ^3.3.2
     version: 3.3.2
-  lodash:
+  lodash-es:
     specifier: ^4.17.21
     version: 4.17.21
   md-editor-v3:
@@ -4413,6 +4413,7 @@ packages:
 
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: true
 
   /lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}

src/components/GiForm/src/GiForm.vue

@@ -8,8 +8,14 @@
           v-bind="item.col || item.span ? item.col : options.col"
           v-show="index <= (options.fold?.index || 0) || (index >= (options.fold?.index || 0) && !collapsed)"
         >
-          <a-form-item v-bind="item.item" :label="item.label" :field="item.field" :rules="item.rules">
+          <a-form-item
-            <slot :name="item.field">
+            v-bind="item.item"
+            :label="item.label"
+            :field="item.field"
+            :rules="item.rules"
+            :disabled="isDisabled(item.disabled)"
+          >
+            <slot :name="item.field" v-bind="{ disabled: isDisabled(item.disabled) }">
               <template v-if="item.type === 'input'">
                 <a-input
                   :placeholder="`请输入${item.label}`"
@@ -165,9 +171,9 @@
 </template>
 
 <script setup lang="ts">
-import type { Options, Columns, ColumnsItemHide, ColumnsItem } from './type'
+import type { Options, Columns, ColumnsItemHide, ColumnsItemDisabled, ColumnsItem } from './type'
 import type * as A from '@arco-design/web-vue'
-import _ from 'lodash'
+import { cloneDeep } from 'lodash-es'
 
 interface Props {
   modelValue: any
@@ -199,6 +205,14 @@ const isHide = (hide?: ColumnsItemHide<boolean | object>) => {
   }
 }
 
+const isDisabled = (disabled?: ColumnsItemDisabled<boolean | object>) => {
+  if (disabled === undefined) return false
+  if (typeof disabled === 'boolean') return disabled
+  if (typeof disabled === 'function') {
+    return disabled(props.modelValue)
+  }
+}
+
 const dicData: Record<string, any> = reactive({})
 props.columns.forEach((item) => {
   if (item.request && typeof item.request === 'function' && item?.init) {
@@ -219,7 +233,7 @@ props.columns.forEach((item) => {
 })
 
 // 要深克隆，否则无法监听新旧值变化
-const cloneForm = computed(() => _.cloneDeep(props.modelValue))
+const cloneForm = computed(() => cloneDeep(props.modelValue))
 
 watch(cloneForm as any, (newVal, oldVal) => {
   hasCascaderColumns.forEach((item) => {

src/components/GiForm/src/hooks.ts

@@ -1,10 +1,10 @@
 import { reactive } from 'vue'
-import _ from 'lodash'
+import { cloneDeep } from 'lodash-es'
 import type { Columns, ColumnsItem, ColumnsItemPropsKey } from './type'
 import { Message } from '@arco-design/web-vue'
 
 export function useGiForm(initValue: Columns) {
-  const getInitValue = () => _.cloneDeep(initValue)
+  const getInitValue = () => cloneDeep(initValue)
 
   const columns = reactive(getInitValue())
 

src/components/GiForm/src/type.ts

@@ -31,6 +31,7 @@ export type ColumnsItemPropsKey =
   | keyof A.TreeSelectInstance['$props']
 
 export type ColumnsItemHide<F> = boolean | ((form: F) => boolean)
+export type ColumnsItemDisabled<F> = boolean | ((form: F) => boolean)
 export type ColumnsItemRequest<F = any> = (form: F) => Promise<any>
 export type ColumnsItemFormat<T = any> = (
   res: T
@@ -49,8 +50,8 @@ export type ColumnsItemOptionsOrData =
   | A.TreeSelectInstance['$props']['data']
 
 export interface ColumnsItem<F = any> {
-  type: FormType // 类型
+  type?: FormType // 类型
-  label: A.FormItemInstance['label'] // 标签
+  label?: A.FormItemInstance['label'] // 标签
   field: A.FormItemInstance['field'] // 字段(必须唯一)
   span?: number // 栅格占位格数
   col?: A.ColProps // a-col的props, 响应式布局, 优先级大于span
@@ -79,6 +80,7 @@ export interface ColumnsItem<F = any> {
   // 下拉树组件的data
   data?: A.TreeSelectInstance['$props']['data']
   hide?: ColumnsItemHide<F> // 是否隐藏
+  disabled?: ColumnsItemDisabled<F> // 是否禁用
   request?: ColumnsItemRequest<F> // 接口请求api
   resultFormat?: ColumnsItemFormat // 结果集格式化
   init?: boolean // 初始化请求