Merge branch 'master' of http://39.98.38.2:13000/dumingliang/sh-model-platform

ruoyi-ui/src/views/standardization/modeling/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
     <!-- <el-button type="primary" @click="showData">测试</el-button> -->
-    <div style="display: flex;margin-left: 1%;padding-top: 1%;position: absolute;z-index: 1000;cursor: pointer;justify-content: space-between;width: 98%;" @click="back"> 
-      <el-icon size="large"><Back /></el-icon>
+    <div style="display: flex;margin-left: 1%;padding-top: 1%;position: absolute;z-index: 1000;cursor: pointer;justify-content: space-between;width: 98%;"> 
+      <el-icon size="large"  @click="back"><Back /></el-icon>
       <el-button style="margin-left: auto;" type="danger" size="mini">删除</el-button>
-      <el-button style="margin-left: 1%;" type="primary" size="mini">保存</el-button>
+      <el-button style="margin-left: 1%;" type="primary" size="mini" @click="showData">保存</el-button>
     </div>
     <div v-if="nodeDeSer" style="height: 85vh;width: 20vw;position: absolute;float: right;z-index: 1000;right: 1%;top: 1%;border: 0.1px solid #dedfe0;border-radius: 6px;background-color: white;">
       <div style="display: flex;margin-left: 3%;margin-top: 3%;align-items: center;justify-content: space-between;width: 95%;">
@@ -41,9 +41,8 @@
         </el-table>
       </div>
       <div style="display: flex;width: 90%;margin-left: 5%;margin-top:10%;align-items: center;justify-content: space-between;">
-        <el-form ref="deptRef" :model="form" :rules="rules" label-width="80px" label-position="top">
+        <el-form ref="deptRef" :model="form" label-width="80px" label-position="top">
           <el-form-item label="BODY">
-            <!-- 单选 -->
             <el-radio-group v-model="form.bodyType">
               <el-radio value="none">none</el-radio>
               <el-radio value="form-data">form-data</el-radio>
@@ -116,7 +115,7 @@
               <div style='width:100%;font-size:10px;display:flex;align-items:flex-end;height: 10px;margin-top: 2%;justify-content: space-between;'>
                 <img style="width: 15px;height:15px;border-radius: 12px;" src="@/assets/images/icon-HTTP.png" alt="">
                 <div style="margin-left:3%;font-weight: 500;">
-                  {{ specialNodeProps.data.label }}
+                  {{ specialNodeProps.data.label   }}
                 </div>
                 <el-icon style="cursor: pointer;margin-left: auto;"><CaretRight /></el-icon>
                  <el-icon style="cursor: pointer;color: #F56C6C;margin-left: 2%;"><Delete /></el-icon>
@@ -125,20 +124,17 @@
               <div style="display: flex;margin-top: 3%;">
                 <el-tag class="ml-2" style="width: 35px;height: 20px;font-size: 10px;" type="warning">服务</el-tag>
               </div>
-              <div style="display: flex;margin-top: 3%;font-size: 9px;color: #b1b3b8;align-items: center;">
-                <div>
-                  GET:
-                </div>
-                <div>
-                  https://www.zhihu.com/
+              <div style="display: flex;margin-top: 3%;font-size: 9px;color: #b1b3b8;flex-wrap: wrap;align-items: flex-start;">
+                <div style="word-break: break-all;min-width: 0;width: 100%;text-align: left;">
+                  {{ specialNodeProps.data.service.rqtype+ ':' }}{{ specialNodeProps.data.service.url }}
                 </div>
               </div>
               <div style="display: flex;margin-top: 3%;font-size: 9px;color: #b1b3b8;align-items: center;">
                 <div>
-                  输出:
+                  说明:
                 </div>
                 <div>
-                  https://www.zhihu.com/
+                  {{ specialNodeProps.data.service.intro }}
                 </div>
               </div>
                 <Handle type="source" :position="Position.Right"/>
@@ -153,73 +149,6 @@
       </VueFlow>
     </div>
 
-    <!-- 添加或修改部门对话框 -->
-    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
-      <template #header="{ close, titleId, titleClass }">
-        <div style="display: flex;align-items: center;">
-          <el-tag>{{ form.type }}</el-tag>
-          <h4 style="margin: 0 0 0 5px;" :id="titleId" :class="titleClass">{{ form.label }}</h4>
-        </div>
-      </template>
-      <el-form ref="deptRef" :model="form" :rules="rules" label-width="80px" label-position="top">
-        <el-form-item label="API">
-          <el-row style="width: 100%;" :gutter="20">
-            <el-col :span="4">
-              <el-select v-model="form.config.method" style="width: 100px">
-                <el-option label="GET" value="GET"></el-option>
-                <el-option label="POST" value="POST"></el-option>
-                <el-option label="HEAD" value="HEAD"></el-option>
-                <el-option label="PATCH" value="PATCH"></el-option>
-                <el-option label="PUT" value="PUT"></el-option>
-                <el-option label="DELETE" value="DELETE"></el-option>
-              </el-select>
-            </el-col>
-            <el-col :span="20">
-              <el-input v-model="form.config.url" placeholder="请输入URL"/>
-            </el-col>
-          </el-row>
-        </el-form-item>
-        <el-form-item label="HEADERS">
-          <dynamic-map v-model="form.config.headers"></dynamic-map>
-        </el-form-item>
-        <el-form-item label="PARAMS">
-          <dynamic-map v-model="form.config.params"></dynamic-map>
-        </el-form-item>
-        <el-form-item label="BODY">
-          <!-- 单选 -->
-          <el-radio-group v-model="form.bodyType">
-            <el-radio value="none">none</el-radio>
-            <el-radio value="form-data">form-data</el-radio>
-            <el-radio value="x-www-form-urlencoded">x-www-form-urlencoded</el-radio>
-            <el-radio value="JSON">JSON</el-radio>
-            <el-radio value="raw">raw</el-radio>
-          </el-radio-group>
-          <dynamic-map v-if="form.bodyType === 'x-www-form-urlencoded'" v-model="form.config.body"></dynamic-map>
-        </el-form-item>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="失败处理">
-              <el-select v-model="form.errorPolicy" style="width: 100%">
-                <el-option label="报错" value="ABORT"></el-option>
-                <el-option label="忽视" value="IGNORE"></el-option>
-                <el-option label="重连" value="RETRY"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item v-if="form.errorPolicy === 'RETRY'" label="失败重连次数">
-              <el-input-number v-model="form.retryCount" :min="1" :max="30"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
   </div>
 </template>
 <script setup>
