From e93166c8f5c542f04859fb6907b5dc153a0919de Mon Sep 17 00:00:00 2001 From: pdsuwwz Date: Tue, 27 Jun 2023 17:54:35 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=8A=20feat:=20update=20render=20column?= =?UTF-8?q?s=20for=20member=20index?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/MemberTeam/data/index.ts | 16 ++- src/modules/MemberTeam/pages/index.vue | 160 ++++++++++--------------- 2 files changed, 74 insertions(+), 102 deletions(-) diff --git a/src/modules/MemberTeam/data/index.ts b/src/modules/MemberTeam/data/index.ts index 4cccdc5..0d851f1 100644 --- a/src/modules/MemberTeam/data/index.ts +++ b/src/modules/MemberTeam/data/index.ts @@ -1,4 +1,8 @@ import { sleep } from '@/utils/request' +import { + PresenceAvailable10Regular, + PresenceBlocked10Regular +} from '@vicons/fluent' // 随机获取数组中某一项 function getRandomValueFromArray(arr: Array): T { @@ -77,11 +81,15 @@ export const findUserRoleMapByRankName = (targetRole) => { export const userStatusMap = [ { value: 1, - label: '活跃' + label: '活跃', + type: 'success', + icon: PresenceAvailable10Regular }, { value: 0, - label: '停用' + label: '停用', + type: 'default', + icon: PresenceBlocked10Regular } ] @@ -103,7 +111,9 @@ export interface TypeMemberPerson { email: string phone: string rank: string - // 1活跃, 0停用 + /** + * 1活跃, 0停用 + */ memberStatus: number | null | undefined } diff --git a/src/modules/MemberTeam/pages/index.vue b/src/modules/MemberTeam/pages/index.vue index fd14710..bd0104e 100755 --- a/src/modules/MemberTeam/pages/index.vue +++ b/src/modules/MemberTeam/pages/index.vue @@ -25,12 +25,17 @@ import { NTag, NIcon, NSpace, NButton, NPopconfirm, NDropdown } from 'naive-ui' import { memberTeamList, findUserRankMapByRankName, - findUserRoleMapByRankName + findUserRoleMapByRankName, + findUserStatusMapByRankName } from '@/modules/MemberTeam/data' import type { TypeMemberPerson } from '@/modules/MemberTeam/data' import { - MoreVertical20Regular as IconMoreVertical20Regular + MoreVertical20Regular as IconMoreVertical20Regular, + NotepadPerson24Regular as IconNotepadPerson24Regular, + PersonEdit24Regular as IconPersonEdit24Regular, + PersonDelete16Regular as IconPersonDelete16Regular } from '@vicons/fluent' +import { sleep } from '@/utils/request' /** * MemberTeamIndex 成员管理-团队成员列表 @@ -56,9 +61,9 @@ const pagination = reactive({ } }) -const renderIcon = (icon: Component) => { +const renderIcon = (icon: Component, className = '') => { return () => { - return h(NIcon, { class: 'cursor-pointer' }, { + return h(NIcon, { class: className }, { default: () => h(icon) }) } @@ -73,6 +78,7 @@ const createActionsColumns = (row: TypeMemberPerson) => { { label: '查看', key: 'preview', + icon: renderIcon(IconNotepadPerson24Regular), props: { onClick: () => { router.push({ @@ -87,6 +93,7 @@ const createActionsColumns = (row: TypeMemberPerson) => { { label: '编辑', key: 'edit', + icon: renderIcon(IconPersonEdit24Regular), props: { onClick: () => { router.push({ @@ -99,111 +106,42 @@ const createActionsColumns = (row: TypeMemberPerson) => { } }, { + label: '删除', key: 'remove', - type: 'render', - render() { - return h( - NPopconfirm, - { - onPositiveClick() { + icon: renderIcon(IconPersonDelete16Regular), + disabled: row.memberStatus === 1, + props: { + onClick: () => { + if (row.memberStatus === 1) return + + const d = window.$ModalDialog.warning({ + title: '警告', + content: `确定删除该成员: " ${row.username} "?`, + positiveText: '删除', + negativeText: '我再想想', + onPositiveClick: async () => { + d.loading = true + await sleep(400) window.$ModalMessage.success(`假删除成功: ${row.username}`) } - }, - { - trigger: () => h('div', { class: 'px-4px' }, - h( - NButton, - { - block: true, - quaternary: true, - size: 'small', - onClick: () => {} - }, - { default: () => '删除' } - ) - ), - default: () => '确定删除？' - } - ) + }) + } } } ] }, { - default: renderIcon(IconMoreVertical20Regular) + default: () => h( + NButton, + { + quaternary: true, + round: true, + size: 'tiny' + }, + renderIcon(IconMoreVertical20Regular, 'cursor-pointer') + ) } ) - - // return [ - // h( - // NSpace, - // { - // justify: 'center' - // }, - // { - // default: () => [ - // h( - // NButton, - // { - // type: 'info', - // strong: true, - // secondary: true, - // size: 'small', - // onClick: () => { - // router.push({ - // name: 'MemberTeamPreview', - // params: { - // datasetId: row.userId - // } - // }, `成员查看-${row.username}`) - // } - // }, - // { default: () => '查看' } - // ), - // h( - // NButton, - // { - // type: 'primary', - // strong: true, - // secondary: true, - // size: 'small', - // onClick: () => { - // router.push({ - // name: 'MemberTeamEdit', - // params: { - // datasetId: row.userId - // } - // }, `成员编辑-${row.username}`) - // } - // }, - // { default: () => '编辑' } - // ), - // h( - // NPopconfirm, - // { - // onPositiveClick() { - // window.$ModalMessage.success(`假删除成功: ${row.username}`) - // } - // }, - // { - // trigger: () => h( - // NButton, - // { - // type: 'warning', - // strong: true, - // secondary: true, - // size: 'small', - // onClick: () => {} - // }, - // { default: () => '删除' } - // ), - // default: () => '确定删除？' - // } - // ) - // ] - // } - // ) - // ] } const columns: DataTableColumns = [ @@ -265,6 +203,30 @@ const columns: DataTableColumns = [ align: 'center', width: 150 }, + { + title: '成员状态', + key: 'status', + align: 'center', + width: 60, + fixed: 'right', + render(row) { + const statusItem = findUserStatusMapByRankName(row.memberStatus) + return h( + NTag, + { + bordered: false, + round: true, + type: statusItem.type as any + }, + { + icon: renderIcon(statusItem.icon), + default: () => { + return statusItem.label + } + } + ) + } + }, { title: '操作列', key: 'actions',