表头设置input输入

src/views/BasicSettings/RouteSetting/detail.vue

@@ -19,16 +19,23 @@
         <Button
           type="primary"
           style="margin-right: 10px"
-          :disabled="is_clear ? true : false"
+          :disabled="is_clear || is_edit ? true : false"
           @click="handleMerge"
           >{{ !is_start ? "开启合并" : "确认合并" }}</Button
         >
         <Button
           type="primary"
           @click="handleClear"
-          :disabled="is_start ? true : false"
+          style="margin-right: 10px"
+          :disabled="is_start || is_edit ? true : false"
           >{{ !is_clear ? "开启拆分" : "确认拆分" }}</Button
         >
+        <Button
+          type="primary"
+          @click="handleEditTitle"
+          :disabled="is_start || is_clear ? true : false"
+          >{{ !is_edit ? "开启编辑" : "结束编辑" }}</Button
+        >
       </template>
       <template #right>
         <Button
@@ -57,20 +64,10 @@
         </Select>
       </FormItem>
     </Form>
-    <vxe-grid
-      v-bind="gridOptions"
-      :merge-cells="mergeCells"
-      :edit-config="
-        !is_clear && !is_start
-          ? {
-              trigger: 'click',
-              mode: 'row',
-            }
-          : {}
-      "
-    >
+    <vxe-grid v-bind="gridOptions" :merge-cells="mergeCells">
       <template #block="{ row, rowIndex, column }">
         <div
+          v-show="!is_edit"
           :class="row[`${column.field}_click`] ? 'is_click' : 'no_click'"
           @click="
             () =>
@@ -81,24 +78,56 @@
         >
           {{ row[`${column.field}_title`] }}
         </div>
-      </template>
-      <template #in_block="{ row, column }">
-        <Select
-          clearable
-          filterable
-          transfer
-          v-model="row[`${column.field}_key`]"
-          @on-change="($event) => handleChange($event, row, column)"
+        <div
+          v-show="is_edit"
+          class="isEdit"
+          @click="handleShowEdit(row, rowIndex, column)"
         >
-          <Option
-            v-for="(item, index) in headerList"
-            :key="index"
-            :value="item.key"
-            :label="item.value"
-          />
-        </Select>
+          {{ row[`${column.field}_title`] }}
+        </div>
       </template>
     </vxe-grid>
+    <Modal
+      v-model="is_show"
+      width="30"
+      :closable="false"
+      :mask-closable="false"
+      title="编辑表头"
+    >
+      <Form :label-width="90">
+        <FormItem label="类型">
+          <RadioGroup v-model="modalData.type" @on-change="handleModalChange">
+            <Radio :label="1">手动输入</Radio>
+            <Radio :label="2">下拉选择</Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem v-show="modalData.type == 1" label="表头名称">
+          <Input v-model="modalData.title" clearable placeholder="请输入" />
+        </FormItem>
+        <FormItem v-show="modalData.type == 2" label="表头名称">
+          <Select
+            transfer
+            clearable
+            filterable
+            v-model="modalData.key"
+            @on-change="handleSelectTitle"
+          >
+            <Option
+              v-for="(item, index) in headerList"
+              :key="index"
+              :value="item.key"
+              :label="item.value"
+            />
+          </Select>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button style="margin-right: 10px" @click="is_show = false"
+          >取消</Button
+        >
+        <Button type="primary" @click="handleSureTitle">确认</Button>
+      </div>
+    </Modal>
   </div>
 </template>
 <script>
