412 lines
11 KiB
Vue
412 lines
11 KiB
Vue
<template>
|
|
<ArtTableFullScreen>
|
|
<div id="table-full-screen" class="wecom-members-page">
|
|
<ArtSearchBar
|
|
v-model:filter="searchForm"
|
|
:items="searchFormItems"
|
|
:show-expand="false"
|
|
@reset="handleReset"
|
|
@search="handleSearch"
|
|
/>
|
|
|
|
<ElCard v-loading="loading" shadow="never" class="art-table-card members-card">
|
|
<div class="members-toolbar">
|
|
<div class="toolbar-actions">
|
|
<ElButton
|
|
v-permission="JULY_PERMISSIONS.wecom.memberSync"
|
|
:disabled="!selectedApplicationId"
|
|
:loading="syncing"
|
|
type="primary"
|
|
@click="syncMembers"
|
|
>
|
|
同步成员
|
|
</ElButton>
|
|
<ElButton @click="goToApplications">返回应用列表</ElButton>
|
|
</div>
|
|
</div>
|
|
|
|
<ElEmpty v-if="!members.length && !loading" description="暂无企微成员" />
|
|
<div v-else class="member-grid">
|
|
<ElCard v-for="member in members" :key="member.userid" shadow="hover" class="member-card">
|
|
<div class="member-card__header">
|
|
<div class="member-card__identity">
|
|
<ElAvatar :size="36" class="member-card__avatar">
|
|
{{ getMemberInitial(member.name) }}
|
|
</ElAvatar>
|
|
<div class="member-card__name" :title="member.name">
|
|
{{ member.name || '-' }}
|
|
</div>
|
|
</div>
|
|
<ElTag v-if="isDefaultCreator(member)" type="success" size="small">
|
|
默认发起人
|
|
</ElTag>
|
|
<ElTag
|
|
v-else
|
|
v-permission="JULY_PERMISSIONS.wecom.memberDefaultCreator"
|
|
class="member-card__action-tag"
|
|
type="primary"
|
|
effect="plain"
|
|
size="small"
|
|
role="button"
|
|
tabindex="0"
|
|
@click.stop="setDefaultCreator(member)"
|
|
@keydown.enter.stop="setDefaultCreator(member)"
|
|
>
|
|
设为默认发起人
|
|
</ElTag>
|
|
</div>
|
|
|
|
<div class="member-card__info">
|
|
<span class="member-card__label">同步时间</span>
|
|
<span>{{ formatDateTime(member.synced_at) }}</span>
|
|
</div>
|
|
</ElCard>
|
|
</div>
|
|
|
|
<div class="pagination-wrapper">
|
|
<ElPagination
|
|
v-model:current-page="pagination.page"
|
|
v-model:page-size="pagination.page_size"
|
|
:total="pagination.total"
|
|
:page-sizes="[20, 50, 100]"
|
|
layout="total, sizes, prev, pager, next"
|
|
@size-change="handleSizeChange"
|
|
@current-change="loadMembers"
|
|
/>
|
|
</div>
|
|
</ElCard>
|
|
</div>
|
|
</ArtTableFullScreen>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, reactive, ref } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import type { SearchFormItem } from '@/types'
|
|
import { WecomService } from '@/api/modules'
|
|
import { JULY_PERMISSIONS } from '@/config/constants'
|
|
import { RoutesAlias } from '@/router/routesAlias'
|
|
import type { WecomApplication, WecomMember } from '@/types/api'
|
|
import { formatDateTime } from '@/utils/business/format'
|
|
|
|
defineOptions({ name: 'WecomMembers' })
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const loading = ref(false)
|
|
const syncing = ref(false)
|
|
const savingDefault = ref(false)
|
|
const pendingDefaultUserid = ref('')
|
|
const applications = ref<WecomApplication[]>([])
|
|
const members = ref<WecomMember[]>([])
|
|
const searchForm = reactive({
|
|
application_id: undefined as number | undefined,
|
|
keyword: ''
|
|
})
|
|
const pagination = reactive({ page: 1, page_size: 20, total: 0 })
|
|
|
|
const selectedApplicationId = computed(() => searchForm.application_id)
|
|
const selectedApplication = computed(() =>
|
|
applications.value.find((application) => application.id === selectedApplicationId.value)
|
|
)
|
|
|
|
const searchFormItems = computed<SearchFormItem[]>(() => [
|
|
{
|
|
label: '企微应用',
|
|
prop: 'application_id',
|
|
type: 'select',
|
|
options: applications.value.map((application) => ({
|
|
label: application.name,
|
|
value: application.id
|
|
})),
|
|
onChange: () => {
|
|
pagination.page = 1
|
|
void loadMembers()
|
|
},
|
|
config: {
|
|
filterable: true,
|
|
clearable: false,
|
|
placeholder: '请选择企微应用'
|
|
}
|
|
},
|
|
{
|
|
label: '成员搜索',
|
|
prop: 'keyword',
|
|
type: 'input',
|
|
config: {
|
|
clearable: true,
|
|
placeholder: '请输入成员姓名'
|
|
}
|
|
}
|
|
])
|
|
|
|
const isDefaultCreator = (member: WecomMember) =>
|
|
member.userid === selectedApplication.value?.default_creator_userid
|
|
|
|
const getMemberInitial = (name: string) => name.trim().slice(0, 1) || '-'
|
|
|
|
const loadApplications = async () => {
|
|
const response = await WecomService.getApplications({ page: 1, page_size: 100 })
|
|
if (response.code !== 0) return
|
|
applications.value = response.data.items || []
|
|
const queryApplicationId = Number(route.query.application_id)
|
|
const preferredApplication =
|
|
applications.value.find((application) => application.id === queryApplicationId) ||
|
|
applications.value.find((application) => application.id === searchForm.application_id) ||
|
|
applications.value[0]
|
|
searchForm.application_id = preferredApplication?.id
|
|
}
|
|
|
|
const loadMembers = async () => {
|
|
if (!selectedApplicationId.value) {
|
|
members.value = []
|
|
pagination.total = 0
|
|
return
|
|
}
|
|
loading.value = true
|
|
try {
|
|
const response = await WecomService.getMembers(selectedApplicationId.value, {
|
|
page: pagination.page,
|
|
page_size: pagination.page_size,
|
|
keyword: searchForm.keyword.trim() || undefined
|
|
})
|
|
if (response.code === 0) {
|
|
members.value = response.data.items || []
|
|
pagination.total = response.data.total || 0
|
|
}
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const handleSearch = () => {
|
|
pagination.page = 1
|
|
void loadMembers()
|
|
}
|
|
|
|
const handleReset = () => {
|
|
searchForm.keyword = ''
|
|
searchForm.application_id = applications.value[0]?.id
|
|
pagination.page = 1
|
|
void loadMembers()
|
|
}
|
|
|
|
const handleSizeChange = (size: number) => {
|
|
pagination.page_size = size
|
|
pagination.page = 1
|
|
void loadMembers()
|
|
}
|
|
|
|
const syncMembers = async () => {
|
|
if (!selectedApplicationId.value) return
|
|
syncing.value = true
|
|
try {
|
|
const response = await WecomService.syncMembers(selectedApplicationId.value)
|
|
if (response.code === 0) {
|
|
ElMessage.success(`已同步 ${response.data.synced_count} 名成员`)
|
|
await loadMembers()
|
|
}
|
|
} finally {
|
|
syncing.value = false
|
|
}
|
|
}
|
|
|
|
const setDefaultCreator = async (member: WecomMember) => {
|
|
if (!selectedApplicationId.value || savingDefault.value) return
|
|
|
|
try {
|
|
await ElMessageBox.confirm(
|
|
`确定将 ${member.name} 设置为当前应用的默认发起人吗？`,
|
|
'确认设置默认发起人',
|
|
{
|
|
confirmButtonText: '确定设置',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}
|
|
)
|
|
} catch {
|
|
return
|
|
}
|
|
|
|
savingDefault.value = true
|
|
pendingDefaultUserid.value = member.userid
|
|
try {
|
|
const response = await WecomService.setDefaultCreator(
|
|
selectedApplicationId.value,
|
|
member.userid
|
|
)
|
|
if (response.code === 0) {
|
|
ElMessage.success('默认发起人已保存')
|
|
const application = selectedApplication.value
|
|
if (application) {
|
|
application.default_creator_userid = member.userid
|
|
application.default_creator_name = member.name
|
|
}
|
|
}
|
|
} finally {
|
|
savingDefault.value = false
|
|
pendingDefaultUserid.value = ''
|
|
}
|
|
}
|
|
|
|
const goToApplications = () => void router.push(RoutesAlias.WecomApplications)
|
|
|
|
onMounted(async () => {
|
|
await loadApplications()
|
|
await loadMembers()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.wecom-members-page {
|
|
.members-card {
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
|
|
:deep(> .el-card__body) {
|
|
box-sizing: border-box;
|
|
min-height: 0;
|
|
padding-bottom: 24px;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
.members-toolbar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.toolbar-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
.member-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 16px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.member-card {
|
|
min-width: 0;
|
|
transition:
|
|
box-shadow 0.2s ease,
|
|
transform 0.2s ease;
|
|
|
|
&:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
:deep(.el-card__body) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
justify-content: space-between;
|
|
height: auto;
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
.member-card__header,
|
|
.member-card__info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.member-card__header {
|
|
gap: 12px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.member-card__identity {
|
|
display: flex;
|
|
flex: 1;
|
|
gap: 10px;
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
.member-card__avatar {
|
|
flex-shrink: 0;
|
|
font-weight: 600;
|
|
color: var(--el-color-primary);
|
|
background: var(--el-color-primary-light-9);
|
|
}
|
|
|
|
.member-card__name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--el-text-color-primary);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.member-card__info {
|
|
gap: 16px;
|
|
justify-content: space-between;
|
|
font-size: 13px;
|
|
color: var(--el-text-color-regular);
|
|
|
|
span:last-child {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.member-card__label {
|
|
color: var(--el-text-color-secondary);
|
|
}
|
|
|
|
.member-card__action-tag {
|
|
cursor: pointer;
|
|
transition: opacity 0.2s ease;
|
|
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.pagination-wrapper {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
@media (width <= 1400px) {
|
|
.member-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (width <= 1024px) {
|
|
.member-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (width <= 640px) {
|
|
.member-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.members-toolbar {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.pagination-wrapper {
|
|
justify-content: center;
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|