caseEditor/src/view/case/draw/slider.vue

<template>
  <div class="df-slide-content">
    <h3>{{ fileDesc[type] }}</h3>
    <div class="def-image-set">
      <el-button type="primary" @click="emit('trackImage')" ghost>
        设置{{ fileDesc[type] }}</el-button
      >
      <el-upload
        :multiple="false"
        :limit="1"
        :show-file-list="false"
        id="coverupload"
        :http-request="() => {}"
        :disabled="!!cover.percentage"
        :before-upload="cover.upload"
        :accept="cover.accept"
        :file-list="cover.fileList"
      >
        <el-button
          @click.stop="coverUploadHandler"
          ghost
          type="primary"
          :class="{ dispable: cover.percentage }"
          :style="{ width: '100%' }"
        >
          {{ cover.percentage ? "文件上传中" : "上传" + fileDesc[type] }}
        </el-button>
      </el-upload>
    </div>
    <h3>标注</h3>
    <div class="df-shape-layout">
      <div
        v-for="label in labels"
        :key="label"
        class="df-slide-shape"
        @click="emit('update:addShape', label)"
        :class="{ active: addShape === label }"
      >
        <img :src="shapes[label]" />
        <p>{{ metas[label].desc }}</p>
      </div>
    </div>

    <h3>图例</h3>
    <el-upload
      :multiple="false"
      :limit="1"
      :show-file-list="false"
      :http-request="() => {}"
      :disabled="!!imageLabel.percentage"
      :before-upload="imageLabel.upload"
      :accept="imageLabel.accept"
      :file-list="imageLabel.fileList"
    >
      <el-button
        ghost
        type="primary"
        :class="{ dispable: imageLabel.percentage }"
        :style="{ width: '100%' }"
      >
        {{ imageLabel.percentage ? "文件上传中" : "上传图例" }}
      </el-button>
    </el-upload>
    <div class="df-shape-layout">
      <div
        v-for="label in images"
        :key="label"
        class="df-slide-shape"
        @click="emit('update:addShape', label)"
        :class="{ active: addShape === label }"
      >
        <img :src="shapes[label]" />
        <p>{{ metas[label].desc }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { metas, labels, images, shapes, MetaShapeType, customImage } from "./board";
import { BoardType } from "@/store/caseFile";
import { maxFileSize } from "@/constant/caseFile";
import { useUpload } from "@/hook/upload";
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";

const props = defineProps<{
  type: BoardType;
  existsBgImage: boolean;
  addShape: MetaShapeType | null;
}>();

const fileDesc = {
  [BoardType.scene]: "户型图",
  [BoardType.map]: "方位图",
};
const emit = defineEmits<{
  (e: "update:addShape", val: MetaShapeType | null, data?: any): void;
  (e: "trackImage"): void;
  (e: "selectImage", val: Blob): void;
}>();

const cover = reactive(
  useUpload({
    maxSize: maxFileSize,
    formats: [".jpg", ".png"],
  })
);

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;
    const data = await imageCropper({
      img: coverImage.blob,
      fixed: [coverImage.width, coverImage.height],
    });
    data && emit("selectImage", data);
    cover.removeFile();
  }
});

const imageLabel = reactive(
  useUpload({
    maxSize: maxFileSize,
    formats: [".jpg", ".png"],
  })
);

watchEffect(async () => {
  if (imageLabel.file) {
    emit("update:addShape", customImage, imageLabel.file);
    imageLabel.removeFile();
    // ElMessage.info("请前往右边画板选择为止单击添加图例");
  }
});
</script>

<style scoped lang="scss">
.df-slide-content {
  padding: 10px 24px;
  overflow-y: auto;
  height: 100%;
  h3 {
    font-size: 16px;
    font-weight: normal;
    margin: 20px 0;
  }
}

.def-image-set {
  display: flex;
  justify-content: space-between;

  > * {
    width: 45%;
  }
}

.df-shape-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.df-slide-shape {
  width: 88px;
  height: 88px;
  text-align: center;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  img {
    width: 40px;
    height: 40px;
    flex: none;
  }
  p {
    margin: 10px 0 0;
  }
  &.active,
  &:hover {
    background-color: #f5f5f5;
  }
}
</style>

<style>
.def-image-set .el-upload {
  display: block;
}
</style>