1

lxl

2022-10-12 1494c7949d90e1e8407b71606947dc8d9cb60778

 src/views/maintenance/menuSettings.vue

@@ -2,46 +2,64 @@
  <div class="menuSettings_box">
    <div class="menuSettings_tree">
      <My-bread :list="['运维管理', '菜单设置']"></My-bread>
      <el-button class="saveBtn" type="primary" size="mini" @click="sendChange"
        >保存</el-button
      >
      <el-divider />
      <el-tree
        :data="data"
        :props="defaultProps"
        show-checkbox
        @check-change="handleCheckChange"
      />
      <div class="menuTreeBox">
        <el-tree
          ref="tree"
          :props="defaultProps"
          node-key="id"
          :data="menuList"
          :expand-on-click-node="false"
          :default-expand-all="true"
          draggable
          @node-click="handleNodeClick"
          @node-drag-start="handleDragStart"
          @node-drag-end="handleDrop"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="menuSettings">
      <div class="btn_box">
        <el-button type="primary">新建</el-button>
        <el-button type="primary">修改</el-button>
        <!-- <el-button class="delBtn">清除</el-button> -->
      <div class="title_box">
        <h4>详细信息</h4>
      </div>
      <div class="table_box">
        <el-table :data="tableData" stripe>
          <el-table-column prop="menuname" label="菜单名称" />
          <el-table-column prop="parentmenuname" label="父菜单名称" />
          <el-table-column prop="dataBulk" label="数据数量" />
          <el-table-column prop="creationtime" label="创建时间" />
          <el-table-column prop="creationname" label="创建人" />
          <el-table-column fixed="right" label="操作" width="280">
            <template #default>
              <!-- <el-button type="primary" size="small">修改</el-button> -->
              <el-button type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 40px" class="pagination_box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="10"
          >
          </el-pagination>
        </div>
      <div class="form_box">
        <el-form :model="itemdetail">
          <el-form-item label="英文名称" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.enName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="中文名称" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.cnName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.icon" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否显示" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.isShow" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="菜单Url" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.url" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="授权" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.perms" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="类型" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.type" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.bak" autocomplete="off"></el-input>
          </el-form-item>
          <div class="btnBox">
            <el-button type="primary" @click="updMenu">保存</el-button>
            <el-button type="primary" @click="reset">取消</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
@@ -49,7 +67,12 @@

<script>
import MyBread from "../../components/MyBread.vue";

