riku
2024-11-14 ae234efb788bca2fa77f700442427996fa7f4aca
src/views/fysp/check/components/ArbitraryPhoto.vue
@@ -1,52 +1,10 @@
<template>
  <div class="main">
    <el-row justify="end" class="btns" v-if="!readonly">
      <el-text size="small" type="info" class="m-r-8"
        >最多选择{{ maxSelect }}张图片</el-text
      >
      <el-button
        size="small"
        type="primary"
        @click="sendSelectedImg(true)"
        :disabled="selectedImgUrlList.length == 0"
        >确定</el-button
      >
      <el-button size="small" type="primary" @click="sendSelectedImg(false)"
        >取消</el-button
      >
    </el-row>
    <div class="center">
      <!-- <el-descriptions>
        <el-descriptions-item label="总数">
          <span>{{ this.imgUrlList.length }}</span>
        </el-descriptions-item>
      </el-descriptions> -->
      <el-tabs v-model="activeId" type="card">
        <el-tab-pane
          v-for="item in typeList"
          :key="item.businesstypeid"
          :label="
            item.businesstype + ' (' + typeImgMap.get(item.businesstypeid).length + ')'
          "
          :name="item.businesstypeid"
        >
        </el-tab-pane>
      </el-tabs>
      <el-empty v-if="isEmpty" description="暂无记录" />
      <el-scrollbar v-else class="imgs">
        <el-image
          v-for="(img, i) in typeImgMap.get(activeId)"
          :key="i"
          :class="[Boolean(img.isSelect) ? 'selected' : 'noActive', 'image']"
          fit="cover"
          :src="img.url"
          lazy
          @click="onSelect(img, i)"
        />
      </el-scrollbar>
    </div>
  </div>
  <FYImageSelectDialog
    :typeList="typesList"
    :typeImgMap="typesMap"
    :readonly="readonly"
    :maxSelect="3"
  ></FYImageSelectDialog>
</template>
<script>
import problemApi from '@/api/fysp/problemApi.js';
@@ -81,6 +39,8 @@
  data() {
    return {
      // 无数据
      typesList: [],
      typesMap: new Map(),
      isEmpty: false,
      isClose: false,
      isAll: false,
@@ -138,15 +98,55 @@
            }
          });
        });
      },
      }
    }
  },
  mounted() {
    // if (this.subtask) {
    //   this.getAllImgList();
    // }
    this.getGroupImgs();
  },
  methods: {
    onImageSelectSubmit(value) {
      this.$emit('selectByAnyPhonoEvent', value);
    },
    // 图片分类
    getGroupImgs() {
      mediafileApi.getRoutineByStGuid(this.subtask.stGuid).then((res) => {
        let typeList = [];
        let typeMap = new Map();
        function hasThisTypeName(typeName) {
          return typeList.map((item) => item.typeName).indexOf(typeName) != -1;
        }
        function addNewType(typeId, typeName, img) {
          typeList.push({
            typeId: typeId,
            typeName: typeName
          });
          typeMap.set(typeId, [img]);
        }
        function addToThisType(typeId, img) {
          typeMap.get(typeId).push(img);
        }
        const data = res.data;
        for (const e of data) {
          let img = {
            url: $fysp.imgUrl + e.extension1 + e.guid + '.jpg'
          };
          const businesstype = e.businesstype;
          const businesstypeid = e.businesstypeid;
          if (hasThisTypeName(businesstype)) {
            addToThisType(businesstypeid, img);
          } else {
            addNewType(businesstypeid, businesstype, img);
          }
        }
        this.typesList = typeList;
        this.typesMap = typeMap;
      });
    },
    // 初始化刚开始选中的标签
    initSelectedTab() {
      if (this.typeList.length > 0) {