xps-web-v5/src/views/biz/oam/index.vue

<route lang="yaml">
meta:
  enabled: false
</route>

<script lang="ts" setup name="BizObjectOAMListComponent">
import { ElMessage, ElMessageBox } from 'element-plus'
import ObjectOAMComponent from './components/ObjectOAM.vue'
import ObjectOAMRuleComponent from './components/ObjectOAMRule.vue'
import { deleteObjectOAMById, getObjectOAMById, getObjectOAMByList } from '@/api/biz/bizObjectOAMApi'
import { deleteObjectOAMRuleById, getObjectOAMRuleListByOamId } from '@/api/biz/bizObjectOAMRuleApi'
import { oamType, sqlType } from '@/utils/tool'
const props = withDefaults(defineProps<{
  bizId: number
  objectId: number
}>(), {
  bizId: 0,
  objectId: 0,
})

interface TreeNode {
  label: string
  isLeaf: boolean
  oamId: number
  children?: TreeNode[]
}

interface ObjectOAM {
  bizId: number
  objectId: number
  oamId: number
  oamTitle: string
  oamCode: string
  oamType: number
  oamStatement: string
  oamDesc: string

  sqlStatement: string
  sqlSelect: string
  sqlFrom: string
  sqlWhere: string
  sqlOrder: string
  sqlCount: string
}

const state = reactive({
  loading: false,
  objectTitle: '',
  objectCode: '',
  objectType: 0,
  curOamId: 0,
  oamList: [],
  objectOamRuleList: [],
  treeData: [] as TreeNode[],
  oam: {} as ObjectOAM,
  dialogState: 1,
  conditions: {
    bizId: props.bizId,
    objectId: props.objectId,
    keywords: '',
  },
  params: '',
  result: '',
})

const leftTreeRef = ref()

const getObjectOAMData = async () => {
  const curOamId = state.curOamId
  if (curOamId > 0) {
    state.loading = true
    const { bizId, objectId } = state.conditions
    const { data } = await getObjectOAMById(bizId, objectId, curOamId)
    state.oam = data
    state.loading = false
  }
}

const getObjectOAMRuleList = async () => {
  const curOamId = state.curOamId
  if (curOamId > 0) {
    state.loading = true
    const { bizId, objectId } = state.conditions
    const { data } = await getObjectOAMRuleListByOamId(bizId, objectId, curOamId)
    state.objectOamRuleList = data
    state.loading = false
  }
}

const getOAMTree = async () => {
  const { data } = await getObjectOAMByList(state.conditions)
  state.treeData = []
  if (data && data.length > 0){
    data.forEach((item: any) => {
      state.treeData.push({
        label: item.oamTitle,
        oamId: item.oamId,
        isLeaf: true,
      })
    })

    state.curOamId = data[0].oamId
    nextTick(() => {
      leftTreeRef.value.setCurrentKey(data[0].oamId)
    })
    await getObjectOAMData()
    await getObjectOAMRuleList()
  }
}

onMounted(() => {
  getOAMTree()
})

// Object OAM选择
const onTreeNodeClick = (node: TreeNode) => {
  if (node.isLeaf) {
    state.curOamId = node.oamId
    getObjectOAMData()
    getObjectOAMRuleList()
  }
}

const objectOAMRef = ref()
const onAddOAM = () => {
  const { bizId, objectId } = state.conditions
  objectOAMRef.value.showAddModel(bizId, objectId)
}

const onEditOAM = () => {
  const { bizId, objectId } = state.conditions
  objectOAMRef.value.showEditModel(bizId, objectId, state.curOamId)
}

const onDeleteOAM = (data: { bizId: number; objectId: number; oamId: number; oamTitle: string }) => {
  const { bizId, objectId, oamId, oamTitle } = data
  ElMessageBox.confirm(`确认删除「${oamTitle}」吗？`, '确认信息').then(async () => {
    await deleteObjectOAMById(bizId, objectId, oamId)
    await getOAMTree()
    ElMessage.success({
      message: '删除成功',
      center: true,
    })
  })
}

