150 lines
4.0 KiB
Vue
150 lines
4.0 KiB
Vue
<script lang="ts" setup>
|
|
import type { VxeGridListeners } from '#/adapter/vxe-table';
|
|
|
|
import { ref } from 'vue';
|
|
|
|
import { Page, useVbenModal } from '@vben/common-ui';
|
|
|
|
import { Avatar, Tag } from 'ant-design-vue';
|
|
|
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
|
import { TableAction } from '#/components/table-action';
|
|
import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
|
|
|
|
import DetailModal from './components/DetailModal.vue';
|
|
import FormModalDemo from './components/modal.vue';
|
|
import { formOptions } from './config/search';
|
|
import { inputGridOptions } from './config/table';
|
|
import {
|
|
inputUserDisplayName,
|
|
normalizeInputUser,
|
|
resolveAvatarUrl,
|
|
} from '../store-input/utils/inputUser';
|
|
|
|
const hasTopTableDropDownActions = ref(false);
|
|
|
|
const gridEvents: VxeGridListeners<any> = {
|
|
checkboxChange() {
|
|
const records = gridApi.grid.getCheckboxRecords();
|
|
hasTopTableDropDownActions.value = records.length > 0;
|
|
},
|
|
checkboxAll() {
|
|
const records = gridApi.grid.getCheckboxRecords();
|
|
hasTopTableDropDownActions.value = records.length > 0;
|
|
},
|
|
};
|
|
|
|
const [Grid, gridApi] = useVbenVxeGrid({
|
|
formOptions,
|
|
gridOptions: inputGridOptions,
|
|
gridEvents,
|
|
});
|
|
|
|
const [FormModal, formModalApi] = useVbenModal({
|
|
connectedComponent: FormModalDemo,
|
|
});
|
|
|
|
const [DetailModalComponent, detailModalApi] = useVbenModal({
|
|
connectedComponent: DetailModal,
|
|
});
|
|
|
|
const showDetail = (row: any) => {
|
|
detailModalApi.setData({
|
|
values: row,
|
|
});
|
|
detailModalApi.open();
|
|
};
|
|
|
|
const showModal = (data = {}, isUpdate = false) => {
|
|
formModalApi.setData({
|
|
values: data,
|
|
update: isUpdate,
|
|
gridApi,
|
|
});
|
|
formModalApi.open();
|
|
};
|
|
|
|
const getTypeText = (type: number) => {
|
|
if (type === 1) return '中医医生';
|
|
if (type === 2) return '西医医生';
|
|
return '-';
|
|
};
|
|
|
|
const getStatusColor = (status: number) => {
|
|
if (status === 0) return 'orange';
|
|
if (status === 1) return 'success';
|
|
return 'error';
|
|
};
|
|
|
|
const getStatusText = (status: number) => {
|
|
if (status === 0) return '待审核';
|
|
if (status === 1) return '审核通过';
|
|
return '审核拒绝';
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Page auto-content-height title="医生信息预填">
|
|
<FormModal />
|
|
<DetailModalComponent />
|
|
<Grid>
|
|
<template #toolbar-actions>
|
|
<TableAction
|
|
:actions="[
|
|
{
|
|
label: '新增预填',
|
|
type: 'primary',
|
|
icon: 'ant-design:plus-outlined',
|
|
onClick: showModal.bind(null, {}, false),
|
|
},
|
|
]"
|
|
/>
|
|
</template>
|
|
<template #type="{ row }">
|
|
<Tag>{{ getTypeText(row.type) }}</Tag>
|
|
</template>
|
|
<template #status="{ row }">
|
|
<Tag :color="getStatusColor(row.status)">
|
|
{{ getStatusText(row.status) }}
|
|
</Tag>
|
|
</template>
|
|
<template #inputUser="{ row }">
|
|
<div v-if="normalizeInputUser(row)" class="flex items-center gap-2">
|
|
<Avatar
|
|
v-if="resolveAvatarUrl(row.inputUser?.avatar)"
|
|
:src="resolveAvatarUrl(row.inputUser?.avatar)"
|
|
:size="28"
|
|
/>
|
|
<Avatar v-else :size="28">{{ inputUserDisplayName(row.inputUser).charAt(0) }}</Avatar>
|
|
<span>{{ inputUserDisplayName(row.inputUser) }}</span>
|
|
</div>
|
|
<span v-else>-</span>
|
|
</template>
|
|
<template #mobile="{ row }">
|
|
<SensitiveText :record="row" field="mobile" />
|
|
</template>
|
|
<template #action="{ row }">
|
|
<TableAction
|
|
:actions="[
|
|
{
|
|
label: '查看',
|
|
type: 'link',
|
|
icon: 'uil:eye',
|
|
size: 'small',
|
|
onClick: showDetail.bind(null, row),
|
|
},
|
|
{
|
|
label: '编辑',
|
|
type: 'link',
|
|
icon: 'uil:edit',
|
|
size: 'small',
|
|
ifShow: row.status === 0,
|
|
onClick: showModal.bind(null, row, true),
|
|
},
|
|
]"
|
|
/>
|
|
</template>
|
|
</Grid>
|
|
</Page>
|
|
</template>
|