<template>
|
<div class="inquire">
|
<el-form :model="queryFormdata" :inline="true">
|
<el-form-item label="用户账号">
|
<el-input v-model="queryFormdata.username" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="queryInfo()" icon="el-icon-search"
|
>查询
|
</el-button>
|
</el-form-item>
|
<br />
|
</el-form>
|
</div>
|
<div class="header_nox">
|
<el-button type="primary" @click="handleAdd()">新增用户</el-button>
|
</div>
|
<el-table :data="tableData" style="width: 100%">
|
<el-table-column prop="username" label="用户账号" />
|
<el-table-column prop="realname" label="用户姓名" />
|
<el-table-column prop="phone" label="手机号" />
|
<el-table-column prop="orgCodeTxt" label="部门" />
|
<el-table-column prop="workNo" label="工号" />
|
<el-table-column prop="status_dictText" label="状态" />
|
<el-table-column label="操作">
|
<template #default="scope">
|
<el-link type="primary" @click="handleEdit(scope.row, 'edit')"
|
>编辑</el-link
|
>
|
<el-divider direction="vertical" />
|
<el-dropdown>
|
<span class="el-dropdown-link">
|
更多
|
<el-icon class="el-icon--right">
|
<arrow-down />
|
</el-icon>
|
</span>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item @click="handleEdit(scope.row, 'info')"
|
>详情</el-dropdown-item
|
>
|
<el-dropdown-item @click="changePass(scope.row)"
|
>密码</el-dropdown-item
|
>
|
<el-dropdown-item
|
@click="frozen(scope.row)"
|
v-if="scope.row.status == 1"
|
>冻结</el-dropdown-item
|
>
|
<el-dropdown-item
|
@click="thaw(scope.row)"
|
v-if="scope.row.status == 2"
|
>解冻</el-dropdown-item
|
>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="page">
|
<el-pagination
|
background
|
layout="prev, pager, next"
|
:page-count="pageData.total"
|
:current-page="pageData.ListData.pageNo"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
|
<el-drawer
|
ref="drawerRef"
|
v-model="dialog"
|
:title="drawertitle"
|
:before-close="handleClose"
|
direction="rtl"
|
class="demo-drawer"
|
:destroy-on-close="true"
|
>
|
<div class="demo-drawer__content">
|
<el-form
|
ref="ruleFormRef"
|
:model="ruleForm"
|
status-icon
|
:rules="rules"
|
label-width="120px"
|
class="demo-ruleForm"
|
:disabled="isDisabled"
|
>
|
<el-form-item label="用户账号" :prop="isAdd ? 'username' : 'realname'">
|
<el-input
|
placeholder="请输入用户账号"
|
:disabled="isEdit ? true : false"
|
v-model="ruleForm.username"
|
autocomplete="off"
|
/>
|
</el-form-item>
|
<el-form-item label="登录密码" prop="password" v-if="isAdd">
|
<el-input
|
show-password
|
placeholder="请输入登录密码"
|
v-model="ruleForm.password"
|
type="password"
|
autocomplete="off"
|
/>
|
</el-form-item>
|
<el-form-item label="确认密码" prop="confirmPassword" v-if="isAdd">
|
<el-input
|
show-password
|
placeholder="请输入确认密码"
|
v-model="ruleForm.confirmPassword"
|
type="password"
|
autocomplete="off"
|
/>
|
</el-form-item>
|
<el-form-item label="用户姓名" prop="realname">
|
<el-input
|
placeholder="请输入用户姓名"
|
v-model="ruleForm.realname"
|
autocomplete="off"
|
/>
|
</el-form-item>
|
<el-form-item label="工号" prop="workNo">
|
<el-input
|
placeholder="请输入工号"
|
v-model="ruleForm.workNo"
|
autocomplete="off"
|
/>
|
</el-form-item>
|
<el-form-item label="角色">
|
<el-select
|
v-model="ruleForm.selectedroles"
|
clearable
|
placeholder="请选择角色"
|
>
|
<el-option
|
v-for="item in RoleOptions"
|
:key="item.id"
|
:label="item.roleName"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="所属部门">
|
<el-tree-select
|
placeholder="请选择所属部门"
|
v-model="ruleForm.selecteddeparts"
|
:props="{ value: 'value', label: 'title' }"
|
:data="depOptions"
|
multiple
|
node-key="value"
|
:render-after-expand="false"
|
show-checkbox
|
check-strictly
|
check-on-click-node
|
:default-checked-keys="selectedDep"
|
/>
|
</el-form-item>
|
<el-form-item label="手机号码" prop="phone">
|
<el-input v-model="ruleForm.phone" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="引擎">
|
<el-radio-group v-model="ruleForm.activitiSync">
|
<el-radio :label="1">同步</el-radio>
|
<el-radio :label="2">不同步</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
<div class="demo-drawer__footer" v-if="isAdd">
|
<el-button @click="handleClose()">取消</el-button>
|
<el-button type="primary" @click="addUser(ruleFormRef)">新增</el-button>
|
</div>
|
<div class="demo-drawer__footer" v-if="isEdit">
|
<el-button @click="handleClose()">取消</el-button>
|
<el-button type="primary" @click="editUser(ruleFormRef)">
|
编辑
|
</el-button>
|
</div>
|
</div>
|
</el-drawer>
|
<el-dialog
|
destroy-on-close
|
v-model="editFormVisible"
|
title="修改密码"
|
customClass="addWidth"
|
width="20%"
|
>
|
<el-form
|
ref="editForm"
|
:model="ruleForm"
|
:rules="rules"
|
label-width="120px"
|
class="demo-ruleForm"
|
>
|
<el-form-item label="用户名">
|
<el-input
|
:disabled="true"
|
v-model="ruleForm.username"
|
autocomplete="off"
|
/>
|
</el-form-item>
|
<el-form-item label="登录密码" prop="password">
|
<el-input
|
type="password"
|
v-model="ruleForm.password"
|
autocomplete="off"
|
/>
|
</el-form-item>
|
<el-form-item label="确认密码" prop="confirmPassword">
|
<el-input
|
type="password"
|
v-model="ruleForm.confirmPassword"
|
autocomplete="off"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="handleClose()">关闭</el-button>
|
<el-button type="primary" @click="changePassword(editForm)"
|
>提交</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
|
import {
|
userList,
|
add,
|
deleteUser,
|
edit,
|
modifyPassword,
|
duplicateUser,
|
frozenBatch,
|
} from "@/api/account";
|
import { DepartListAll, queryUserDepart } from "@/api/dep";
|
import { RoleListAll, queryUserRole } from "@/api/role";
|
|
export default {
|
name: "User",
|
components: {},
|
props: {},
|
setup(props) {
|
// 验证规则
|
const username = (rule, value, callback) => {
|
var reg = new RegExp(/^[a-zA-Z0-9_]{0,15}$/); //字符串正则表达式 4到14位（字母，数字，下划线，减号）
|
if (value === "" || value === null || value === undefined) {
|
return callback(new Error("请输入用户名"));
|
} else {
|
if (!reg.test(value)) {
|
callback(new Error("账号必须由字母，数字或下划线,长度不得超过16位"));
|
} else {
|
if (isAdd.value) {
|
duplicateUser({
|
tableName: "sys_user",
|
fieldName: "username",
|
fieldVal: value,
|
_t: new Date().getTime(),
|
})
|
.then((res) => {
|
callback();
|
})
|
.catch((err) => {
|
callback(new Error("账号已存在"));
|
});
|
} else if (isEdit.value) {
|
duplicateUser({
|
tableName: "sys_user",
|
fieldName: "username",
|
fieldVal: value,
|
dataId: ruleForm.id,
|
_t: new Date().getTime(),
|
})
|
.then((res) => {
|
callback();
|
})
|
.catch((err) => {
|
callback(new Error("账号已存在"));
|
});
|
}
|
}
|
}
|
};
|
const workNo = (rule, value, callback) => {
|
if (value === "" || value === null || value === undefined) {
|
return callback(new Error("请输入工号"));
|
} else {
|
if (isAdd.value) {
|
duplicateUser({
|
tableName: "sys_user",
|
fieldName: "work_no",
|
fieldVal: value,
|
_t: new Date().getTime(),
|
})
|
.then((res) => {
|
callback();
|
})
|
.catch((err) => {
|
callback(new Error("工号已存在"));
|
});
|
} else if (isEdit.value) {
|
duplicateUser({
|
tableName: "sys_user",
|
fieldName: "work_no",
|
fieldVal: value,
|
dataId: ruleForm.id,
|
_t: new Date().getTime(),
|
})
|
.then((res) => {
|
callback();
|
})
|
.catch((err) => {
|
callback(new Error("工号已存在"));
|
});
|
}
|
}
|
};
|
const phone = (rule, value, callback) => {
|
var reg = new RegExp(/^[1][3,4,5,7,8][0-9]{9}$/); //字符串正则表达式 4到14位（字母，数字，下划线，减号）
|
if (value === "" || value === null || value === undefined) {
|
return callback(new Error("请输入手机号"));
|
} else {
|
if (!reg.test(value)) {
|
callback(new Error("手机号格式错误"));
|
} else {
|
if (isAdd.value) {
|
duplicateUser({
|
tableName: "sys_user",
|
fieldName: "phone",
|
fieldVal: value,
|
_t: new Date().getTime(),
|
})
|
.then((res) => {
|
callback();
|
})
|
.catch((err) => {
|
callback(new Error("手机号已存在"));
|
});
|
} else if (isEdit.value) {
|
duplicateUser({
|
tableName: "sys_user",
|
fieldName: "phone",
|
fieldVal: value,
|
dataId: ruleForm.id,
|
_t: new Date().getTime(),
|
})
|
.then((res) => {
|
callback();
|
})
|
.catch((err) => {
|
callback(new Error("手机号已存在"));
|
});
|
}
|
}
|
}
|
};
|
const validatePass = (rule, value, callback) => {
|
var reg = new RegExp(/^[a-zA-Z0-9]{0,15}$/); //字符串正则表达式 4到14位（字母，数字，下划线，减号）
|
if (value === "") {
|
callback(new Error("请输入密码"));
|
} else {
|
if (!reg.test(value)) {
|
callback(new Error("密码必须由字母或数字组成,长度不得超过16位"));
|
} else {
|
callback();
|
}
|
}
|
};
|
const validatePass2 = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请再次输入密码"));
|
} else if (value !== ruleForm.password) {
|
callback(new Error("两次密码不一致！"));
|
} else {
|
callback();
|
}
|
};
|
const rules = reactive({
|
realname: [
|
{
|
required: true,
|
message: "请填写用户姓名",
|
trigger: "blur",
|
},
|
],
|
username: [{ required: true, validator: username, trigger: "change" }],
|
password: [{ required: true, validator: validatePass, trigger: "blur" }],
|
confirmPassword: [
|
{ required: true, validator: validatePass2, trigger: "blur" },
|
],
|
|
workNo: [{ required: true, validator: workNo, trigger: "change" }],
|
phone: [{ required: true, validator: phone, trigger: "change" }],
|
});
|
|
const ruleFormRef = ref();
|
const editForm = ref();
|
const drawertitle = ref("");
|
const ruleForm = reactive({
|
id: "",
|
username: "",
|
password: "",
|
confirmPassword: "",
|
realname: "",
|
workNo: "", //工号
|
selectedroles: "", //角色
|
selecteddeparts: [], //所属部门
|
userIdentity: 1, //身份
|
phone: "", //手机
|
activitiSync: 1, //工作流
|
});
|
|
let tableData = ref([]);
|
const { proxy } = getCurrentInstance();
|
// 查询模块
|
let queryFormdata = reactive({
|
username: "",
|
});
|
let pageData = reactive({
|
ListData: {
|
pageNo: 1,
|
pageSize: 10,
|
_t: new Date().getTime(),
|
},
|
total: 0,
|
});
|
// 查询用户
|
const queryInfo = async () => {
|
let searchData = {
|
username: queryFormdata.username.trim(),
|
_t: new Date().getTime(),
|
};
|
const data = await userList(searchData);
|
tableData.value = data.result.records;
|
pageData.total = Math.ceil(
|
data.result.total / pageData.ListData.pageSize
|
);
|
};
|
|
// 定义弹框
|
const dialog = ref(false);
|
const isEdit = ref(false);
|
const isAdd = ref(false);
|
const isDisabled = ref(false);
|
const drawerRef = ref();
|
|
// 关闭弹框（初始化）
|
const handleClose = () => {
|
drawertitle.value = "";
|
ruleForm.id = "";
|
ruleForm.username = "";
|
ruleForm.password = "";
|
ruleForm.confirmPassword = "";
|
ruleForm.realname = "";
|
ruleForm.workNo = ""; //工号
|
ruleForm.selectedroles = ""; //角色
|
ruleForm.selecteddeparts = []; //所属部门
|
ruleForm.userIdentity = 1; //身份
|
ruleForm.phone = ""; //手机
|
ruleForm.activitiSync = 1; //工作流
|
|
dialog.value = false;
|
editFormVisible.value = false;
|
};
|
const selectOptionWidth = ref("");
|
const selectheight = ref("auto");
|
const setOptionWidth = (event) => {
|
// 下拉框聚焦，设置弹框的宽度
|
this.$nextTick(() => {
|
selectOptionWidth = event.srcElement.offsetWidth + "px";
|
});
|
};
|
//新增用户
|
const handleAdd = () => {
|
getRoleList(); //请求角色列表
|
getDepList(); //请求部门列表
|
drawertitle.value = "新增用户";
|
isDisabled.value = false;
|
isEdit.value = false;
|
isAdd.value = true;
|
dialog.value = true;
|
};
|
const addUser = (formEl) => {
|
if (!formEl) return;
|
formEl.validate((valid) => {
|
if (valid) {
|
let user = {
|
selectedroles: ruleForm.selectedroles, //角色
|
selecteddeparts: ruleForm.selecteddeparts.join(","), //所属部门
|
username: ruleForm.username,
|
password: ruleForm.password,
|
confirmPassword: ruleForm.confirmPassword,
|
realname: ruleForm.realname,
|
workNo: ruleForm.workNo,
|
userIdentity: ruleForm.userIdentity,
|
phone: ruleForm.phone,
|
activitiSync: ruleForm.activitiSync,
|
};
|
add(user).then((res) => {
|
if (res.success) {
|
proxy.$message({
|
message: "注册成功",
|
type: "success",
|
});
|
}
|
});
|
|
getListData();
|
} else {
|
return false;
|
}
|
});
|
};
|
|
//删除用户
|
// const handleDelete = async (val) => {
|
// const data = await deleteUser(val.id);
|
// proxy.$message({
|
// message: "删除",
|
// type: "success",
|
// });
|
// getListData();
|
// };
|
|
// 编辑用户
|
const selectedDep = ref([]);
|
const handleEdit = async (val, type) => {
|
if (type == "edit") {
|
drawertitle.value = "编辑用户";
|
isDisabled.value = false;
|
isAdd.value = false;
|
isEdit.value = true;
|
} else if (type == "info") {
|
drawertitle.value = "用户详情";
|
isEdit.value = false;
|
isAdd.value = false;
|
isDisabled.value = true;
|
}
|
ruleForm.id = val.id;
|
ruleForm.username = val.username;
|
ruleForm.realname = val.realname;
|
ruleForm.workNo = val.workNo;
|
ruleForm.userIdentity = val.userIdentity;
|
ruleForm.phone = val.phone;
|
ruleForm.activitiSync = val.activitiSync;
|
dialog.value = true;
|
getRoleList(); //请求角色列表
|
getDepList(); //请求部门列表
|
try {
|
const userRole = await queryUserRole({
|
userid: val.id,
|
_T: new Date().getTime(),
|
});
|
ruleForm.selectedroles = userRole.result[0]; //角色
|
} catch (error) {}
|
try {
|
const userDep = await queryUserDepart({
|
userId: val.id,
|
_T: new Date().getTime(),
|
});
|
let newArr = userDep.result.map((item) => {
|
return item.value;
|
});
|
ruleForm.selecteddeparts = newArr;
|
newArr = [];
|
} catch {}
|
};
|
const editUser = (formEl) => {
|
if (!formEl) return;
|
formEl.validate((valid) => {
|
if (valid) {
|
let user = {
|
id: ruleForm.id,
|
username: ruleForm.username,
|
realname: ruleForm.realname,
|
workNo: ruleForm.workNo,
|
selecteddeparts: ruleForm.selecteddeparts.join(","),
|
selectedroles: ruleForm.selectedroles,
|
userIdentity: ruleForm.userIdentity,
|
phone: ruleForm.phone,
|
activitiSync: ruleForm.activitiSync,
|
departIds: "",
|
};
|
edit(user).then((res) => {
|
if (res.success) {
|
proxy.$message({
|
message: "修改成功",
|
type: "success",
|
});
|
dialog.value = true;
|
}
|
});
|
getListData();
|
} else {
|
return false;
|
}
|
});
|
};
|
|
// 冻结
|
const frozen = async (val) => {
|
const data = await frozenBatch({ ids: val.id, status: 2 });
|
proxy.$message({
|
message: "账号冻结成功",
|
type: "success",
|
});
|
getListData();
|
};
|
// 解冻
|
const thaw = async (val) => {
|
const data = await frozenBatch({ ids: val.id, status: 1 });
|
proxy.$message({
|
message: "账号解冻成功",
|
type: "success",
|
});
|
getListData();
|
};
|
|
// 修改密码
|
const editFormVisible = ref(false);
|
|
const changePass = (val) => {
|
ruleForm.username = val.username;
|
editFormVisible.value = true;
|
};
|
const changePassword = async (formEl) => {
|
if (!formEl) return;
|
formEl.validate((valid) => {
|
if (valid) {
|
let user = {
|
username: ruleForm.username,
|
password: ruleForm.password,
|
confirmPassword: ruleForm.confirmPassword,
|
};
|
modifyPassword(user).then((res) => {
|
if (res.code == 200) {
|
proxy.$message({
|
message: res.message,
|
type: "success",
|
});
|
}
|
});
|
getListData();
|
} else {
|
return false;
|
}
|
});
|
};
|
|
// 请求部门列表
|
const depOptions = ref([]);
|
const getDepList = async () => {
|
const depData = await DepartListAll();
|
depOptions.value = depData.result;
|
};
|
//请求用户列表方法
|
const getListData = async () => {
|
const data = await userList(pageData.ListData);
|
tableData.value = data.result.records;
|
pageData.total = Math.ceil(
|
data.result.total / pageData.ListData.pageSize
|
);
|
};
|
// 请求角色列表
|
const RoleOptions = ref([]);
|
const getRoleList = async () => {
|
const data = await RoleListAll({
|
PageNo: 1,
|
pageSize: 100,
|
_t: new Date().getTime(),
|
});
|
RoleOptions.value = data.result.records;
|
};
|
// 分页器
|
const handleCurrentChange = (val) => {
|
pageData.ListData.pageNo = val;
|
getListData();
|
};
|
//进入页面，就会被调用
|
getListData();
|
|
return {
|
selectedDep,
|
RoleOptions,
|
depOptions,
|
selectheight,
|
selectOptionWidth,
|
setOptionWidth,
|
isEdit,
|
isAdd,
|
isDisabled,
|
queryFormdata,
|
queryInfo,
|
pageData,
|
handleAdd,
|
tableData,
|
handleEdit,
|
dialog,
|
drawerRef,
|
handleClose,
|
ruleFormRef,
|
editForm,
|
rules,
|
ruleForm,
|
handleCurrentChange,
|
// handleDelete,
|
frozen,
|
thaw,
|
addUser,
|
deleteUser,
|
modifyPassword,
|
editUser,
|
changePass,
|
changePassword,
|
drawertitle,
|
editFormVisible,
|
};
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.addWidth {
|
width: 20% !important;
|
min-width: 100px !important;
|
}
|
.page {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 20px;
|
}
|
.header_nox {
|
// text-align: right;
|
}
|
|
.el-dropdown-link {
|
margin-top: 4px;
|
cursor: pointer;
|
color: var(--el-color-primary);
|
display: flex;
|
align-items: center;
|
}
|
.demo-drawer__footer {
|
display: flex;
|
justify-content: flex-end;
|
}
|
</style>
|
