From ae234efb788bca2fa77f700442427996fa7f4aca Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 14 十一月 2024 11:58:00 +0800
Subject: [PATCH] Merge branch 'hc-dataproduct-v1112' into lsf-dataproduct-1024
---
src/views/fysp/check/components/ArbitraryPhoto.vue | 202 +++++++++++++++++++++++++++++---------------------
1 files changed, 116 insertions(+), 86 deletions(-)
diff --git a/src/views/fysp/check/components/ArbitraryPhoto.vue b/src/views/fysp/check/components/ArbitraryPhoto.vue
index 7170d11..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);
}
}
};
@@ -283,7 +312,7 @@
} */
.imgs {
- height: 650px;
+ 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 {
--
Gitblit v1.9.3