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

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