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(activeId).length + ')'
          "
          :name="item.businesstypeid"
        >
        </el-tab-pane>
      </el-tabs>
      <el-empty v-if="isEmpty" description="暂无记录" />
      <el-scrollbar 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,
@@ -134,20 +94,59 @@
          this.defaultFile.forEach((imgItem) => {
            if (imgItem.url == i.url) {
              i.isSelect = true;
              this.selectedImgUrlList.push(i);
            }
          });
        });
      },
      deep: true
      }
    }
  },
  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) {
@@ -160,6 +159,9 @@
      // }
      this.typeImgMap.clear();
      this.typeList = [];
      const imgMap = new Map();
      const _typeList = [];
      mediafileApi.getRoutineByStGuid(this.subtask.stGuid).then((res) => {
        this.isEmpty = false;
        let data = res.data;
@@ -171,7 +173,7 @@
          let businesstypeid = e.businesstypeid;
          let businesstype = e.businesstype;
          let hasThisType = false;
          this.typeImgMap.forEach((v, k, m) => {
          imgMap.forEach((v, k, m) => {
            if (k == businesstypeid) {
              hasThisType = true;
              var isAlreadyHas = false;
@@ -190,14 +192,16 @@
            }
          });
          if (!hasThisType) {
            this.typeImgMap.set(businesstypeid, Array.of(e));
            this.typeList.push(e);
            imgMap.set(businesstypeid, Array.of(e));
            _typeList.push(e);
          }
          this.imgUrlList.push(e);
          // TODO imgUrl全局配置
          e.url = $fysp.imgUrl + e.extension1 + e.guid + '.jpg';
          e.isSelect = false;
        }
        this.typeImgMap = imgMap;
        this.typeList = _typeList;
        this.initSelectedTab();
      });
    },
@@ -263,14 +267,15 @@
      let result = [];
      if (!isOk) {
        this.$emit('selectByAnyPhonoEvent', result);
      }
      for (const item of this.imgUrlList) {
        if (item.isSelect == true) {
          result.push(item);
      } else {
        for (const item of this.imgUrlList) {
          if (item.isSelect == true) {
            result.push(item);
          }
        }
        this.isClose = true;
        this.$emit('selectByAnyPhonoEvent', result);
      }
      this.isClose = true;
      this.$emit('selectByAnyPhonoEvent', result);
    }
  }
};