功能调整

src/views/daas/behavior/index.vue

@@ -3,10 +3,248 @@ meta:
   enabled: false
 </route>
 
-<script lang="ts" setup name="behaviorList">
+<script lang="ts" setup>
+import { getModelByList } from '@/api/model/modelApi'
+import { getObjectByList } from '@/api/model/objectApi'
+import useSettingsStore from '@/store/modules/settings'
 
+const settingsStore = useSettingsStore()
+const router = useRouter()
+const tabbar = useTabbar()
+
+interface TreeNode {
+  label: string
+  isLeaf: boolean
+  modelId: number
+  children?: TreeNode[]
+}
+
+interface Object {
+  modelId: number
+  objectId: number
+  objectTitle: string
+  objectCode: string
+  comment: string
+}
+
+const state = reactive({
+  loading: false,
+  keywords: '',
+  models: [] as TreeNode[],
+  curModelId: 0,
+  objects: [] as Object[],
+  dialogState: 1,
+  objectSearch: {
+    keywords: '',
+  },
+})
+
+const leftTreeRef = ref()
+const modelRef = ref()
+const getObjectData = async () => {
+  const curModelId = state.curModelId
+  if (curModelId > 0) {
+    state.loading = true
+    const { data } = await getObjectByList({ modelId: curModelId })
+    state.objectList = data
+    state.loading = false
+  }
+}
+
+const getModelData = async () => {
+  const { data } = await getModelByList('')
+  const children: TreeNode[] = []
+  data.forEach((item: any) => {
+    return children.push({
+      label: item.modelTitle,
+      modelId: item.modelId,
+      isLeaf: true,
+    })
+  })
+  state.models = [
+    {
+      label: '模型库',
+      isLeaf: false,
+      modelId: -1,
+      children,
+    },
+  ]
+
+  if (data && data.length > 0) {
+    state.curModelId = data[0].modelId
+    await getObjectData()
+  }
+}
+
+onMounted(() => {
+  getModelData()
+})
+
+// 模型选择
+const onTreeNodeClick = (node: TreeNode) => {
+  if (node.isLeaf) {
+    state.curModelId = node.modelId
+    getObjectData()
+  }
+}
+
+const objectTableRef = ref()
+const objectRef = ref()
+
+// 检索对象
+const onObjectSearch = () => {
+  getObjectData()
+}
+
+// 选中对象
+const onObjectClick = () => { }
 </script>
 
 <template>
-  <h1>behavior</h1>
+  <div class="absolute-container">
+    <tool-header title="数据模型">
+      <template #right>
+        <el-button plain @click="onModelAdd">
+          <template #icon>
+            <el-icon>
+              <svg-icon name="i-ep:plus" />
+            </el-icon>
+          </template>
+          新增模型
+        </el-button>
+      </template>
+    </tool-header>
+
+    <div class="page-main">
+      <LayoutContainer left-side-width="300px" hide-left-side-toggle>
+        <template #leftSide>
+          <el-scrollbar class="tree">
+            <ElTree ref="leftTreeRef" :data="state.models" default-expand-all @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>
+                </div>
+              </template>
+            </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 }}
+                  </div>
+                </div>
+              </template>
+            </ElTree>
+          </el-scrollbar>
+        </div>
+      </LayoutContainer>
+    </div>
+  </div>
 </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 {
+      flex: 1;
+      overflow-y: auto;
+
+      .el-tree {
+        .el-tree-node__content {
+          height: 40px;
+        }
+
+        .is-current > .el-tree-node__content {
+          background-color: var(--el-color-primary-light-9);
+        }
+
+        .custom-tree-node {
+          flex: 1;
+          position: relative;
+          width: 0;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+
+          .label {
+            display: inline-flex;
+            align-items: center;
+            width: calc(100% - 10px);
+            color: var(--el-text-color-primary);
+
+            .text {
+              @include text-overflow;
+            }
+          }
+
+          &:hover {
+            .actions {
+              display: block;
+            }
+          }
+
+          .actions {
+            display: none;
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+
+            .el-button {
+              padding: 5px 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>