caseEditor/src/view/vrmodel/sceneContent.vue

<template>
  <el-table
    class="mybody-head"
    :data="pagging.state.table.rows"
    ref="tableRef"
    tooltip-effect="dark"
    style="width: 100%;height: 250px;"
    :height="250"
    size="large"
    @selection-change="changeSelection"
  >
    <!-- -1 计算失败  0 计算中 1 计算成功并可以外网访问，不能编辑 2计算成功只能内网，能编辑 -->
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <!-- <el-table-column label="序号" width="70" v-slot:default="{ $index }">
      <div style="text-align: center">
        {{ pagging.state.pag.size * (pagging.state.pag.currentPage - 1) + $index + 1 }}
      </div>
    </el-table-column> -->
    <el-table-column label="场景标题" prop="sceneName"></el-table-column>
    <el-table-column label="S/N码" prop="snCode"></el-table-column>
    <!-- <el-table-column label="浏览数量" prop="viewCount"></el-table-column> -->
    <el-table-column label="拍摄时间" prop="createTime" v-slot:default="{ row }">
      {{ row.createTime.substr(0, 16) }}
    </el-table-column>
    <el-table-column label="状态" v-slot:default="{ row }: { row: QuoteScene }">
      {{ row.statusString }}
    </el-table-column>
    <!-- <el-table-column label="所属架构" prop="deptName"></el-table-column> -->
    <!-- <el-table-column label="操作" v-slot:default="{ row }: { row: QuoteScene }">
      <span
        class="oper-span"
        v-pdpath="['view']"
        @click="openSceneUrl(row, OpenType.query)"
        v-if="row.status === QuoteSceneStatus.SUCCESS"
      >
        查看
      </span>
      <span
        class="oper-span"
        v-pdpath="['edit']"
        @click="openSceneUrl(row, OpenType.edit)"
        v-if="row.status === QuoteSceneStatus.SUCCESS"
      >
        编辑
      </span>
      <span
        v-if="
          [SceneType.SWSS, SceneType.SWYDSS].includes(row.type) &&
          [QuoteSceneStatus.SUCCESS].includes(row.status) &&
          row.location === LocationEnum.Scene_Location_PointCloud
        "
        v-pdpath="['gen']"
        class="oper-span"
        @click="genMeshScene(row)"
      >
        生成obj
      </span>

      <span
        v-if="
          ![SceneType.SWSSMX, SceneType.SWYDMX].includes(row.type) &&
          row.status !== QuoteSceneStatus.RUN
        "
        class="oper-span delBtn"
        v-pdscene="row"
        @click="delSceneHandler(row)"
        v-pdpath="'del'"
      >
        删除
      </span>
      <span
        class="oper-span"
        @click="sceneDownloadHandler(row)"
        v-pdpath="['download']"
        v-if="row.num && row.status === QuoteSceneStatus.SUCCESS"
      >
        下载
      </span>
    </el-table-column> -->
  </el-table>
</template>

<script setup lang="ts">
import {
  QuoteScene,
  QuoteSceneStatus,
  delQuoteScene,
  SceneType,
  genMeshScene,
  LocationEnum,
} from "@/store/scene";
import { getSceneListTree } from "@/store/case";
import { QuoteSceneStatusDesc } from "@/constant/scene";
import { OpenType, openSceneUrl } from "../case/help";
import { confirm } from "@/helper/message";
import { router } from "@/router";
import { sceneDownload } from "./quisk";
import { useScenePaggingParams, ScenePagging } from "./pagging";
import { QuiskExpose } from "@/helper/mount";
import { onMounted, ref, watch, watchEffect, computed, nextTick } from "vue";
import {
  getCaseSceneList,
  getCaseScenes,
  getSceneKey,
  replaceCaseScenes,
  setCaseaddOrUpdate,
} from "@/store/case";
// const params = useScenePaggingParams();
const props = defineProps<{ pagging: ScenePagging, numList: Array<string> }>();
const caseId = computed(() => (router.currentRoute.value?.params?.caseId));
const tableRef = ref(null);
const caseScenes = ref([
  {
    type: 0,
    numList: [],
  },
  {
    type: 1,
    numList: [],
  }
]);
const selectList = ref({
  0: [],
  1: [],
})
const pagScenes = props.pagging.state.table.rows;
caseScenes.value = getSceneListTree()
console.log('caseScenes', selectList, pagScenes);
const submit = async () => {
  const apiData = {
    caseId: caseId.value,
    sceneNumParam: caseScenes.value,
  };
  await setCaseaddOrUpdate(apiData)
  // params.pagging.queryReset()
  }
