a-table 子级异步加载

 

<script lang="ts" setup>
import type { Dayjs } from 'dayjs';
import { Modal, message } from 'ant-design-vue';
import dayjs from 'dayjs';
import { columns } from './components/columns.tsx';
import MapDialog from './mapDialog.vue';
import mapModalDialog from './mapModalDialog.vue';
import morenum from './morenum.vue';
import defaultImg from '@/assets/images/achieveDisplay/defaltimg.jpg';

type RangeValue = [Dayjs, Dayjs];
const tableRef = ref();

const search = ref({
  state: '',
}) as any;
const createDate = ref<RangeValue>();
const mapDialogRef = ref();
const mapModalDialogRef = ref();

const statusList = ref([
  {
    label: '全部',
    value: '',
  },
  {
    label: '未开始',
    value: 0,
  },
  {
    label: '未完成',
    value: 1,
  },
  {
    label: '正常',
    value: 2,
  },
]);
const STATE = {
  0: '未开始',
  1: '未完成',
  2: '正常',
};
// 列表数据
const total = ref<number>(0);
const treeDate: any = ref([]);
async function queryData(params: any) {
  if (createDate.value && createDate.value.length) {
    search.value.createStartTime = dayjs(createDate.value[0]).format('YYYY-MM-DD HH:mm:ss');
    search.value.createEndTime = dayjs(createDate.value[1]).format('YYYY-MM-DD HH:mm:ss');
  }
  else {
    search.value.createStartTime = undefined;
    search.value.createEndTime = undefined;
  }
  const res = await getApiModelMakePageQuery({ ...params, ...search.value });
  total.value = res?.data?.total ?? 0;
  const list = res?.data?.records?.map((item, index) => {
    return {
      ...item,
      index: (res.data?.currentPage - 1) * res.data?.pageSize + index + 1,
    };
  });
  treeDate.value = list;
  return list ?? [];
}

// 重置
function reset() {
  search.value = {};
  search.value.state = '';
  createDate.value = undefined;
  tableRef.value.getList();
}

/**
 * 模型删除
 * @param type '1': 列表删除 '2': 单个删除
 * @param id
 */
function deleteItem(_type: string, _id: string) {
  Modal.confirm({
    title: '提示',
    content: '是否确认删除?',
    okText: '确认',
    cancelText: '取消',
    async onOk() {
      postApiModelMakeDelete({
        id: Number(_id),
      }).then((res) => {
        if (res.success) {
          message.success(res.msg);
          tableRef.value.getList();
        }
        else {
          message.error(res.msg);
        }
      });
    },
  });
}

function editItem(record: any) {
  mapDialogRef.value.open(record);
}
// 查看模型
function viewModal(record: any) {
  // 等于状态2才表示有模型 才能查看
  if (record.state === 2) {
    mapModalDialogRef.value.open({ id: record });
  }
  else {
    message.info('当前模型下没有已完成的建模');
  }
}
// 新建模型
function add() {
  mapDialogRef.value.open();
}
// 展示期数
const subItem: any = ref();
const expandedRowKeys: any = ref([]);
const defaultExpandedRowKeys: any = ref([]);
// 树节点展开方法 点击展开图标时的方法
// 利用es7的async await 可以等数据请求回来之后 进行后续流程，否则就会出现点击两次数据才显示
async function fatherExpand(expanded: any, record: any) {
  subItem.value = record;
  if (expanded) {
    await getChild(record);
    expandedRowKeys.value.push(record.id);
  }
  else {
    expandedRowKeys.value.splice(expandedRowKeys.value.indexOf(record.id), 1);
  }
}
function getChild(record: any) {
  return new Promise((resolve) => {
    getApiModelMakePeriodList({ modelMakeId: record.id }).then((res) => {
      // table默认带树表格,如果使用children作参数名则会出现两个表格
      if (res.success) {
        if (res.data && res.data !== null && res.data.length) {
          res.data.forEach((item) => {
            item.children = [];
          });
          record.list = res.data;
          if (record.list === null || record.list.length === 0) {
            record.hasChild = false;
            expandedRowKeys.value.splice(expandedRowKeys.value.indexOf(record.id), 1);
          }
          resolve();
        }
      }
    });
  });
}
// 期数新增
const morenumRef = ref();
function addNum(item: any) {
  morenumRef.value.open(item);
}
// 期数删除
function deleteNum(item: any) {
  Modal.confirm({
    title: '提示',
    content: '是否确认删除?',
    okText: '确认',
    cancelText: '取消',
    async onOk() {
      postApiModelMakePeriodDelete({
        id: item.id,
      }).then((res) => {
        if (res.success) {
          message.success(res.msg);
          tableRef.value.getList();
          expandedRowKeys.value = [];
        }
        else {
          message.error(res.msg);
        }
      });
    },
  });
}
function getNumadd() {
  tableRef.value.getList();
  expandedRowKeys.value = [];
}
</script>

