DjangoAdmin_Django_NaiveVue/public/templates/ui2/index.vue.tpl

<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>