From 2527a643d7ac70c7a4742b297972d46c8b1495a4 Mon Sep 17 00:00:00 2001
From: hcong <1050828145@qq.com>
Date: 星期二, 12 十一月 2024 10:50:09 +0800
Subject: [PATCH] 问题审核bug修改

---
 src/views/fysp/check/components/ArbitraryPhoto.vue |  207 +++++++++++++++++++++++++++++----------------------
 1 files changed, 119 insertions(+), 88 deletions(-)

diff --git a/src/views/fysp/check/components/ArbitraryPhoto.vue b/src/views/fysp/check/components/ArbitraryPhoto.vue
index 4759c38..ee39f50 100644
--- a/src/views/fysp/check/components/ArbitraryPhoto.vue
+++ b/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>

--
Gitblit v1.9.3