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"> </el-radio> + <el-radio + class="radio" + v-model="templateSelection" + :label="scope.row.id" + > </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