<script lang="ts" setup>
|
import type { ActionItem, BasicColumn, FormProps } from '@jnpf/ui/vxeTable';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { useModal } from '@jnpf/ui/modal';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { delEmployee, getEmployeeList } from '#/api/extend/employee';
|
import { $t } from '#/locales';
|
|
import ExportModal from './ExportModal.vue';
|
import ImportModal from './ImportModal.vue';
|
|
defineOptions({ name: 'ExtendImportAndExport' });
|
|
const { createMessage } = useMessage();
|
const [registerExportModal, { openModal: openExportModal }] = useModal();
|
const [registerImportModal, { openModal: openImportModal }] = useModal();
|
|
const columns: BasicColumn[] = [
|
{ title: '工号', dataIndex: 'enCode', width: 100, fixed: 'left' },
|
{ title: '姓名', dataIndex: 'fullName', width: 100, fixed: 'left' },
|
{ title: '性别', dataIndex: 'gender', width: 80, fixed: 'left' },
|
{ title: '部门', dataIndex: 'departmentName', width: 120 },
|
{ title: '岗位', dataIndex: 'positionName', width: 120 },
|
{ title: '用工性质', dataIndex: 'workingNature', width: 100 },
|
{ title: '身份证号', dataIndex: 'idNumber', width: 160 },
|
{ title: '联系电话', dataIndex: 'telephone', width: 100 },
|
{ title: '出生年月', dataIndex: 'birthday', width: 120, format: 'date|YYYY-MM-DD' },
|
{ title: '参加工作', dataIndex: 'attendWorkTime', width: 120, format: 'date|YYYY-MM-DD' },
|
{ title: '最高学历', dataIndex: 'education', width: 100 },
|
{ title: '所学专业', dataIndex: 'major', width: 120 },
|
{ title: '毕业院校', dataIndex: 'graduationAcademy', width: 150 },
|
{ title: '毕业时间', dataIndex: 'graduationTime', width: 120, format: 'date|YYYY-MM-DD' },
|
{ title: '创建时间', dataIndex: 'creatorTime', width: 150, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
];
|
const [registerTable, { reload, getFetchParams }] = useVxeTable({
|
api: getEmployeeList,
|
columns,
|
useSearchForm: true,
|
formConfig: getFormConfig(),
|
actionColumn: {
|
width: 50,
|
title: '操作',
|
dataIndex: 'action',
|
},
|
afterFetch: (data) => {
|
const list = data.map((o) => {
|
o.birthday = o.birthday || null;
|
o.attendWorkTime = o.attendWorkTime || null;
|
o.graduationTime = o.graduationTime || null;
|
return o;
|
});
|
return list;
|
},
|
});
|
|
function getFormConfig(): Partial<FormProps> {
|
return {
|
schemas: [
|
{
|
field: 'condition',
|
label: '查询字段',
|
component: 'Select',
|
defaultValue: 'EnCode',
|
componentProps: {
|
options: [
|
{ id: 'EnCode', fullName: '工号' },
|
{ id: 'FullName', fullName: '姓名' },
|
{ id: 'Telephone', fullName: '电话' },
|
{ id: 'DepartmentName', fullName: '部门' },
|
{ id: 'PositionName', fullName: '岗位' },
|
],
|
},
|
},
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: {
|
placeholder: $t('common.enterKeyword'),
|
submitOnPressEnter: true,
|
},
|
},
|
],
|
};
|
}
|
function getTableActions(record): ActionItem[] {
|
return [
|
{
|
label: $t('common.delText'),
|
color: 'error',
|
modelConfirm: {
|
onOk: handleDelete.bind(null, record.id),
|
},
|
},
|
];
|
}
|
function handleDelete(id) {
|
delEmployee(id).then((res) => {
|
createMessage.success(res.msg);
|
reload();
|
});
|
}
|
function handleExport() {
|
const listQuery = {
|
...getFetchParams(),
|
condition: getFetchParams().condition || '',
|
keyword: getFetchParams().keyword || '',
|
};
|
openExportModal(true, { listQuery });
|
}
|
function handleImport() {
|
openImportModal(true, {});
|
}
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable">
|
<template #tableTitle>
|
<a-button type="primary" @click="handleExport"><i class="icon-ym icon-ym-btn-download button-preIcon"></i>{{ $t('common.exportText') }}</a-button>
|
<a-button type="link" @click="handleImport"><i class="icon-ym icon-ym-btn-upload button-preIcon"></i>{{ $t('common.importText') }}</a-button>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
<ExportModal @register="registerExportModal" />
|
<ImportModal @register="registerImportModal" @reload="reload" />
|
</div>
|
</template>
|
