Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front
This commit is contained in:
@@ -27,7 +27,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { NODE_DATATYPE, NODE_DATATIER } from '../../../tools/index.d'
|
import { NODE_DATATYPE, NODE_DATATIER } from '../../../tools/index.d'
|
||||||
import { computed, ref, useAttrs, onMounted, inject } from 'vue'
|
import { computed, ref, useAttrs, onMounted, inject, watch } from 'vue'
|
||||||
import CardsSelect from './cards-select.vue'
|
import CardsSelect from './cards-select.vue'
|
||||||
import ToRealStyle from './to-real-style.vue'
|
import ToRealStyle from './to-real-style.vue'
|
||||||
import SurfaceEdit from './surface-edit.vue'
|
import SurfaceEdit from './surface-edit.vue'
|
||||||
@@ -87,6 +87,7 @@
|
|||||||
]
|
]
|
||||||
const nodeManager = inject('nodeManager') as any
|
const nodeManager = inject('nodeManager') as any
|
||||||
const stateManager = inject('stateManager') as any
|
const stateManager = inject('stateManager') as any
|
||||||
|
const emit = defineEmits(['update-data'])
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
type: {
|
type: {
|
||||||
type: String as () =>
|
type: String as () =>
|
||||||
@@ -110,9 +111,9 @@
|
|||||||
})
|
})
|
||||||
const componentRef = ref(null)
|
const componentRef = ref(null)
|
||||||
const onGenerateClick = () => {
|
const onGenerateClick = () => {
|
||||||
const data = { ...componentRef.value.data }
|
const data = componentRef.value.data
|
||||||
const subordNode = stateManager.getSubordNodeByID(attrs.node.id)
|
const subordNode = stateManager.getSubordNodeByID(attrs.node.id)
|
||||||
if (attrs.node.data) attrs.node.data.data = data
|
emit('update-data', data)
|
||||||
if (!subordNode) {
|
if (!subordNode) {
|
||||||
nodeManager.createResultNode({
|
nodeManager.createResultNode({
|
||||||
data: {
|
data: {
|
||||||
@@ -126,18 +127,28 @@
|
|||||||
} else {
|
} else {
|
||||||
subordNode.data.data.url =
|
subordNode.data.data.url =
|
||||||
'https://s3-alpha-sig.figma.com/img/8ce2/f1a4/12b93da90e5f17109e7430f14837fd14?Expires=1773619200&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=kmLsTFtXJqfvuxj6husWlDkRDMOIRDjzUUjb7zh79GkBKihUHc0f59k5OAImHTPdaiEREUCCpn~8sQ-si5lenuauJpApCmAU~NsxjfQhuh9m5O~GiHenr2fKu0DIJ75-oCE3859fyxoSFXQgZ9PRmeb98kikMR6uRX9nI5TPUHgKO8ZgkhDBTW~iyaDT~1ybnoK7elPa6T2VzfO-bpIyY-MZ71VRq3RxwmZRxduqHEb3Dh-jjrHyh2SoQsHmUjSJOf-uYilfvpGUResZAjAq8ZVLEjvhzKC2bmCNZIp3RmhYO8ctU7pd5t91J6Xaa6jBLtGfMxbqIm652EC79K0RoA__'
|
'https://s3-alpha-sig.figma.com/img/8ce2/f1a4/12b93da90e5f17109e7430f14837fd14?Expires=1773619200&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=kmLsTFtXJqfvuxj6husWlDkRDMOIRDjzUUjb7zh79GkBKihUHc0f59k5OAImHTPdaiEREUCCpn~8sQ-si5lenuauJpApCmAU~NsxjfQhuh9m5O~GiHenr2fKu0DIJ75-oCE3859fyxoSFXQgZ9PRmeb98kikMR6uRX9nI5TPUHgKO8ZgkhDBTW~iyaDT~1ybnoK7elPa6T2VzfO-bpIyY-MZ71VRq3RxwmZRxduqHEb3Dh-jjrHyh2SoQsHmUjSJOf-uYilfvpGUResZAjAq8ZVLEjvhzKC2bmCNZIp3RmhYO8ctU7pd5t91J6Xaa6jBLtGfMxbqIm652EC79K0RoA__'
|
||||||
|
setTimeout(() => stateManager.recordState())
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//删除功能卡片
|
//删除功能卡片
|
||||||
const onDeleteClick = ()=>{
|
const onDeleteClick = ()=>{
|
||||||
stateManager.deleteNode(attrs.node.id,{isElMessageBox:true})
|
stateManager.deleteNode(attrs.node.id,{isElMessageBox:true})
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
const setDate = () => {
|
||||||
for (const key in props.data) {
|
for (const key in props.data) {
|
||||||
if (componentRef.value?.data?.hasOwnProperty(key)) {
|
if (componentRef.value?.data?.hasOwnProperty(key)) {
|
||||||
componentRef.value.data[key] = props.data[key]
|
componentRef.value.data[key] = props.data[key]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
(newVal) => {
|
||||||
|
setDate()
|
||||||
|
}
|
||||||
|
)
|
||||||
|
onMounted(() => {
|
||||||
|
setDate()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -97,12 +97,12 @@
|
|||||||
width: 244px;
|
width: 244px;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
border: 1px solid #d9d9d9;
|
border: 1px solid #d9d9d9;
|
||||||
box-shadow: 0px 15px 21px 0px #0000000d;
|
box-shadow: 0 15px 21px 0 rgba(0, 0, 0, 0.05);
|
||||||
padding: 25px 6px;
|
padding: 25px 6px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
&.active{
|
&.active{
|
||||||
border: 3px solid #d9d9d9;
|
box-shadow: 0 15px 21px 0 rgba(0, 0, 0, 0.05), 0 0 0 2px #d9d9d9;
|
||||||
}
|
}
|
||||||
> .header {
|
> .header {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -51,7 +51,7 @@ export class EventManager {
|
|||||||
handleDelete(event: any, activeNodeID: string) {
|
handleDelete(event: any, activeNodeID: string) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
if (!activeNodeID) return console.warn('没有选中节点')
|
if (!activeNodeID) return console.warn('没有选中节点')
|
||||||
this.stateManager.nodeManager.deleteNode(activeNodeID)
|
this.stateManager.deleteNode(activeNodeID, { isElMessageBox: true })
|
||||||
}
|
}
|
||||||
/** 处理键盘事件 */
|
/** 处理键盘事件 */
|
||||||
handleKeyDown(event: any) {
|
handleKeyDown(event: any) {
|
||||||
|
|||||||
@@ -1,12 +1,22 @@
|
|||||||
import { createId } from '../../tools/tools'
|
import { createId } from '../../tools/tools'
|
||||||
import { NODE_DATATYPE, NODE_COMPONENT, NODE_DATATIER } from '../tools/index.d'
|
import { NODE_DATATYPE, NODE_COMPONENT, NODE_DATATIER } from '../tools/index.d'
|
||||||
|
interface NodeData {
|
||||||
|
type?: string
|
||||||
|
component?: any// 节点组件
|
||||||
|
data?: object// 节点数据
|
||||||
|
tier?: string// 节点层级
|
||||||
|
isHeader?: boolean// 是否显示头
|
||||||
|
superiorID?: string// 上级节点ID
|
||||||
|
disableDelete?: boolean// 是否禁用删除
|
||||||
|
disableCopy?: boolean// 是否禁用复制
|
||||||
|
}
|
||||||
interface NodeOptions {
|
interface NodeOptions {
|
||||||
id?: string
|
id?: string
|
||||||
position?: { x: number, y: number }
|
position?: { x: number, y: number }
|
||||||
positionX?: number
|
positionX?: number
|
||||||
positionY?: number
|
positionY?: number
|
||||||
component?: any
|
component?: any
|
||||||
data?: object
|
data?: NodeData
|
||||||
}// 不可传入type class (内部使用)
|
}// 不可传入type class (内部使用)
|
||||||
|
|
||||||
export class NodeManager {
|
export class NodeManager {
|
||||||
@@ -106,7 +116,8 @@ export class NodeManager {
|
|||||||
copyNodeById(id: string) {
|
copyNodeById(id: string) {
|
||||||
const node = this.stateManager.getNodeById(id)
|
const node = this.stateManager.getNodeById(id)
|
||||||
const flowNode = this.stateManager.flowManager.getNodeById(id)
|
const flowNode = this.stateManager.flowManager.getNodeById(id)
|
||||||
if (!node) return console.warn(`copyNodeById: ${id}找不到对应节点`)
|
if (!node) return console.warn(`${id}找不到对应节点`)
|
||||||
|
if (node.data?.disableCopy) return console.warn(`${id}节点已禁用复制`)
|
||||||
const node_ = {
|
const node_ = {
|
||||||
...JSON.parse(JSON.stringify(node)),
|
...JSON.parse(JSON.stringify(node)),
|
||||||
id: createId(),
|
id: createId(),
|
||||||
@@ -116,6 +127,7 @@ export class NodeManager {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
delete node_.data?.superiorID
|
delete node_.data?.superiorID
|
||||||
|
delete node_.data?.disableDelete
|
||||||
this.stateManager.addNode(node_)
|
this.stateManager.addNode(node_)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
import { ref, computed } from "vue";
|
import { ref, computed } from "vue";
|
||||||
import { NODE_TYPE } from '../tools/index.d'
|
import { NODE_TYPE } from '../tools/index.d'
|
||||||
import { ElMessageBox } from 'element-plus'
|
import { ElMessageBox } from 'element-plus'
|
||||||
import { useI18n } from 'vue-i18n'
|
import i18n from '@/lang'
|
||||||
|
const t = i18n.global.t
|
||||||
|
|
||||||
export interface NodesItem {
|
export interface NodesItem {
|
||||||
id: string
|
id: string
|
||||||
@@ -34,7 +35,6 @@ export class StateManager {
|
|||||||
flowManager: any
|
flowManager: any
|
||||||
nodeManager: any
|
nodeManager: any
|
||||||
toolManager: any
|
toolManager: any
|
||||||
t: any
|
|
||||||
// 设置管理器
|
// 设置管理器
|
||||||
setManager(options) {
|
setManager(options) {
|
||||||
options.eventManager && (this.eventManager = options.eventManager)
|
options.eventManager && (this.eventManager = options.eventManager)
|
||||||
@@ -94,8 +94,6 @@ export class StateManager {
|
|||||||
return arr
|
return arr
|
||||||
})
|
})
|
||||||
|
|
||||||
this.t = useI18n().t
|
|
||||||
|
|
||||||
}
|
}
|
||||||
/** 设置激活节点 */
|
/** 设置激活节点 */
|
||||||
setActiveNodeID(id: string) { this.activeNodeID.value = id }
|
setActiveNodeID(id: string) { this.activeNodeID.value = id }
|
||||||
@@ -105,16 +103,19 @@ export class StateManager {
|
|||||||
this.recordState()
|
this.recordState()
|
||||||
}
|
}
|
||||||
/** 删除节点 */
|
/** 删除节点 */
|
||||||
async deleteNode(id: string,{ isElMessageBox } = { isElMessageBox: false }) {
|
async deleteNode(id: string, { isElMessageBox } = { isElMessageBox: false }) {
|
||||||
let deletePromise:any = true
|
const node = this.getNodeById(id)
|
||||||
if (isElMessageBox){
|
if (!node) return console.warn(`没有找到指定id:${id}`)
|
||||||
|
if (node.data.disableDelete) return console.warn('该节点禁用删除')
|
||||||
|
let deletePromise: any = true
|
||||||
|
if (isElMessageBox) {
|
||||||
deletePromise = await new Promise<void>((resolve, reject) => {
|
deletePromise = await new Promise<void>((resolve, reject) => {
|
||||||
ElMessageBox.confirm(
|
ElMessageBox.confirm(
|
||||||
this.t('flowCanvas.deleteCardConfirm'),
|
t('flowCanvas.deleteCardConfirm'),
|
||||||
'',
|
'',
|
||||||
{
|
{
|
||||||
confirmButtonText: this.t('flowCanvas.confirm'),
|
confirmButtonText: t('flowCanvas.confirm'),
|
||||||
cancelButtonText: this.t('flowCanvas.cancel'),
|
cancelButtonText: t('flowCanvas.cancel'),
|
||||||
}
|
}
|
||||||
).then(() => {
|
).then(() => {
|
||||||
resolve(true)
|
resolve(true)
|
||||||
@@ -124,9 +125,6 @@ export class StateManager {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
if (!deletePromise) return console.log('删除操作被取消')
|
if (!deletePromise) return console.log('删除操作被取消')
|
||||||
const node = this.getNodeById(id)
|
|
||||||
if (!node) return console.warn(`没有找到指定id:${id}`)
|
|
||||||
if (node.data.disableDelete) return console.warn('该节点禁用删除')
|
|
||||||
this.nodes.value = this.nodes.value.filter((node: NodesItem) => node.id !== id)
|
this.nodes.value = this.nodes.value.filter((node: NodesItem) => node.id !== id)
|
||||||
this.recordState()
|
this.recordState()
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user