refactor: 修改rules判断规则

BoBoooooo · Feb 4, 2021 · 7c71c3d · 7c71c3d
1 parent f9e8638
commit 7c71c3d
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 126 deletions.
diff --git a/src/component/form-designer/src/GenerateForm.vue b/src/component/form-designer/src/GenerateForm.vue
@@ -10,11 +10,6 @@
 -->
 <template>
   <div class="table-form-wrapper">
-      <!-- dev模式,支持直接修改表单,不需要可删除 -->
-      <!-- <div v-if="data.config && data.config.name && $store.getters.config && $store.getters.config.isDev === '1' && !hiddenDevModule" class="dev-module">
-        <el-button type="text" @click="showFormDesigner">当前表单: {{data.config.name}} [点此修改]</el-button>
-        <FormDesigner ref="formDesigner" />
-      </div> -->
       <el-form ref="generateForm"
              :class='{"table-form":data.config && data.config.isTableClass}'
              :model="models"
@@ -53,7 +48,6 @@
                                   :key="citem.key"
                                   :models="models"
                                   :remote="remote"
-                                  :rules="rules[citem.model]"
                                   :widget="citem"
                                   :readOnly="readOnly"
                                   @btnOnClick="btnOnClick"
@@ -83,7 +77,6 @@
                             :remote="remote"
                             @selection-change="getTableSelection($event,item)"
                             :widget="item"
-                            :rules="rules[item.model]"
                             :readOnly="readOnly"
                             @chartOnClick="chartOnClick"
                             @btnOnClick="btnOnClick"
@@ -164,17 +157,8 @@ export default class GenerateForm extends Vue {
   })
   formTableConfig: any;
 
-  // 强制隐藏dev模式
-  @Prop({
-    type: Boolean,
-    default: false,
-  })
-  hiddenDevModule!: Boolean;
-
   models: any = {};
 
