From d5dab14d8be4d8508d2805fb8d0dd4260c0f0cae Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Wed, 18 Dec 2024 15:35:06 +0800
Subject: [PATCH] feat: add notice

---
 apps/web-antd/src/api/system/notice/index.ts  |  47 +++++++
 .../src/views/system/notice/index.vue         | 128 ++++++++++++++++++
 .../src/views/system/notice/notice-form.vue   |  66 +++++++++
 .../src/views/system/notice/notice.data.ts    |  95 +++++++++++++
 4 files changed, 336 insertions(+)
 create mode 100644 apps/web-antd/src/api/system/notice/index.ts
 create mode 100644 apps/web-antd/src/views/system/notice/index.vue
 create mode 100644 apps/web-antd/src/views/system/notice/notice-form.vue
 create mode 100644 apps/web-antd/src/views/system/notice/notice.data.ts

diff --git a/apps/web-antd/src/api/system/notice/index.ts b/apps/web-antd/src/api/system/notice/index.ts
new file mode 100644
index 00000000..b368ee69
--- /dev/null
+++ b/apps/web-antd/src/api/system/notice/index.ts
@@ -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);
+}
diff --git a/apps/web-antd/src/views/system/notice/index.vue b/apps/web-antd/src/views/system/notice/index.vue
new file mode 100644
index 00000000..989b4486
--- /dev/null
+++ b/apps/web-antd/src/views/system/notice/index.vue
@@ -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>
diff --git a/apps/web-antd/src/views/system/notice/notice-form.vue b/apps/web-antd/src/views/system/notice/notice-form.vue
new file mode 100644
index 00000000..4d526488
--- /dev/null
+++ b/apps/web-antd/src/views/system/notice/notice-form.vue
@@ -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>
diff --git a/apps/web-antd/src/views/system/notice/notice.data.ts b/apps/web-antd/src/views/system/notice/notice.data.ts
new file mode 100644
index 00000000..05e94fef
--- /dev/null
+++ b/apps/web-antd/src/views/system/notice/notice.data.ts
@@ -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: '备注',
+  },
+];