|
|
// import dayjs from "dayjs";
|
|
|
import { message } from "@/utils/message";
|
|
|
import editForm from "../form.vue";
|
|
|
import { addDialog } from "@/components/ReDialog";
|
|
|
import { type FormItemProps } from "../utils/types";
|
|
|
import {
|
|
|
getUserList,
|
|
|
getDeptList,
|
|
|
addUser,
|
|
|
updateUser,
|
|
|
deleteUser
|
|
|
} from "@/api/system";
|
|
|
import { ElMessageBox } from "element-plus";
|
|
|
import { type PaginationProps } from "@pureadmin/table";
|
|
|
import { reactive, ref, computed, h, onMounted } from "vue";
|
|
|
// import { http } from "@/utils/http";
|
|
|
import { string } from "vue-types";
|
|
|
import { cloneDeep } from "@pureadmin/utils";
|
|
|
|
|
|
// 共享列表数据
|
|
|
const dataList = ref([]);
|
|
|
|
|
|
// 共享表格页码
|
|
|
const pagination = reactive<PaginationProps>({
|
|
|
total: 0,
|
|
|
pageSize: 10,
|
|
|
currentPage: 1,
|
|
|
background: true
|
|
|
});
|
|
|
|
|
|
export function useUser() {
|
|
|
const form = reactive({
|
|
|
/** 角色名称 */
|
|
|
username: "",
|
|
|
/** 手机号 */
|
|
|
phone_number: "",
|
|
|
/** 状态 */
|
|
|
status: "",
|
|
|
/** 部门 */
|
|
|
department_id: ""
|
|
|
});
|
|
|
const formRef = ref();
|
|
|
|
|
|
const loading = ref(true);
|
|
|
const switchLoadMap = ref({});
|
|
|
|
|
|
const columns: TableColumnList = [
|
|
|
{
|
|
|
label: "序号",
|
|
|
type: "index",
|
|
|
width: 70,
|
|
|
fixed: "left"
|
|
|
},
|
|
|
// {
|
|
|
// label: "用户编号",
|
|
|
// prop: "id",
|
|
|
// minWidth: 130
|
|
|
// },
|
|
|
{
|
|
|
label: "用户名称",
|
|
|
prop: "username",
|
|
|
minWidth: 130
|
|
|
},
|
|
|
// {
|
|
|
// label: "用户昵称",
|
|
|
// prop: "nickname",
|
|
|
// minWidth: 130
|
|
|
// },
|
|
|
{
|
|
|
label: "性别",
|
|
|
prop: "gender",
|
|
|
minWidth: 90,
|
|
|
cellRenderer: ({ row, props }) => (
|
|
|
<el-tag
|
|
|
size={props.size}
|
|
|
type={row.gender === 1 ? "" : "danger"}
|
|
|
effect="plain"
|
|
|
>
|
|
|
{row.gender === 1 ? "男" : "女"}
|
|
|
</el-tag>
|
|
|
)
|
|
|
},
|
|
|
{
|
|
|
label: "部门",
|
|
|
prop: "department_name",
|
|
|
minWidth: 90
|
|
|
// formatter: ({ dept }) => dept.name
|
|
|
},
|
|
|
{
|
|
|
label: "手机号码",
|
|
|
prop: "phone_number",
|
|
|
minWidth: 90
|
|
|
},
|
|
|
{
|
|
|
label: "状态",
|
|
|
prop: "status",
|
|
|
minWidth: 90,
|
|
|
cellRenderer: scope => (
|
|
|
<el-switch
|
|
|
size={scope.props.size === "small" ? "small" : "default"}
|
|
|
loading={switchLoadMap.value[scope.index]?.loading}
|
|
|
v-model={scope.row.status}
|
|
|
active-value={1}
|
|
|
inactive-value={0}
|
|
|
active-text="已开启"
|
|
|
inactive-text="已关闭"
|
|
|
inline-prompt
|
|
|
onChange={() => onChange(scope as any)}
|
|
|
/>
|
|
|
)
|
|
|
},
|
|
|
{
|
|
|
label: "创建时间",
|
|
|
minWidth: 90,
|
|
|
prop: "date_joined"
|
|
|
},
|
|
|
{
|
|
|
label: "操作",
|
|
|
fixed: "right",
|
|
|
width: 180,
|
|
|
slot: "operation"
|
|
|
}
|
|
|
];
|
|
|
const buttonClass = computed(() => {
|
|
|
return [
|
|
|
"!h-[20px]",
|
|
|
"reset-margin",
|
|
|
"!text-gray-500",
|
|
|
"dark:!text-white",
|
|
|
"dark:hover:!text-primary"
|
|
|
];
|
|
|
});
|
|
|
|
|
|
function onChange({ row, index }) {
|
|
|
ElMessageBox.confirm(
|
|
|
`确认要<strong>${
|
|
|
row.status === 0 ? "停用" : "启用"
|
|
|
}</strong><strong style='color:var(--el-color-primary)'>${
|
|
|
row.username
|
|
|
}</strong>用户吗?`,
|
|
|
"系统提示",
|
|
|
{
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
type: "warning",
|
|
|
dangerouslyUseHTMLString: true,
|
|
|
draggable: true
|
|
|
}
|
|
|
)
|
|
|
.then(() => {
|
|
|
const params = {
|
|
|
department_id: row.department_id,
|
|
|
username: row.username,
|
|
|
phone_number: row.phone_number,
|
|
|
status: row.status,
|
|
|
gender: row.gender,
|
|
|
id: row.id
|
|
|
};
|
|
|
updateUser(params).then(res => {
|
|
|
if (res.success) {
|
|
|
setTimeout(() => {
|
|
|
switchLoadMap.value[index] = Object.assign(
|
|
|
{},
|
|
|
switchLoadMap.value[index],
|
|
|
{
|
|
|
loading: false
|
|
|
}
|
|
|
);
|
|
|
message("已成功修改用户状态", {
|
|
|
type: "success"
|
|
|
});
|
|
|
}, 300);
|
|
|
} else {
|
|
|
row.status === 0 ? (row.status = 1) : (row.status = 0);
|
|
|
message(`${res.msg}`, {
|
|
|
type: "warning"
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
// switchLoadMap.value[index] = Object.assign(
|
|
|
// {},
|
|
|
// switchLoadMap.value[index],
|
|
|
// {
|
|
|
// loading: true
|
|
|
|
|
|
// }
|
|
|
// );
|
|
|
})
|
|
|
.catch(() => {
|
|
|
row.status === 0 ? (row.status = 1) : (row.status = 0);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function handleUpdate(row) {
|
|
|
console.log(row);
|
|
|
openDialog("编辑", row);
|
|
|
}
|
|
|
|
|
|
function handleDelete(row) {
|
|
|
// const deleteListData = userList.value.list.filter(
|
|
|
// item => item.id !== row.id
|
|
|
// );
|
|
|
// userList.value.list = deleteListData;
|
|
|
deleteUser(row.id).then(res => {
|
|
|
if (!res.success) {
|
|
|
message(`${res.msg}`, {
|
|
|
type: "warning"
|
|
|
});
|
|
|
} else {
|
|
|
message(`您删除了角色名称为${row.username}的这条数据`, {
|
|
|
type: "success"
|
|
|
});
|
|
|
onSearch();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function handleSizeChange() {
|
|
|
onSearch();
|
|
|
}
|
|
|
|
|
|
function handleCurrentChange() {
|
|
|
onSearch();
|
|
|
}
|
|
|
|
|
|
function handleSelectionChange(val) {
|
|
|
console.log("handleSelectionChange", val);
|
|
|
}
|
|
|
|
|
|
// function getUserList() {
|
|
|
// // http.request("post", "/login")
|
|
|
// return userList;
|
|
|
// }
|
|
|
const deptList = ref([]);
|
|
|
async function onSearch() {
|
|
|
loading.value = true;
|
|
|
const params = {
|
|
|
...form,
|
|
|
page: pagination.currentPage || undefined,
|
|
|
page_size: pagination.pageSize || undefined
|
|
|
};
|
|
|
const data = await getUserList(params);
|
|
|
await getDeptList().then(res => {
|
|
|
deptList.value = res.data;
|
|
|
});
|
|
|
dataList.value = data.results;
|
|
|
pagination.total = data.count;
|
|
|
setTimeout(() => {
|
|
|
loading.value = false;
|
|
|
}, 500);
|
|
|
}
|
|
|
|
|
|
const resetForm = formEl => {
|
|
|
if (!formEl) return;
|
|
|
formEl.resetFields();
|
|
|
onSearch();
|
|
|
};
|
|
|
function openDialog(title = "新增", row?: FormItemProps) {
|
|
|
addDialog({
|
|
|
title: `${title}用户`,
|
|
|
props: {
|
|
|
formInline: {
|
|
|
higherDeptOptions: cloneDeep(deptList.value),
|
|
|
department_id: row?.department_id ?? "",
|
|
|
username: row?.username ?? "",
|
|
|
phone_number: row?.phone_number ?? "",
|
|
|
status: row?.status ?? 1,
|
|
|
gender: row?.gender ?? null,
|
|
|
id: row?.id ?? ""
|
|
|
}
|
|
|
},
|
|
|
width: "40%",
|
|
|
draggable: true,
|
|
|
fullscreenIcon: true,
|
|
|
closeOnClickModal: false,
|
|
|
contentRenderer: () => h(editForm, { ref: formRef }),
|
|
|
beforeSure: (done, { options }) => {
|
|
|
const FormRef = formRef.value.getRef();
|
|
|
const curData = options.props.formInline as FormItemProps;
|
|
|
function chores() {
|
|
|
message(`您${title}了用户名称为${curData.username}的这条数据`, {
|
|
|
type: "success"
|
|
|
});
|
|
|
done(); // 关闭弹框
|
|
|
onSearch(); // 刷新表格数据
|
|
|
}
|
|
|
FormRef.validate(valid => {
|
|
|
if (valid) {
|
|
|
console.log("curData", curData);
|
|
|
// 表单规则校验通过
|
|
|
if (title === "新增") {
|
|
|
// 实际开发先调用新增接口，再进行下面操作
|
|
|
addUser(curData).then(res => {
|
|
|
console.log(res);
|
|
|
if (res.success) {
|
|
|
chores();
|
|
|
} else {
|
|
|
message(`${res.msg}`, {
|
|
|
type: "warning"
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
} else {
|
|
|
const params = {
|
|
|
department_id: curData.department_id,
|
|
|
username: curData.username,
|
|
|
phone_number: curData.phone_number,
|
|
|
status: curData.status,
|
|
|
gender: curData.gender,
|
|
|
id: curData.id
|
|
|
};
|
|
|
updateUser(params)
|
|
|
.then(res => {
|
|
|
console.log(res);
|
|
|
if (res.success) {
|
|
|
chores();
|
|
|
} else {
|
|
|
message(`${res.msg}`, {
|
|
|
type: "warning"
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
.catch(error => {
|
|
|
message(`${error}`, {
|
|
|
type: "warning"
|
|
|
});
|
|
|
});
|
|
|
// 实际开发先调用编辑接口，再进行下面操作
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
const formData = reactive({
|
|
|
username: string
|
|
|
});
|
|
|
const drawerShow = ref(null);
|
|
|
const checkAll = ref(false);
|
|
|
const allRole = ref([]);
|
|
|
const userRole = ref([]);
|
|
|
function setRole(row) {
|
|
|
Object.assign(formData, row);
|
|
|
Object.assign(allRole.value, [
|
|
|
{
|
|
|
createTime: "2021-05-31 18:09:18",
|
|
|
id: 1,
|
|
|
remark: null,
|
|
|
roleName: "超级管理员",
|
|
|
updateTime: "2023-04-28 11:03:38"
|
|
|
},
|
|
|
{
|
|
|
createTime: "2021-05-31 18:09:18",
|
|
|
id: 1,
|
|
|
remark: null,
|
|
|
roleName: "普通角色",
|
|
|
updateTime: "2023-04-28 11:03:38"
|
|
|
}
|
|
|
]);
|
|
|
Object.assign(userRole.value, [
|
|
|
{
|
|
|
createTime: "2021-05-31 18:09:18",
|
|
|
id: 1,
|
|
|
remark: null,
|
|
|
roleName: "超级管理员",
|
|
|
updateTime: "2023-04-28 11:03:38"
|
|
|
}
|
|
|
]);
|
|
|
console.log(allRole);
|
|
|
drawerShow.value = true;
|
|
|
}
|
|
|
function confirmClick() {
|
|
|
drawerShow.value = false;
|
|
|
}
|
|
|
//控制顶部全选复选框不确定的样式
|
|
|
|
|
|
const isIndeterminate = ref(true);
|
|
|
//顶部的全部复选框的change事件
|
|
|
function handleCheckAllChange(val: boolean) {
|
|
|
// console.log(val);
|
|
|
// console.log(allRole.value);
|
|
|
//val:true(全选)|false(没有全选)
|
|
|
userRole.value = val ? allRole.value : [];
|
|
|
//不确定的样式(确定样式)
|
|
|
isIndeterminate.value = false;
|
|
|
}
|
|
|
//顶部全部的复选框的change事件
|
|
|
function handleCheckedCitiesChange(value: string[]) {
|
|
|
console.log(value);
|
|
|
//顶部复选框的勾选数据
|
|
|
//代表:勾选上的项目个数与全部的职位个数相等，顶部的复选框勾选上
|
|
|
checkAll.value = value.length === allRole.value.length;
|
|
|
//不确定的样式
|
|
|
isIndeterminate.value = value.length !== allRole.value.length;
|
|
|
}
|
|
|
|
|
|
/** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
|
|
|
const REGEXP_PWD =
|
|
|
/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
|
|
|
|
|
|
function resetPassword(row: { username: string; id: any }) {
|
|
|
ElMessageBox.prompt(
|
|
|
"请输入用户「" + row.username + "」的新密码",
|
|
|
"重置密码",
|
|
|
{
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
inputValidator: val => {
|
|
|
if (val === null) {
|
|
|
return true; //初始化的值为null，不做处理的话，刚打开MessageBox就会校验出错，影响用户体验
|
|
|
}
|
|
|
return REGEXP_PWD.test(val);
|
|
|
},
|
|
|
inputErrorMessage: "密码格式应为8-18位数字、字母、符号的任意两种组合"
|
|
|
}
|
|
|
)
|
|
|
.then(({ value }) => {
|
|
|
if (!value) {
|
|
|
message(`请输入新密码`, {
|
|
|
type: "warning"
|
|
|
});
|
|
|
return false;
|
|
|
} else {
|
|
|
const params = {
|
|
|
id: row.id,
|
|
|
password: value
|
|
|
};
|
|
|
updateUser(params)
|
|
|
.then(res => {
|
|
|
console.log(res);
|
|
|
if (res.success) {
|
|
|
message(`${res.msg}`, {
|
|
|
type: "success"
|
|
|
});
|
|
|
} else {
|
|
|
message(`${res.msg}`, {
|
|
|
type: "warning"
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
.catch(error => {
|
|
|
message(`${error}`, {
|
|
|
type: "warning"
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
onSearch();
|
|
|
});
|
|
|
|
|
|
return {
|
|
|
form,
|
|
|
loading,
|
|
|
columns,
|
|
|
dataList,
|
|
|
pagination,
|
|
|
buttonClass,
|
|
|
drawerShow,
|
|
|
formData,
|
|
|
allRole,
|
|
|
userRole,
|
|
|
setRole,
|
|
|
confirmClick,
|
|
|
handleCheckAllChange,
|
|
|
handleCheckedCitiesChange,
|
|
|
resetPassword,
|
|
|
onSearch,
|
|
|
openDialog,
|
|
|
resetForm,
|
|
|
handleUpdate,
|
|
|
handleDelete,
|
|
|
handleSizeChange,
|
|
|
handleCurrentChange,
|
|
|
handleSelectionChange
|
|
|
};
|
|
|
}
|