fix: 1

src/view/case/draw/board/index.d.ts

@@ -70,6 +70,7 @@ export type Board = {
     storeChange: undefined;
     selectShape: BoardShape | null;
     backDisabled: boolean;
+    exixtsBgImage: boolean
     forwardDisabled: boolean;
   }>;
   clear(): void;

src/view/case/draw/board/index.js

@@ -19,6 +19,12 @@ export const create = async (store, canvas) => {
     baseMap: null,
   };
 
+  console.log(store)
+  setTimeout(() => {
+    console.log(!!store.floors[0].bgImage)
+    refs.bus.emit('exixtsBgImage', !!store.floors[0].bgImage)
+  }, 100)
+  
   const layer = new Layer();
   await layer.start(canvas, store);
   const defaultData = {
@@ -54,6 +60,9 @@ export const create = async (store, canvas) => {
       delete: () => {
         layer.uiControl.clearUI();
         layer.uiControl.setAttributes(type, "delete");
+        if (type === bgImage) {
+          refs.bus.emit('exixtsBgImage', false)
+        }
       },
     };
     const update = (newData) => {
@@ -159,6 +168,7 @@ export const create = async (store, canvas) => {
       });
     },
     setImage(url) {
+      refs.bus.emit('exixtsBgImage', true)
       layer.uiControl.setAttributes(bgImage, "upload", { url, scale: 1 });
     },
     clear() {

src/view/case/draw/board/useBoard.ts

@@ -90,6 +90,7 @@ export type BoardProps = {
 };
 export type BoardState = {
   backDisabled: boolean;
+  exixtsBgImage: boolean
   forwardDisabled: boolean;
   selectShape: BoardShape | null;
   addShape: MetaShapeType | null;
@@ -99,6 +100,7 @@ export const useBoard = (props: Ref<BoardProps | null>) => {
   const board = ref<Board>();
   const state = ref<BoardState>({
     backDisabled: true,
+    exixtsBgImage: false,
     forwardDisabled: true,
     selectShape: null,
     addShape: null,
@@ -117,6 +119,7 @@ export const useBoard = (props: Ref<BoardProps | null>) => {
       props.value.type
     );
     const boardRaw = (board.value = await boardFactory(store, props.value.dom));
+    state.value.exixtsBgImage = !!(store as any).floors[0].bgImage
     onCleanup(() => {
       boardRaw && boardRaw.destroy();
     });
@@ -154,6 +157,10 @@ export const useBoard = (props: Ref<BoardProps | null>) => {
     const boardRaw = board.value;
 
     console.log("开启监听");
+    boardRaw.bus.on('exixtsBgImage', b => {
+      console.error("a?", b)
+      state.value.exixtsBgImage = b
+    })
     boardRaw.bus.on("backDisabled", (dis) => (state.value.backDisabled = dis));
     boardRaw.bus.on(
       "forwardDisabled",

src/view/case/draw/index.vue

@@ -20,6 +20,7 @@
         <Slider
           :type="props.type"
           :add-shape="state.addShape"
+          :exists-bg-image="state.exixtsBgImage"
           @update:add-shape="updateAddShape"
           @track-image="trackImage"
           @selectImage="setBackImage"

src/view/case/draw/slider.vue

@@ -9,6 +9,7 @@
         :multiple="false"
         :limit="1"
         :show-file-list="false"
+        id="coverupload"
         :http-request="() => {}"
         :disabled="!!cover.percentage"
         :before-upload="cover.upload"
@@ -16,6 +17,7 @@
         :file-list="cover.fileList"
       >
         <el-button
+          @click.stop="coverUploadHandler"
           ghost
           type="primary"
           :class="{ dispable: cover.percentage }"
@@ -79,14 +81,16 @@ import { metas, labels, images, shapes, MetaShapeType, customImage } from "./boa
 import { BoardType } from "@/store/caseFile";
 import { maxFileSize } from "@/constant/caseFile";
 import { useUpload } from "@/hook/upload";
-import { reactive, watchEffect } from "vue";
+import { reactive, ref, watchEffect } from "vue";
 import { imageCropper } from "@/view/system/quisk";
 import { coverImageSize } from "@/util/image-rotate";
 import { uploadFile } from "@/store/system";
 import { ElMessage } from "element-plus";
+import { confirm } from "@/helper/message";
 
-defineProps<{
+const props = defineProps<{
   type: BoardType;
+  existsBgImage: boolean
   addShape: MetaShapeType | null;
 }>();
 
@@ -107,6 +111,13 @@ const cover = reactive(
   })
 );
 
+const coverUploadHandler = async () => {
+  if (props.existsBgImage && await confirm('重新上传将替换当前图体，确定要上传吗？')) {
+    // await cover.upload(file)
+  }
+  const input = document.querySelector('#coverupload')!.querySelector('input[type=file]') as HTMLInputElement
+  input.click()
+}
 watchEffect(async () => {
   if (cover.file) {
     const coverImage = (await coverImageSize(cover.file, 540, 390, false)) || cover.file;