[feature]{CommonTable,CrudTable}: 加入表单多选时的数组转化，加入tableParams

BoBoooooo · Mar 24, 2019 · 7888086 · 7888086
1 parent 9964088
commit 7888086
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 61 deletions.
diff --git a/src/components/CommonTable/index.vue b/src/components/CommonTable/index.vue
@@ -99,10 +99,6 @@ export default {
       default: () => ({}),
     },
   },
-  data() {
-    return {
-    };
-  },
   methods: {
     emitEvent(...args) {
       this.$emit(args[0], ...Array.from(args).slice(1));
@@ -115,7 +111,6 @@ export default {
       this.listQuery.pageNumber = val;
       this.$emit('handleCurrentChange', this.listQuery);
     },
-
   },
 };
 </script>

diff --git a/src/components/CrudTable/CrudTable.vue b/src/components/CrudTable/CrudTable.vue
@@ -6,19 +6,19 @@
  -->
 <template>
   <div id="crud_table" class="widget-box">
-    <common-tool-bar
-      :option-json="jsonData.config.columnList"
-      :search-arr="listQuery.searchArr"
+    <CommonToolBar
+      :optionJson="jsonData.config.columnList"
+      :searchArr="listQuery.searchArr.filter(item=>item.hidden===false)"
       @addEvent="New"
       @searchEvent="Refresh"
       @clearEvent="Clear"
       :toolbarButton="toolbarButton"
     />
 
-    <common-table
+    <CommonTable
       :list="list"
-      :table-json="jsonData.config.columnList"
-      :list-query="listQuery"
+      :tableJson="jsonData.config.columnList"
+      :listQuery="listQuery"
       :list-loading="listLoading"
       :IsMultiple="IsMultiple"
       :showPagination="showPagination"
@@ -45,7 +45,7 @@
       <template slot="formatter" slot-scope="scope">
         <slot name="formatter" :row="scope.row" :prop="scope.prop"></slot>
       </template>
-    </common-table>
+    </CommonTable>
 
     <GenerateFormDialog
     :dialogFormVisible.sync="dialogFormVisible"
@@ -92,6 +92,7 @@ export default {
             SearchKey: '',
             SearchValue: '',
             SearchOperator: '',
+            hidden: false,
           },
         ],
       },
