up

src/views/api/trans/index.vue

@@ -5,7 +5,6 @@ meta:
 
 <script lang="ts" setup name="apiTrans">
 import type { FormInstance } from 'element-plus'
-import { ElMessage } from 'element-plus'
 
 import ObjectSelector from './components/ObjectOAMSelector.vue'
 import useSettingsStore from '@/store/modules/settings'
@@ -54,7 +53,7 @@ const state = reactive({
   },
   reservedParams: {
     limit: 1,
-    page: 1,
+    page: 2,
   },
   result: '',
 })

src/views/biz/oam/components/ruleSelector.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup name="AppCatSelector">
+import { getBizRuleByList } from '@/api/biz/bizRuleApi'
+const props = withDefaults(defineProps<{
+  modelValue: number
+}>(), {
+  modelValue: 0,
+})
+const emit = defineEmits(['update:modelValue'])
+interface BizRule {
+  ruleId: number
+  ruleTitle: number
+}
+const ruleId = computed({
+  get: () => {
+    return props.modelValue
+  },
+  set: (val) => {
+    emit('update:modelValue', val)
+  },
+})
+const state = reactive({
+  loading: false,
+  dataList: [] as BizRule[],
+})
+
+const getData = async () => {
+  state.loading = true
+  const { data } = await getBizRuleByList({})
+  state.loading = false
+  state.dataList = data
+}
+onMounted(() => {
+  getData ()
+})
+</script>
+
+<template>
+  <el-select v-model="ruleId" v-loading="state.loading" style="width: 100%" filterable placeholder="请选择业务规则" value-key="ruleId">
+    <el-option key="0" label="请选择" :value="0" disabled />
+    <el-option
+      v-for="item in state.dataList"
+      :key="item.ruleId"
+      :label="item.ruleTitle"
+      :value="item.ruleId"
+    />
+  </el-select>
+</template>

src/views/biz/oam/index.vue

@@ -4,6 +4,7 @@ meta:
 </route>
 
 <script lang="ts" setup name="PagesExampleTable">
+import type { TabsPaneContext } from 'element-plus'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import ObjectOAMComponent from './components/objectOAM.vue'
 import useSettingsStore from '@/store/modules/settings'
