1. 图片选择组件移动到全局组件文件夹 2. 涉及到使用图片选择组件添加图片区域loading 3. 无用页面删除

hcong

2024-11-21 87958d6d33603fa673cb7c8f5caf2394689959bf

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

@@ -1,389 +1,64 @@
<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
    v-loading="loading"
    title="场景图片"
    :typeList="typesList"
    :typeImgMap="typesMap"
  ></FYImageSelectDialog>
</template>
<script>
import problemApi from '@/api/fysp/problemApi.js';
import mediafileApi from '@/api/fysp/mediafileApi.js';
import { $fysp } from '@/api/index.js';
export default {
  props: {
    filters: Map,
    // 是否以只读的形式查看当前页面
    readonly: {
      type: Boolean,
      default: false
    },
    subtask: {
      type: Object,
      efault: {}
    },
    inspectionGuid: {
      type: String,
      default: ''
    },
    defaultFile: {
      type: Array,
      default: () => []
    },
    // 图片可选数量，当传入数字时，代表图片数量
    maxSelect: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      // 无数据
      isEmpty: false,
      isClose: false,
      isAll: false,
      activeId: '',
      typeList: [
        // { businesstypeid: 5, businesstype: '常规记录' },
        // { businesstypeid: 3, businesstype: '监测设备' },
        // { businesstypeid: 7, businesstype: '铭牌' },
        // { businesstypeid: 51, businesstype: '扩展类一' },
        // { businesstypeid: 52, businesstype: '扩展类二' },
        // { businesstypeid: 53, businesstype: '扩展类三' },
        // { businesstypeid: 54, businesstype: '扩展类四' },
        // { businesstypeid: 55, businesstype: '扩展类五' },
        // { businesstypeid: 56, businesstype: '扩展类六' },
        // { businesstypeid: 57, businesstype: '扩展类七' },
        // { businesstypeid: 58, businesstype: '扩展类八' },
        // { businesstypeid: 59, businesstype: '扩展类九' },
        // { businesstypeid: 60, businesstype: '扩展类十' }
      ],
      typeImgMap: new Map(),
      imgUrlList: [],
      selectedImgUrlList: []
      typesList: [],
      typesMap: new Map(),
      loading: true,
    };
  },
  watch: {
    subtask: {
      handler(nV, oV) {
        if (nV != oV && nV) {
          this.getAllImgList();
        }
      },
      immediate: true
    },
    defaultFile: {
      handler(newFileList, oldFileList) {
        if (this.isClose) {
          return;
        }
      },
      deep: true
    },
    typeImgMap: {
      handler(newMap, oldMap) {
        if (this.isClose || newMap.get(this.activeId) == undefined) {
          return;
        }
        newMap.get(this.activeId).forEach((i) => {
          if (i.isSelect == true) {
            return;
          }
          this.defaultFile.forEach((imgItem) => {
            if (imgItem.url == i.url) {
              i.isSelect = true;
              this.selectedImgUrlList.push(i);
            }
          });
        });
      },
    }
  },
  mounted() {
    // if (this.subtask) {
    //   this.getAllImgList();
    // }
    this.getGroupImgs();
  },
  methods: {
    // 初始化刚开始选中的标签
    initSelectedTab() {
      if (this.typeList.length > 0) {
        this.activeId = this.typeList[0].businesstypeid;
      }
    },
    getAllImgList() {
      // for(var k of this.typeImgMap.keys()) {
      //     this.typeImgMap.set(k, [])
      // }
      this.typeImgMap.clear();
      this.typeList = [];

      const imgMap = new Map();
      const _typeList = [];
    // 图片分类
    getGroupImgs() {
      mediafileApi.getRoutineByStGuid(this.subtask.stGuid).then((res) => {
        this.isEmpty = false;
        let data = res.data;
        if (data.length == 0) {
          this.isEmpty = true;
        }
        this.loading = true
        let typeList = [];
        let typeMap = new Map();
        const data = res.data;
        for (const e of data) {
          let list;
          let businesstypeid = e.businesstypeid;
          let businesstype = e.businesstype;
          let hasThisType = false;
          imgMap.forEach((v, k, m) => {
            if (k == businesstypeid) {
              hasThisType = true;
              var isAlreadyHas = false;
              if (v != undefined && v != null) {
                for (let index = 0; index < v.length; index++) {
                  const element = v[index];
                  if (element.guid == e.guid) {
                    isAlreadyHas = true;
                    break;
                  }
                }
              }
              if (!isAlreadyHas) {
                v.push(e);
              }
            }
          });
          if (!hasThisType) {
            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();
      });
    },
    getInitImgList() {
      mediafileApi.getRoutineByStGuid(this.subtask.stGuid).then((res) => {
        let data = res.data;
        for (const e of data) {
          let list;
          let businesstypeid = e.businesstypeid;
          let businesstype = e.businesstype;
          let hasThisType = false;
          this.typeImgMap.forEach((v, k, m) => {
            if (k == businesstypeid) {
              hasThisType = true;
              if (v.length < 3) {
                v.push(e);
              }
            }
          });
          if (!hasThisType) {
            this.typeImgMap.set(businesstypeid, Array.of(e));
            this.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;
        }
        if (this.typeList.length > 0) {
          this.activeId = this.typeList[0].businesstypeid;
        }
      });
    },
    onSelect(img, i) {
      if (this.readonly) {
        return;
      }
      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;
          let img = {
            url: $fysp.imgUrl + e.extension1 + e.guid + '.jpg'
          };
          const businesstype = e.businesstype;
          const businesstypeid = e.businesstypeid;
          if (
            typeList.find((item) => item.typeName == businesstype) != undefined
          ) {
            typeMap.get(businesstypeid).push(img);
          } else {
            typeList.push({
              typeId: businesstypeid,
              typeName: businesstype
            });
          }
        } else if (this.maxSelect > 1) {
          if (this.selectedImgUrlList.length < this.maxSelect) {
            img.isSelect = true;
            this.selectedImgUrlList.push(img);
            typeMap.set(businesstypeid, [img]);
          }
        }
      } else {
        this.selectedImgUrlList.splice(index, 1);
        img.isSelect = false;
      }

      // img.isSelect = !img.isSelect;
    },
    sendSelectedImg(isOk) {
      let result = [];
      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);
      }
        this.typesList = typeList;
        this.typesMap = typeMap;
      }).finally(() => (this.loading = false));
    }
  }
};
</script>
<style scoped>
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.text {
  padding: 20px;
}

