From bb63de3f15edb67c0b794773b41e2283b4b16485 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 24 Mar 2025 21:34:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20system=20post=20finish=202/3=E3=80=9098?=
 =?UTF-8?q?a91e1c=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/system/post/index.vue | 127 +++++++++---------
 .../src/views/system/post/post.data.ts        | 103 ++++++++++++++
 .../src/views/system/post/postModal.vue       |  54 ++++++++
 3 files changed, 224 insertions(+), 60 deletions(-)
 create mode 100644 apps/web-antd/src/views/system/post/post.data.ts
 create mode 100644 apps/web-antd/src/views/system/post/postModal.vue

diff --git a/apps/web-antd/src/views/system/post/index.vue b/apps/web-antd/src/views/system/post/index.vue
index a71ba7683..d742c3f55 100644
--- a/apps/web-antd/src/views/system/post/index.vue
+++ b/apps/web-antd/src/views/system/post/index.vue
@@ -1,50 +1,22 @@
 <script lang="ts" setup>
-// TODO @芋艿：优化注释；
 import type { VbenFormProps } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { Page } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
-import { message } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getPostPage, type PostVO } from '#/api/system/post';
+import { exportPost, getPostPage, type PostVO } from '#/api/system/post';
+
+import { columns, formSchema } from './post.data';
+import PostModal from './PostModal.vue';
 
 const formOptions: VbenFormProps = {
   // 默认展开
   collapsed: false,
-  schema: [
-    {
-      component: 'Input',
-      fieldName: 'name',
-      label: '岗位名称',
-    },
-    {
-      component: 'Input',
-      fieldName: 'code',
-      label: '岗位编码',
-    },
-    // TODO: dict
-    {
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: [
-          {
-            label: 'Color1',
-            value: '1',
-          },
-          {
-            label: 'Color2',
-            value: '2',
-          },
-        ],
-        placeholder: '请选择',
-      },
-      fieldName: 'status',
-      label: '状态',
-    },
-  ],
+  schema: formSchema,
   // 控制表单是否显示折叠按钮
   showCollapseButton: true,
   // 按下回车时是否提交表单
@@ -54,32 +26,15 @@ const formOptions: VbenFormProps = {
 const gridOptions: VxeGridProps<PostVO> = {
   checkboxConfig: {
     highlight: true,
-    labelField: 'name',
+    labelField: 'id',
   },
-  columns: [
-    { title: '序号', type: 'seq', width: 50 },
-    { field: 'id', title: '岗位编号' },
-    { field: 'name', title: '岗位名称' },
-    { field: 'code', title: '岗位编码' },
-    { field: 'sort', title: '岗位顺序' },
-    { field: 'remark', title: '岗位备注' },
-    { field: 'status', title: '状态' },
-    { field: 'createTime', formatter: 'formatDateTime', title: '创建时间' },
-    {
-      cellRender: { name: 'CellLink', props: { text: '编辑' } },
-      field: 'action',
-      fixed: 'right',
-      title: '操作',
-      width: 120,
-    },
-  ],
+  columns,
   height: 'auto',
   keepSource: true,
   pagerConfig: {},
   proxyConfig: {
     ajax: {
       query: async ({ page }, formValues) => {
-        message.success(`Query params: ${JSON.stringify(formValues)}`);
         return await getPostPage({
           page: page.currentPage,
           pageSize: page.pageSize,
@@ -90,17 +45,69 @@ const gridOptions: VxeGridProps<PostVO> = {
   },
 };
 
-const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
+const [Grid, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: PostModal,
+});
+
+function handleCreate() {
+  formModalApi.setData({
+    valuse: {},
+  });
+  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 exportPost(tableApi.formApi.form.values);
+}
 </script>
 
 <template>
   <Page auto-content-height>
     <Grid>
-      <template #action>
-        <!-- TODO: 操作 -->
-        <Button type="link">编辑</Button>
-        <Button type="link">删除</Button>
+      <template #toolbar-actions>
+        <Button
+          type="primary"
+          v-access:code="['system:post:create']"
+          @click="handleCreate"
+        >
+          {{ $t('page.action.add') }}
+        </Button>
+        <Button
+          class="ml-4"
+          v-access:code="['system:post:export']"
+          @click="handleExport"
+        >
+          {{ $t('page.action.export') }}
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <Button
+          type="link"
+          v-access:code="['system:post:update']"
+          @click="handleEdit(row.id)"
+        >
+          {{ $t('page.action.edit') }}
+        </Button>
+        <Button
+          danger
+          type="link"
+          v-access:code="['system:post:delete']"
+          @click="handleDelete(row.id)"
+        >
+          {{ $t('page.action.delete') }}
+        </Button>
       </template>
     </Grid>
+    <FormModal />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/system/post/post.data.ts b/apps/web-antd/src/views/system/post/post.data.ts
new file mode 100644
index 000000000..f8851cc01
--- /dev/null
+++ b/apps/web-antd/src/views/system/post/post.data.ts
@@ -0,0 +1,103 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { $t } from '@vben/locales';
+
+import { type VbenFormSchema } from '#/adapter/form';
+
+export const formSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: '岗位名称',
+  },
+  {
+    component: 'Input',
+    fieldName: 'code',
+    label: '岗位编码',
+  },
+  // TODO: dict
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: true,
+      options: [
+        {
+          label: 'Color1',
+          value: '1',
+        },
+        {
+          label: 'Color2',
+          value: '2',
+        },
+      ],
+      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: '状态' },
+  { 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: [
+        { label: '选项1', value: '1' },
+        { label: '选项2', value: '2' },
+      ],
+    },
+    fieldName: 'status',
+    label: '状态',
+    rules: 'required',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    label: '备注',
+  },
+];
diff --git a/apps/web-antd/src/views/system/post/postModal.vue b/apps/web-antd/src/views/system/post/postModal.vue
new file mode 100644
index 000000000..64ce6a2de
--- /dev/null
+++ b/apps/web-antd/src/views/system/post/postModal.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { createPost, getPost, updatePost } from '#/api/system/post';
+
+import { modalSchema } from './post.data';
+
+defineOptions({ name: 'PostModel' });
+
+const isUpdate = ref(false);
+
+const [Form, formApi] = useVbenForm({
+  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 = !!id;
+      if (id) {
+        const values = await getPost(id);
+        formApi.setValues(values);
+      }
+    }
+  },
+  title: isUpdate.value ? '新增岗位' : '编辑岗位',
+});
+
+async function onSubmit(values: Record<string, any>) {
+  await (isUpdate.value
+    ? updatePost(values as any)
+    : createPost(values as any));
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+<template>
+  <Modal class="w-1/2">
+    <Form />
+  </Modal>
+</template>