drawing-board-service/src/core/components/serial/serial-group.vue

<template>
  <template v-for="item in data" :key="item.id">
    <Serial
      :data="item"
      @updateShape="(value: any) => store.setItem('serial', { id: item.id, value })"
      @addShape="addHandler"
      @delShape="delItem(store, item)"
      v-if="!itemHasRegistor(item.id)"
    />
    <template v-else>
      <component :is="renderer(item.id)" :item="item" />
    </template>
  </template>
</template>

<script setup lang="ts">
import Serial from "./serial.vue";
import { useStore, useStoreRenderProcessors } from "../../store";
import { computed, watch } from "vue";
import { useHistory } from "@/core/hook/use-history";
import { ShapeType } from "..";
import {
  addTable,
  autoGenTable,
  delItem,
  getCurrentNdx,
  joinKey,
  SerialData,
  syncTable,
} from ".";
import { useExpose } from "@/core/hook/use-expose";
import { useConfig } from "@/core/hook/use-config";

defineProps<{ type?: ShapeType }>();

const store = useStore();
const data = computed(() => store.getTypeItems("serial"));
const history = useHistory();
const { itemHasRegistor, renderer } = useStoreRenderProcessors();

const addHandler = (value: SerialData) => {
  value.content = getCurrentNdx(store);
  store.addItem("serial", value);
};

const jTable = computed(() =>
  store.getTypeItems("table").find((item) => item.key === joinKey)
);

const draw = useExpose();
const config = useConfig();
const updateJoinTable = () => {
  const items = data.value;

  let table = jTable.value;
  if (!autoGenTable.value || !config.serailAutoGenTable || items.length === 0) {
    table && history.preventTrack(() => store.delItem("table", table!.id));
    return;
  }

  if (!table) {
    history.preventTrack(() => {
      store.addItem("table", (table = addTable(draw)));
    });
  }
  if (syncTable(table!, data.value)) {
    history.preventTrack(() =>
      store.setItem("table", {
        id: table!.id,
        value: table!,
      })
    );
  }
};

watch(() => data.value.length, updateJoinTable, { immediate: true });
</script>