4pc/src/view/scene-select.vue

<template>
  <div style="height: 550px" v-loading="!loaded">
    <SceneTable :tableProps="tableProps" simple>
      <template v-slot:table>
        <el-table-column type="selection" width="55" />
      </template>
    </SceneTable>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import SceneTable from "./scene.vue";
import { ElMessage, ElTable } from "element-plus";
import { QuiskExpose } from "@/helper/mount";
import { Scene, SceneStatus, scenes as rScenes } from "@/store/scene";

type SimpleScene = Pick<Scene, "sceneId" | "sceneCode">;
const props = defineProps<{
  submit: (scenes: SimpleScene[]) => Promise<any>;
  scenes: SimpleScene[];
  selfScenes?: SimpleScene[];
}>();

const simpleScenes = ref([...props.scenes]);
const originScenes = ref<Scene[]>([]);
const scenes = computed(() =>
  originScenes.value.filter((scene) =>
    simpleScenes.value.some(({ sceneCode }) => scene.sceneCode === sceneCode)
  )
);
const sceneAlls: Scene[] = [...rScenes.value];
const selectSelects = computed(() => {
  return simpleScenes.value.map((sScene) =>
    sceneAlls.find((s) => s.sceneCode === sScene.sceneCode)
  );
});

const loaded = ref(false);
const tableProps = {
  selectionChange(val: Scene[]) {
    if (!loaded.value) return;
    const originSceneCodes = originScenes.value.map((scene) => scene.sceneCode);

    simpleScenes.value = simpleScenes.value.filter(
      ({ sceneCode }) => !originSceneCodes.includes(sceneCode)
      // || !val.some((scene) => scene.sceneCode === sceneCode)
    );

    let tip = false;
    const count = (val[0] as any)?.shootCount || 0;
    val.forEach((scene) => {
      if (
        selectSelects.value.length &&
        selectSelects.value[0].cameraType !== scene.cameraType
      ) {
        tableProps.tableRef.value!.toggleRowSelection(scene, false);
        tip || ElMessage.error({ message: "请添加相同类型的场景", repeatNum: 1 });
        tip = true;
      } else if (scene.calcStatus !== SceneStatus.SUCCESS) {
        tableProps.tableRef.value!.toggleRowSelection(scene, false);
        tip || ElMessage.error({ message: "计算中场景无法添加", repeatNum: 1 });
        tip = true;
      } else if (
        selectSelects.value.length &&
        selectSelects.value[0].shootCount !== scene.shootCount
      ) {
        tip ||
          ElMessage.error({
            message: "请添加相同相机类型且点位数量一致的场景",
            repeatNum: 1,
          });
        tableProps.tableRef.value!.toggleRowSelection(scene, false);
      } else {
        simpleScenes.value.push({ sceneCode: scene.sceneCode, sceneId: scene.sceneId });
      }
    });

    if (props.selfScenes) {
      const foreChecks = props.selfScenes.filter(
        ({ sceneCode }) =>
          !simpleScenes.value.some((scene) => scene.sceneCode === sceneCode)
      );

      if (foreChecks.length) {
        tip || ElMessage.error({ message: "自动场景无法取消！", repeatNum: 1 });

        simpleScenes.value.push(...foreChecks);
        originScenes.value.forEach((scene) => {
          if (foreChecks.some(({ sceneCode }) => sceneCode === scene.sceneCode)) {
            tableProps.tableRef.value!.toggleRowSelection(scene, true);
          }
        });
      }
    }

    tip = false;
  },
  tableDataChange(val: Scene[]) {
    loaded.value = false;
    originScenes.value = val;
    sceneAlls.push(...val);
    setTimeout(checkedTable);
  },
  tableRef: ref<InstanceType<typeof ElTable>>(),
};

let time: NodeJS.Timeout;
const checkedTable = () => {
  if (tableProps.tableRef.value) {
    tableProps.tableRef.value!.clearSelection();
    scenes.value.forEach((item) => {
      tableProps.tableRef.value!.toggleRowSelection(item, true);
    });
  }
  clearTimeout(time);
  time = setTimeout(() => {
    loaded.value = true;
  }, 100);
};

watch(() => tableProps.tableRef.value, checkedTable);

defineExpose<QuiskExpose>({
  async submit() {
    if (scenes.value) {
      await props.submit(simpleScenes.value);
    }
  },
});
</script>