按钮权限添加

src/directives/permission.js

@@ -0,0 +1,24 @@
+import { store } from "../store/index.js";
+
+export default {
+  inserted(el, binding, vnode) {
+    const { value } = binding;
+    const all_permission = "*:*:*";
+    const permissions = store.getters && store.getters.permissions;
+
+    if (value && value instanceof Array && value.length > 0) {
+      const permissionFlag = value;
+
+      const hasPermissions = permissions.some((permission) => {
+        return (
+          all_permission === permission || permissionFlag.includes(permission)
+        );
+      });
+      if (!hasPermissions) {
+        el.parentNode && el.parentNode.removeChild(el);
+      }
+    } else {
+      throw new Error(`请设置操作权限标签值`);
+    }
+  },
+};

src/main.js

@@ -17,6 +17,7 @@ Vue.component("SvgIcons", SvgIcons);
 import qs from "qs";
 // 将自动注册所有组件为全局组件
 import dataV from "@jiaminghi/data-view";
+import permission from "./directives/permission"; // 导入自定义指令
 import lazyLoad from "./directives/lazyLoad";
 Vue.use(dataV);
 Vue.prototype.$qs = qs;
@@ -44,7 +45,7 @@ Vue.prototype.$formatDate = function (date) {
   return `${year}-${month}-${day}`;
 };
 Vue.directive("lazy-load", lazyLoad);
