dsdsd

src/api/biz/bizObjectOAMApi.ts

@@ -20,6 +20,20 @@ export function getObjectOAMByList(data: any) {
  * @param oamId
  * @returns
  */
+export function getObjectOAMByObjectId(bizId: number, objectId: number) {
+  return apiRequest({
+    url: `/biz/object/oam/${bizId}/${objectId}`,
+    method: 'GET',
+  })
+}
+
+/**
+ * 根据Id获取ObjectOAM
+ * @param bizId
+ * @param objectId
+ * @param oamId
+ * @returns
+ */
 export function getObjectOAMById(bizId: number, objectId: number, oamId: number) {
   return apiRequest({
     url: `/biz/object/oam/${bizId}/${objectId}/${oamId}`,

src/views/api/trans/components/ApiTrans.vue

@@ -1,280 +0,0 @@
-<router lang="yaml">
-meta:
-  enabled: false
-</router>
-
-<script lang="ts" setup name="apiTrans">
-import type { FormInstance } from 'element-plus'
-import { ElMessage } from 'element-plus'
-
-import ObjectSelector from './ObjectOAMSelector.vue'
-import useSettingsStore from '@/store/modules/settings'
-import { getApiById } from '@/api/api/apiApi'
-import { createX, deleteX, getX, patchX, updateX } from '@/api/api/apiGatewayApi'
-
-const settingsStore = useSettingsStore()
-const route = useRoute()
-const router = useRouter()
-const tabbar = useTabbar()
-
-const moduleId = parseInt(route.params.moduleId.toString())
-const apiId = parseInt(route.params.apiId.toString())
-
-const state = reactive({
-  loading: false,
-  apiTitle: '',
-  apiCode: '',
-  apiType: 0,
-  keywords: '',
-  atuList: [],
-  dialogState: 1,
-  search: {
-    moduleId,
-    apiId,
-    keywords: '',
-  },
-  params: '',
-  result: '',
-})
-
-const ObjectSelectorRef = ref()
-
-// 查询数据
-const getData = async () => {
-  state.loading = true
-  const { data } = await getApiById(moduleId, apiId)
-  state.apiTitle = data.apiTitle
-  state.apiCode = data.apiCode
-  state.apiType = data.apiType
-}
-
-onMounted(() => {
-  getData()
-})
-
-const formRef = ref<FormInstance>()
-
-const onAdd = () => {
-  ObjectSelectorRef.value.showModel(moduleId, apiId)
-}
-
-const onGenerateParams = async () => {
-  // const { data } = await generateParamsByCode(state.apiCode)
-  // state.params = JSON.stringify(data)
-}
-
-const onExecute = async () => {
-  try {
-    const apiType = state.apiType
-    const apiCode = state.apiCode
-    const params = JSON.parse(state.params)
-    if (apiType === 1) {
-      const { data } = await getX(apiCode, params)
-      state.result = JSON.stringify(data)
-    }
-    else if (apiType === 2) {
-      const { data } = await createX(apiCode, params)
-      state.result = JSON.stringify(data)
-    }
-    else if (apiType === 3) {
-      const { data } = await updateX(apiCode, params)
-      state.result = JSON.stringify(data)
-    }
-    else if (apiType === 4) {
-      const { data } = await patchX(apiCode, params)
-      state.result = JSON.stringify(data)
-    }
-    else if (apiType === 5) {
-      const { data } = await deleteX(apiCode, params)
-      state.result = JSON.stringify(data)
-    }
-  }
-  catch (err) {
-    ElMessage.error('提交失败')
-  }
-}
-// 选择对象模型回调
-const onObjectSelSuccess = () => {
-  getData()
-}
-
-// 返回列表页
-function goBack() {
-  if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
-    tabbar.close({ name: 'api' })
-  }
-  else {
-    router.push({ name: 'api' })
-  }
-}
-</script>
-
-<template>
-  <div class="absolute-container">
-    <page-header :title="state.apiTitle" :content="state.apiCode">
-      <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-space wrap>
-            <el-button type="primary" size="default" @click="onAdd">
-              <template #icon>
-                <el-icon>
-                  <svg-icon name="i-ep:plus" />
-                </el-icon>
-              </template>
-            </el-button>
-          </el-space>
-
-          <el-table v-loading="state.loading" class="list-table" :data="state.atuList" border stripe highlight-current-row height="100%">
-            <el-table-column prop="bizTitle" label="模型" header-align="center" align="center" min-width="150px" />
-
-            <el-table-column prop="objectTitle" label="对象" header-align="center" align="center" min-width="150px" />
-
-            <el-table-column prop="oamTitle" label="行为" header-align="center" align="center" />
-          </el-table>
-        </template>
-
-        <div class="form">
-          <tool-header>
-            <template #right>
-              <el-button type="primary" @click="onGenerateParams">
-                生成参数
-              </el-button>
-            </template>
-          </tool-header>
-          <el-form ref="formRef" label-width="100px" label-position="top">
-            <el-form-item label="数据参数" prop="code">
-              <el-input v-model="state.params" type="textarea" rows="10" placeholder="数据" />
-            </el-form-item>
-            <el-form-item v-if="state.result" label="生成参数" prop="code">
-              <el-input v-model="state.result" type="textarea" rows="10" placeholder="数据" readonly />
-            </el-form-item>
-            <div class="action-bottom">
-              <el-button type="primary" @click="onExecute">
-                立即执行
-              </el-button>
-            </div>
-          </el-form>
-          <ObjectSelector ref="ObjectSelectorRef" @on-success="onObjectSelSuccess" />
-        </div>
-      </LayoutContainer>
-    </div>
-  </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 {
-    flex: 1;
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-
-    .flex-container {
-      position: static;
-
-      :deep(.left-side) {
-        overflow: auto;
-        display: flex;
-        flex-direction: column;
-      }
-
-      :deep(.main-container) {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-
-        .empty {
-          flex: 1;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 32px;
-          color: var(--el-text-color-placeholder);
-        }
-      }
-    }
-
-    .form {
-      flex: 1;
-      min-height: 0;
-      display: flex;
-      flex-direction: column;
-
-      .el-form {
-        flex: 1;
-        min-height: 0;
-        display: flex;
-        flex-direction: column;
-
-        .columns-table {
-          flex: 1;
-          height: 0;
-          display: flex;
-          flex-direction: column;
-
-          :deep(.el-form-item__content) {
-            min-height: 0;
-
-            .el-table {
-              height: 100%;
-            }
-          }
-        }
-      }
-
-      .action-bottom {
-        padding-top: 2px;
-        text-align: center;
-      }
-
-      .el-table {
-        .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;
-          }
-        }
-      }
-    }
-
-  }
-}
-</style>

