0730

ruoyi-ui/src/api/service/info.js

@@ -80,3 +80,13 @@ export function delService(id) {
     method: 'delete'
   })
 }
+export function getTreeDe(id) {
+  return request.get(`/interfaces/cate/${id}`);
+}
+export function addTree(data) {
+  return request({
+    url: '/interfaces/cate',
+    method: 'post',
+    data: data
+  })
+}

ruoyi-ui/src/views/service/info/index.vue

@@ -3,8 +3,8 @@
     <div style="width: 15%;;background-color: #F2F6FC;max-height: 85vh;overflow: auto;">
       <div style="display: flex;padding-top: 1%;padding-top: 5%;">
         <el-input
-          v-model="input2"
-          style="width:60%;margin-left: 5%;background-color: #ebeef5;"
+          v-model="inputNode"
+          style="width:75%;margin-left: 5%;background-color: #ebeef5;"
           class="w-50 m-2"
           :prefix-icon="Search" 
         />
@@ -12,45 +12,44 @@
         <el-button type="primary" @click="showAdd" style="margin-left: 5%;width: 10%;" :icon="Plus"/>
       </div>
       <!-- <Plus style="width: 1em; height: 1em; margin-left:90%;cursor: pointer;color: #337ecc;" @click="showAddTree"/> -->
-      <el-tree  :current-node-key="currentNodeKey" class="treeLeft" :data="data" @node-click="handleNodeClick" node-key="id" style="margin-left: 5%;margin-top: 5%;width: 90%;background-color: transparent;" default-expand-all :key="valueKet">
+      <el-tree :expand-on-click-node="false" ref="treeRef" :filter-node-method="filterNode" :current-node-key="currentNodeKey" class="treeLeft" :data="data" @node-click="handleNodeClick" node-key="id" style="margin-left: 5%;margin-top: 5%;width: 90%;background-color: transparent;" default-expand-all :key="valueKet">
           <template #default="{ node, data }">
             <span  style="justify-content: space-between;display: flex;width: 100%;align-items: center;">
               <div class="custom-tree-node">
-                <el-icon v-if="data.children"><Folder /></el-icon>
-                <div v-if="!data.children">
-                  <el-tag v-if="data.nodeType=='MODEL'" class="ml-2" type="warning">模型</el-tag>
+                  <!-- <el-tag v-if="data.nodeType=='MODEL'" class="ml-2" type="warning">模型</el-tag> -->
+                   <svg-icon icon-class="service1" style="color: #eebe77;" v-if="data.nodeType=='MODEL'"/>
                   <!-- <el-tag  class="ml-2">
                     服务
                   </el-tag> -->
                   <svg-icon icon-class="service2" style="color: #13E03B;" v-if="data.nodeType=='SERVICE'"/>
                   <el-tag v-if="data.nodeType=='TREE'" class="ml-2" type="success">树</el-tag>
-                </div>
                 <span>{{ node.label }}</span>
               </div>
-              <div style="margin-right: 1%;">
-                <el-dropdown trigger="hover" @click.stop v-if="currentNodeKey === data.id">
+              <div style="margin-right: 1%;position: absolute;margin-left: 75%;">
+                <el-dropdown trigger="hover" @click.stop v-if="currentNodeKey === data.id&&data.nodeType!=='SERVICE'">
                     <el-icon class="el-icon--right" style="color: black;">
                       <plus />
                     </el-icon>
                   <template #dropdown>
                     <el-dropdown-menu>
-                      <el-dropdown-item style="display: flex;">
+                      <el-dropdown-item style="display: flex;" @click="add1Lever">
                         <el-icon class="el-icon--right" style="color: black;">
                           <CirclePlus />
                         </el-icon>
                         <div>
-                          新建同级
+                          添加同级
                         </div>
                       </el-dropdown-item>
-                      <el-dropdown-item style="display: flex;">
+                      <el-dropdown-item style="display: flex;"  @click="addNextLever">
                         <el-icon class="el-icon--right" style="color: black;">
-                          <CirclePlus />
+                          <Connection />
                         </el-icon>
                         <div>
                           新建下级
                         </div>
                       </el-dropdown-item>
