| | |
| | | } from '@/utils/table' |
| | | |
| | | interface StaffItem { |
| | | id: number |
| | | id: number | string |
| | | nickName: string |
| | | uniqueNumber: string |
| | | phoneNumber: string |
| | |
| | | } |
| | | |
| | | interface Props { |
| | | selectedIds?: number[] |
| | | selectedIds?: Array<string | number> |
| | | requestParams?: { |
| | | isBind?: number |
| | | } |
| | |
| | | const isRoleSelectOpen = ref(false) |
| | | |
| | | // 选中的行 |
| | | const checkedRowKeys = ref<number[]>([]) |
| | | const checkedRowKeys = ref<string[]>([]) |
| | | |
| | | const listData = ref<StaffItem[]>([]) |
| | | |
| | | // 缓存所有加载过的数据,以便在 handleConfirm 时能找到不在当前页但在 checkedRowKeys 中的项 |
| | | const allLoadedData = ref<Map<number, StaffItem>>(new Map()) |
| | | const allLoadedData = ref<Map<string, StaffItem>>(new Map()) |
| | | |
| | | const count = ref(0) |
| | | const currentPage = ref(1) |
| | |
| | | const res = await fetchOperationsUserList({ |
| | | nickName: searchModel.value.nickName, |
| | | phoneNumber: searchModel.value.phoneNumber, |
| | | roleId: searchModel.value.roleId, |
| | | roleId: searchModel.value.roleId as number | undefined, |
| | | ...props.requestParams, |
| | | pageNum: currentPage.value, |
| | | pageSize: pageSize.value, |
| | | isBind: 0, |
| | | }) |
| | | |
| | | if (res.code === 200 && res.data) { |
| | |
| | | |
| | | // 存入缓存 |
| | | listData.value.forEach((item) => { |
| | | allLoadedData.value.set(item.id, item) |
| | | allLoadedData.value.set(String(item.id), item) |
| | | }) |
| | | } |
| | | else { |
| | | window.$message?.error(res.message || '获取人员列表失败') |
| | | // window.$message?.error(res.message || '获取人员列表失败') |
| | | } |
| | | } |
| | | catch (error) { |
| | |
| | | searchModel.value.phoneNumber = '' |
| | | searchModel.value.roleId = null |
| | | currentPage.value = 1 |
| | | pageSize.value = 10 |
| | | getStaffList() |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | function handleUpdateChecked(rowKeys: Array<string | number>) { |
| | | checkedRowKeys.value = rowKeys.map(key => Number(key)) |
| | | checkedRowKeys.value = rowKeys.map(key => String(key)) |
| | | } |
| | | |
| | | function toggleRowSelection(row: StaffItem) { |
| | | if (props.selectionDisabled?.(row)) |
| | | return |
| | | |
| | | checkedRowKeys.value = toggleMultiSelectRowKey(checkedRowKeys.value, row.id) |
| | | const rowKey = String(row.id) |
| | | if (!rowKey) |
| | | return |
| | | |
| | | checkedRowKeys.value = toggleMultiSelectRowKey(checkedRowKeys.value, rowKey) |
| | | } |
| | | |
| | | function getRowClassName(row: StaffItem) { |
| | | return getMultiSelectRowClassName(row.id, checkedRowKeys.value) |
| | | return getMultiSelectRowClassName(String(row.id), checkedRowKeys.value) |
| | | } |
| | | |
| | | function getRowProps(row: StaffItem) { |
| | |
| | | } |
| | | |
| | | // 分页改变 |
| | | function handlePageChange(page: number) { |
| | | currentPage.value = page |
| | | function changePage(page: number, size: number) { |
| | | const isPageSizeChanged = size !== pageSize.value |
| | | pageSize.value = size |
| | | currentPage.value = isPageSizeChanged ? 1 : page |
| | | getStaffList() |
| | | } |
| | | |
| | |
| | | watch(visible, (val) => { |
| | | if (val) { |
| | | handleReset() |
| | | checkedRowKeys.value = [...props.selectedIds] |
| | | checkedRowKeys.value = props.selectedIds.map(id => String(id)) |
| | | getRoleList() |
| | | } |
| | | else { |
| | |
| | | <span style="font-size: 16px; font-weight: bold">选择成员</span> |
| | | </template> |
| | | <template #header-extra> |
| | | <div class="modal-close-trigger" text @click="handleCancel"> |
| | | <div class="modal-close-trigger" text @click="handleCancel"> |
| | | <span class="modal-close-text">×</span> |
| | | </div> |
| | | </template> |
| | |
| | | :data="listData" |
| | | :loading="loading" |
| | | :bordered="false" |
| | | :row-key="(row: StaffItem) => row.id" |
| | | :row-key="(row: StaffItem) => String(row.id)" |
| | | :row-class-name="getRowClassName" |
| | | :row-props="getRowProps" |
| | | :pagination="{ |
| | | page: currentPage, |
| | | pageSize, |
| | | itemCount: count, |
| | | showSizePicker: false, |
| | | onChange: handlePageChange, |
| | | prefix: ({ itemCount }) => `第 ${(currentPage - 1) * pageSize + 1}-${Math.min(currentPage * pageSize, itemCount || 0)} 条 / 总共 ${itemCount || 0} 条`, |
| | | }" |
| | | :pagination="false" |
| | | @update:checked-row-keys="handleUpdateChecked" |
| | | > |
| | | <template #empty> |
| | |
| | | </template> |
| | | </n-data-table> |
| | | </div> |
| | | <Pagination |
| | | :count="count" |
| | | :page="currentPage" |
| | | :page-size="pageSize" |
| | | style="margin-top: 12px; flex-shrink: 0" |
| | | @change="changePage" |
| | | /> |
| | | </div> |
| | | |
| | | <template #footer> |