0729

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

@@ -44,4 +44,14 @@ export function getPtServiceList(query) {
     params: query,
   });
 }
+export function modelTreeSelect(query) {
+  return request({
+    url: "/interfaces/cate/modelTreeSelect",
+    method: "get",
+    params: query,
+  });
+}
+export function getSerDe(id) {
+  return request.get(`/pt/service/get/${id}`);
+}
 

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

@@ -1,6 +1,6 @@
 <template>
   <div style="width: 100%;;display: flex;">
-    <div style="width: 15%;;background-color: #F2F6FC;">
+    <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"
@@ -17,8 +17,11 @@
             <span class="custom-tree-node">
               <el-icon v-if="data.children"><Folder /></el-icon>
               <div v-if="!data.children">
-                <el-tag v-if="data.label=='父级2'" class="ml-2" type="success">GET</el-tag>
-                <el-tag v-if="data.label=='父级1'" class="ml-2">PUT</el-tag>
+                <el-tag v-if="data.nodeType=='MODEL'" class="ml-2" type="warning">模型</el-tag>
+                <el-tag v-if="data.nodeType=='SERVICE'" class="ml-2">
+                  服务
+                </el-tag>
+                <el-tag v-if="data.nodeType=='TREE'" class="ml-2" type="success">树</el-tag>
                 <!-- <el-tag class="ml-2" type="warning">POST</el-tag>
                 <el-tag class="ml-2" type="danger">DEL</el-tag> -->
               </div>
@@ -32,19 +35,23 @@
             <el-tab-pane label="查看" name="first" style="">
               <div style="height: 80vh;overflow: auto;">
                 <div style="display: flex;align-items: center;justify-content: space-between;">
-                    <div style="margin-left:1%;">修改数据项分类管理</div>
+                    <div style="margin-left:1%;">{{detail.name}}</div>
                     <div style="display: flex;">
-                        <el-button type="primary" size="mini" :icon="Promotion">运行</el-button>
-                        <el-button type="" size="mini">删除</el-button>
+                        <!-- <el-button type="primary" size="mini" :icon="Promotion" @click="fetchData">运行</el-button>
+                        <el-button type="" size="mini">删除</el-button> -->
                     </div>
                 </div>
                 <div style="display: flex;align-items: center;margin-left:1%;margin-top: 1%;">
-                    <el-tag type="primary" size="mini">PUT</el-tag>
+                    <el-tag v-if="detail.nodeType=='MODEL'" class="ml-2" type="warning">模型</el-tag>
+                    <el-tag v-if="detail.nodeType=='SERVICE'" class="ml-2">
+                      服务
+                    </el-tag>
+                    <el-tag v-if="detail.nodeType=='TREE'" class="ml-2" type="success">树</el-tag>
                     <div style="margin-left: 0.5%;">
-                        /data/cate
+                        {{detail.url}}
                     </div>
                     <div style="margin-left: 0.5%;">
-                        <el-select class="transparent-select" v-model="valueSta" style="border-color: transparent;width: 100px;">
+                        <!-- <el-select class="transparent-select" v-model="valueSta" style="border-color: transparent;width: 100px;">
                             <el-option
                             v-for="item in options"
                             :key="item.value"
@@ -66,48 +73,41 @@
                                     <span>{{ valueSta ? options.find(opt => opt.value === valueSta)?.label : '请选择' }}</span>
                                 </div>
                             </template>
-                        </el-select>
+                        </el-select> -->
                     </div>
                 </div>
                 <div style="display: flex;width: 100%;">
-                    <div style="display: flex;margin-left: 1%;font-size: 15px;color:#909399;width:100% ;">
+                    <div style="display: flex;margin-left: 1%;font-size: 15px;color:#909399;width:100%;margin-top: 1%;">
                         <div>
                             服务分类:
                         </div>
                         <div style="margin-left: 0.5%;">
-                            2025年7月25日
-                        </div>
-                        <div style="margin-left: 5%;">
-                            服务名称:
-                        </div>
-                        <div style="margin-left: 0.5%;">
-                            2025年7月25日
-                        </div>
-                        <div style="margin-left: 5%;">
-                            接口地址:
-                        </div>
-                        <div style="margin-left: 0.5%;">
-                            几秒前
+                            {{detail.name}}
                         </div>
                         <div style="margin-left: 5%;">
                             请求方式:
                         </div>
                         <div style="margin-left: 0.5%;">
-                            秦素衣
+                            {{detail.rqtype}}
                         </div>
                         <div style="margin-left: 5%;">
-                            接口格式:
+                            接口类型:
                         </div>
                         <div style="margin-left: 0.5%;">
-                            朱得糠
+                            {{detail.name}}
                         </div>
                         <div style="margin-left: 5%;">
                             返回格式:
                         </div>
                         <div style="margin-left: 0.5%;">
