签入版本

2026-10-20 19:07:36 +08:00
commit 1b9bdac12f
882 changed files with 106953 additions and 0 deletions
@@ -0,0 +1,303 @@
+<template>
+  <!-- [[$.ModuleComment]]列表页（树形结构） -->
+  <div class="[[$.AppName]]-index">
+    <!-- 顶部工具栏 -->
+    <el-card :bordered="false" class="pt-3 mb-3 proCard">
+      <div>
+        <!-- 新增顶级节点 -->
+        <el-button type="primary" @click="handleAdd()" v-perm="['[[$.PermissionPrefix]]:add']">
+          <template #icon>
+            <el-icon>
+              <plus />
+            </el-icon>
+          </template>
+          新增[[$.ModuleComment]]
+        </el-button>
+        <!-- 展开/折叠全部节点 -->
+        <el-button @click="handleExpand"> 展开/折叠</el-button>
+[[- if $.HasExport]]
+        <!-- 导出 -->
+        <el-button type="" @click="handleExport" :loading="exportLoading" :disabled="exportLoading" v-perm="['[[$.PermissionPrefix]]:export']">
+          <template #icon>
+            <el-icon><Download /></el-icon>
+          </template>
+          导出
+        </el-button>
+[[- end]]
+      </div>
+    </el-card>
+
+    <!-- 树形表格 -->
+    <el-card :bordered="false" class="pt-3 mb-3 proCard">
+      <el-table
+        border
+        v-loading="loading"
+        ref="tableRef"
+        :data="tableData"
+        row-key="[[$.PrimaryPk]]"
+        :height="tableHeight"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+[[- range $field := .ListFields]]
+[[- if $field.Choices]]
+        <!-- [[.Label]]（选项标签） -->
+        <el-table-column
+          label="[[.Label]]"
+          prop="[[.CamelName]]"
+          align="center"
+          min-width="100"
+        >
+          <template #default="{ row }">
+            [[- range $i, $choice := .Choices]]
+            <el-tag [[if eq $i 0]]v-if="row.[[$field.CamelName]] == [[.Value]]"[[end]]
+              [[if gt $i 0]]v-else-if="row.[[$field.CamelName]] == [[.Value]]"[[end]]
+              [[if .Type]]type="[[.Type]]"[[end]]>[[.Label]]</el-tag>
+            [[- end]]
+          </template>
+        </el-table-column>
+[[- else if .IsImage]]
+        <!-- [[.Label]]（图片，支持点击预览） -->
+        <el-table-column
+          label="[[.Label]]"
+          prop="[[.CamelName]]"
+          align="center"
+          min-width="100"
+        >
+          <template #default="{ row }">
+            <el-image
+              v-if="row.[[.CamelName]]"
+              :src="row.[[.CamelName]]"
+              :preview-src-list="[row.[[.CamelName]]]"
+              fit="cover"
+              style="width: 40px; height: 40px; border-radius: 4px;"
+            />
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+[[- else]]
+        <!-- [[.Label]]（普通文本，超长省略） -->
+        <el-table-column
+          label="[[.Label]]"
+          prop="[[.CamelName]]"
+          min-width="150"
+[[- if ne .CamelName $.DisplayFieldCamel]]
+          align="center"
+[[- end]]
+          show-overflow-tooltip
+        />
+[[- end]]
+[[- end]]
+        <!-- 操作栏：含新增子级、编辑、详情、删除 -->
+        <el-table-column align="center" label="操作" width="400" fixed="right">
+          <template #default="{ row }">
+            <el-button
+              type="primary"
+              icon="Plus"
+              @click="handleAdd(row.id)"
+              v-perm="['[[$.PermissionPrefix]]:add']"
+            >
+              新增
+            </el-button>
+            <el-button
+              type="warning"
+              icon="Edit"
+              @click="handleEdit(row)"
+              v-perm="['[[$.PermissionPrefix]]:update']"
+            >
+              编辑
+            </el-button>
+            <el-button
+              icon="View"
+              @click="handleDetail(row)"
+              v-perm="['[[$.PermissionPrefix]]:detail']"
+            >
+              详情
+            </el-button>
+            <el-button
+              type="danger"
+              icon="Delete"
+              @click="handleDelete(row)"
+              v-perm="['[[$.PermissionPrefix]]:delete']"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <!-- 新增/编辑弹窗，parentId 用于新增时预选上级 -->
+    <editDialog
+      ref="editRef"
+      v-if="editVisible"
+      :[[$.PrimaryPk]]="[[$.PrimaryPk]]Value"
+      :parentId="parentId"
+      v-model:visible="editVisible"
+      @success="getLists"
+    />
+    <!-- 详情弹窗 -->
+    <detailDialog
+      v-if="detailVisible"
+      :[[$.PrimaryPk]]="[[$.PrimaryPk]]Value"
+      v-model:visible="detailVisible"
+      @success="getLists"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup name="[[$.ModelClass]]Index">
+  import { defineAsyncComponent, nextTick, onMounted, ref, shallowRef } from 'vue';
+  import { get[[$.ModelClass]]List, [[$.ModuleCamel]]Delete[[if $.HasExport]], [[$.ModuleCamel]]Export[[end]] } from '@/api/[[$.ApiPath]]';
+  import type { ElTable } from 'element-plus';
+  import { confirm, message, buildTree } from '@/utils/auth';
+
+  // 动态导入编辑对话框组件
+  const editDialog = defineAsyncComponent(() => import('./edit.vue'));
+  // 动态导入详情对话框组件
+  const detailDialog = defineAsyncComponent(() => import('./detail.vue'));
+
+  // 表格引用
+  const tableRef = shallowRef<InstanceType<typeof ElTable>>();
+
+  // 表格高度，按视口高度减去固定区域动态计算
+  const tableHeight = document.body.clientHeight - 320;
+
+  // 响应式状态
+  const isExpand = ref(false); // 当前展开状态，供"展开/折叠"切换
+  const loading = ref(false); // 表格加载状态
+  const editVisible = ref(false); // 编辑弹窗显示状态
+  const detailVisible = ref(false); // 详情对话框显示状态
+[[- if $.HasExport]]
+  const exportLoading = ref(false); // 导出按钮加载状态
+[[- end]]
+  const [[$.PrimaryPk]]Value = ref(0); // 当前操作的主键值
+  const parentId = ref(0); // 新增子级时的父级 ID
+  const tableData = ref([]); // 表格数据（树形结构）
+
+  /**
+   * 加载数据列表
+   *
+   * 请求全量列表后通过 buildTree 组装为树，
+   * 赋值给 tableData 供树形表格渲染。
+   * 无论成功失败都会关闭 loading。
+   */
+  const getLists = async () => {
+    loading.value = true;
+    try {
+      const data = await get[[$.ModelClass]]List();
+      tableData.value = buildTree(data);
+      loading.value = false;
+    } catch (error) {
+      loading.value = false;
+    }
+  };
+
+  /**
+   * 打开新增弹窗
+   *
+   * 不传 parentIdParam 时新增顶级节点，
+   * 传入时新增该节点的子级（父级预选）。
+   *
+   * @param parentIdParam 上级ID（可选）
+   */
+  const handleAdd = async (parentIdParam?: number) => {
+    [[$.PrimaryPk]]Value.value = 0;
+    parentId.value = parentIdParam || 0;
+    await nextTick();
+    editVisible.value = true;
+  };
+
+  /**
+   * 打开编辑弹窗
+   *
+   * @param row 当前行数据
+   */
+  const handleEdit = async (row: any) => {
+    [[$.PrimaryPk]]Value.value = row.id;
+    await nextTick();
+    editVisible.value = true;
+  };
+
+  /**
+   * 打开详情弹窗
+   *
+   * @param row 当前行数据
+   */
+  const handleDetail = async (row: any) => {
+    [[$.PrimaryPk]]Value.value = row.id;
+    await nextTick();
+    detailVisible.value = true;
+  };
+
+  /**
+   * 删除数据
+   *
+   * 先弹出确认框，确认后调用删除接口并刷新列表；
+   * 失败时恢复 loading 状态。
+   *
+   * @param row 当前行数据
+   */
+  const handleDelete = async (row: any) => {
+    await confirm('确定要删除？');
+    try {
+      loading.value = true;
+      await [[$.ModuleCamel]]Delete(row.id);
+      message('删除成功');
+      getLists();
+    } catch (e) {
+      loading.value = false;
+    }
+  };
+
+  /**
+   * 切换全部节点的展开/折叠
+   *
+   * 翻转 isExpand 后递归调用 toggleExpand。
+   */
+  const handleExpand = () => {
+    isExpand.value = !isExpand.value;
+    toggleExpand(tableData.value, isExpand.value);
+  };
+
+  /**
+   * 递归展开/折叠所有节点
+   *
+   * 借助 el-table 的 toggleRowExpansion 控制每一行，
+   * 若该行仍有 children 则继续递归。
+   *
+   * @param children 子级数据
+   * @param unfold 是否展开
+   */
+  const toggleExpand = (children: any[], unfold = true) => {
+    for (const key in children) {
+      tableRef.value?.toggleRowExpansion(children[key], unfold);
+      if (children[key].children) {
+        toggleExpand(children[key].children!, unfold);
+      }
+    }
+  };
+
+  /**
+   * 组件挂载后加载列表
+   */
+  onMounted(() => {
+    getLists();
+  });
+[[- if $.HasExport]]
+  /**
+   * 导出数据
+   *
+   * 树形结构导出不带筛选条件，拿到文件 URL 后新窗口打开；
+   * 导出期间按钮保持 loading，避免重复点击。
+   */
+  const handleExport = async () => {
+    exportLoading.value = true;
+    const data = await [[$.ModuleCamel]]Export({});
+    window.open(data);
+    exportLoading.value = false;
+    message('导出成功');
+  };
+[[- end]]
+</script>
+
+<style scoped></style>