fyy部门改成批量

src/main.js

@@ -11,7 +11,6 @@ import IconFont from "./assets/iconfont/iconfont.js";
 import Viewer from "v-viewer";
 import components from "@/untils/components";
 import "viewerjs/dist/viewer.css";
-
 import XEUtils from 'xe-utils'
 import VXEUtils from 'vxe-utils'
 

src/routerMap/index.js

@@ -61,6 +61,16 @@ const routerMap = [
     component: (resolve) => require(["@/views/BasicSettings/RouteSetting/index"], resolve),
   },
   {
+    path: "/cms/BasicSettings/RouteSetting/detail",
+    name: "RouteSettingDetail", //表头设置
+    meta: {
+      index: 3,
+      title: '菜单表头设置',
+      canMultipleOpen: true
+    },
+    component: (resolve) => require(["@/views/BasicSettings/RouteSetting/detail"], resolve),
+  },
+  {
     path: "/cms/BasicSettings/MeasureManage/index",
     name: "MeasureManage", //基础测量字段
     meta: {

src/views/BasicSettings/RouteSetting/detail.vue

@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <Toptitle>
+      <template #left>
+        <Button
+          type="primary"
+          style="margin-right: 10px"
+          @click="handleAddRow"
+          :disabled="is_start || is_clear ? true : false"
+          >新增行</Button
+        >
+        <Button
+          type="primary"
+          style="margin-right: 10px"
+          @click="handleAddColumns"
+          :disabled="is_start || is_clear ? true : false"
+          >新增列</Button
+        >
+        <Button
+          type="primary"
+          style="margin-right: 10px"
+          :disabled="is_clear ? true : false"
+          @click="handleMerge"
+          >{{ !is_start ? "开启合并" : "确认合并" }}</Button
+        >
+        <Button
+          type="primary"
+          @click="handleClear"
+          :disabled="is_start ? true : false"
+          >{{ !is_clear ? "开启拆分" : "确认拆分" }}</Button
+        >
+      </template>
+      <template #right>
+        <Button
+          type="primary"
+          ghost
+          @click="handleSave"
+          :disabled="is_start || is_clear ? true : false"
+        >
+          保存
+        </Button>
+      </template>
+    </Toptitle>
+    <vxe-grid
+      v-bind="gridOptions"
+      :merge-cells="mergeCells"
+      :edit-config="
+        !is_clear && !is_start
+          ? {
+              trigger: 'click',
+              mode: 'cell',
+            }
+          : {}
+      "
+    >
+      <template #block="{ row, rowIndex, column }">
+        <div
+          :class="row[`${column.field}_click`] ? 'is_click' : 'no_click'"
+          @click="
+            () =>
+              is_start || is_clear
+                ? handleClickTable(row, rowIndex, column)
+                : ''
+          "
+        >
+          {{ 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)"
+        >
+          <Option
+            v-for="(item, index) in headerList"
+            :key="index"
+            :value="item.key"
+            :label="item.value"
+          />
+        </Select>
+      </template>
+    </vxe-grid>
+  </div>
+</template>
+<script>
+
+
+export default {
+  data() {
+    return {
+      gridOptions: {
+        border: true,
+        resizable: true,
+        maxHeight: 'auto',
+        showOverflow: true,
+        align: 'center',
+        columns: [
+          { type: 'seq', width: 50, title: '序号', showHeaderOverflow: true }
+        ],
+        data: []
+      },
+      list: [],
+      maxLength: 1,
+      mergeCells: [
+
+      ],
+      SureMergeCells: [],
+      is_start: false,
+      is_clear: false,
+      positionList: [],
+      headerList: []
+    }
+  },
+  created() {
+    //获取key
+    this.axios.post('/api/getHeaderSetting', { menu_id: 210 }).then(res => {
+      this.headerList = [];
+      for (let key in res.data) {
+        this.headerList.push({ key: key, value: res.data[key] });
+      }
+    })
+  },
+  methods: {
+    handleSave() {
+      let data = {};
+      data.menu_id = this.$route.query.menu_id;
+      data.data = [];
+      this.gridOptions.data.forEach((v, index) => {
+        for (let key in v) {
+          let obj = {}
+          if (key.indexOf('key') != -1) {
+            obj.key = v[key];
+            obj.value = v[`${key.split('_')[0]}_title`];
+            obj.y = index;
+            obj.x = this.list.indexOf(key.split('_')[0]);
+            data.data.push(obj);
+          }
+        }
+      })
+      console.log(data.data);
+      // this.axios.post('/api/HeaderSettingsAdd', { ...data }).then(res => {
+
+      // })
+    },
+    handleChange(e, row, column) {
+      row[`${column.field}_title`] = this.headerList.find(v => v.key == e).value;
+      this.mergeCells = JSON.parse(JSON.stringify(this.SureMergeCells));
+    },
+    handleClear() {
+      this.is_clear = !this.is_clear;
+      if (this.is_clear) {
+
+      } else {
+        if (this.positionList.length == 0) {
+          return this.$Message.warning('未拆分单元格！')
+        }
+        this.SureMergeCells = this.SureMergeCells.filter(v => (this.positionList.find(c => c.y == v.row && c.x + 1 == v.col) ? false : true));
+        this.mergeCells = JSON.parse(JSON.stringify(this.SureMergeCells));
+        this.positionList = [];
+        this.handleClearColor();
+
+      }
+    },
+    handleClickTable(row, rowIndex, column) {
+      let y = rowIndex;
+      let x = this.list.indexOf(column.field);
+      if (row[`${column.field}_click`]) {
+        row[`${column.field}_click`] = false;
+        this.positionList.forEach((v, index) => {
+          if (v.x == x && v.y == y) {
+            this.positionList.splice(index, 1)
+          }
+        })
+      } else {
+        row[`${column.field}_click`] = true;
+        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 }
+      // ]
+    },
+    handleMerge() {
+      this.is_start = !this.is_start;
+      if (this.is_start) {
+
+      } else {
+        if (this.positionList.length == 0) {
+          return this.$Message.warning('未选择单元格合并！')
+        }
+
+        let min = JSON.parse(JSON.stringify(this.positionList[0]));
+        let max = JSON.parse(JSON.stringify(this.positionList[0]));
+        let arr = [];//必须要有的格子去合并
+        this.positionList.forEach(v => {
+          if (v['x'] * 1 < min['x'] * 1) {
+            min.x = v.x
+          }
+          if (v['x'] * 1 > max['x'] * 1) {
+            max.x = v.x
+          }
+          if (v['y'] * 1 < min['y'] * 1) {
+            min.y = v.y
+          }
+          if (v['y'] * 1 > max['y'] * 1) {
+            max.y = v.y
+          }
+        })
+        for (let i = 0; i <= Math.abs(max.x - min.x); i++) {
+          let obj = {};
+          for (let k = 0; k <= Math.abs(max.y - min.y); k++) {
+            obj.x = min.x + i;
+            obj.y = min.y + k;
+            arr.push(obj);
+          }
+        }
+        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 = [];
+
+        } else {
+
+          this.positionList = [];
+          this.$Message.warning('表格不能合并！')
+        }
+        this.handleClearColor();
+
+      }
+
+    },
+    handleClearColor() {//清空颜色
+      this.gridOptions.columns.forEach((v, index) => {
+        if (index) {
+          this.gridOptions.data.forEach((x) => {
+            x[`${v.field}_click`] = false;
+          })
+        }
+      })
+      this.gridOptions.data.forEach((v, index) => {
+        this.gridOptions.data.splice(index, 1, v);
+      })
+    },
+    handleAddRow() {
+      this.gridOptions.data.push({})
+    },
+    generateCombinations(prefix, length) {
+      if (length === 0) {
+        this.list.push(prefix);
+      } else {
+        for (let i = 65; i <= 90; i++) {
+          const currentChar = String.fromCharCode(i);
+          this.generateCombinations(prefix + currentChar, length - 1);
+        }
+      }
+    },
+    handleAddColumns() {
+      if (this.gridOptions.columns[this.gridOptions.columns.length - 1].title.split('').every((v) => v == 'Z')) {
+        this.maxLength += 1;
+      }
+      // 设置组合的最大长度
+      this.list = [];
+      for (let i = 0; i < this.maxLength; i++) {
+        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'
+          }
+        })
+      })
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.is_click {
+  height: 100%;
+  background: rgb(203, 204, 209);
+  cursor: pointer;
+}
+.no_click {
+  height: 100%;
+
+  background: none;
+  cursor: pointer;
+}
+/deep/.vxe-cell {
+  height: 100%;
+  width: 100% !important;
+  padding: 0;
+  margin: 0 !important;
+  max-height: none !important;
+  line-height: 400%;
+}
+</style>

src/views/BasicSettings/RouteSetting/index.vue

@@ -35,6 +35,7 @@
           <a @click="handleEdit(row)">修改</a>
           <a style="margin-left: 10px" @click="handleAdd(row)">新增</a>
           <a style="margin-left: 10px" @click="handleDel(row)">删除</a>
+          <a style="margin-left: 10px" @click="handleRouteSet(row)">表头设置</a>
         </template>
       </vxe-grid>
     </div>
@@ -128,6 +129,9 @@ export default {
     this.initData();
   },
   methods: {
+    handleRouteSet(row) {
+      this.$router.push({ path: '/cms/BasicSettings/RouteSetting/detail', query: { menu_id: row.id, title: '表头设置' } });
+    },
     ...mapActions(["undata_side_navData"]),
     initData() {
       this.axios.post('/api/menuList', { type: '1' }).then(res => {