From 85c54d88f139096614aea4b06f2166cae27729d7 Mon Sep 17 00:00:00 2001
From: zhangwei <1504152376@qq.com>
Date: 星期五, 22 八月 2025 10:11:19 +0800
Subject: [PATCH] 用户管理
---
src/views/system/user/utils/hook.tsx | 345 +++++++++++++++++++++++++++++++++++----------------------
1 files changed, 211 insertions(+), 134 deletions(-)
diff --git a/src/views/system/user/utils/hook.tsx b/src/views/system/user/utils/hook.tsx
index ba17db1..793239f 100644
--- a/src/views/system/user/utils/hook.tsx
+++ b/src/views/system/user/utils/hook.tsx
@@ -2,14 +2,14 @@
import dayjs from "dayjs";
import roleForm from "../form/role.vue";
import editForm from "../form/index.vue";
-import { zxcvbn } from "@zxcvbn-ts/core";
+// import { zxcvbn } from "@zxcvbn-ts/core";
import { handleTree } from "@/utils/tree";
import { message } from "@/utils/message";
import userAvatar from "@/assets/user.jpg";
import { usePublicHooks } from "../../hooks";
import { addDialog } from "@/components/ReDialog";
import type { PaginationProps } from "@pureadmin/table";
-import ReCropperPreview from "@/components/ReCropperPreview";
+// import ReCropperPreview from "@/components/ReCropperPreview";
import type { FormItemProps, RoleFormItemProps } from "../utils/types";
import {
getKeyList,
@@ -18,17 +18,20 @@
deviceDetection
} from "@pureadmin/utils";
import {
- getRoleIds,
- getDeptList,
getUserList,
- getAllRoleList
+ creatCustormerUsers,
+ changeManager,
+ updataCustormerUsers,
+ delCustormerUsers
} from "@/api/system";
import {
ElForm,
ElInput,
ElFormItem,
ElProgress,
- ElMessageBox
+ ElMessageBox,
+ Elpopover,
+ ElText
} from "element-plus";
import {
type Ref,
@@ -44,10 +47,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,96 +70,114 @@
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: "鐢ㄦ埛鍚嶇О",
- prop: "username",
+ label: "濮撳悕",
+ prop: "name",
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: "nickname",
- minWidth: 130
- },
- {
- label: "鎬у埆",
- prop: "sex",
+ label: "瑙掕壊",
+ prop: "isManager",
minWidth: 90,
- cellRenderer: ({ row, props }) => (
- <el-tag
- size={props.size}
- type={row.sex === 1 ? "danger" : null}
- effect="plain"
- >
- {row.sex === 1 ? "濂�" : "鐢�"}
- </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: "鎵嬫満鍙风爜",
- prop: "phone",
+ prop: "phoneNumber",
minWidth: 90,
- formatter: ({ phone }) => hideTextAtIndex(phone, { start: 3, end: 6 })
+ formatter: ({ phoneNumber }) =>
+ 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"
}
];
@@ -226,14 +246,60 @@
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);
}
function handleDelete(row) {
- message(`鎮ㄥ垹闄や簡鐢ㄦ埛缂栧彿涓�${row.id}鐨勮繖鏉℃暟鎹甡, { type: "success" });
- onSearch();
+ delCustormerUsers({ custormerUserId: row.id }).then(res => {
+ if (res.code == 200) {
+ message("鍒犻櫎鎴愬姛锛�", {
+ type: "success"
+ });
+ onSearch();
+ } else {
+ message(res.message || "鍒犻櫎澶辫触锛�", {
+ type: "error"
+ });
+ }
+ });
}
function handleSizeChange(val: number) {
@@ -272,27 +338,25 @@
async function onSearch() {
loading.value = true;
- const { data } = await getUserList(toRaw(form));
- dataList.value = data.list;
- pagination.total = data.total;
- pagination.pageSize = data.pageSize;
- pagination.currentPage = data.currentPage;
+ const { result } = await getUserList();
+ dataList.value = result;
+ // pagination.total = data.total;
+ // pagination.pageSize = data.pageSize;
+ // pagination.currentPage = data.currentPage;
- setTimeout(() => {
- loading.value = false;
- }, 500);
+ // setTimeout(() => {
+ loading.value = false;
+ // }, 500);
}
const resetForm = formEl => {
if (!formEl) return;
formEl.resetFields();
- form.deptId = "";
treeRef.value.onTreeReset();
onSearch();
};
function onTreeSelect({ id, selected }) {
- form.deptId = selected ? id : "";
onSearch();
}
@@ -315,15 +379,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%",
@@ -335,10 +402,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(); // 鍒锋柊琛ㄦ牸鏁版嵁
}
@@ -361,33 +440,32 @@
const cropRef = ref();
/** 涓婁紶澶村儚 */
- function handleUpload(row) {
- addDialog({
- title: "瑁佸壀銆佷笂浼犲ご鍍�",
- width: "40%",
- closeOnClickModal: false,
- fullscreen: deviceDetection(),
- contentRenderer: () =>
- h(ReCropperPreview, {
- ref: cropRef,
- imgSrc: row.avatar || userAvatar,
- onCropper: info => (avatarInfo.value = info)
- }),
- beforeSure: done => {
- console.log("瑁佸壀鍚庣殑鍥剧墖淇℃伅锛�", avatarInfo.value);
- // 鏍规嵁瀹為檯涓氬姟浣跨敤avatarInfo.value鍜宺ow閲岀殑鏌愪簺瀛楁鍘昏皟鐢ㄤ笂浼犲ご鍍忔帴鍙ｅ嵆鍙�
- done(); // 鍏抽棴寮规
- onSearch(); // 鍒锋柊琛ㄦ牸鏁版嵁
- },
- closeCallBack: () => cropRef.value.hidePopover()
- });
- }
+ // function handleUpload(row) {
+ // addDialog({
+ // title: "瑁佸壀銆佷笂浼犲ご鍍�",
+ // width: "40%",
+ // closeOnClickModal: false,
+ // fullscreen: deviceDetection(),
+ // contentRenderer: () =>
+ // h(ReCropperPreview, {
+ // ref: cropRef,
+ // imgSrc: row.avatar || userAvatar,
+ // onCropper: info => (avatarInfo.value = info)
+ // }),
+ // beforeSure: done => {
+ // console.log("瑁佸壀鍚庣殑鍥剧墖淇℃伅锛�", avatarInfo.value);
+ // // 鏍规嵁瀹為檯涓氬姟浣跨敤avatarInfo.value鍜宺ow閲岀殑鏌愪簺瀛楁鍘昏皟鐢ㄤ笂浼犲ご鍍忔帴鍙ｅ嵆鍙�
+ // done(); // 鍏抽棴寮规
+ // onSearch(); // 鍒锋柊琛ㄦ牸鏁版嵁
+ // },
+ // closeCallBack: () => cropRef.value.hidePopover()
+ // });
+ // }
- watch(
- pwdForm,
- ({ newPwd }) =>
- (curScore.value = isAllEmpty(newPwd) ? -1 : zxcvbn(newPwd).score)
- );
+ // watch();
+ // pwdForm
+ // ({ newPwd }) =>
+ // (curScore.value = isAllEmpty(newPwd) ? -1 : zxcvbn(newPwd).score)
/** 閲嶇疆瀵嗙爜 */
function handleReset(row) {
@@ -466,7 +544,6 @@
/** 鍒嗛厤瑙掕壊 */
async function handleRole(row) {
// 閫変腑鐨勮鑹插垪琛�
- const ids = (await getRoleIds({ userId: row.id })).data ?? [];
addDialog({
title: `鍒嗛厤 ${row.username} 鐢ㄦ埛鐨勮鑹瞏,
props: {
@@ -497,13 +574,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 {
@@ -524,7 +601,7 @@
onTreeSelect,
handleUpdate,
handleDelete,
- handleUpload,
+ // handleUpload,
handleReset,
handleRole,
handleSizeChange,
--
Gitblit v1.9.1