| | |
| | | <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 |
| | | :typeList="typesList" |
| | | :typeImgMap="typesMap" |
| | | :readonly="readonly" |
| | | :maxSelect="3" |
| | | ></FYImageSelectDialog> |
| | | </template> |
| | | <script> |
| | | import problemApi from '@/api/fysp/problemApi.js'; |
| | |
| | | data() { |
| | | return { |
| | | // 无数据 |
| | | typesList: [], |
| | | typesMap: new Map(), |
| | | isEmpty: false, |
| | | isClose: false, |
| | | isAll: false, |
| | |
| | | } |
| | | }); |
| | | }); |
| | | }, |
| | | } |
| | | } |
| | | }, |
| | | 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) { |