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

src/types/components.d.ts

@@ -27,7 +27,6 @@ declare module '@vue/runtime-core' {
     ImagesUpload: typeof import('./../components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
     LayoutContainer: typeof import('./../components/LayoutContainer/index.vue')['default']
-    ObjectSelector: typeof import('./../components/ObjectSelector/index.vue')['default']
     PageHeader: typeof import('./../components/PageHeader/index.vue')['default']
     PageMain: typeof import('./../components/PageMain/index.vue')['default']
     PcasCascader: typeof import('./../components/PcasCascader/index.vue')['default']

src/views/paas/atu/components/ModelObjectSelector.vue

@@ -6,12 +6,6 @@ meta:
 <script lang="ts" setup>
 import { getModelByList } from '@/api/model/modelApi'
 import { getObjectByList } from '@/api/model/objectApi'
-import { createAtu } from '@/api/paas/apiTransUnitApi'
-import useSettingsStore from '@/store/modules/settings'
-
-const settingsStore = useSettingsStore()
-const router = useRouter()
-const tabbar = useTabbar()
 
 interface TreeNode {
   label: string
@@ -28,9 +22,12 @@ interface Object {
   comment: string
 }
 
+const emit = defineEmits(['onObjectSel'])
+
 const state = reactive({
   loading: false,
   keywords: '',
+  title: '',
   models: [] as TreeNode[],
   curModelId: 0,
   objectList: [] as Object[],
@@ -41,7 +38,6 @@ const state = reactive({
 })
 
 const leftTreeRef = ref()
-const modelRef = ref()
 const getObjectData = async () => {
   const curModelId = state.curModelId
   if (curModelId > 0) {
@@ -73,9 +69,9 @@ const getModelData = async () => {
 
   if (data && data.length > 0) {
     state.curModelId = data[0].modelId
-    nextTick(() => {
-      leftTreeRef.value.setCurrentKey(data[0].modelId)
-    })
+    // nextTick(() => {
+    //   leftTreeRef.value.setCurrentKey(data[0].modelId)
+    // })
     await getObjectData()
   }
 }
@@ -93,12 +89,6 @@ const onTreeNodeClick = (node: TreeNode) => {
 }
 
 const objectTableRef = ref()
-const objectRef = ref()
-
-// 检索对象
-const onSearch = () => {
-  getObjectData()
-}
 
 const onObjectSel = async (row: { modelId: any; objectId: any }) => {
   const data = {
@@ -106,108 +96,67 @@ const onObjectSel = async (row: { modelId: any; objectId: any }) => {
     modelId: row.modelId,
     objectId: row.objectId,
   }
-  await createAtu(data)
-  getObjectData()
+  emit('onObjectSel', data)
 }
+
+// 点击选择
+
+const drawerModel = ref(false)
+defineExpose({
+  showModel() {
+    drawerModel.value = true
+  },
+})
 </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="300px" 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 }}
+  <el-drawer v-model="drawerModel" :title="state.title" size="55%">
+    <div class="absolute-container">
+      <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>
-                  <div v-if="data.isLeaf" class="actions">
-                    <el-button-group>
-                      <el-button type="info" plain size="small" @click.stop="onModelEdit(data)">
-                        <template #icon>
-                          <el-icon>
-                            <svg-icon name="i-ep:edit" />
-                          </el-icon>
-                        </template>
-                      </el-button>
-
-                      <el-button type="danger" plain size="small" @click.stop="onModelDelete(data)">
-                        <template #icon>
-                          <el-icon>
-                            <svg-icon name="i-ep:delete" />
-                          </el-icon>
-                        </template>
-                      </el-button>
-                    </el-button-group>
-                  </div>
-                </div>
-              </template>
-            </ElTree>
-          </el-scrollbar>
-        </template>
-
-        <div class="container">
-          <tool-bar>
-            <template #right>
-              <el-input v-model="state.search.keywords" placeholder="请输入名称，支持模糊查询" style="padding-right: 10px;" clearable />
-              <el-button type="primary" @click="onSearch">
-                <template #icon>
-                  <el-icon>
-                    <svg-icon name="i-ep:search" />
-                  </el-icon>
                 </template>
-              </el-button>
-            </template>
-          </tool-bar>
-
-          <el-table ref="objectTableRef" v-loading="state.loading" class="list-table" :data="state.objectList" border stripe highlight-current-row height="100%">
-            <el-table-column type="index" label="序号" header-align="center" align="center" width="70" />
-
-            <el-table-column prop="objectTitle" label="名称" header-align="center" align="center" width="200" />
-
-            <el-table-column prop="objectCode" label="代码" header-align="center" align="center" width="150" />
-
-            <el-table-column prop="objectType" label="类型" header-align="center" align="center" width="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-column label="操作" header-align="center" align="center" width="200">
-              <template #default="scope">
-                <el-button type="primary" size="small" plain @click="onObjectSel(scope.row)">
-                  选择
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-      </LayoutContainer>
+              </ElTree>
+            </el-scrollbar>
+          </template>
+          <div class="container">
+            <el-table ref="objectTableRef" v-loading="state.loading" class="list-table" :data="state.objectList" border stripe highlight-current-row height="100%">
+              <el-table-column type="index" label="序号" header-align="center" align="center" width="70" />
+              <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-column label="操作" header-align="center" align="center" width="100">
+                <template #default="scope">
+                  <el-button type="primary" size="small" plain @click="onObjectSel(scope.row)">
+                    选择
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </LayoutContainer>
+      </div>
     </div>
-  </div>
+  </el-drawer>
 </template>
 
 <style lang="scss" scoped>

src/views/paas/atu/index.vue

@@ -5,6 +5,7 @@ meta:
 
 <script lang="ts" setup name="PagesExampleTable">
 import type { FormInstance } from 'element-plus'
+import ModelObjectSelector from './components/ModelObjectSelector.vue'
 import useSettingsStore from '@/store/modules/settings'
 import { getApiById } from '@/api/paas/apiApi'
 import { getAtuByList } from '@/api/paas/apiTransUnitApi'
@@ -29,8 +30,10 @@ const state = reactive({
     keywords: '',
   },
   data: '',
+  result: '',
 })
 
+const ModelObjectSelectorRef = ref()
 const getAtuData = async () => {
   const { data } = await getAtuByList(state.search)
   state.atuList = data
@@ -52,26 +55,34 @@ onMounted(() => {
 
 const formRef = ref<FormInstance>()
 
-const onAdd = () => {}
+const onAdd = () => {
+  ModelObjectSelectorRef.value.showModel()
+}
 
 const onEdit = (data: { atuId: number }) => {
+  window.console.log(data.atuId)
 }
 
 const onDelete = (data: { atuId: number }) => {
+  window.console.log(data.atuId)
 }
 
 const onGenerateData = () => {
-
+  state.result = '生成参数'
 }
 
 const onExecute = () => {
 
 }
-
-function onCancel() {
-  goBack()
+// 选择对象模型回调
+const onObjectSel = (data: any) => {
+  window.console.log('onObjectSel', data)
 }
 
+// function onCancel() {
+//   goBack()
+// }
+
 // 返回列表页
 function goBack() {
   if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
@@ -135,21 +146,27 @@ function goBack() {
         </template>
 
         <div class="form">
+          <tool-header>
+            <template #right>
+              <el-button type="primary" @click="onGenerateData">
+                生成参数
+              </el-button>
+            </template>
+          </tool-header>
           <el-form ref="formRef" label-width="100px" label-position="top">
             <el-form-item label="数据参数" prop="code">
-              <textarea v-model="state.data" placeholder="数据" rows="10" />
+              <el-input v-model="state.data" 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>
-
-          <div class="action-bottom">
-            <el-button type="primary" @click="onGenerateData">
-              生成参数
-            </el-button>
-
-            <el-button type="primary" @click="onExecute">
-              立即执行
-            </el-button>
-          </div>
+          <ModelObjectSelector ref="ModelObjectSelectorRef" @on-object-sel="onObjectSel" />
         </div>
       </LayoutContainer>
     </div>
@@ -230,6 +247,7 @@ function goBack() {
 
       .action-bottom {
         padding-top: 2px;
+        text-align: center;
       }
 
       .el-table {