<template>
  <div class="h-full flex flex-col">
    <div class="table_box w-full h-full px-6 flex flex-col min-h-0">
      <div class="search_box py-6 flex-none">
        <a-form layout="inline" :model="search">
          <a-form-item label="模型名称">
            <a-input v-model:value="search.name" placeholder="请输入模型名称" />
          </a-form-item>
          <a-form-item label="地址">
            <a-input v-model:value="search.address" placeholder="请输入地址" />
          </a-form-item>
          <a-form-item label="创建时间">
            <a-range-picker v-model:value="createDate" show-time class="w-80" />
          </a-form-item>
          <a-form-item label="制作状态">
            <a-select v-model:value="search.state" style="width: 10rem;" :options="statusList" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="tableRef.getList()">
              查询
            </a-button>
            <a-button class="ml-4" @click="reset">
              重置
            </a-button>
          </a-form-item>
        </a-form>
        <div class="mt-3">
          <a-button type="primary" @click="add">
            新建模型
          </a-button>
        </div>
      </div>
      <!-- <TableBox
        ref="tableRef" :is-opr="false" class="flex-auto min-h-0 overflow-hidden" :total="total"
        :columns="columns" :query-data="queryData" row-key="id" @expand="getexpand"
      > -->
      <TableBox
        ref="tableRef" :is-opr="false" class="flex-auto min-h-0 overflow-hidden" :total="total"
        :columns="columns" :query-data="queryData" row-key="id" :expanded-row-keys="expandedRowKeys"
        :default-expanded-row-keys="defaultExpandedRowKeys" @expand="fatherExpand"
      >
        <template #expandedRowRender="{ record }">
          <!-- <div v-if="loading" class="w-full flex items-center justify-center h-24">
          加载中<LoadingOutlined class="ml-3" />
          </div> -->
          <div v-if="record.list?.length > 0" class="flex">
            <div class="data-list w-94% inline-block">
              <div
                v-for="(item, index) in record.list" :key="index"
                class="relative inline-block m-r-10px m-b-10px cursor-pointer" @click.stop="viewModal(item)"
              >
                <a-image :src="item.url ? item.url : defaultImg" width="100%" height="100%" :preview="false" />
                <div
                  class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white font-size-12px p-1 flex justify-between"
                >
                  <div class="left">
                    创建时间：{{ item.createTime }}
                  </div>
                  <!-- 期数删除 -->
                  <div class="right">
                    <PubSvgIcon name="delete_icon" size="1rem" class="m-auto" @click.stop.prevent="deleteNum(item)" />
                  </div>
                </div>
              </div>
            </div>
            <div class="w-6%">
              <div class="add-btn" @click="addNum(record)">
                <PubSvgIcon name="plus" color="#fff" size="1rem" class="m-r-4px" />
                新增
              </div>
            </div>
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'address'">
            <a-tooltip :title="record.address">
              <div class="truncate">
                {{ record.address }}
              </div>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'longitude'">
            <div class="flex h-full flex-col">
              <ul v-if="record.longitude" class="times">
                <li>{{ record.longitude }}</li>
              </ul>
              <ul v-if="record.latitude" class="times">
                <li>{{ record.latitude }}</li>
              </ul>
            </div>
          </template>
          <template v-if="column.key === 'state'">
            {{ STATE[record.state] }}
          </template>
          <!-- 模型操作 -->
          <template v-if="column.key === 'action'">
            <a-tooltip placement="top" title="编辑">
              <PubSvgIcon name="edit_icon" size="1rem" class="m-r-6px cursor-pointer" @click="editItem(record)" />
            </a-tooltip>
            <a-tooltip placement="top" title="删除">
              <PubSvgIcon
                name="delete_icon" size="1rem" class="cursor-pointer"
                @click.stop.prevent="deleteItem('2', record.id)"
              />
            </a-tooltip>
          </template>
        </template>
      </TableBox>
    </div>
    <!-- 编辑名称 -->
    <MapDialog ref="mapDialogRef" @confirm="tableRef.getList()" />
    <mapModalDialog ref="mapModalDialogRef" />
    <!-- 期数添加 -->
    <morenum ref="morenumRef" @confirm="getNumadd" />
  </div>
</template>

<style lang="less" scoped>
.data-list {
  // grid布局
  display: inline-grid;
  grid-template-columns: repeat(8, 1fr);
}

.right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  cursor: pointer;
  background-color: #0c2e52;
  border: 1px solid #446d9e;
  border-radius: 4px;
}
</style>