.main {
  margin: 0 auto; /* 使父元素居中 */
  height: 100%;
  width: 100%;
}

.btns {
  /* height: 10%; */
}
/* 
.img_types {
  margin: 0 auto;
  height: 440px;
  width: 900px;
  flex-grow: 1;
  overflow-y: hidden ;
  padding: 3%;
  flex-wrap: wrap;
  overflow: hidden;
} */

.imgs {
  height: 50vh;
  width: 90%;
  min-height: 100px !important;
  /* border-style:solid;
    border-radius: 1px; */
  /* height: 100%; */
  flex-grow: 1 !important;
  overflow-y: auto !important;
  /* 内容的内边距 */
  display: flex !important;
  flex-wrap: wrap !important;
  /* overflow: hidden; */
}

.image {
  margin: 5px;
  height: 210px;
  width: 200px;
  border-radius: 4px;
}

.active {
  padding: 5px;
  width: 20%;
  height: 200px;
  border: 0.5rem outset rgb(52, 155, 4);
}

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

.selected:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  border: 17px solid #4abe84;
  border-top-color: transparent;
  border-left-color: transparent;
}

.selected:after {
  content: '';
  width: 5px;
  height: 12px;
  position: absolute;
  right: 6px;
  bottom: 6px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}

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

.blurry {
  filter: blur(3px);
}
.filters {
  display: flex;
  padding: 5px;
}

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