From ef2583ca7276d10d21d3d36194ffc03684286993 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Fri, 26 Feb 2021 18:44:49 +0800
Subject: [PATCH] feat: 修改SchemaForm

---
 examples/views/docs/component/schema-form.md | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/schema-form/index.vue               | 41 +++++++++++++++++------------------------
 2 files changed, 115 insertions(+), 24 deletions(-)

diff --git a/examples/views/docs/component/schema-form.md b/examples/views/docs/component/schema-form.md
index e4f710c..8adb68f 100644
--- a/examples/views/docs/component/schema-form.md
+++ b/examples/views/docs/component/schema-form.md
@@ -228,6 +228,104 @@ export default {
 
 :::
 
+## 显示状态
+
+支持配置`if`、`show`对表单项进行`v-if`、`v-show`逻辑的设置。
+
+::: snippet 隐藏表单项的示例
+
+```html
+<template>
+  <z-schema-form v-model="form" :schema="schema"></z-schema-form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        name: '张三',
+        age: 27,
+        address: '上海市青浦区华新镇纪鹤公路1988号',
+      },
+      schema: {
+        props: { labelWidth: '70px', size: 'small', span: 12 },
+        items: [
+          { is: 'el-input', prop: 'id', props: { disabled: true }, label: 'ID', show: false },
+          { is: 'el-input', prop: 'name', label: '姓名', rules: [{ required: true, message: '请输入姓名' }] },
+          { is: 'el-input-number', prop: 'age', label: '年龄', rules: [{ required: true, message: '请输入有效年龄' }] },
+          { is: 'el-input', props: { type: 'textarea' }, prop: 'address', label: '住址', span: 24 },
+          { is: 'el-input', prop: 'package', label: '包裹', span: 24, if: false },
+        ]
+      },
+    };
+  },
+};
+</script>
+```
+
+:::
+
+## 动态规则
+
+某些情况下，表单中的某一项根据另一项的值来做当前项`显示状态`、`校验规则`、`标签名称`的动态判断。支持将任意表单配置项的任意参数改写为`function`类型，参数提供`value`、`model`、`onInput`等。
+
+::: snippet 动态规则仅在配置项中有效，配置项子节点中无效
+
+```html
+<template>
+  <z-schema-form v-model="form" :schema="schema" @submit="onSubmit" @reset="onReset" @cancel="onCancel">
+    <template #footer="{ submit, reset, cancel }">
+      <z-form-item>
+        <el-button type="primary" @click="submit">确定</el-button>
+        <el-button plain @click="reset">重置</el-button>
+        <el-button plain @click="cancel">取消</el-button>
+      </z-form-item>
+    </template>
+  </z-schema-form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        name: '',
+        age: '',
+        address: '',
+      },
+      schema: {
+        props: { labelWidth: '70px', size: 'small', span: 12 },
+        items: [
+          { is: 'el-input', prop: 'name', label: '姓名', rules: [{ required: true, message: '请输入姓名' }] },
+          { is: 'el-input-number', prop: 'age', label: '年龄', rules: [{ required: true, message: '请输入有效年龄' }], if({ model }) { return model.name } },
+          { is: 'el-input', props: { type: 'textarea' }, prop: 'address', label: '住址', span: 24,
+            if({ model }) { return model.age },
+            rules({ model }) {
+              return model.address ? [{ required: true, min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'input' }] : [{ required: false }];
+            }
+          },
+        ]
+      },
+    };
+  },
+  methods: {
+    onSubmit(value) {
+      console.log(value);
+    },
+    onReset() {
+      console.log('reset');
+    },
+    onCancel() {
+      console.log('cancal');
+    }
+  }
+};
+</script>
+```
+
+:::
+
 ## 配置复用
 
 因为与`z-form`、`z-form-item`用法相同，所以除了可以用作表单以外，也可用作详情展示，同时因为本身是schema配置项，所以可以做到表单和详情**配置复用**。
diff --git a/packages/schema-form/index.vue b/packages/schema-form/index.vue
index b9f2fc2..16e2f7e 100644
--- a/packages/schema-form/index.vue
+++ b/packages/schema-form/index.vue
@@ -2,32 +2,16 @@
   <z-form ref="form" v-model="model" v-bind="schema.props" v-on="schema.props">
     <template v-for="(item, index) in schema.items">
       <template v-if="item.is">
-        <z-form-item v-bind="keywordFilter(item)" :key="index">
-          <slot
-            v-if="$scopedSlots[item.prop]"
-            :name="item.prop"
-            :value="get(model, item.prop)"
-            :onInput="value => onComponentInput({ value, item })"
-            :props="{ value: get(model, item.prop) }"
-            :listeners="{ input: value => onComponentInput({ value, item }) }"
-            v-bind="slotProps"
-          >
-          </slot>
+        <z-form-item v-if="bindParam(item, 'if', true)" v-show="bindParam(item, 'show', true)" v-bind="bindItemProps(item)" :key="index">
+          <slot v-if="$scopedSlots[item.prop]" :name="item.prop" :value="get(model, item.prop)" :onInput="value => onComponentInput({ value, item })" v-bind="slotProps"> </slot>
           <item-render v-else :item="item" :value="get(model, item.prop)" :onInput="value => onComponentInput({ value, item })"></item-render>
           <slot :name="`label-${item.prop}`" slot="label" v-bind="slotProps"></slot>
           <slot :name="`error-${item.prop}`" slot="error" v-bind="slotProps"></slot>
         </z-form-item>
       </template>
       <template v-else>
-        <z-form-item v-bind="keywordFilter(item)" :key="index" :value="get(model, item.prop)">
-          <slot
-            :name="item.prop"
-            :value="get(model, item.prop)"
-            :onInput="value => onComponentInput({ value, item })"
-            :props="{ value: get(model, item.prop) }"
-            :listeners="{ input: value => onComponentInput({ value, item }) }"
-            v-bind="slotProps"
-          ></slot>
+        <z-form-item v-if="bindParam(item, 'if', true)" v-show="bindParam(item, 'show', true)" v-bind="bindItemProps(item)" :key="index" :value="get(model, item.prop)">
+          <slot :name="item.prop" :value="get(model, item.prop)" :onInput="value => onComponentInput({ value, item })" v-bind="slotProps"></slot>
         </z-form-item>
       </template>
     </template>
@@ -118,6 +102,19 @@ export default {
   },
   methods: {
     get,
+    bindParam(item, key, def) {
+      if (typeof item[key] === 'function') {
+        return item[key]({ model: this.model });
+      }
+      return def || item[key];
+    },
+    bindItemProps(item) {
+      const { children, is, props, on, ...other } = item || {};
+      return Object.keys(other).reduce((result, current) => {
+        result = { ...result, [current]: this.bindParam(item, current, item[current]) };
+        return result;
+      }, {});
+    },
     validate(callback) {
       return this.$refs.form.validate(callback);
     },
@@ -130,10 +127,6 @@ export default {
     clearValidate(props) {
       return this.$refs.form.clearValidate(props);
     },
-    keywordFilter(val = {}) {
-      const { children, is, ...other } = val;
-      return other;
-    },
     onComponentInput({ value, item }) {
       set(this.model, item.prop, value);
     },
--
libgit2 0.21.0