303 lines
8.8 KiB
Smarty
303 lines
8.8 KiB
Smarty
<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> |