|
|
|
|
@ -1,23 +1,16 @@
|
|
|
|
|
<!-- 用户管理 -->
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<!-- <el-row :gutter="20"> -->
|
|
|
|
|
<!-- 部门树 -->
|
|
|
|
|
<!-- <el-col :lg="4" :xs="24" class="mb-[12px]">
|
|
|
|
|
<dept-tree v-model="queryParams.deptId" @node-click="handleQuery" />
|
|
|
|
|
</el-col> -->
|
|
|
|
|
|
|
|
|
|
<!-- 用户列表 -->
|
|
|
|
|
<!-- <el-col :lg="20" :xs="24"> -->
|
|
|
|
|
<el-card shadow="never" class="table-container">
|
|
|
|
|
<template #header>
|
|
|
|
|
<div class="flex justify-between">
|
|
|
|
|
<div>
|
|
|
|
|
<el-button type="primary" @click="openDialog('user-form')"
|
|
|
|
|
<el-button type="primary" @click="openDialog()"
|
|
|
|
|
><i-ep-plus />新增用户</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<!-- <div>
|
|
|
|
|
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
|
|
|
|
<el-form-item label="用户信息" prop="keywords">
|
|
|
|
|
<el-input
|
|
|
|
|
@ -38,43 +31,33 @@
|
|
|
|
|
>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<el-table
|
|
|
|
|
v-loading="loading"
|
|
|
|
|
:data="tableData"
|
|
|
|
|
:data="pageData"
|
|
|
|
|
@selection-change="handleSelectionChange"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column key="id" label="编号" align="center" prop="id" width="100" />
|
|
|
|
|
<el-table-column key="username" label="用户名称" align="left" prop="username" />
|
|
|
|
|
<el-table-column label="性别" width="100" align="left" prop="genderLabel" />
|
|
|
|
|
<el-table-column label="手机号码" align="left" prop="mobile" width="120" />
|
|
|
|
|
<el-table-column label="状态" align="center" prop="status">
|
|
|
|
|
<el-table-column key="id" label="编号" align="left" prop="user_id" />
|
|
|
|
|
<el-table-column label="用户名称" align="left" prop="user_name" />
|
|
|
|
|
<el-table-column label="角色编号" align="left" prop="user_role" />
|
|
|
|
|
<el-table-column label="角色名称" align="left" prop="user_role_name" />
|
|
|
|
|
<el-table-column label="操作" fixed="right" width="320">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-tag :type="scope.row.status == 1 ? 'success' : 'info'">{{
|
|
|
|
|
scope.row.status == 1 ? "正常" : "禁用"
|
|
|
|
|
}}</el-tag>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="创建时间" align="left" prop="createTime" width="180" />
|
|
|
|
|
<el-table-column label="登录时间" align="left" prop="createTime" width="180" />
|
|
|
|
|
<el-table-column label="操作" fixed="right" width="220">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
size="small"
|
|
|
|
|
text
|
|
|
|
|
@click="resetPassword(scope.row)"
|
|
|
|
|
><i-ep-refresh-left />重置密码</el-button
|
|
|
|
|
<el-button type="primary" size="small" text @click="resetPassword(scope.row)"
|
|
|
|
|
><i-ep-refresh-left />修改密码</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button type="primary" size="small" text @click="openDialogEdit(scope.row)"
|
|
|
|
|
><i-ep-edit />修改角色</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
text
|
|
|
|
|
size="small"
|
|
|
|
|
@click="openDialog('user-form', scope.row.id)"
|
|
|
|
|
><i-ep-edit />编辑</el-button
|
|
|
|
|
@click="handleDelete(scope.row.user_id)"
|
|
|
|
|
><i-ep-delete />删除</el-button
|
|
|
|
|
>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
@ -83,128 +66,55 @@
|
|
|
|
|
<pagination
|
|
|
|
|
v-if="total > 0"
|
|
|
|
|
v-model:total="total"
|
|
|
|
|
v-model:page="queryParams.pageNum"
|
|
|
|
|
v-model:limit="queryParams.pageSize"
|
|
|
|
|
v-model:page="queryParams.page_num"
|
|
|
|
|
v-model:limit="queryParams.page_size"
|
|
|
|
|
@pagination="handleQuery"
|
|
|
|
|
/>
|
|
|
|
|
</el-card>
|
|
|
|
|
<!-- </el-col>
|
|
|
|
|
</el-row> -->
|
|
|
|
|
|
|
|
|
|
<!-- 弹窗 -->
|
|
|
|
|
<el-dialog
|
|
|
|
|
v-model="dialog.visible"
|
|
|
|
|
:title="dialog.title"
|
|
|
|
|
:width="dialog.width"
|
|
|
|
|
append-to-body
|
|
|
|
|
@close="closeDialog"
|
|
|
|
|
>
|
|
|
|
|
<el-dialog v-model="formVisible" :title="title" width="680">
|
|
|
|
|
<!-- 用户新增/编辑表单 -->
|
|
|
|
|
<el-form
|
|
|
|
|
v-if="dialog.type === 'user-form'"
|
|
|
|
|
ref="userFormRef"
|
|
|
|
|
:model="formData"
|
|
|
|
|
ref="formRef"
|
|
|
|
|
v-loading="formLoading"
|
|
|
|
|
:model="form"
|
|
|
|
|
:rules="rules"
|
|
|
|
|
label-width="80px"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item label="用户名" prop="username">
|
|
|
|
|
<el-form-item label="用户名称" prop="user_name">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="formData.username"
|
|
|
|
|
:readonly="!!formData.id"
|
|
|
|
|
placeholder="请输入用户名"
|
|
|
|
|
v-model="form.user_name"
|
|
|
|
|
:disabled="form.user_id != null"
|
|
|
|
|
placeholder="请输入用户名称"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="用户昵称" prop="nickname">
|
|
|
|
|
<el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="所属部门" prop="deptId">
|
|
|
|
|
<el-tree-select
|
|
|
|
|
v-model="formData.deptId"
|
|
|
|
|
placeholder="请选择所属部门"
|
|
|
|
|
:data="deptList"
|
|
|
|
|
filterable
|
|
|
|
|
check-strictly
|
|
|
|
|
:render-after-expand="false"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="性别" prop="gender">
|
|
|
|
|
<dictionary v-model="formData.gender" type-code="gender" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="角色" prop="roleIds">
|
|
|
|
|
<el-select v-model="formData.roleIds" multiple placeholder="请选择">
|
|
|
|
|
<el-form-item label="用户角色" prop="user_role">
|
|
|
|
|
<el-select v-model="form.user_role" placeholder="请选择用户角色">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in roleList"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
v-for="item in listOpt.roleList"
|
|
|
|
|
:key="item.key"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="手机号码" prop="mobile">
|
|
|
|
|
<el-form-item label="登录密码" prop="user_password" v-if="form.user_id == null">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="formData.mobile"
|
|
|
|
|
placeholder="请输入手机号码"
|
|
|
|
|
maxlength="11"
|
|
|
|
|
v-model="form.user_password"
|
|
|
|
|
type="password"
|
|
|
|
|
placeholder="请输入登录密码"
|
|
|
|
|
show-password
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="邮箱" prop="email">
|
|
|
|
|
<el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="状态" prop="status">
|
|
|
|
|
<el-radio-group v-model="formData.status">
|
|
|
|
|
<el-radio :label="1">正常</el-radio>
|
|
|
|
|
<el-radio :label="0">禁用</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
<!-- 用户导入表单 -->
|
|
|
|
|
<el-form
|
|
|
|
|
v-else-if="dialog.type === 'user-import'"
|
|
|
|
|
:model="importData"
|
|
|
|
|
label-width="100px"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item label="部门">
|
|
|
|
|
<el-tree-select
|
|
|
|
|
v-model="importData.deptId"
|
|
|
|
|
placeholder="请选择部门"
|
|
|
|
|
:data="deptList"
|
|
|
|
|
filterable
|
|
|
|
|
check-strictly
|
|
|
|
|
<el-form-item label="确认密码" prop="password" v-if="!form.user_id == null">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="form.password"
|
|
|
|
|
type="password"
|
|
|
|
|
placeholder="请输入确认密码"
|
|
|
|
|
show-password
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="Excel文件">
|
|
|
|
|
<el-upload
|
|
|
|
|
ref="uploadRef"
|
|
|
|
|
action=""
|
|
|
|
|
drag
|
|
|
|
|
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
|
|
|
|
|
:limit="1"
|
|
|
|
|
:auto-upload="false"
|
|
|
|
|
:file-list="importData.fileList"
|
|
|
|
|
:on-change="handleFileChange"
|
|
|
|
|
:on-exceed="handleFileExceed"
|
|
|
|
|
>
|
|
|
|
|
<el-icon class="el-icon--upload">
|
|
|
|
|
<i-ep-upload-filled />
|
|
|
|
|
</el-icon>
|
|
|
|
|
<div class="el-upload__text">
|
|
|
|
|
将文件拖到此处，或
|
|
|
|
|
<em>点击上传</em>
|
|
|
|
|
</div>
|
|
|
|
|
<template #tip>
|
|
|
|
|
<div>xls/xlsx files</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-upload>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<!-- 弹窗底部操作按钮 -->
|
|
|
|
|
<template #footer>
|
|
|
|
|
@ -218,101 +128,59 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
defineOptions({
|
|
|
|
|
name: "User",
|
|
|
|
|
inheritAttrs: false,
|
|
|
|
|
});
|
|
|
|
|
import UserAPI from "@/api/myUser";
|
|
|
|
|
|
|
|
|
|
import UserAPI from "@/api/user";
|
|
|
|
|
import DeptAPI from "@/api/dept";
|
|
|
|
|
import RoleAPI from "@/api/role";
|
|
|
|
|
|
|
|
|
|
import { UserForm, UserQuery, UserPageVO } from "@/api/user/model";
|
|
|
|
|
import type { UploadInstance } from "element-plus";
|
|
|
|
|
import { genFileId } from "element-plus";
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
const queryFormRef = ref(ElForm); // 查询表单
|
|
|
|
|
const userFormRef = ref(ElForm); // 用户表单
|
|
|
|
|
const uploadRef = ref<UploadInstance>(); // 上传组件
|
|
|
|
|
|
|
|
|
|
const title = ref(""); // 加载状态
|
|
|
|
|
const loading = ref(false); // 加载状态
|
|
|
|
|
const removeIds = ref([]); // 删除用户ID集合 用于批量删除
|
|
|
|
|
const queryParams = reactive<UserQuery>({
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
});
|
|
|
|
|
const dateTimeRange = ref("");
|
|
|
|
|
const total = ref(0); // 数据总数
|
|
|
|
|
const pageData = ref<UserPageVO[]>(); // 用户分页数据
|
|
|
|
|
const deptList = ref<OptionType[]>(); // 部门下拉数据源
|
|
|
|
|
const roleList = ref<OptionType[]>(); // 角色下拉数据源
|
|
|
|
|
|
|
|
|
|
watch(dateTimeRange, (newVal) => {
|
|
|
|
|
if (newVal) {
|
|
|
|
|
queryParams.startTime = newVal[0];
|
|
|
|
|
queryParams.endTime = newVal[1];
|
|
|
|
|
}
|
|
|
|
|
const pageData = ref([]); // 分页数据
|
|
|
|
|
const removeIds = ref([]); // 删除ID集合 用于批量删除
|
|
|
|
|
const queryFormRef = ref(ElForm); // 查询表单
|
|
|
|
|
const queryParams = reactive({
|
|
|
|
|
page_num: 1,
|
|
|
|
|
page_size: 10,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const tableData = [
|
|
|
|
|
{
|
|
|
|
|
id: "2014",
|
|
|
|
|
username: "张三峰",
|
|
|
|
|
genderLabel: "男",
|
|
|
|
|
mobile: "181****6654",
|
|
|
|
|
status: "1",
|
|
|
|
|
createTime: "2024-05-03 12:12",
|
|
|
|
|
loginTime: "2024-05-03 12:12",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "3044",
|
|
|
|
|
username: "李白",
|
|
|
|
|
genderLabel: "男",
|
|
|
|
|
mobile: "135****7788",
|
|
|
|
|
status: "0",
|
|
|
|
|
createTime: "2024-05-01 01:45",
|
|
|
|
|
loginTime: "2024-05-03 12:12",
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// 弹窗对象
|
|
|
|
|
const dialog = reactive({
|
|
|
|
|
visible: false,
|
|
|
|
|
type: "user-form",
|
|
|
|
|
width: 800,
|
|
|
|
|
title: "",
|
|
|
|
|
const form = reactive({
|
|
|
|
|
user_id: null,
|
|
|
|
|
user_name: null,
|
|
|
|
|
user_role: null,
|
|
|
|
|
user_password: null,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 用户表单数据
|
|
|
|
|
const formData = reactive<UserForm>({
|
|
|
|
|
status: 1,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 用户导入数据
|
|
|
|
|
const importData = reactive({
|
|
|
|
|
deptId: undefined,
|
|
|
|
|
file: undefined,
|
|
|
|
|
fileList: [],
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const formRef = ref(ElForm); // 表单
|
|
|
|
|
const formLoading = ref(false); // 加载状态
|
|
|
|
|
const formVisible = ref(false); // 加载状态
|
|
|
|
|
// 校验规则
|
|
|
|
|
const rules = reactive({
|
|
|
|
|
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
|
|
|
|
|
nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
|
|
|
|
|
deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
|
|
|
|
|
roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
|
|
|
|
|
email: [
|
|
|
|
|
user_name: [{ required: true, message: "用户名称不能为空", trigger: "blur" }],
|
|
|
|
|
user_role: [{ required: true, message: "用户角色不能为空", trigger: "change" }],
|
|
|
|
|
user_password: [{ required: true, message: "登录密码不能为空", trigger: "blur" }],
|
|
|
|
|
password: [{ required: true, message: "确认密码不能为空", trigger: "blur" }],
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 基础数据列表
|
|
|
|
|
let listOpt = reactive({
|
|
|
|
|
roleList: [
|
|
|
|
|
{
|
|
|
|
|
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
|
|
|
|
|
message: "请输入正确的邮箱地址",
|
|
|
|
|
trigger: "blur",
|
|
|
|
|
id: 1,
|
|
|
|
|
key: "super",
|
|
|
|
|
name: "超级管理员",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
mobile: [
|
|
|
|
|
{
|
|
|
|
|
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
|
|
|
|
message: "请输入正确的手机号码",
|
|
|
|
|
trigger: "blur",
|
|
|
|
|
id: 2,
|
|
|
|
|
key: "sys_admin",
|
|
|
|
|
name: "系统管理员",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 3,
|
|
|
|
|
key: "data_admin",
|
|
|
|
|
name: "数据管理员",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 4,
|
|
|
|
|
key: "user",
|
|
|
|
|
name: "普通用户",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
@ -320,27 +188,20 @@ const rules = reactive({
|
|
|
|
|
/** 查询 */
|
|
|
|
|
function handleQuery() {
|
|
|
|
|
loading.value = true;
|
|
|
|
|
ElMessage.success("查询成功");
|
|
|
|
|
UserAPI.list(queryParams)
|
|
|
|
|
.then((res) => {
|
|
|
|
|
pageData.value = res.data.data.user_list;
|
|
|
|
|
total.value = res.data.data.total;
|
|
|
|
|
})
|
|
|
|
|
.finally(() => {
|
|
|
|
|
loading.value = false;
|
|
|
|
|
// UserAPI.getPage(queryParams)
|
|
|
|
|
// .then((data) => {
|
|
|
|
|
// console.log("handleQuery", data);
|
|
|
|
|
// pageData.value = data.list;
|
|
|
|
|
// total.value = data.total;
|
|
|
|
|
// })
|
|
|
|
|
// .finally(() => {
|
|
|
|
|
// loading.value = false;
|
|
|
|
|
// });
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 重置查询 */
|
|
|
|
|
function resetQuery() {
|
|
|
|
|
queryFormRef.value.resetFields();
|
|
|
|
|
dateTimeRange.value = "";
|
|
|
|
|
queryParams.pageNum = 1;
|
|
|
|
|
queryParams.deptId = undefined;
|
|
|
|
|
queryParams.startTime = undefined;
|
|
|
|
|
queryParams.endTime = undefined;
|
|
|
|
|
queryParams.page_num = 1;
|
|
|
|
|
handleQuery();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -351,214 +212,121 @@ function handleSelectionChange(selection: any) {
|
|
|
|
|
|
|
|
|
|
/** 重置密码 */
|
|
|
|
|
function resetPassword(row: { [key: string]: any }) {
|
|
|
|
|
ElMessageBox.prompt("请输入用户「" + row.username + "」的新密码", "重置密码", {
|
|
|
|
|
ElMessageBox.prompt("请输入用户「" + row.user_name + "」的新密码", "重置密码", {
|
|
|
|
|
confirmButtonText: "确定",
|
|
|
|
|
cancelButtonText: "取消",
|
|
|
|
|
}).then(({ value }) => {
|
|
|
|
|
// if (!value || value.length < 6) {
|
|
|
|
|
// // 检查密码是否为空或少于6位
|
|
|
|
|
// ElMessage.warning("密码至少需要6位字符，请重新输入");
|
|
|
|
|
// return false;
|
|
|
|
|
// }
|
|
|
|
|
// UserAPI.updatePassword(row.id, value).then(() => {
|
|
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
if (!value || value.length < 6) {
|
|
|
|
|
// 检查密码是否为空或少于6位
|
|
|
|
|
ElMessage.warning("密码至少需要6位字符，请重新输入");
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
UserAPI.updatePassword(row.id, { password: value }).then((res) => {
|
|
|
|
|
if (res.data.code == 0) {
|
|
|
|
|
ElMessage.success("密码重置成功，新密码是：" + value);
|
|
|
|
|
} else {
|
|
|
|
|
ElMessage.error("密码重置失败！" + res.data.message);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 加载角色下拉数据源 */
|
|
|
|
|
async function loadRoleOptions() {
|
|
|
|
|
RoleAPI.getOptions().then((data) => {
|
|
|
|
|
roleList.value = data;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 加载部门下拉数据源 */
|
|
|
|
|
async function loadDeptOptions() {
|
|
|
|
|
DeptAPI.getOptions().then((data) => {
|
|
|
|
|
deptList.value = data;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 打开弹窗
|
|
|
|
|
*
|
|
|
|
|
* @param type 弹窗类型 用户表单：user-form | 用户导入：user-import
|
|
|
|
|
* @param id 用户ID
|
|
|
|
|
*/
|
|
|
|
|
async function openDialog(type: string, id?: number) {
|
|
|
|
|
router.push({ path: "/system/userEdit" });
|
|
|
|
|
// dialog.visible = true;
|
|
|
|
|
// dialog.type = type;
|
|
|
|
|
function openDialog() {
|
|
|
|
|
reset();
|
|
|
|
|
title.value = "新增用户";
|
|
|
|
|
formVisible.value = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// if (dialog.type === "user-form") {
|
|
|
|
|
// // 用户表单弹窗
|
|
|
|
|
// await loadDeptOptions();
|
|
|
|
|
// await loadRoleOptions();
|
|
|
|
|
// if (id) {
|
|
|
|
|
// dialog.title = "修改用户";
|
|
|
|
|
// UserAPI.getFormData(id).then((data) => {
|
|
|
|
|
// Object.assign(formData, { ...data });
|
|
|
|
|
// });
|
|
|
|
|
// } else {
|
|
|
|
|
// dialog.title = "新增用户";
|
|
|
|
|
// }
|
|
|
|
|
// } else if (dialog.type === "user-import") {
|
|
|
|
|
// // 用户导入弹窗
|
|
|
|
|
// dialog.title = "导入用户";
|
|
|
|
|
// dialog.width = 600;
|
|
|
|
|
// loadDeptOptions();
|
|
|
|
|
// }
|
|
|
|
|
/**
|
|
|
|
|
* 打开弹窗
|
|
|
|
|
*/
|
|
|
|
|
function openDialogEdit(row: { [key: string]: any }) {
|
|
|
|
|
reset();
|
|
|
|
|
title.value = "修改用户角色";
|
|
|
|
|
form.user_id = row.user_id;
|
|
|
|
|
form.user_name = row.user_name;
|
|
|
|
|
form.user_role = row.user_role;
|
|
|
|
|
formVisible.value = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 关闭弹窗
|
|
|
|
|
*
|
|
|
|
|
* @param type 弹窗类型 用户表单：user-form | 用户导入：user-import
|
|
|
|
|
*/
|
|
|
|
|
function closeDialog() {
|
|
|
|
|
dialog.visible = false;
|
|
|
|
|
if (dialog.type === "user-form") {
|
|
|
|
|
userFormRef.value.resetFields();
|
|
|
|
|
userFormRef.value.clearValidate();
|
|
|
|
|
|
|
|
|
|
formData.id = undefined;
|
|
|
|
|
formData.status = 1;
|
|
|
|
|
} else if (dialog.type === "user-import") {
|
|
|
|
|
importData.file = undefined;
|
|
|
|
|
importData.fileList = [];
|
|
|
|
|
}
|
|
|
|
|
formVisible.value = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 表单提交 */
|
|
|
|
|
const handleSubmit = useThrottleFn(() => {
|
|
|
|
|
if (dialog.type === "user-form") {
|
|
|
|
|
userFormRef.value.validate((valid: any) => {
|
|
|
|
|
formRef.value.validate((valid: any) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
const userId = formData.id;
|
|
|
|
|
loading.value = true;
|
|
|
|
|
if (userId) {
|
|
|
|
|
UserAPI.update(userId, formData)
|
|
|
|
|
.then(() => {
|
|
|
|
|
ElMessage.success("修改用户成功");
|
|
|
|
|
closeDialog();
|
|
|
|
|
resetQuery();
|
|
|
|
|
if (form.user_id) {
|
|
|
|
|
//修改角色
|
|
|
|
|
formLoading.value = true;
|
|
|
|
|
UserAPI.updateAuth(form.user_id, form)
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (res.data.code == 0) {
|
|
|
|
|
ElMessage.success("保存成功");
|
|
|
|
|
formVisible.value = false;
|
|
|
|
|
handleQuery();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.finally(() => (loading.value = false));
|
|
|
|
|
.finally(() => {
|
|
|
|
|
formLoading.value = false;
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
UserAPI.add(formData)
|
|
|
|
|
.then(() => {
|
|
|
|
|
ElMessage.success("新增用户成功");
|
|
|
|
|
closeDialog();
|
|
|
|
|
resetQuery();
|
|
|
|
|
//新增用户时判断密码是否一致
|
|
|
|
|
if (form.user_password != form.password) {
|
|
|
|
|
ElMessage.error("两次密码不一致");
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
formLoading.value = true;
|
|
|
|
|
UserAPI.add(form)
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (res.data.code == 0) {
|
|
|
|
|
ElMessage.success("保存成功");
|
|
|
|
|
formVisible.value = false;
|
|
|
|
|
handleQuery();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.finally(() => (loading.value = false));
|
|
|
|
|
.finally(() => {
|
|
|
|
|
formLoading.value = false;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else if (dialog.type === "user-import") {
|
|
|
|
|
if (!importData?.deptId) {
|
|
|
|
|
ElMessage.warning("请选择部门");
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
if (!importData?.file) {
|
|
|
|
|
ElMessage.warning("上传Excel文件不能为空");
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
UserAPI.import(importData?.deptId, importData?.file).then((data) => {
|
|
|
|
|
ElMessage.success("导入用户成功");
|
|
|
|
|
closeDialog();
|
|
|
|
|
resetQuery();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}, 3000);
|
|
|
|
|
|
|
|
|
|
/** 重置查询 */
|
|
|
|
|
function reset() {
|
|
|
|
|
form.user_id = null;
|
|
|
|
|
form.user_name = null;
|
|
|
|
|
form.user_role = null;
|
|
|
|
|
form.user_password = null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 删除用户 */
|
|
|
|
|
function handleDelete(id?: number) {
|
|
|
|
|
const userIds = [id || removeIds.value].join(",");
|
|
|
|
|
if (!userIds) {
|
|
|
|
|
ElMessage.warning("请勾选删除项");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ElMessageBox.confirm("确认删除用户?", "警告", {
|
|
|
|
|
confirmButtonText: "确定",
|
|
|
|
|
cancelButtonText: "取消",
|
|
|
|
|
type: "warning",
|
|
|
|
|
}).then(function () {
|
|
|
|
|
UserAPI.deleteByIds(userIds).then(() => {
|
|
|
|
|
UserAPI.deleteUser(id).then((res) => {
|
|
|
|
|
if (res.data.code == 0) {
|
|
|
|
|
ElMessage.success("删除成功");
|
|
|
|
|
resetQuery();
|
|
|
|
|
} else {
|
|
|
|
|
ElMessage.error("删除失败");
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 下载导入模板 */
|
|
|
|
|
function downloadTemplate() {
|
|
|
|
|
UserAPI.downloadTemplate().then((response: any) => {
|
|
|
|
|
const fileData = response.data;
|
|
|
|
|
const fileName = decodeURI(
|
|
|
|
|
response.headers["content-disposition"].split(";")[1].split("=")[1]
|
|
|
|
|
);
|
|
|
|
|
const fileType =
|
|
|
|
|
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
|
|
|
|
|
|
|
|
|
|
const blob = new Blob([fileData], { type: fileType });
|
|
|
|
|
const downloadUrl = window.URL.createObjectURL(blob);
|
|
|
|
|
|
|
|
|
|
const downloadLink = document.createElement("a");
|
|
|
|
|
downloadLink.href = downloadUrl;
|
|
|
|
|
downloadLink.download = fileName;
|
|
|
|
|
|
|
|
|
|
document.body.appendChild(downloadLink);
|
|
|
|
|
downloadLink.click();
|
|
|
|
|
|
|
|
|
|
document.body.removeChild(downloadLink);
|
|
|
|
|
window.URL.revokeObjectURL(downloadUrl);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** Excel文件 Change */
|
|
|
|
|
function handleFileChange(file: any) {
|
|
|
|
|
importData.file = file.raw;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** Excel文件 Exceed */
|
|
|
|
|
function handleFileExceed(files: any) {
|
|
|
|
|
uploadRef.value!.clearFiles();
|
|
|
|
|
const file = files[0];
|
|
|
|
|
file.uid = genFileId();
|
|
|
|
|
uploadRef.value!.handleStart(file);
|
|
|
|
|
importData.file = file;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 导出用户 */
|
|
|
|
|
function handleExport() {
|
|
|
|
|
UserAPI.export(queryParams).then((response: any) => {
|
|
|
|
|
const fileData = response.data;
|
|
|
|
|
const fileName = decodeURI(
|
|
|
|
|
response.headers["content-disposition"].split(";")[1].split("=")[1]
|
|
|
|
|
);
|
|
|
|
|
const fileType =
|
|
|
|
|
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
|
|
|
|
|
|
|
|
|
|
const blob = new Blob([fileData], { type: fileType });
|
|
|
|
|
const downloadUrl = window.URL.createObjectURL(blob);
|
|
|
|
|
|
|
|
|
|
const downloadLink = document.createElement("a");
|
|
|
|
|
downloadLink.href = downloadUrl;
|
|
|
|
|
downloadLink.download = fileName;
|
|
|
|
|
|
|
|
|
|
document.body.appendChild(downloadLink);
|
|
|
|
|
downloadLink.click();
|
|
|
|
|
|
|
|
|
|
document.body.removeChild(downloadLink);
|
|
|
|
|
window.URL.revokeObjectURL(downloadUrl);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
//handleQuery();
|
|
|
|
|
handleQuery();
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
姜玉琦