From ced287ab603c859f50ed4971fff36f515f0e2cc9 Mon Sep 17 00:00:00 2001
From: 王旭 <1377869194@qq.com>
Date: 星期四, 13 十月 2022 17:17:27 +0800
Subject: [PATCH] 新增用户角色授权页面

---
 src/views/AuthorizationManagement/userRoleAuthorization.vue |  519 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 519 insertions(+), 0 deletions(-)

diff --git a/src/views/AuthorizationManagement/userRoleAuthorization.vue b/src/views/AuthorizationManagement/userRoleAuthorization.vue
new file mode 100644
index 0000000..f86a1fa
--- /dev/null
+++ b/src/views/AuthorizationManagement/userRoleAuthorization.vue
@@ -0,0 +1,519 @@
+<template>
+  <div class="menuSettings_box">
+    <div class="menuSettings_tree">
+      <My-bread
+        :list="[
+          `${$t('operatManage.operatManage')}`,
+          `${$t('operatManage.UserRoleAuthorization')}`,
+        ]"
+      ></My-bread>
+
+      <el-divider />
+      <div class="menuTreeBox">
+        <el-tree
+          :data="depList"
+          :props="defaultProps"
+          :show-checkbox="true"
+          :check-on-click-node="true"
+          :check-strictly="true"
+          node-key="id"
+          @check="treeCheck"
+          ref="treeForm"
+        >
+        </el-tree>
+      </div>
+    </div>
+    <div
+      class="menuSettings_tree"
+      style="margin-left: 10px; width: calc(50% - 172px)"
+    >
+      <div
+        style="
+          font-size: 14px;
+          color: #606266;
+          line-height: 1;
+          cursor: text;
+          position: relative;
+          top: 10px;
+          margin-left: 10px;
+        "
+      >
+        {{ $t("operatManage.UserRoleAuthorizationObj.RoleTable") }}
+      </div>
+      <el-divider />
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        @row-click="singleElection"
+        highlight-current-row
+        height="85%"
+        :header-cell-style="{
+          background: 'transparent',
+        }"
+      >
+        <el-table-column align="center" width="55">
+          <template slot-scope="scope">
+            <!-- 鍙互鎵嬪姩鐨勪慨鏀筶abel鐨勫�硷紝浠庤�屾帶鍒堕�夋嫨鍝竴椤� -->
+            <el-radio
+              class="radio"
+              v-model="templateSelection"
+              :label="scope.row.id"
+              >&nbsp;</el-radio
+            >
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="id"
+          :label="$t('operatManage.UserRoleAuthorizationObj.serialNumber')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          :label="$t('operatManage.UserRoleAuthorizationObj.name')"
+        >
+        </el-table-column>
+      </el-table>
+      <div style="text-align: center; margin-top: 20px">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listData.pageIndex"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="userlistData.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="count"
+        >
+        </el-pagination>
+      </div>
+    </div>
+    <div class="menuSettings">
+      <!-- <div class="title_box">
+        <h4>璇︾粏淇℃伅</h4>
+      </div> -->
+      <div
+        style="
+          font-size: 14px;
+          color: #606266;
+          line-height: 1;
+          cursor: text;
+          position: relative;
+          top: 5px;
+          margin-left: 10px;
+          display: flex;
+          align-items: center;
+        "
+      >
+        <span>
+          {{ $t("operatManage.UserRoleAuthorizationObj.userTable") }}</span
+        >
+        <div class="btn" style="margin-left: auto">
+          <el-button
+            type="primary"
+            icon="el-icon-circle-plus-outline"
+            size="small"
+            :disabled="roleid == null ? true : false"
+            @click="adduser"
+            >{{ $t("operatManage.UserRoleAuthorizationObj.Added") }}</el-button
+          >
+          <el-button
+            type="danger"
+            icon="el-icon-delete"
+            size="small"
+            @click="deletesUser"
+            :disabled="roleid == null ? true : false"
+            >{{ $t("operatManage.UserRoleAuthorizationObj.delete") }}</el-button
+          >
+        </div>
+      </div>
+      <el-divider class="divider" />
+
+      <el-table
+        :data="usertableData"
+        stripe
+        style="width: 100%"
+        height="85%"
+        @selection-change="handleSelectionChange"
+        :header-cell-style="{
+          background: 'transparent',
+        }"
+      >
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column
+          prop="id"
+          :label="$t('operatManage.UserRoleAuthorizationObj.serialNumber')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="uname"
+          :label="$t('operatManage.UserRoleAuthorizationObj.name')"
+        >
+        </el-table-column>
+      </el-table>
+
+      <div style="margin-top: 20px; text-align: center" class="pagination_box">
+        <el-pagination
+          @size-change="userhandleSizeChange"
+          @current-change="userhandleCurrentChange"
+          :current-page="userlistData.pageIndex"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="userlistData.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="usercount"
+        >
+        </el-pagination>
+      </div>
+    </div>
+    <el-dialog
+      :title="$t('operatManage.UserRoleAuthorizationObj.Added')"
+      :visible.sync="dialogTableVisible"
+    >
+      <el-table
+        :data="gridData"
+        height="85%"
+        @selection-change="addhandleSelectionChange"
+      >
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column
+          prop="id"
+          :label="$t('operatManage.UserRoleAuthorizationObj.serialNumber')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="uname"
+          :label="$t('operatManage.UserRoleAuthorizationObj.name')"
+        >
+        </el-table-column>
+      </el-table>
+      <div style="margin-top: 20px; text-align: center" class="pagination_box">
+        <el-pagination
+          @size-change="addhandleSizeChange"
+          @current-change="addhandleCurrentChange"
+          :current-page="addlistData.pageIndex"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="addlistData.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="addcount"
+        >
+        </el-pagination>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogTableVisible = false">{{ $t("dataManage.dictionaryManageObj.cancel") }}</el-button>
+        <el-button type="primary" @click="addConfirm">{{ $t("dataManage.dictionaryManageObj.confirm") }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import MyBread from "../../components/MyBread.vue";
+import {
+  queryDepTree,
+  select_Role_ByPageAndCount,
+  roleUserselectByPageForRole,
+  roleUserdeletes,
+  userselectByPageForRole,
+  roleUserinserts,
+} from "../../api/api";
+export default {
+  //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
+  components: {
+    MyBread,
+  },
+
+  data() {
+    return {
+      addcount: 0,
+      gridData: [],
+      addlistData: {
+        pageIndex: 1,
+        pageSize: 10,
+      },
+      dialogTableVisible: false,
+      usertableData: [],
+      userlistData: {
+        pageIndex: 1,
+        pageSize: 10,
+      },
+      usercount: 0,
+      tableData: [],
+      //   褰撳墠閫夋嫨鐨勮鐨刬d
+      templateSelection: "",
+      //   褰撳墠閫夋嫨鐨勮鐨勬暟鎹�
+      checkList: [],
+
+      defaultProps: {
+        children: "children",
+        label: "name",
+      },
+      oriData: [], //鍘熷鏍戞暟鎹�
+      depList: [], //el鏍戞暟鎹�
+      backUpData: {},
+      formLabelWidth: "170px",
+      listData: {
+        pageIndex: 1,
+        pageSize: 10,
+      },
+      count: 0,
+      usermultipleSelection: [],
+      debid: null,
+      roleid: null,
+      addmultipleSelection: [],
+    };
+  },
+  methods: {
+    addConfirm() {
+      this.$confirm("纭畾鏄惁鏂板", "鎻愮ず", {
+        confirmButtonText: "纭畾",
+        cancelButtonText: "鍙栨秷",
+        type: "warning",
+      })
+        .then(async () => {
+          let arr = [];
+          this.addmultipleSelection.forEach((e) => {
+            arr.push({ userid: e.id, roleid: this.roleid });
+          });
+          const data = await roleUserinserts(arr);
+          if (data.code !== 200) {
+            return this.$message.error("鏂板澶辫触");
+          }
+          this.$message({
+            type: "success",
+            message: "鏂板鎴愬姛!",
+          });
+        })
+        .catch(() => {});
+    },
+    adduser() {
+      this.dialogTableVisible = true;
+      this.getadduserList();
+    },
+    //鐢ㄦ埛鍒犻櫎
+    async deletesUser() {
+      let arr = [];
+      this.usermultipleSelection.forEach((e) => {
+        arr.push(e.id);
+      });
+      const data = await roleUserdeletes({ ids: arr.toString() });
+      if (data.code !== 200) {
+        return this.$message.error("鍒犻櫎澶辫触");
+      }
+      this.$message({
+        message: "鍒犻櫎鎴愬姛",
+        type: "success",
+      });
+      this.getuserList();
+    },
+    //鐢ㄦ埛琛ㄥ閫�
+    handleSelectionChange(val) {
+      this.usermultipleSelection = val;
+    },
+    //鏂板鐢ㄦ埛琛ㄥ閫�
+    addhandleSelectionChange(val) {
+      this.addmultipleSelection = val;
+    },
+    // 鏂板鐢ㄦ埛琛ㄥ垎椤�
+    addhandleSizeChange(val) {
+      this.addlistData.pageSize = val;
+      this.getadduserList();
+    },
+    // 鏂板鐢ㄦ埛琛ㄥ垎椤�
+    addhandleCurrentChange(val) {
+      this.addlistData.pageIndex = val;
+      this.getadduserList();
+    },
+    // 鐢ㄦ埛琛ㄥ垎椤�
+    userhandleSizeChange(val) {
+      this.userlistData.pageSize = val;
+      this.getuserList();
+    },
+    // 鐢ㄦ埛琛ㄥ垎椤�
+    userhandleCurrentChange(val) {
+      this.userlistData.pageIndex = val;
+      this.getuserList();
+    },
+    // 瑙掕壊琛ㄥ垎椤�
+    handleSizeChange(val) {
+      this.listData.pageSize = val;
+      this.getRole();
+    },
+    // 瑙掕壊琛ㄥ垎椤�
+    handleCurrentChange(val) {
+      this.listData.pageIndex = val;
+      this.getRole();
+    },
+    // 瑙掕壊鍗曢��
+    singleElection(row) {
+      this.templateSelection = row.id;
+      this.checkList = this.tableData.filter((item) => item.id === row.id);
+      this.userlistData.roleid = row.id;
+      this.roleid = row.id;
+      this.getuserList();
+    },
+    // 閮ㄩ棬璇锋眰
+    async getMenuTree() {
+      //鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢�
+      const data = await queryDepTree();
+
+      if (data.code !== 200) {
+        return this.$message.error("璇锋眰鍗曚綅鎶ラ敊");
+      }
+      this.depList = this.treeData(data.result);
+    },
+    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) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+        return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
+      });
+    },
+    // 閮ㄩ棬鏍戝崟閫�
+    treeCheck(node, list) {
+      //node 璇ヨ妭鐐规墍瀵瑰簲鐨勫璞°�乴ist 鏍戠洰鍓嶇殑閫変腑鐘舵�佸璞�
+      //閫変腑浜嬩欢鍦ㄩ�変腑鍚庢墽琛岋紝褰搇is涓湁涓や釜閫変腑鏃讹紝浣跨敤setCheckedKeys鏂规硶锛岄�変腑涓�涓妭鐐�
+      console.log(node, list);
+      if (list.checkedNodes.length > 0) {
+        this.listData.depid = node.id;
+        this.debid = node.id;
+        this.getRole();
+        if (list.checkedKeys.length == 2) {
+          //鍗曢�夊疄鐜�
+          this.$refs.treeForm.setCheckedKeys([node.id]);
+        }
+      } else {
+        this.debid = null;
+        this.roleid = null;
+        this.tableData = [];
+        this.usertableData = [];
+      }
+    },
+    async getadduserList() {
+      this.addlistData.roleid = this.roleid;
+
+      this.addlistData.debid = this.debid;
+      const data = await userselectByPageForRole(this.addlistData);
+      if (data.code !== 200) {
+        return this.$message.error("鏂板鐢ㄦ埛鍒楄〃璇锋眰閿欒");
+      }
+      this.gridData = data.result;
+      this.addcount = data.count;
+    },
+    // 鐢ㄦ埛琛ㄨ姹�
+    async getuserList() {
+      const data = await roleUserselectByPageForRole(this.userlistData);
+      if (data.code !== 200) {
+        return this.$message.error("鐢ㄦ埛鍒楄〃璇锋眰閿欒");
+      }
+      this.usertableData = data.result;
+      this.usercount = data.count;
+    },
+    // 瑙掕壊琛ㄨ姹�
+    async getRole() {
+      const data = await select_Role_ByPageAndCount(this.listData);
+      if (data.code !== 200) {
+        return this.$message.error("鐢ㄦ埛瑙掕壊璇锋眰閿欒");
+      }
+      this.tableData = data.result;
+      this.count = data.count;
+    },
+  },
+  created() {
+    this.getMenuTree();
+  },
+};
+</script>
+<style lang="less" scoped>
+//@import url(); 寮曞叆鍏叡css绫�
+.menuSettings_box {
+  //   background: rgb(240, 242, 245);
+  border-radius: 10px;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  display: flex;
+  .menuSettings_tree {
+    position: relative;
+    width: 344px;
+    height: 100%;
+    background: rgb(240, 242, 245);
+    padding: 20px;
+    border-radius: 10px;
+    box-sizing: border-box;
+    overflow: auto;
+    .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;
+          }
+        }
+      }
+    }
+  }
+  .menuSettings {
+    width: calc(50% - 172px);
+    border-radius: 10px;
+    background: rgb(240, 242, 245);
+    margin-left: 10px;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+    .title_box {
+      background: #fff;
+      padding: 10px;
+      margin-bottom: 24px;
+      display: flex;
+      border-radius: 10px;
+      border: 1px solid rgb(202, 201, 204);
+      box-sizing: border-box;
+    }
+  }
+  .table_box {
+    padding: 10px;
+    background: #fff;
+    border-radius: 5px;
+    border: 1px solid rgb(202, 201, 204);
+    overflow: auto;
+    height: 85%;
+  }
+  .divider {
+    margin-top: 8px;
+  }
+}
+.el-table,
+.el-table /deep/ .el-table__expanded-cell {
+  background-color: transparent;
+}
+
+.el-table /deep/ th,
+.el-table /deep/ tr {
+  background-color: transparent;
+}
+</style>

--
Gitblit v1.9.3