-                      <el-dropdown-item style="display: flex;">
+                      <divider/>
+                      <el-dropdown-item style="display: flex;"  @click="delAll" divided>
                         <el-icon class="el-icon--right" style="color: black;">
                           <CircleClose />
                         </el-icon>
@@ -503,7 +502,7 @@
                 </div>
             </el-tab-pane>
         </el-tabs>
-        <el-dialog @close="clearFromTree" :title="titleTree" v-model="dialogVisible" title="" width="70%" destroy-on-close :key="tableKey">
+        <el-dialog @close="clearAdd" v-model="dialogVisible" title="新增节点" width="70%" destroy-on-close :key="tableKey">
           <div style="overflow: auto;height: 80vh;">
                     <el-form size="mini" :key="tableKey" style="margin-top: 1%;width: 98%;"  :model="formAdd" label-position="right" ref="formRefAdd" label-width="120px" :rules="rulesAdd">
                       <el-row :gutter="48">
@@ -566,6 +565,23 @@
                                 </el-form-item>
                             </el-col>
                       </el-row>
+                      <el-row :gutter="48">
+                            <el-col :span="10">
+                              <el-form-item label="所属模型:" prop="mdid" style="">
+                                <el-select
+                                v-model="formAdd.mdid"
+                                    style="width: 100%;margin-left: 0%;"
+                                >
+                                    <el-option
+                                    v-for="item in optionsMdid"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.id"
+                                    />
+                                </el-select>
+                      </el-form-item>
+                            </el-col>
+                      </el-row>
                       <el-row :gutter="48">
                             <el-col :span="10">
                               <el-form-item label="响应类型:" prop="" style="display: flex; align-items: center;">
@@ -687,43 +703,6 @@
                         <el-tabs type="card" style="margin-top: -2%;width: 98%;">
                             <el-tab-pane label="响应内容">
                                 <div style="display: flex; flex-direction: column;">
-                                    <!-- <el-tree  :data="data" :props="defaultProps" @node-click="handleNodeClick" style="margin-top: 1%;margin-left: 2%;background-color: #F7F7F7;background-color: transparent;width: 15%;" default-expand-all>
-                                        <template #default="{ node, data }">
-                                            <span style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
-                                                <span><el-input v-model="node.label" size="mini"/></span>
-                                                <span style="display: flex;align-items: center;">
-                                                    <el-tooltip
-                                                        class="box-item"
-                                                        effect="light"
-                                                        content="是否必填"
-                                                        placement="top-start"
-                                                    >
-                                                    <el-checkbox v-model="checked1" label="" size="large" />
-                                                    </el-tooltip>
-                                                    <el-select
-                                                        v-model="formJi.type"
-                                                        :disabled="isEdit"
-                                                        style="width: 100%;margin-left: -1%;"
-                                                    >
-                                                        <el-option
-                                                        v-for="item in optionsType"
-                                                        :key="item.value"
-                                                        :label="item.label"
-                                                        :value="item.value"
-                                                        />
-                                                    </el-select>
-                                                    <el-tooltip
-                                                        class="box-item"
-                                                        effect="light"
-                                                        content="是否允许null"
-                                                        placement="top-start"
-                                                    >
-                                                    <el-checkbox v-model="checked1" label="" size="large" />
-                                                    </el-tooltip>
-                                                </span>
-                                            </span>
-                                        </template>
-                                    </el-tree> -->
                                    </div>
                             </el-tab-pane>
                         </el-tabs>
@@ -741,12 +720,36 @@
                     <el-input placeholder="请输入示例" :rows="8" type="textarea" v-model="exampleAdd" size="mini" text style="margin-top: -1%;width: 98%;" ></el-input>
                 </div>
                 </div>
