refactor: 移除表单属性中布局方式属性,新增表单字段控制相关全局api

src/component/crud-table/src/GenerateFormDialog.vue

@@ -256,8 +256,9 @@ export default defineComponent({
           });
         })
         .catch(() => {
-          btnSaveIsLoading.value = false;
           // 数据校验失败
+          btnSaveIsLoading.value = false;
+          $message.warning('表单校验失败,请检查');
         });
     };
 

src/component/form-designer/src/FormConfig.vue

@@ -14,18 +14,12 @@
         <el-input v-model="data.position" placeholder="表单使用位置"></el-input>
       </el-form-item>
       <el-form-item label="表单尺寸">
-        <el-radio-group @change="isTableClass" v-model="data.size">
+        <el-radio-group v-model="data.size">
           <el-radio-button label="medium">中等</el-radio-button>
           <el-radio-button label="small">较小</el-radio-button>
           <el-radio-button label="mini">迷你</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="布局方式">
-        <el-radio-group @change="isTableClass" v-model="data.isTableClass">
-          <el-radio-button :label="false">普通布局</el-radio-button>
-          <el-radio-button :label="true">表格布局</el-radio-button>
-        </el-radio-group>
-      </el-form-item>
       <el-form-item label="标签对齐方式">
         <el-radio-group v-model="data.labelPosition">
           <el-radio-button label="left">左对齐</el-radio-button>
@@ -45,16 +39,7 @@ import { Component, Vue, Prop } from 'vue-property-decorator';
 
 @Component
 export default class FormConfig extends Vue {
-  // 是否使用table布局
-  useTableClass = false;
-
   @Prop(Object)
   data: any;
-
-  isTableClass() {
-    if (this.data.isTableClass) {
-      this.data.labelPosition = 'right';
-    }
-  }
 }
 </script>

src/component/form-designer/src/FormDesigner.vue

@@ -381,7 +381,6 @@ export default {
           labelWidth: 140,
           labelPosition: 'right',
           size: 'small',
-          isTableClass: false,
         },
       };
 

src/component/form-designer/src/GenerateForm.vue

@@ -13,7 +13,6 @@
     <el-form
       ref="generateForm"
       :class="{
-        'table-form': data.config.isTableClass,
         pad: deviceMode === 'pad',
         mobile: deviceMode === 'mobile',
       }"
@@ -43,6 +42,7 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
+import { AnyObject } from '@/types/common';
 import { formElement } from './componentsConfig';
 import GenerateLayout from './GenerateLayout.vue';
 
@@ -286,20 +286,41 @@ export default class GenerateForm extends Vue {
     }
   }
 
+  // 表单默认值回填单独拉出来封装
+  setDefaultValue(config) {
+    // 如果时间选择器需要默认值,默认回填当前日期
+    if (config.type === 'date') {
+      if (config.options.defaultValue) {
+        const { format } = config.options;
+        if (format && format !== '') {
+          this.models[config.model] = this.dayjs().format(format.toUpperCase());
+        }
+      } else {
+        this.models[config.model] = null;
+      }
+    } else {
+      let { defaultValue } = config.options;
+      // 如果默认值设置为$开头,则表示要读取vuex中的全局变量
+      // 如设置为 $deptname 则读取 this.$store.getters.deptname
+      if (typeof defaultValue === 'string' && defaultValue.includes('$')) {
+        defaultValue = this.$store.getters[defaultValue.replace('$', '')];
+      } else if (defaultValue === '') {
+        defaultValue = null;
+      }
+      this.models[config.model] = defaultValue;
+    }
+  }
+
+  // ----全局api----
+
   // 先验证再获取表单内容