@@ -241,16 +170,14 @@ const {
   snapToGrid,
   addEdges,
   onEdgeClick,
-  removeElements,
   addNodes,
   screenToFlowCoordinate,
   onNodesInitialized,
   updateNode,
   onNodeClick,
   getNodes,
+  toObject,
   getEdges,
-  removeNodes,
-  removeEdges,
 } = useVueFlow()
 snapToGrid.value = true
 const servieName = ref()
@@ -274,13 +201,14 @@ const toolType = ref('0');
 const serviceList = ref([]);
 const defaultEdgeStyle = {
   style: { 
-    stroke: '#6366f1', 
+    stroke: '#79bbff', 
     strokeWidth: 2,
+    type: 'bezier',
     fill: 'none' // 避免截图时出现黑色背景 [4](@ref)
   },
   markerEnd: {
-    type: MarkerType.ArrowClosed,
-    color: '#ff0000', // 箭头颜色
+    type: MarkerType.Arrow,
+    color: '#79bbff', // 箭头颜色
     width: 15,        // 箭头宽度
     height: 15        // 箭头高度
   }
@@ -293,7 +221,11 @@ const nodes = ref([
   { id: '2', position: { x: 150, y: 100 }, data: { label: '结束' }, type: 'special' },
 ]);
 const edges =  ref([]);
-
+const form = ref({
+  bodyType: 'none',
+  errorPolicy: 'ABORT',
+  retryCount: 0,
+});
 const title = ref('')
 const open = ref(false)
 const store = useStore();
@@ -309,20 +241,13 @@ async function getTreeLeft(){
   console.log(optionsMdid.value)
 }
 function showData(){
-  console.log(nodes.value,edges.value)
-}
-function handleModelClick(mid) {
-  modelId.value = mid
-  removeNodes(getNodes.value)
-  removeEdges(getEdges.value)
-  getWorkflow(mid)
+  console.log(toObject())
 }
-
-
 onNodeClick(({event, node}) => {
   console.log(node)
   if(node.data.nodeType==='SERVICE'){
     getSerDe(node.data.id).then(res=>{
+      serviceRqtype.value = res.data.ptService.rqtype
       servieName.value = res.data.ptService.name
       tableDataCan.value = res.data.list
       serviceUrl.value = res.data.ptService.url
@@ -333,52 +258,18 @@ onNodeClick(({event, node}) => {
   
 });
 
-const data = reactive({
-  form: {config: {}},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    userName: undefined,
-    phonenumber: undefined,
-    status: undefined,
-    deptId: undefined
-  },
-  rules: {
-    userName: [{required: true, message: "用户名称不能为空", trigger: "blur"}, {
-      min: 2,
-      max: 20,
-      message: "用户名称长度必须介于 2 和 20 之间",
-      trigger: "blur"
-    }],
-    nickName: [{required: true, message: "用户昵称不能为空", trigger: "blur"}],
-    password: [{required: true, message: "用户密码不能为空", trigger: "blur"}, {
-      min: 5,
-      max: 20,
-      message: "用户密码长度必须介于 5 和 20 之间",
-      trigger: "blur"
-    }, {pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur"}],
-    email: [{type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"]}],
-    phonenumber: [{pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur"}]
-  }
-});
-
-const {queryParams, form, rules} = toRefs(data);
-const nodeId = ref(null)
-
 /**
  * 开始拖拽选项的事件
  * @param event
  * @param data
  */
 function onDragStart(event, data) {
-  console.log(data)
   if (event.dataTransfer) {
     event.dataTransfer.setData('application/vueflow', data)
     event.dataTransfer.effectAllowed = 'move'
   }
 
   draggedData.value = data
-  console.log(draggedData.value)
   isDragging.value = true
 
   document.addEventListener('drop', onDragEnd)
@@ -406,6 +297,7 @@ function onDragOver(event) {
  * 拖拽放下的事件
  * @param event
  */
+
 function onDrop(event) {
   const position = screenToFlowCoordinate({
     x: event.clientX,
@@ -431,6 +323,7 @@ function onDrop(event) {
   })
 
   addNodes(newNode)
+  // nodes.value.push(newNode)
 }
 
 /**
@@ -556,24 +449,13 @@ function saveStep() {
   })
 }
 
-function getWorkflow(modelId) {
-  getWorkflowByModelId(modelId).then(res => {
-    if (res.data && res.data.graph) {
-      const {nodes, edges} = JSON.parse(res.data.graph)
-      addNodes(nodes)
-      addEdges(edges)
-    }
-  })
-}
 onMounted(() => {
     getTreeLeft()
-    getModelList()
-    getServiceList()
-    const count = computed(() => store.getters.id)
-    console.log(count.value);
 })
 
-
+watch(nodes, (newNodes) => {
+  console.log('当前节点列表:', newNodes) // 实时输出最新数据
+}, { deep: true })
 </script>
 <style>
 @import '@vue-flow/core/dist/style.css';