+                <template #footer>
+                  <span class="dialog-footer">
+                    <el-button size="mini" @click="dialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="addSer" size="mini">
+                      提交
+                    </el-button>
+                </span>
+              </template>
+        </el-dialog>
+        <el-dialog @close="clearFromLev" title="添加目录" v-model="dialogVisibleLevel" width="30%" destroy-on-close :key="tableKey">
+          <el-form size="mini" :key="tableKey" style="margin-top: 1%;width: 90%;"  :model="formLev" label-position="right" ref="formRefLev" label-width="120px" :rules="rulesLev">
+            <el-form-item label="名称:" prop="itemName" style="">
+              <el-input v-model="formLev.itemName" style="width: 100%;"/>
+            </el-form-item>
+            <el-form-item label="说明:" prop="itemNotes" style="">
+              <el-input v-model="formLev.itemNotes" style="width: 100%;"/>
+            </el-form-item>
+            <el-form-item label="排序:" prop="itemNo" style="">
+              <el-input-number v-model="formLev.itemNo" style="width: 100%;" :min="1" :max="10000" @change="handleChange" />
+            </el-form-item>
+          </el-form>
           <template #footer>
-            <span class="dialog-footer">
-              <el-button size="mini" @click="dialogVisible = false">取消</el-button>
-              <el-button type="primary" @click="addSer" size="mini">
-                提交
-              </el-button>
+              <span class="dialog-footer">
+                <el-button size="mini" @click="dialogVisibleLevel = false">取消</el-button>
+                <el-button type="primary" @click="add1Level" size="mini" v-if="show1Lev">
+                  提交
+                </el-button>
+                <el-button type="primary" @click="addNextLevel" size="mini" v-if="!show1Lev">
+                  提交
+                </el-button>
             </span>
           </template>
         </el-dialog>
@@ -757,29 +760,23 @@
 import {getCatalog} from "@/api/service/catalog";
 import { Plus,Search,Filter,Promotion,Check  } from '@element-plus/icons-vue'
 import { reactive } from 'vue'
-import { modelTreeSelect,getSerDe,addService,addParam,editService,editParam,addServiceParam,delService } from "@/api/service/info";
+import { modelTreeSelect,getSerDe,addService,addParam,editService,editParam,addServiceParam,delService,getTreeDe,addTree } from "@/api/service/info";
 import { ref, onMounted, onUnmounted, nextTick,onBeforeMount } from 'vue';
 import JsonViewer from 'vue-json-viewer'
 import 'vue-json-viewer/style.css' 
 import  JsonEditorVue from 'json-editor-vue3'
 import { cloneDeep } from 'lodash'
 const { proxy } = getCurrentInstance();
-const treeData =  ref(
-    {label:'上海市城区洪涝仿真模型'}, 
-    {label:'上海沿海风暴潮预报模型'},
-    {label:'黄浦江水系水文分析预报数值模拟'},
-    {label:'苏州河水系水情预报模型'},
-    {label:'内涝风险实时预警与预报'},
-    {label:'上海市中心城区排水系统模型'},
-    {label:'温带风暴潮预报模型等专业模型的标准化改造'},
-)
 const JsonAdd= ref(JSON.stringify({ data: "初始值1" }))
 const exampleAdd = ref('')
+const dialogVisibleLevel = ref(false)
 const detail = ref({
   name:'',
   rqtype:'',
   rptype:''
 })
