From da48c1c07e469212e0c79ceaf81aca51944bb88e Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期一, 17 十月 2022 13:29:13 +0800
Subject: [PATCH] 授权管里下各个页面布局修改

---
 src/views/AuthorizationManagement/userRoleAuthorization.vue |  333 +++++++++++++++++++++++++++++++------------------------
 1 files changed, 188 insertions(+), 145 deletions(-)

diff --git a/src/views/AuthorizationManagement/userRoleAuthorization.vue b/src/views/AuthorizationManagement/userRoleAuthorization.vue
index 6fb3476..292403f 100644
--- a/src/views/AuthorizationManagement/userRoleAuthorization.vue
+++ b/src/views/AuthorizationManagement/userRoleAuthorization.vue
@@ -1,27 +1,34 @@
 <template>
   <div class="menuSettings_box">
     <div class="menuSettings_tree">
-      <My-bread :list="[
+      <My-bread
+        :list="[
           `${$t('operatManage.operatManage')}`,
           `${$t('operatManage.UserRoleAuthorization')}`,
-        ]"></My-bread>
+        ]"
+      ></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
+          :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="
+    <div
+      class="menuSettings_tree"
+      style="margin-left: 10px; width: calc(50% - 172px)"
+    >
+      <div
+        style="
           font-size: 14px;
           color: #606266;
           line-height: 1;
@@ -29,42 +36,54 @@
           position: relative;
           top: 10px;
           margin-left: 10px;
