<script lang="ts" setup>
|
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
import type { UmsMemberApi } from '#/api/ums/member';
|
|
import { nextTick, ref } from 'vue';
|
|
import { DICT_TYPE } from '@vben/constants';
|
|
import { message, Modal } from 'ant-design-vue';
|
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
import { getMemberPage } from '#/api/ums/member';
|
|
defineOptions({ name: 'ResearchMemberSelectDialog' });
|
|
const emit = defineEmits<{
|
selected: [rows: UmsMemberApi.Member[]];
|
}>();
|
|
const open = ref(false);
|
const selectedRows = ref<UmsMemberApi.Member[]>([]);
|
const preSelectedId = ref<number>();
|
|
function getTableRows() {
|
return gridApi.grid.getTableData().fullData as UmsMemberApi.Member[];
|
}
|
|
async function applyPreSelection() {
|
if (!preSelectedId.value) {
|
return;
|
}
|
const row = getTableRows().find((item) => item.id === preSelectedId.value);
|
if (!row) {
|
return;
|
}
|
await gridApi.grid.setRadioRow(row);
|
selectedRows.value = [row];
|
}
|
|
async function handleCellDblclick({ row }: { row: UmsMemberApi.Member }) {
|
selectedRows.value = [row];
|
await gridApi.grid.setRadioRow(row);
|
handleConfirm();
|
}
|
|
const gridColumns = [
|
{ field: 'no', title: '会员编号', width: 180 },
|
{
|
field: 'name',
|
title: '姓名 / 单位名称',
|
minWidth: 180,
|
},
|
{
|
field: 'memberType',
|
title: '会员类型',
|
width: 110,
|
cellRender: {
|
name: 'CellDict',
|
props: { type: DICT_TYPE.UMS_MEMBER_TYPE },
|
},
|
},
|
{ field: 'contactUser', title: '联系人', width: 110 },
|
{ field: 'contactPhone', title: '联系电话', width: 140 },
|
{ field: 'workUnit', title: '工作单位', minWidth: 180 },
|
{ field: 'title', title: '职称', width: 110 },
|
];
|
|
const [Grid, gridApi] = useVbenVxeGrid({
|
formOptions: {
|
schema: [
|
{
|
fieldName: 'name',
|
label: '姓名 / 单位名称',
|
component: 'Input',
|
componentProps: {
|
allowClear: true,
|
placeholder: '请输入姓名或单位名称',
|
},
|
},
|
{
|
fieldName: 'contactPhone',
|
label: '联系电话',
|
component: 'Input',
|
componentProps: {
|
allowClear: true,
|
placeholder: '请输入联系电话',
|
},
|
},
|
],
|
},
|
gridOptions: {
|
columns: [{ type: 'radio', width: 50 }, ...gridColumns],
|
height: 440,
|
keepSource: true,
|
radioConfig: {
|
highlight: true,
|
trigger: 'row',
|
},
|
proxyConfig: {
|
ajax: {
|
query: async ({ page }, formValues) => {
|
return await getMemberPage({
|
pageNo: page.currentPage,
|
pageSize: page.pageSize,
|
...formValues,
|
});
|
},
|
},
|
},
|
rowConfig: {
|
keyField: 'id',
|
isHover: true,
|
},
|
toolbarConfig: {
|
refresh: true,
|
search: true,
|
},
|
} as VxeTableGridOptions<UmsMemberApi.Member>,
|
gridEvents: {
|
cellDblclick: handleCellDblclick,
|
radioChange: ({ row }: { row: UmsMemberApi.Member }) => {
|
selectedRows.value = [row];
|
},
|
},
|
});
|
|
async function resetQueryState() {
|
selectedRows.value = [];
|
await gridApi.grid.clearRadioRow();
|
await gridApi.formApi.resetForm();
|
}
|
|
async function openModal(selectedId?: number) {
|
open.value = true;
|
preSelectedId.value = selectedId;
|
await nextTick();
|
await resetQueryState();
|
await gridApi.query();
|
await nextTick();
|
await applyPreSelection();
|
}
|
|
async function closeModal() {
|
open.value = false;
|
await resetQueryState();
|
}
|
|
function handleConfirm() {
|
const row = selectedRows.value[0];
|
if (!row) {
|
message.warning('请选择一位会员作为申报人');
|
return;
|
}
|
emit('selected', [row]);
|
open.value = false;
|
}
|
|
defineExpose({ open: openModal });
|
</script>
|
|
<template>
|
<Modal
|
v-model:open="open"
|
title="选择申报人（会员）"
|
width="72%"
|
:destroy-on-close="true"
|
@ok="handleConfirm"
|
@cancel="closeModal"
|
>
|
<Grid table-title="会员列表" />
|
</Modal>
|
</template>
|
