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

<template>
  <div class="{{ app_name }}-index">
    <el-card :bordered="false" class="pt-3 mb-3 proCard">
      <div>
        <el-button type="primary" @click="handleAdd()" v-perm="['{{ permission_prefix }}:add']">
          <template #icon>
            <el-icon>
              <plus />
            </el-icon>
          </template>
          新增{{ module_comment }}
        </el-button>
        <el-button @click="handleExpand"> 展开/折叠</el-button>
      </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="{{ primary_key }}"
        :height="tableHeight"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        {% for field in list_fields %}
        {% if field.choices %}
        <el-table-column
          label="{{ field.label }}"
          prop="{{ field.camel_name }}"
          align="center"
          min-width="100"
        >
          <template #default="{ row }">
            {% for choice in field.choices %}
            <el-tag {% if loop.index0 == 0 %}v-if="row.{{ field.camel_name }} == {{ choice.value }}"{% endif %}
              {% if loop.index0 > 0 %}v-else-if="row.{{ field.camel_name }} == {{ choice.value }}"{% endif %}
              {% if choice.type %}type="{{ choice.type }}"{% endif %}> {{ choice.label }} </el-tag>
            {% endfor %}
          </template>
        </el-table-column>
        {% elif field.is_image %}
        <el-table-column
          label="{{ field.label }}"
          prop="{{ field.camel_name }}"
          align="center"
          min-width="100"
        >
          <template #default="{ row }">
            <el-image
              v-if="row.{{ field.camel_name }}"
              :src="row.{{ field.camel_name }}"
              :preview-src-list="[row.{{ field.camel_name }}]"
              fit="cover"
              style="width: 40px; height: 40px; border-radius: 4px;"
            />
            <span v-else>-</span>
          </template>
        </el-table-column>
        {% else %}
        <el-table-column
          label="{{ field.label }}"
          prop="{{ field.camel_name }}"
          min-width="150"
          {% if field.camel_name != display_field_camel %}
          align="center"
          {% endif %}
          show-overflow-tooltip
        />
        {% endif %}
        {% endfor %}
        <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="['{{ permission_prefix }}:add']"
            >
              新增
            </el-button>
            <el-button
              type="warning"
              icon="Edit"
              @click="handleEdit(row)"
              v-perm="['{{ permission_prefix }}:update']"
            >
              编辑
            </el-button>
            <el-button
              type="info"
              icon="View"
              @click="handleDetail(row)"
              v-perm="['{{ permission_prefix }}:detail']"
            >
              详情
            </el-button>
            <el-button
              type="danger"
              icon="Delete"
              @click="handleDelete(row)"
              v-perm="['{{ permission_prefix }}:delete']"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-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, shallowRef } from 'vue';
  import { get{{ model_class_name }}List, {{ model_class_name_camel }}Delete } from '@/api/{{ api_path }}';
  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); // 详情对话框显示状态
  const {{ primary_key }}Value = ref(0);
  const parentId = ref(0);
  const tableData = ref([]);

  /**
   * 获取数据列表
   */
  const getLists = async () => {
    loading.value = true;
    try {
      const data = await get{{ model_class_name }}List();
      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) => {
    await confirm('确定要删除？');
    try {
      loading.value = true;
      await {{ model_class_name_camel }}Delete(row.id);
      message('删除成功');
      getLists();
    } catch (e) {
      loading.value = false;
    }
  };

  /**
   * 执行展开/折叠
   */
  const handleExpand = () => {
    isExpand.value = !isExpand.value;
    toggleExpand(tableData.value, isExpand.value);
  };

  /**
   * 递归展开/折叠所有节点
   * @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();
  });
</script>

<style scoped></style>