-  rules: any = {};
-
   created() {
     if (this.data.list) {
       // 根据数据结构生成给子组件的数据源
@@ -189,16 +173,6 @@ export default class GenerateForm extends Vue {
   }
 
   generateModel(genList) {
-    const customValidate = (rule, value, callback) => {
-      const { type } = rule;
-      if ('string,number'.includes(type)) {
-        if (rule.required) {
-          callback(new Error(rule.message));
-        } else {
-          callback();
-        }
-      }
-    };
     // 遍历设计的结构
     for (let i = 0; i < genList.length; i += 1) {
       if (genList[i].type === 'grid') {
@@ -214,43 +188,10 @@ export default class GenerateForm extends Vue {
         } else {
           this.setDefaultValue(row);
         }
-
         // 表单隐藏设置
         if (this.setHidden.includes(row.model)) {
           row.hidden = true;
         }
-        if (this.rules[genList[i].model]) {
-          this.rules[genList[i].model] = [
-            ...this.rules[genList[i].model],
-            ...genList[i].rules.map((item) => {
-              if (item.pattern) {
-                // eslint-disable-next-line no-eval
-                const rule = { ...item, pattern: eval(item.pattern) };
-                rule.trigger = 'blur';
-                return rule;
-              }
-              if ('string,number'.includes(item.type)) {
-                item.validator = customValidate;
-              }
-              return { ...item };
-            }),
-          ];
-        } else {
-          this.rules[genList[i].model] = [
-            ...genList[i].rules.map((item) => {
-              if (item.pattern) {
-                // eslint-disable-next-line no-eval
-                const rule = { ...item, pattern: eval(item.pattern) };
-                rule.trigger = 'blur';
-                return rule;
-              }
-              if ('string,number'.includes(item.type)) {
-                item.validator = customValidate;
-              }
-              return { ...item };
-            }),
-          ];
-        }
       }
     }
     this.models = { ...this.value, ...this.models };

diff --git a/src/component/form-designer/src/GenerateFormItem.vue b/src/component/form-designer/src/GenerateFormItem.vue
@@ -8,7 +8,10 @@
 感谢大佬!
 -->
 <template>
-  <el-form-item :prop="widget.type == 'button' ? undefined : widget.model" :label-width="widget.options.hiddenLabel ? '0' : labelWidth" :rules="rules" :class="widget.options.className">
+  <el-form-item :rules="widget.rules || []"
+  :prop="widget.type == 'button' ? undefined : widget.model"
+  :label-width="widget.options.hiddenLabel ? '0' : labelWidth"
+  :class="widget.options.className">
     <template #label>
       <template v-if="widget.options.hiddenLabel ? '' : label">
         <span v-html="label"></span>
@@ -307,7 +310,6 @@
         @chartOnClick="chartOnClick"
         @btnOnClick="btnOnClick"
         :formTableConfig="formTableConfig"
-        :rules="rules"
         :widget="widget"
       ></GenerateTabs>
     </template>
@@ -409,9 +411,6 @@ export default class GenerateFormItem extends Vue {
   })
   readOnly!: boolean
 
-  // 组件校验规则
-  @Prop()
-  rules: any
 
   // 当前组件对象
   dataModel: string | number | null | object = this.models[this.widget.model] || null

diff --git a/src/component/form-designer/src/WidgetConfig.vue b/src/component/form-designer/src/WidgetConfig.vue
@@ -732,7 +732,6 @@ export default {
       if (!this.show) {
         return false;
       }
-
       if (val) {
         // 如果自定义了错误提示语则赋值
         if (this.elementConfig.options && this.elementConfig.options.message) {
@@ -743,7 +742,6 @@ export default {
       } else {
         this.validator.pattern = null;
       }
-
       this.generateRule();
       return null;
     },

diff --git a/src/component/form-designer/src/components/SubForm/GenerateSubForm.vue b/src/component/form-designer/src/components/SubForm/GenerateSubForm.vue
@@ -18,17 +18,9 @@
             <!-- prop的规则: 在普通的form表单中是一个对象,prop是对象的属性. 表格是由多个对象组成的数组,在写prop是需要根据索引给值.这里的tableData就相当于对象的属性 !-->
             <!-- rules也要单独给 -->
             <template v-if="readOnly || scope.row._mode === 'DETAIL'">
-              <span>{{scope.row[row.model]}}</span>
+              <span>{{ scope.row[row.model] }}</span>
             </template>
-              <GenerateFormItem
-              v-else
-              :remote="remote"
-              :model="scope.row[row.model]"
-              v-model="inlineFormData[row.model]"
-              :widget="row"
-              :rules="row.rules"
-              :readOnly="readOnly || row._mode === 'DETAIL' ? {} : null"
-            />
+            <GenerateFormItem v-else :remote="remote" :model="scope.row[row.model]" v-model="inlineFormData[row.model]" :widget="row" :readOnly="readOnly || row._mode === 'DETAIL' ? {} : null" />
           </template>
         </el-table-column>
         <el-table-column label="操作" header-align="center" :width="100">
@@ -62,54 +54,52 @@ import { isChinese } from '@/utils/utils';
 })
 export default class GenerateSubForm extends Vue {
   $refs!: {
-    tableForm: HTMLFormElement;
-  };
+    tableForm: HTMLFormElement
+  }
 
   @Prop({
     type: Object as () => {
-      tableColumns: any;
-      options: any;
-      model: string;
+      tableColumns: any
+      options: any
+      model: string
     },
     default: () => ({}),
   })
   widget!: {
-    tableColumns: any;
-    options: any;
-    model: string;
-  };
+    tableColumns: any
+    options: any
+    model: string
+  }
 
   @Prop({
     type: Object,
     default: () => ({}),
   })
-  remote: any;
+  remote: any
 
   @Prop({
     type: Object,
     default: null,
   })
-  readOnly: any;
+  readOnly: any
 
- @Prop({
-   type: Object,
-   default: () => ({}),
- })
-  formTableConfig: any;
+  @Prop({
+    type: Object,
+    default: () => ({}),
+  })
+  formTableConfig: any
 
   // 整个子表单数据
   subTableForm = {
     tableData: [],
-    rules: {
-    },
-  };
+  }
 
   // 单行数据