@@ -52,6 +53,7 @@ const state = reactive({
   keywords: '',
   curOamId: 0,
   oamList: [],
+  objectRuleList: [],
   treeData: [] as TreeNode[],
   oam: {} as ObjectOAM,
   dialogState: 1,
@@ -87,22 +89,13 @@ const getObjectOAMData = async () => {
 
 const getOAMTree = async () => {
   const { data } = await getObjectOAMByList(state.search)
-  const children: TreeNode[] = []
   data.forEach((item: any) => {
-    return children.push({
+    state.treeData.push({
       label: item.oamTitle,
       oamId: item.oamId,
       isLeaf: true,
     })
   })
-  state.treeData = [
-    {
-      label: '对象行为',
-      isLeaf: false,
-      oamId: -1,
-      children,
-    },
-  ]
 
   if (data && data.length > 0) {
     state.curOamId = data[0].oamId
@@ -127,11 +120,11 @@ const onTreeNodeClick = (node: TreeNode) => {
 }
 
 const objectOAMRef = ref()
-const onAdd = () => {
+const onAddOAM = () => {
   objectOAMRef.value.showAddModel(bizId, objectId)
 }
 
-const onEdit = () => {
+const onEditOAM = () => {
   objectOAMRef.value.showEditModel(bizId, objectId, state.curOamId)
 }
 
@@ -152,6 +145,24 @@ const onSuccess = () => {
   getOAMTree()
 }
 
+const activeName = ref('first')
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+
+const onObjectRuleSearch = () => {
+
+}
+
+const onObjectRuleAdd = () => {
+}
+
+const onObjectRuleEdit = (row: { }) => {
+}
+
+const onObjectRuleDelete = (row: { }) => {
+}
 // 返回列表页
 function goBack() {
   if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
@@ -176,8 +187,21 @@ function goBack() {
       </el-button>
     </page-header>
     <div class="page-main">
-      <LayoutContainer left-side-width="300px" hide-left-side-toggle>
+      <LayoutContainer left-side-width="250px" hide-left-side-toggle>
         <template #leftSide>
+          <el-button-group class="btns">
+            <el-button type="primary" class="add" @click="onAddOAM()">
+              新增对象行为
+            </el-button>
+            <el-button @click="getObjectOAMData">
+              <template #icon>
+                <el-icon>
+                  <svg-icon name="i-ep:refresh" />
+                </el-icon>
+              </template>
+            </el-button>
+          </el-button-group>
+
           <el-scrollbar class="tree">
             <ElTree ref="leftTreeRef" :data="state.treeData" default-expand-all node-key="oamId" @node-click="onTreeNodeClick">
               <template #default="{ node, data }">
@@ -198,26 +222,87 @@ function goBack() {
             </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="state.oam.oamTitle">
-            <div class="question">
-              <ol class="answer">
-                <li><span>编码：</span><br>{{ state.oam.oamCode }}</li>
-                <li><span>行为类型：</span><br>{{ oamType(state.oam.oamType) }}</li>
-                <li><span>操作类型：</span><br>{{ sqlType(state.oam.sqlType) }}</li>
-                <li v-if="state.oam.sqlType === 1"><span>Sql:</span><br>{{ state.oam.sqlStatement }}</li>
-                <li v-if="state.oam.oamType === 3"><span>Count</span><br>{{ state.oam.sqlCount }}</li>
-                <li><span>说明</span><br>{{ state.oam.oamDesc }}</li>
-              </ol>
-            </div>
-          </page-main>
+        <div class="container">
+          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+            <el-tab-pane label="行为定义" name="first">
+              <div class="form">
+                <tool-header>
+                  <template #right>
+                    <el-button type="primary" @click="onEditOAM">
+                      编辑
+                    </el-button>
+                  </template>
+                </tool-header>
+                <page-main :title="state.oam.oamTitle">
+                  <div class="question">
+                    <ol class="answer">
+                      <li><span>编码：</span><br>{{ state.oam.oamCode }}</li>
+                      <li><span>行为类型：</span><br>{{ oamType(state.oam.oamType) }}</li>
+                      <li><span>操作类型：</span><br>{{ sqlType(state.oam.sqlType) }}</li>
+                      <li v-if="state.oam.sqlType === 1">
+                        <span>Sql:</span><br>{{ state.oam.sqlStatement }}
+                      </li>
+                      <li v-if="state.oam.oamType === 3">
+                        <span>Count</span><br>{{ state.oam.sqlCount }}
+                      </li>
+                      <li><span>说明</span><br>{{ state.oam.oamDesc }}</li>
+                    </ol>
+                  </div>
+                </page-main>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="业务规则" name="second">
+              <tool-bar>
+                <template #right>
+                  <el-input v-model="state.search.keywords" placeholder="请输入名称，支持模糊查询" style="padding-right: 10px;" clearable />
+                  <el-button type="primary" @click="onObjectRuleSearch">
+                    <template #icon>
+                      <el-icon>
+                        <svg-icon name="i-ep:search" />
+                      </el-icon>
+                    </template>
+                  </el-button>
+
+                  <el-button type="primary" size="default" @click.stop="onObjectRuleAdd">
+                    <template #icon>
+                      <el-icon>
+                        <svg-icon name="i-ep:plus" />
+                      </el-icon>
+                    </template>
+                    业务对象
+                  </el-button>
+                </template>
+              </tool-bar>
+
+              <el-table ref="objectRuleTableRef" v-loading="state.loading" class="list-table" :data="state.objectRuleList" 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">
+                  <template #default="scope">
+                    <el-icon>
+                      <svg-icon name="lucide:clipboard-check" />
+                    </el-icon>
+                    <span> &nbsp;&nbsp;{{ scope.row.objectTitle }}</span>
+                  </template>
+                </el-table-column>
+
+                <el-table-column prop="objectCode" label="代码" header-align="center" align="center" width="150" />
+
+                <el-table-column prop="comment" label="说明" header-align="center" align="left" />
+
+                <el-table-column label="操作" header-align="center" align="center" width="230">
+                  <template #default="scope">
+                    <el-button type="warning" size="small" plain @click="onObjectRuleEdit(scope.row)">
+                      编辑
+                    </el-button>
+                    <el-button type="danger" size="small" plain @click="onObjectRuleDelete(scope.row)">
+                      删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+          </el-tabs>
         </div>
       </LayoutContainer>
     </div>
@@ -236,6 +321,15 @@ function goBack() {
     flex-direction: column;
     height: 100%;
 
+    .btns {
+      display: inline-flex;
+      width: 100%;
+
+      .add {
+        width: 100%;
+      }
+    }
+
     .tree {
       flex: 1;
       overflow-y: auto;
@@ -313,4 +407,11 @@ function goBack() {
     }
   }
 }
+
+.demo-tabs > .el-tabs__content {
+  padding: 22px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
 </style>