From 115769e9ad3ddc64e21ad7285450c4c563c745ed Mon Sep 17 00:00:00 2001
From: zhangwei <1504152376@qq.com>
Date: 星期三, 20 八月 2025 17:20:29 +0800
Subject: [PATCH] 用户管理页面
---
src/views/system/user/utils/hook.tsx | 247 +++++++++++++++++++++++++++++++-----------------
1 files changed, 158 insertions(+), 89 deletions(-)
diff --git a/src/views/system/user/utils/hook.tsx b/src/views/system/user/utils/hook.tsx
index 1a1a03c..30ab3dd 100644
--- a/src/views/system/user/utils/hook.tsx
+++ b/src/views/system/user/utils/hook.tsx
@@ -21,6 +21,9 @@
getRoleIds,
getDeptList,
getUserList,
+ creatCustormerUsers,
+ changeManager,
+ updataCustormerUsers,
getAllRoleList
} from "@/api/system";
import {
@@ -28,7 +31,9 @@
ElInput,
ElFormItem,
ElProgress,
- ElMessageBox
+ ElMessageBox,
+ Elpopover,
+ ElText
} from "element-plus";
import {
type Ref,
@@ -44,10 +49,9 @@
export function useUser(tableRef: Ref, treeRef: Ref) {
const form = reactive({
// 宸︿晶閮ㄩ棬鏍戠殑id
- deptId: "",
- username: "",
- phone: "",
- status: ""
+ name: "",
+ phoneNumber: "",
+ isEn: true
});
const formRef = ref();
const ruleFormRef = ref();
@@ -68,59 +72,64 @@
background: true
});
const columns: TableColumnList = [
+ // {
+ // label: "鍕鹃�夊垪", // 濡傛灉闇�瑕佽〃鏍煎閫夛紝姝ゅlabel蹇呴』璁剧疆
+ // type: "selection",
+ // fixed: "left",
+ // reserveSelection: true // 鏁版嵁鍒锋柊鍚庝繚鐣欓�夐」
+ // },
{
- label: "鍕鹃�夊垪", // 濡傛灉闇�瑕佽〃鏍煎閫夛紝姝ゅlabel蹇呴』璁剧疆
- type: "selection",
- fixed: "left",
- reserveSelection: true // 鏁版嵁鍒锋柊鍚庝繚鐣欓�夐」
- },
- {
- label: "鐢ㄦ埛缂栧彿",
- prop: "id",
- width: 90
- },
- {
- label: "鐢ㄦ埛澶村儚",
- prop: "avatar",
- cellRenderer: ({ row }) => (
- <el-image
- fit="cover"
- preview-teleported={true}
- src={row.avatar || userAvatar}
- preview-src-list={Array.of(row.avatar || userAvatar)}
- class="w-[24px] h-[24px] rounded-full align-middle"
- />
- ),
- width: 90
- },
- {
- label: "鐢ㄦ埛鍚嶇О",
+ label: "濮撳悕",
prop: "name",
minWidth: 130
},
- {
- label: "鐢ㄦ埛鏄电О",
- prop: "nickname",
- minWidth: 130
- },
+ // {
+ // label: "鐢ㄦ埛澶村儚",
+ // prop: "avatar",
+ // cellRenderer: ({ row }) => (
+ // <el-image
+ // fit="cover"
+ // preview-teleported={true}
+ // src={row.avatar || userAvatar}
+ // preview-src-list={Array.of(row.avatar || userAvatar)}
+ // class="w-[24px] h-[24px] rounded-full align-middle"
+ // />
+ // ),
+ // width: 90
+ // },
+
+ // {
+ // label: "鐢ㄦ埛鏄电О",
+ // prop: "nickname",
+ // minWidth: 130
+ // },
{
label: "瑙掕壊",
prop: "isManager",
minWidth: 90,
- cellRenderer: ({ row, props }) => (
- <el-tag
- size={props.size}
- type={row.isManager ? "danger" : null}
- effect="plain"
- >
- {row.isManager ? "绠＄悊鍛�" : "鍛樺伐"}
- </el-tag>
+ cellRenderer: scope => (
+ <div>
+ {/* <el-tag
+ size={scope.props.size}
+ type={scope.row.isManager ? "danger" : null}
+ effect="plain"
+ >
+ {scope.row.isManager ? "绠＄悊鍛�" : "鍛樺伐"}
+ </el-tag> */}
+ <el-switch
+ size={scope.props.size === "small" ? "small" : "default"}
+ loading={switchLoadMap.value[scope.index]?.loading}
+ v-model={scope.row.isManager}
+ active-value={true}
+ inactive-value={false}
+ active-text="绠＄悊鍛�"
+ inactive-text="鍛樺伐"
+ inline-prompt
+ style={switchStyle.value}
+ onChange={() => onManagerChange(scope as any)}
+ />
+ </div>
)
- },
- {
- label: "閮ㄩ棬",
- prop: "dept.name",
- minWidth: 90
},
{
label: "鎵嬫満鍙风爜",
@@ -130,35 +139,47 @@
hideTextAtIndex(phoneNumber, { start: 3, end: 6 })
},
{
- label: "鐘舵��",
- prop: "status",
+ label: "鏄惁鍚敤",
+ prop: "isEn",
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
- style={switchStyle.value}
- onChange={() => onChange(scope as any)}
- />
+ <el-tag
+ size={scope.props.size}
+ type={scope.row.isEn ? null : "danger"}
+ effect="plain"
+ >
+ {scope.row.isEn ? "鏄�" : "鍚�"}
+ </el-tag>
+ // <el-switch
+ // size={scope.props.size === "small" ? "small" : "default"}
+ // loading={switchLoadMap.value[scope.index]?.loading}
+ // v-model={scope.row.isEn}
+ // active-value={true}
+ // inactive-value={false}
+ // active-text="宸插惎鐢�"
+ // inactive-text="宸插仠鐢�"
+ // inline-prompt
+ // style={switchStyle.value}
+ // onChange={() => onChange(scope as any)}
+ // />
)
},
{
label: "鍒涘缓鏃堕棿",
- minWidth: 90,
+ width: 160,
prop: "createTime",
- formatter: ({ createTime }) =>
- dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+ formatter: ({ createTime }) => dayjs(createTime).format("YYYY-MM-DD")
+ },
+ {
+ label: "澶囨敞",
+ prop: "remarks",
+ width: 180,
+ cellRenderer: scope => <el-text truncated>{scope.row.remarks}</el-text>
},
{
label: "鎿嶄綔",
fixed: "right",
- width: 180,
+ width: 80,
slot: "operation"
}
];
@@ -227,6 +248,42 @@
row.status === 0 ? (row.status = 1) : (row.status = 0);
});
}
+ function onManagerChange({ row, index }) {
+ ElMessageBox.confirm(
+ `纭瑕佽缃�<strong style='color:var(--el-color-primary)'>${
+ row.name
+ }</strong>鐢ㄦ埛涓�<strong>${
+ row.isManager === true ? "绠＄悊鍛�" : "鍛樺伐"
+ }</strong>鍚�?`,
+ "鏇存敼鏉冮檺",
+ {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ dangerouslyUseHTMLString: true,
+ draggable: true
+ }
+ )
+ .then(() => {
+ changeManager({ custormerUserId: row.id }).then(res => {
+ if (res.code == 200) {
+ message("璁剧疆鎴愬姛锛�", {
+ type: "success"
+ });
+ } else {
+ message(res.message || "璁剧疆澶辫触锛�", {
+ type: "error"
+ });
+ }
+ onSearch();
+ });
+ })
+ .catch(() => {
+ row.isManager === true
+ ? (row.isManager = false)
+ : (row.isManager = true);
+ });
+ }
function handleUpdate(row) {
console.log(row);
@@ -273,7 +330,7 @@
async function onSearch() {
loading.value = true;
- const { result } = await getUserList(toRaw(form));
+ const { result } = await getUserList();
dataList.value = result;
// pagination.total = data.total;
// pagination.pageSize = data.pageSize;
@@ -287,13 +344,11 @@
const resetForm = formEl => {
if (!formEl) return;
formEl.resetFields();
- form.deptId = "";
treeRef.value.onTreeReset();
onSearch();
};
function onTreeSelect({ id, selected }) {
- form.deptId = selected ? id : "";
onSearch();
}
@@ -316,15 +371,18 @@
formInline: {
title,
higherDeptOptions: formatHigherDeptOptions(higherDeptOptions.value),
- parentId: row?.dept.id ?? 0,
+ id: row?.id ?? null,
+ cusExtendId: row?.cusExtendId ?? dataList.value[0].cusExtendId,
+ name: row?.name ?? "",
nickname: row?.nickname ?? "",
- username: row?.username ?? "",
- password: row?.password ?? "",
- phone: row?.phone ?? "",
- email: row?.email ?? "",
- sex: row?.sex ?? "",
- status: row?.status ?? 1,
- remark: row?.remark ?? ""
+ phoneNumber: row?.phoneNumber ?? "",
+ remarks: row?.remarks ?? "",
+ jobTitle: row?.jobTitle ?? "",
+ avatar: row?.avatar ?? "",
+ isEn: row?.isEn ?? true,
+ passWord: row?.passWord ?? "",
+ isManager: row?.isManager ?? false,
+ signature: row?.signature ?? ""
}
},
width: "46%",
@@ -336,10 +394,22 @@
beforeSure: (done, { options }) => {
const FormRef = formRef.value.getRef();
const curData = options.props.formInline as FormItemProps;
- function chores() {
- message(`鎮�${title}浜嗙敤鎴峰悕绉颁负${curData.username}鐨勮繖鏉℃暟鎹甡, {
- type: "success"
- });
+ async function chores() {
+ let res;
+ if (title == "鏂板") {
+ res = await creatCustormerUsers(curData);
+ } else {
+ res = await updataCustormerUsers(curData);
+ }
+ if (res.code != "200") {
+ message(res.message, {
+ type: "error"
+ });
+ } else {
+ message(`${title}鎴愬姛锛乣, {
+ type: "success"
+ });
+ }
done(); // 鍏抽棴寮规
onSearch(); // 鍒锋柊琛ㄦ牸鏁版嵁
}
@@ -384,7 +454,7 @@
// });
// }
- watch();
+ // watch();
// pwdForm
// ({ newPwd }) =>
// (curScore.value = isAllEmpty(newPwd) ? -1 : zxcvbn(newPwd).score)
@@ -466,7 +536,6 @@
/** 鍒嗛厤瑙掕壊 */
async function handleRole(row) {
// 閫変腑鐨勮鑹插垪琛�
- const ids = (await getRoleIds({ userId: row.id })).data ?? [];
addDialog({
title: `鍒嗛厤 ${row.username} 鐢ㄦ埛鐨勮鑹瞏,
props: {
@@ -497,13 +566,13 @@
onSearch();
// 褰掑睘閮ㄩ棬
- const { data } = await getDeptList();
- higherDeptOptions.value = handleTree(data);
- treeData.value = handleTree(data);
- treeLoading.value = false;
+ // const { data } = await getDeptList();
+ // higherDeptOptions.value = handleTree(data);
+ // treeData.value = handleTree(data);
+ // treeLoading.value = false;
// 瑙掕壊鍒楄〃
- roleOptions.value = (await getAllRoleList()).data;
+ // roleOptions.value = (await getAllRoleList()).data;
});
return {
--
Gitblit v1.9.1