管理员权限维护

VinnoManagementSystem/src/views/adminManage/adminAuthority.vue

@@ -0,0 +1,167 @@
+<template>
+  <el-container>
+    <el-aside width="300px" v-loading="menuloading">
+      <el-container>
+        <el-header>
+          <el-input
+            :placeholder="$t('pleaseInput')"
+            v-model="menuFilterText"
+            clearable
+          ></el-input>
+        </el-header>
+        <el-main class="nopadding">
+          <el-tree
+            ref="menu"
+            class="menu"
+            node-key="MenuId"
+            :data="menuList"
+            :props="menuProps"
+            highlight-current
+            default-expand-all
+            :expand-on-click-node="false"
+            check-strictly
+            :draggable="false"
+            :filter-node-method="menuFilterNode"
+            @node-click="menuClick"
+            @node-drop="nodeDrop"
+          >
+            <template #default="{ node, data }">
+              <span class="custom-tree-node el-tree-node__label">
+                <span class="label">
+                  {{ node.label }}
+                </span>
+                <span class="do">
+                  <el-icon @click.stop="add(node, data)"
+                    ><el-icon-plus
+                  /></el-icon>
+                </span>
+              </span>
+            </template>
+          </el-tree>
+        </el-main>
+        <el-footer style="height: 51px">
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-plus"
+            @click="add()"
+          ></el-button>
+        </el-footer>
+      </el-container>
+    </el-aside>
+    <el-container>
+      <el-main class="nopadding" style="padding: 20px" ref="main">
+        <save ref="save" :menu="menuList" @success="getMenu"></save>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+let newMenuIndex = 1;
+import save from "./saveAuthority";
+import common from "@/utils/common";
+
+export default {
+  name: "settingMenu",
+  components: {
+    save,
+  },
+  data() {
+    return {
+      menuloading: false,
+      menuList: [],
+      menuProps: {
+        label: function (a) {
+          return `${a.Label}${a.UniqueCode ? `(${a.UniqueCode})` : ""}`;
+        },
+        id: "Id",
+        children: "Children",
+      },
+      menuFilterText: "",
+      authorityList: [],
+    };
+  },
+  watch: {
+    menuFilterText(val) {
+      this.$refs.menu.filter(val);
+    },
+  },
+  mounted() {
+    this.getMenu();
+  },
+  methods: {
+    //加载树数据
+    async getMenu() {
+      this.menuloading = true;
+      var menuList = await this.$API.wing.post("GetAdminFeatureList");
+      this.menuList = menuList;
+      this.authorityList = await this.$API.wing.post(
+        "GetAdminFeatureSelectList"
+      );
+      this.menuloading = false;
+    },
+    //树点击
+    menuClick(data) {
+      if (!data.MenuId) {
+        data.MenuId = data.Id;
+      }
+      this.$refs.save.setData(data, this.authorityList);
+      this.$refs.main.$el.scrollTop = 0;
+    },
+    //树过滤
+    menuFilterNode(value, data) {
+      if (!value) return true;
+      var targetText = `${data.Label}${
+        data.UniqueCode ? `(${data.UniqueCode})` : ""
+      }`;
+      return targetText.indexOf(value) !== -1;
+    },
+    //增加
+    async add(node) {
+      var newMenuData = {
+        MenuId: common.guid(),
+        Label: `未命名${newMenuIndex++}`,
+        FatherCode: node?.data?.Id,
+      };
+      this.$refs.menu.append(newMenuData, node);
+      this.$refs.menu.setCurrentKey(newMenuData.MenuId);
+      this.$refs.save.setData(newMenuData, this.authorityList);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.custom-tree-node {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 24px;
+  height: 100%;
+}
+.custom-tree-node .label {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.custom-tree-node .label .el-tag {
+  margin-left: 5px;
+}
+.custom-tree-node .do {
+  display: none;
+}
+.custom-tree-node .do i {
+  margin-left: 5px;
+  color: #999;
+}
+.custom-tree-node .do i:hover {
+  color: #333;
+}
+
+.custom-tree-node:hover .do {
+  display: inline-block;
+}
+</style>

VinnoManagementSystem/src/views/adminManage/saveAuthority.vue

@@ -0,0 +1,138 @@
+<template>
+  <el-empty
+    :description="$t('user.selectItem')"
+    :image-size="100"
+    v-if="!form.MenuId"
+  ></el-empty>
+  <template v-else>
+    <h2>{{ $t(isEdit ? "edit" : "create") }}</h2>
+    <el-form
+      :model="form"
+      :rules="rules"
+      ref="dialogForm"
+      label-width="150px"
+      label-position="right"
+    >
+      <el-form-item :label="$t('user.authorityName')" prop="FeatureName">
+        <el-input
+          v-model="form.FeatureName"
+          clearable
+          :placeholder="$t('user.authorityNameRequire')"
+        ></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('user.uniqueCode')" prop="UniqueCode">
+        <el-input
+          v-model="form.UniqueCode"
+          :placeholder="$t('user.uniqueCodeRequire')"
+          :disabled="form.OldUniqueCode !== ''"
+        ></el-input>
+        <div class="el-form-item-msg">
+          {{ $t("user.uniqueCodeTip") }}
+        </div>
+      </el-form-item>
+      <el-form-item :label="$t('user.frontAuthority')" prop="FatherCode">
+        <el-select
+          v-model="form.FatherCode"
+          clearable
+          filterable
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in authorityList"
+            :key="item.Key"
+            :label="item.Value"
+            :value="item.Key"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="save" :loading="loading"
+          >保 存</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </template>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isEdit: false,
+      form: {
+        Id: "",
+        OldUniqueCode: "",
+      },
+      loading: false,
+      rules: {
+        FeatureName: [
+          {
+            required: true,
+            message: this.$t("user.authorityNameRequire"),
+            trigger: "blur",
+          },
+        ],
+        UniqueCode: [
+          {
+            required: true,
+            message: this.$t("user.uniqueCodeRequire"),
+            trigger: "blur",
+          },
+        ],
+      },
+      authorityList: [],
+    };
+  },
+  mounted() {},
+  methods: {
+    //保存
+    async save() {
+      this.$refs.dialogForm.validate(async (valid) => {
+        if (valid) {
+          this.loading = true;
+          var method = this.isEdit ? "ModifyAdminFeature" : "CreateAdminFeature";
+          await this.$API.wing.post(method, this.form, () => {
+            this.form.MenuId = "";
+            this.$message.success(this.$t("response.operateSuccess"));
+            this.$emit("success");
+            this.loading = false;
+          });
+        } else {
+          return false;
+        }
+      });
+    },
+    //表单注入数据
+    setData(data, authorityList) {
+      if (data.Id) {
+        this.isEdit = true;
+        authorityList = authorityList.filter((x) => x.Key != data.Id);
+      }
+      var form = JSON.parse(JSON.stringify(data));
+      form.FeatureCode = form.Id;
+      form.FeatureName = form.Label;
+      form.OldUniqueCode = form.UniqueCode || "";
+      this.form = form;
+      this.authorityList = authorityList;
+    },
+  },
+};
+</script>
+
+<style scoped>
+h2 {
+  font-size: 17px;
+  color: #3c4a54;
+  padding: 0 0 30px 0;
+}
+.apilist {
+  border-left: 1px solid #eee;
+}
+
+[data-theme="dark"] h2 {
+  color: #fff;
+}
+[data-theme="dark"] .apilist {
+  border-color: #434343;
+}
+</style>