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

src/views/daas/behavior/index.vue

@@ -30,6 +30,8 @@ interface Object {
 const state = reactive({
   loading: false,
   keywords: '',
+  objectList: [] as TreeNode[],
+  dataList: [],
   models: [] as TreeNode[],
   curModelId: 0,
   objects: [] as Object[],
@@ -46,8 +48,24 @@ const getObjectData = async () => {
   if (curModelId > 0) {
     state.loading = true
     const { data } = await getObjectByList({ modelId: curModelId })
-    state.objectList = data
     state.loading = false
+    if (data.length > 0) {
+      const view = data.filter((item: { objectType: number }) => item.objectType === 1)
+      const entity_object = data.filter((item: { objectType: number }) => item.objectType === 2)
+      const treeData = [
+        {
+          objectTitle: '视图',
+          children: view,
+          disabled: true,
+        },
+        {
+          objectTitle: '实体类',
+          children: entity_object,
+          disabled: true,
+        },
+      ]
+      state.objectList = treeData as unknown as TreeNode[]
+    }
   }
 }
 
@@ -72,10 +90,13 @@ const getModelData = async () => {
 
   if (data && data.length > 0) {
     state.curModelId = data[0].modelId
+    nextTick(() => {
+      leftTreeRef.value.setCurrentKey(data[0].modelId)
+    })
     await getObjectData()
   }
 }
-
+const onModelAdd = () => {}
 onMounted(() => {
   getModelData()
 })
@@ -88,9 +109,6 @@ const onTreeNodeClick = (node: TreeNode) => {
   }
 }
 
-const objectTableRef = ref()
-const objectRef = ref()
-
 // 检索对象
 const onObjectSearch = () => {
   getObjectData()
@@ -116,10 +134,10 @@ const onObjectClick = () => { }
     </tool-header>
 
     <div class="page-main">
-      <LayoutContainer left-side-width="300px" hide-left-side-toggle>
+      <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-click="onTreeNodeClick">
+            <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">
@@ -135,35 +153,61 @@ const onObjectClick = () => { }
             </ElTree>
           </el-scrollbar>
         </template>
-
-        <div class="container">
-          <tool-bar>
-            <template #right>
-              <el-input v-model="state.objectSearch.keywords" placeholder="请输入名称，支持模糊查询" style="padding-right: 10px;" clearable />
-              <el-button type="primary" @click="onObjectSearch">
-                <template #icon>
-                  <el-icon>
-                    <svg-icon name="i-ep:search" />
-                  </el-icon>
-                </template>
-              </el-button>
-            </template>
-          </tool-bar>
-          <el-scrollbar class="tree">
-            <ElTree ref="objectTreeRef" :data="state.objectList" default-expand-all @node-click="onObjectClick">
-              <template #default="{ node, data }">
-                <div class="custom-tree-node">
-                  <div class="label" :title="node.title">
-                    {{ data.objectTitle }}
-                  </div>
-                  <div class="code">
-                    {{ data.objectCode }}
+        <el-row class="right-conatiner" :gutter="20">
+          <el-col class="right-conatiner-tree" :lg="6" :md="24" :xs="24">
+            <tool-bar>
+              <template #center>
+                <el-input v-model="state.objectSearch.keywords" placeholder="请输入名称，支持模糊查询" style="padding-right: 10px;" clearable />
+                <el-button type="primary" @click="onObjectSearch">
+                  <template #icon>
+                    <el-icon>
+                      <svg-icon name="i-ep:search" />
+                    </el-icon>
+                  </template>
+                </el-button>
+              </template>
+            </tool-bar>
+            <el-scrollbar class="tree" style="margin-top: 15px;">
+              <ElTree ref="objectTreeRef" :data="state.objectList" default-expand-all @node-click="onObjectClick">
+                <template #default="{ node, data }">
+                  <div class="custom-tree-node">
+                    <div class="label" :title="node.title">
+                      {{ data.objectTitle }}
+                    </div>
                   </div>
-                </div>
+                </template>
+              </ElTree>
+            </el-scrollbar>
+          </el-col>
+          <el-col class="container" :lg="18" :md="24" :xs="24">
+            <tool-bar>
+              <template #left>
+                <h2>属性</h2>
               </template>
-            </ElTree>
-          </el-scrollbar>
-        </div>
+              <template #right>
+                <el-input v-model="state.objectSearch.keywords" placeholder="请输入关键词筛选字典项" clearable style="width: 200px;" />
+                <el-button style="margin-left:10px" @click="getObjectData">
+                  <template #icon>
+                    <el-icon>
+                      <svg-icon name="i-ep:search" />
+                    </el-icon>
+                  </template>
+                </el-button>
+              </template>
+            </tool-bar>
+            <el-table :data="state.dataList" border stripe highlight-current-row height="100%" class="list-table">
+              <el-table-column type="selection" align="center" fixed />
+              <el-table-column prop="name" label="名称" />
+              <el-table-column label="键值" align="center" width="150">
+                <template #default="scope">
+                  <el-tag type="info">
+                    {{ scope.row.value }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-col>
+        </el-row>
       </LayoutContainer>
     </div>
   </div>
@@ -175,9 +219,21 @@ const onObjectClick = () => { }
   display: flex;
   flex-direction: column;
 }
-
 .absolute-container {
-  :deep(.left-side) {
+  h2{
+    padding: 0;
+    margin: 0;
+  }
+  .right-conatiner{
+      .right-conatiner-tree{
+        width: 350px;
+        box-sizing: border-box;
+      }
+      .container{
+        flex: 1;
+      }
+  }
+  :deep(.left-side) ,:deep(.right-conatiner-tree){
     display: flex;
     flex-direction: column;
     height: 100%;

src/views/daas/object/index.vue

@@ -192,7 +192,7 @@ function goBack() {
       <LayoutContainer hide-left-side-toggle>
         <template #leftSide>
           <h2>基本信息</h2>
-          <el-scrollbar>
+          <el-scrollbar class="form-el-scrollbar">
             <div class="form-content">
               <el-form ref="formRef" :model="state.formData" :rules="formRules" label-position="top">
                 <el-form-item label="对象名称" prop="objectTitle">
@@ -229,7 +229,7 @@ function goBack() {
             </template>
             <template #right>
               <el-input v-model="state.search.keywords" placeholder="请输入关键词筛选字典项" clearable style="width: 200px;" />
-              <el-button @click="getData">
+              <el-button style="margin-left:10px" @click="getData">
                 <template #icon>
                   <el-icon>
                     <svg-icon name="i-ep:search" />
@@ -332,7 +332,7 @@ function goBack() {
               </template>
             </el-table-column>
 
-            <el-table-column label="注释" width="120">
+            <el-table-column label="注释">
               <template #default="scope">
                 <el-input v-model="scope.row.comment" />
               </template>
@@ -365,3 +365,49 @@ function goBack() {
     </fixed-action-bar>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.page-main {
+  :deep(.left-side) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    .form-el-scrollbar{
+      flex: 1;
+    }
+  }
+  :deep(.el-table) {
+        height: 100%;
+        margin-top: 15px;
+
+        .el-table__row {
+          .index {
+            display: inline-block;
+          }
+
+          .delete {
+            display: none;
+          }
+
+          &:hover {
+            .index {
+              display: none;
+            }
+
+            .delete {
+              display: inline-block;
+            }
+          }
+
+          .el-tag.sortable,
+          .el-tag.sortable .el-icon {
+            cursor: s-resize;
+          }
+        }
+      }
+  h2{
+    padding: 0;
+    margin: 0;
+  }
+}
+</style>