菜单

lxl

2022-11-07 c6a9b11ff0783bcd81a043a179fbc27f685eee70

 src/views/maintenance/menuSettings.vue

@@ -23,6 +23,7 @@
            <span>{{ node.label }}</span>
            <span class="btnBox">
              <el-button
                v-if="menuStatus.insert"
                type="text"
                size="mini"
                @click="() => append(node, data)"
@@ -30,6 +31,7 @@
                <i class="el-icon-circle-plus"></i>
              </el-button>
              <el-button
                v-if="menuStatus.delete"
                type="text"
                size="mini"
                @click="() => remove(node, data)"
@@ -99,7 +101,7 @@
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.bak" autocomplete="off"></el-input>
          </el-form-item>
          <div class="btnBox">
          <div class="btnBox" v-if="menuStatus.update">
            <el-button type="primary" @click="updMenu('itemdetail')"
              >保存</el-button
            >
@@ -179,15 +181,15 @@
</template>

<script>
import MyBread from "../../components/MyBread.vue";
import MyBread from '../../components/MyBread.vue';
import {
  queryMenuTree,
  queryMenuAll,
  updateMenuTree,
  updateMenuTrees,
  queryMaxId,
  insertMenu,
  deleteMenu,
} from "../../api/api";
} from '../../api/api';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -195,9 +197,14 @@
  },
  data() {
    return {
      menuStatus: {
        delete: false,
        insert: false,
        update: false,
      },
      defaultProps: {
        children: "children",
        label: "cnName",
        children: 'children',
        label: 'cnName',
      },
      fullscreenLoading: false,
      oriData: [], //原始树数据
@@ -205,53 +212,53 @@
      old_dirDat: [], //el树数据(拖动前)
      newData: [], //拖动后原始数据
      itemdetail: {
        cnName: "",
        enName: "",
        cnName: '',
        enName: '',
        icon: null,
        isShow: null,
        perms: null,
        url: "",
        url: '',
        type: null,
        bak: "",
        bak: '',
      },
      backUpData: "",
      formLabelWidth: "130px",
      delChildID: "",
      backUpData: '',
      formLabelWidth: '130px',
      delChildID: '',
      delChildIDs: [],
      dialogFormVisible: false,
      ruleForm: {
        level: null,
        orderNum: null,
        pid: null,
        enName: "",
        cnName: "",
        icon: "",
        enName: '',
        cnName: '',
        icon: '',
        isShow: null,
        url: "",
        url: '',
        perms: null,
        type: null,
        bak: "",
        bak: '',
      },
      rules: {
        enName: [
          { required: true, message: "请输入英文名称", trigger: "blur" },
          { required: true, message: '请输入英文名称', trigger: 'blur' },
        ],
        cnName: [
          { required: true, message: "请输入中文名称", trigger: "blur" },
          { required: true, message: '请输入中文名称', trigger: 'blur' },
        ],

        isShow: [
          {
            required: true,
            message: "请选择是否显示",
            trigger: "change",
            message: '请选择是否显示',
            trigger: 'change',
          },
        ],
        type: [
          {
            required: true,
            message: "请选择节点类型",
            trigger: "change",
            message: '请选择节点类型',
            trigger: 'change',
          },
        ],
      },
@@ -260,25 +267,25 @@
      options1: [
        {
          value: 0,
          label: "隐藏",
          label: '隐藏',
        },
        {
          value: 1,
          label: "显示",
          label: '显示',
        },
      ],
      options2: [
        {
          value: 0,
          label: "根目录",
          label: '根目录',
        },
        {
          value: 1,
          label: "菜单",
          label: '菜单',
        },
        {
          value: 2,
          label: "按钮",
          label: '按钮',
        },
      ],
    };
@@ -289,13 +296,13 @@
      // queryMaxId().then((res) => {
      //   this.id = res.data;
      // });
      queryMenuTree().then((res) => {
      queryMenuAll().then((res) => {
        if (res.code == 200) {
          this.menuList = this.treeData(res.result);
          this.oriData = res.result;
          this.newData = res.result;
        } else {
          console.log("接口报错");
          console.log('接口报错');
        }
      });
    },
@@ -304,7 +311,7 @@
      return cloneData.filter((father) => {
        // 循环所有项
        let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性，并赋值
        branchArr.length > 0 ? (father.children = branchArr) : ''; // 给父级添加一个children属性，并赋值
        return father.pid == 0; // 返回一级菜单
      });
    },
@@ -332,8 +339,8 @@
                  this.fullscreenLoading = false;
                  if (res.code == 200) {
                    this.$message({
                      message: "添加成功",
                      type: "success",
                      message: '添加成功',
                      type: 'success',
                    });
                    this.getMenuTree();
                    this.itemdetail = {};
@@ -345,7 +352,7 @@
              })
              .catch((res) => {
                this.itemdetail = {};
                this.$message.error("添加失败");
                this.$message.error('添加失败');
                this.fullscreenLoading = false;
                console.log(res);
              });