-                            数据项分类
+                            {{detail.rptype}}
                         </div>
-                        
+                        <!-- <div style="margin-left: 5%;">
+                            接口地址:
+                        </div>
+                        <div style="margin-left: 0.5%;">
+                            {{detail.url}}
+                        </div> -->
                         
                     </div>
                 </div>
@@ -116,7 +116,7 @@
                         服务说明:
                     </div>
                     <div style="margin-left: 0.5%;">
-                        数据项分类
+                        {{detail.name}}
                     </div>
                 </div>
                 <div style="margin-left: 1%;font-size: 15px;color:#909399;width:100%;display: flex;margin-top: 0.5%;">
@@ -124,25 +124,25 @@
                         返回说明:
                     </div>
                     <div style="margin-left: 0.5%;">
-                        数据项分类
+                        {{detail.name}}
                     </div>
                 </div>
                 <div style="margin-top: 2.5%;margin-left: 1%;">
                     <div>请求参数</div>
                     <el-table 
-                      style="margin-top: 1%;"
+                      style="margin-top: 1%;width: 90%;"
                       :data="tableDataCan" 
                       :cell-style="{ textAlign: 'center', }"
                       :header-cell-style="{ textAlign: 'center'}"
                       :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
                       border >
-                          <el-table-column prop="itemName" label="参数字段">
+                          <el-table-column prop="paramCode" label="参数字段">
                           </el-table-column>
-                          <el-table-column prop="itemName" label="参数名称">
+                          <el-table-column prop="paramName" label="参数名称">
                           </el-table-column>
-                          <el-table-column prop="itemName" label="参数类型" width="100">
+                          <el-table-column prop="paramType" label="参数类型" width="140">
                           </el-table-column>
-                          <el-table-column prop="itemName" label="参数说明">
+                          <el-table-column prop="paramNote" label="参数说明">
                           </el-table-column>
                       </el-table>
                 </div>
@@ -156,7 +156,7 @@
                                 <div style="margin-left: 5%;">内容格式：</div>
                                 <div>JSON</div>
                             </div>
-                            <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>
+                            <el-tree  :data="data1" :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>{{ node.label }}</span>
@@ -182,7 +182,7 @@
                         <el-tab-pane label="成功示例">
                              <div style="overflow: auto;height: 50vh">
                                 <json-viewer 
-                                    :value="data" 
+                                    :value="dataJsonXiang" 
                                     :expand-depth="5" 
                                     copyable 
                                     theme="my-theme"
@@ -206,7 +206,6 @@
                               <el-form-item label="服务名称:" prop="version" style="">
                                   <div style="display: flex;width: 100%;justify-content: space-between;">
                                     <el-input v-model="formJi.version" style="width: 100%;"/>
-                                    
                                   </div>
                               </el-form-item>
                             </el-col>
@@ -259,7 +258,7 @@
                                         style="width: 100%;margin-left: 0%;"
                                     >
                                         <el-option
-                                        v-for="item in optionsType"
+                                        v-for="item in optionsRqtype"
                                         :key="item.value"
                                         :label="item.label"
                                         :value="item.value"
@@ -284,6 +283,11 @@
                                 </el-radio-group>
                               </el-form-item>
                             </el-col>
+                            <el-col :span="6">
+                                <el-form-item label="服务分类:" prop="name" style="">
+                                    <el-cascader v-model="a" :options="cascaderOptions" :props="props1" clearable style="width: 100%;"></el-cascader>
+                                </el-form-item>
+                            </el-col>
                             <!-- <el-col :span="8">
                                 <el-form-item label="请求方式:" prop="name" style="">
                                     <el-select
@@ -311,7 +315,7 @@
                         
                     </el-form>
                     <div style="margin-top: 2%;">
-                        <div style="display: flex;justify-content: space-between;">
+                        <div style="display: flex;justify-content: space-between;align-items: center;">
                           <div>
                             请求参数
                           </div>
@@ -323,21 +327,21 @@
                             <el-table 
                             style="margin-top: 1%;width: 98%;"
                             :data="tableDataCan" 
-                            :cell-style="{ textAlign: 'center', }"
+                            :cell-style="{ textAlign: 'center',padding:'2px 0' }"
                             :header-cell-style="{ textAlign: 'center'}"
                             :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
                             border >
                                 <el-table-column prop="itemName" label="参数字段">
                                     <template #default="scope">
                                         <div style="width: 100%;">
-                                            <el-input type="primary" class="noBor" v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;border: transparent;"></el-input>
+                                            <el-input placeholder="请填写参数编码" type="primary" class="noBor" v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;border: transparent;"></el-input>
                                         </div>
                                     </template>
                                 </el-table-column>
                                 <el-table-column prop="itemName" label="参数名称">
                                     <template #default="scope">
                                         <div style="width: 100%;">