// 选择对象模型回调
const onSuccess = () => {
  // getOAMTree()
}

const tabIndex = ref(1)

const objectOAMRuleRef = ref()
const onObjectOAMRuleSearch = () => {

}

const onObjectOAMRuleAdd = () => {
  const { bizId, objectId } = state.conditions
  objectOAMRuleRef.value.showAddModel(bizId, objectId, state.curOamId)
}

const onObjectOAMRuleEdit = (row: { orId: number }) => {
  const { bizId, objectId } = state.conditions
  objectOAMRuleRef.value.showEditModel(bizId, objectId, state.curOamId, row.orId)
}

const onObjectOAMRuleDelete = (row: { bizId: number; objectId: number; oamId: number; orId: number; ruleTitle: string }) => {
  const { bizId, objectId, oamId, orId, ruleTitle } = row
  ElMessageBox.confirm(`确认删除「${ruleTitle}」吗？`, '确认信息').then(async () => {
    await deleteObjectOAMRuleById(bizId, objectId, oamId, orId)
    await getObjectOAMRuleList()
    ElMessage.success({
      message: '删除成功',
      center: true,
    })
  })
}
</script>

<template>
  <div class="page-main">
    <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 }">
              <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="ep:key" />
                  </el-icon>
                  <div class="text">
                    {{ data.label }}
                  </div>
                  <div class="code">
                    {{ oamType(data.oamType) }}
                  </div>
                </div>
              </div>
            </template>
          </ElTree>
        </el-scrollbar>
      </template>

      <div class="container">
        <page-main title="基础用法" class="demo">
          <el-radio v-model="tabIndex" label="1">
            行为定义
          </el-radio>
          <el-radio v-model="tabIndex" label="2">
            业务规则
          </el-radio>
        </page-main>

        <page-main v-show="tabIndex === 1">
          <div class="form">
            <tool-header>
              <template #right>
                <el-button type="primary" @click="onEditOAM">
                  编辑
                </el-button>
              </template>
            </tool-header>
            <page-main v-if="state.oam" :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>
        </page-main>

        <page-main v-show="tabIndex === 2">
          <tool-bar>
            <template #right>
              <el-input v-model="state.conditions.keywords" placeholder="请输入名称，支持模糊查询" style="padding-right: 10px;" clearable />
              <el-button type="primary" @click="onObjectOAMRuleSearch">
                <template #icon>
                  <el-icon>
                    <svg-icon name="i-ep:search" />
                  </el-icon>
                </template>
              </el-button>

              <el-button type="primary" size="default" @click.stop="onObjectOAMRuleAdd">
                <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.objectOamRuleList" 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="attrTitle" label="属性" header-align="center" align="center" width="250">
              <template #default="scope">
                <span> {{ scope.row.targetAttrTitle }}-{{ scope.row.targetAttrCode }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="ruleTitle" label="规则" header-align="center" align="center" width="150" />

            <el-table-column label="操作" header-align="center" align="center" width="230">
              <template #default="scope">
                <el-button type="warning" size="small" plain @click="onObjectOAMRuleEdit(scope.row)">
                  编辑
                </el-button>
                <el-button type="danger" size="small" plain @click="onObjectOAMRuleDelete(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </page-main>
      </div>
    </LayoutContainer>
  </div>
  <ObjectOAMComponent ref="objectOAMRef" @success="getOAMTree" />
  <ObjectOAMRuleComponent ref="objectOAMRuleRef" @success="getObjectOAMRuleList" />
</template>

<style lang="scss" scoped>
.absolute-container {
  .page-header {
    margin-bottom: 0;
  }

  :deep(.left-side) {
    display: flex;
    flex-direction: column;
    height: 100%;

    .btns {
      display: inline-flex;
      width: 100%;

      .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;
            }
          }
        }
      }
    }
  }
}
.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;
    }
  }
}

.demo-tabs > .el-tabs__content {
  padding: 22px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>