Signed-off-by: zhaobao <528046418@qq.com>

src/components/ToolHeader/index.vue

@@ -11,6 +11,7 @@ defineProps({
   <div class="tool-header">
     <div class="title">
       {{ title }}
+      <slot name="title" />
     </div>
     <div class="center">
       <slot name="center" />

src/views/model/model/index.vue

@@ -218,7 +218,6 @@ const onObjectDelete = (row: any) => {
         </el-button>
       </template>
     </tool-header>
-
     <div class="page-main">
       <LayoutContainer left-side-width="300px" hide-left-side-toggle>
         <template #leftSide>

src/views/model/oam/index.vue

@@ -36,6 +36,12 @@ interface ObjectOAM {
   oamType: number
   oamStatement: string
   oamDesc: string
+
+  sqlStatement: string
+  sqlSelect: string
+  sqlFrom: string
+  sqlWhere: string
+  sqlOrder: string
 }
 
 const state = reactive({
@@ -163,7 +169,7 @@ function goBack() {
 
 <template>
   <div class="absolute-container">
-    <page-header :title="state.objectTitle" :content="state.objectCode">
+    <page-header :title="state.objectTitle" :content="state.objectCode ">
       <el-button size="default" round @click="goBack">
         <template #icon>
           <el-icon>
@@ -173,7 +179,6 @@ function goBack() {
         返回
       </el-button>
     </page-header>
-
     <div class="page-main">
       <LayoutContainer left-side-width="300px" hide-left-side-toggle>
         <template #leftSide>
@@ -213,12 +218,12 @@ function goBack() {
           <page-main title="SQL">
             <div class="question">
               <ol class="answer">
-                <li><span>Sql</span><br>{{ state.oam.sqlStatement  }}</li>
-                <li><span>Select</span><br>{{ state.oam.sqlSelect  }}</li>
-                <li><span>From </span><br>{{ state.oam.sqlFrom  }}</li>
-                <li><span>Where</span><br>{{ state.oam.sqlWhere  }}</li>
-                <li><span>Order</span><br>{{ state.oam.sqlOrder  }}</li>
-                <li><span>说明</span><br>{{ state.oam.oamDesc  }}</li>
+                <li><span>Sql</span><br>{{ state.oam.sqlStatement }}</li>
+                <li><span>Select</span><br>{{ state.oam.sqlSelect }}</li>
+                <li><span>From </span><br>{{ state.oam.sqlFrom }}</li>
+                <li><span>Where</span><br>{{ state.oam.sqlWhere }}</li>
+                <li><span>Order</span><br>{{ state.oam.sqlOrder }}</li>
+                <li><span>说明</span><br>{{ state.oam.oamDesc }}</li>
               </ol>
             </div>
           </page-main>
@@ -231,55 +236,18 @@ function goBack() {
 
 <style lang="scss" scoped>
 .absolute-container {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .page-header {
-    margin-bottom: 0;
-  }
-
-  .page-main {
-    // 让 page-main 的高度自适应
-    flex: 1;
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-
-    .flex-container {
-      position: static;
-    }
-  }
-}
-
-.flex-container {
   :deep(.left-side) {
     display: flex;
     flex-direction: column;
     height: 100%;
 
-    .btns {
-      display: inline-flex;
-      width: 100%;
-
-      .add {
-        width: 100%;
-      }
-    }
-
-    .search {
-      margin: 15px 0;
-    }
-
     .tree {
       flex: 1;
       overflow-y: auto;
 
       .el-tree {
         .el-tree-node__content {
-          height: 60px;
+          height: 40px;
         }
 
         .is-current > .el-tree-node__content {
@@ -296,17 +264,14 @@ function goBack() {
           justify-content: center;
 
           .label {
+            display: inline-flex;
+            align-items: center;
             width: calc(100% - 10px);
             color: var(--el-text-color-primary);
 
-            @include text-overflow;
-          }
-
-          .code {
-            width: calc(100% - 10px);
-            color: var(--el-text-color-placeholder);
-
-            @include text-overflow;
+            .text {
+              @include text-overflow;
+            }
           }
 
           &:hover {
@@ -331,30 +296,6 @@ function goBack() {
     }
   }
 }
-
-:deep(.main) {
-  display: flex;
-  justify-content: center;
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-
-  .empty {
-    text-align: center;
-    font-size: 32px;
-    color: var(--el-text-color-placeholder);
-  }
-
-  .el-table {
-    margin: 15px 0;
-  }
-}
-
 .question {
   .answer {
     margin: 20px 0 0;

src/views/paas/atu/components/ModelObjectSelector.vue

@@ -7,7 +7,6 @@ meta:
 import { getModelByList } from '@/api/model/modelApi'
 import { getObjectByList } from '@/api/model/objectApi'
 import { getObjectOAMByList } from '@/api/model/objectOAMApi'
-import { createAtu } from '@/api/paas/apiTransUnitApi'
 
 interface TreeNode {
   label: string
@@ -47,6 +46,7 @@ const state = reactive({
     objectId: 0,
     oamId: 1,
   },
+  objectOAMDetail: {},
 })
 
 const leftTreeRef = ref()
@@ -124,9 +124,10 @@ const onObjectOAMSel = async (row: { modelId: any; objectId: any; oamId: any })
   state.formData.modelId = row.modelId
   state.formData.objectId = row.objectId
   state.formData.oamId = row.oamId
-  await createAtu(state.formData)
-  emit('onSuccess')
-  dialogVisible.value = false
+  state.objectOAMDetail = row
+  // await createAtu(state.formData)
+  // emit('onSuccess')
+  // dialogVisible.value = false
 }
 
 // 点击选择
@@ -141,98 +142,89 @@ defineExpose({
 </script>
 
 <template>
-  <el-drawer v-model="dialogVisible" :title="state.title" size="55%">
-    <div class="absolute-container">
-      <div class="page-main">
-        <LayoutContainer left-side-width="200px" hide-left-side-toggle>
-          <template #leftSide>
-            <el-scrollbar class="tree">
-              <ElTree ref="leftTreeRef" :data="state.models" default-expand-all node-key="modelId" @node-click="onTreeNodeClick">
-                <template #default="{ node, data }">
-                  <div class="custom-tree-node">
-                    <div class="label" :title="node.label">
-                      <el-icon v-if="data.isLeaf" size="16px" style="margin-right: 5px;">
-                        <svg-icon name="uim:box" />
-                      </el-icon>
-                      <div class="text">
-                        {{ data.label }}
-                      </div>
+  <el-drawer v-model="dialogVisible" :title="state.title" size="100%">
+    <el-row :gutter="10" style="height:100%">
+      <el-col :xs="24" :span="5" class="small-row">
+        <el-card style="height:100%">
+          <el-scrollbar class="tree">
+            <ElTree ref="leftTreeRef" :data="state.models" default-expand-all node-key="modelId" @node-click="onTreeNodeClick">
+              <template #default="{ node, data }">
+                <div class="custom-tree-node">
+                  <div class="label" :title="node.label">
+                    <el-icon v-if="data.isLeaf" size="16px" style="margin-right: 5px;">
+                      <svg-icon name="uim:box" />
+                    </el-icon>
+                    <div class="text">
+                      {{ data.label }}
                     </div>
                   </div>
-                </template>
-              </ElTree>
-            </el-scrollbar>
-          </template>
-          <div class="container">
-            <el-table ref="objectTableRef" v-loading="state.loading" class="list-table" :data="state.objectList" border stripe highlight-current-row height="100%">
-              <el-table-column type="index" label="序号" header-align="center" align="center" width="70" />
-              <el-table-column prop="objectTitle" label="名称" header-align="center" align="center" minwidth="200" />
-              <el-table-column prop="objectCode" label="代码" header-align="center" align="center" minwidth="150" />
-              <el-table-column prop="objectType" label="类型" header-align="center" align="center" minwidth="150">
-                <template #default="scope">
-                  <span v-if="scope.row.objectType === 1">实体对象</span>
-                  <span v-else>视图对象</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="comment" label="说明" header-align="center" align="left" />
-              <el-table-column label="操作" header-align="center" align="center" width="100">
-                <template #default="scope">
-                  <el-button type="primary" size="small" plain @click="onObjectSel(scope.row)">
-                    选择
-                  </el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
-
-          <template #rightSide >
-            <el-table ref="objectOAMTableRef" v-loading="state.loading" class="list-table" :data="state.objectOAMList" border stripe highlight-current-row height="100%">
-              <el-table-column type="index" label="序号" header-align="center" align="center" width="70" />
-              <el-table-column prop="oamTitle" label="名称" header-align="center" align="center" minwidth="200" />
-              <el-table-column prop="oamType" label="类型" header-align="center" align="center" minwidth="150" />
-              <el-table-column prop="oamDesc" label="说明" header-align="center" align="left" />
-              <el-table-column label="操作" header-align="center" align="center" width="100">
-                <template #default="scope">
-                  <el-button type="primary" size="small" plain @click="onObjectOAMSel(scope.row)">
-                    选择
-                  </el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-          </template>
-        </LayoutContainer>
-      </div>
-    </div>
+                </div>
+              </template>
+            </ElTree>
+          </el-scrollbar>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :span="5" class="objectListtable lg-row">
+        <el-card style="height:100%">
+          <el-table
+            v-if="state.objectList && state.objectList.length > 0"
+            ref="objectTableRef"
+            v-loading="state.loading"
+            class="list-table"
+            :data="state.objectList" border :show-header="false"
+            stripe highlight-current-row height="100%" @row-click="onObjectSel"
+          >
+            <el-table-column prop="objectTitle" label="名称" header-align="center" align="center" minwidth="200" />
+            <el-table-column prop="objectCode" label="代码" header-align="center" align="center" minwidth="150" />
+            <el-table-column prop="objectType" label="类型" header-align="center" align="center" minwidth="150">
+              <template #default="scope">
+                <span v-if="scope.row.objectType === 1">实体对象</span>
+                <span v-else>视图对象</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="comment" label="说明" header-align="center" align="left" />
+          </el-table>
+          <el-Empty v-else />
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :span="5" class="objectOAMTableRef small-row">
+        <el-card style="height:100%">
+          <el-table
+            v-if="state.objectOAMList && state.objectOAMList.length > 0"
+            ref="objectOAMTableRef"
+            v-loading="state.loading"
+            class="list-table"
+            :data="state.objectOAMList"
+            border :show-header="false"
+            stripe highlight-current-row height="100%" @row-click="onObjectOAMSel"
+          >
+            <el-table-column prop="oamTitle" label="名称" header-align="center" align="center" minwidth="200" />
+            <el-table-column prop="oamType" label="类型" header-align="center" align="center" minwidth="150" />
+            <el-table-column prop="oamDesc" label="说明" header-align="center" align="left" />
+          </el-table>
+          <el-Empty v-else />
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :span="9" class="objectOAMTableRef">
+        <el-card style="height:100%">
+          <ul v-if="state.objectOAMDetail" class="result-container">
+            <li v-for="(value, key) in state.objectOAMDetail" :key="key">
+              <h3> {{ key }}</h3>
+              <p>{{ value }}</p>
+            </li>
+          </ul>
+          <el-Empty v-else />
+        </el-card>
+      </el-col>
+    </el-row>
   </el-drawer>
 </template>
 
 <style lang="scss" scoped>
-.container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.absolute-container {
-  :deep(.left-side) {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    .btns {
-      display: inline-flex;
-      width: 100%;
-      margin-bottom: var(--container-padding);
-
-      .add {
-        width: 100%;
-      }
-    }
-
-    .tree {
+:deep(.tree)
+ {
       flex: 1;
       overflow-y: auto;
-
       .el-tree {
         .el-tree-node__content {
           height: 40px;
@@ -282,6 +274,4 @@ defineExpose({
         }
       }
     }
-  }
-}
 </style>

src/views/paas/req/index.vue

@@ -7,7 +7,7 @@ const { pagination, getParams, onSizeChange, onCurrentChange } = usePagination()
 interface TreeNode {
   label: string
   isLeaf: boolean
-  modId: number
+  moduleId: number
   children?: TreeNode[]
 }
 
@@ -27,7 +27,7 @@ const ModuleRef = ref()
 // 查询日志列表
 const getReqData = async () => {
   const params = getParams()
-  params.modId = state.curModuleId
+  params.moduleId = state.curModuleId
   params.keywords = state.search.keywords
   state.loading = true
   const { data } = await getApiReqByPage(params)
@@ -40,8 +40,8 @@ const getModuleData = async () => {
   const children: TreeNode[] = []
   data.forEach((item: any) => {
     return children.push({
-      label: item.modTitle,
-      modId: item.modId,
+      label: item.moduleTitle,
+      moduleId: item.moduleId,
       isLeaf: true,
     })
   })
@@ -49,15 +49,15 @@ const getModuleData = async () => {
     {
       label: 'API模块列表',
       isLeaf: false,
-      modId: -1,
+      moduleId: -1,
       children,
     },
   ]
 
   if (data && data.length > 0) {
-    state.curModuleId = data[0].modId
+    state.curModuleId = data[0].moduleId
     nextTick(() => {
-      leftTreeRef.value.setCurrentKey(data[0].modId)
+      leftTreeRef.value.setCurrentKey(data[0].moduleId)
     })
     await getReqData()
   }
@@ -84,7 +84,7 @@ onMounted(() => {
 // 模块选择
 const onTreeNodeClick = (node: TreeNode) => {
   if (node.isLeaf) {
-    state.curModuleId = node.modId
+    state.curModuleId = node.moduleId
     getReqData()
   }
 }
@@ -109,7 +109,7 @@ const onReqDel = async (data: { apiTitle: any; reqId: number }) => {
       <LayoutContainer left-side-width="300px" hide-left-side-toggle>
         <template #leftSide>
           <el-scrollbar class="tree">
-            <ElTree ref="leftTreeRef" :data="state.modules" default-expand-all node-key="modId" @node-click="onTreeNodeClick">
+            <ElTree ref="leftTreeRef" :data="state.modules" default-expand-all node-key="moduleId" @node-click="onTreeNodeClick">
               <template #default="{ node, data }">
                 <div class="custom-tree-node">
                   <div class="label" :title="node.label">
@@ -120,8 +120,7 @@ const onReqDel = async (data: { apiTitle: any; reqId: number }) => {
                       {{ data.label }}
                     </div>
                   </div>
-                  <div v-if="data.isLeaf" class="actions">
-                  </div>
+                  <div v-if="data.isLeaf" class="actions" />
                 </div>
               </template>
             </ElTree>