表头设置完成

src/views/BasicSettings/RouteSetting/detail.vue

@@ -41,6 +41,22 @@
         </Button>
       </template>
     </Toptitle>
+    <Form :label-width="100">
+      <FormItem label="页面">
+        <Select
+          v-model="formData.type"
+          transfer
+          filterable
+          clearable
+          style="width: 200px"
+          @on-change="handleChangeType"
+        >
+          <Option label="列表页" :value="1" />
+          <Option label="列表页详情" :value="2" />
+          <Option label="列表页详情的详情" :value="3" />
+        </Select>
+      </FormItem>
+    </Form>
     <vxe-grid
       v-bind="gridOptions"
       :merge-cells="mergeCells"
@@ -48,7 +64,7 @@
         !is_clear && !is_start
           ? {
               trigger: 'click',
-              mode: 'cell',
+              mode: 'row',
             }
           : {}
       "
@@ -91,6 +107,7 @@
 export default {
   data() {
     return {
+      formData: {},
       gridOptions: {
         border: true,
         resizable: true,
@@ -116,7 +133,7 @@ export default {
   },
   created() {
     //获取key
-    this.axios.post('/api/getHeaderSetting', { menu_id: 210 }).then(res => {
+    this.axios.post('/api/getHeaderSetting', { menu_id: this.$route.query.menu_id }).then(res => {
       this.headerList = [];
       for (let key in res.data) {
         this.headerList.push({ key: key, value: res.data[key] });
@@ -124,9 +141,83 @@ export default {
     })
   },
   methods: {
+    handleChangeType(e) {
+      if (e) {
+        this.axios.post('/api/HeaderSettingsDetail', { menu_id: this.$route.query.menu_id, type: e }).then(res => {
+          this.maxLength = res.data.maxLength;
+          this.list = [];
+          for (let i = 0; i < this.maxLength; i++) {
+            this.generateCombinations("", i + 1);
+          }
+          setTimeout(() => {
+            this.gridOptions.data = [];
+            let rowLength = 0;
+            let colLength = 0;
+            res.data.data.forEach(v => {
+
+              let arr = v.position.split(',');
+
+              let y = arr[arr.length - 1].toString().split(':');
+              let y1 = y[y.length - 1].split('');
+
+              let x = y1.toString().slice(0, y1.length - 1);
+              let xIndex = this.list.indexOf(x);
+              let yIndex = y1[y1.length - 1].toString() * 1;
+
+              if (yIndex > rowLength) {
+                rowLength = yIndex;
+              }
+              if (xIndex > colLength) {
+                colLength = xIndex;
+              }
+            })
+
+            this.gridOptions.columns = [{ type: 'seq', width: 50, title: '序号', showHeaderOverflow: true }];
+            for (let u = 0; u <= colLength; u++) {
+              console.log(u);
+              this.gridOptions.columns.push({
+                field: `${this.list[u]}`,
+                width: 100,
+                title: this.list[u], showHeaderOverflow: true,
+                editRender: {},
+                slots: {
+                  default: 'block',
+                  edit: 'in_block'
+                }
+              })
+            }
+            for (let k = 0; k < rowLength; k++) {
+              let obj = {};
+              let row = res.data.data.filter(c => c.y == k);
+              console.log(row, 11);
+              row.forEach(b => {
+                obj[`${this.list[b.x]}_key`] = b.key;
+                obj[`${this.list[b.x]}_title`] = b.value;
+              })
+
+              this.gridOptions.data.push(obj);
+
+            }
+            this.gridOptions.data.forEach((m, index) => {
+              this.gridOptions.data.splice(index, 1, m);
+            })
+            this.SureMergeCells = res.data.mergeCells;
+            this.mergeCells = JSON.parse(JSON.stringify(this.SureMergeCells));
+          })
+
+        })
+        this.$forceUpdate();
+      }
+    },
     handleSave() {
+      if (!this.formData.type) {
+        return this.$Message.warning('请先选择需要设置的页面！')
+      }
       let data = {};
       data.menu_id = this.$route.query.menu_id;
+      data.mergeCells = JSON.parse(JSON.stringify(this.mergeCells));
+      data.type = JSON.parse(JSON.stringify(this.formData.type));
+      data.maxLength = JSON.parse(JSON.stringify(this.maxLength));
       data.data = [];
       this.gridOptions.data.forEach((v, index) => {
         for (let key in v) {
@@ -140,13 +231,46 @@ export default {
           }
         }
       })
-      console.log(data.data);
-      // this.axios.post('/api/HeaderSettingsAdd', { ...data }).then(res => {
+      data.data.forEach(v => {
+        v.position = [];
+        if (this.mergeCells.find(c => v.y == c.row && v.x + 1 == c.col)) {
+          v.x1 = v.x + this.mergeCells.find(c => v.y == c.row && v.x + 1 == c.col).colspan - 1;
+          v.y1 = v.y + this.mergeCells.find(c => v.y == c.row && v.x + 1 == c.col).rowspan - 1;
+        }
+        if (v.x1 || v.x1 == 0) {
+          let rowLength = v.y1 - v.y;
 
-      // })
+          if (rowLength) {
+            for (let i = 0; i <= rowLength; i++) {
+
+              v.position.push(`${this.list[v.x]}${v.y + i + 1}:${this.list[v.x1]}${v.y + i + 1}`)
+            }
+          } else {
+            v.position.push(`${this.list[v.x]}${v.y + 1}:${this.list[v.x1]}${v.y1 + 1}`)
+          }
+        } else {
+          v.position.push(`${this.list[v.x]}${v.y + 1}`)
+        }
+      })
+      data.data.forEach(v => {
+        v.menu_id = data.menu_id;
+        v.type = this.formData.type;
+        v.position = v.position.toString();
+      })
+      this.axios.post('/api/HeaderSettingsAdd', { ...data }).then(res => {
+        if (res.code == 200) {
+          return this.$Message.success(res.msg)
+        }
+      })
     },
     handleChange(e, row, column) {
-      row[`${column.field}_title`] = this.headerList.find(v => v.key == e).value;
+      if (e) {
+        row[`${column.field}_title`] = this.headerList.find(v => v.key == e).value;
+
+      } else {
+        delete row[`${column.field}_title`];
+        delete row[`${column.field}_key`]
+      }
       this.mergeCells = JSON.parse(JSON.stringify(this.SureMergeCells));
     },
     handleClear() {
@@ -167,6 +291,9 @@ export default {
     handleClickTable(row, rowIndex, column) {
       let y = rowIndex;
       let x = this.list.indexOf(column.field);
+      console.log(column.field);
+      console.log(this.list);
+      console.log(rowIndex, x);
       if (row[`${column.field}_click`]) {
         row[`${column.field}_click`] = false;
         this.positionList.forEach((v, index) => {
@@ -222,10 +349,11 @@ export default {
         if (arr.every(z => this.positionList.find(c => (c.x == z.x && c.y == z.y) ? true : false))) {
           if (arr.some(m => this.gridOptions.data[m.y][`${this.list[m.x]}_title`])) {
             this.$Message.warning('表格不能合并！')
+
           } else {
             this.SureMergeCells.push(
               { row: min.y, col: (min.x + 1), rowspan: max.y - min.y + 1, colspan: max.x - min.x + 1 })
-            this.mergeCells = JSON.parse(JSON.stringify(this.SureMergeCells))
+
           }
           this.positionList = [];
 
@@ -234,6 +362,7 @@ export default {
           this.positionList = [];
           this.$Message.warning('表格不能合并！')
         }
+        this.mergeCells = JSON.parse(JSON.stringify(this.SureMergeCells))
         this.handleClearColor();
 
       }
@@ -253,6 +382,7 @@ export default {
     },
     handleAddRow() {
       this.gridOptions.data.push({})
+      this.mergeCells = JSON.parse(JSON.stringify(this.SureMergeCells))
     },
     generateCombinations(prefix, length) {
       if (length === 0) {
@@ -277,7 +407,7 @@ export default {
       // console.log(this.list)
       this.$nextTick(() => {
         this.gridOptions.columns.push({
-          field: this.list[(this.gridOptions.columns.length - 1) * 1],
+          field: `${this.list[(this.gridOptions.columns.length - 1) * 1]}`,
           width: 100,
           title: this.list[(this.gridOptions.columns.length - 1) * 1], showHeaderOverflow: true,
           editRender: {},
@@ -287,7 +417,7 @@ export default {
           }
         })
       })
-
+      this.mergeCells = JSON.parse(JSON.stringify(this.SureMergeCells))
     }
   }
 }