feat: 子表单组件支持预设值预设查询参数

BoBoooooo · Jan 4, 2021 · e9d40a4 · e9d40a4
1 parent 9e08b16
commit e9d40a4
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 10 deletions.
diff --git a/packages/form-designer/src/GenerateFormItem.vue b/packages/form-designer/src/GenerateFormItem.vue
@@ -313,6 +313,7 @@ import {
 } from 'vue-property-decorator';
 import TreeSelect from '@riophae/vue-treeselect';
 import { DML } from '@/types/common';
+import { isChinese } from '@/utils/utils';
 import Tinymce from './components/Tinymce/index.vue'; // 富文本编辑器
 import FileUpload from './components/FileUpload/FileUpload.vue';
 import GenerateSubForm from './components/SubForm/GenerateSubForm.vue';
@@ -605,7 +606,7 @@ export default class GenerateFormItem extends Vue {
           const key = group.split(',');
           const [field, value] = key;
           // 如果包含中文则默认为直接传参,否则读取相关字段值
-          const result = this.isChinese(value) ? (obj[field] = value) : (obj[field] = this.models[value]);
+          const result = isChinese(value) ? (obj[field] = value) : (obj[field] = this.models[value]);
         }
       }
     }
@@ -629,20 +630,13 @@ export default class GenerateFormItem extends Vue {
           const key = group.split(',');
           const [field, value] = key;
           // 如果包含中文则默认为直接传参,否则读取相关字段值
-          const result = this.isChinese(value) ? (obj[field] = value) : (obj[field] = this.models[value]);
+          const result = isChinese(value) ? (obj[field] = value) : (obj[field] = this.models[value]);
         }
       }
     }
     return obj;
   }
 
-  // 判断是否含有中文
-  isChinese(temp) {
-    const re = /[^\u4e00-\u9fa5]/;
-    if (re.test(temp)) return false;
-    return true;
-  }
-
   diGuiTree(tree) {
     // 递归便利树结构
     tree.forEach((item) => {

diff --git a/packages/form-designer/src/components/SubForm/GenerateSubForm.vue b/packages/form-designer/src/components/SubForm/GenerateSubForm.vue
@@ -49,6 +49,7 @@
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator';
 import { DML } from '@/types/common';
+import { isChinese } from '@/utils/utils';
 
 @Component({
   name: 'GenerateSubForm',
@@ -65,12 +66,14 @@ export default class GenerateSubForm extends Vue {
     type: Object as () => {
       tableColumns: any;
       options: any;
+      model: string;
     },
     default: () => ({}),
   })
   widget!: {
     tableColumns: any;
     options: any;
+    model: string;
   };
 
   @Prop({
@@ -85,6 +88,12 @@ export default class GenerateSubForm extends Vue {
   })
   readOnly: any;
 
+ @Prop({
+   type: Object,
+   default: () => ({}),
+ })
+  formTableConfig: any;
+
   // 整个子表单数据
   subTableForm = {
     tableData: [],
@@ -105,7 +114,20 @@ export default class GenerateSubForm extends Vue {
 
   fetchList() {
     if (this.widget.options.tableName) {
-      this.$PROCRUD.crud(DML.SELECT, this.widget.options.tableName).then((res) => {
+      const searchCondition:any = [];
+      // 预设查询参数
+      if (this.getTableParams) {
+        Object.keys(this.getTableParams).forEach((k) => {
+          searchCondition.push({
+            field: k,
+            operator: 'eq',
+            value: this.getTableParams[k],
+          });
+        });
+      }
+      this.$PROCRUD.crud(DML.SELECT, this.widget.options.tableName, {
+        searchCondition,
+      }).then((res) => {
         if (res.data.list.length === 0) {
           this.addRow();
         } else {
@@ -203,6 +225,13 @@ export default class GenerateSubForm extends Vue {
             formValue[k] = formValue[k].toString();
           }
         });
+        // 预设值
+        if (this.getTablePrefill) {
+          Object.keys(this.getTablePrefill).forEach((k) => {
+            formValue[k] = this.getTablePrefill[k];
+          });
+        }
+
         // 根据对话框状态判断保存或编辑
         if (formValue._mode === 'ADD') {
           type = DML.INSERT;
@@ -238,6 +267,59 @@ export default class GenerateSubForm extends Vue {
       }
     });
   }
+
+  // 子表params
+  get getTableParams() {
+    const table = this.formTableConfig[this.widget.model];
+    if (table) {
+      const { tableParams } = table;
+      if (tableParams) {
+        return tableParams;
+      }
+    }
+    // 没有传入则直接使用配置的
+    // 格式为 子表字段,主表字段 多个用|隔开
+    // 例如 subid,id|subid2,id2 格式
+    const obj = {};
+    // 默认按照|分隔参数名
+    const { tableParams } = this.widget.options;
+    if (tableParams) {
+      const params = tableParams.split('|');
+      for (const group of params) {
+        if (group) {
+          const key = group.split(',');
+          const [field, value] = key;
+          // 如果包含中文则默认为直接传参,否则读取相关字段值
+          const result = isChinese(value) ? (obj[field] = value) : (obj[field] = this.models[value]);
+        }
+      }
+    }
+    return obj;
+  }
+
+  // 子表prefill
+  get getTablePrefill() {
+    // 如果外侧传入了则优先使用外侧传入的params
+    if (this.formTableConfig[this.widget.model] && this.formTableConfig[this.widget.model].prefill) {
+      return this.formTableConfig[this.widget.model].prefill;
+    }
+    // 没有传入则直接使用配置的 例如 subid,id|subid2,id2 格式
+    const obj = {};
+    // 默认按照|分隔参数名
+    const { prefill } = this.widget.options;
+    if (prefill && prefill !== '') {
+      const fills = prefill.split('|');
+      for (const group of fills) {
+        if (group) {
+          const key = group.split(',');
+          const [field, value] = key;
+          // 如果包含中文则默认为直接传参,否则读取相关字段值
+          const result = isChinese(value) ? (obj[field] = value) : (obj[field] = this.models[value]);
+        }
+      }
+    }
+    return obj;
+  }
 }
 </script>
 

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -0,0 +1,13 @@
+/*
+ * @file: 工具函数
+ * @author: BoBo
+ * @copyright: NanJing Anshare Tech .Com
+ * @Date: 2021-01-04 23:37:08
+ */
+// 判断是否含有中文
+// eslint-disable-next-line import/prefer-default-export
+export function isChinese(temp) {
+  const re = /[^\u4e00-\u9fa5]/;
+  if (re.test(temp)) return false;
+  return true;
+}