签入版本
This commit is contained in:
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<div class="{{ app_name }}-index">
|
||||
<!-- 操作按钮卡片 -->
|
||||
<a-card :bordered="false" class="pt-3 mb-3 proCard">
|
||||
<div>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleAdd()" v-perm="['{{ permission_prefix }}:add']">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
新增{{ module_comment }}
|
||||
</a-button>
|
||||
<a-button @click="handleExpand">展开/折叠</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<!-- 数据表格卡片 -->
|
||||
<a-card :bordered="false" class="pt-3 mb-3 proCard">
|
||||
<a-spin :spinning="loading">
|
||||
<a-table
|
||||
border
|
||||
ref="tableRef"
|
||||
:dataSource="tableData"
|
||||
:columns="columns"
|
||||
:scroll="{ x: 'max-content', y: tableHeight + 'px' }"
|
||||
:style="{ minHeight: tableHeight + 'px' }"
|
||||
row-key="{{ primary_key }}"
|
||||
v-model:expandedRowKeys="expandKeys"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- 操作列 -->
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleAdd(record.id)"
|
||||
v-perm="['{{ permission_prefix }}:add']"
|
||||
>
|
||||
<template #icon><PlusOutlined /></template>
|
||||
新增
|
||||
</a-button>
|
||||
<a-button
|
||||
type="warning"
|
||||
@click="handleEdit(record)"
|
||||
v-perm="['{{ permission_prefix }}:update']"
|
||||
>
|
||||
<template #icon><EditOutlined /></template>
|
||||
编辑
|
||||
</a-button>
|
||||
<a-button
|
||||
type="default"
|
||||
@click="handleDetail(record)"
|
||||
v-perm="['{{ permission_prefix }}:detail']"
|
||||
>
|
||||
<template #icon><EyeOutlined /></template>
|
||||
详情
|
||||
</a-button>
|
||||
<a-button
|
||||
type="danger"
|
||||
@click="handleDelete(record)"
|
||||
v-perm="['{{ permission_prefix }}:delete']"
|
||||
>
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
删除
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 状态列（开关） -->
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-switch
|
||||
v-model:checked="record.status"
|
||||
:checked-value="1"
|
||||
:unchecked-value="0"
|
||||
@change="handleStatusChange(record)"
|
||||
v-perm="['{{ permission_prefix }}:status']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 图片列 -->
|
||||
<template v-else-if="column.isImage">
|
||||
<a-image
|
||||
v-if="record[column.dataIndex]"
|
||||
:src="record[column.dataIndex]"
|
||||
:width="40"
|
||||
:height="40"
|
||||
fit="cover"
|
||||
:preview="true"
|
||||
style="border-radius: 4px"
|
||||
/>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑对话框 -->
|
||||
<editDialog
|
||||
ref="editRef"
|
||||
v-if="editVisible"
|
||||
:{{ primary_key }}="{{ primary_key }}Value"
|
||||
:parentId="parentId"
|
||||
v-model:visible="editVisible"
|
||||
@success="getLists"
|
||||
/>
|
||||
|
||||
<!-- 详情对话框 -->
|
||||
<detailDialog
|
||||
v-if="detailVisible"
|
||||
:{{ primary_key }}="{{ primary_key }}Value"
|
||||
v-model:visible="detailVisible"
|
||||
@success="getLists"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="{{ model_class_name }}Index">
|
||||
import { defineAsyncComponent, nextTick, onMounted, ref } from 'vue';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons-vue';
|
||||
import { get{{ model_class_name }}List, {{ model_class_name_camel }}Delete } from '@/api/{{ api_path }}';
|
||||
import { Modal, message } from 'ant-design-vue';
|
||||
import { columns } from './columns';
|
||||
import { buildTree } from '@/utils/auth';
|
||||
|
||||
// 动态导入编辑对话框组件
|
||||
const editDialog = defineAsyncComponent(() => import('./edit.vue'));
|
||||
// 动态导入详情对话框组件
|
||||
const detailDialog = defineAsyncComponent(() => import('./detail.vue'));
|
||||
|
||||
// 表格高度
|
||||
const tableHeight = document.body.clientHeight - 320;
|
||||
|
||||
// 响应式状态
|
||||
const loading = ref(false);
|
||||
const editVisible = ref(false);
|
||||
const detailVisible = ref(false);
|
||||
const {{ primary_key }}Value = ref(0);
|
||||
const parentId = ref(0);
|
||||
const tableData = ref([]);
|
||||
const arrayList = ref([]);
|
||||
const expandAllRows = ref(false);
|
||||
const expandKeys = ref([]);
|
||||
|
||||
/**
|
||||
* 获取数据列表
|
||||
*/
|
||||
const getLists = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const data = await get{{ model_class_name }}List();
|
||||
arrayList.value = data;
|
||||
tableData.value = buildTree(data);
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行添加
|
||||
* @param parentIdParam 上级ID
|
||||
*/
|
||||
const handleAdd = async (parentIdParam?: number) => {
|
||||
{{ primary_key }}Value.value = 0;
|
||||
parentId.value = parentIdParam || 0;
|
||||
await nextTick();
|
||||
editVisible.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行编辑
|
||||
* @param row 当前行数据
|
||||
*/
|
||||
const handleEdit = async (row: any) => {
|
||||
{{ primary_key }}Value.value = row.id;
|
||||
await nextTick();
|
||||
editVisible.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行查看详情
|
||||
* @param row 当前行数据
|
||||
*/
|
||||
const handleDetail = async (row: any) => {
|
||||
{{ primary_key }}Value.value = row.id;
|
||||
await nextTick();
|
||||
detailVisible.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行删除
|
||||
* @param row 当前行数据
|
||||
*/
|
||||
const handleDelete = async (row: any) => {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除？',
|
||||
onOk: async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
await {{ model_class_name_camel }}Delete(row.id);
|
||||
message.success('删除成功');
|
||||
getLists();
|
||||
} catch (error) {
|
||||
message.error('删除失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
{% for field in list_fields %}
|
||||
{% if field.name == 'status' %}
|
||||
/**
|
||||
* 处理状态变更
|
||||
* @param row 当前行数据
|
||||
*/
|
||||
const handleStatusChange = async (row: any) => {
|
||||
try {
|
||||
await {{ model_class_name_camel }}Status(row.id, row.status);
|
||||
message.success('状态更新成功');
|
||||
} catch (error) {
|
||||
// 状态更新失败，回滚
|
||||
row.status = row.status === 1 ? 0 : 1;
|
||||
message.error('状态更新失败');
|
||||
}
|
||||
};
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
/**
|
||||
* 执行展开/折叠
|
||||
*/
|
||||
const handleExpand = () => {
|
||||
expandAllRows.value = !expandAllRows.value;
|
||||
toggleExpand();
|
||||
};
|
||||
|
||||
/**
|
||||
* 展开/折叠实现
|
||||
*/
|
||||
const toggleExpand = () => {
|
||||
expandKeys.value = [];
|
||||
if (expandAllRows.value) {
|
||||
arrayList.value.forEach((item) => {
|
||||
expandKeys.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
onMounted(() => {
|
||||
getLists();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user