From 64d172717748c383a5c88348037354bffd60f966 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 27 五月 2025 17:52:03 +0800 Subject: [PATCH] 页面样式修改 --- src/views/system/user/index.vue | 538 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 538 insertions(+), 0 deletions(-) diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue new file mode 100644 index 0000000..2cfb05e --- /dev/null +++ b/src/views/system/user/index.vue @@ -0,0 +1,538 @@ +<template> + <div class="app-container"> + <el-row :gutter="20"> + <splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme"> + <!--閮ㄩ棬鏁版嵁--> + <pane size="16"> + <el-col> + <div class="head-container"> + <el-input v-model="deptName" placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" clearable prefix-icon="Search" style="margin-bottom: 20px" /> + </div> + <div class="head-container"> + <el-tree :data="deptOptions" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false" :filter-node-method="filterNode" ref="deptTreeRef" node-key="id" highlight-current default-expand-all @node-click="handleNodeClick" /> + </div> + </el-col> + </pane> + <!--鐢ㄦ埛鏁版嵁--> + <pane size="84"> + <el-col> + <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px"> + <el-form-item label="鐢ㄦ埛鍚嶇О" prop="userName"> + <el-input v-model="queryParams.userName" placeholder="璇疯緭鍏ョ敤鎴峰悕绉�" clearable style="width: 240px" @keyup.enter="handleQuery" /> + </el-form-item> + <el-form-item label="鎵嬫満鍙风爜" prop="phonenumber"> + <el-input v-model="queryParams.phonenumber" placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�" clearable style="width: 240px" @keyup.enter="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 sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" /> + </el-select> + </el-form-item> + <el-form-item label="鍒涘缓鏃堕棿" style="width: 308px"> + <el-date-picker v-model="dateRange" 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="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> + </el-form> + + <el-row :gutter="10" class="mb8"> + <el-col :span="1.5"> + <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:user:add']">鏂板</el-button> + </el-col> + <el-col :span="1.5"> + <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">淇敼</el-button> + </el-col> + <el-col :span="1.5"> + <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">鍒犻櫎</el-button> + </el-col> + <el-col :span="1.5"> + <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['system:user:import']">瀵煎叆</el-button> + </el-col> + <el-col :span="1.5"> + <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:user:export']">瀵煎嚭</el-button> + </el-col> + <right-toolbar v-model:showSearch="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" 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 #default="scope"> + <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" v-if="columns[6].visible" width="160"> + <template #default="scope"> + <span>{{ parseTime(scope.row.createTime) }}</span> + </template> + </el-table-column> + <el-table-column label="鎿嶄綔" align="center" width="150" class-name="small-padding fixed-width"> + <template #default="scope"> + <el-tooltip content="淇敼" placement="top" v-if="scope.row.userId !== 1"> + <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"></el-button> + </el-tooltip> + <el-tooltip content="鍒犻櫎" placement="top" v-if="scope.row.userId !== 1"> + <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"></el-button> + </el-tooltip> + <el-tooltip content="閲嶇疆瀵嗙爜" placement="top" v-if="scope.row.userId !== 1"> + <el-button link type="primary" icon="Key" @click="handleResetPwd(scope.row)" v-hasPermi="['system:user:resetPwd']"></el-button> + </el-tooltip> + <el-tooltip content="鍒嗛厤瑙掕壊" placement="top" v-if="scope.row.userId !== 1"> + <el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)" v-hasPermi="['system:user:edit']"></el-button> + </el-tooltip> + </template> + </el-table-column> + </el-table> + <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" /> + </el-col> + </pane> + </splitpanes> + </el-row> + + <!-- 娣诲姞鎴栦慨鏀圭敤鎴烽厤缃璇濇 --> + <el-dialog :title="title" v-model="open" width="600px" append-to-body> + <el-form :model="form" :rules="rules" ref="userRef" label-width="80px"> + <el-row> + <el-col :span="12"> + <el-form-item label="鐢ㄦ埛鏄电О" prop="nickName"> + <el-input v-model="form.nickName" placeholder="璇疯緭鍏ョ敤鎴锋樀绉�" maxlength="30" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="褰掑睘閮ㄩ棬" prop="deptId"> + <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="璇烽�夋嫨褰掑睘閮ㄩ棬" check-strictly /> + </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" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="閭" prop="email"> + <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="璇疯緭鍏ョ敤鎴峰悕绉�" 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" 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-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鐘舵��"> + <el-radio-group v-model="form.status"> + <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="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-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1"></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="瑙掕壊"> + <el-select v-model="form.roleIds" multiple placeholder="璇烽�夋嫨"> + <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option> + </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> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> + <el-button @click="cancel">鍙� 娑�</el-button> + </div> + </template> + </el-dialog> + + <!-- 鐢ㄦ埛瀵煎叆瀵硅瘽妗� --> + <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body> + <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag> + <el-icon class="el-icon--upload"><upload-filled /></el-icon> + <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div> + <template #tip> + <div class="el-upload__tip text-center"> + <div class="el-upload__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> + </template> + </el-upload> + <template #footer> + <div class="dialog-footer"> + <el-button type="primary" @click="submitFileForm">纭� 瀹�</el-button> + <el-button @click="upload.open = false">鍙� 娑�</el-button> + </div> + </template> + </el-dialog> + </div> +</template> + +<script setup name="User"> +import { getToken } from "@/utils/auth" +import useAppStore from '@/store/modules/app' +import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user" +import { Splitpanes, Pane } from "splitpanes" +import "splitpanes/dist/splitpanes.css" + +const router = useRouter() +const appStore = useAppStore() +const { proxy } = getCurrentInstance() +const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex") + +const userList = ref([]) +const open = ref(false) +const loading = ref(true) +const showSearch = ref(true) +const ids = ref([]) +const single = ref(true) +const multiple = ref(true) +const total = ref(0) +const title = ref("") +const dateRange = ref([]) +const deptName = ref("") +const deptOptions = ref(undefined) +const enabledDeptOptions = ref(undefined) +const initPassword = ref(undefined) +const postOptions = ref([]) +const roleOptions = ref([]) +/*** 鐢ㄦ埛瀵煎叆鍙傛暟 */ +const upload = reactive({ + // 鏄惁鏄剧ず寮瑰嚭灞傦紙鐢ㄦ埛瀵煎叆锛� + open: false, + // 寮瑰嚭灞傛爣棰橈紙鐢ㄦ埛瀵煎叆锛� + title: "", + // 鏄惁绂佺敤涓婁紶 + isUploading: false, + // 鏄惁鏇存柊宸茬粡瀛樺湪鐨勭敤鎴锋暟鎹� + updateSupport: 0, + // 璁剧疆涓婁紶鐨勮姹傚ご閮� + headers: { Authorization: "Bearer " + getToken() }, + // 涓婁紶鐨勫湴鍧� + url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData" +}) +// 鍒楁樉闅愪俊鎭� +const columns = ref([ + { 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 } +]) + +const data = reactive({ + form: {}, + queryParams: { + pageNum: 1, + pageSize: 10, + userName: undefined, + phonenumber: undefined, + status: undefined, + deptId: undefined + }, + rules: { + userName: [{ required: true, message: "鐢ㄦ埛鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }, { min: 2, max: 20, message: "鐢ㄦ埛鍚嶇О闀垮害蹇呴』浠嬩簬 2 鍜� 20 涔嬮棿", trigger: "blur" }], + nickName: [{ required: true, message: "鐢ㄦ埛鏄电О涓嶈兘涓虹┖", trigger: "blur" }], + password: [{ required: true, message: "鐢ㄦ埛瀵嗙爜涓嶈兘涓虹┖", trigger: "blur" }, { min: 5, max: 20, message: "鐢ㄦ埛瀵嗙爜闀垮害蹇呴』浠嬩簬 5 鍜� 20 涔嬮棿", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "涓嶈兘鍖呭惈闈炴硶瀛楃锛�< > \" ' \\\ |", trigger: "blur" }], + email: [{ type: "email", message: "璇疯緭鍏ユ纭殑閭鍦板潃", trigger: ["blur", "change"] }], + phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "璇疯緭鍏ユ纭殑鎵嬫満鍙风爜", trigger: "blur" }] + } +}) + +const { queryParams, form, rules } = toRefs(data) + +/** 閫氳繃鏉′欢杩囨护鑺傜偣 */ +const filterNode = (value, data) => { + if (!value) return true + return data.label.indexOf(value) !== -1 +} + +/** 鏍规嵁鍚嶇О绛涢�夐儴闂ㄦ爲 */ +watch(deptName, val => { + proxy.$refs["deptTreeRef"].filter(val) +}) + +/** 鏌ヨ鐢ㄦ埛鍒楄〃 */ +function getList() { + loading.value = true + listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => { + loading.value = false + userList.value = res.rows + total.value = res.total + }) +} + +/** 鏌ヨ閮ㄩ棬涓嬫媺鏍戠粨鏋� */ +function getDeptTree() { + deptTreeSelect().then(response => { + deptOptions.value = response.data + enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data))) + }) +} + +/** 杩囨护绂佺敤鐨勯儴闂� */ +function filterDisabledDept(deptList) { + return deptList.filter(dept => { + if (dept.disabled) { + return false + } + if (dept.children && dept.children.length) { + dept.children = filterDisabledDept(dept.children) + } + return true + }) +} + +/** 鑺傜偣鍗曞嚮浜嬩欢 */ +function handleNodeClick(data) { + queryParams.value.deptId = data.id + handleQuery() +} + +/** 鎼滅储鎸夐挳鎿嶄綔 */ +function handleQuery() { + queryParams.value.pageNum = 1 + getList() +} + +/** 閲嶇疆鎸夐挳鎿嶄綔 */ +function resetQuery() { + dateRange.value = [] + proxy.resetForm("queryRef") + queryParams.value.deptId = undefined + proxy.$refs.deptTreeRef.setCurrentKey(null) + handleQuery() +} + +/** 鍒犻櫎鎸夐挳鎿嶄綔 */ +function handleDelete(row) { + const userIds = row.userId || ids.value + proxy.$modal.confirm('鏄惁纭鍒犻櫎鐢ㄦ埛缂栧彿涓�"' + userIds + '"鐨勬暟鎹」锛�').then(function () { + return delUser(userIds) + }).then(() => { + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + }).catch(() => {}) +} + +/** 瀵煎嚭鎸夐挳鎿嶄綔 */ +function handleExport() { + proxy.download("system/user/export", { + ...queryParams.value, + },`user_${new Date().getTime()}.xlsx`) +} + +/** 鐢ㄦ埛鐘舵�佷慨鏀� */ +function handleStatusChange(row) { + let text = row.status === "0" ? "鍚敤" : "鍋滅敤" + proxy.$modal.confirm('纭瑕�"' + text + '""' + row.userName + '"鐢ㄦ埛鍚�?').then(function () { + return changeUserStatus(row.userId, row.status) + }).then(() => { + proxy.$modal.msgSuccess(text + "鎴愬姛") + }).catch(function () { + row.status = row.status === "0" ? "1" : "0" + }) +} + +/** 鏇村鎿嶄綔 */ +function handleCommand(command, row) { + switch (command) { + case "handleResetPwd": + handleResetPwd(row) + break + case "handleAuthRole": + handleAuthRole(row) + break + default: + break + } +} + +/** 璺宠浆瑙掕壊鍒嗛厤 */ +function handleAuthRole(row) { + const userId = row.userId + router.push("/system/user-auth/role/" + userId) +} + +/** 閲嶇疆瀵嗙爜鎸夐挳鎿嶄綔 */ +function handleResetPwd(row) { + proxy.$prompt('璇疯緭鍏�"' + row.userName + '"鐨勬柊瀵嗙爜', "鎻愮ず", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + closeOnClickModal: false, + inputPattern: /^.{5,20}$/, + inputErrorMessage: "鐢ㄦ埛瀵嗙爜闀垮害蹇呴』浠嬩簬 5 鍜� 20 涔嬮棿", + inputValidator: (value) => { + if (/<|>|"|'|\||\\/.test(value)) { + return "涓嶈兘鍖呭惈闈炴硶瀛楃锛�< > \" ' \\\ |" + } + }, + }).then(({ value }) => { + resetUserPwd(row.userId, value).then(response => { + proxy.$modal.msgSuccess("淇敼鎴愬姛锛屾柊瀵嗙爜鏄細" + value) + }) + }).catch(() => {}) +} + +/** 閫夋嫨鏉℃暟 */ +function handleSelectionChange(selection) { + ids.value = selection.map(item => item.userId) + single.value = selection.length != 1 + multiple.value = !selection.length +} + +/** 瀵煎叆鎸夐挳鎿嶄綔 */ +function handleImport() { + upload.title = "鐢ㄦ埛瀵煎叆" + upload.open = true +} + +/** 涓嬭浇妯℃澘鎿嶄綔 */ +function importTemplate() { + proxy.download("system/user/importTemplate", { + }, `user_template_${new Date().getTime()}.xlsx`) +} + +/**鏂囦欢涓婁紶涓鐞� */ +const handleFileUploadProgress = (event, file, fileList) => { + upload.isUploading = true +} + +/** 鏂囦欢涓婁紶鎴愬姛澶勭悊 */ +const handleFileSuccess = (response, file, fileList) => { + upload.open = false + upload.isUploading = false + proxy.$refs["uploadRef"].handleRemove(file) + proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "瀵煎叆缁撴灉", { dangerouslyUseHTMLString: true }) + getList() +} + +/** 鎻愪氦涓婁紶鏂囦欢 */ +function submitFileForm() { + proxy.$refs["uploadRef"].submit() +} + +/** 閲嶇疆鎿嶄綔琛ㄥ崟 */ +function reset() { + form.value = { + userId: undefined, + deptId: undefined, + userName: undefined, + nickName: undefined, + password: undefined, + phonenumber: undefined, + email: undefined, + sex: undefined, + status: "0", + remark: undefined, + postIds: [], + roleIds: [] + } + proxy.resetForm("userRef") +} + +/** 鍙栨秷鎸夐挳 */ +function cancel() { + open.value = false + reset() +} + +/** 鏂板鎸夐挳鎿嶄綔 */ +function handleAdd() { + reset() + getUser().then(response => { + postOptions.value = response.posts + roleOptions.value = response.roles + open.value = true + title.value = "娣诲姞鐢ㄦ埛" + form.value.password = initPassword.value + }) +} + +/** 淇敼鎸夐挳鎿嶄綔 */ +function handleUpdate(row) { + reset() + const userId = row.userId || ids.value + getUser(userId).then(response => { + form.value = response.data + postOptions.value = response.posts + roleOptions.value = response.roles + form.value.postIds = response.postIds + form.value.roleIds = response.roleIds + open.value = true + title.value = "淇敼鐢ㄦ埛" + form.password = "" + }) +} + +/** 鎻愪氦鎸夐挳 */ +function submitForm() { + proxy.$refs["userRef"].validate(valid => { + if (valid) { + if (form.value.userId != undefined) { + updateUser(form.value).then(response => { + proxy.$modal.msgSuccess("淇敼鎴愬姛") + open.value = false + getList() + }) + } else { + addUser(form.value).then(response => { + proxy.$modal.msgSuccess("鏂板鎴愬姛") + open.value = false + getList() + }) + } + } + }) +} + +getDeptTree() +getList() +</script> -- Gitblit v1.9.3