feat: 岗位

This commit is contained in:
dap 2024-10-05 16:02:02 +08:00
parent abcc08832d
commit a3a1403144
2 changed files with 205 additions and 35 deletions

View File

@ -1,8 +1,9 @@
import { DictEnum } from '@vben/constants';
import { getPopupContainer } from '@vben/utils';
import { type FormSchemaGetter } from '#/adapter';
import { type FormSchemaGetter, type VxeGridProps } from '#/adapter';
import { getDictOptions } from '#/utils/dict';
import { renderDict } from '#/utils/render';
export const querySchema: FormSchemaGetter = () => [
{
@ -26,6 +27,46 @@ export const querySchema: FormSchemaGetter = () => [
},
];
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '岗位编码',
field: 'postCode',
},
{
title: '类别编码',
field: 'postCategory',
},
{
title: '岗位名称',
field: 'postName',
},
{
title: '排序',
field: 'postSort',
},
{
title: '状态',
field: 'status',
slots: {
default: ({ row }) => {
return renderDict(row.status, DictEnum.SYS_NORMAL_DISABLE);
},
},
},
{
title: '创建时间',
field: 'createTime',
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 180,
},
];
export const drawerSchema: FormSchemaGetter = () => [
{
component: 'Input',

View File

@ -1,54 +1,183 @@
<script setup lang="ts">
import { Page, useVbenDrawer } from '@vben/common-ui';
import type { Recordable } from '@vben/types';
import { Card } from 'ant-design-vue';
import { ref } from 'vue';
import { useVbenForm } from '#/adapter';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { querySchema } from './data';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
import { postExport, postList, postRemove } from '#/api/system/post';
import { downloadExcel } from '#/utils/file/download';
import DeptTree from '#/views/system/user/dept-tree.vue';
import { columns, querySchema } from './data';
import postDrawer from './post-drawer.vue';
const formOptions: VbenFormProps = {
schema: querySchema(),
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
};
//
const selectDeptId = ref<string[]>([]);
const gridOptions: VxeGridProps = {
checkboxConfig: {
//
highlight: true,
//
reserve: true,
//
// trigger: 'row',
},
columns,
height: 'auto',
keepSource: true,
pagerConfig: {},
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
//
if (formValues?.createTime) {
formValues.params = {
beginTime: dayjs(formValues.createTime[0]).format(
'YYYY-MM-DD 00:00:00',
),
endTime: dayjs(formValues.createTime[1]).format(
'YYYY-MM-DD 23:59:59',
),
};
Reflect.deleteProperty(formValues, 'createTime');
} else {
Reflect.deleteProperty(formValues, 'params');
}
//
if (selectDeptId.value.length === 1) {
formValues.deptId = selectDeptId.value[0];
} else {
Reflect.deleteProperty(formValues, 'deptId');
}
return await postList({
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
isHover: true,
keyField: 'postId',
},
round: true,
align: 'center',
showOverflow: true,
};
const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
const [PostDrawer, drawerApi] = useVbenDrawer({
connectedComponent: postDrawer,
});
function handleAdd() {
drawerApi.setData({ update: false });
drawerApi.setData({});
drawerApi.open();
}
const [QueryForm] = useVbenForm({
//
collapsed: false,
//
commonConfig: {
//
componentProps: {
class: 'w-full',
async function handleEdit(record: Recordable<any>) {
drawerApi.setData({ id: record.postId });
drawerApi.open();
}
async function handleDelete(row: Recordable<any>) {
await postRemove(row.postId);
await tableApi.reload();
}
function handleMultiDelete() {
const rows = tableApi.grid.getCheckboxRecords();
const ids = rows.map((row: any) => row.postId);
Modal.confirm({
title: '提示',
okType: 'danger',
content: `确认删除选中的${ids.length}条记录吗?`,
onOk: async () => {
await postRemove(ids);
await tableApi.reload();
},
},
schema: querySchema(),
//
showCollapseButton: true,
submitButtonOptions: {
text: '查询',
},
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
});
});
}
</script>
<template>
<Page content-class="flex flex-col gap-4">
<Card>
<QueryForm />
</Card>
<Card>
<div class="flex justify-end">
<a-button type="primary" @click="handleAdd">
{{ $t('pages.common.add') }}
</a-button>
</div>
</Card>
<PostDrawer />
<Page :auto-content-height="true" content-class="flex gap-[8px]">
<DeptTree
v-model:select-dept-id="selectDeptId"
:height="300"
class="w-[260px]"
@select="() => tableApi.reload()"
/>
<BasicTable>
<template #toolbar-actions>
<span class="pl-[7px] text-[16px]">岗位列表</span>
</template>
<template #toolbar-tools>
<Space>
<a-button
v-access:code="['system:post:export']"
@click="downloadExcel(postExport, '岗位信息数据', {})"
>
{{ $t('pages.common.export') }}
</a-button>
<a-button
danger
type="primary"
v-access:code="['system:post:delete']"
@click="handleMultiDelete"
>
{{ $t('pages.common.delete') }}
</a-button>
<a-button
type="primary"
v-access:code="['system:post:add']"
@click="handleAdd"
>
{{ $t('pages.common.add') }}
</a-button>
</Space>
</template>
<template #action="{ row }">
<Space>
<a-button
size="small"
type="link"
v-access:code="['system:post:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</a-button>
<Popconfirm
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<a-button
danger
size="small"
type="link"
v-access:code="['system:post:delete']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</a-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<PostDrawer @reload="tableApi.reload()" />
</Page>
</template>