@@ -108,6 +137,7 @@ export default {
   data() {
     return {
       formData: {},
+      modalData: {},
       gridOptions: {
         border: true,
         resizable: true,
@@ -127,8 +157,10 @@ export default {
       SureMergeCells: [],
       is_start: false,
       is_clear: false,
+      is_edit: false,
       positionList: [],
-      headerList: []
+      headerList: [],
+      is_show: false,
     }
   },
   created() {
@@ -141,69 +173,111 @@ export default {
     })
   },
   methods: {
+    handleSelectTitle(e) {
+      if (e) {
+        this.modalData.title = this.headerList.find(v => v.key == e).value;
+
+      } else {
+        this.modalData.title = '';
+      }
+    },
+    handleSureTitle() {
+
+      this.gridOptions.data[this.modalData.rowIndex][`${this.modalData.column.field}_title`] = this.modalData.title;
+      this.gridOptions.data[this.modalData.rowIndex][`${this.modalData.column.field}_key`] = this.modalData.key;
+      this.is_show = false;
+      this.gridOptions.data.forEach((m, index) => {
+        this.gridOptions.data.splice(index, 1, m);
+      })
+      this.mergeCells = JSON.parse(JSON.stringify(this.SureMergeCells));
+    },
+    handleModalChange(e) {
+      this.$set(this.modalData, 'type', e);
+      this.modalData.title = '';
+      this.modalData.key = '';
+      this.$forceUpdate();
+    },
+    handleShowEdit(row, rowIndex, column) {
+      this.is_show = true;
+      this.modalData.type = row[`${column.field}_key`] ? 2 : 1;
+      this.modalData.column = column;
+      this.modalData.rowIndex = rowIndex;
+      this.modalData.key = row[`${column.field}_key`] ? row[`${column.field}_key`] : '';
+      this.modalData.title = row[`${column.field}_title`] ? row[`${column.field}_title`] : '';
+    },
+    handleEditTitle() {
+      this.is_edit = !this.is_edit;
+    },
     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 }];
+          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 }];
+
+          if (colLength != 0) {
             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);
+          for (let k = 0; k < rowLength; k++) {
+            let obj = {};
+            let row = res.data.data.filter(c => c.y == k);
 
-            }
-            this.gridOptions.data.forEach((m, index) => {
-              this.gridOptions.data.splice(index, 1, m);
+            row.forEach(b => {
+              obj[`${this.list[b.x]}_key`] = b.key;
+              obj[`${this.list[b.x]}_title`] = b.value;
             })
-            this.SureMergeCells = res.data.mergeCells;
-            this.mergeCells = JSON.parse(JSON.stringify(this.SureMergeCells));
+
+            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();
@@ -291,9 +365,6 @@ 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) => {
@@ -306,7 +377,7 @@ export default {
         this.positionList.push({ x, y });
       }
       this.gridOptions.data.splice(rowIndex, 1, row);
-      console.log(this.positionList);
+
       this.mergeCells = JSON.parse(JSON.stringify(this.SureMergeCells));
       // this.mergeCells = [
       //   { row: 4, col: 2, rowspan: 2, colspan: 5 }
@@ -404,16 +475,16 @@ export default {
         this.generateCombinations("", i + 1);
       }
 
-      // console.log(this.list)
+
       this.$nextTick(() => {
         this.gridOptions.columns.push({
           field: `${this.list[(this.gridOptions.columns.length - 1) * 1]}`,
           width: 100,
           title: this.list[(this.gridOptions.columns.length - 1) * 1], showHeaderOverflow: true,
-          editRender: {},
+
           slots: {
             default: 'block',
-            edit: 'in_block'
+
           }
         })
       })
@@ -426,12 +497,17 @@ export default {
 .is_click {
   height: 100%;
   background: rgb(203, 204, 209);
+}
+.is_click:hover {
   cursor: pointer;
 }
 .no_click {
   height: 100%;
 
   background: none;
+  // cursor: pointer;
+}
+.no_click:hover {
   cursor: pointer;
 }
 /deep/.vxe-cell {
@@ -442,4 +518,11 @@ export default {
   max-height: none !important;
   line-height: 400%;
 }
+.isEdit {
+  height: 100%;
+}
+.isEdit:hover {
+  background: rgb(203, 204, 209);
+  cursor: pointer;
+}
 </style>