update code

src/views/connection/edit.vue

@@ -169,13 +169,39 @@ const doInputSelected=idx=>{
 const doEditSuccess = (obj) => {
     let t = info.editObj.type;    
     if (t == 'i') {
-        selNode.info.inputs = obj;
+        obj.forEach(o=>{
+            let cobjs=selNode.info.parameters.inputs.filter(d=>d.input_id==o.id);
+            if(cobjs.length>0){
+                let cobj=cobjs[0];
+                o.attrs.forEach(oo=>{
+                    if(oo.name=="dataType"){
+                        cobj.oper_inout_data_type=oo.value;
+                    }else{
+                        cobj[oo.name].value=oo.value;
+                    }
+                });
+            }
+        })
     }
     if (t == 'o') {
-        selNode.info.outputs = obj;
+        obj.forEach(o=>{
+            let cobjs=selNode.info.parameters.outputs.filter(d=>d.output_id==o.id);
+            if(cobjs.length>0){
+                let cobj=cobjs[0];
+                o.attrs.forEach(oo=>{
+                    if(oo.name=="dataType"){
+                        cobj.oper_inout_data_type=oo.value;
+                    }else{
+                        cobj[oo.name].value=oo.value;
+                    }
+                });
+            }
+        })
     }
     if (t == 'p') {
-        selNode.info.process = obj;
+        obj[0].attrs.forEach(o=>{
+            selNode.info.parameters.process[o.name]["value"]=o.value;
+        });
     }
     let tmps = info.nodes.filter(d => d.id == selNode.info.id);
     if (tmps.length == 0) {
@@ -193,7 +219,8 @@ const doEdit = (obj, title, t) => {
         type: t
     }
     editDlg.value.showDialog({
-        obj: t == 'i' ? obj.inputs : t == 'o' ? obj.outputs : obj.process,
+        type:t,
+        obj: t == 'i' ? obj.parameters.inputs : t == 'o' ? obj.parameters.outputs : obj.parameters.process,
         title: title
     });
 }
@@ -339,7 +366,7 @@ onMounted(() => {
     }
 
     .sp-paramter {
-        height: 60px;
+        height: 100px;
         border: solid 1px #409EFF;
         overflow-y: auto;
         padding: 4px;

src/views/connection/editParamDlg.vue

@@ -1,18 +1,24 @@
 <template>
-    <el-dialog v-model="dialog.show" :title="dialog.title" 
+    <el-dialog v-model="dialog.show" :title="dialog.title" :close-on-press-escape="false" :close-on-click-modal="false"
-    :close-on-press-escape="false"
+        align-center append-to-body width="600px" modal-class="edit-param-dlg">
-    :close-on-click-modal="false" align-center  append-to-body width="600px"
-        >
         <div class="scroll " style="max-height: 400px;overflow-y: auto;overflow-x: hidden;">
-     <el-row v-for="(it,idx) in dialog.attrs" :key="idx" style="margin-bottom:4px;" gutter="2">
+            <template v-if="dialog.attrs.length > 1">
+                <el-tabs v-model="dialog.tab" type="card" class="demo-tabs" @tab-click="tabHandleClick">
+                    <el-tab-pane v-for="(it, idx) in dialog.attrs" :label="it.id" :name="it.id" :key="idx"></el-tab-pane>
 
-        <el-col :span="8">
+                </el-tabs>
-            <el-input v-model="it.key" @input="inputKey"/>
+            </template>
-        </el-col>
+            <div v-for="(it, idx) in dialog.attrs" :key="idx" v-show="it.select">
-        <el-col :span="16">
+                <div v-for="(item, index) in it.attrs" :key="index" class="div-item">
-            <el-input v-model="it.value"/>
+                    <span class="sp-label">{{ item.name }}</span>
-        </el-col>
+                    <span class="sp-value">
-     </el-row>
+                        <el-input v-model="item.value" v-if="item.type == 'input'"  @blur="doCheckInput(item)"/>
+                        <el-select v-model="item.value" v-else>
+                            <el-option v-for="(opt, oidx) in item.options" :key="oidx" :label="opt" :value="opt" />
+                        </el-select>
+                    </span>
+                </div>
+            </div>
         </div>
         <template #footer>
             <div style="text-align: center">
@@ -24,44 +30,142 @@
 </template>
 
 <script setup>
-const emit=defineEmits("success");
+const emit = defineEmits(["success"]);
 const dialog = reactive({
     show: false,
     title: '',
     editObj: null,
+    type: '',
+    tab: '',
     attrs: []
 })
 const doOk = () => {
-    let obj={};
+    emit("success", dialog.attrs);
-    dialog.attrs.forEach(d=>{
-        if(d.key  && d.value){
-            obj[d.key]=d.value;
-        }
-    });
-    emit("success",obj);
     dialog.show = false;
 }
 const doCancel = () => {
     dialog.show = false;
 }
+const tabHandleClick = () => {
+    setTimeout(() => {
+        dialog.attrs.forEach(d=>{
+            d.select=d.id==dialog.tab;
+        })
+    }, 400)
+}
+const doCheckInput=item=>{
+    if(item.inType=="int" || item.inType=="float"){
+        if(isNaN(item.value)){
+            item.value=item.oldValue;
+        }else{
+            if(item.inType=="int"){
+                item.value=parseInt(item.value);                
+            }else{
+                item.value=parseFloat(item.value);
+            }
+        }
+    }
+    item.oldValue=item.value;
+};
 const showDialog = (opt) => {
     dialog.show = true;
     dialog.editObj = opt.obj;
     dialog.title = opt.title;
+    dialog.type = opt.type;
     dialog.attrs = [];
-    for (let k in opt.obj) {
+    if (opt.type == 'p') {
-        dialog.attrs.push({ key: k, value: opt.obj[k] });
+        let attr = {
-    }
+            select: true,
-    dialog.attrs.push({key:'',value:''});
+            attrs: []
-}
-const inputKey=(a,b)=>{
-    if(dialog.attrs[dialog.attrs.length-1].key){
-        dialog.attrs.push({key:'',value:''});
-    }
         };
+        dialog.attrs.push(attr);
+        for (let k in opt.obj) {
+            let v = opt.obj[k];
+            let obj = makeParam(v);
+            if (obj) {
+                obj.name = k;
+                attr.attrs.push(obj);
+            }
+        }
+    } else {
+        opt.obj.forEach((o, idx) => {
+            let attr = {
+                select: idx == 0,
+                id: "" + (o.input_id || o.output_id),
+                attrs: [
+                ]
+            };
+            if (o.oper_inout_data_type) {
+                attr.attrs.push(
+                    {
+                        name: "dataType",
+                        value: o.oper_inout_data_type,
+                        oldValue:o.oper_inout_data_type,
+                        type: "input",
+                        inType: "string"
+                    }
+                )
+            }
+            dialog.attrs.push(attr);
+            for (let k in o) {
+                let v = o[k];
+                let obj = makeParam(v);
+                if (obj) {
+                    obj.name = k;
+                    attr.attrs.push(obj);
+                }
+            }
+        });
+        dialog.tab = dialog.attrs[0].id;
+    }
+
+
+}
+const makeParam = v => {
+    if (v["type"]) {
+        let obj = {
+
+        };
+        let oType = v["type"];
+        let oVal = v["value"];
+        if (oType.indexOf("/") >= 0) {
+            obj.type = "select"
+            obj.options = oType.split("/").filter(d => d.length > 0);
+        } else {
+            obj.type = "input"
+            obj.inType = oType;
+        }
+        obj.value = oVal;
+        obj.oldValue=oVal;
+        return obj;
+    }
+    return null;
+}
 
 defineExpose({
     showDialog
 })
 </script>
-<style scoped lang='less'></style>
+<style lang='scss'>
+.edit-param-dlg {
+    .el-tabs__item {
+        &.is-active {
+            background-color: #409eff9c;
+            color:#fff;
+        }
+    }
+    .div-item{
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+        .sp-label{
+            width:100px;
+            text-align: right;
+            margin-right: 10px;
+        }
+        .sp-value{
+            flex-grow: 1;
+        }
+    }
+}
+</style>

src/views/connection/nodePanel.vue

@@ -93,6 +93,7 @@ const updateNode = (nodes) => {
 }
 
 const doEdit=(nd)=>{    
+    debugger
     let tmps=info.all.filter(d=>d.id==nd.id);
     if(tmps.length>0){
         tmps[0].inputs=nd.inputs;