From e5454b769d44a34af423bf87ac8a740bf8c20341 Mon Sep 17 00:00:00 2001 From: Crunchy <3114200645@qq.com> Date: 星期二, 29 四月 2025 13:25:29 +0800 Subject: [PATCH] Merge branch 'dev' into dev_tides --- src/views/system/role/index.vue | 336 +++++++++++++++++++++++++------------------------------ 1 files changed, 151 insertions(+), 185 deletions(-) diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue index 1395d24..d2e8231 100644 --- a/src/views/system/role/index.vue +++ b/src/views/system/role/index.vue @@ -1,68 +1,40 @@ <template> <div class="app-container"> - <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"> - <el-form-item label="瑙掕壊鍚嶇О" prop="roleName"> - <el-input - v-model="queryParams.roleName" - placeholder="璇疯緭鍏ヨ鑹插悕绉�" - clearable - style="width: 240px" - @keyup.enter.native="handleQuery" - /> - </el-form-item> - <el-form-item label="鏉冮檺瀛楃" prop="roleKey"> - <el-input - v-model="queryParams.roleKey" - placeholder="璇疯緭鍏ユ潈闄愬瓧绗�" - clearable - style="width: 240px" - @keyup.enter.native="handleQuery" - /> - </el-form-item> - <el-form-item label="鐘舵��" prop="status"> - <el-select - v-model="queryParams.status" - placeholder="瑙掕壊鐘舵��" - clearable - style="width: 240px" - > - <el-option - v-for="dict in dict.type.sys_normal_disable" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> - </el-select> - </el-form-item> - <el-form-item label="鍒涘缓鏃堕棿"> - <el-date-picker - v-model="dateRange" - style="width: 240px" - value-format="yyyy-MM-dd" - type="daterange" - range-separator="-" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - ></el-date-picker> - </el-form-item> - <el-form-item> - <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">鎼滅储</el-button> - <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> - </el-form> - - <div class="addButton mb8"> - <el-button - type="primary" - plain - icon="el-icon-plus" - size="mini" - @click="handleAdd" - v-hasPermi="['system:role:add']" - >鏂板</el-button> + <div class="search"> + <div> + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"> + <el-form-item label="瑙掕壊鍚嶇О" prop="roleName"> + <el-input v-model="queryParams.roleName" placeholder="璇疯緭鍏ヨ鑹插悕绉�" clearable style="width: 200px" + @keyup.enter.native="handleQuery" /> + </el-form-item> + <el-form-item label="鏉冮檺瀛楃" prop="roleKey"> + <el-input v-model="queryParams.roleKey" placeholder="璇疯緭鍏ユ潈闄愬瓧绗�" clearable style="width: 200px" + @keyup.enter.native="handleQuery" /> + </el-form-item> + <el-form-item label="鐘舵��" prop="status"> + <el-select v-model="queryParams.status" placeholder="瑙掕壊鐘舵��" clearable style="width: 200px"> + <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" + :value="dict.value" /> + </el-select> + </el-form-item> + <el-form-item label="鍒涘缓鏃堕棿"> + <el-date-picker v-model="dateRange" style="width: 200px" value-format="yyyy-MM-dd" type="daterange" + range-separator="-" start-placeholder="寮�濮嬫棩鏈�" end-placeholder="缁撴潫鏃ユ湡"></el-date-picker> + </el-form-item> + <el-form-item> + <el-button type="primary" size="mini" @click="handleQuery">鏌ヨ</el-button> + <el-button size="mini" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> + </el-form> + </div> + <div class="addButton mb8"> + <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" + v-hasPermi="['system:role:add']">鏂板</el-button> + </div> </div> - <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange"> + <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange" + :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border> <el-table-column type="selection" width="55" align="center" /> <el-table-column label="瑙掕壊缂栧彿" prop="roleId" width="120" /> <el-table-column label="瑙掕壊鍚嶇О" prop="roleName" :show-overflow-tooltip="true" width="150" /> @@ -70,12 +42,8 @@ <el-table-column label="鏄剧ず椤哄簭" prop="roleSort" width="100" /> <el-table-column label="鐘舵��" align="center" width="100"> <template slot-scope="scope"> - <el-switch - v-model="scope.row.status" - active-value="0" - inactive-value="1" - @change="handleStatusChange(scope.row)" - ></el-switch> + <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" + @change="handleStatusChange(scope.row)"></el-switch> </template> </el-table-column> <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180"> @@ -85,52 +53,32 @@ </el-table-column> <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope" v-if="scope.row.roleId !== 1"> - <el-button - size="mini" - type="text" - icon="el-icon-edit" - @click="handleUpdate(scope.row)" - v-hasPermi="['system:role:edit']" - >淇敼</el-button> - <el-button - size="mini" - type="text" - icon="el-icon-delete" - @click="handleDelete(scope.row)" - v-hasPermi="['system:role:remove']" - >鍒犻櫎</el-button> - <el-button - size="mini" - type="text" - icon="el-icon-view" - @click="handleView(scope.row)" - >璇︾粏</el-button> -<!-- <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">--> -<!-- <el-button size="mini" type="text" icon="el-icon-d-arrow-right">鏇村</el-button>--> -<!-- <el-dropdown-menu slot="dropdown">--> -<!-- <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"--> -<!-- v-hasPermi="['system:role:edit']">鏁版嵁鏉冮檺</el-dropdown-item>--> -<!-- <el-dropdown-item command="handleAuthUser" icon="el-icon-user"--> -<!-- v-hasPermi="['system:role:edit']">鍒嗛厤鐢ㄦ埛</el-dropdown-item>--> -<!-- </el-dropdown-menu>--> -<!-- </el-dropdown>--> + <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" + v-hasPermi="['system:role:edit']">淇敼</el-button> + <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" + v-hasPermi="['system:role:remove']">鍒犻櫎</el-button> + <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">璇︾粏</el-button> + <!-- <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">--> + <!-- <el-button size="mini" type="text" icon="el-icon-d-arrow-right">鏇村</el-button>--> + <!-- <el-dropdown-menu slot="dropdown">--> + <!-- <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"--> + <!-- v-hasPermi="['system:role:edit']">鏁版嵁鏉冮檺</el-dropdown-item>--> + <!-- <el-dropdown-item command="handleAuthUser" icon="el-icon-user"--> + <!-- v-hasPermi="['system:role:edit']">鍒嗛厤鐢ㄦ埛</el-dropdown-item>--> + <!-- </el-dropdown-menu>--> + <!-- </el-dropdown>--> </template> </el-table-column> </el-table> - <pagination - v-show="total>0" - :total="total" - :page.sync="queryParams.pageNum" - :limit.sync="queryParams.pageSize" - @pagination="getList" - /> + <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" + @pagination="getList" /> <!-- 娣诲姞鎴栦慨鏀硅鑹查厤缃璇濇 --> <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item label="瑙掕壊鍚嶇О" prop="roleName"> - <el-input v-model="form.roleName" placeholder="璇疯緭鍏ヨ鑹插悕绉�" :disabled="title === '鏌ョ湅瑙掕壊'"/> + <el-input v-model="form.roleName" placeholder="璇疯緭鍏ヨ鑹插悕绉�" :disabled="title === '鏌ョ湅瑙掕壊'" /> </el-form-item> <el-form-item prop="roleKey"> <span slot="label"> @@ -139,43 +87,43 @@ </el-tooltip> 鏉冮檺瀛楃 </span> - <el-input v-model="form.roleKey" placeholder="璇疯緭鍏ユ潈闄愬瓧绗�" :disabled="title === '鏌ョ湅瑙掕壊'"/> + <el-input v-model="form.roleKey" placeholder="璇疯緭鍏ユ潈闄愬瓧绗�" :disabled="title === '鏌ョ湅瑙掕壊'" /> </el-form-item> <el-form-item label="瑙掕壊椤哄簭" prop="roleSort"> - <el-input-number v-model="form.roleSort" controls-position="right" :min="0" :disabled="title === '鏌ョ湅瑙掕壊'"/> + <el-input-number v-model="form.roleSort" controls-position="right" :min="0" :disabled="title === '鏌ョ湅瑙掕壊'" /> </el-form-item> <el-form-item label="鐘舵��"> <el-radio-group v-model="form.status" :disabled="title === '鏌ョ湅瑙掕壊'"> - <el-radio - v-for="dict in dict.type.sys_normal_disable" - :key="dict.value" - :label="dict.value" - >{{dict.label}}</el-radio> + <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label + }}</el-radio> </el-radio-group> </el-form-item> <el-form-item label="鑿滃崟鏉冮檺"> - <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')" v-if="title !== '鏌ョ湅瑙掕壊'">灞曞紑/鎶樺彔</el-checkbox> - <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')" v-if="title !== '鏌ョ湅瑙掕壊'">鍏ㄩ��/鍏ㄤ笉閫�</el-checkbox> - <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')" v-if="title !== '鏌ョ湅瑙掕壊'">鐖跺瓙鑱斿姩</el-checkbox> - <el-tree - :disabled="title === '鏌ョ湅瑙掕壊'" - class="tree-border" - :data="menuOptions" - show-checkbox - ref="menu" - node-key="id" - :check-strictly="!form.menuCheckStrictly" - empty-text="鍔犺浇涓紝璇风◢鍊�" - :props="defaultProps" - ></el-tree> + <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')" + v-if="title !== '鏌ョ湅瑙掕壊'">灞曞紑/鎶樺彔</el-checkbox> + <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')" + v-if="title !== '鏌ョ湅瑙掕壊'">鍏ㄩ��/鍏ㄤ笉閫�</el-checkbox> + <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')" + v-if="title !== '鏌ョ湅瑙掕壊'">鐖跺瓙鑱斿姩</el-checkbox> + <el-tree :disabled="title === '鏌ョ湅瑙掕壊'" class="tree-border" :data="menuOptions" show-checkbox ref="menu" + node-key="id" :check-strictly="!form.menuCheckStrictly" empty-text="鍔犺浇涓紝璇风◢鍊�" :props="defaultProps"> + <span class="custom-tree-node" slot-scope="{ node, data }"> + <span>{{ node.label }}</span> + <span> + <el-checkbox v-model="data.isRersonal" :true-label="1" :false-label="0" + v-if="data.isRersonalButton == 1" @change="m => chooseMe(m, data)" + :disabled="title === '鏌ョ湅瑙掕壊'">鍙湅鎴�</el-checkbox> + </span> + </span> + </el-tree> </el-form-item> <el-form-item label="澶囨敞"> <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�" :disabled="title === '鏌ョ湅瑙掕壊'"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> - <el-button type="primary" @click="submitForm" v-if="title !== '鏌ョ湅瑙掕壊'">纭� 瀹�</el-button> <el-button @click="cancel">鍙� 娑�</el-button> + <el-button type="primary" @click="submitForm" v-if="title !== '鏌ョ湅瑙掕壊'">纭� 瀹�</el-button> </div> </el-dialog> @@ -183,41 +131,29 @@ <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body> <el-form :model="form" label-width="80px"> <el-form-item label="瑙掕壊鍚嶇О"> - <el-input v-model="form.roleName" :disabled="true"/> + <el-input v-model="form.roleName" :disabled="true" /> </el-form-item> <el-form-item label="鏉冮檺瀛楃"> <el-input v-model="form.roleKey" :disabled="true" /> </el-form-item> <el-form-item label="鏉冮檺鑼冨洿"> <el-select v-model="form.dataScope" @change="dataScopeSelectChange"> - <el-option - v-for="item in dataScopeOptions" - :key="item.value" - :label="item.label" - :value="item.value" - ></el-option> + <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label" + :value="item.value"></el-option> </el-select> </el-form-item> <el-form-item label="鏁版嵁鏉冮檺" v-show="form.dataScope == 2"> <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">灞曞紑/鎶樺彔</el-checkbox> <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">鍏ㄩ��/鍏ㄤ笉閫�</el-checkbox> - <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">鐖跺瓙鑱斿姩</el-checkbox> - <el-tree - class="tree-border" - :data="deptOptions" - show-checkbox - default-expand-all - ref="dept" - node-key="id" - :check-strictly="!form.deptCheckStrictly" - empty-text="鍔犺浇涓紝璇风◢鍊�" - :props="defaultProps" - ></el-tree> + <el-checkbox v-model="form.deptCheckStrictly" + @change="handleCheckedTreeConnect($event, 'dept')">鐖跺瓙鑱斿姩</el-checkbox> + <el-tree class="tree-border" :data="deptOptions" show-checkbox default-expand-all ref="dept" node-key="id" + :check-strictly="!form.deptCheckStrictly" empty-text="鍔犺浇涓紝璇风◢鍊�" :props="defaultProps"></el-tree> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> - <el-button type="primary" @click="submitDataScope">纭� 瀹�</el-button> <el-button @click="cancelDataScope">鍙� 娑�</el-button> + <el-button type="primary" @click="submitDataScope">纭� 瀹�</el-button> </div> </el-dialog> </div> @@ -236,6 +172,8 @@ loading: true, // 閫変腑鏁扮粍 ids: [], + // 鍙湅鎴戞暟缁� + isRersonalMenuIds: [], // 闈炲崟涓鐢� single: true, // 闈炲涓鐢� @@ -321,10 +259,10 @@ getList() { this.loading = true; listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => { - this.roleList = response.rows; - this.total = response.total; - this.loading = false; - } + this.roleList = response.rows; + this.total = response.total; + this.loading = false; + } ); }, /** 鏌ヨ鑿滃崟鏍戠粨鏋� */ @@ -368,11 +306,11 @@ // 瑙掕壊鐘舵�佷慨鏀� handleStatusChange(row) { let text = row.status === "0" ? "鍚敤" : "鍋滅敤"; - this.$modal.confirm('纭瑕�"' + text + '""' + row.roleName + '"瑙掕壊鍚楋紵').then(function() { + this.$modal.confirm('纭瑕�"' + text + '""' + row.roleName + '"瑙掕壊鍚楋紵').then(function () { return changeRoleStatus(row.roleId, row.status); }).then(() => { this.$modal.msgSuccess(text + "鎴愬姛"); - }).catch(function() { + }).catch(function () { row.status = row.status === "0" ? "1" : "0"; }); }, @@ -392,21 +330,22 @@ this.$refs.menu.setCheckedKeys([]); } this.menuExpand = false, - this.menuNodeAll = false, - this.deptExpand = true, - this.deptNodeAll = false, - this.form = { - roleId: undefined, - roleName: undefined, - roleKey: undefined, - roleSort: 0, - status: "0", - menuIds: [], - deptIds: [], - menuCheckStrictly: true, - deptCheckStrictly: true, - remark: undefined - }; + this.menuNodeAll = false, + this.deptExpand = true, + this.deptNodeAll = false, + this.form = { + roleId: undefined, + roleName: undefined, + roleKey: undefined, + roleSort: 0, + status: "0", + menuIds: [], + deptIds: [], + isRersonalMenuIds: [], + menuCheckStrictly: true, + deptCheckStrictly: true, + remark: undefined + }; this.resetForm("form"); }, /** 鎼滅储鎸夐挳鎿嶄綔 */ @@ -423,7 +362,7 @@ // 澶氶�夋閫変腑鏁版嵁 handleSelectionChange(selection) { this.ids = selection.map(item => item.roleId) - this.single = selection.length!=1 + this.single = selection.length != 1 this.multiple = !selection.length }, // 鏇村鎿嶄綔瑙﹀彂 @@ -456,17 +395,19 @@ // 鏍戞潈闄愶紙鍏ㄩ��/鍏ㄤ笉閫夛級 handleCheckedTreeNodeAll(value, type) { if (type == 'menu') { - this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []); + this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []); } else if (type == 'dept') { - this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []); + this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []); } }, // 鏍戞潈闄愶紙鐖跺瓙鑱斿姩锛� handleCheckedTreeConnect(value, type) { if (type == 'menu') { - this.form.menuCheckStrictly = value ? true: false; + this.form.menuCheckStrictly = value ? true : false; + this.menuNodeAll = false + this.$refs.menu.setCheckedNodes([]); } else if (type == 'dept') { - this.form.deptCheckStrictly = value ? true: false; + this.form.deptCheckStrictly = value ? true : false; } }, /** 鏂板鎸夐挳鎿嶄綔 */ @@ -488,9 +429,9 @@ roleMenu.then(res => { let checkedKeys = res.checkedKeys checkedKeys.forEach((v) => { - this.$nextTick(()=>{ - this.$refs.menu.setChecked(v, true ,false); - }) + this.$nextTick(() => { + this.$refs.menu.setChecked(v, true, false); + }) }) }); }); @@ -498,7 +439,7 @@ this.title = "淇敼瑙掕壊"; }, // 鏌ョ湅瑙掕壊璇︽儏 - handleView (row) { + handleView(row) { this.title = "鏌ョ湅瑙掕壊"; this.reset(); const roleId = row.roleId || this.ids @@ -510,8 +451,8 @@ roleMenu.then(res => { let checkedKeys = res.checkedKeys checkedKeys.forEach((v) => { - this.$nextTick(()=>{ - this.$refs.menu.setChecked(v, true ,false); + this.$nextTick(() => { + this.$refs.menu.setChecked(v, true, false); }) }) }); @@ -520,7 +461,7 @@ }, /** 閫夋嫨瑙掕壊鏉冮檺鑼冨洿瑙﹀彂 */ dataScopeSelectChange(value) { - if(value !== '2') { + if (value !== '2') { this.$refs.dept.setCheckedKeys([]); } }, @@ -540,16 +481,17 @@ this.title = "鍒嗛厤鏁版嵁鏉冮檺"; }, /** 鍒嗛厤鐢ㄦ埛鎿嶄綔 */ - handleAuthUser: function(row) { + handleAuthUser: function (row) { const roleId = row.roleId; this.$router.push("/system/role-auth/user/" + roleId); }, /** 鎻愪氦鎸夐挳 */ - submitForm: function() { + submitForm: function () { this.$refs["form"].validate(valid => { if (valid) { if (this.form.roleId != undefined) { this.form.menuIds = this.getMenuAllCheckedKeys(); + this.form.isRersonalMenuIds = this.isRersonalMenuIds; updateRole(this.form).then(response => { this.$modal.msgSuccess("淇敼鎴愬姛"); this.open = false; @@ -557,6 +499,7 @@ }); } else { this.form.menuIds = this.getMenuAllCheckedKeys(); + this.form.isRersonalMenuIds = this.isRersonalMenuIds; addRole(this.form).then(response => { this.$modal.msgSuccess("鏂板鎴愬姛"); this.open = false; @@ -567,7 +510,7 @@ }); }, /** 鎻愪氦鎸夐挳锛堟暟鎹潈闄愶級 */ - submitDataScope: function() { + submitDataScope: function () { if (this.form.roleId != undefined) { this.form.deptIds = this.getDeptAllCheckedKeys(); dataScope(this.form).then(response => { @@ -580,25 +523,48 @@ /** 鍒犻櫎鎸夐挳鎿嶄綔 */ handleDelete(row) { const roleIds = row.roleId || this.ids; - this.$modal.confirm('鏄惁纭鍒犻櫎瑙掕壊缂栧彿涓�"' + roleIds + '"鐨勬暟鎹」锛�').then(function() { + this.$modal.confirm('鏄惁纭鍒犻櫎瑙掕壊缂栧彿涓�"' + roleIds + '"鐨勬暟鎹」锛�').then(function () { return delRole(roleIds); }).then(() => { this.getList(); this.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); + }).catch(() => { }); }, /** 瀵煎嚭鎸夐挳鎿嶄綔 */ handleExport() { this.download('system/role/export', { ...this.queryParams }, `role_${new Date().getTime()}.xlsx`) + }, + // 鍙湅鎴� + chooseMe(val, data) { + let index = this.isRersonalMenuIds.findIndex(m => m == data.id) + if (index < 0 && val == 1) { + this.isRersonalMenuIds.push(data.id) + } else if (val == 0 && index > -1) { + this.isRersonalMenuIds.splice(index, 1) + } } } }; </script> <style scoped> +.search { + display: flex; + justify-content: space-between; +} + .addButton { - text-align: right; + margin-top: 3px; +} + +.custom-tree-node { + flex: 1; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 14px; + padding-right: 8px; } </style> -- Gitblit v1.9.3