JG-CLIENT-TEMP/src/views/pro-steps/components/duomeiticaiji.vue

<template>
  <el-scrollbar style="width: 100%; height: 100%">
    <div class="media-container">
      <CameraUpload
        @reset-select="clickReset"
        @upload-finish="finish"
        @delete-all="clickDeleteAll"
      />
      <div
        v-for="(item, index) in medias.filter((item: any) => item.filePath)"
        :key="index"
        class="media-item"
        @click="item.isSelected = !item.isSelected"
      >
        <i-ep-delete
          v-show="item.isSelected"
          class="check"
          color="#ff4d4f"
          size="20px"
        />

        <img :src="getImgurl(item)" alt="" class="img-box" object-fit="cover" />
      </div>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { useProcessStore } from "@/store";
import { addMedia, deleteMedias, pageMedias } from "@/api/prosteps/medias";

import CameraUpload from "@/components/Upload/CameraUpload.vue";

const proStore = useProcessStore();
const medias = ref<any>([]);

defineOptions({
  name: "Wuliaocaiji",
});

const input = ref("");

const finish = (value: string) => {
  addMedia({
    filePath: value,
    operationMediaId: proStore.odersData.operationId,
    processId: proStore.scanInfo.id,
    seqNo: proStore.scanInfo.seqNo,
  }).then((res) => {
    getListData();
  });
};

onMounted(() => {
  getListData();
});

const getListData = () => {
  pageMedias(
    proStore.odersData.operationId,
    proStore.scanInfo.id,
    proStore.scanInfo.seqNo
  ).then((res) => {
    medias.value = res.data.records || [];
  });
};

const getImgurl = (item: any) => {
  let url = import.meta.env.VITE_APP_UPLOAD_URL + item.filePath;
  return url;
};

const clickReset = () => {
  medias.value.forEach((item: any) => {
    item.isSelected = false;
  });
};

const clickDeleteAll = () => {
  let ids = medias.value
    .filter((item: any) => item.isSelected)
    .map((item: any) => item.id);

  ids &&
    ids.length > 0 &&
    deleteMedias(ids).then(() => {
      getListData();
    });
};
</script>

<style lang="scss" scoped>
.media-container {
  width: 100%;
  display: grid;
  /*行间距*/
  grid-row-gap: 24px;
  /*列间距*/
  grid-column-gap: 24px;
  /*每3行有2个行间距，所以每个格子的宽高都要减去(24*2) / 3 */
  //grid-template-columns: repeat(4, calc(33.33% - 16px));
  //grid-template-rows: repeat(4, calc(33.33% - 16px));
  grid-template-columns: 1fr 1fr 1fr 1fr;
  overflow-y: auto;
}

.media-item {
  width: 292px;
  height: 292px;
  flex-shrink: 0;
  margin-bottom: 49px;
  border: 1px solid #ccc;
  border-radius: 16px 16px 16px 16px;
  overflow: hidden;
  position: relative;

  .img-box {
    width: 292px;
    height: 292px;
  }

  .check {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}
</style>
@/api/prosteps/medias