-        ">
-        {{ $t("operatManage.UserRoleAuthorizationObj.RoleTable") }}
+        "
+      >
+        {{ $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="{
+      <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">
+        }"
+      >
+        <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>
+            <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
+          align="center"
+          type="index"
+          :label="$t('dataManage.styleObj.index')"
+          width="70px"
+        />
+        <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
+          @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>
@@ -72,7 +91,8 @@
       <!-- <div class="title_box">
         <h4>璇︾粏淇℃伅</h4>
       </div> -->
-      <div style="
+      <div
+        style="
           font-size: 14px;
           color: #606266;
           line-height: 1;
@@ -82,92 +102,115 @@
           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>
+          {{ $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="{
+      <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 type="selection" width="55"> </el-table-column>
+        <el-table-column
+          align="center"
+          type="index"
+          :label="$t('dataManage.styleObj.index')"
+        />
+        <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">
+      <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="40vh"
-                @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-dialog
+      :title="$t('operatManage.UserRoleAuthorizationObj.Added')"
+      :visible.sync="dialogTableVisible"
+    >
+      <el-table
+        :data="gridData"
+        height="40vh"
+        @selection-change="addhandleSelectionChange"
+      >
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column
+          align="center"
+          type="index"
+          :label="$t('dataManage.styleObj.index')"
+        />
+        <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">
+      <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 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 MyBread from '../../components/MyBread.vue';
 import {
   queryDepTree,
   select_Role_ByPageAndCount,
@@ -175,14 +218,14 @@
   roleUserdeletes,
   userselectByPageForRole,
   roleUserinserts,
-} from "../../api/api";
+} from '../../api/api';
 export default {
   //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
   components: {
     MyBread,
   },
 
-  data () {
+  data() {
     return {
       addcount: 0,
       gridData: [],
@@ -199,18 +242,18 @@
       usercount: 0,
       tableData: [],
       //   褰撳墠閫夋嫨鐨勮鐨刬d
-      templateSelection: "",
+      templateSelection: '',
       //   褰撳墠閫夋嫨鐨勮鐨勬暟鎹�
       checkList: [],
 
       defaultProps: {
-        children: "children",
-        label: "name",
+        children: 'children',
+        label: 'name',
       },
       oriData: [], //鍘熷鏍戞暟鎹�
       depList: [], //el鏍戞暟鎹�
       backUpData: {},
-      formLabelWidth: "170px",
+      formLabelWidth: '170px',
       listData: {
         pageIndex: 1,
         pageSize: 10,
@@ -223,11 +266,11 @@
     };
   },
   methods: {
-    addConfirm () {
-      this.$confirm("纭畾鏄惁鏂板", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning",
+    addConfirm() {
+      this.$confirm('纭畾鏄惁鏂板', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning',
       })
         .then(async () => {
           let arr = [];
@@ -236,77 +279,77 @@
           });
           const data = await roleUserinserts(arr);
           if (data.code !== 200) {
-            return this.$message.error("鏂板澶辫触");
+            return this.$message.error('鏂板澶辫触');
           }
           this.$message({
-            type: "success",
-            message: "鏂板鎴愬姛!",
+            type: 'success',
+            message: '鏂板鎴愬姛!',
           });
           this.dialogTableVisible = false;
           this.getuserList();
         })
-        .catch(() => { });
+        .catch(() => {});
     },
-    adduser () {
+    adduser() {
       this.dialogTableVisible = true;
       this.getadduserList();
     },
     //鐢ㄦ埛鍒犻櫎
-    async deletesUser () {
+    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("鍒犻櫎澶辫触");
+        return this.$message.error('鍒犻櫎澶辫触');
       }
       this.$message({
-        message: "鍒犻櫎鎴愬姛",
-        type: "success",
+        message: '鍒犻櫎鎴愬姛',
+        type: 'success',
       });
       this.getuserList();
     },
     //鐢ㄦ埛琛ㄥ閫�
-    handleSelectionChange (val) {
+    handleSelectionChange(val) {
       this.usermultipleSelection = val;
     },
     //鏂板鐢ㄦ埛琛ㄥ閫�
-    addhandleSelectionChange (val) {
+    addhandleSelectionChange(val) {
       this.addmultipleSelection = val;
     },
     // 鏂板鐢ㄦ埛琛ㄥ垎椤�
-    addhandleSizeChange (val) {
+    addhandleSizeChange(val) {
       this.addlistData.pageSize = val;
       this.getadduserList();
     },
     // 鏂板鐢ㄦ埛琛ㄥ垎椤�
-    addhandleCurrentChange (val) {
+    addhandleCurrentChange(val) {
       this.addlistData.pageIndex = val;
       this.getadduserList();
     },
     // 鐢ㄦ埛琛ㄥ垎椤�
-    userhandleSizeChange (val) {
+    userhandleSizeChange(val) {
       this.userlistData.pageSize = val;
       this.getuserList();
     },
     // 鐢ㄦ埛琛ㄥ垎椤�
-    userhandleCurrentChange (val) {
+    userhandleCurrentChange(val) {
       this.userlistData.pageIndex = val;
       this.getuserList();
     },
     // 瑙掕壊琛ㄥ垎椤�
-    handleSizeChange (val) {
+    handleSizeChange(val) {
       this.listData.pageSize = val;
       this.getRole();
     },
     // 瑙掕壊琛ㄥ垎椤�
-    handleCurrentChange (val) {
+    handleCurrentChange(val) {
       this.listData.pageIndex = val;
       this.getRole();
     },
     // 瑙掕壊鍗曢��
-    singleElection (row) {
+    singleElection(row) {
       this.templateSelection = row.id;
       this.checkList = this.tableData.filter((item) => item.id === row.id);
       this.userlistData.roleid = row.id;
@@ -314,26 +357,26 @@
       this.getuserList();
     },
     // 閮ㄩ棬璇锋眰
-    async getMenuTree () {
+    async getMenuTree() {
       //鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢�
       const data = await queryDepTree();
 
       if (data.code !== 200) {
-        return this.$message.error("璇锋眰鍗曚綅鎶ラ敊");
+        return this.$message.error('璇锋眰鍗曚綅鎶ラ敊');
       }
       this.depList = this.treeData(data.result);
     },
-    treeData (source) {
+    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灞炴�э紝骞惰祴鍊�
+        branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
         return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
       });
     },
     // 閮ㄩ棬鏍戝崟閫�
-    treeCheck (node, list) {
+    treeCheck(node, list) {
       //node 璇ヨ妭鐐规墍瀵瑰簲鐨勫璞°�乴ist 鏍戠洰鍓嶇殑閫変腑鐘舵�佸璞�
       //閫変腑浜嬩欢鍦ㄩ�変腑鍚庢墽琛岋紝褰搇is涓湁涓や釜閫変腑鏃讹紝浣跨敤setCheckedKeys鏂规硶锛岄�変腑涓�涓妭鐐�
       console.log(node, list);
@@ -352,37 +395,37 @@
         this.usertableData = [];
       }
     },
-    async getadduserList () {
+    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("鏂板鐢ㄦ埛鍒楄〃璇锋眰閿欒");
+        return this.$message.error('鏂板鐢ㄦ埛鍒楄〃璇锋眰閿欒');
       }
       this.gridData = data.result;
       this.addcount = data.count;
     },
     // 鐢ㄦ埛琛ㄨ姹�
-    async getuserList () {
+    async getuserList() {
       const data = await roleUserselectByPageForRole(this.userlistData);
       if (data.code !== 200) {
-        return this.$message.error("鐢ㄦ埛鍒楄〃璇锋眰閿欒");
+        return this.$message.error('鐢ㄦ埛鍒楄〃璇锋眰閿欒');
       }
       this.usertableData = data.result;
       this.usercount = data.count;
     },
     // 瑙掕壊琛ㄨ姹�
-    async getRole () {
+    async getRole() {
       const data = await select_Role_ByPageAndCount(this.listData);
       if (data.code !== 200) {
-        return this.$message.error("鐢ㄦ埛瑙掕壊璇锋眰閿欒");
+        return this.$message.error('鐢ㄦ埛瑙掕壊璇锋眰閿欒');
       }
       this.tableData = data.result;
       this.count = data.count;
     },
   },
-  created () {
+  created() {
     this.getMenuTree();
   },
 };

--
Gitblit v1.9.3