-
+Vue.directive("hasPermi", permission);
 // 时间戳转换
 Vue.prototype.$formatDateTWO = function (timestamp) {
   const date = new Date(timestamp);

src/store/auth.js

@@ -7,6 +7,7 @@ export default {
   state: {
     userInfo: {},
     dynamicRouter: [],
+    authBtnList: [],
   },
   getters: {},
   mutations: {
@@ -20,6 +21,9 @@ export default {
     SET_DYNAMIC_ROUTER(state, payload) {
       state.dynamicRouter = payload;
     },
+    SET_AUTHBTNLIST(state, payload) {
+      state.authBtnList = payload;
+    },
   },
   actions: {
     async goLogin({ commit, dispatch }, { loginForm, router }) {
@@ -50,8 +54,9 @@ export default {
         );
         // 清空原有的动态子路由
         homeRoute.children = originalChildren;
-        const { authRouterList } = getAuthRouterFn(resultRouter);
+        const { authRouterList, anthBtnList } = getAuthRouterFn(resultRouter);
         console.log();
+        commit("SET_AUTHBTNLIST", anthBtnList);
         commit("SET_DYNAMIC_ROUTER", authRouterList);
         authRouterList.forEach((item) => {
           // 动态路由的父路径设置为home

src/store/index.js

@@ -18,6 +18,7 @@ export const store = new Vuex.Store({
     getterPrice(state) {
       return (state.price += 100);
     },
+    permissions: (state) => state.auth.authBtnList,
     //调用this.$store.getters.getterPrice
   },
   mutations: {

src/utils/getAuth.js

@@ -2,6 +2,7 @@
 
 // 返回可动态添加的路由
 export const getAuthRouterFn = (list) => {
+  let anthBtnList = [];
   const filterTreeRecursive = (nodes) => {
     return nodes.reduce((filteredNodes, node) => {
       const newNode = { ...node };
@@ -20,10 +21,13 @@ export const getAuthRouterFn = (list) => {
             ? filterTreeRecursive(newNode.children)
             : undefined,
       });
+      if (node.permissionType === 3) {
+        anthBtnList.push(node.permissionCode);
+      }
       return filteredNodes;
     }, []);
   };
-  return { authRouterList: filterTreeRecursive(list) };
+  return { authRouterList: filterTreeRecursive(list), anthBtnList };
   // 将list 转成一维数组，按钮级别权限拿到 返回为[]格式
   //   const { result, anthBtnList } = flattenTree(list);
   //   const arr = filterTreeByPermissions(result, orgList);

src/views/performance/batchMag.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-27 09:23:37
- * @LastEditTime: 2024-06-27 09:35:32
+ * @LastEditTime: 2024-07-05 14:51:22
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/batchMag.vue
@@ -51,7 +51,11 @@
     </div>
     <div class="list-page">
       <div class="newly">
-        <el-button type="primary" @click="newnuedialog" size="small"
+        <el-button
+          v-hasPermi="['performance:batchMag:add']"
+          type="primary"
+          @click="newnuedialog"
+          size="small"
           >新增</el-button
         >
       </div>
@@ -96,10 +100,15 @@
           width="200"
         >
           <template slot-scope="scope">
-            <el-button @click="compile(scope.row)" type="text" size="small"
+            <el-button
+              v-hasPermi="['performance:batchMag:edit']"
+              @click="compile(scope.row)"
+              type="text"
+              size="small"
               >编辑</el-button
             >
             <el-button
+              v-hasPermi="['performance:batchMag:editState']"
               v-if="scope.row.batchState == 0"
               @click="setState(1, scope.row)"
               type="text"
@@ -108,6 +117,7 @@
             >
             <el-button
               v-else
+              v-hasPermi="['performance:batchMag:editState']"
               style="color: #666"
               @click="setState(0, scope.row)"
               type="text"
@@ -118,6 +128,7 @@
             <el-button
               style="color: #f00"
               @click="deleted(scope.row)"
+              v-hasPermi="['performance:batchMag:delete']"
               type="text"
               size="small"
               :disabled="scope.row.batchState == 1"

src/views/system/menuMag/components/editDialog.vue

@@ -157,6 +157,7 @@ export default {
   created() {
     this.initializeForm();
   },
+
   watch: {
     row: {
       handler(newVal) {
@@ -193,7 +194,6 @@ export default {
       };
     },
     initializeForm() {
-      console.log(this.checkId, "checkid");
       this.menuOptions[0].children.push(...this.tableData);
       if (this.row && this.title === "编辑" && this.activeName === "2") {
         this.menuForm = {
@@ -241,13 +241,14 @@ export default {
     },
 
     normalizer(node) {
-      if (node.children && !node.children.length) {
+      const children = Array.isArray(node.children) ? node.children : [];
+      if (children.length === 0) {
         delete node.children;
       }
       return {
         id: node.permissionId,
         label: node.permissionName,
-        children: node.children,
+        children: children.length > 0 ? [...children] : undefined,
       };
     },
     submit() {

src/views/system/menuMag/components/editDialogBtn.vue

@@ -0,0 +1,248 @@
+<template>
+  <div>
+    <el-form
+      :model="menuForm"
+      :rules="addMenuRules"
+      ref="addUserForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+      <el-form-item label="上级目录:" prop="parentId">
+        <treeselect
+          :normalizer="normalizer"
+          :noChildrenText="'没有子选项'"
+          :noOptionsText="'没有可选项'"
+          :noResultsText="'没有匹配的结果'"
+          :placeholder="'请选择'"
+          :searchable="true"
+          v-model="menuForm.parentId"
+          placeholder="请选择"
+          :options="menuOptions"
+        ></treeselect>
+      </el-form-item>
+      <el-form-item label="菜单名称:" prop="pname">
+        <el-input
+          v-model="menuForm.pname"
+          placeholder="请输入菜单名称"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="权限标识:" prop="pcode">
+        <el-input
+          v-model="menuForm.pcode"
+          placeholder="请输入权限标识"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="状态:" prop="pstat">
+        <el-select
+          v-model="menuForm.pstat"
+          placeholder="请选择状态"
+          style="width: 100%"
+        >
+          <el-option label="启用" :value="1"></el-option>
+          <el-option label="停用" :value="0"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Treeselect from "@riophae/vue-treeselect";
+import { addMenuFn, updateMenuFn } from "@/api/system";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  components: {
+    Treeselect,
+  },
+  props: {
+    activeName: {
+      type: String,
+    },
+    tableData: {
+      type: Array,
+    },
+    checkId: {
+      type: Number,
+    },
+    title: {
+      type: String,
+    },
+    row: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      name: "",
+      menuForm: {
+        parentId: null,
+        pname: null,
+        purl: null,
+        pstat: null,
+        pcode: null,
+        permissionShow: 2,
+        piconUrl: "",
+      },
+      addMenuRules: {
+        // permissionShow: {
+        //   required: true,
+        //   message: "请选择",
+        //   trigger: "change",
+        // },
+        pcode: [{ required: true, message: "请填写权限标识", trigger: "blur" }],
+        pname: [{ required: true, message: "请填写菜单名称", trigger: "blur" }],
+        // purl: [{ required: true, message: "请填写路由地址", trigger: "blur" }],
+        parentId: [
+          { required: true, message: "请选择上级目录", trigger: "change" },
+        ],
+        pstat: [{ required: true, message: "请选择状态", trigger: "change" }],
+      },
+      stateOptions: [],
+      menuOptions: [
+        { permissionId: 0, permissionName: "主类目", children: [] },
+      ],
+    };
+  },
+  created() {
+    this.initializeForm();
+  },
+  watch: {
+    row: {
+      handler(newVal) {
+        if (newVal) {
+          this.initializeForm();
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+    checkId(newVal) {
+      if (newVal !== null && newVal !== undefined) {
+        this.menuForm.parentId = newVal;
+        this.initializeForm();
+      }
+    },
+    tableData: {
+      handler(newData) {
+        this.$nextTick(() => {
+          this.menuOptions[0].children = [];
+          this.menuOptions[0].children.push(...newData);
+        });
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    // 选择图标
+    selected(name) {
+      this.menuForm = {
+        ...this.menuForm,
+        piconUrl: name,
+      };
+    },
+    initializeForm() {
+      this.menuOptions[0].children.push(...this.tableData);
+      if (this.row && this.title === "编辑") {
+        this.menuForm = {
+          parentId: this.row.parentId,
+          pname: this.row.permissionName,
+          purl: this.row.permissionUrl,
+          pstat: this.row.permissionState,
+          pcode: this.row.permissionCode,
+          permissionShow: 2,
+        };
+      } else if (this.title === "新增") {
+        this.menuForm.parentId = this.checkId;
+      } else {
+        this.menuForm.parentId = 0;
+      }
+    },
+    normalizer(node) {
+      const children = Array.isArray(node.children) ? node.children : [];
+      if (children.length === 0) {
+        delete node.children;
+      }
+      return {
+        id: node.permissionId,
+        label: node.permissionName,
+        children: children.length > 0 ? [...children] : undefined,
+      };
+    },
+    submit() {
+      this.$refs["addUserForm"].validate((valid) => {
+        if (valid) {
+          if (this.title === "编辑" && this.row) {
+            updateMenuFn({
+              ...this.menuForm,
+              ptype: this.activeName,
+              permissionId: this.row.permissionId,
+            })
+              .then((res) => {
+                this.$message({
+                  type: "success",
+                  message: "编辑成功",
+                });
+                this.cancel();
+                this.$emit("updateList");
+              })
+              .catch((error) => {
+                this.$message({
+                  type: "error",
+                  message: "编辑失败",
+                });
+              });
+          } else if (this.title === "新增") {
+            addMenuFn({
+              ...this.menuForm,
+              purl:
+                this.menuForm.purl !== null ? this.menuForm.purl : undefined,
+              ptype: this.activeName,
+              parentId: this.menuForm.parentId,
+            })
+              .then((res) => {
+                this.$message({
+                  type: "success",
+                  message: "新增成功",
+                });
+                this.cancel();
+                this.$emit("updateList");
+              })
+              .catch((error) => {
+                this.$message({
+                  type: "error",
+                  message: "新增失败",
+                });
+              });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    cancel() {
+      this.$refs["addUserForm"].resetFields();
+      this.menuForm = {
+        parentId: null,
+        pname: null,
+        purl: null,
+        pstat: null,
+        pcode: null,
+        permissionShow: 2,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-input__prefix {
+  line-height: 50px !important;
+}
+.demo-ruleForm {
+  .el-form-item {
+    margin-bottom: 25px;
+  }
+}
+</style>

src/views/system/menuMag/index.vue

@@ -154,6 +154,17 @@
               @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>
@@ -174,9 +185,11 @@ import {
   getAllMenu,
 } from "@/api/system";
 import EditMenu from "./components/editDialog.vue";
+import EditMenuBtn from "./components/editDialogBtn.vue";
 export default {
   components: {
     EditMenu,
+    EditMenuBtn,
   },
   data() {
     return {
@@ -197,7 +210,7 @@ export default {
       },
       tableData: [],
       unusualdialog: false,
-      checkId: "",
+      checkId: 0,
     };
   },
   created() {
@@ -229,10 +242,11 @@ export default {
     handleClose() {
       if (this.activeName === "1") {
         this.$refs.addList.cancel();
-      } else {
+      } 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;
@@ -275,10 +289,13 @@ export default {
         this.$refs.addList.submit();
         this.checkId = null;
         //目录
-      } else {
+      } 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() {
@@ -301,9 +318,12 @@ export default {
       if (row.permissionType === 1) {
         this.activeName = "1";
         this.checkId = 0;
-      } else {
+      } 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 = "编辑";
@@ -313,6 +333,10 @@ export default {
       this.unusualdialog = true;
       this.checkId = row.permissionId;
       this.activeName = "2";
+      if (row.permissionType === 2) {
+        this.activeName = "3";
+      }
+
       this.title = "新增";
     },
     // 启用/停用
@@ -369,4 +393,12 @@ export default {
 .el-select {
   width: 250px;
 }
+.views {
+  .el-tabs--border-card {
+    min-height: 470px;
+  }
+}
+.dialog-footer {
+  margin-top: 20px;
+}
 </style>