|
|
@@ -0,0 +1,380 @@
|
|
|
+<route lang="yaml">
|
|
|
+meta:
|
|
|
+ enabled: false
|
|
|
+</route>
|
|
|
+
|
|
|
+<script lang="ts" setup name="PagesExampleTable">
|
|
|
+import type { FormInstance } from 'element-plus'
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+import ObjectOAMComponent from './components/objectOAM.vue'
|
|
|
+import useSettingsStore from '@/store/modules/settings'
|
|
|
+import { getObjectById } from '@/api/model/objectApi'
|
|
|
+import { deleteObjectOAMById, getObjectOAMById, getObjectOAMByList } from '@/api/model/ObjectOAMApi'
|
|
|
+import { oamType } from '@/utils/tool'
|
|
|
+
|
|
|
+const settingsStore = useSettingsStore()
|
|
|
+const route = useRoute()
|
|
|
+const router = useRouter()
|
|
|
+const tabbar = useTabbar()
|
|
|
+
|
|
|
+const modelId = parseInt(route.params.modelId.toString())
|
|
|
+const objectId = parseInt(route.params.objectId.toString())
|
|
|
+
|
|
|
+interface TreeNode {
|
|
|
+ label: string
|
|
|
+ isLeaf: boolean
|
|
|
+ oamId: number
|
|
|
+ children?: TreeNode[]
|
|
|
+}
|
|
|
+
|
|
|
+interface ObjectOAM {
|
|
|
+ modelId: number
|
|
|
+ objectId: number
|
|
|
+ oamId: number
|
|
|
+ oamTitle: string
|
|
|
+ oamCode: string
|
|
|
+ oamType: number
|
|
|
+ oamStatement: string
|
|
|
+ oamDesc: string
|
|
|
+}
|
|
|
+
|
|
|
+const state = reactive({
|
|
|
+ loading: false,
|
|
|
+ objectTitle: '',
|
|
|
+ objectCode: '',
|
|
|
+ objectType: 0,
|
|
|
+ keywords: '',
|
|
|
+ curOamId: 0,
|
|
|
+ oamList: [],
|
|
|
+ oams: [] as TreeNode[],
|
|
|
+ oam: {} as ObjectOAM,
|
|
|
+ dialogState: 1,
|
|
|
+ search: {
|
|
|
+ modelId,
|
|
|
+ objectId,
|
|
|
+ keywords: '',
|
|
|
+ },
|
|
|
+ params: '',
|
|
|
+ result: '',
|
|
|
+})
|
|
|
+
|
|
|
+const leftTreeRef = ref()
|
|
|
+
|
|
|
+const getObjectData = async () => {
|
|
|
+ state.loading = true
|
|
|
+ const { data } = await getObjectById(modelId, objectId)
|
|
|
+ state.objectTitle = data.objectTitle
|
|
|
+ state.objectCode = data.objectCode
|
|
|
+ state.objectType = data.objectType
|
|
|
+ state.loading = false
|
|
|
+}
|
|
|
+
|
|
|
+const getObjectOAMData = async () => {
|
|
|
+ const curOamId = state.curOamId
|
|
|
+ if (curOamId > 0) {
|
|
|
+ state.loading = true
|
|
|
+ const { data } = await getObjectOAMById(modelId, objectId, curOamId)
|
|
|
+ state.oam = data
|
|
|
+ state.loading = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const getOAMTree = async () => {
|
|
|
+ const { data } = await getObjectOAMByList(state.search)
|
|
|
+ const children: TreeNode[] = []
|
|
|
+ data.forEach((item: any) => {
|
|
|
+ return children.push({
|
|
|
+ label: item.oamTitle,
|
|
|
+ oamId: item.oamId,
|
|
|
+ isLeaf: true,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ state.oams = [
|
|
|
+ {
|
|
|
+ label: '对象行为',
|
|
|
+ isLeaf: false,
|
|
|
+ oamId: -1,
|
|
|
+ children,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ if (data && data.length > 0) {
|
|
|
+ state.curOamId = data[0].oamId
|
|
|
+ nextTick(() => {
|
|
|
+ leftTreeRef.value.setCurrentKey(data[0].oamId)
|
|
|
+ })
|
|
|
+ await getObjectOAMData()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getObjectData()
|
|
|
+ getOAMTree()
|
|
|
+})
|
|
|
+
|
|
|
+const formRef = ref<FormInstance>()
|
|
|
+
|
|
|
+// Object OAM选择
|
|
|
+const onTreeNodeClick = (node: TreeNode) => {
|
|
|
+ if (node.isLeaf) {
|
|
|
+ state.curOamId = node.oamId
|
|
|
+ getObjectOAMData()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const objectOAMRef = ref()
|
|
|
+const onAdd = () => {
|
|
|
+ window.console.log(modelId)
|
|
|
+ window.console.log(objectId)
|
|
|
+ objectOAMRef.value.showAddModel(modelId, objectId)
|
|
|
+}
|
|
|
+
|
|
|
+const onEdit = () => {
|
|
|
+ objectOAMRef.value.showEditModel(modelId, objectId, state.curOamId)
|
|
|
+}
|
|
|
+
|
|
|
+const onDelete = (data: { modelId: number; objectId: number; oamId: number; oamTitle: string }) => {
|
|
|
+ const { modelId, objectId, oamId, oamTitle } = data
|
|
|
+ ElMessageBox.confirm(`确认删除「${oamTitle}」吗？`, '确认信息').then(async () => {
|
|
|
+ await deleteObjectOAMById(modelId, objectId, oamId)
|
|
|
+ await getOAMTree()
|
|
|
+ ElMessage.success({
|
|
|
+ message: '删除成功',
|
|
|
+ center: true,
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 选择对象模型回调
|
|
|
+const onSuccess = () => {
|
|
|
+ getOAMTree()
|
|
|
+}
|
|
|
+
|
|
|
+// 返回列表页
|
|
|
+function goBack() {
|
|
|
+ if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
|
|
|
+ tabbar.close({ name: 'modelList' })
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ router.push({ name: 'modelList' })
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="absolute-container">
|
|
|
+ <page-header :title="state.objectTitle" :content="state.objectCode">
|
|
|
+ <el-button size="default" round @click="goBack">
|
|
|
+ <template #icon>
|
|
|
+ <el-icon>
|
|
|
+ <svg-icon name="i-ep:arrow-left" />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ 返回
|
|
|
+ </el-button>
|
|
|
+ </page-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.oams" default-expand-all node-key="oamId" @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 class="code">
|
|
|
+ {{ oamType(data.oamType) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ElTree>
|
|
|
+ </el-scrollbar>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <div class="form">
|
|
|
+ <tool-header>
|
|
|
+ <template #right>
|
|
|
+ <el-button type="primary" @click="onAdd">
|
|
|
+ 添加
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <el-button type="primary" @click="onEdit">
|
|
|
+ 编辑
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </tool-header>
|
|
|
+ <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>
|
|
|
+ </ol>
|
|
|
+ </div>
|
|
|
+ </page-main>
|
|
|
+ </div>
|
|
|
+ </LayoutContainer>
|
|
|
+ </div>
|
|
|
+ <ObjectOAMComponent ref="objectOAMRef" @success="getOAMTree" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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 {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ .actions {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .actions {
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ padding: 5px 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+: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;
|
|
|
+ padding-left: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: var(--el-text-color-secondary);
|
|
|
+
|
|
|
+ li {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ line-height: 1.5;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: var(--el-text-color-primary);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
houyaf