-  getData() {
+  getData(original: boolean) {
     return new Promise((resolve, reject) => {
-      this.$refs.generateForm.validate((valid) => {
+      this.$refs.generateForm.validate((valid, obj) => {
         if (valid) {
-          resolve(this.filterFormData());
+          resolve(original ? JSON.parse(JSON.stringify(this.models)) : this.filterFormData());
         } else {
-          // 校验失败时focus到文本框
-          // 注意此处没有考虑textarea的情况,多行文本会失败
-          setTimeout(() => {
-            const isError: any = document.getElementsByClassName('is-error');
-            isError[0].querySelector('input').focus();
-          }, 100);
-          reject(new Error('请检查必填项是否填写').message);
+          reject(obj);
         }
       });
     });
@@ -313,44 +334,80 @@ export default class GenerateForm extends Vue {
   // 校验表单
   validate() {
     return new Promise((resolve, reject) => {
-      this.$refs.generateForm.validate((valid) => {
+      this.$refs.generateForm.validate((valid, obj) => {
         if (valid) {
           resolve();
         } else {
-          reject();
+          reject(obj);
         }
       });
     });
   }
 
   // 不经过验证直接获取表单内容
-  getDataWithoutValidate() {
-    return new Promise((resolve) => resolve(this.filterFormData()));
+  getDataWithoutValidate(original: boolean) {
+    return new Promise((resolve) => resolve(original ? JSON.parse(JSON.stringify(this.models)) : this.filterFormData()));
   }
 
-  // 表单默认值回填单独拉出来封装
-  setDefaultValue(config) {
-    // 如果时间选择器需要默认值,默认回填当前日期
-    if (config.type === 'date') {
-      if (config.options.defaultValue) {
-        const { format } = config.options;
-        if (format && format !== '') {
-          this.models[config.model] = this.dayjs().format(format.toUpperCase());
-        }
-      } else {
-        this.models[config.model] = null;
-      }
+  /**
+   * 更新某个字段值
+   */
+  setFieldValue(field: string | AnyObject, value?) {
+    if (typeof field === 'object') {
+      Object.keys(field).forEach((key) => {
+        this.$set(this.models, key, field[key]);
+      });
     } else {
-      let { defaultValue } = config.options;
-      // 如果默认值设置为$开头,则表示要读取vuex中的全局变量
-      // 如设置为 $deptname 则读取 this.$store.getters.deptname
-      if (typeof defaultValue === 'string' && defaultValue.includes('$')) {
-        defaultValue = this.$store.getters[defaultValue.replace('$', '')];
-      } else if (defaultValue === '') {
-        defaultValue = null;
-      }
-      this.models[config.model] = defaultValue;
+      this.$set(this.models, field, value);
+    }
+  }
+
+  /**
+   * 获取某个字段值
+   */
+  getFieldValue(field: string) {
+    return this.models[field];
+  }
+
+  /**
+   * 异步更新整个表单值
+   */
+  setFormValue(value) {
+    if (this.$refs.generateForm) {
+      this.$refs.generateForm.clearValidate();
+    }
+    this.models = JSON.parse(JSON.stringify(value));
+  }
+
+  // 统一封装字段状态改动
+  _changeFieldStatus(status: boolean, field: string | string[] | undefined, type) {
+    let _target: string[];
+    if (field) {
+      _target = typeof field === 'string' ? [field] : field;
+    } else {
+      _target = Object.keys(this.fieldMap);
     }
+
+    _target.forEach((key) => {
+      switch (type) {
+        case 'hidden':
+          this.$set(this.fieldMap[key], 'hidden', status);
+          break;
+        case 'disabled':
+          this.$set(this.fieldMap[key].options, 'disabled', status);
+          break;
+        default:
+          console.error('设置失败');
+      }
+    });
+  }
+
+  disabled(status: boolean, field?: string | string[]) {
+    this._changeFieldStatus(status, field, 'disabled');
+  }
+
+  hidden(status: boolean, field?: string | string[]) {
+    this._changeFieldStatus(status, field, 'hidden');
   }
 
   @Watch('value', {
@@ -379,6 +436,3 @@ export default class GenerateForm extends Vue {
   }
 }
 </script>
-<style lang="scss" scoped>
-@import './styles/table-form.scss';
-</style>

src/component/form-designer/src/GenerateLayout.vue

@@ -10,14 +10,7 @@
     <!-- 每一行元素与基于el-row和el-col生成 -->
     <el-row :key="item.key" type="flex" :gutter="item.options.gutter ? item.options.gutter : 0" :justify="item.options.justify" :align="item.options.align">
       <!-- 生成每一行中的每一列元素 -->
-      <el-col
-        v-for="(col, colIndex) in item.columns"
-        :key="colIndex"
-        :span="col.span"
-        :style="{
-          border: isNoBorder(col, item) ? 'none!important' : '',
-        }"
-      >
+      <el-col v-for="(col, colIndex) in item.columns" :key="colIndex" :span="col.span">
         <!-- 遍历生成该列所有组件 -->
         <template v-for="citem in col.list">
           <GenerateLayout
@@ -32,7 +25,7 @@
           ></GenerateLayout>
           <!-- 正常组件通过GenerateFormItem生成 -->
           <GenerateFormItem
-            v-else
+            v-else-if="!citem.hidden"
             @selection-change="getTableSelection($event, citem)"
             :key="citem.key"
             :models="models"
@@ -41,7 +34,6 @@
             :readOnly="readOnly"
             @btnOnClick="btnOnClick"
             @chartOnClick="chartOnClick"
-            v-show="!citem.hidden"
             :formTableConfig="formTableConfig"
           >
           </GenerateFormItem>
@@ -90,7 +82,7 @@
               :key="citem.key"
             ></GenerateLayout>
             <GenerateFormItem
-              v-else
+              v-else-if="!citem.hidden"
               @selection-change="getTableSelection($event, citem)"
               :key="citem.key"
               :models="models"
@@ -99,7 +91,6 @@
               :readOnly="readOnly"
               @btnOnClick="btnOnClick"
               @chartOnClick="chartOnClick"
-              v-show="!citem.hidden"
               :formTableConfig="formTableConfig"
             >
             </GenerateFormItem>
@@ -132,7 +123,7 @@
       :readOnly="readOnly"
       @chartOnClick="chartOnClick"
       @btnOnClick="btnOnClick"
-      v-show="!item.hidden"
+      v-if="!item.hidden"
       :formTableConfig="formTableConfig"
     >
     </GenerateFormItem>
@@ -207,11 +198,6 @@ export default defineComponent({
         model: models.value,
       });
     };
-    // 若为表格布局并且当前栅格内只有一个元素并且为隐藏状态,隐藏边框线
-    const isNoBorder = (col, item) => {
-      const { list } = col;
-      return props.data.config && props.data.config.isTableClass && list.every((_) => _.hidden) && item.columns.length === 1;
-    };
 
     // 单元格中为input,select,textarea时会默认聚焦
     const clickTdAutoFocus = (event, td) => {
@@ -244,7 +230,6 @@ export default defineComponent({
       getTableSelection,
       btnOnClick,
       chartOnClick,
-      isNoBorder,
       clickTdAutoFocus,
     };
   },