VbModal,VbForm修复bug及优化

src/components/Forms/VbForm.vue

@@ -10,7 +10,7 @@ const props = withDefaults(
     items?: Array<VbFormColItem>
     class?: string
     labelWidth?: number | string
-    rules?: Array<FormItemRule>
+    rules?: { [index: string]: Array<FormItemRule> }
     gutter?: number
     span?: number
     size?: "large" | "default" | "small"
@@ -71,7 +71,11 @@ defineExpose({ resetFields, clearValidate, validate, VbForm })
             :rules="rules"
             :gutter="gutter"
             :span="span"
-          ></VbFormItem>
+          >
+            <template v-for="(_, name) in $slots" #[name]>
+              <slot :name="name" />
+            </template>
+          </VbFormItem>
         </template>
       </el-row>
     </template>
@@ -86,7 +90,11 @@ defineExpose({ resetFields, clearValidate, validate, VbForm })
           :rules="rules"
           :gutter="gutter"
           :span="span"
-        ></VbFormItem>
+        >
+          <template v-for="(_, name) in $slots" #[name]>
+            <slot :name="name" />
+          </template>
+        </VbFormItem>
       </el-row>
     </template>
   </el-form>

src/components/Forms/VbFormItem.vue

@@ -10,7 +10,7 @@ const props = withDefaults(
     data: any
     item: VbFormItem
     labelWidth?: number | string
-    rules?: Array<FormItemRule>
+    rules?: { [index: string]: Array<FormItemRule> }
     gutter?: number
     span?: number
     size?: "large" | "default" | "small"
@@ -39,19 +39,12 @@ const getRules = (item: VbFormItem): Array<FormItemRule> => {
       const r = item.rules[i]
       let rule
       if (typeof r == "string") {
-        if (props.rules) {
-          rule = props.rules.find((v: any) => {
-            return v.name == r
-          })
-        }
-        if (!rule) {
-          rule = getConfigRule(r, item.ruleFormat ? item.ruleFormat[i] : undefined)
-        }
+        rule = props.rules ? props.rules[r] : getConfigRule(r, item.ruleFormat ? item.ruleFormat[i] : undefined)
         if (rule) {
-          _rules.push(rule)
+          Array.isArray(rule) ? _rules.push(...rule) : _rules.push(rule)
         }
       } else if (typeof r == "object") {
-        _rules.push(r)
+        Array.isArray(r) ? _rules.push(...r) : _rules.push(r)
       }
     }
   }
@@ -65,7 +58,7 @@ const getRules = (item: VbFormItem): Array<FormItemRule> => {
   ) {
     const rule = getConfigRule(RULE_KEYS.REQUIRED, [item.label?.toString() ?? ""])
     if (rule) {
-      _rules.push(rule)
+      Array.isArray(rule) ? _rules.push(...rule) : _rules.push(rule)
     }
   }
   //console.log("RULES===", _rules)

src/components/Forms/models.ts

@@ -10,14 +10,14 @@ export type VbFormItem = {
   itemStyle?: string
   style?: string
   type?: string
-  component?: string | "slot" | "innerText" | Component //支持 slot、innerText、string 时就是指组件名
+  component?: "slot" | "innerText" | Component //支持 slot、innerText、string 时就是指组件名
   innerText?: string //component 为 innerText 时，优先显示的文本，否则会显示当前的字段值
   span?: number
   hidden?: boolean
   labelWidth?: number
   size?: "large" | "default" | "small"
   placeholder?: string
-  rules?: Array<string | FormItemRule> //全局规则的KEY 或 自定义的规则
+  rules?: Array<string | Array<FormItemRule> | FormItemRule> //全局规则的KEY 或 自定义的规则
   ruleFormat?: Array<Array<string | number> | undefined> //数组索引对应rules顺序,对应的rule是自定义的（或者没有format数据）要填undefined  eg: [[0,1],undfiend,["名称"]]
   data?: Array<{ label: string; value: string; class?: string; style?: string; disabled?: boolean }>
   itemProps?: object // 注入到 el-form-item 的属性

src/components/Modals/VbModal.vue

@@ -16,7 +16,7 @@ const props = withDefaults(
     formData?: any // 模态框表单数据
     formRowItems?: Array<VbFormRowItem>
     formItems?: Array<VbFormItem>
-    formRules?: Array<FormItemRule>
+    formRules?: { [index: string]: Array<FormItemRule> }
     formLabelWidth?: string | number // 表单label宽度
     formSize?: "large" | "default" | "small"
     gutter?: number
@@ -194,7 +194,16 @@ watch(
   () => props.id,
   () => init
 )
-
+//form表单的插槽 需要_form结尾,并去掉_form传递给VbForm组件
+function isFormSlot(v: string | number): string | undefined {
+  let str
+  const formSlotSuffix = "_form"
+  v = v as string
+  if (v.search(formSlotSuffix) > 0) {
+    str = v.substring(0, v.length - formSlotSuffix.length)
+  }
+  return str
+}
 onMounted(() => {
   init()
 })
@@ -251,7 +260,11 @@ defineExpose({ show })
               :gutter="gutter"
               v-bind="formProps"
               v-on="formListeners"
-            ></VbForm>
+            >
+              <template v-for="(_, name) in $slots" #[`${isFormSlot(name)}`]>
+                <slot v-if="isFormSlot(name)" :name="name" />
+              </template>
+            </VbForm>
           </template>
         </div>
         <div class="modal-footer" :class="modalFooterClass" :style="modalFooterStyle">

src/views/overAnalysis/overParam.vue

@@ -150,6 +150,20 @@ const items: Array<VbFormItem> = [
     span: 12,
     data: [{ label: "Q1", value: "1" }],
   },
+  {
+    field: "test",
+    label: "slot测试",
+    component: "slot",
+    span: 24,
+  },
+  {
+    field: "simple_name",
+    label: "text测试",
+    component: "innerText",
+    innerText: "text测试",
+    class: "text-success",
+    span: 24,
+  },
 ]
 function pcdChange(v: Array<string>) {
   console.log("PCD", v)
@@ -288,5 +302,9 @@ function onSave() {
     modal-body-class="px-10"
     @cancel="onCancel"
     @confirm="onSave"
-  ></VbModal>
+  >
+    <template #test_form>
+      <span class="bg-danger text-white px-5">SIMPLE:{{ formData.simple_name }}</span>
+    </template>
+  </VbModal>
 </template>