src/views/api/trans/components/ObjectOAMSelector.vue

@@ -4,15 +4,14 @@ meta:
 </route>
 
 <script lang="ts" setup>
-import { getBizByList } from '@/api/biz/bizApi'
-import { getObjectByList } from '@/api/biz/bizObjectApi'
-import { getObjectOAMByList } from '@/api/biz/bizObjectOAMApi'
+import { getBizData } from '@/api/biz/bizApi'
+import { getObjectOAMByObjectId } from '@/api/biz/bizObjectOAMApi'
 import { updateApi } from '@/api/api/apiApi'
 
 interface TreeNode {
   label: string
+  value: number
   isLeaf: boolean
-  bizId: number
   children?: TreeNode[]
 }
 
@@ -29,11 +28,10 @@ const emit = defineEmits(['onSuccess'])
 const state = reactive({
   loading: false,
   keywords: '',
-  title: '',
+  title: '绑定业务对象',
   treeData: [] as TreeNode[],
   curBizId: 0,
   curObjectId: 0,
-  objectList: [] as Object[],
   objectOAMList: [] as Object[],
   dialogState: 1,
   search: {
@@ -56,67 +54,57 @@ const getObjectOAMData = async () => {
   const curObjectId = state.curObjectId
   if (curBizId > 0 && curObjectId > 0) {
     state.loading = true
-    const { data } = await getObjectOAMByList({ bizId: curBizId })
+    const { data } = await getObjectOAMByObjectId(curBizId, curObjectId)
     state.objectOAMList = data
     state.loading = false
   }
 }
 
-const getObjectData = async () => {
-  const curBizId = state.curBizId
-  if (curBizId > 0) {
-    state.loading = true
-    const { data } = await getObjectByList({ bizId: curBizId })
-    state.objectList = data
-    state.loading = false
-  }
-}
-
-const getBizData = async () => {
-  const { data } = await getBizByList('')
-  const children: TreeNode[] = []
-  data.forEach((item: any) => {
-    return children.push({
-      label: item.bizTitle,
-      bizId: item.bizId,
-      isLeaf: true,
+const getData = async () => {
+  const { data } = await getBizData()
+  state.treeData = []
+  const children = [] as TreeNode[]
+  data.forEach((biz: any) => {
+    const objects = biz.objects
+    objects.forEach((obj: any) => {
+      const objectNode = {
+        label: obj.objectTitle,
+        value: obj.objectId,
+        isLeaf: true,
+      }
+      children.push(objectNode)
     })
-  })
-  state.treeData = [
-    {
-      label: '模型库',
+
+    const bizNode = {
+      label: biz.bizTitle,
+      value: biz.bizId,
       isLeaf: false,
-      bizId: -1,
       children,
-    },
-  ]
+    }
+    state.treeData.push(bizNode)
+  })
 
   if (data && data.length > 0) {
     state.curBizId = data[0].bizId
-    // nextTick(() => {
-    //   leftTreeRef.value.setCurrentKey(data[0].modelId)
-    // })
-    await getObjectData()
+    nextTick(() => {
+      leftTreeRef.value.setCurrentKey(data[0].bizId)
+    })
   }
 }
 
 onMounted(() => {
-  getBizData()
+  getData()
 })
 
 // 模型选择
 const onTreeNodeClick = (node: TreeNode) => {
   if (node.isLeaf) {
-    state.curBizId = node.bizId
-    getObjectData()
+    state.curObjectId = node.value
+    getObjectOAMData()
+  }
+  else {
+    state.curBizId = node.value
   }
-}
-
-const objectTableRef = ref()
-const dialogVisible = ref(false)
-const onObjectSel = async (row: { objectId: number }) => {
-  state.curObjectId = row.objectId
-  await getObjectOAMData()
 }
 
 const objectOAMTableRef = ref()
@@ -127,6 +115,7 @@ const onObjectOAMSel = async (row: { bizId: number; objectId: number; oamId: num
   state.objectOAMDetail = row
 }
 
+const dialogVisible = ref(false)
 const onSave = async () => {
   await updateApi(state.formData)
   emit('onSuccess')
@@ -151,7 +140,7 @@ defineExpose({
 <template>
   <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-col :xs="24" :span="8" class="small-row">
         <el-card style="height:100%">
           <el-scrollbar class="tree">
             <ElTree ref="leftTreeRef" :data="state.treeData" default-expand-all node-key="bizId" @node-click="onTreeNodeClick">
@@ -172,30 +161,7 @@ defineExpose({
         </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-col :xs="24" :span="7" class="objectOAMTableRef small-row">
         <el-card style="height:100%">
           <el-table
             v-if="state.objectOAMList && state.objectOAMList.length > 0"

src/views/api/trans/index.vue

@@ -1,11 +1,13 @@
-<route lang="yaml">
+<router lang="yaml">
 meta:
   enabled: false
-</route>
+</router>
 
-<script lang="ts" setup name="PagesExampleTable">
+<script lang="ts" setup name="apiTrans">
 import type { FormInstance } from 'element-plus'
-import ObjectOAMSelector from './components/ApiTrans.vue'
+import { ElMessage } from 'element-plus'
+
+import ObjectSelector from './components/ObjectOAMSelector.vue'
 import useSettingsStore from '@/store/modules/settings'
 import { getApiById } from '@/api/api/apiApi'
 import { createX, deleteX, getX, patchX, updateX } from '@/api/api/apiGatewayApi'
@@ -18,14 +20,20 @@ const tabbar = useTabbar()
 const moduleId = parseInt(route.params.moduleId.toString())
 const apiId = parseInt(route.params.apiId.toString())
 
+interface TreeNode {
+  id: string
+  label: string
+  children?: TreeNode[]
+}
+
 const state = reactive({
   loading: false,
   apiTitle: '',
   apiCode: '',
   apiType: 0,
   keywords: '',
-  atuList: [],
   dialogState: 1,
+  treeData: [] as TreeNode[],
   search: {
     moduleId,
     apiId,
@@ -35,7 +43,7 @@ const state = reactive({
   result: '',
 })
 
-const BizObjectSelectorRef = ref()
+const ObjectSelectorRef = ref()
 
 // 查询数据
 const getData = async () => {
@@ -44,6 +52,27 @@ const getData = async () => {
   state.apiTitle = data.apiTitle
   state.apiCode = data.apiCode
   state.apiType = data.apiType
+  if (data.bizId && data.bizId > 0) {
+    const oamNode = [{
+      id: data.oamId,
+      label: data.oamTitle,
+      children: [],
+    }]
+
+    const objectNode = [{
+      id: data.objectId,
+      label: data.objectTitle,
+      children: oamNode,
+    }]
+
+    state.treeData = [
+      {
+        id: data.bizId,
+        label: data.bizTitle,
+        children: objectNode,
+      },
+    ]
+  }
 }
 
 onMounted(() => {
@@ -52,13 +81,13 @@ onMounted(() => {
 
 const formRef = ref<FormInstance>()
 
-const onAdd = () => {
-  BizObjectSelectorRef.value.showModel(moduleId, apiId)
+const AddObjectOAM = () => {
+  ObjectSelectorRef.value.showModel(moduleId, apiId)
 }
 
 const onGenerateParams = async () => {
-  const { data } = await generateParamsByCode(state.apiCode)
-  state.params = JSON.stringify(data)
+  // const { data } = await generateParamsByCode(state.apiCode)
+  // state.params = JSON.stringify(data)
 }
 
 const onExecute = async () => {
@@ -99,10 +128,10 @@ const onObjectSelSuccess = () => {
 // 返回列表页
 function goBack() {
   if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
-    tabbar.close({ name: 'paas_api' })
+    tabbar.close({ name: 'api' })
   }
   else {
-    router.push({ name: 'paas_api' })
+    router.push({ name: 'api' })
   }
 }
 </script>
@@ -119,54 +148,59 @@ function goBack() {
         返回
       </el-button>
     </page-header>
+
     <div class="page-main">
-      <LayoutContainer left-side-width="650px" hide-left-side-toggle>
+      <LayoutContainer left-side-width="250px" hide-left-side-toggle>
         <template #leftSide>
           <el-space wrap>
-            <el-button type="primary" size="default" @click="onAdd">
-              <template #icon>
-                <el-icon>
-                  <svg-icon name="i-ep:plus" />
-                </el-icon>
-              </template>
-            </el-button>
+            <el-button-group class="btns">
+              <el-button type="primary" class="add" @click="AddObjectOAM()">
+                绑定对象
+              </el-button>
+            </el-button-group>
           </el-space>
 
-          <el-table v-loading="state.loading" class="list-table" :data="state.atuList" border stripe highlight-current-row height="100%">
-            <el-table-column type="index" label="序号" header-align="center" align="center" width="70" />
-
-            <el-table-column prop="modelTitle" label="模型" header-align="center" align="center" min-width="150px" />
-
-            <el-table-column prop="objectTitle" label="对象" header-align="center" align="center" min-width="150px" />
-
-            <el-table-column prop="oamTitle" label="行为" header-align="center" align="center" />
-
-          </el-table>
+          <el-scrollbar class="tree">
+            <ElTree ref="leftTreeRef" :data="state.treeData" default-expand-all node-key="value">
+              <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="form">
-          <tool-header>
-            <template #right>
-              <el-button type="primary" @click="onGenerateParams">
-                生成参数
-              </el-button>
-            </template>
-          </tool-header>
           <el-form ref="formRef" label-width="100px" label-position="top">
             <el-form-item label="数据参数" prop="code">
               <el-input v-model="state.params" type="textarea" rows="10" placeholder="数据" />
             </el-form-item>
+
             <el-form-item v-if="state.result" label="生成参数" prop="code">
               <el-input v-model="state.result" type="textarea" rows="10" placeholder="数据" readonly />
             </el-form-item>
+
             <div class="action-bottom">
+              <el-button type="primary" @click="onGenerateParams">
+                生成参数
+              </el-button>
+
               <el-button type="primary" @click="onExecute">
                 立即执行
               </el-button>
             </div>
           </el-form>
-          <ModelObjectSelector ref="ModelObjectSelectorRef" @on-success="onObjectSelSuccess" />
         </div>
+
+        <ObjectSelector ref="ObjectSelectorRef" @on-success="onObjectSelSuccess" />
       </LayoutContainer>
     </div>
   </div>
@@ -192,90 +226,118 @@ function goBack() {
 
     .flex-container {
       position: static;
+    }
+  }
+}
 
-      :deep(.left-side) {
-        overflow: auto;
-        display: flex;
-        flex-direction: column;
-      }
+.flex-container {
+  :deep(.left-side) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 
-      :deep(.main-container) {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
+    .btns {
+      display: inline-flex;
+      width: 100%;
+      margin-bottom: var(--container-padding);
 
-        .empty {
-          flex: 1;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 32px;
-          color: var(--el-text-color-placeholder);
-        }
+      .add {
+        width: 100%;
       }
     }
 
-    .form {
+    .tree {
       flex: 1;
-      min-height: 0;
-      display: flex;
-      flex-direction: column;
+      overflow-y: auto;
 
-      .el-form {
-        flex: 1;
-        min-height: 0;
-        display: flex;
-        flex-direction: column;
+      .el-tree {
+        .el-tree-node__content {
+          height: 40px;
+        }
+
+        .is-current > .el-tree-node__content {
+          background-color: var(--el-color-primary-light-9);
+        }
 
-        .columns-table {
+        .custom-tree-node {
           flex: 1;
-          height: 0;
+          position: relative;
+          width: 0;
+          height: 100%;
           display: flex;
           flex-direction: column;
+          justify-content: center;
 
-          :deep(.el-form-item__content) {
-            min-height: 0;
+          .label {
+            display: inline-flex;
+            align-items: center;
+            width: calc(100% - 10px);
+            color: var(--el-text-color-primary);
 
-            .el-table {
-              height: 100%;
+            .text {
+              @include text-overflow;
             }
           }
-        }
-      }
-
-      .action-bottom {
-        padding-top: 2px;
-        text-align: center;
-      }
 
-      .el-table {
-        .el-table__row {
-          .index {
-            display: inline-block;
+          &:hover {
+            .actions {
+              display: block;
+            }
           }
 
-          .delete {
+          .actions {
             display: none;
-          }
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
 
-          &:hover {
-            .index {
-              display: none;
-            }
-
-            .delete {
-              display: inline-block;
+            .el-button {
+              padding: 5px 8px;
             }
           }
-
-          .el-tag.sortable,
-          .el-tag.sortable .el-icon {
-            cursor: s-resize;
-          }
         }
       }
     }
+  }
 
+  :deep(.main) {
+    .main-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.form {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+
+  .el-form {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+
+    .columns-table {
+      flex: 1;
+      height: 0;
+      display: flex;
+      flex-direction: column;
+
+      :deep(.el-form-item__content) {
+        min-height: 0;
+
+        .el-table {
+          height: 100%;
+        }
+      }
+    }
   }
 }
 </style>