@@ -106,12 +107,25 @@ export default {
     };
   },
   watch: {
-    asyncCondition: {
+    tableParams: {
       deep: true,
       handler(val) {
-        this.listQuery.searchArr[0].SearchKey = val.searchKey;
-        this.listQuery.searchArr[0].SearchValue = val.searchValue;
-        this.listQuery.searchArr[0].SearchOperator = '=';
+        this.listQuery.searchArr = [
+          {
+            SearchKey: '',
+            SearchValue: '',
+            SearchOperator: '',
+            hidden: false,
+          },
+        ]
+        Object.keys(val).forEach((k) => {
+          this.listQuery.searchArr.push({
+            SearchKey: k,
+            SearchValue: val[k],
+            SearchOperator: '=',
+            hidden: true,
+          })
+        })
         this.Refresh();
       },
     },
@@ -133,6 +147,17 @@ export default {
     GetFormDetail(this.tableName).then((res) => {
       this.jsonData = JSON.parse(res.data.formJson);
     });
+
+    if (this.tableParams) {
+      Object.keys(this.tableParams).forEach((k) => {
+        this.listQuery.searchArr.push({
+          SearchKey: k,
+          SearchValue: this.tableParams[k],
+          SearchOperator: '=',
+          hidden: true,
+        })
+      })
+    }
     this.fetchData(this.listQuery);
   },
 
@@ -144,7 +169,31 @@ export default {
     Refresh() {
       this.fetchData(this.listQuery);
     },
-
+    formValueToArray() {
+      // 如果select,radio,checkbox等组件为多选情况  后台返回逗号分隔字符串 => 数组
+      for (const row of this.jsonData.list) {
+        if (row.columns) {
+          for (const column of row.columns) {
+            const { list } = column;
+            if (Array.isArray(list)) {
+              list.forEach((citem) => {
+                if (citem.options.multiple) {
+                  if (!Array.isArray(this.formValues[citem.model])
+                      && this.formValues[citem.model]) {
+                    this.formValues[citem.model] = this.formValues[citem.model].split(',');
+                  }
+                }
+              });
+            }
+          }
+        } else if (row.options.multiple) {
+          if (!Array.isArray(this.formValues[row.model])
+                      && this.formValues[row.model]) {
+            this.formValues[row.model] = this.formValues[row.model].split(',');
+          }
+        }
+      }
+    },
     async fetchData(params) {
       const response = await this.crud('list', this.tableName, params);
       this.list = response.data.list;
@@ -160,6 +209,7 @@ export default {
       Object.keys(this.formValues).forEach((k) => {
         this.formValues[k] = '';
       });
+      this.formValues = { ...this.formValues, ...this.formDefaultValue }
       this.dialogFormVisible = true;
     },
     Delete(id) {
@@ -177,6 +227,8 @@ export default {
         {
           SearchKey: '',
           SearchValue: '',
+          SearchOperator: '',
+          hidden: false,
         },
       ];
       this.Refresh();
@@ -185,12 +237,14 @@ export default {
       this.dialogStatus = 'update';
       const response = await this.crud('detail', this.tableName, { id });
       this.formValues = response.data;
+      this.formValueToArray()
       this.dialogFormVisible = true;
     },
     async Detail(id) {
       this.dialogStatus = 'detail';
       const response = await this.crud('detail', this.tableName, { id });
       this.formValues = response.data;
+      this.formValueToArray()
       this.dialogFormVisible = true;
       this.disabled = true
     },

diff --git a/src/components/CrudTable/components/GenerateFormDialog.vue b/src/components/CrudTable/components/GenerateFormDialog.vue
@@ -52,6 +52,9 @@ export default {
       },
       visible: this.dialogFormVisible,
     }
+  },
+  created() {
+
   },
   props: {
     entity: {
@@ -79,6 +82,7 @@ export default {
       type: Object,
       default: () => ({}),
     },
+
   },
 
   methods: {
@@ -112,35 +116,6 @@ export default {
   },
 
   watch: {
-    formValues: {
-      deep: true,
-      immediate: true,
-      handler() {
-        // 如果select,radio,checkbox等组件为多选情况  后台返回逗号分隔字符串 => 数组
-        for (const row of this.jsonData.list) {
-          if (row.columns) {
-            for (const column of row.columns) {
-              const { list } = column;
-              if (Array.isArray(list)) {
-                list.forEach((citem) => {
-                  if (citem.options.multiple) {
-                    if (!Array.isArray(this.formValues[citem.model])
-                      && this.formValues[citem.model]) {
-                      this.formValues[citem.model] = this.formValues[citem.model].split(',');
-                    }
-                  }
-                });
-              }
-            }
-          } else if (row.options.multiple) {
-            if (!Array.isArray(this.formValues[row.model])
-                      && this.formValues[row.model]) {
-              this.formValues[row.model] = this.formValues[row.model].split(',');
-            }
-          }
-        }
-      },
-    },
     dialogFormVisible(val) {
       this.visible = val;
     },

diff --git a/src/components/CrudTable/components/props.js b/src/components/CrudTable/components/props.js
@@ -27,7 +27,7 @@ export default {
     type: String,
     default: 'clear,search',
   },
-  asyncCondition: {
+  tableParams: {
     type: Object,
     default: () => ({}),
   },
@@ -36,4 +36,9 @@ export default {
     type: Object,
     default: () => ({}),
   },
+  // 表单预设值
+  formDefaultValue: {
+    type: Object,
+    default: () => ({}),
+  },
 };
diff --git a/src/components/UploadAffix/index.vue b/src/components/UploadAffix/index.vue
@@ -4,7 +4,7 @@
       v-if="!disabled"
       ref="upload"
       :action="baseUrl"
-      :data="Params['Param']"
+      :data="params['Param']"
       :headers="token"
       :show-file-list="false"
       :on-success="uploadSuccess"
@@ -71,7 +71,7 @@ export default {
   name: 'UploadAffix',
 
   props: {
-    Params: {
+    params: {
       type: Object, //  IsDetail true则   只显示文件list以及download button
       default: () => ({}),
     },
@@ -91,10 +91,10 @@ export default {
     };
   },
   watch: {
-    'Params.Param.MasterID': {
+    'params.Param.MasterID': {
       handler() {
         this.$nextTick(() => {
-          this.fetchData_File(this.Params.Param);
+          this.fetchData_File(this.params.Param);
         });
       },
       immediate: true,
@@ -111,12 +111,12 @@ export default {
         type: 'warning',
       }).then(() => {
         deletefile(id).then(() => {
-          this.fetchData_File(this.Params.Param);
+          this.fetchData_File(this.params.Param);
         });
       });
     },
     uploadSuccess() {
-      this.fetchData_File(this.Params.Param);
+      this.fetchData_File(this.params.Param);
       this.$refs.upload.clearFiles();
     },
     fetchData_File(param) {

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -69,7 +69,6 @@ export function timestampToTime(timestamp) {
   const h = `${date.getHours() + 1 < 10 ? `0${date.getHours() + 1}` : date.getHours() + 1}:`;
   const m = `${date.getMinutes() + 1 < 10 ? `0${date.getMinutes() + 1}` : date.getMinutes() + 1}:`;
   const s = (date.getSeconds() + 1 < 10 ? `0${date.getSeconds() + 1}` : date.getSeconds() + 1);
-  console.log(Y + M + D + h + m + s)
   return Y + M + D + h + m + s;
 }
 

diff --git a/src/views/system/dict.vue b/src/views/system/dict.vue
@@ -48,7 +48,7 @@
       <el-col :span="16">
         <crud-table
           tableName="dict"
-          :asyncCondition="asyncCondition"
+          :tableParams="tableParams"
           class="no-boxshadow no-padding-top"
           toolbarButton="add,clear"
           handleButton="edit,delete"
@@ -128,9 +128,7 @@ export default {
         sort: '',
         pid: '',
       },
-      asyncCondition: {
-        searchKey: '',
-        searchValue: '',
+      tableParams: {
       },
       dialogStatus: '',
       defaultProps: {
@@ -179,9 +177,9 @@ export default {
     },
 
     treeClick(data) {
-      console.log(data);
-      this.asyncCondition.searchKey = 'dictid';
-      this.asyncCondition.searchValue = data.id;
+      this.tableParams = {
+        dictid: data.id,
+      };
     },
     Edit(id) {
       GetDictTypeDetail(id).then((response) => {