feat: system post finish 2/3

apps/web-antd/src/api/system/post/index.ts

@@ -12,7 +12,7 @@ export interface PostVO {
 
 // 查询岗位列表
 export function getPostPage(params: any) {
-  return requestClient.get('/system/post/page', params);
+  return requestClient.get('/system/post/page', { params });
 }
 
 // 获取岗位精简信息列表

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>

apps/web-antd/src/views/system/post/index.vue

@@ -2,48 +2,21 @@
 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: [
+  schema: formSchema,
-    {
-      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: '状态',
-    },
-  ],
   // 控制表单是否显示折叠按钮
   showCollapseButton: true,
   // 按下回车时是否提交表单
@@ -53,32 +26,15 @@ const formOptions: VbenFormProps = {
 const gridOptions: VxeGridProps<PostVO> = {
   checkboxConfig: {
     highlight: true,
-    labelField: 'name',
+    labelField: 'id',
   },
-  columns: [
+  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,
-    },
-  ],
   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,
@@ -89,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>
+      <template #toolbar-actions>
-        <!-- TODO: 操作 -->
+        <Button
-        <Button type="link">编辑</Button>
+          type="primary"
-        <Button type="link">删除</Button>
+          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>

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: '备注',
+  },
+];