feat: post demo

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

@@ -0,0 +1,46 @@
+import { requestClient } from '#/api/request';
+
+export interface PostVO {
+  id?: number;
+  name: string;
+  code: string;
+  sort: number;
+  status: number;
+  remark: string;
+  createTime?: Date;
+}
+
+// 查询岗位列表
+export function getPostPage(params: any) {
+  return requestClient.get('/system/post/page', params);
+}
+
+// 获取岗位精简信息列表
+export function getSimplePostList() {
+  return requestClient.get('/system/post/simple-list');
+}
+
+// 查询岗位详情
+export function getPost(id: number) {
+  return requestClient.get(`/system/post/get?id=${id}`);
+}
+
+// 新增岗位
+export function createPost(data: PostVO) {
+  return requestClient.post('/system/post/create', data);
+}
+
+// 修改岗位
+export function updatePost(data: PostVO) {
+  return requestClient.put('/system/post/update', data);
+}
+
+// 删除岗位
+export function deletePost(id: number) {
+  return requestClient.delete(`/system/post/delete?id=${id}`);
+}
+
+// 导出岗位
+export function exportPost(params: any) {
+  return requestClient.download('/system/post/export', params);
+}

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

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { Page } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getPostPage, type PostVO } from '#/api/system/post';
+
+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: '状态',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeGridProps<PostVO> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: 'name',
+  },
+  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,
+          ...formValues,
+        });
+      },
+    },
+  },
+};
+
+const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid>
+      <template #action>
+        <!-- TODO: 操作 -->
+        <Button type="link">编辑</Button>
+        <Button type="link">删除</Button>
+      </template>
+    </Grid>
+  </Page>
+</template>