From 06764ef8050ad932228b5c788f3bb0a64f1a6b81 Mon Sep 17 00:00:00 2001 From: li-shengren-123456 Date: Wed, 12 Mar 2025 16:18:32 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BA=94=E7=94=A8=E9=85=8D?= =?UTF-8?q?=E7=BD=AEurl=E5=89=8D=E7=AB=AF=E6=A0=A1=E9=AA=8C=EF=BC=8C?= =?UTF-8?q?=E5=88=A0=E9=99=A4=E8=8A=82=E7=82=B9=E8=BF=9E=E6=8E=A5=E5=88=A4?= =?UTF-8?q?=E6=96=AD=EF=BC=8C=E8=A7=A3=E5=86=B3=E6=8B=96=E6=8B=BD=E4=B8=A4?= =?UTF-8?q?=E4=B8=AA=E8=8A=82=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/createapp/components/appConfig.vue | 76 +++++++++++--------- src/views/createapp/components/workFlow.vue | 70 ++---------------- src/views/createapp/index.vue | 11 +-- src/views/styles/createApp.scss | 17 +++++ 4 files changed, 68 insertions(+), 106 deletions(-) diff --git a/src/views/createapp/components/appConfig.vue b/src/views/createapp/components/appConfig.vue index f60a848..f2edebe 100644 --- a/src/views/createapp/components/appConfig.vue +++ b/src/views/createapp/components/appConfig.vue @@ -48,12 +48,30 @@ const base64Image: any = ref(''); const permissionList = ref([]); const curPersonList = ref([]); const publishStatus = ref(false); + +// 这里校验url是否符合规范 +const checkLinks = (rule, value, callback) => { + // 这里校验各个url链接 + let result = true; + createAppForm.value.links.forEach(item => { + if (!checkUrl(item)) { + result = false; + } + }) + console.log('这里的校验') + if (!result) { + callback(new Error('填写的url不合法')) + } else { + callback(); + } +} + // 这里后面需要换为变量-以便于中英文切换 const createAppRole = ref({ name: [{ required: true, message: '应用名称不能为空', trigger: 'blur' }], description: [{ required: true, message: '应用简介不能为空', trigger: 'change' }], dialogRounds: [{ required: true, message: '对话轮次不能为空', trigger: 'change' }], - // links: [{required: true, message: '应用名称不能为空', trigger: 'blur'}] + links: [{required: true, message: '请填写合法的url', validator: checkLinks, trigger: 'blur'}] }); const createAppFormRef = ref(); const modeOptions = reactive([ @@ -149,25 +167,21 @@ onMounted(() => { } }); }); - // 正则校验url const checkUrl = (url) => { - // const pattern = new RegExp( - // '^(https?:\\/\\/)?' + // protocol - // '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name - // '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address - // '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path - // '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string - // '(\\#[-a-z\\d_]*)?$', // fragment locator - // 'i' - // ); - // const result = pattern.test(url); - // if (!result) { - // ElMessage.warning('请填写正确的链接地址'); - // } - - // return result; - // 单独校验links字段 + // 这里判断下 + if (url) { + try { + new URL(url); + // 这里设置校验成功 + return true; + } catch (e) { + // 设置校验失败 + return false; + } + } else { + return false; + } } watch( @@ -185,16 +199,6 @@ watch( const validateForm = async () => { try { const resulst = await createAppFormRef.value.validate(); - // 判断links是否每项都符合格式 - // let flag = true; - // createAppForm.value.links.forEach(item => { - // if (!checkUrl(item)) { - // flag = false; - // } - // }) - // if (!flag) { - // ElMessage.warning('请填写正确的链接地址'); - // } return true; } catch (error) { return false; @@ -215,7 +219,7 @@ const beforeUpload = async (file: ElFile) => { file.type === 'svg' || file.name.indexOf('.png') > -1 || file.name.indexOf('.svg') > -1 || - file.name.indexOf('.jpg') > -1; + file.name.indexOf('.jpg') > -1; const isLt2M = file.size / 1024 / 1024 < 2; if (!isPic) { @@ -310,8 +314,8 @@ defineExpose({ @keydown.enter="handleTextareaEnter" > - - + +
添加链接 @@ -322,10 +326,10 @@ defineExpose({ @@ -367,7 +371,13 @@ defineExpose({
- + (1 ~ 10)
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue index fce652f..3900168 100644 --- a/src/views/createapp/components/workFlow.vue +++ b/src/views/createapp/components/workFlow.vue @@ -39,12 +39,11 @@ const nodeName = ref(''); const nodeDesc = ref(''); const flowZoom = ref(1); const debugDialogVisible = ref(false); -const isNodeAndLineConnect = ref(false); const apiServiceList = ref([]); const allApiServiceList = ref([]); const yamlContent = ref(); const nodeYamlId = ref(); -const emits = defineEmits(['validateConnect', 'updateFlowsDebug']); +const emits = defineEmits(['updateFlowsDebug']); const route = useRoute(); const workFlowList = ref([]); const props = defineProps(['flowList']); @@ -75,6 +74,8 @@ const { getViewport, setNodes, setEdges, + removeSelectedNodes, + getSelectedNodes, } = useVueFlow(); const { layout } = useLayout(); @@ -146,10 +147,6 @@ onConnect(e => { // 获取当前状态 const sourceStatus = sourceItem?.data?.status || 'default'; const targetStatus = targetItem?.data?.status || 'default'; - // 更新source源节点handle连接状态 - if (sourceItem?.id) { - updateConnectNodeHandle(sourceItem.id, e.sourceHandle, false); - } addEdges({ ...e, data: { @@ -158,8 +155,6 @@ onConnect(e => { }, type: 'normal', }); - // 添加边连接时-判断节点是否都连接 - nodeAndLineConnection(); }); const handleChange = activeList => { activeNames.value = activeName.value; @@ -179,14 +174,7 @@ const handleClose = () => { const delNode = id => { if (id) { const node = findNode(id); - // 获取以该节点为target的相连的其他节点 - const connectEdges = getEdges.value.filter(edge => edge.target === id); - connectEdges.forEach(item => { - updateConnectNodeHandle(item.source, item.sourceHandle, true); - }); node ? removeNodes(node) : ''; - // 删除节点时-判断节点是否都连接 - nodeAndLineConnection(); } }; // 编辑yaml @@ -216,36 +204,6 @@ async function layoutGraph(direction) { }); } -const nodeAndLineConnection = () => { - // 获取当前所有节点和边 - const curNodes = [...getNodes.value]; - const curEdges = [...getEdges.value]; - // 判断开始节点是否连接 - let isNodeConnect = true; - const len = curNodes.length; - // 遍历每个节点 - for (let i = 0; i < len; i++) { - if (curNodes[i].type === 'start') { - // 判断开始节点是否连接 - isNodeConnect = curEdges.some(item => item.sourceNode?.type === 'start'); - } else if (curNodes[i].type === 'end') { - // 判断结束节点是否连接 - isNodeConnect = curEdges.some(item => item.targetNode?.type === 'end'); - } else { - // 判断普通节点是否有连接-普通节点开始和结束都需要进行判断 - const isStartCustomNodeConnect = curEdges.some(item => item.sourceNode?.id === curNodes[i].id); - const isEndCustomNodeConnect = curEdges.some(item => item.targetNode?.id === curNodes[i].id); - isNodeConnect = isStartCustomNodeConnect && isEndCustomNodeConnect; - } - if (!isNodeConnect) { - break; - } - } - // 是否所有节点都已连接 - isNodeAndLineConnect.value = isNodeConnect; - emits('validateConnect', isNodeAndLineConnect.value); -}; - // 拖拽添加 const dropFunc = e => { if (!flowObj.value?.flowId) { @@ -257,8 +215,6 @@ const dropFunc = e => { return; } onDrop(e); - // 添加节点时-判断节点是否都连接 - nodeAndLineConnection(); }; onMounted(() => { @@ -318,29 +274,17 @@ const handleDebugDialogOps = visible => { }; const edgesChange = edges => { - if (edges?.[0]?.type === 'remove' && edges[0]?.source) { - updateConnectNodeHandle(edges[0].source, edges[0]?.sourceHandle, true); - // 删除节点时-判断节点是否都连接 - nodeAndLineConnection(); - } // 边增加删除时直接将工作流debug状态置为false if (edges?.[0]?.type === 'remove' || edges?.[0]?.type === 'add') { emits('updateFlowsDebug', false); } }; -const updateConnectNodeHandle = (id, handle, connectable) => { - const node = findNode(id); - let handleType = 'isConnectSource'; - // 默认为单节点 - if (handle) { - // 说明是分支节点 - handleType = handle === BranchSourceIdType.SOURCEA ? 'isConnectSourceA' : 'isConnectSourceB'; - } - updateNode(id, { data: { ...node?.data, [handleType]: connectable } }); -}; - const nodesChange = nodes => { + // 判断如果选中的节点数目大于1，则删除首个 + if (getSelectedNodes.value.length > 1) { + removeSelectedNodes([getSelectedNodes.value[0]]) + } if (nodes?.[0]?.type === 'remove') { delNode(nodes[0].id); // 节点增加删除时直接将工作流debug状态置为false diff --git a/src/views/createapp/index.vue b/src/views/createapp/index.vue index dfa3cb4..995255a 100644 --- a/src/views/createapp/index.vue +++ b/src/views/createapp/index.vue @@ -18,9 +18,6 @@ const createAppType = ref('appConfig'); const appConfigRef = ref(); const workFlowRef = ref(); const flowList = ref([]); -// 后续的判断校验图标 -const interfaceValid = ref(''); -const flowValid = ref(''); const handleChangeAppType = type => { createAppType.value = type; // 切换createAppType【tab值】时，将其保存在sessionStorage，刷新时保证不变 @@ -61,11 +58,6 @@ const handleValidateContent = valid => { appFormValidate.value = valid; }; -// 获取工作流组件中的节点连接状态校验 -const validateConnect = valid => { - // publishValidate.value = !valid; -}; - // 获取当前的应用中的各flowsDebug的情况 const updateFlowsDebug = (status?) => { // 如果status为false,直接置为False不再调接口 @@ -196,7 +188,6 @@ const handleJumperAppCenter = () => {
{ > 预览 - +
发布
diff --git a/src/views/styles/createApp.scss b/src/views/styles/createApp.scss index ab3af1d..3d57a8e 100644 --- a/src/views/styles/createApp.scss +++ b/src/views/styles/createApp.scss @@ -317,6 +317,23 @@ .notRequired { .el-form-item__label { padding-left: 8px; + &::before { + display: none; + } + } + .el-form-item__content { + .validUrl { + .el-input__wrapper { + background-color: var(--o-input-bg-color); + box-shadow: 0 0 0 1px inset var(--o-input-border-color); + &:hover { + box-shadow: var(--o-input-border_hover); + } + &:focus { + box-shadow: var(--o-input-border_focus); + } + } + } } } } -- Gitee