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

<template>
  <div class="df-slide-content">
    <h3>户型图</h3>
    <div class="def-image-set">
      <el-button type="primary" @click="emit('trackImage')" ghost>
        设置{{ BoardTypeDesc[type] }}</el-button
      >
      <el-upload
        :multiple="false"
        :limit="1"
        :show-file-list="false"
        :disabled="!!percentage"
        :before-upload="upload"
        :file-list="[]"
      >
        <el-button
          ghost
          type="primary"
          :class="{ dispable: percentage }"
          :style="{ width: '100%' }"
        >
          {{ percentage ? "文件上传中" : "上传" + BoardTypeDesc[type] }}
        </el-button>
      </el-upload>
    </div>
    <template v-for="typeShapes in typesShapes">
      <h3>{{ typeShapes.name }}</h3>
      <div class="df-shape-layout">
        <div
          v-for="label in typeShapes.shapes"
          :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>
    </template>
  </div>
</template>

<script setup lang="ts">
import { metas, labels, images, shapes, MetaShapeType } from "./board";
import { BoardType } from "@/store/caseFile";
import { BoardTypeDesc, OtherFormats, maxFileSize } from "@/constant/caseFile";
import { useUpload } from "@/hook/upload";
import { watchEffect } from "vue";
import { imageCropper } from "@/view/system/quisk";
import { fixImageSize } from "@/util/image-rotate";

defineProps<{
  type: BoardType;
  addShape: MetaShapeType | null;
}>();

const typesShapes = [
  { name: "标注", shapes: labels },
  { name: "图例", shapes: images },
];

const emit = defineEmits<{
  (e: "update:addShape", val: MetaShapeType | null): void;
  (e: "trackImage"): void;
  (e: "selectImage", val: Blob): void;
}>();

const { percentage, upload, file, removeFile } = useUpload({
  maxSize: maxFileSize,
  formats: [".jpg", ".jpeg", ".png", ".svg"],
});

watchEffect(async () => {
  if (file.value) {
    const newFile = (await fixImageSize(file.value, 500, 500)) || file.value;
    const data = await imageCropper({ img: newFile, fixed: [500, 500] });
    data && emit("selectImage", data);
    removeFile();
  }
});
</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>