+const show1Lev = ref(true)
+const inputNode =ref('')
 const isEdit = ref(true)
 const dataReturn = ref({})
 const optionsCan = ref([
@@ -827,6 +824,7 @@ const options =  ref([
     },
 ])
 const dataJsonXiang = ref([])
+const parTree = ref({})
 const valueKet = ref(0)
 const tableDataCan = ref([
     {
@@ -836,6 +834,7 @@ const tableDataCan = ref([
       paramNote:''
     }
 ])
+const optionsMdid = ref([])
 const optionsRqtype = ref([
     {label:'GET',
     value:'GET'
@@ -917,14 +916,16 @@ const formAdd = ref({
   rqtype:'',
   rptype:'',
   intro:'',
+  mdid:''
 });
 const rulesAdd = reactive({
+  mdid: [{ required: true, message: '必填', trigger: 'blur' }],
   name: [{ required: true, message: '必填', trigger: 'blur' }],
   url: [{ required: true, message: '必填', trigger: 'blur' }],
   cateCode: [{ required: true, message: '必填', trigger: 'blur' }],
 });
 const formRefAdd = ref();
-
+const treeRef = ref(null);
 const formTree = ref({
   itemName:'',
   catePid:'',
@@ -937,12 +938,97 @@ const rulesTree = reactive({
   itemName: [{ required: true, message: '必填', trigger: 'blur' }],
 });
 const formRefTree = ref();
+const formLev = ref({
+  itemName:'',
+  itemNo:'',
+  itemNotes:'',
+});
+const rulesLev = reactive({
+  itemNotes: [{ required: true, message: '必填', trigger: 'blur' }],
+  itemNo: [{ required: true, message: '必填', trigger: 'blur' }],
+  itemName: [{ required: true, message: '必填', trigger: 'blur' }],
+});
+const formRefLev = ref();
 const cascaderOptions = ref([])
 const props1 = ref({
   checkStrictly: true,
 })
 const detailJson = ref([])
 
+watch(inputNode, (val) => {
+  treeRef.value?.filter(val); // 调用树的过滤方法
+});
+const filterNode = (value, data) => {
+  if (!value) return true; // 空搜索时显示所有节点
+  return data.label.includes(value); // 检查节点标签是否包含关键字
+};
+function clearAdd(){
+  formAdd.value = {
+    name:'',
+    cateCode:'',
+    type:'',
+    url:'',
+    rqtype:'',
+    rptype:'',
+    intro:'',
+    mdid:''
+  }
+  tableDataCanAdd.value = {
+    itemName:'',
+    itemCode:'',
+    paramType:'',
+    paramNote:''
+  }
+  JsonAdd.value = ''
+  exampleAdd.value = ''
+}
+function extractModelNodesDFSIterative(root) {
+  const result = [];
+  const stack = root;
+  
+  while (stack.length > 0) {
+    const node = stack.pop();
+    if (node.nodeType === 'MODEL') {
+      result.push(node);
+    }
+    
+    // 子节点逆序入栈（保证从左到右遍历）
+    if (node.children) {
+      for (let i = node.children.length - 1; i >= 0; i--) {
+        stack.push(node.children[i]);
+      }
+    }
+  }
+  return result;
+}
+
+function clearFromLev(){
+  formLev.value = {
+    itemName:'',
+    itemNo:'',
+    itemNotes:'',
+  }
+}
+function addNextLevel(){
+  
+}
+function add1Lever(){
+  dialogVisibleLevel.value = true
+  formRefLev.value.validate((valid) => {
+    if(valid){
+      var par = formLev.value
+      par.treeType = parTree.value.treeType
+      par.treePid = parTree.value.treePid
+      addTree(par).then(res=>{
+        if(res.code===200){
+          proxy.$modal.msgSuccess("新增成功");
+          getTreeLeft()
+          dialogVisibleLevel = false
+        }
+      })
+    }
+  });
+}
 async function delSer(){
   proxy.$modal.confirm('是否确认删除？').then(function () {
     return delService(parId.value.id);
@@ -1012,12 +1098,12 @@ async function addSer(){
 function showAdd(){
   dialogVisible.value = true
 }
-function handleNodeClick(node,data,event){
+async function handleNodeClick(node,data,event){
   currentNodeKey.value = data.data.id
   console.log(currentNodeKey.value)
   isEdit.value = false
   parId.value = data.data
-  getSerDe(data.data.id).then(res=>{
+  await getSerDe(data.data.id).then(res=>{
     detail.value = res.data.ptService
     detail.value.nodeType = data.data.nodeType
     tableDataCan.value = res.data.list
@@ -1027,11 +1113,20 @@ function handleNodeClick(node,data,event){
     formJi.value = res.data.ptService
     example.value = res.data.ptService.example
   })
+  if(data.data.nodeType==='MODEL'){
+    getTreeDe(data.data.id).then(res=>{
+      parTree.value = res.data
+    })
+  }
 }
-function getTreeLeft(){
-  modelTreeSelect().then(res=>{
+async function getTreeLeft(){
+  var par
+  await modelTreeSelect().then(res=>{
+    par = res.data
     data.value = res.data
   })
+  optionsMdid.value = extractModelNodesDFSIterative(par)
+  
 }
 function renameTreeProperties(tree) {
   // 深拷贝避免修改原始数据（可选，根据需求）