From 9a61e46d96536f3299e57f7259ae1c9972256ec6 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 30 九月 2025 09:42:09 +0800
Subject: [PATCH] 1. 隐藏未完成的账户匹配页面 2. 根据第三方新的接口文档修改接口url地址
---
src/views/fysp/check/components/ArbitraryPhoto.vue | 287 +++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 257 insertions(+), 30 deletions(-)
diff --git a/src/views/fysp/check/components/ArbitraryPhoto.vue b/src/views/fysp/check/components/ArbitraryPhoto.vue
index 52034e9..012ae5c 100644
--- a/src/views/fysp/check/components/ArbitraryPhoto.vue
+++ b/src/views/fysp/check/components/ArbitraryPhoto.vue
@@ -1,64 +1,291 @@
<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 && !menuLoading"
+ 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,
+ menuLoading: true,
+ menuStyle: undefined,
+ allMoveActions: [],
+ closeContextMenuListenr: undefined,
+ // 鍙抽敭閫変腑鐨勫浘鐗�
+ selectedFileElement: undefined,
+ selectedFile: undefined,
+ selectedIndex: undefined,
+ selectedTypeId: undefined
};
+ },
+ computed: {
+ menuItems() {
+ return [
+ // { label: '澶嶅埗鍒板壀璐存澘', action: 'copy' },
+ {
+ label: '绉诲姩鍒�',
+ children: this.allMoveActions.filter((v) => {
+ return v.value != this.selectedTypeId;
+ })
+ }
+ ];
+ }
},
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);
+
+ this.initMenuItems();
+ },
+ 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.selectedFileElement = event.target;
+ this.selectedTypeId = typeId;
+ this.selectedIndex = index;
+ this.selectedFile = this.typesMap.get(typeId)[index];
+ },
+ closeContextMenu() {
+ this.showMenu = false;
+ },
+ handleMenuItem(item) {
+ switch (item.action) {
+ case 'copy':
+ this.drawImageToCanvas();
+ 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);
+ },
+ drawImageToCanvas() {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ const img = this.selectedFileElement; // 鑾峰彇DOM寮曠敤
+ // img.crossOrigin = 'Anonymous';
+ canvas.width = img.naturalWidth;
+ canvas.height = img.naturalHeight;
+ ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+ this.copyCanvasToClipboard(canvas);
+ const dataUrl = canvas.toDataURL('image/png'); // 鍙互閫夋嫨鍏朵粬鏍煎紡濡�'image/jpeg'
+ // 鍒涘缓涓�涓复鏃剁殑textarea鍏冪礌鏉ュ鍒舵枃鏈�
+ const tempTextArea = document.createElement('textarea');
+ document.body.appendChild(tempTextArea);
+ tempTextArea.value = dataUrl;
+ tempTextArea.select();
+ document.execCommand('copy');
+ document.body.removeChild(tempTextArea);
+ },
+ copyCanvasToClipboard(canvas) {
+ canvas.toBlob((blob) => {
+ const item = new ClipboardItem({ 'image/png': blob }); // 浣犲彲浠ユ牴鎹渶瑕佹敼鍙樻牸寮忥紝濡� "image/jpeg"
+ navigator.clipboard.write([item]).then(
+ () => {
+ console.log('Image copied to clipboard');
+ },
+ (err) => {
+ console.error('Could not copy image: ', err);
+ }
+ );
+ }, 'image/png'); // 鍚屾牱锛岃繖閲屼篃鍙互鎸囧畾鍏朵粬鏍煎紡锛屽 'image/jpeg'
+ },
+ // 鍒濆鍖栧満鏅浘鐗囩殑绫诲瀷鑿滃崟
+ initMenuItems() {
+ this.menuLoading = true;
+ const sceneTypeId = this.subtask.sceneTypeId;
+ enumMediaFile(sceneTypeId, false)
+ .then((res) => {
+ this.allMoveActions = res.map((v) => {
+ return {
+ action: 'move',
+ label: v.label,
+ value: v.value
+ };
+ });
+ })
+ .finally(() => (this.menuLoading = false));
}
}
};
</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