public-fuse/src/view/case/addScenes.vue

<template>
  <VRModel>
    <template v-slot:content="{ pagging }: { pagging: ScenePagging }">
      <div :style="{ display: 'none' }">{{ syncTableSelects(pagging) }}</div>
      <el-table
        :data="pagging.state.table.rows"
        tooltip-effect="dark"
        ref="tableRef"
        style="width: 100%"
        size="large"
        @selection-change="
          (val) =>
            changeSelection(val, pagging.state.table.rows, pagging.state.query.type)
        "
      >
        <el-table-column type="selection" width="50" />
        <el-table-column label="标题" v-slot:default="{ row }">
          {{
            pagging.state.query.type === SceneType.SWMX ? row.modelTitle : row.sceneName
          }}
        </el-table-column>
        <el-table-column
          label="原始数据格式"
          prop="modelDateType"
          v-if="pagging.state.query.type === SceneType.SWMX"
        />
        <el-table-column label="拍摄时间" prop="createTime" v-slot:default="{ row }">
          {{ row.createTime }}
        </el-table-column>
      </el-table>
    </template>
  </VRModel>
</template>

<script setup lang="ts">
import VRModel from "@/view/vrmodel/index.vue";
import { Scene, SceneType } from "@/store/scene";
import { CaseScenes } from "@/store/case";
import { ScenePagging } from "@/view/vrmodel/pagging";
import { Ref, onMounted, onUnmounted, ref, watchEffect } from "vue";
import {
  getCaseSceneList,
  getCaseScenes,
  getSceneKey,
  replaceCaseScenes,
} from "@/store/case";
import { QuiskExpose } from "@/helper/mount";
import { ElTable } from "element-plus";

const props = defineProps<{ caseId: number }>();

const caseScenes = ref<CaseScenes>(getCaseScenes([]));
const tableRef = ref<InstanceType<typeof ElTable>>();
let paggingLoading: Ref<boolean>;
// 同步table选择
let stopSyncWatch: () => void;
const syncTableSelects = (pagging: ScenePagging) => {
  stopSyncWatch && stopSyncWatch();

  const stopParamWatch = watchEffect(
    () => {
      if (pagging.state.query.type === SceneType.SWMX) {
        pagging.state.query.status = 2;
      } else {
        delete pagging.state.query.status;
      }
    },
    { flush: "sync" }
  );
  const stopSyncSelect = watchEffect(
    () => {
      paggingLoading = pagging.loading;
      if (paggingLoading.value) {
        return;
      }
      const selectKeys = caseScenes.value.find(
        (item) => item.type === pagging.state.query.type
      )!.numList;
      pagging.state.table.rows.forEach((scene) => {
        tableRef.value?.toggleRowSelection(
          scene,
          selectKeys.includes(getSceneKey(scene))
        );
      });
    },
    { flush: "post" }
  );

  stopSyncWatch = () => {
    stopSyncSelect();
    stopParamWatch();
  };
};
const changeSelection = (selectScenes: Scene[], pagScenes: Scene[], type: SceneType) => {
  if (paggingLoading.value) {
    return;
  }
  const typeCaseScenes = caseScenes.value.find((item) => item.type === type)!;
  const oldKeys = caseScenes.value.find((item) => item.type === type)!.numList;
  const selectKeys = selectScenes.map(getSceneKey);
  const pagKeys = pagScenes.map(getSceneKey);

  typeCaseScenes.numList = oldKeys
    // 保留其他页的key，剔除当前页的key
    .filter((key) => !pagKeys.includes(key))
    // 拼接上当前页选中的key
    .concat(selectKeys);
};
// 初始化数据
onMounted(async () => {
  caseScenes.value = getCaseScenes(await getCaseSceneList(props.caseId));
});
onUnmounted(() => {
  stopSyncWatch();
});

defineExpose<QuiskExpose>({
  async submit() {
    await replaceCaseScenes(props.caseId, caseScenes.value);
  },
});
</script>