签入版本

2026-09-12 12:07:15 +08:00
commit 0277034d24
939 changed files with 129356 additions and 0 deletions
@@ -0,0 +1,238 @@
+<template>
+  <div class="{{ app_name }}-index">
+    <n-card :bordered="false" class="pt-3 mb-3 proCard">
+      <n-spin :show="loading">
+        <BasicTable
+          ref="tableRef"
+          :columns="columns"
+          :request="loadDataTable"
+          :row-key="(row) => row.id"
+          :auto-scroll-x="true"
+          :action-column="actionColumn"
+          v-model:expanded-row-keys="expandKeys"
+        >
+          <template #tableTitle>
+            <n-space>
+              <n-button type="primary" @click="handleAdd()" v-perm="['{{ permission_prefix }}:add']">
+                <template #icon>
+                  <n-icon>
+                    <PlusOutlined />
+                  </n-icon>
+                </template>
+                新增{{ module_comment }}
+              </n-button>
+              <n-button @click="handleExpand">展开/折叠</n-button>
+            </n-space>
+          </template>
+        </BasicTable>
+      </n-spin>
+    </n-card>
+
+    <!-- 编辑对话框组件 -->
+    <editDialog
+      ref="editModalRef"
+      v-if="editVisible"
+      :{{ primary_key }}="{{ primary_key }}Value"
+      :parent-id="parentId"
+      v-model:visible="editVisible"
+      @success="reloadTable"
+    />
+    <!-- 查看详情对话框组件 -->
+    <detailDialog
+      ref="detailModalRef"
+      v-if="detailVisible"
+      :{{ primary_key }}="{{ primary_key }}Value"
+      v-model:visible="detailVisible"
+      @success="reloadTable"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup name="{{ model_class_name }}Index">
+  import { defineAsyncComponent, nextTick, onMounted, ref, reactive, h } from 'vue';
+  import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@vicons/antd';
+  import { TableAction } from '@/components/Table';
+  import { renderIcon } from '@/utils';
+  import { get{{ model_class_name }}List, {{ model_class_name_camel }}Delete } from '@/api/{{ api_path }}';
+  import { useMessage, useDialog } from 'naive-ui';
+  import { columns } from './columns';
+  import { buildTree } from '@/utils/auth';
+  import { getTreeValues } from '@/utils/helper/treeHelper';
+
+  // 动态导入编辑对话框组件
+  const editDialog = defineAsyncComponent(() => import('./edit.vue'));
+  // 动态导入详情对话框组件
+  const detailDialog = defineAsyncComponent(() => import('./detail.vue'));
+
+  // 消息提示和对话框
+  const message = useMessage();
+  const dialog = useDialog();
+
+  // 表格引用
+  const tableRef = ref();
+  const editModalRef = ref();
+  const detailModalRef = ref();
+
+  // 响应式状态
+  const loading = ref(false);
+  const editVisible = ref(false);
+  const detailVisible = ref(false);
+  const {{ primary_key }}Value = ref(0);
+  const parentId = ref(0);
+  const expandKeys = ref<(string | number)[]>([]);
+
+  /**
+   * 定义操作栏配置
+   * 包含新增、编辑、详情和删除按钮
+   */
+  const actionColumn = reactive({
+    width: 280,
+    title: '操作',
+    align: 'center',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '新增',
+            icon: renderIcon(PlusOutlined),
+            type: 'primary',
+            onClick: handleAdd.bind(null, record),
+            auth: ['{{ permission_prefix }}:add'],
+          },
+          {
+            label: '编辑',
+            icon: renderIcon(EditOutlined),
+            type: 'warning',
+            onClick: handleEdit.bind(null, record),
+            auth: ['{{ permission_prefix }}:update'],
+          },
+          {
+            label: '详情',
+            icon: renderIcon(EyeOutlined),
+            type: 'info',
+            onClick: handleDetail.bind(null, record),
+            auth: ['{{ permission_prefix }}:detail'],
+          },
+          {
+            label: '删除',
+            icon: renderIcon(DeleteOutlined),
+            type: 'error',
+            onClick: handleDelete.bind(null, record),
+            auth: ['{{ permission_prefix }}:delete'],
+          },
+        ],
+      });
+    },
+  });
+
+  /**
+   * 加载数据列表
+   */
+  const loadDataTable = async () => {
+    loading.value = true;
+    try {
+      const data = await get{{ model_class_name }}List();
+      const treeData = buildTree(data);
+      const result = {
+        records: treeData,
+        total: 1,
+      };
+      loading.value = false;
+      return result;
+    } catch (error) {
+      loading.value = false;
+      return { records: [], total: 0 };
+    }
+  };
+
+  /**
+   * 刷新表格数据
+   */
+  const reloadTable = () => {
+    tableRef.value?.reload();
+  };
+
+  /**
+   * 执行添加
+   * @param record 当前行数据（用于获取父级ID）
+   */
+  const handleAdd = async (record?: any) => {
+    {{ primary_key }}Value.value = 0;
+    parentId.value = record ? record.id : 0;
+    editVisible.value = true;
+    await nextTick();
+    editModalRef.value?.openModal();
+  };
+
+  /**
+   * 执行编辑
+   * @param record 当前行数据
+   */
+  const handleEdit = async (record: any) => {
+    {{ primary_key }}Value.value = record.id;
+    editVisible.value = true;
+    await nextTick();
+    editModalRef.value?.openModal();
+  };
+
+  /**
+   * 执行查看详情
+   * @param record 当前行数据
+   */
+  const handleDetail = async (record: any) => {
+    {{ primary_key }}Value.value = record.id;
+    detailVisible.value = true;
+    await nextTick();
+    detailModalRef.value?.openModal();
+  };
+
+  /**
+   * 执行删除
+   * @param record 当前行数据
+   */
+  const handleDelete = (record: any) => {
+    dialog.warning({
+      title: '提示',
+      content: '确定要删除选中的{{ module_comment }}吗？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: async () => {
+        loading.value = true;
+        try {
+          await {{ model_class_name_camel }}Delete(record.id);
+          message.success('删除成功');
+          reloadTable();
+        } catch (error) {
+          message.error('删除失败');
+        } finally {
+          loading.value = false;
+        }
+      },
+    });
+  };
+
+  /**
+   * 执行展开/折叠
+   */
+  const handleExpand = () => {
+    loading.value = true;
+    if (!expandKeys.value.length) {
+      expandKeys.value = getTreeValues(tableRef.value?.getDataSource() || [], 'id');
+    } else {
+      expandKeys.value = [];
+    }
+    loading.value = false;
+  };
+
+  /**
+   * 初始化
+   */
+  onMounted(() => {
+    loadDataTable();
+  });
+</script>
+
+<style scoped></style>