@@ -357,10 +364,10 @@
      });
    },
    remove(node, data) {
      this.$confirm("此操作将删除该节点, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      this.$confirm('此操作将删除该节点, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //兄弟重新排序
@@ -381,25 +388,25 @@
            .then((res) => {
              if (res[0].code == 200 && res[1].code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                  type: 'success',
                  message: '删除成功!',
                });
                this.getMenuTree();
                this.itemdetail = {};
              } else if (res[0].code == 200) {
                this.getMenuTree();
                this.$message.error("删除成功，位置调整失败");
                this.$message.error('删除成功，位置调整失败');
              } else if (res[1].code == 200) {
                this.getMenuTree();
                this.$message.error("删除失败,位置调整成功");
                this.$message.error('删除失败,位置调整成功');
              } else {
                this.$message.error("删除失败");
                this.$message.error('删除失败');
              }
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "删除失败",
                type: 'error',
                message: '删除失败',
              });
            });

@@ -407,7 +414,7 @@
          this.delChildIDs = [];
        })
        .catch(() => {
          this.$message("已取消删除");
          this.$message('已取消删除');
        });
    },
    traverseArr(obj) {
@@ -435,21 +442,21 @@
      this.old_dirDat = JSON.parse(JSON.stringify(this.menuList)); //将备份的dir重新赋值
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      this.$confirm("此操作将保存目录更改, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      this.$confirm('此操作将保存目录更改, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //父节点
          let data = dropType != "inner" ? dropNode.parent.data : dropNode.data;
          let data = dropType != 'inner' ? dropNode.parent.data : dropNode.data;
          // 父节点中全部子节点
          let nodeData =
            dropNode.level == 1 && dropType != "inner" ? data : data.children;
            dropNode.level == 1 && dropType != 'inner' ? data : data.children;
          //变更节点
          // console.log(nodeData);
          nodeData.forEach((item, i) => {
            if (dropType != "inner") {
            if (dropType != 'inner') {
              if (draggingNode.data.pid === dropNode.data.pid) {
                item.pid = item.pid;
              } else {
@@ -474,8 +481,8 @@
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消更改",
            type: 'info',
            message: '已取消更改',
          });
          this.menuList = this.old_dirDat; //将备份的dir重新赋值
        });
@@ -492,11 +499,11 @@
            this.getMenuTree();
            return;
          } else {
            alert("调整失败，请重试！");
            alert('调整失败，请重试！');
          }
        })
        .catch(() => {
          alert("修改失败，请重试！");
          alert('修改失败，请重试！');
        });
    },
    handleNodeClick(data) {
@@ -522,7 +529,7 @@
                }, 500);
              })
              .catch((res) => {
                alert("修改失败，请重试！");
                alert('修改失败，请重试！');
                this.fullscreenLoading = false;
              });
          } else {
@@ -533,14 +540,36 @@
    },
    reset(formName) {
      this.$refs[formName].resetFields();
      if (this.backUpData != "") {
      if (this.backUpData != '') {
        this.itemdetail = JSON.parse(this.backUpData);
      }
    },
    showPermsMenu(res) {
      switch (res.tag) {
        case '/delete':
          this.menuStatus.delete = true;
          break;
        case '/insert':
          this.menuStatus.insert = true;
          break;
        case '/update':
          this.menuStatus.update = true;
          break;
      }
    },
  },
  mounted() {
    this.getMenuTree();
  },
  created() {
    var val = this.$store.state.currentPerms;
    var permsEntity = this.$store.state.permsEntity;
    for (var i = 0; i < permsEntity.length; i++) {
      if (permsEntity[i].perms == val) {
        this.showPermsMenu(permsEntity[i]);
      }
    }
  },
};
</script>
<style lang="less" scoped>