defineExpose<QuiskExpose>({
  submit
});



const isObj = ref(props.pagging.state.query?.isObj);
const delSceneHandler = async (scene: QuoteScene) => {
  if (await confirm("确定要删除当前场景吗？")) {
    await delQuoteScene(scene);
    props.pagging.refresh();
  }
};
console.log('propsnumList', props.numList);
const selectable = (row) => {
  // let selectlist = selectList.find(item => item.type == params.pagging.state.query?.isObj)?.numList;
  if (row.inCase) return false;
  return row.statusString == '计算成功'// && !selectlist.includes(row.num)
}

// watch(()=>props.pagging.state.query.isObj, (newVal, oldVal) => {
//   let scene = selectList.value[newVal]
//   if (params.pagging.loading) return;
//   console.log('newVal---', selectList.value, scene, tableRef.value); //newVal--- 修改的数据1
//   scene.forEach(item => {
//       tableRef.value!.toggleRowSelection(item, true);
//   })
//   // props.pagging.changeSelectRows(selectList.value)
//   // tableRef.value.toggleRowSelection(scene, true);
//   console.log('newVal---', newVal); //newVal--- 修改的数据1
//   console.log('oldVal---', oldVal); //oldVal--- ref数据
// });
// 复选框同步
let changIng = false;

watchEffect(() => {
  const type = props.pagging.state.query.isObj;
  if (!tableRef.value) return;
  const selectKeys = caseScenes.value.find(
    (item) => item.type === type
  )!.numList;
  props.pagging.state.table.rows
  // console.log('watchEffect', selectKeys);
  console.log('watchEffect', caseScenes.value, selectKeys);
  changIng = true;
  props.pagging.state.table.rows.forEach((scene) => {
    tableRef.value!.toggleRowSelection(scene, selectKeys.includes(scene.num));
  });
  changIng = false;
  console.log(tableRef.value!.getSelectionRows())
  // console.log('watchEffect', props.pagging.state.table.rows);
}, { flush: 'post' });
const changeSelection = async (selectScenes) => {
  if (changIng) return;
  changIng = true
  // selectScenes.lnegth === 2 && console.log(toRaw(selectScenes[0]) === toRaw(selectScenes[1]))
  console.log(selectScenes.length)
  if (props.pagging.loading) return;
  const pagScenes = props.pagging.state.table.rows;
  const type = props.pagging.state.query.isObj;
  const selectKeys = selectScenes.map(ele => ele.num);
  const typeCaseScenes = caseScenes.value.find((item) => item.type == type)!;
  const oldKeys = caseScenes.value.find((item) => item.type == type)!.numList;
  const pagKeys = pagScenes.map(ele => ele.num);

  // console.log(pagKeys, oldKeys)
  let newlist = oldKeys
    // 保留其他页的key，剔除当前页的key
    .filter((key) => !pagKeys.includes(key))
    // 拼接上当前页选中的key
    .concat(selectKeys);


  typeCaseScenes.numList = [...new Set(newlist)];
  // tableRef.value!.clearSelection()
  changIng = false
};
const sceneDownloadHandler = (scene: QuoteScene) => {
  sceneDownload({ scene });
};
</script>
<style scoped lang="scss">
.mybody-head{
    flex: auto !important;
}
</style>