feat: add notice
xingyu4j
parent
08c3e63bde
commit
d5dab14d8b
|
|
@ -0,0 +1,47 @@
|
||||||
|
import { requestClient } from '#/api/request';
|
||||||
|
|
||||||
|
export interface NoticeVO {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
type: number;
|
||||||
|
content: string;
|
||||||
|
status: number;
|
||||||
|
remark: string;
|
||||||
|
creator: string;
|
||||||
|
createTime: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询岗位列表
|
||||||
|
export function getNoticePage(params: any) {
|
||||||
|
return requestClient.get('/system/notice/page', { params });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取岗位精简信息列表
|
||||||
|
export function getSimpleNoticeList() {
|
||||||
|
return requestClient.get('/system/notice/simple-list');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询岗位详情
|
||||||
|
export function getNotice(id: number) {
|
||||||
|
return requestClient.get(`/system/notice/get?id=${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增岗位
|
||||||
|
export function createNotice(data: NoticeVO) {
|
||||||
|
return requestClient.post('/system/notice/create', data);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改岗位
|
||||||
|
export function updateNotice(data: NoticeVO) {
|
||||||
|
return requestClient.put('/system/notice/update', data);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除岗位
|
||||||
|
export function deleteNotice(id: number) {
|
||||||
|
return requestClient.delete(`/system/notice/delete?id=${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出岗位
|
||||||
|
export function exportNotice(params: any) {
|
||||||
|
return requestClient.download('/system/notice/export', params);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,128 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { VbenFormProps } from '#/adapter/form';
|
||||||
|
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
|
import { Page, useVbenModal } from '@vben/common-ui';
|
||||||
|
import { $t } from '@vben/locales';
|
||||||
|
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||||
|
import {
|
||||||
|
exportNotice,
|
||||||
|
getNoticePage,
|
||||||
|
type NoticeVO,
|
||||||
|
} from '#/api/system/notice';
|
||||||
|
import { ActionButtons, IconEnum } from '#/components/action-buttons';
|
||||||
|
|
||||||
|
import { columns, formSchema } from './notice.data';
|
||||||
|
import NoticeForm from './notice-form.vue';
|
||||||
|
|
||||||
|
defineOptions({ name: 'SystemNotice' });
|
||||||
|
|
||||||
|
const formOptions: VbenFormProps = {
|
||||||
|
// 默认展开
|
||||||
|
collapsed: false,
|
||||||
|
schema: formSchema,
|
||||||
|
// 控制表单是否显示折叠按钮
|
||||||
|
showCollapseButton: true,
|
||||||
|
// 按下回车时是否提交表单
|
||||||
|
submitOnEnter: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
const gridOptions: VxeGridProps<NoticeVO> = {
|
||||||
|
checkboxConfig: {
|
||||||
|
highlight: true,
|
||||||
|
labelField: 'id',
|
||||||
|
},
|
||||||
|
columns,
|
||||||
|
height: 'auto',
|
||||||
|
keepSource: true,
|
||||||
|
pagerConfig: {},
|
||||||
|
proxyConfig: {
|
||||||
|
ajax: {
|
||||||
|
query: async ({ page }, formValues) => {
|
||||||
|
return await getNoticePage({
|
||||||
|
page: page.currentPage,
|
||||||
|
pageSize: page.pageSize,
|
||||||
|
...formValues,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const [Grid, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
|
||||||
|
|
||||||
|
const [FormModal, formModalApi] = useVbenModal({
|
||||||
|
connectedComponent: NoticeForm,
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleCreate() {
|
||||||
|
formModalApi.setData({});
|
||||||
|
formModalApi.open();
|
||||||
|
}
|
||||||
|
async function handleEdit(id: number) {
|
||||||
|
formModalApi.setData({ id });
|
||||||
|
formModalApi.open();
|
||||||
|
}
|
||||||
|
// TODO
|
||||||
|
function handleDelete(id: number) {
|
||||||
|
message.success(id);
|
||||||
|
}
|
||||||
|
// TODO
|
||||||
|
async function handleExport() {
|
||||||
|
await exportNotice(tableApi.formApi.form.values);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Page auto-content-height>
|
||||||
|
<Grid>
|
||||||
|
<template #toolbar-actions>
|
||||||
|
<ActionButtons
|
||||||
|
:actions="[
|
||||||
|
{
|
||||||
|
type: 'primary',
|
||||||
|
label: $t('page.action.add'),
|
||||||
|
icon: IconEnum.ADD,
|
||||||
|
auth: ['system:notice:create'],
|
||||||
|
onClick: handleCreate.bind(null),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: $t('page.action.export'),
|
||||||
|
icon: IconEnum.EXPORT,
|
||||||
|
auth: ['system:notice:export'],
|
||||||
|
onClick: handleExport.bind(null),
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template #action="{ row }">
|
||||||
|
<ActionButtons
|
||||||
|
:actions="[
|
||||||
|
{
|
||||||
|
type: 'link',
|
||||||
|
label: $t('page.action.edit'),
|
||||||
|
icon: IconEnum.EDIT,
|
||||||
|
auth: ['system:notice:update'],
|
||||||
|
onClick: handleEdit.bind(null, row.id),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
popConfirm: {
|
||||||
|
title: $t('page.action.delete'),
|
||||||
|
icon: IconEnum.DELETE,
|
||||||
|
confirm: handleDelete.bind(null, row.id),
|
||||||
|
},
|
||||||
|
type: 'link',
|
||||||
|
danger: true,
|
||||||
|
label: $t('page.action.delete'),
|
||||||
|
auth: ['system:notice:delete'],
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</Grid>
|
||||||
|
<FormModal @reload="tableApi.query()" />
|
||||||
|
</Page>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import { useVbenModal } from '@vben/common-ui';
|
||||||
|
import { isEmpty } from '@vben/utils';
|
||||||
|
|
||||||
|
import { useVbenForm } from '#/adapter/form';
|
||||||
|
import { createNotice, getNotice, updateNotice } from '#/api/system/notice';
|
||||||
|
|
||||||
|
import { modalSchema } from './notice.data';
|
||||||
|
|
||||||
|
defineOptions({ name: 'NoticeModel' });
|
||||||
|
|
||||||
|
const emit = defineEmits(['reload']);
|
||||||
|
|
||||||
|
const isUpdate = ref(false);
|
||||||
|
|
||||||
|
const [Form, formApi] = useVbenForm({
|
||||||
|
// 所有表单项共用，可单独在表单内覆盖
|
||||||
|
commonConfig: {
|
||||||
|
// 所有表单项
|
||||||
|
componentProps: {
|
||||||
|
class: 'w-full',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
schema: modalSchema,
|
||||||
|
handleSubmit: onSubmit,
|
||||||
|
showDefaultActions: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [Modal, modalApi] = useVbenModal({
|
||||||
|
onCancel: async () => {
|
||||||
|
modalApi.close();
|
||||||
|
await formApi.resetForm();
|
||||||
|
},
|
||||||
|
onConfirm: async () => {
|
||||||
|
await formApi.validateAndSubmitForm();
|
||||||
|
},
|
||||||
|
async onOpenChange(isOpen: boolean) {
|
||||||
|
if (isOpen) {
|
||||||
|
const { id } = modalApi.getData<Record<string, any>>();
|
||||||
|
|
||||||
|
isUpdate.value = !isEmpty(id);
|
||||||
|
if (id) {
|
||||||
|
const values = await getNotice(id);
|
||||||
|
formApi.setValues(values);
|
||||||
|
}
|
||||||
|
modalApi.setState({ title: isUpdate.value ? '编辑公告' : '新增公告' });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
async function onSubmit(values: Record<string, any>) {
|
||||||
|
await (isUpdate.value
|
||||||
|
? updateNotice(values as any)
|
||||||
|
: createNotice(values as any));
|
||||||
|
modalApi.close();
|
||||||
|
await formApi.resetForm();
|
||||||
|
emit('reload');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Modal class="w-1/3">
|
||||||
|
<Form />
|
||||||
|
</Modal>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
|
import { $t } from '@vben/locales';
|
||||||
|
|
||||||
|
import { type VbenFormSchema } from '#/adapter/form';
|
||||||
|
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
|
||||||
|
|
||||||
|
export const formSchema: VbenFormSchema[] = [
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
fieldName: 'name',
|
||||||
|
label: '岗位名称',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
fieldName: 'code',
|
||||||
|
label: '岗位编码',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Select',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
|
||||||
|
placeholder: '请选择',
|
||||||
|
},
|
||||||
|
fieldName: 'status',
|
||||||
|
label: '状态',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const columns: VxeGridProps['columns'] = [
|
||||||
|
{ title: '序号', type: 'seq', width: 50 },
|
||||||
|
{ field: 'id', title: '岗位编号' },
|
||||||
|
{ field: 'name', title: '岗位名称' },
|
||||||
|
{ field: 'code', title: '岗位编码' },
|
||||||
|
{ field: 'sort', title: '岗位顺序' },
|
||||||
|
{ field: 'remark', title: '岗位备注' },
|
||||||
|
{
|
||||||
|
field: 'status',
|
||||||
|
title: '状态',
|
||||||
|
cellRender: { name: 'CellDict', props: { type: DICT_TYPE.COMMON_STATUS } },
|
||||||
|
},
|
||||||
|
{ field: 'createTime', formatter: 'formatDateTime', title: '创建时间' },
|
||||||
|
{
|
||||||
|
field: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
slots: { default: 'action' },
|
||||||
|
title: $t('page.action.action'),
|
||||||
|
width: 160,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const modalSchema: VbenFormSchema[] = [
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
fieldName: 'id',
|
||||||
|
label: 'id',
|
||||||
|
dependencies: {
|
||||||
|
triggerFields: [''],
|
||||||
|
show: () => false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
fieldName: 'name',
|
||||||
|
label: '岗位标题',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
fieldName: 'code',
|
||||||
|
label: '岗位编码',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
fieldName: 'sort',
|
||||||
|
label: '岗位顺序',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Select',
|
||||||
|
componentProps: {
|
||||||
|
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
|
||||||
|
},
|
||||||
|
fieldName: 'status',
|
||||||
|
label: '状态',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Textarea',
|
||||||
|
fieldName: 'remark',
|
||||||
|
label: '备注',
|
||||||
|
},
|
||||||
|
];
|
||||||
Loading…
Reference in New Issue