From d1ce79c837650689ab47bbf587d076743fcb3a5f Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期一, 19 五月 2025 17:25:38 +0800
Subject: [PATCH] 1. 问题审核界面新增场景信息编辑入口 2. 问题审核界面场景图片查询新增图片类型修改功能
---
src/views/fysp/check/components/ArbitraryPhoto.vue | 248 +++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 218 insertions(+), 30 deletions(-)
diff --git a/src/views/fysp/check/components/ArbitraryPhoto.vue b/src/views/fysp/check/components/ArbitraryPhoto.vue
index 52034e9..55b11a5 100644
--- a/src/views/fysp/check/components/ArbitraryPhoto.vue
+++ b/src/views/fysp/check/components/ArbitraryPhoto.vue
@@ -1,64 +1,252 @@
<template>
<FYImageSelectDialog
+ v-bind="$attrs"
v-loading="loading"
title="鍦烘櫙鍥剧墖"
:typeList="typesList"
:typeImgMap="typesMap"
+ :onContextMenu="showContextMenu"
+ contextMenuStr="鍙抽敭鐐瑰嚮鍥剧墖淇敼鍒嗙被"
></FYImageSelectDialog>
+ <!-- <div
+
+ @click="closeContextMenu"
+ @contextmenu="closeContextMenu"
+ class="container"
+ > -->
+ <div v-if="showMenu" ref="menu" :style="menuStyle" class="context-menu">
+ <template v-for="(item, index) in menuItems" :key="index">
+ <el-popover v-if="item.children" placement="right-start" trigger="hover">
+ <template #reference>
+ <el-row justify="space-between" class="menu-item">
+ <span>{{ item.label }}</span>
+ <el-icon><ArrowRight /></el-icon>
+ </el-row>
+ </template>
+ <div
+ v-for="(item1, index1) in item.children"
+ :key="index1"
+ class="menu-item"
+ @click.stop="handleMenuItem(item1)"
+ >
+ {{ item1.label }}
+ </div>
+ </el-popover>
+
+ <div class="menu-item" @click.stop="handleMenuItem(item)" v-else>
+ {{ item.label }}
+ </div>
+ </template>
+ </div>
+ <!-- </div> -->
</template>
<script>
import mediafileApi from '@/api/fysp/mediafileApi.js';
import { $fysp } from '@/api/index.js';
+import { enumMediaFile } from '@/enum/mediaFile.js';
+
export default {
props: {
subtask: {
- type: Object,
- efault: {}
+ type: Object
}
},
data() {
return {
- // 鏃犳暟鎹�
typesList: [],
typesMap: new Map(),
loading: true,
+ // 鍙抽敭鍥剧墖寮瑰嚭鑿滃崟鎺у埗
+ showMenu: false,
+ menuStyle: undefined,
+ // menuItems: [
+ // { label: '澶嶅埗鍥剧墖', action: 'copy' },
+ // {
+ // label: '绉诲姩鍒�',
+ // children: [
+ // {
+ // action: 'move',
+ // label: v.typeName,
+ // value: v.typeId
+ // }
+ // ]
+ // }
+ // ],
+ closeContextMenuListenr: undefined,
+ // 鍙抽敭閫変腑鐨勫浘鐗�
+ selectedFile: undefined,
+ selectedIndex: undefined,
+ selectedTypeId: undefined
};
+ },
+ computed: {
+ menuItems() {
+ const sceneTypeId = this.subtask.sceneTypeId;
+ const items = enumMediaFile(sceneTypeId, false)
+ .filter((v) => {
+ return v.value != this.selectedTypeId;
+ })
+ .map((v) => {
+ return {
+ action: 'move',
+ label: v.label,
+ value: v.value
+ };
+ });
+ return [
+ // { label: '澶嶅埗鍥剧墖', action: 'copy' },
+ { label: '绉诲姩鍒�', children: items }
+ ];
+ }
},
mounted() {
this.getGroupImgs();
+ this.closeContextMenuListenr = (event) => {
+ if (
+ this.$refs.menu &&
+ !this.$refs.menu.contains(event.target) &&
+ this.showMenu
+ ) {
+ // 濡傛灉鐐瑰嚮涓嶆槸鍦ㄨ彍鍗曞唴閮ㄤ笖鑿滃崟鏄彲瑙佺殑
+ this.showMenu = false; // 闅愯棌鑿滃崟
+ }
+ };
+ document.addEventListener('click', this.closeContextMenuListenr);
+ },
+ unmounted() {
+ document.removeEventListener('click', this.closeContextMenuListenr);
},
methods: {
// 鍥剧墖鍒嗙被
getGroupImgs() {
- mediafileApi.getRoutineByStGuid(this.subtask.stGuid).then((res) => {
- this.loading = true
- let typeList = [];
- let typeMap = new Map();
- 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 (
- typeList.find((item) => item.typeName == businesstype) != undefined
- ) {
- typeMap.get(businesstypeid).push(img);
- } else {
- typeList.push({
- typeId: businesstypeid,
- typeName: businesstype
- });
- typeMap.set(businesstypeid, [img]);
+ mediafileApi
+ .getRoutineByStGuid(this.subtask.stGuid)
+ .then((res) => {
+ this.loading = true;
+ let typeList = [];
+ let typeMap = new Map();
+ const data = res.data;
+ for (const e of data) {
+ let img = {
+ url: $fysp.imgUrl + e.extension1 + e.guid + '.jpg',
+ data: e
+ };
+ const businesstype = e.businesstype;
+ const businesstypeid = e.businesstypeid;
+ if (
+ typeList.find((item) => item.typeId == businesstypeid) !=
+ undefined
+ ) {
+ typeMap.get(businesstypeid).push(img);
+ } else {
+ typeList.push({
+ typeId: businesstypeid,
+ typeName: businesstype
+ });
+ typeMap.set(businesstypeid, [img]);
+ }
}
- }
- this.typesList = typeList;
- this.typesMap = typeMap;
- }).finally(() => (this.loading = false));
+ this.typesList = typeList;
+ this.typesMap = typeMap;
+ })
+ .finally(() => (this.loading = false));
+ },
+ // 鍥剧墖鍙抽敭鐐瑰嚮浜嬩欢
+ showContextMenu(event, typeId, index) {
+ this.showMenu = true;
+ this.menuStyle = {
+ left: `${event.clientX}px`,
+ top: `${event.clientY}px`
+ };
+ this.selectedTypeId = typeId;
+ this.selectedIndex = index;
+ this.selectedFile = this.typesMap.get(typeId)[index];
+ },
+ closeContextMenu() {
+ this.showMenu = false;
+ },
+ handleMenuItem(item) {
+ switch (item.action) {
+ case 'copy':
+ break;
+ case 'move':
+ this.selectedFile.data.businesstypeid = item.value;
+ this.selectedFile.data.businesstype = item.label;
+ this.changeMediaFileType(this.selectedFile);
+ break;
+ default:
+ break;
+ }
+ this.closeContextMenu();
+ },
+ changeMediaFileType() {
+ this.selectedFile.loading = true;
+ const file = this.selectedFile.data;
+ return mediafileApi
+ .updateMediaFile(file)
+ .then((res) => {
+ if (res == 1) {
+ const m = this.typesMap
+ .get(this.selectedTypeId)
+ .splice(this.selectedIndex, 1);
+ if (!this.typesMap.has(file.businesstypeid)) {
+ this.typesList.push({
+ typeId: file.businesstypeid,
+ typeName: file.businesstype
+ });
+ this.typesMap.set(file.businesstypeid, m);
+ } else {
+ this.typesMap.get(file.businesstypeid).push(m[0]);
+ }
+ }
+ })
+ .finally(() => (this.selectedFile.loading = false));
+
+ // setTimeout(() => {
+ // const m = this.typesMap
+ // .get(this.selectedTypeId)
+ // .splice(this.selectedIndex, 1);
+ // if (!this.typesMap.has(file.businesstypeid)) {
+ // this.typesList.push({
+ // typeId: file.businesstypeid,
+ // typeName: file.businesstype
+ // });
+ // this.typesMap.set(file.businesstypeid, m);
+ // } else {
+ // this.typesMap.get(file.businesstypeid).push(m[0]);
+ // }
+ // this.selectedFile.loading = false;
+ // }, 2000);
}
}
};
</script>
-<style scoped></style>
-
\ No newline at end of file
+<style scoped>
+.container {
+ /* background-color: rgba(19, 211, 67, 0.514); */
+ position: fixed;
+ left: 0;
+ top: 0;
+ height: 100vh;
+ width: 100vw;
+ z-index: 10000;
+}
+.context-menu {
+ position: fixed;
+ background: white;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ min-width: 200px;
+ z-index: 10001;
+}
+
+.menu-item {
+ padding: 8px 16px;
+ cursor: pointer;
+ transition: background 0.2s;
+}
+
+.menu-item:hover {
+ background-color: #f0f0f0;
+}
+</style>
--
Gitblit v1.9.3