feat: 支持Function动态Props

刘汉宸
1 parent 32ccef0e
Showing 4 changed files with 110 additions and 61 deletions Show diff stats
packages/filter/index.vue
packages/form/form-render.vue
packages/form/index.vue
packages/scheme/index.vue
 <template>
-  <z-form v-model="model" class="zee-filter" :list="formattedList" :span="span" :labelWidth="labelWidth" :colClass="colVisibleRender" :size="size" :formProps="formProps">
+  <z-form v-model="model" class="zee-filter" :list="formattedList" :span="span" :labelWidth="labelWidth" :colClass="colVisibleRender" :size="size" :formProps="formProps" :params="params">
     <div slot="$operation" class="zee-filter__button-group">
       <el-button-group :size="size">
         <el-button type="primary" @click="handleSearch" :loading="loading" icon="el-icon-search"><span>查询</span></el-button>
@@ -20,7 +20,7 @@ export default {
     list: Array,
     labelWidth: {
       type: String,
-      default: '80px',
+      default: '110px',
     },
     size: {
       type: String,
@@ -39,6 +39,7 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    params: Object,
   },
   data() {
     return {
@@ -56,8 +56,8 @@
                   item.type($createElement, {
                     model: value,
                     config: {
-                      props: { ...item.props, value: itemValue(item) },
-                      style: item.style || { maxWidth: '100%' },
+                      props: { ...propsFormatter(item.props), value: itemValue(item) },
+                      style: item.style || { width: '100%' },
                       on: {
                         ...bindItemEvent(item),
                         input: v => onInput({ value: v, item }),
@@ -72,8 +72,8 @@
                 :value="itemValue(item)"
                 @input="v => onInput({ value: v, item })"
                 v-on="bindItemEvent(item)"
-                v-bind="item.props"
-                :style="item.style || { maxWidth: '100%' }"
+                v-bind="propsFormatter(item.props)"
+                :style="item.style || { width: '100%' }"
               ></component>
             </template>
           </el-form-item>
@@ -101,6 +101,7 @@ export default {
     groupClass: String,
     type: String,
     span: Number,
+    params: Object,
   },
   computed: {
     rowComponent() {
@@ -202,10 +203,21 @@ export default {
     bindItemVisible(item, type) {
       const visible = item[type];
       if (typeof visible === 'function') {
-        return visible(this.model);
+        return visible(this.model, this.params || {});
       }
       return item[type] !== false;
     },
+    /**
+     * @description 格式化props属性
+     * @param {Object|Function} props 属性或属性对象
+     * @returns {Object} 格式化的属性
+     */
+    propsFormatter(props) {
+      if (typeof props === 'function') {
+        return props(this.model, this.params || {});
+      }
+      return props || {};
+    },
   },
 };
 </script>
-<style>
-.zee-form__flex-wrap {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-}
-.zee-form__group-title {
-  font-weight: bold;
-  padding: 15px 5px;
-  border-bottom: 1px solid #d9d9d9;
-  margin-bottom: 15px;
-}
-.zee-form__group-content {
-  margin: 15px 0px;
+<style lang="scss">
+.zee-form {
+  &__flex-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+  &__group-title {
+    font-weight: bold;
+    padding: 15px 5px;
+    border-bottom: 1px solid #d9d9d9;
+    margin-bottom: 15px;
+  }
+  &__group-content {
+    margin: 15px 0px;
+  }
+  &__footer {
+    padding-top: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 </style>
 <template>
-  <el-form ref="form" :size="size" :class="formClass" :model="formModel" :label-width="labelWidth" :label-position="labelPosition || labelWidth ? 'right' : 'top'" v-bind="formProps">
+  <el-form
+    ref="form"
+    class="zee-form"
+    :size="size"
+    :class="formClass"
+    :model="formModel"
+    :label-width="labelWidth"
+    :label-position="labelPosition || labelWidth ? 'right' : 'top'"
+    v-bind="formProps"
+  >
     <form-render
       :title-class="titleClass"
       :content-class="contentClass"
@@ -28,12 +45,16 @@
       :model="model"
       :span="span"
       :type="type"
+      :params="params"
       @item-change="onItemChange"
       @form-item-change="onFormItemChange"
       @item-update="onItemUpdate"
     >
       <slot v-for="key in slotKeys" :name="key" :slot="key"></slot>
     </form-render>
+    <div v-if="$scopedSlots.footer" class="zee-form__footer">
+      <slot name="footer" :size="size" :validate="validate" :reset="reset" :model="model"></slot>
+    </div>
   </el-form>
 </template>
@@ -68,6 +89,7 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    params: Object,
   },
   data() {
     return {
@@ -136,8 +158,11 @@ export default {
      * @description 校验表单
      */
     validate() {
-      this.$refs.form.validate(valid => {
-        this.$emit('validate', valid, this.model);
+      return new Promise(resolve => {
+        this.$refs.form.validate(valid => {
+          this.$emit('validate', valid, this.model);
+          return resolve(valid);
+        });
       });
     },
     /**
@@ -19,6 +19,7 @@
         @search="search"
         :loading="loading"
         v-bind="filterProps"
+        :params="_slotScope"
       ></z-filter>
     </div>
     <!-- 按钮区 -->
@@ -70,7 +71,7 @@
               <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" title="确定删除吗？" placement="top" @onConfirm="handleDelete([slotScope.row])">
                 <el-button slot="reference" type="text" icon="el-icon-delete" title="删除"></el-button>
               </el-popconfirm>
-              <slot name="operation-button" v-bind="_slotScope"></slot>
+              <slot name="operation-button" v-bind="{ ..._slotScope, slotScope }"></slot>
             </div>
           </el-table-column>
         </template>
@@ -116,43 +117,47 @@
         <template v-if="dialogRender">
           <!-- 自定义弹出框内容 -->
           <slot v-if="hadSlot(`dialog-${dialogType}`)" :name="`dialog-${dialogType}`" :model="_formModel" v-bind="_slotScope"></slot>
-          <!-- 内置弹出框新增修改表单 -->
-          <template v-if="['new', 'edit'].includes(dialogType)">
-            <z-form
-              ref="form"
-              :value="_formModel"
-              :list="formList || listMap.form"
-              @input="onFormInput"
-              @validate="onFormValidate"
-              v-bind="{ span: 12, 'label-width': '80px', ...formProps }"
-            >
-              <!-- 表单自定义插槽 -->
-              <template v-for="item in renderList">
-                <template v-if="$scopedSlots[`form-${item.fullKey}`]">
-                  <slot :slot="item.fullKey" :name="`form-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
-                </template>
-              </template>
-            </z-form>
-          </template>
-          <!-- 内置弹出框详情表单 -->
           <template v-else>
-            <z-form
-              ref="form"
-              class="zee-scheme__view"
-              :value="_formModel"
-              :list="viewList || listMap.form | viewTypeFilter | noRulesFilter"
-              v-bind="{ span: 12, 'label-width': '80px', ...viewProps }"
-            >
-              <!-- 详情自定义插槽渲染 -->
-              <template v-for="item in renderList">
-                <template v-if="$scopedSlots[`view-${item.fullKey}`]">
-                  <slot :slot="item.fullKey" :name="`view-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
+            <!-- 内置弹出框新增修改表单 -->
+            <template v-if="['new', 'edit'].includes(dialogType)">
+              <z-form
+                ref="form"
+                :value="_formModel"
+                :list="formList || listMap.form"
+                @input="onFormInput"
+                @validate="onFormValidate"
+                v-bind="{ span: 12, 'label-width': '110px', ...formProps }"
+                :params="_slotScope"
+              >
+                <!-- 表单自定义插槽 -->
+                <template v-for="item in renderList">
+                  <template v-if="$scopedSlots[`form-${item.fullKey}`]">
+                    <slot :slot="item.fullKey" :name="`form-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
+                  </template>
                 </template>
-                <template v-else-if="$scopedSlots[`render-${item.fullKey}`]">
-                  <slot :slot="item.fullKey" :name="`render-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
+              </z-form>
+            </template>
+            <!-- 内置弹出框详情表单 -->
+            <template v-else>
+              <z-form
+                ref="form"
+                class="zee-scheme__view"
+                :value="_formModel"
+                :list="viewList || listMap.form | viewTypeFilter | noRulesFilter"
+                v-bind="{ span: 12, 'label-width': '110px', ...viewProps }"
+                :params="_slotScope"
+              >
+                <!-- 详情自定义插槽渲染 -->
+                <template v-for="item in renderList">
+                  <template v-if="$scopedSlots[`view-${item.fullKey}`]">
+                    <slot :slot="item.fullKey" :name="`view-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
+                  </template>
+                  <template v-else-if="$scopedSlots[`render-${item.fullKey}`]">
+                    <slot :slot="item.fullKey" :name="`render-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
+                  </template>
                 </template>
-              </template>
-            </z-form>
+              </z-form>
+            </template>
           </template>
           <!-- 内置弹出框新增修改按钮 -->
           <div class="zee-scheme__dialog-button" v-if="['new', 'edit'].includes(dialogType)">
@@ -336,8 +341,10 @@ export default {
         openDialog: this.openDialog,
         closeDialog: this.closeDialog,
         openView: this.openView,
+        openEdit: this.openEdit,
         handleDelete: this.handleDelete,
         size: this.size,
+        dialogType: this.dialogType,
       };
     },
     _alias() {
@@ -461,6 +468,7 @@ export default {
           .then(() => {
             this.$message.success('保存成功');
             this.closeDialog();
+            this.search();
           })
           .catch(() => {
             this.$message.error('保存失败');
@@ -508,6 +516,7 @@ export default {
       getAPI(row)
         .then(result => {
           this.editForm = result;
+          this.$emit('update:formModel', result || {});
         })
         .finally(() => {
           this.dialogLoading = false;
@@ -535,6 +544,7 @@ export default {
       viewAPI(row)
         .then(result => {
           this.editForm = result;
+          this.$emit('update:formModel', result || {});
         })
         .finally(() => {
           this.dialogLoading = false;
@@ -590,17 +600,18 @@ export default {
     // 关闭弹出框
     closeDialog() {
       this.dialogVisible = false;
+      this.dialogRender = false;
+      this.dialogType = 'none';
       this.$emit('dialog-change', 'none');
     },
     // 清空表单
     clearEditForm() {
       this.editForm = {};
+      this.$emit('update:formModel', {});
     },
     // 弹出框关闭动画结束
     onDialogClosed() {
       this.clearEditForm();
-      this.dialogRender = false;
-      this.dialogType = 'none';
     },
     // 分页-每页个数
     handleSizeChange(val) {