-                                            <el-input type="primary" class="noBor" v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;"></el-input>
+                                            <el-input placeholder="请填写参数名称" type="primary" class="noBor" v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;"></el-input>
                                         </div>
                                     </template>
                                 </el-table-column>
@@ -379,10 +383,10 @@
                         </div>
                     </div>
                     <div style="margin-top: 2%;">
-                        <div>返回响应</div>
+                        <!-- <div>返回响应</div> -->
                         <div style="color: #909399;margin-left: 7%;margin-top:1%;">此处填写本服务接口响应信息描述</div>
                         <el-tabs type="card" style="margin-top: -1.5%;width: 98%;">
-                            <el-tab-pane label="成功">
+                            <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 }">
@@ -421,8 +425,7 @@
                                             </span>
                                         </template>
                                     </el-tree> -->
-                                    
-                                  </div>
+                                   </div>
                             </el-tab-pane>
                         </el-tabs>
                         <div style="overflow: auto;height: 20vh;margin-top: -1%;">
@@ -673,14 +676,15 @@
   </div>
 </template>
 <script   setup>
+import {getCatalog} from "@/api/service/catalog";
 import { Plus,Search,Filter,Promotion,Check  } from '@element-plus/icons-vue'
 import { reactive } from 'vue'
-import { addDataCate,getCateTree,getCateDe,editCate,delCate,addDataItem,getItem,getItemDe,editItem,delItem} from "@/api/service/cate";
+import { modelTreeSelect,getSerDe } 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:'上海市城区洪涝仿真模型'}, 
@@ -695,6 +699,11 @@ const msgSu= ref({
   "msg":"操作成功",
   "code":200
 })
