|
|
@@ -1,310 +0,0 @@
|
|
|
-<route lang="yaml">
|
|
|
-meta:
|
|
|
- enabled: false
|
|
|
-</route>
|
|
|
-
|
|
|
-<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: '',
|
|
|
- objectList: [] as TreeNode[],
|
|
|
- dataList: [],
|
|
|
- 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.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[]
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-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
|
|
|
- nextTick(() => {
|
|
|
- leftTreeRef.value.setCurrentKey(data[0].modelId)
|
|
|
- })
|
|
|
- await getObjectData()
|
|
|
- }
|
|
|
-}
|
|
|
-const onModelAdd = () => {}
|
|
|
-onMounted(() => {
|
|
|
- getModelData()
|
|
|
-})
|
|
|
-
|
|
|
-// 模型选择
|
|
|
-const onTreeNodeClick = (node: TreeNode) => {
|
|
|
- if (node.isLeaf) {
|
|
|
- state.curModelId = node.modelId
|
|
|
- getObjectData()
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 检索对象
|
|
|
-const onObjectSearch = () => {
|
|
|
- getObjectData()
|
|
|
-}
|
|
|
-
|
|
|
-// 选中对象
|
|
|
-const onObjectClick = () => { }
|
|
|
-</script>
|
|
|
-
|
|
|
-<template>
|
|
|
- <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="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>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </ElTree>
|
|
|
- </el-scrollbar>
|
|
|
- </template>
|
|
|
- <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>
|
|
|
- </template>
|
|
|
- </ElTree>
|
|
|
- </el-scrollbar>
|
|
|
- </el-col>
|
|
|
- <el-col class="container" :lg="18" :md="24" :xs="24">
|
|
|
- <tool-bar>
|
|
|
- <template #left>
|
|
|
- <h2>属性</h2>
|
|
|
- </template>
|
|
|
- <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>
|
|
|
-</template>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.container {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-.absolute-container {
|
|
|
- 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%;
|
|
|
-
|
|
|
- .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>
|
houyaf