-  inlineFormData = {};
+  inlineFormData = {}
 
-  mode: 'ADD' | 'EDIT' | 'DETAIL' | '' = 'DETAIL';
+  mode: 'ADD' | 'EDIT' | 'DETAIL' | '' = 'DETAIL'
 
-  btnSaveIsLoading = false;
+  btnSaveIsLoading = false
 
   models: any = {}
 
@@ -119,7 +109,7 @@ export default class GenerateSubForm extends Vue {
 
   fetchList() {
     if (this.widget.options.tableName) {
-      const searchCondition:any = [];
+      const searchCondition: any = [];
       // 预设查询参数
       if (this.getTableParams) {
         Object.keys(this.getTableParams).forEach((k) => {
@@ -130,18 +120,20 @@ export default class GenerateSubForm extends Vue {
           });
         });
       }
-      this.$PROCRUD.crud(DML.SELECT, this.widget.options.tableName, {
-        searchCondition,
-      }).then((res) => {
-        if (res.data.list.length === 0) {
-          this.addRow();
-        } else {
-          this.subTableForm.tableData = res.data.list.map(item => ({
-            ...item,
-            _mode: 'DETAIL',
-          }));
-        }
-      });
+      this.$PROCRUD
+        .crud(DML.SELECT, this.widget.options.tableName, {
+          searchCondition,
+        })
+        .then((res) => {
+          if (res.data.list.length === 0) {
+            this.addRow();
+          } else {
+            this.subTableForm.tableData = res.data.list.map(item => ({
+              ...item,
+              _mode: 'DETAIL',
+            }));
+          }
+        });
     } else {
       this.addRow();
     }
@@ -344,24 +336,26 @@ export default class GenerateSubForm extends Vue {
 .action-btn {
   height: 22px;
   width: 34px;
-  padding: 0!important;
+  padding: 0 !important;
 }
-.el-icon-plus{
+.el-icon-plus {
   color: rgb(85, 85, 85);
 }
-.add-button{
+.add-button {
   cursor: pointer;
-  &:hover{
+  &:hover {
     color: rgb(16, 16, 16);
-    .el-icon-plus{
+    .el-icon-plus {
       color: rgb(16, 16, 16);
     }
   }
 }
-.subTableForm{
-  ::v-deep.el-form-item__error{
-    right: 30px;
-    bottom: 3px;
+.subTableForm {
+  ::v-deep.el-form-item__error {
+    top: 23px;
+    right: 28px;
+    text-align: right;
+    position: absolute;
   }
 }
 </style>
diff --git a/src/component/form-designer/src/components/Tabs/GenerateTabs.vue b/src/component/form-designer/src/components/Tabs/GenerateTabs.vue
@@ -21,7 +21,6 @@
                   :key="citem.key"
                   :models="models"
                   :remote="remote"
-                  :rules="rules[citem.model]"
                   :widget="citem"
                   :readOnly="readOnly"
                   @btnOnClick="btnOnClick"
@@ -34,7 +33,7 @@
             </el-col>
           </el-row>
         </template>
-        <GenerateFormItem v-else :models="models" :key="item.key" :remote="remote" :widget="item" :rules="item.rules" :readOnly="readOnly ? {} : null" />
+        <GenerateFormItem v-else :models="models" :key="item.key" :remote="remote" :widget="item" :readOnly="readOnly ? {} : null" />
       </template>
     </el-tab-pane>
   </el-tabs>
@@ -77,10 +76,6 @@ export default class GenerateTabs extends Vue {
   })
   formTableConfig: any
 
-  // 组件校验规则
-  @Prop()
-  rules: any
-
   @Prop({
     type: Object,
     default: null,