+const detail = ref({
+  name:'',
+  rqtype:'',
+  rptype:''
+})
 const options =  ref([
     {label:'开发中',
     value:'1'
@@ -703,8 +712,29 @@ const options =  ref([
     value:'2'
     },
 ])
-const tableDataCan = ref([
-    {itemName:'1'}
+const dataJsonXiang = ref([])
+const tableDataCan = ref([])
+const optionsRqtype = ref([
+    {label:'GET',
+    value:'GET'
+    },
+    {label:'POST',
+    value:'POST'
+    },
+])
+const optionsType=  ref([
+    {label:'RESTful',
+    value:'RESTful'
+    },
+    {label:'WebService',
+    value:'WebService'
+    },
+    {label:'HTTP',
+    value:'HTTP'
+    },
+    {label:'WebSocket',
+    value:'WebSocket'
+    },
 ])
 const data =  ref([])
 const select =  ref('1')
@@ -767,145 +797,97 @@ const rulesTree = reactive({
   itemName: [{ required: true, message: '必填', trigger: 'blur' }],
 });
 const formRefTree = ref();
+const cascaderOptions = ref([])
+const props1 = ref({
+  checkStrictly: true,
+})
 
-function addPa(){
-    var par = {
-        itemName:''
-    }
-    tableDataCan.value.push(par)
-}
-function delCan(row){
-
-}
-function clearForm(){
-  formZu.value = {
-    itemName:'',
-    itemTp:'',
-    itemEn:'',
-    itemTp:'',
-    itemDataTp:'',
-    itemDefaultVal:'',
-    itemUnit:'',
-    itemNotes:'',
-  }
-}
-function getTable(){
-  var par = {
-    pageNum:currentPage.value,
-    pageSize:15,
-    cateId:''
-  }
-  getItem(par).then(res=>{
-    tableData.value = res.rows
-    total.value = res.total
+function handleNodeClick(node,data){
+  getSerDe(data.id).then(res=>{
+    detail.value = res.data
+    detail.value.nodeType = data.data.nodeType
+    tableDataCan.value = res.data.list
+    dataJsonXiang.value = res.data.returnList
+    console.log(detail.value,data)
   })
 }
-function showAdd(){
-  title.value = '新增'
-  dialogVisible.value = true
-}
-function showEdit(row){
-  isAddTa.value = false
-  title.value = '编辑'
-  dialogVisible.value = true
-  getItemDe(row.dataId).then(res=>{
-    formZu.value = res.data
-  })
-}
-function showAddTree(){
-  isAdd.value = true
-  titleTree.value = '新增节点'
-  dialogVisibleTree.value = true
-}
-function clearFromTree(){
-  formTree.value = {
-    itemName:'',
-    catePid:'',
-    itemNo:'',
-    itemNotes:''
-  }
-}
-function getTree(){
-  getCateTree().then(res=>{
+function getTreeLeft(){
+  modelTreeSelect().then(res=>{
     data.value = res.data
   })
 }
-function addTa(){
-  formRefZu.value.validate(async (valid) => {
-    await addDataItem(formZu.value).then(res=>{
-      if(res.code===200){
-        proxy.$modal.msgSuccess("新增成功");
-        getTable()
-        dialogVisible.value = false
-      }
-    })
-  });
-}
-function saveEditTa(){
-  editItem(formZu.value).then(res=>{
-    if(res.code===200){
-      proxy.$modal.msgSuccess("修改成功");
-      dialogVisible.value = false
-      getTable()
+function renameTreeProperties(tree) {
+  // 深拷贝避免修改原始数据（可选，根据需求）
+  const newTree = cloneDeep(tree); // 使用 lodash
+  // 或：const newTree = JSON.parse(JSON.stringify(tree)); // 原生方法（不兼容函数等）
+
+  // 递归处理函数
+  const processNode = (node) => {
+    // 重命名属性
+    if ('cateName' in node) {
+      node.label = node.cateName;
+      delete node.cateName;
     }
-  })
-}
-function delRow(row) {
-  proxy.$modal.confirm('是否确认删除？').then(function () {
-    return delItem(row.dataId);
-  }).then(() => {
-    getTable();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
-};
-async function addTree(){
-  formRefTree.value.validate(async (valid) => {
-    await addDataCate(formTree.value).then(res=>{
-      if(res.code===200){
-        proxy.$modal.msgSuccess("新增成功");
-        getTree()
-        dialogVisibleTree.value = false
-      }
-    })
+    if ('cateCode' in node) {
+      node.value = node.cateCode;
+      delete node.cateCode;
+    }
+
+    // 递归处理子节点
+    if (node.children && node.children.length > 0) {
+      node.children.forEach(child => processNode(child));
+    }
+  };
+
+  // 遍历根节点
+  newTree.forEach(rootNode => processNode(rootNode));
+  return newTree;
+}
+function fetchData() {
+  getCatalog().then((r) => {
+    cascaderOptions.value = renameTreeProperties(buildTree(r.data))
+    console.log(cascaderOptions.value)
   });
 }
-function saveEditTree(){
-  editCate(formTree.value).then(res=>{
-    if(res.code===200){
-      proxy.$modal.msgSuccess("修改成功");
-      dialogVisibleTree.value = false
-      getTree()
+function buildTree(flatData, rootValue = '0') {
+      const nodeMap = new Map();
+      const tree = [];
+      flatData.forEach(item => {
+        nodeMap.set(item.cateCode, { ...item, children: [] });
+      });
+      for (const [code, node] of nodeMap) {
+        const parentCode = node.catePcode;
+        if (parentCode === rootValue || !parentCode) {
+          tree.push(node);
+          continue;
+        }
+        const parent = nodeMap.get(parentCode);
+        if (parent) {
+          parent.children.push(node);
+        } else {
+          console.warn(`Orphan node detected: ${code}. Parent ${parentCode} not found`);
+        }
+      }
+
+      return tree;
     }
-  })
-}
-function handleNodeClick(node, data){
-  console.log(data)
+function addPa(){
+    var par = {
+        itemName:''
+    }
+    tableDataCan.value.push(par)
 }
-function delTree(node, data) {
-  proxy.$modal.confirm('是否确认删除？').then(function () {
-    return delCate(data.id);
-  }).then(() => {
-    getTree();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
-};
-function editTree(node, data){
-  console.log(data)
-  titleTree.value = '编辑'
-  isAdd.value = false
-  dialogVisibleTree.value = true
-  getCateDe(data.id).then(res=>{
-    formTree.value = res.data
-  })
-  console.log(node, data)
+function delCan(row){
+
 }
 onMounted(() => {
-  getTree()
-  getTable()
+  fetchData()
+  getTreeLeft()
 });
 
 </script>
 <style scoped>
+
 .noBorSel :deep(.el-select__wrapper){
   box-shadow: none !important; /* 去除阴影边框 */
   border: 1px solid transparent !important; /* 设置透明边框 */
@@ -958,10 +940,13 @@ onMounted(() => {
 </style>
 <style scoped>
 :deep(.treeLeft) .el-tree-node__content {
-  padding-top: 10px;
+  display: flex !important;
+  height: 28px;                  /* 按设计稿调整高度 */
+  align-items: center;
+  padding-top: 0 !important;
 }
 :deep(.treeLeft) .el-tree-node__content:hover {
-  background-color: rgb(243，243，245);
+  background-color: #e9e9eb;
 }
 :deep(.treeLeft) .el-tree-node__content:active {
     background-color: rgka(69,157,255,0.1) !important;
@@ -970,7 +955,7 @@ onMounted(() => {
 
   /* 选中态（Active） */
 :deep(.treeLeft) .el-tree-node.is-current > .el-tree-node__content {
-    background-color: rgb(237,237，239) !important;
+    background-color: #c6e2ff !important;
   }
 
 .tab-container {