From 9d7e32fb073842eb9d346878b49ce5bacfa3b51c Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: 星期六, 25 六月 2022 09:39:39 +0800 Subject: [PATCH] 新增缓存列表菜单功能 --- ruoyi-ui/src/views/system/user/index.vue | 255 ++++++++++++++++++++++++++------------------------ 1 files changed, 134 insertions(+), 121 deletions(-) diff --git a/ruoyi-ui/src/views/system/user/index.vue b/ruoyi-ui/src/views/system/user/index.vue index 9b48346..fc8e385 100644 --- a/ruoyi-ui/src/views/system/user/index.vue +++ b/ruoyi-ui/src/views/system/user/index.vue @@ -21,19 +21,19 @@ :filter-node-method="filterNode" ref="tree" default-expand-all + highlight-current @node-click="handleNodeClick" /> </div> </el-col> <!--鐢ㄦ埛鏁版嵁--> <el-col :span="20" :xs="24"> - <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"> + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="鐢ㄦ埛鍚嶇О" prop="userName"> <el-input v-model="queryParams.userName" placeholder="璇疯緭鍏ョ敤鎴峰悕绉�" clearable - size="small" style="width: 240px" @keyup.enter.native="handleQuery" /> @@ -43,7 +43,6 @@ v-model="queryParams.phonenumber" placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�" clearable - size="small" style="width: 240px" @keyup.enter.native="handleQuery" /> @@ -53,21 +52,19 @@ v-model="queryParams.status" placeholder="鐢ㄦ埛鐘舵��" clearable - size="small" style="width: 240px" > <el-option - v-for="dict in statusOptions" - :key="dict.dictValue" - :label="dict.dictLabel" - :value="dict.dictValue" + 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" - size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" @@ -86,6 +83,7 @@ <el-col :span="1.5"> <el-button type="primary" + plain icon="el-icon-plus" size="mini" @click="handleAdd" @@ -95,6 +93,7 @@ <el-col :span="1.5"> <el-button type="success" + plain icon="el-icon-edit" size="mini" :disabled="single" @@ -105,6 +104,7 @@ <el-col :span="1.5"> <el-button type="danger" + plain icon="el-icon-delete" size="mini" :disabled="multiple" @@ -115,6 +115,7 @@ <el-col :span="1.5"> <el-button type="info" + plain icon="el-icon-upload2" size="mini" @click="handleImport" @@ -124,22 +125,24 @@ <el-col :span="1.5"> <el-button type="warning" + plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:user:export']" >瀵煎嚭</el-button> </el-col> + <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> </el-row> <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="50" align="center" /> - <el-table-column label="鐢ㄦ埛缂栧彿" align="center" prop="userId" /> - <el-table-column label="鐢ㄦ埛鍚嶇О" align="center" prop="userName" :show-overflow-tooltip="true" /> - <el-table-column label="鐢ㄦ埛鏄电О" align="center" prop="nickName" :show-overflow-tooltip="true" /> - <el-table-column label="閮ㄩ棬" align="center" prop="dept.deptName" :show-overflow-tooltip="true" /> - <el-table-column label="鎵嬫満鍙风爜" align="center" prop="phonenumber" width="120" /> - <el-table-column label="鐘舵��" align="center"> + <el-table-column label="鐢ㄦ埛缂栧彿" align="center" key="userId" prop="userId" v-if="columns[0].visible" /> + <el-table-column label="鐢ㄦ埛鍚嶇О" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" /> + <el-table-column label="鐢ㄦ埛鏄电О" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" /> + <el-table-column label="閮ㄩ棬" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" /> + <el-table-column label="鎵嬫満鍙风爜" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" /> + <el-table-column label="鐘舵��" align="center" key="status" v-if="columns[5].visible"> <template slot-scope="scope"> <el-switch v-model="scope.row.status" @@ -149,7 +152,7 @@ ></el-switch> </template> </el-table-column> - <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="160"> + <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" v-if="columns[6].visible" width="160"> <template slot-scope="scope"> <span>{{ parseTime(scope.row.createTime) }}</span> </template> @@ -157,10 +160,10 @@ <el-table-column label="鎿嶄綔" align="center" - width="180" + width="160" class-name="small-padding fixed-width" > - <template slot-scope="scope"> + <template slot-scope="scope" v-if="scope.row.userId !== 1"> <el-button size="mini" type="text" @@ -169,20 +172,23 @@ v-hasPermi="['system:user:edit']" >淇敼</el-button> <el-button - v-if="scope.row.userId !== 1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']" >鍒犻櫎</el-button> - <el-button - size="mini" - type="text" - icon="el-icon-key" - @click="handleResetPwd(scope.row)" - v-hasPermi="['system:user:resetPwd']" - >閲嶇疆</el-button> + <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']"> + <span class="el-dropdown-link"> + <i class="el-icon-d-arrow-right el-icon--right"></i>鏇村 + </span> + <el-dropdown-menu slot="dropdown"> + <el-dropdown-item command="handleResetPwd" icon="el-icon-key" + v-hasPermi="['system:user:resetPwd']">閲嶇疆瀵嗙爜</el-dropdown-item> + <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check" + v-hasPermi="['system:user:edit']">鍒嗛厤瑙掕壊</el-dropdown-item> + </el-dropdown-menu> + </el-dropdown> </template> </el-table-column> </el-table> @@ -197,20 +203,22 @@ </el-col> </el-row> - <!-- 娣诲姞鎴栦慨鏀瑰弬鏁伴厤缃璇濇 --> + <!-- 娣诲姞鎴栦慨鏀圭敤鎴烽厤缃璇濇 --> <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-row> <el-col :span="12"> <el-form-item label="鐢ㄦ埛鏄电О" prop="nickName"> - <el-input v-model="form.nickName" placeholder="璇疯緭鍏ョ敤鎴锋樀绉�" /> + <el-input v-model="form.nickName" placeholder="璇疯緭鍏ョ敤鎴锋樀绉�" maxlength="30" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="褰掑睘閮ㄩ棬" prop="deptId"> - <treeselect v-model="form.deptId" :options="deptOptions" :disable-branch-nodes="true" :show-count="true" placeholder="璇烽�夋嫨褰掑睘閮ㄩ棬" /> + <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="璇烽�夋嫨褰掑睘閮ㄩ棬" /> </el-form-item> </el-col> + </el-row> + <el-row> <el-col :span="12"> <el-form-item label="鎵嬫満鍙风爜" prop="phonenumber"> <el-input v-model="form.phonenumber" placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�" maxlength="11" /> @@ -221,24 +229,28 @@ <el-input v-model="form.email" placeholder="璇疯緭鍏ラ偖绠�" maxlength="50" /> </el-form-item> </el-col> + </el-row> + <el-row> <el-col :span="12"> <el-form-item v-if="form.userId == undefined" label="鐢ㄦ埛鍚嶇О" prop="userName"> - <el-input v-model="form.userName" placeholder="璇疯緭鍏ョ敤鎴峰悕绉�" /> + <el-input v-model="form.userName" placeholder="璇疯緭鍏ョ敤鎴峰悕绉�" maxlength="30" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item v-if="form.userId == undefined" label="鐢ㄦ埛瀵嗙爜" prop="password"> - <el-input v-model="form.password" placeholder="璇疯緭鍏ョ敤鎴峰瘑鐮�" type="password" /> + <el-input v-model="form.password" placeholder="璇疯緭鍏ョ敤鎴峰瘑鐮�" type="password" maxlength="20" show-password/> </el-form-item> </el-col> + </el-row> + <el-row> <el-col :span="12"> <el-form-item label="鐢ㄦ埛鎬у埆"> - <el-select v-model="form.sex" placeholder="璇烽�夋嫨"> + <el-select v-model="form.sex" placeholder="璇烽�夋嫨鎬у埆"> <el-option - v-for="dict in sexOptions" - :key="dict.dictValue" - :label="dict.dictLabel" - :value="dict.dictValue" + v-for="dict in dict.type.sys_user_sex" + :key="dict.value" + :label="dict.label" + :value="dict.value" ></el-option> </el-select> </el-form-item> @@ -247,17 +259,18 @@ <el-form-item label="鐘舵��"> <el-radio-group v-model="form.status"> <el-radio - v-for="dict in statusOptions" - :key="dict.dictValue" - :label="dict.dictValue" - >{{dict.dictLabel}}</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-col> - + </el-row> + <el-row> <el-col :span="12"> <el-form-item label="宀椾綅"> - <el-select v-model="form.postIds" multiple placeholder="璇烽�夋嫨"> + <el-select v-model="form.postIds" multiple placeholder="璇烽�夋嫨宀椾綅"> <el-option v-for="item in postOptions" :key="item.postId" @@ -270,7 +283,7 @@ </el-col> <el-col :span="12"> <el-form-item label="瑙掕壊"> - <el-select v-model="form.roleIds" multiple placeholder="璇烽�夋嫨"> + <el-select v-model="form.roleIds" multiple placeholder="璇烽�夋嫨瑙掕壊"> <el-option v-for="item in roleOptions" :key="item.roleId" @@ -281,6 +294,8 @@ </el-select> </el-form-item> </el-col> + </el-row> + <el-row> <el-col :span="24"> <el-form-item label="澶囨敞"> <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�"></el-input> @@ -309,15 +324,14 @@ drag > <i class="el-icon-upload"></i> - <div class="el-upload__text"> - 灏嗘枃浠舵嫋鍒版澶勶紝鎴� - <em>鐐瑰嚮涓婁紶</em> + <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div> + <div class="el-upload__tip text-center" slot="tip"> + <div class="el-upload__tip" slot="tip"> + <el-checkbox v-model="upload.updateSupport" /> 鏄惁鏇存柊宸茬粡瀛樺湪鐨勭敤鎴锋暟鎹� + </div> + <span>浠呭厑璁稿鍏ls銆亁lsx鏍煎紡鏂囦欢銆�</span> + <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">涓嬭浇妯℃澘</el-link> </div> - <div class="el-upload__tip" slot="tip"> - <el-checkbox v-model="upload.updateSupport" />鏄惁鏇存柊宸茬粡瀛樺湪鐨勭敤鎴锋暟鎹� - <el-link type="info" style="font-size:12px" @click="importTemplate">涓嬭浇妯℃澘</el-link> - </div> - <div class="el-upload__tip" style="color:red" slot="tip">鎻愮ず锛氫粎鍏佽瀵煎叆鈥渪ls鈥濇垨鈥渪lsx鈥濇牸寮忔枃浠讹紒</div> </el-upload> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitFileForm">纭� 瀹�</el-button> @@ -328,7 +342,7 @@ </template> <script> -import { listUser, getUser, delUser, addUser, updateUser, exportUser, resetUserPwd, changeUserStatus, importTemplate } from "@/api/system/user"; +import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/api/system/user"; import { getToken } from "@/utils/auth"; import { treeselect } from "@/api/system/dept"; import Treeselect from "@riophae/vue-treeselect"; @@ -336,6 +350,7 @@ export default { name: "User", + dicts: ['sys_normal_disable', 'sys_user_sex'], components: { Treeselect }, data() { return { @@ -347,6 +362,8 @@ single: true, // 闈炲涓鐢� multiple: true, + // 鏄剧ず鎼滅储鏉′欢 + showSearch: true, // 鎬绘潯鏁� total: 0, // 鐢ㄦ埛琛ㄦ牸鏁版嵁 @@ -363,10 +380,6 @@ initPassword: undefined, // 鏃ユ湡鑼冨洿 dateRange: [], - // 鐘舵�佹暟鎹瓧鍏� - statusOptions: [], - // 鎬у埆鐘舵�佸瓧鍏� - sexOptions: [], // 宀椾綅閫夐」 postOptions: [], // 瑙掕壊閫夐」 @@ -401,30 +414,37 @@ status: undefined, deptId: undefined }, + // 鍒椾俊鎭� + columns: [ + { key: 0, label: `鐢ㄦ埛缂栧彿`, visible: true }, + { key: 1, label: `鐢ㄦ埛鍚嶇О`, visible: true }, + { key: 2, label: `鐢ㄦ埛鏄电О`, visible: true }, + { key: 3, label: `閮ㄩ棬`, visible: true }, + { key: 4, label: `鎵嬫満鍙风爜`, visible: true }, + { key: 5, label: `鐘舵�乣, visible: true }, + { key: 6, label: `鍒涘缓鏃堕棿`, visible: true } + ], // 琛ㄥ崟鏍¢獙 rules: { userName: [ - { required: true, message: "鐢ㄦ埛鍚嶇О涓嶈兘涓虹┖", trigger: "blur" } + { required: true, message: "鐢ㄦ埛鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }, + { min: 2, max: 20, message: '鐢ㄦ埛鍚嶇О闀垮害蹇呴』浠嬩簬 2 鍜� 20 涔嬮棿', trigger: 'blur' } ], nickName: [ { required: true, message: "鐢ㄦ埛鏄电О涓嶈兘涓虹┖", trigger: "blur" } ], - deptId: [ - { required: true, message: "褰掑睘閮ㄩ棬涓嶈兘涓虹┖", trigger: "blur" } - ], password: [ - { required: true, message: "鐢ㄦ埛瀵嗙爜涓嶈兘涓虹┖", trigger: "blur" } + { required: true, message: "鐢ㄦ埛瀵嗙爜涓嶈兘涓虹┖", trigger: "blur" }, + { min: 5, max: 20, message: '鐢ㄦ埛瀵嗙爜闀垮害蹇呴』浠嬩簬 5 鍜� 20 涔嬮棿', trigger: 'blur' } ], email: [ - { required: true, message: "閭鍦板潃涓嶈兘涓虹┖", trigger: "blur" }, { type: "email", - message: "'璇疯緭鍏ユ纭殑閭鍦板潃", + message: "璇疯緭鍏ユ纭殑閭鍦板潃", trigger: ["blur", "change"] } ], phonenumber: [ - { required: true, message: "鎵嬫満鍙风爜涓嶈兘涓虹┖", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "璇疯緭鍏ユ纭殑鎵嬫満鍙风爜", @@ -443,12 +463,6 @@ created() { this.getList(); this.getTreeselect(); - this.getDicts("sys_normal_disable").then(response => { - this.statusOptions = response.data; - }); - this.getDicts("sys_user_sex").then(response => { - this.sexOptions = response.data; - }); this.getConfigKey("sys.user.initPassword").then(response => { this.initPassword = response.msg; }); @@ -478,22 +492,18 @@ // 鑺傜偣鍗曞嚮浜嬩欢 handleNodeClick(data) { this.queryParams.deptId = data.id; - this.getList(); + this.handleQuery(); }, // 鐢ㄦ埛鐘舵�佷慨鏀� handleStatusChange(row) { let text = row.status === "0" ? "鍚敤" : "鍋滅敤"; - this.$confirm('纭瑕�"' + text + '""' + row.userName + '"鐢ㄦ埛鍚�?', "璀﹀憡", { - confirmButtonText: "纭畾", - cancelButtonText: "鍙栨秷", - type: "warning" - }).then(function() { - return changeUserStatus(row.userId, row.status); - }).then(() => { - this.msgSuccess(text + "鎴愬姛"); - }).catch(function() { - row.status = row.status === "0" ? "1" : "0"; - }); + this.$modal.confirm('纭瑕�"' + text + '""' + row.userName + '"鐢ㄦ埛鍚楋紵').then(function() { + return changeUserStatus(row.userId, row.status); + }).then(() => { + this.$modal.msgSuccess(text + "鎴愬姛"); + }).catch(function() { + row.status = row.status === "0" ? "1" : "0"; + }); }, // 鍙栨秷鎸夐挳 cancel() { @@ -520,7 +530,7 @@ }, /** 鎼滅储鎸夐挳鎿嶄綔 */ handleQuery() { - this.queryParams.page = 1; + this.queryParams.pageNum = 1; this.getList(); }, /** 閲嶇疆鎸夐挳鎿嶄綔 */ @@ -534,6 +544,19 @@ this.ids = selection.map(item => item.userId); this.single = selection.length != 1; this.multiple = !selection.length; + }, + // 鏇村鎿嶄綔瑙﹀彂 + handleCommand(command, row) { + switch (command) { + case "handleResetPwd": + this.handleResetPwd(row); + break; + case "handleAuthRole": + this.handleAuthRole(row); + break; + default: + break; + } }, /** 鏂板鎸夐挳鎿嶄綔 */ handleAdd() { @@ -567,14 +590,20 @@ handleResetPwd(row) { this.$prompt('璇疯緭鍏�"' + row.userName + '"鐨勬柊瀵嗙爜', "鎻愮ず", { confirmButtonText: "纭畾", - cancelButtonText: "鍙栨秷" + cancelButtonText: "鍙栨秷", + closeOnClickModal: false, + inputPattern: /^.{5,20}$/, + inputErrorMessage: "鐢ㄦ埛瀵嗙爜闀垮害蹇呴』浠嬩簬 5 鍜� 20 涔嬮棿" }).then(({ value }) => { resetUserPwd(row.userId, value).then(response => { - if (response.code === 200) { - this.msgSuccess("淇敼鎴愬姛锛屾柊瀵嗙爜鏄細" + value); - } + this.$modal.msgSuccess("淇敼鎴愬姛锛屾柊瀵嗙爜鏄細" + value); }); }).catch(() => {}); + }, + /** 鍒嗛厤瑙掕壊鎿嶄綔 */ + handleAuthRole: function(row) { + const userId = row.userId; + this.$router.push("/system/user-auth/role/" + userId); }, /** 鎻愪氦鎸夐挳 */ submitForm: function() { @@ -582,19 +611,15 @@ if (valid) { if (this.form.userId != undefined) { updateUser(this.form).then(response => { - if (response.code === 200) { - this.msgSuccess("淇敼鎴愬姛"); - this.open = false; - this.getList(); - } + this.$modal.msgSuccess("淇敼鎴愬姛"); + this.open = false; + this.getList(); }); } else { addUser(this.form).then(response => { - if (response.code === 200) { - this.msgSuccess("鏂板鎴愬姛"); - this.open = false; - this.getList(); - } + this.$modal.msgSuccess("鏂板鎴愬姛"); + this.open = false; + this.getList(); }); } } @@ -603,29 +628,18 @@ /** 鍒犻櫎鎸夐挳鎿嶄綔 */ handleDelete(row) { const userIds = row.userId || this.ids; - this.$confirm('鏄惁纭鍒犻櫎鐢ㄦ埛缂栧彿涓�"' + userIds + '"鐨勬暟鎹」?', "璀﹀憡", { - confirmButtonText: "纭畾", - cancelButtonText: "鍙栨秷", - type: "warning" - }).then(function() { - return delUser(userIds); - }).then(() => { - this.getList(); - this.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(function() {}); + this.$modal.confirm('鏄惁纭鍒犻櫎鐢ㄦ埛缂栧彿涓�"' + userIds + '"鐨勬暟鎹」锛�').then(function() { + return delUser(userIds); + }).then(() => { + this.getList(); + this.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + }).catch(() => {}); }, /** 瀵煎嚭鎸夐挳鎿嶄綔 */ handleExport() { - const queryParams = this.queryParams; - this.$confirm('鏄惁纭瀵煎嚭鎵�鏈夌敤鎴锋暟鎹」?', "璀﹀憡", { - confirmButtonText: "纭畾", - cancelButtonText: "鍙栨秷", - type: "warning" - }).then(function() { - return exportUser(queryParams); - }).then(response => { - this.download(response.msg); - }).catch(function() {}); + this.download('system/user/export', { + ...this.queryParams + }, `user_${new Date().getTime()}.xlsx`) }, /** 瀵煎叆鎸夐挳鎿嶄綔 */ handleImport() { @@ -634,9 +648,8 @@ }, /** 涓嬭浇妯℃澘鎿嶄綔 */ importTemplate() { - importTemplate().then(response => { - this.download(response.msg); - }); + this.download('system/user/importTemplate', { + }, `user_template_${new Date().getTime()}.xlsx`) }, // 鏂囦欢涓婁紶涓鐞� handleFileUploadProgress(event, file, fileList) { @@ -647,7 +660,7 @@ this.upload.open = false; this.upload.isUploading = false; this.$refs.upload.clearFiles(); - this.$alert(response.msg, "瀵煎叆缁撴灉", { dangerouslyUseHTMLString: true }); + this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "瀵煎叆缁撴灉", { dangerouslyUseHTMLString: true }); this.getList(); }, // 鎻愪氦涓婁紶鏂囦欢 -- Gitblit v1.9.3