feat: 新增主子表erp模式代码预览

apps/web-antd/src/views/infra/demo/demo03/erp/index.vue

@@ -0,0 +1,155 @@
+<script lang="ts" setup>
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import Demo03CourseList from './modules/demo03-course-list.vue';
+import Demo03GradeList from './modules/demo03-grade-list.vue';
+import Form from './modules/form.vue';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { Download, Plus } from '@vben/icons';
+import { Button, message, Tabs } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteDemo03Student, exportDemo03Student, getDemo03StudentPage } from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+import { downloadByData } from '#/utils/download';
+import { h, ref } from 'vue';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 子表的列表 */
+const subTabsName = ref('demo03Course');
+const selectDemo03Student = ref<Demo03StudentApi.Demo03Student>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建学生 */
+function onCreate() {
+  formModalApi.setData({}).open();
+}
+
+/** 编辑学生 */
+function onEdit(row: Demo03StudentApi.Demo03Student) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生 */
+async function onDelete(row: Demo03StudentApi.Demo03Student) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deleteDemo03Student(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+      key: 'action_process_msg',
+    });
+    onRefresh();
+  } catch {
+    hideLoading();
+  }
+}
+
+/** 导出表格 */
+async function onExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadByData(data, '学生.xls');
+}
+
+/** 表格操作按钮的回调函数 */
+function onActionClick({ code, row }: OnActionClickParams<Demo03StudentApi.Demo03Student>) {
+  switch (code) {
+    case 'edit': {
+      onEdit(row);
+      break;
+    }
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(onActionClick),
+    height: '600px',
+    pagerConfig: {
+      enabled: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDemo03StudentPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+      isCurrent: true,
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
+  gridEvents: {
+    cellClick: ({ row }: { row: Demo03StudentApi.Demo03Student }) => {
+      selectDemo03Student.value = row;
+    },
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+
+    <div>
+      <Grid table-title="学生列表">
+        <template #toolbar-tools>
+          <Button :icon="h(Plus)" type="primary" @click="onCreate" v-access:code="['infra:demo03-student:create']">
+            {{ $t('ui.actionTitle.create', ['学生']) }}
+          </Button>
+          <Button
+            :icon="h(Download)"
+            type="primary"
+            class="ml-2"
+            @click="onExport"
+            v-access:code="['infra:demo03-student:export']"
+          >
+            {{ $t('ui.actionTitle.export') }}
+          </Button>
+        </template>
+      </Grid>
+
+      <!-- 子表的表单 -->
+      <Tabs v-model:active-key="subTabsName" class="mt-2">
+        <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+          <Demo03CourseList :student-id="selectDemo03Student?.id" />
+        </Tabs.TabPane>
+        <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+          <Demo03GradeList :student-id="selectDemo03Student?.id" />
+        </Tabs.TabPane>
+      </Tabs>
+    </div>
+  </Page>
+</template>