import {
  queryMenuTree,
  updateMenuTree,
  updateMenuTrees,
  queryMaxId,
} from "../../api/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -58,169 +81,217 @@

  data() {
    return {
      currentPage4: 1,
      tableData: [
        {
          menuname: "数据质检",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "数据交换",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "数据管理",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "服务管理",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "综合展示",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "运维管理",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "菜单管理",
          parentmenuname: "运维管理",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "用户管理",
          parentmenuname: "运维管理",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "系统管理",
          parentmenuname: "运维管理",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "系统配置",
          parentmenuname: "运维管理",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
        label: "cnName",
      },
      data: [
        {
          label: "数据质检",
        },
        {
          label: "数据交换",
        },
        {
          label: "数据管理",
          children: [
            {
              label: "Level two 3-1",
              children: [
                {
                  label: "Level three 3-1-1",
                },
              ],
            },
            {
              label: "Level two 3-2",
              children: [
                {
                  label: "Level three 3-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "服务管理",
        },
        {
          label: "综合展示",
          children: [
            {
              label: "Level two 3-1",
              children: [
                {
                  label: "Level three 3-1-1",
                },
              ],
            },
            {
              label: "Level two 3-2",
              children: [
                {
                  label: "Level three 3-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "运维管理",
          children: [
            {
              label: "Level two 3-1",
              children: [
                {
                  label: "Level three 3-1-1",
                },
              ],
            },
            {
              label: "Level two 3-2",
              children: [
                {
                  label: "Level three 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      oriData: [], //原始树数据
      menuList: [], //el树数据
      old_dirDat: [], //el树数据(拖动前)
      newData: [], //拖动后原始数据
      itemdetail: {
        cnName: "",
        enName: "",
        icon: null,
        isShow: null,
        perms: null,
        url: "",
        type: null,
        bak: "",
      },
      backUpData: {},
      formLabelWidth: "170px",
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    getMenuTree() {
      //获取目录树最大ID，新建节点使用
      // queryMaxId().then((res) => {
      //   this.id = res.data;
      // });
      queryMenuTree().then((res) => {
        if (res.code == 200) {
          this.menuList = this.treeData(res.result);
          this.oriData = res.result;
          this.newData = res.result;
        } else {
          console.log("接口报错");
        }
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
      return cloneData.filter((father) => {
        // 循环所有项
        let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性，并赋值
        return father.pid == 1; // 返回一级菜单
      });
    },
    handleCheckChange() {},
    append(data) {
      this.$prompt("请输入名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          const newChild = {
            id: this.id + 1,
            name: value,
            pid: data.id,
            // children: [],
            orderNum: data.children ? data.children.length + 1 : 1,
          };
          this.id = newChild.id; //修改新的最大I
          console.log(newChild);

          if (!data.children) {
            this.$set(data, "children", []);
          }
          data.children.push(newChild);
          this.newData.push(newChild);
          // this.sendChange();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    remove(node, data) {
      this.$confirm("此操作将删除该节点, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex((d) => d.id === data.id);
          let res = children.splice(index, 1);
          var std = [];
          for (var i in res) {
            std.push(res[i].id);
          }
          // deleteDirTree(std);
          this.getDirTree();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // this.dialogMessage="是否删除"
      // this.dialogFlag = 1;
      // this.dialogFrom ={
      //   node:node,
      //   val:data
      // }
      //   this.dialogVisible=true;//目录树更改弹窗
      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex((d) => d.id === data.id);
      // let res = children.splice(index, 1);
      // // console.log(res);
      // // console.log(data);
      // console.log(this.flaten(res));
    },
    flaten(arr) {
      return arr.reduce((p, v, i) => {
        for (let i = 0; i < p.length; i++) {
          if (p[i].children) {
            delete p[i].children;
          }
        }
        return p.concat(v.children ? this.flaten(v.children).concat(v) : v);
      }, []);
    },
    handleDragStart(node, ev) {
      this.old_dirDat = JSON.parse(JSON.stringify(this.menuList)); //将备份的dir重新赋值
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      this.$confirm("是否调整至该位置?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //父节点
          let data = dropType != "inner" ? dropNode.parent.data : dropNode.data;
          // 父节点中全部子节点
          let nodeData =
            dropNode.level == 1 && dropType != "inner" ? data : data.children;
          //变更节点
          // console.log(nodeData);
          nodeData.forEach((item, i) => {
            if (dropType != "inner") {
              if (draggingNode.data.pid === dropNode.data.pid) {
                item.pid = item.pid;
              } else {
                item.pid = dropNode.data.pid;
              }
            } else {
              item.pid = data.id;
            }
            item.orderNum = i + 1;
          });
          console.log(nodeData);
          //更新原始整体数据
          let arr = [];
          this.oriData.forEach((e) => {
            nodeData.forEach((item) => {
              if (item.id === e.id) e = item;
            });
            arr.push(e);
          });
          this.newData = arr;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消更改",
          });
          this.menuList = this.old_dirDat; //将备份的dir重新赋值
        });
    },
    sendChange() {
      updateMenuTrees(this.newData).then((res) => {
        if (res.code == 200) {
          alert("更改完成。请及时刷新页面！");
          return;
        } else {
          alert("修改失败，请重试！");
        }
      });
    },
    handleNodeClick(data) {
      // console.log(data);
      this.backUpData = JSON.stringify(data);
      this.itemdetail = JSON.parse(JSON.stringify(data));
    },
    updMenu() {
      updateMenuTree(this.itemdetail).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          alert("修改完成，请及时刷新页面！");
          return;
        } else {
          alert("修改失败，请重试！");
        }
      });
    },
    reset() {
      this.itemdetail = JSON.parse(this.backUpData);
    },
  },
  created() {},
  mounted() {
    this.getMenuTree();
  },
};
</script>
<style lang="less" scoped>
@@ -233,6 +304,7 @@
  box-sizing: border-box;
  display: flex;
  .menuSettings_tree {
    position: relative;
    width: 344px;
    height: 100%;
    background: rgb(240, 242, 245);
@@ -240,14 +312,39 @@
    border-radius: 10px;
    box-sizing: border-box;
    overflow: auto;
    .el-tree {
      background: transparent;
      /deep/ .el-tree-node__label {
        font-size: 18px;
      }
      /deep/ .el-tree-node {
        padding-top: 10px;
        padding-bottom: 10px;
    .saveBtn {
      position: absolute;
      left: 250px;
      top: 23px;
    }
    .menuTreeBox {
      height: 90%;
      overflow: auto;
      .el-tree {
        background: transparent;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        // /deep/ .el-tree-node__label {
        //   font-size: 18px;
        // }
        /deep/ .el-tree-node {
          padding-top: 10px;
          // padding-bottom: 10px;
        }
        /deep/ .el-tree-node:focus > .el-tree-node__content {
          background-color: #b9b9b9;
        }
        /deep/ .el-tree-node__content:hover {
          background-color: rgb(153, 153, 153);
        }
        .btnBox {
          margin-left: 5px;
          .el-button + .el-button {
            margin-left: 5px;
          }
        }
      }
    }
  }
@@ -259,7 +356,7 @@
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    .btn_box {
    .title_box {
      background: #fff;
      padding: 10px;
      margin-bottom: 24px;
@@ -267,19 +364,22 @@
      border-radius: 10px;
      border: 1px solid rgb(202, 201, 204);
      box-sizing: border-box;
      .delBtn {
        margin-left: auto;
      }
    }
    .table_box {
    .form_box {
      border: 1px solid rgb(202, 201, 204);
      border-radius: 10px;
      background: #fff;
      padding: 10px;
      padding-top: 30px;
      box-sizing: border-box;
      width: 100%;
      .el-table__body {
        width: 100% !important;
      .el-input {
        width: 400px;
      }
      .btnBox {
        margin: 0 270px 20px;
        width: 200px;
        display: flex;
        justify-content: space-between;
      }
    }
  }