caseEditor/src/view/case/addScenes.vue

<template>
  <VRModelList :params="params">
    <template v-slot:header>
      <el-form-item label="标题：" style="grid-area: 1 / 1 / 2 / 4">
        <el-input v-model="params.keyword" placeholder="请输入" />
      </el-form-item>
    </template>
    <template v-slot:content>
      <el-table
        :data="params.pagging.state.table.rows"
        tooltip-effect="dark"
        ref="tableRef"
        style="width: 100%"
        size="large"
        @selection-change="changeSelection"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column label="标题" v-slot:default="{ row }">
          {{ params.isSwmx ? row.modelTitle : row.name }}
        </el-table-column>
        <el-table-column label="所属架构" prop="deptName"></el-table-column>
        <el-table-column label="原始数据格式" prop="modelDateType" v-if="params.isSwmx" />
        <el-table-column label="拍摄时间" prop="createTime" v-slot:default="{ row }">
          {{ row.createTime.substr(0, 16) }}
        </el-table-column>
      </el-table>
    </template>
  </VRModelList>
</template>

<script setup lang="ts">
import VRModelList from "@/view/vrmodel/list.vue";
import { Scene } from "@/store/scene";
import { CaseScenes } from "@/store/case";
import { useScenePaggingParams } from "@/view/vrmodel/pagging";
import { onMounted, ref, watch, 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 params = useScenePaggingParams();
const caseScenes = ref<CaseScenes>(getCaseScenes([]));
const tableRef = ref<InstanceType<typeof ElTable>>();

watch(
  () => params.pagging.state.query,
  () => {
    params.pagging.state.query.status = 2;
    params.pagging.state.query.caseId = props.caseId;
  },
  { immediate: true, deep: true }
);
// 复选框同步
watchEffect(() => {
  if (!tableRef.value) return;
  const selectKeys = caseScenes.value.find(
    (item) => item.type === params.pagging.state.query.type
  )!.numList;

  params.pagging.state.table.rows.forEach((scene) => {
    tableRef.value!.toggleRowSelection(scene, selectKeys.includes(getSceneKey(scene)));
  });
});

const changeSelection = (selectScenes: Scene[]) => {
  if (params.pagging.loading) return;
  const pagScenes = params.pagging.state.table.rows;
  const type = params.pagging.state.query.type;
  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));
});

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