feat: 完成客户端联调与通用列表组件
This commit is contained in:
+86
-66
@@ -1,26 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { KeyRound, Pencil, Plus, RotateCcw, Search, ShieldCheck, UserCheck, UserRoundX } from '@lucide/vue'
|
||||
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { KeyRound, Pencil, Plus } from '@lucide/vue'
|
||||
import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
|
||||
import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
|
||||
import { useTenantAdministrationStore, type TenantMember, type TenantRecordStatus } from '@/stores/tenantAdministration'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const store = useTenantAdministrationStore()
|
||||
const auth = useAuthStore()
|
||||
const keyword = ref('')
|
||||
const statusFilter = ref<TenantRecordStatus | ''>('')
|
||||
const memberFilters = ref({ keyword: '', status: '' as TenantRecordStatus | '' })
|
||||
const appliedMemberFilters = ref({ ...memberFilters.value })
|
||||
const memberPage = ref(1)
|
||||
const memberPageSize = ref(10)
|
||||
const editorOpen = ref(false)
|
||||
const editingId = ref('')
|
||||
const loading = ref(false)
|
||||
const loadError = ref('')
|
||||
const saving = ref(false)
|
||||
const formRef = ref<FormInstance>()
|
||||
const form = reactive({ name: '', account: '', password: '', phone: '', email: '', roleIds: [] as string[] })
|
||||
const memberRules: FormRules = {
|
||||
name: [{ required: true, message: '请输入成员姓名', trigger: 'blur' }],
|
||||
account: [
|
||||
{ required: true, message: '请输入登录账号', trigger: 'blur' },
|
||||
{ pattern: /^[A-Za-z0-9_.@-]{4,64}$/, message: '账号需为 4–64 位字母、数字或 _ . @ -', trigger: 'blur' },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入初始密码', trigger: 'blur' },
|
||||
{ pattern: /^(?=.*[A-Za-z])(?=.*\d).{8,64}$/, message: '密码需为 8–64 位，并同时包含字母和数字', trigger: 'blur' },
|
||||
],
|
||||
phone: [{ max: 32, message: '联系电话不能超过 32 个字符', trigger: 'blur' }],
|
||||
email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }],
|
||||
roleIds: [{ type: 'array', required: true, min: 1, message: '请至少选择一个成员角色', trigger: 'change' }],
|
||||
}
|
||||
|
||||
const memberQueryFields: QueryField[] = [
|
||||
{ key: 'keyword', type: 'input', placeholder: '姓名、账号、手机或邮箱' },
|
||||
{ key: 'status', type: 'select', placeholder: '全部状态', options: [{ label: '正常', value: 'ACTIVE' }, { label: '已停用', value: 'INACTIVE' }] },
|
||||
]
|
||||
const memberTableColumns: DataTableColumn[] = [
|
||||
{ key: 'actions', label: '操作', fixed: 'left', width: 230, slotName: 'actions' },
|
||||
{ key: 'member', label: '成员', minWidth: 170, slotName: 'member' },
|
||||
{ key: 'contact', label: '联系方式', minWidth: 200, slotName: 'contact' },
|
||||
{ key: 'roles', label: '角色', minWidth: 130, slotName: 'roles' },
|
||||
{ key: 'lastLoginAt', prop: 'lastLoginAt', label: '登录记录', minWidth: 130 },
|
||||
{ key: 'status', label: '状态', width: 90, slotName: 'status' },
|
||||
]
|
||||
|
||||
const filteredMembers = computed(() => store.members.filter((member) => {
|
||||
const key = keyword.value.trim().toLowerCase()
|
||||
const key = appliedMemberFilters.value.keyword.trim().toLowerCase()
|
||||
const matchesKeyword = !key || [member.name, member.account, member.phone, member.email].some((value) => value.toLowerCase().includes(key))
|
||||
return matchesKeyword && (!statusFilter.value || member.status === statusFilter.value)
|
||||
return matchesKeyword && (!appliedMemberFilters.value.status || member.status === appliedMemberFilters.value.status)
|
||||
}))
|
||||
const pagedMembers = computed(() => filteredMembers.value.slice((memberPage.value - 1) * memberPageSize.value, memberPage.value * memberPageSize.value))
|
||||
|
||||
async function loadMembers() {
|
||||
loading.value = true
|
||||
@@ -36,9 +69,19 @@ async function loadMembers() {
|
||||
|
||||
onMounted(() => void loadMembers())
|
||||
|
||||
function searchMembers(filters: QueryModel) {
|
||||
appliedMemberFilters.value = {
|
||||
keyword: typeof filters.keyword === 'string' ? filters.keyword : '',
|
||||
status: filters.status === 'ACTIVE' || filters.status === 'INACTIVE' ? filters.status : '',
|
||||
}
|
||||
memberPage.value = 1
|
||||
void loadMembers()
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
editingId.value = ''
|
||||
Object.assign(form, { name: '', account: '', password: '', phone: '', email: '', roleIds: [] })
|
||||
void nextTick(() => formRef.value?.clearValidate())
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
@@ -54,17 +97,16 @@ function openEdit(member: TenantMember) {
|
||||
|
||||
async function saveMember() {
|
||||
if (saving.value) return
|
||||
if (!form.name.trim() || !/^[A-Za-z0-9_.@-]{4,64}$/.test(form.account) || form.roleIds.length === 0) {
|
||||
ElMessage.warning('请填写姓名、4–64 位合法账号并至少选择一个角色')
|
||||
return
|
||||
}
|
||||
if (form.phone.length > 32 || (form.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))) {
|
||||
ElMessage.warning('请检查联系电话长度和邮箱格式')
|
||||
return
|
||||
}
|
||||
if (!editingId.value && (!/^(?=.*[A-Za-z])(?=.*\d).{8,64}$/.test(form.password))) {
|
||||
ElMessage.warning('初始密码需为 8–64 位，并同时包含字母和数字')
|
||||
return
|
||||
form.name = form.name.trim()
|
||||
form.account = form.account.trim()
|
||||
form.phone = form.phone.trim()
|
||||
form.email = form.email.trim()
|
||||
if (!editingId.value || form.password) {
|
||||
const valid = await formRef.value?.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
} else {
|
||||
const valid = await formRef.value?.validateField(['name', 'account', 'phone', 'email', 'roleIds']).then(() => true).catch(() => false)
|
||||
if (!valid) return
|
||||
}
|
||||
saving.value = true
|
||||
try {
|
||||
@@ -112,10 +154,6 @@ async function resetPassword(member: TenantMember) {
|
||||
}
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
keyword.value = ''
|
||||
statusFilter.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -125,49 +163,38 @@ function clearFilters() {
|
||||
<el-button :loading="loading" @click="loadMembers">重新加载</el-button>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="member-metrics">
|
||||
<article><UserCheck :size="20" /><div><span>成员总数</span><strong>{{ store.members.length }}</strong></div></article>
|
||||
<article><ShieldCheck :size="20" /><div><span>正常成员</span><strong>{{ store.activeMemberCount }}</strong></div></article>
|
||||
<article><UserRoundX :size="20" /><div><span>已停用</span><strong>{{ store.members.length - store.activeMemberCount }}</strong></div></article>
|
||||
</div>
|
||||
|
||||
<div class="member-toolbar client-card">
|
||||
<div class="member-filters">
|
||||
<el-input v-model="keyword" clearable placeholder="姓名、账号、手机或邮箱"><template #prefix><Search :size="16" /></template></el-input>
|
||||
<el-select v-model="statusFilter" clearable placeholder="全部状态"><el-option label="正常" value="ACTIVE" /><el-option label="已停用" value="INACTIVE" /></el-select>
|
||||
<el-button @click="clearFilters"><RotateCcw :size="16" />重置</el-button>
|
||||
</div>
|
||||
<el-button v-if="auth.hasPermission('company:member:write')" type="primary" @click="openCreate"><Plus :size="17" />新增成员</el-button>
|
||||
</div>
|
||||
<QueryToolbar v-model="memberFilters" ariaLabel="企业成员筛选" :fields="memberQueryFields" search-text="查询成员" @search="searchMembers">
|
||||
<template #actions><el-button v-if="auth.hasPermission('company:member:write')" type="primary" @click="openCreate"><Plus :size="17" />新增成员</el-button></template>
|
||||
</QueryToolbar>
|
||||
|
||||
<div class="client-card member-table-card">
|
||||
<el-table v-if="filteredMembers.length" class="desktop-member-table" :data="filteredMembers" row-key="id">
|
||||
<el-table-column label="操作" width="230" fixed="left"><template #default="{ row }"><el-button v-if="auth.hasPermission('company:member:write')" link type="primary" @click="openEdit(row as TenantMember)"><Pencil :size="15" />编辑</el-button><el-button v-if="auth.hasPermission('company:member:reset-password')" link type="primary" @click="resetPassword(row as TenantMember)"><KeyRound :size="15" />重置密码</el-button><el-button v-if="auth.hasPermission('company:member:write') && !row.isAdministrator" link :type="row.status === 'ACTIVE' ? 'danger' : 'success'" @click="toggleStatus(row as TenantMember)">{{ row.status === 'ACTIVE' ? '停用' : '启用' }}</el-button><span v-if="!auth.hasPermission('company:member:write') && !auth.hasPermission('company:member:reset-password')" class="readonly-action">仅查看</span></template></el-table-column>
|
||||
<el-table-column label="成员" min-width="170"><template #default="{ row }"><div class="member-identity"><span>{{ row.name.slice(0, 1) }}</span><div><strong>{{ row.name }}</strong><small>{{ row.account }}</small></div></div></template></el-table-column>
|
||||
<el-table-column label="联系方式" min-width="200"><template #default="{ row }"><div class="member-contact"><span>{{ row.phone }}</span><small>{{ row.email || '-' }}</small></div></template></el-table-column>
|
||||
<el-table-column label="角色" min-width="130"><template #default="{ row }"><div class="role-tags"><el-tag v-for="name in store.roleNames(row.roleIds)" :key="name" effect="plain">{{ name }}</el-tag><span v-if="store.roleNames(row.roleIds).length === 0" class="readonly-action">未分配</span></div></template></el-table-column>
|
||||
<el-table-column prop="lastLoginAt" label="登录记录" min-width="130" />
|
||||
<el-table-column label="状态" width="90"><template #default="{ row }"><el-tag :type="row.status === 'ACTIVE' ? 'success' : 'info'" effect="light">{{ row.status === 'ACTIVE' ? '正常' : '已停用' }}</el-tag></template></el-table-column>
|
||||
</el-table>
|
||||
<DataTable v-model:page="memberPage" v-model:page-size="memberPageSize" class="desktop-member-table" :data="pagedMembers" :columns="memberTableColumns" :loading="loading" :total="filteredMembers.length" row-key="id">
|
||||
<template #actions="{ row }"><el-button v-if="auth.hasPermission('company:member:write')" link type="primary" @click="openEdit(row as TenantMember)"><Pencil :size="15" />编辑</el-button><el-button v-if="auth.hasPermission('company:member:reset-password')" link type="primary" @click="resetPassword(row as TenantMember)"><KeyRound :size="15" />重置密码</el-button><el-button v-if="auth.hasPermission('company:member:write') && !(row as TenantMember).isAdministrator" link :type="(row as TenantMember).status === 'ACTIVE' ? 'danger' : 'success'" @click="toggleStatus(row as TenantMember)">{{ (row as TenantMember).status === 'ACTIVE' ? '停用' : '启用' }}</el-button><span v-if="!auth.hasPermission('company:member:write') && !auth.hasPermission('company:member:reset-password')" class="readonly-action">仅查看</span></template>
|
||||
<template #member="{ row }"><div class="member-identity"><span>{{ (row as TenantMember).name.slice(0, 1) }}</span><div><strong>{{ (row as TenantMember).name }}</strong><small>{{ (row as TenantMember).account }}</small></div></div></template>
|
||||
<template #contact="{ row }"><div class="member-contact"><span>{{ (row as TenantMember).phone }}</span><small>{{ (row as TenantMember).email || '-' }}</small></div></template>
|
||||
<template #roles="{ row }"><div class="role-tags"><el-tag v-for="name in store.roleNames((row as TenantMember).roleIds)" :key="name" effect="plain">{{ name }}</el-tag><span v-if="store.roleNames((row as TenantMember).roleIds).length === 0" class="readonly-action">未分配</span></div></template>
|
||||
<template #status="{ row }"><el-tag :type="(row as TenantMember).status === 'ACTIVE' ? 'success' : 'info'" effect="light">{{ (row as TenantMember).status === 'ACTIVE' ? '正常' : '已停用' }}</el-tag></template>
|
||||
<template #empty><div class="client-empty">没有匹配的企业成员，请调整筛选条件。</div></template>
|
||||
</DataTable>
|
||||
|
||||
<div v-if="filteredMembers.length" class="mobile-member-list">
|
||||
<article v-for="member in filteredMembers" :key="member.id">
|
||||
<div v-if="pagedMembers.length" class="mobile-member-list">
|
||||
<article v-for="member in pagedMembers" :key="member.id">
|
||||
<header><div class="member-identity"><span>{{ member.name.slice(0, 1) }}</span><div><strong>{{ member.name }}</strong><small>{{ member.account }}</small></div></div><el-tag :type="member.status === 'ACTIVE' ? 'success' : 'info'" effect="light">{{ member.status === 'ACTIVE' ? '正常' : '已停用' }}</el-tag></header>
|
||||
<dl><div><dt>手机</dt><dd>{{ member.phone }}</dd></div><div><dt>最近登录</dt><dd>{{ member.lastLoginAt }}</dd></div><div class="full"><dt>角色</dt><dd>{{ store.roleNames(member.roleIds).join('、') }}</dd></div></dl>
|
||||
<footer><el-button v-if="auth.hasPermission('company:member:write')" link type="primary" @click="openEdit(member)">编辑</el-button><el-button v-if="auth.hasPermission('company:member:reset-password')" link type="primary" @click="resetPassword(member)">重置密码</el-button><el-button v-if="auth.hasPermission('company:member:write') && !member.isAdministrator" link :type="member.status === 'ACTIVE' ? 'danger' : 'success'" @click="toggleStatus(member)">{{ member.status === 'ACTIVE' ? '停用' : '启用' }}</el-button><span v-if="!auth.hasPermission('company:member:write') && !auth.hasPermission('company:member:reset-password')" class="readonly-action">仅查看</span></footer>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div v-else class="client-empty">没有匹配的企业成员，请调整筛选条件。</div>
|
||||
<div v-if="!pagedMembers.length" class="mobile-member-empty client-empty">没有匹配的企业成员，请调整筛选条件。</div>
|
||||
</div>
|
||||
|
||||
<el-drawer v-model="editorOpen" :title="editingId ? '编辑成员' : '新增成员'" size="min(520px, 94vw)" @closed="resetForm">
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="成员姓名" required><el-input v-model="form.name" maxlength="64" /></el-form-item>
|
||||
<el-form-item label="登录账号" required><el-input v-model="form.account" :disabled="Boolean(editingId)" maxlength="64" placeholder="4–64 位字母、数字或 _ . @ -" /></el-form-item>
|
||||
<el-form-item v-if="!editingId" label="初始密码" required><el-input v-model="form.password" type="password" show-password autocomplete="new-password" maxlength="64" placeholder="8–64 位，同时包含字母和数字" /></el-form-item>
|
||||
<div class="member-form-grid"><el-form-item label="联系电话"><el-input v-model="form.phone" maxlength="32" placeholder="选填" /></el-form-item><el-form-item label="邮箱"><el-input v-model="form.email" maxlength="128" placeholder="选填" /></el-form-item></div>
|
||||
<el-form-item label="成员角色" required><el-select v-model="form.roleIds" multiple placeholder="请选择角色"><el-option v-for="role in store.roles.filter((item) => item.status === 'ACTIVE')" :key="role.id" :label="role.name" :value="role.id" /></el-select></el-form-item>
|
||||
<el-form ref="formRef" :model="form" :rules="memberRules" label-position="top">
|
||||
<el-form-item label="成员姓名" prop="name" required><el-input v-model="form.name" maxlength="64" placeholder="例如 张三" /></el-form-item>
|
||||
<el-form-item label="登录账号" prop="account" required><el-input v-model="form.account" :disabled="Boolean(editingId)" maxlength="64" placeholder="4–64 位字母、数字或 _ . @ -" /></el-form-item>
|
||||
<el-form-item v-if="!editingId" label="初始密码" prop="password" required><el-input v-model="form.password" type="password" show-password autocomplete="new-password" maxlength="64" placeholder="8–64 位，同时包含字母和数字" /></el-form-item>
|
||||
<div class="member-form-grid"><el-form-item label="联系电话" prop="phone"><el-input v-model="form.phone" maxlength="32" placeholder="例如 13800138000（选填）" /></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="form.email" maxlength="128" placeholder="例如 name@example.com（选填）" /></el-form-item></div>
|
||||
<el-form-item label="成员角色" prop="roleIds" required><el-select v-model="form.roleIds" multiple placeholder="请选择角色"><el-option v-for="role in store.roles.filter((item) => item.status === 'ACTIVE')" :key="role.id" :label="role.name" :value="role.id" /></el-select></el-form-item>
|
||||
<div v-if="!editingId" class="member-form-tip"><KeyRound :size="17" /><span>请通过安全渠道将初始密码交给成员；前端不会保存或再次展示该密码。</span></div>
|
||||
</el-form>
|
||||
<template #footer><div class="drawer-actions"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="saveMember">保存</el-button></div></template>
|
||||
@@ -181,13 +208,6 @@ function clearFilters() {
|
||||
.collection-load-error { display: flex; min-height: 150px; align-items: center; justify-content: center; gap: 20px; }
|
||||
.collection-load-error > div { display: flex; max-width: 520px; flex-direction: column; gap: 6px; }
|
||||
.collection-load-error span { color: var(--muted); font-size: 12px; line-height: 1.6; }
|
||||
.member-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
|
||||
.member-metrics article { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid var(--border); background: #fff; color: var(--primary); }
|
||||
.member-metrics article div { display: flex; flex-direction: column; gap: 2px; }
|
||||
.member-metrics span { color: var(--muted); font-size: 11px; }
|
||||
.member-metrics strong { color: var(--navy); font-size: 23px; }
|
||||
.member-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; }
|
||||
.member-filters { display: grid; flex: 1; grid-template-columns: minmax(210px, 1fr) 150px auto; gap: 10px; }
|
||||
.member-table-card { padding: 0; overflow: hidden; }
|
||||
.member-identity { display: flex; align-items: center; gap: 10px; }
|
||||
.member-identity > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; background: #e7f3f1; color: var(--primary); font-weight: 750; }
|
||||
@@ -197,16 +217,15 @@ function clearFilters() {
|
||||
.role-tags { display: flex; gap: 5px; flex-wrap: wrap; }
|
||||
.mobile-member-list { display: none; }
|
||||
.member-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
.member-form-tip { display: flex; gap: 10px; padding: 13px; border-left: 3px solid var(--primary); background: #f2f7f6; color: var(--muted); font-size: 11px; line-height: 1.6; }
|
||||
.member-form-tip { display: flex; gap: 10px; padding: 13px; border: 1px solid #cfe1dc; background: #f2f7f6; color: var(--muted); font-size: 11px; line-height: 1.6; }
|
||||
.member-form-tip svg { flex: 0 0 17px; color: var(--primary); }
|
||||
.drawer-actions { display: flex; justify-content: flex-end; gap: 8px; }
|
||||
@media (max-width: 900px) { .member-toolbar { align-items: stretch; flex-direction: column; } .member-toolbar > .el-button { align-self: flex-end; } }
|
||||
.members-page :deep(.el-form-item__error) { line-height: 1.45; overflow-wrap: anywhere; }
|
||||
@media (max-width: 720px) {
|
||||
.member-metrics { grid-template-columns: 1fr; }
|
||||
.member-filters, .member-form-grid { grid-template-columns: 1fr; }
|
||||
.member-toolbar > .el-button { width: 100%; }
|
||||
.desktop-member-table { display: none; }
|
||||
.member-form-grid { grid-template-columns: 1fr; }
|
||||
.desktop-member-table :deep(.el-table) { display: none; }
|
||||
.mobile-member-list { display: grid; gap: 10px; padding: 10px; }
|
||||
.mobile-member-empty { display: grid; min-height: 150px; place-items: center; }
|
||||
.mobile-member-list article { padding: 14px; border: 1px solid var(--border); background: #fff; }
|
||||
.mobile-member-list header { display: flex; align-items: center; justify-content: space-between; }
|
||||
.mobile-member-list dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
|
||||
@@ -214,5 +233,6 @@ function clearFilters() {
|
||||
.mobile-member-list dt { color: var(--muted); font-size: 10px; }
|
||||
.mobile-member-list dd { margin: 4px 0 0; font-size: 12px; }
|
||||
.mobile-member-list footer { display: flex; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--border); }
|
||||
.drawer-actions { flex-wrap: wrap; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user