feat: demo with code gen

2024-10-06 13:03:12 +08:00
parent 41fda26248
commit 64d4878628
10 changed files with 1002 additions and 8 deletions
--- a/apps/web-antd/src/views/demo/tree/index.vue
+++ b/apps/web-antd/src/views/demo/tree/index.vue
@@ -1,9 +1,147 @@
 <script setup lang="ts">
-import CommonSkeleton from '#/views/common';
+import type { Recordable } from '@vben/types';
+
+import { nextTick } from 'vue';
+
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { listToTree } from '@vben/utils';
+
+import { Popconfirm, Space } from 'ant-design-vue';
+
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
+
+import { treeList, treeRemove } from './api';
+import { columns, querySchema } from './data';
+import treeModal from './tree-modal.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    ajax: {
+      query: async (_, formValues = {}) => {
+        const resp = await treeList({
+          ...formValues,
+        });
+        const treeData = listToTree(resp, {
+          id: 'id',
+          pid: 'parentId',
+          children: 'children',
+        });
+        return { rows: treeData };
+      },
+      // 默认请求接口后展开全部 不需要可以删除这段
+      querySuccess: () => {
+        nextTick(() => {
+          expandAll();
+        });
+      },
+    },
+  },
+  rowConfig: {
+    isHover: true,
+    keyField: 'id',
+  },
+  round: true,
+  align: 'center',
+  showOverflow: true,
+  treeConfig: {
+    parentField: 'parentId',
+    rowField: 'id',
+    transform: false,
+  },
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
+const [TreeModal, modalApi] = useVbenModal({
+  connectedComponent: treeModal,
+});
+
+function handleAdd() {
+  modalApi.setData({ update: false });
+  modalApi.open();
+}
+
+async function handleEdit(row: Recordable<any>) {
+  modalApi.setData({ id: row.id, update: true });
+  modalApi.open();
+}
+
+async function handleDelete(row: Recordable<any>) {
+  await treeRemove(row.id);
+  await tableApi.query();
+}
+
+function expandAll() {
+  tableApi.grid?.setAllTreeExpand(true);
+}
+
+function collapseAll() {
+  tableApi.grid?.setAllTreeExpand(false);
+}
 </script>

 <template>
-  <div>
-    <CommonSkeleton />
-  </div>
+  <Page :auto-content-height="true">
+    <BasicTable>
+      <template #toolbar-actions>
+        <span class="pl-[7px] text-[16px]">测试树列表</span>
+      </template>
+      <template #toolbar-tools>
+        <Space>
+          <a-button @click="collapseAll">
+            {{ $t('pages.common.collapse') }}
+          </a-button>
+          <a-button @click="expandAll">
+            {{ $t('pages.common.expand') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['demo:tree:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <a-button
+          size="small"
+          type="link"
+          v-access:code="['demo:tree:edit']"
+          @click="handleEdit(row)"
+        >
+          {{ $t('pages.common.edit') }}
+        </a-button>
+        <Popconfirm
+          placement="left"
+          title="确认删除？"
+          @confirm="handleDelete(row)"
+        >
+          <a-button
+            danger
+            size="small"
+            type="link"
+            v-access:code="['demo:tree:remove']"
+            @click.stop=""
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+        </Popconfirm>
+      </template>
+    </BasicTable>
+    <TreeModal @reload="tableApi.query()" />
+  </Page>
 </template>