问题审核bug修改

hcong

2024-11-12 2527a643d7ac70c7a4742b297972d46c8b1495a4

 src/views/fysp/check/components/ArbitraryPhoto.vue

@@ -1,51 +1,10 @@
<template>
  <div class="main">
    <div class="filters" v-if="false">
      <el-select
        v-for="(key_select, index_select) of filters.keys()"
        :placeholder="key_select.text"
      >
        <el-option
          v-for="(key_option, index_option) in filters.get(key_select.key)"
          :key="key_option.key"
          :value="key_option.value"
          :label="key_option.label"
        >
        </el-option>
      </el-select>
    </div>
    <div class="btns" v-if="!readonly">
      <el-button size="small" type="primary" @click="sendSelectedImg(true)">确定</el-button>
      <el-button size="small" type="primary" @click="sendSelectedImg(false)">取消</el-button>
    </div>

    <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"
          :label="item.businesstype"
          :name="item.businesstypeid"
        >
        </el-tab-pane>
      </el-tabs>
      <el-empty v-if="isEmpty" description="暂无记录" />
      <div class="imgs">
        <el-image
          v-for="(img, i) in typeImgMap.get(activeId)"
          :class="[Boolean(img.isSelect) ? 'selected' : 'noActive', 'image']"
          fit="cover"
          :src="img.url"
          lazy
          @click="onSelect(img, i)"
        />
      </div>
    </div>
  </div>
  <FYImageSelectDialog
    :typeList="typesList"
    :typeImgMap="typesMap"
    :readonly="readonly"
    :maxSelect="3"
  ></FYImageSelectDialog>
</template>
<script>
import problemApi from '@/api/fysp/problemApi.js';
@@ -70,11 +29,18 @@
    defaultFile: {
      type: Array,
      default: () => []
    },
    // 图片可选数量，当传入数字时，代表图片数量
    maxSelect: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      // 无数据
      typesList: [],
      typesMap: new Map(),
      isEmpty: false,
      isClose: false,
      isAll: false,
@@ -95,10 +61,19 @@
        // { businesstypeid: 60, businesstype: '扩展类十' }
      ],
      typeImgMap: new Map(),
      imgUrlList: []
      imgUrlList: [],
      selectedImgUrlList: []
    };
  },
  watch: {
    subtask: {
      handler(nV, oV) {
        if (nV != oV && nV) {
          this.getAllImgList();
        }
      },
      immediate: true
    },
    defaultFile: {
      handler(newFileList, oldFileList) {
        if (this.isClose) {
@@ -119,34 +94,75 @@
          this.defaultFile.forEach((imgItem) => {
            if (imgItem.url == i.url) {
              i.isSelect = true;
              this.selectedImgUrlList.push(i);
            }
          });
        });
      },

      deep: true
      }
    }
  },
  mounted() {
    if (this.defaultFile == undefined || this.defaultFile == null) {
      this.defaultFile = [];
    }
    if (this.subtask) {
      this.getAllImgList();
    }
    // 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) {
        this.activeId = this.typeList[0].businesstypeid;
      }
    },
    async getAllImgList() {
    getAllImgList() {
      // for(var k of this.typeImgMap.keys()) {
      //     this.typeImgMap.set(k, [])
      // }
      await mediafileApi.getRoutineByStGuid(this.subtask.stGuid).then((res) => {
      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;
        if (data.length == 0) {
@@ -157,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;
@@ -176,15 +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.url = "http://47.100.191.150:9005/images/" + e.extension1 + e.guid + '.jpg'
          e.isSelect = false;
        }
        this.typeImgMap = imgMap;
        this.typeList = _typeList;
        this.initSelectedTab();
      });
    },
@@ -220,33 +237,45 @@
      });
    },
    onSelect(img, i) {
      // if (i == 2 && !this.isAll) {
      //   this.getAllImgList();
      //   this.isAll = true;
      // } else {
      //   if (this.readonly) {
      //     return;
      //   }
      //   img.isSelect = !Boolean(img.isSelect);
      // }

      if (this.readonly) {
        return;
      }
      img.isSelect = !Boolean(img.isSelect);
      const index = this.selectedImgUrlList.indexOf(img);
      if (index == -1) {
        if (this.maxSelect == 1) {
          img.isSelect = true;
          this.selectedImgUrlList.push(img);
          if (this.selectedImgUrlList.length > 1) {
            this.selectedImgUrlList.splice(0, 1).forEach((e) => {
              e.isSelect = false;
            });
          }
        } else if (this.maxSelect > 1) {
          if (this.selectedImgUrlList.length < this.maxSelect) {
            img.isSelect = true;
            this.selectedImgUrlList.push(img);
          }
        }
      } else {
        this.selectedImgUrlList.splice(index, 1);
        img.isSelect = false;
      }

      // img.isSelect = !img.isSelect;
    },
    sendSelectedImg(isOk) {
      let result = [];
      if (!Boolean(isOk)) {
      if (!isOk) {
        this.$emit('selectByAnyPhonoEvent', result);
      } else {
        for (const item of this.imgUrlList) {
          if (item.isSelect == true) {
            result.push(item);
          }
        }
        this.isClose = true;
        this.$emit('selectByAnyPhonoEvent', result);
      }
      for (const item of this.imgUrlList) {
        if (item.isSelect == true) {
          result.push(item);
        }
      }
      this.isClose = true;
      this.$emit('selectByAnyPhonoEvent', result);
    }
  }
};
@@ -268,7 +297,7 @@
}

.btns {
  height: 10%;
  /* height: 10%; */
}
/* 
.img_types {
@@ -283,7 +312,7 @@
} */

.imgs {
  height: 370px;
  height: 50vh;
  width: 90%;
  min-height: 100px !important;
  /* border-style:solid;
@@ -298,6 +327,7 @@
}

.image {
  margin: 5px;
  height: 210px;
  width: 200px;
  border-radius: 4px;
@@ -311,10 +341,10 @@
}

.selected {
  padding: 5px;
  margin: 3px;
  color: #4abe84;
  box-shadow: 0 2px 7px 0 rgba(85, 110, 97, 0.35);
  border: 1px solid rgba(74, 190, 132, 1);
  border: 2px solid rgba(74, 190, 132, 1);
}

.selected:before {
@@ -341,7 +371,7 @@
}

.noActive {
  padding: 5px;
  /* padding: 5px; */
}

.blurry {
@@ -352,7 +382,8 @@
  padding: 5px;
}

.el-dialog__body {
::v-deep .el-dialog__body {
  height: 60vh;
  padding: 10px calc(var(--el-dialog-padding-primary) + 10px) !important;
}
</style>