performance-test/src/views/system/menuMag/index.vue

<template>
  <div class="global-variable">
    <div class="condition">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        ref="ruleForm"
        :rules="rules"
      >
        <el-form-item label="菜单名称:" prop="permissionName">
          <el-input
            v-model="formInline.permissionName"
            placeholder="请输入菜单名称"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态:" prop="permissionState">
          <el-select
            v-model="formInline.permissionState"
            placeholder="选择状态"
            size="small "
          >
            <el-option label="启用" value="1"></el-option>
            <el-option label="停用" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="small"
            >查询</el-button
          >
          <el-button @click="reset('ruleForm')" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="list-page">
      <div class="newly">
        <el-button
          v-hasPermi="['system:menu:add']"
          type="primary"
          @click="newnuedialog"
          size="small"
          >新增</el-button
        >
        <el-button type="primary" @click="toggleExpandAll" size="small">{{
          defaultExpandAll ? "收起" : "展开"
        }}</el-button>
      </div>
      <el-table
        v-loading="loading"
        class="center-align-table"
        :data="tableData"
        border
        stripe
        row-key="permissionId"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        ref="table"
      >
        <el-table-column prop="permissionName" label="菜单名称">
        </el-table-column>
        <el-table-column
          prop="permissionType"
          label="类型"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.permissionType == 1
                ? "目录"
                : scope.row.permissionType == 2
                ? "菜单"
                : "按钮"
            }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="permissionCode" label="权限标识" align="center">
        </el-table-column>
        <el-table-column prop="permissionUrl" label="路径" align="center">
        </el-table-column>
        <el-table-column
          prop="permissionState"
          label="状态"
          align="center"
          min-width="80"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.permissionState === 1 ? "启用" : "停用" }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              v-hasPermi="['system:menu:edit']"
              @click="compile(scope.row)"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button
              v-hasPermi="['system:menu:add']"
              @click="newcomer(scope.row)"
              type="text"
              size="small"
              >新增</el-button
            >
            <el-button
              v-if="scope.row.permissionState === 0"
              @click="updateState(scope.row, 1)"
              type="text"
              size="small"
              v-hasPermi="['system:menu:editState']"
              >启用</el-button
            >
            <el-button
              v-else
              style="color: #666"
              @click="updateState(scope.row, 0)"
              type="text"
              size="small"
              v-hasPermi="['system:menu:editState']"
              >停用</el-button
            >
            <el-button
              style="color: #f00"
              @click="deleted(scope.row)"
              type="text"
              size="small"
              v-hasPermi="['system:menu:delete']"
              :disabled="scope.row.permissionState == 1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增编辑弹出层 -->
    <el-dialog
      :title="title"
      :visible.sync="unusualdialog"
      width="500px"
      @close="handleClose"
      :before-close="handleCloses"
    >
      <div v-loading="loadingView" class="views">
        <el-tabs type="border-card" class="tabs" v-model="activeName">
          <el-tab-pane label="目录" name="1"
            ><EditMenu
              v-if="activeName === '1'"
              ref="addList"
              :activeName="activeName"
              :tableData="tableData"
              :checkId="checkId"
              :title="title"
              @updateList="updateList"
              :row="row"
            />
          </el-tab-pane>
          <el-tab-pane label="菜单" name="2"
            ><EditMenu
              v-if="activeName === '2'"
              ref="addMenu"
              :activeName="activeName"
              :tableData="tableData"
              :checkId="checkId"
              :title="title"
              @updateList="updateList"
              :row="row"
          /></el-tab-pane>
          <el-tab-pane label="功能" name="3"
            ><EditMenuBtn
              v-if="activeName === '3'"
              ref="addMenuBtn"
              :activeName="activeName"
              :tableData="tableData"
              :checkId="checkId"
              :title="title"
              @updateList="updateList"
              :row="row"
          /></el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose" size="small">取 消</el-button>
          <el-button type="primary" @click="editAuthMenu" size="small"
            >确 定</el-button
          >
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deleteMenuFn, updateMenuFn, getAllMenu } from "@/api/system";
import EditMenu from "./components/editDialog.vue";
import EditMenuBtn from "./components/editDialogBtn.vue";
export default {
  components: {
    EditMenu,
    EditMenuBtn,
  },
  data() {
    return {
      piconUrl: "",
      activeName: "1",
      title: "",
      loadingView: false,
      defaultExpandAll: false,
      row: {},
      rules: {
        roleId: { permissionName: "change" },
        userName: { permissionState: "blur" },
      },
      loading: false,
      formInline: {
        permissionName: "",
        permissionState: "",
      },
      tableData: [],
      unusualdialog: false,
      checkId: 0,
    };
  },
  created() {
    this.getTableList();
  },
  watch: {
    tableData: {
      handler(newData) {
        this.$nextTick(() => {
          this.setExpandAll(this.defaultExpandAll);
        });
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleCloses(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    selected(name) {
      this.piconUrl = name;
    },
    handleClose() {
      if (this.activeName === "1") {
        this.$refs.addList.cancel();
      } else if (this.activeName === "2") {
        this.$refs.addMenu.cancel();
      } else if (this.activeName === "3") {
        this.$refs.addMenuBtn.cancel();
      }
      this.loadingView = false;
      this.unusualdialog = false;
      this.checkId = null;
    },
    toggleExpandAll() {
      this.defaultExpandAll = !this.defaultExpandAll;
      this.$nextTick(() => {
        this.setExpandAll(this.defaultExpandAll);
      });
    },
    setExpandAll(expand) {
      const table = this.$refs.table;
      if (table) {
        this.tableData.forEach((row) => {
          table.toggleRowExpansion(row, expand);
          if (row.children) {
            row.children.forEach((child) => {
              table.toggleRowExpansion(child, expand);
            });
          }
        });
      }
    },
    async getTableList() {
      try {
        this.loading = true;
        const result = await getAllMenu({ ...this.formInline });
        this.tableData = result.data;
        this.loading = false;
      } catch (error) {
        this.$message({
          type: "error",
          message: "请检查是否连接网络",
        });
      }
    },
    //弹框确定按钮
    editAuthMenu() {
      if (this.activeName === "1") {
        this.$refs.addList.submit();
        this.checkId = null;
        //目录
      } else if (this.activeName === "2") {
        //菜单
        this.$refs.addMenu.submit();
        this.checkId = null;
      } else if (this.activeName === "3") {
        this.$refs.addMenuBtn.submit();
        this.checkId = null;
      }
    },
    updateList() {
      this.getTableList();
      this.unusualdialog = false;
    },
    // 查询
    onSubmit() {
      this.getTableList();
    },
    // 重置
    reset(formName) {
      this.$refs[formName].resetFields();
      this.getTableList();
    },
    // 编辑
    compile(row) {
      this.unusualdialog = true;

      if (row.permissionType === 1) {
        this.activeName = "1";
        this.checkId = 0;
      } else if (row.permissionType === 2) {
        this.activeName = "2";
        this.checkId = row.parentId;
      } else if (row.permissionType === 3) {
        this.activeName = "3";
        this.checkId = row.parentId;
      }
      this.row = { ...row };
      this.title = "编辑";
    },
    // 新增子级
    newcomer(row) {
      this.unusualdialog = true;
      this.checkId = row.permissionId;
      this.activeName = "2";
      if (row.permissionType === 2) {
        this.activeName = "3";
      }

      this.title = "新增";
    },
    // 启用/停用
    updateState(row, state) {
      updateMenuFn({ permissionId: row.permissionId, pstat: state })
        .then((res) => {
          this.$message({
            message: "状态更新成功",
            type: "success",
          });
          this.getTableList();
        })
        .catch(() => {});
    },

    // 删除
    deleted(row) {
      this.$confirm("此操作将永久删除该文件，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 执行删除操作
          deleteMenuFn({ permissionId: row.permissionId })
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功！",
              });
              this.getTableList();
            })
            .catch(() => {});
        })
        .catch(() => {
          // 取消删除
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //新增菜单目录
    newnuedialog() {
      this.unusualdialog = true;
      this.activeName = "1";
      this.title = "新增";
    },
  },
};
</script>

<style lang="scss" scoped>
.el-select {
  width: 250px;
}
.views {
  .el-tabs--border-card {
    min-height: 470px;
  }
}
.dialog-footer {
  margin-top: 20px;
}
</style>