流程配置模块，元数据模块审核

vue-fastapi-backend/module_admin/dao/approval_dao.py

@@ -39,15 +39,27 @@ class ApprovalDao:
 
     @classmethod
     async def get_flow_list(cls, db: AsyncSession, query_param: ApprovalQueryObject, current_user: CurrentUserModel):
+        roleList = current_user.roles
+        query = (select(FlowApproval).where(
+            (FlowApproval.applicant == query_param.applicant) if query_param.applicant else True,
+            (FlowApproval.businessType == query_param.businessType) if query_param.businessType else True,
+            or_(*[FlowApproval.nextStepRole.like(f'%{role}%') for role in roleList],
+                FlowApproval.nextStepUser.like(f'%{current_user.user.user_name}%')),
+        ).order_by(FlowApproval.applyTime)
+                 .distinct())
+        # 注意：这里不执行查询，而是将查询对象传递给 paginate 方法
+        result = await PageUtil.paginate(db, query, query_param.page_num, query_param.page_size, True)
+        return result
+
+    @classmethod
+    async def get_owner_flow_list(cls, db: AsyncSession, query_param: ApprovalQueryObject,
+                                  current_user: CurrentUserModel):
         query = (
             select(FlowApproval)
             .where(
-                (FlowApproval.applicant == query_param.status) if query_param.applicant else True,
+                (FlowApproval.applicant == query_param.applicant) if query_param.applicant else True,
                 (FlowApproval.businessType == query_param.businessType) if query_param.businessType else True,
-                or_(
+                FlowApproval.approvalFlow.like(f'%{current_user.user.user_name}%')
-                    FlowApproval.approver == current_user.user.user_name,
-                    FlowApproval.approver.in_(current_user.roles)
-                ) if current_user.user.user_name != 'admin' else True
             )
             .order_by(FlowApproval.applyTime)
             .distinct()
@@ -57,9 +69,16 @@ class ApprovalDao:
         return result
 
     @classmethod
-    async def get_waiting_total(cls, db: AsyncSession, current_user: CurrentUserModel):
+    async def get_all_waitingOrPendingFlows(cls, db: AsyncSession):
-        return (await db.execute(select(func.count()).select_from(FlowApproval)
+        result = (
-                                 .where(FlowApproval.approver == current_user.user.user_name))).scalar()
+            (
+                await db.execute(select(FlowApproval).where(
+                    or_(FlowApproval.status == 'waiting',
+                        FlowApproval.status == 'pending')
+                ))
+            ).scalars().all()
+        )
+        return result
 
     @classmethod
     async def get_flow_by_idAndUser(cls, db: AsyncSession, flow_id: str, username: str):
@@ -99,5 +118,26 @@ class ApprovalDao:
     async def delete_flow_by_module(cls, module: str, db: AsyncSession):
         await db.execute(delete(FlowConfig).where(FlowConfig.module == module))
 
+    @classmethod
+    async def get_nextstep_conf(cls, module: str, db: AsyncSession, step: int):
+        result = (
+            (
+                await db.execute(select(FlowConfig).where(
+                    FlowConfig.module == module,
+                    FlowConfig.step == step
+                ))
+            ).scalars().all()
+        )
+        return result
 
-
+    @classmethod
+    async def get_first_node_conf(cls, module: str, db: AsyncSession):
+        result = (
+            (
+                await db.execute(select(FlowConfig).where(
+                    FlowConfig.module == module,
+                    FlowConfig.step == 1
+                ))
+            ).scalars().all()
+        )
+        return result

vue-fastapi-backend/module_admin/entity/do/approval_do.py

@@ -14,10 +14,12 @@ class FlowApproval(Base):
     businessId = Column(String(255), default='', comment='业务id串')
     applicant = Column(String(50), default=None, comment='申请人')
     applyTime = Column(String(50), default=None, comment='审批时间')
-    approver = Column(String(50), default=None, comment='下一步审批人')
+    currentFlowId = Column(String(50), default=None, comment='当前审批节点id')
-    nextStep = Column(Integer, default=None, comment="下一步编号")
+    nextStep = Column(String(255), default=None, comment="下一步编号")
+    nextStepRole = Column(String(255), default=None, comment="下一步审批角色")
+    nextStepUser = Column(String(255), default=None, comment="下一步审批人")
     status = Column(String(10), default=None, comment='状态')
-    approvalFlow = Column(Text, default=None, comment='审批流')  # [{审批人：‘’，审批时间：‘’,'审批结果'：‘’,审批意见:''},{}]数组
+    approvalFlow = Column(Text, default=None, comment='审批流')  # [{审批人：‘’，审批节点id：‘’，审批时间：‘’,'审批结果'：‘’,审批意见:''},{}]数组
 
 
 class FlowConfig(Base):

vue-fastapi-backend/module_admin/entity/vo/approval_vo.py

@@ -24,13 +24,16 @@ class ApprovalQueryObject(BaseModel):
     page_size: int
     applicant: Optional[str] = None
     businessType: Optional[str] = None
+    status: Optional[str] = None
 
 
 class EditObjectModel(BaseModel):
     id: Optional[str] = None
     status: Optional[str] = None
-    approver: Optional[str] = None
+    currentNodeId: Optional[str] = None
     nextStep: Optional[int] = None
+    nextStepRole: Optional[str] = None
+    nextStepUser: Optional[str] = None
     approvalFlow: Optional[str] = None
 
 

vue-fastapi-backend/module_admin/service/approval_service.py

@@ -11,6 +11,7 @@ from exceptions.exception import ServiceException, ServiceWarning
 from datetime import datetime
 from utils.common_util import CamelCaseUtil
 from module_admin.dao.approval_dao import ApprovalDao
+from module_admin.dao.user_dao import UserDao
 from module_admin.dao.meta_dao import MetaDao
 
 
@@ -20,7 +21,7 @@ class ApprovalService:
     """
 
     @classmethod
-    async def apply_services(cls, result_db: AsyncSession, apply: ApplyModel):
+    async def apply_services(cls, result_db: AsyncSession, apply: ApplyModel, module: str):
         flow_approval = FlowApproval()
         flow_approval.id = uuid.uuid4()
         flow_approval.businessType = apply.businessType
@@ -28,9 +29,10 @@ class ApprovalService:
         flow_approval.applicant = apply.applicant
         flow_approval.applyTime = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
         flow_approval.status = 'waiting'
-        # todo 后期进行流程配置，角色 or 人员 下一步审批人
+        listConf = await ApprovalDao.get_first_node_conf(module, result_db)
-        flow_approval.approver = 'admin'
+        flow_approval.nextStep = json.dumps([item.id for item in listConf])
-        flow_approval.nextStep = '1'
+        flow_approval.nextStepRole = json.dumps([item.code for item in listConf if item.type == 'Role'])
+        flow_approval.nextStepUser = json.dumps([item.code for item in listConf if item.type == 'User'])
         await ApprovalDao.add_flow_approval(result_db, flow_approval)
         await result_db.commit()
         return CrudResponseModel(is_success=True, message='申请成功')
@@ -44,28 +46,49 @@ class ApprovalService:
             raise ServiceException(message='所操作的流程已结束')
         if flow_approval.status == 'canceled':
             raise ServiceException(message='所操作的流程已撤回')
+        edit = EditObjectModel()
+        edit.id = flow_approval.id
+        flowConfList = await ApprovalDao.get_conf_list(result_db, flow_approval.businessType)
+        nextSteps = json.loads(flow_approval.nextStep)
+        nextStepFlowList = [item for item in flowConfList if item.id in nextSteps]
+        nextFlowList = [item for item in nextStepFlowList if item.code in current_user.roles]
+        confNodeId = nextFlowList[0].id
         array = []
         if flow_approval.approvalFlow is not None:
             array = json.loads(flow_approval.approvalFlow)
+        if operate.operateType == 'success':
+            nextFlow = []
+            for flowConf in flowConfList:
+                parent = json.loads(flowConf.parent)
+                if confNodeId in parent:
+                    nextFlow.append(flowConf)
+            if len(nextFlow) > 0:
+                edit.status = 'pending'  # 有下一步执行人，则设置为 pending
+                edit.nextStep = json.dumps([item.id for item in nextFlow])
+                edit.nextStepRole = json.dumps([item.code for item in nextFlow if item.type == 'Role'])
+                edit.nextStepUser = json.dumps([item.code for item in nextFlow if item.type == 'User'])
+                edit.currentNodeId = confNodeId
+            else:
+                edit.status = 'succeed'
+                edit.currentNodeId = confNodeId
+                edit.nextStep = '[]'
+                edit.nextStepRole = '[]'
+                edit.nextStepUser = '[]'
+        if operate.operateType == 'reject':
+            edit.status = 'rejected'
+            edit.currentNodeId = confNodeId
+            edit.nextStep = '[]'
+            edit.nextStepRole = '[]'
+            edit.nextStepUser = '[]'
         array.append({'operator': current_user.user.user_name,
+                      'confFlowId': confNodeId,
                       'operateTime': datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
                       'operate': operate.operateType,
                       'operateComment': operate.operateComment,
                       })
-        edit = EditObjectModel()
-        edit.id = flow_approval.id
         edit.approvalFlow = json.dumps(array)
-        if operate.operateType == 'success':
+        if flow_approval.businessType == 'metaDataInfo':
-            # todo 增加流程配置，并查询出下一步操作人以及步骤
+            await cls.syncSuppInfo(result_db, flow_approval.businessId, edit.status)
-            edit.status = 'succeed'  # 有下一步执行人，则设置为 pending
-            edit.approver = None
-            edit.nextStep = -1
-        if operate.operateType == 'reject':
-            edit.status = 'rejected'
-            edit.approver = None
-            edit.nextStep = -1
-        if flow_approval.businessType == 't_metadata_supp_info':
-            await cls.syncSuppInfo(result_db, flow_approval.businessId, operate.operateType)
         await ApprovalDao.edit_flow_approval(result_db, edit.model_dump(exclude_unset=True))
         await result_db.commit()
         return CrudResponseModel(is_success=True, message='操作成功')
@@ -98,13 +121,37 @@ class ApprovalService:
     @classmethod
     async def get_flow_list_services(cls, query_db: AsyncSession, query_param: ApprovalQueryObject,
                                      current_user: CurrentUserModel):
+        if query_param.status == 'waiting':
             result = await ApprovalDao.get_flow_list(query_db, query_param, current_user)
             return result
+        if query_param.status == 'over':
+            result = await ApprovalDao.get_owner_flow_list(query_db, query_param, current_user)
+            return result
+        return None
 
     @classmethod
     async def get_waiting_total_services(cls, query_db: AsyncSession, current_user: CurrentUserModel):
-        result = await ApprovalDao.get_waiting_total(query_db, current_user)
+        approval_list = await ApprovalDao.get_all_waitingOrPendingFlows(query_db)
-        return result
+        count = 0
+        for item in approval_list:
+            nextRoles = json.loads(item.nextStepRole)
+            nextUsers = json.loads(item.nextStepUser)
+            if len(nextRoles)>0 and len(nextUsers) > 0:
+                if current_user.user.user_name in nextUsers:
+                    count = count+1
+                    break
+                if any(element in set(current_user.roles) for element in nextRoles):
+                    count = count+1
+                    break
+            if len(nextRoles) > 0 and len(nextUsers) == 0:
+                if any(element in set(current_user.roles) for element in nextRoles):
+                    count = count+1
+                    break
+            if len(nextRoles) == 0 and len(nextUsers) > 0:
+                if current_user.user.user_name in nextUsers:
+                    count = count+1
+                    break
+        return count
 
     @classmethod
     async def cancel_apply_services(cls, query_db: AsyncSession, flow_id: str,

vue-fastapi-backend/module_admin/service/meta_service.py

@@ -99,10 +99,10 @@ class MetaService:
                 await MetaDao.insertMetadataFldSuppInfoVett(suppColumnInfo, result_db)
                 await result_db.commit()
         applyModel = ApplyModel()
-        applyModel.businessType = "t_metadata_supp_info"
+        applyModel.businessType = "metaDataInfo"
         applyModel.businessId = tableOnum
         applyModel.applicant = current_user.user.user_name
-        await ApprovalService.apply_services(result_db, applyModel)
+        await ApprovalService.apply_services(result_db, applyModel, 'metaDataInfo')
         return CrudResponseModel(is_success=True, message='操作成功')
 
     @classmethod

vue-fastapi-frontend/src/views/meta/metaInfo/index.vue

@@ -81,16 +81,16 @@
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
-        <el-row :gutter="10" class="mb8">
+<!--        <el-row :gutter="10" class="mb8">-->
-          <el-col :span="1.5">
+<!--          <el-col :span="1.5">-->
-            <el-button
+<!--            <el-button-->
-                type="primary"
+<!--                type="primary"-->
-                plain
+<!--                plain-->
-                icon="Download"
+<!--                icon="Download"-->
-                @click="exportData"
+<!--                @click="exportData"-->
-            >导出</el-button>
+<!--            >导出</el-button>-->
-          </el-col>
+<!--          </el-col>-->
-        </el-row>
+<!--        </el-row>-->
         <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="50" align="center" />
           <el-table-column label="系统英文名" width="100" align="center" prop="ssysCd"></el-table-column>
@@ -135,7 +135,7 @@
       </template>
       <template #default>
         <el-row :gutter="20">
-            <el-col :span="12" :xs="24">
+            <el-col :span="6">
               <el-form :model="currentMetaData" :inline="true" label-width="120px">
                 <el-form-item label="对象英文名">
                   <el-input
@@ -161,6 +161,10 @@
                       disabled
                   />
                 </el-form-item>
+              </el-form>
+            </el-col>
+            <el-col :span="6">
+              <el-form :model="currentMetaData"  label-width="120px">
                 <el-form-item label="补录对象名称">
                   <el-input
                       v-model="currentMetaData.tabCrrctName"
@@ -180,7 +184,7 @@
                       v-model="currentMetaData.govFlag"
                       placeholder="请输入数据类型"
                       clearable
-                      style="width: 192px"
+                      style="width: 100%"
                   >
                     <el-option key="0" :value="'0'" label="是"/>
                     <el-option key="1" :value="'1'" label="否"/>
@@ -511,10 +515,10 @@
 </template>
 
 <script setup name="Meta">
-  import {getDataSourceList, getMetaDataList, getColumnList, getMetaClasList, postMetaSupp} from "@/api/meta/metaInfo.js"
+  import {getDataSourceList, getMetaDataList, getColumnList, getMetaClasList, postMetaSupp} from "@/api/meta/metaInfo"
   import { ref, nextTick, computed, watch, reactive, onMounted } from 'vue'
   import SQLCodeMirror from "@/components/codemirror/SQLCodeMirror.vue";
-  import cache from "@/plugins/cache.js";
+  import cache from "@/plugins/cache";
 
 
   const data = reactive({

vue-fastapi-frontend/src/views/system/flow/index.vue

@@ -29,6 +29,8 @@
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
+    <el-tabs type="border-card" v-model="flowTab" @tab-change="handleQuery">
+      <el-tab-pane name="waiting" label="待审批">
         <el-table :data="flowList">
           <el-table-column label="业务类型" align="center" prop="businessType">
             <template #default="scope">
@@ -50,19 +52,50 @@
               <span v-if="scope.row.status === 'rejected'">已驳回</span>
             </template>
           </el-table-column>
-      <el-table-column label="下一步审批人" align="center" prop="approver" :show-overflow-tooltip="true" >
+          <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-button link type="primary" icon="View" @click="showFlow(scope.row)">查看审批流</el-button>
+              <el-button link type="success" icon="Select" @click="agree(scope.row)">同意</el-button>
+              <el-button link type="danger" icon="CloseBold" @click="reject(scope.row)">驳回</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+            v-show="total > 0"
+            :total="total"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+        />
+      </el-tab-pane>
+      <el-tab-pane name="over" label="已审批">
+        <el-table :data="flowList">
+          <el-table-column label="业务类型" align="center" prop="businessType">
+            <template #default="scope">
+              <span v-if="scope.row.businessType === 't_metadata_supp_info'">元数据信息补录</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="业务编号" align="center" prop="businessId" :show-overflow-tooltip="true" width="280">
             <template #default="scope">
-          <el-link type="primary" @click="showFlowConfig(scope.row)" :underline="false">{{ scope.row.approver }}</el-link>
+              <el-link type="primary" @click="showBusinessDataDialog(scope.row)" :underline="false">{{ scope.row.businessId }}</el-link>
+            </template>
+          </el-table-column>
+          <el-table-column label="申请人" align="center" prop="applicant" :show-overflow-tooltip="true" />
+          <el-table-column label="申请时间" align="center" prop="applyTime" :show-overflow-tooltip="true" />
+          <el-table-column label="当前状态" align="center" prop="configType">
+            <template #default="scope">
+              <span v-if="scope.row.status === 'waiting'">未审批</span>
+              <span v-if="scope.row.status === 'pending'">未审批</span>
+              <span v-if="scope.row.status === 'succeed'">已审批</span>
+              <span v-if="scope.row.status === 'rejected'">已驳回</span>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
             <template #default="scope">
-          <el-button link type="success" icon="Select" @click="agree(scope.row)">同意</el-button>
+              <el-button link type="success" icon="View" @click="showFlow(scope.row)">查看流程</el-button>
-          <el-button link type="danger" icon="CloseBold" @click="reject(scope.row)">驳回</el-button>
             </template>
           </el-table-column>
         </el-table>
-
         <pagination
             v-show="total > 0"
             :total="total"
@@ -70,26 +103,243 @@
             v-model:limit="queryParams.pageSize"
             @pagination="getList"
         />
+      </el-tab-pane>
+    </el-tabs>
+    <el-dialog
+        v-model="showFlowDialog"
+        title="审批流程"
+        width="50%"
+    >
+      <div id="flowContainer" style="width: 100%;height: 100%"></div>
+    </el-dialog>
+    <el-dialog
+        v-model="businessDialog"
+        width="80%"
+    >
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-descriptions
+              class="margin-top"
+              title="修改前数据"
+              :column="3"
+
+              border
+          >
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  系统英文名
+                </div>
+              </template>
+              kooriookami
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  模式名称
+                </div>
+              </template>
+              18100000000
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  对象英文名
+                </div>
+              </template>
+              Suzhou
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  对象中文名
+                </div>
+              </template>
+              <el-tag size="small">School</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  记录数
+                </div>
+              </template>
+
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  补录对象名称
+                </div>
+              </template>
+
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  对象类型
+                </div>
+              </template>
+
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  对象治理标志
+                </div>
+              </template>
+
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  负责人
+                </div>
+              </template>
+
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template #label>
+                <div class="cell-item">
+                  对象标签
+                </div>
+              </template>
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  补录对象描述
+                </div>
+              </template>
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-col>
+        <el-col :span="12">
+          <el-descriptions
+              class="margin-top"
+              title="修改后数据"
+              :column="3"
+
+              border
+          >
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  系统英文名
+                </div>
+              </template>
+              kooriookami
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  模式名称
+                </div>
+              </template>
+              18100000000
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  对象英文名
+                </div>
+              </template>
+              Suzhou
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  对象中文名
+                </div>
+              </template>
+              <el-tag size="small">School</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  记录数
+                </div>
+              </template>
+
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  补录对象名称
+                </div>
+              </template>
+
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  对象类型
+                </div>
+              </template>
+
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  对象治理标志
+                </div>
+              </template>
+
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  负责人
+                </div>
+              </template>
+
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template #label>
+                <div class="cell-item">
+                  对象标签
+                </div>
+              </template>
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  补录对象描述
+                </div>
+              </template>
+            </el-descriptions-item>
+          </el-descriptions>
+
+        </el-col>
+      </el-row>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import {getApprovalList, operateProcess } from "@/api/flow/flow"
+import {getFlowConfList, getApprovalList, operateProcess } from "@/api/flow/flow"
+import {v4 as uuid} from 'uuid'
+
 const { proxy } = getCurrentInstance();
 import { ref, nextTick, computed, watch, reactive, onMounted } from 'vue'
 import {getWaitingFlowCount} from "../../../api/flow/flow.js";
 import cache from "../../../plugins/cache.js";
+import {Graph} from "@antv/x6";
+const flowTab = ref('waiting')
 const data = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
     applicant: undefined,
     businessType: undefined,
+    status:'pending'
   },
 });
+const showFlowDialog = ref(false);
+const businessDialog = ref(false);
 const total = ref(0);
 const { queryParams } = toRefs(data);
 const flowList = ref([]);
+
 /** 查询参数列表 */
 function getList() {
   getApprovalList(queryParams.value).then(res=>{
@@ -97,10 +347,235 @@ function getList() {
     total.value = res.data.total
   })
 }
+function register(){
+  Graph.registerNode(
+      'activity',
+      {
+        inherit: 'rect',
+        markup: [
+          {
+            tagName: 'rect',
+            selector: 'body',
+          },
+          {
+            tagName: 'image',
+            selector: 'img',
+          },
+          {
+            tagName: 'text',
+            selector: 'label',
+          },
+        ],
+        attrs: {
+          body: {
+            rx: 6,
+            ry: 6,
+            stroke: '#5F95FF',
+            fill: '#EFF4FF',
+            strokeWidth: 1,
+          },
+          img: {
+            x: 6,
+            y: 6,
+            width: 16,
+            height: 16,
+            'xlink:href': '/x6-user.png',
+          },
+          label: {
+            fontSize: 12,
+            fill: '#262626',
+          },
+        },
+      },
+      true,
+  )
+  Graph.registerNode(
+      'activity-success',
+      {
+        inherit: 'rect',
+        markup: [
+          {
+            tagName: 'rect',
+            selector: 'body',
+          },
+          {
+            tagName: 'image',
+            selector: 'img',
+          },
+          {
+            tagName: 'text',
+            selector: 'label',
+          },
+        ],
+        attrs: {
+          body: {
+            rx: 6,
+            ry: 6,
+            stroke: '#67C23A',
+            fill: 'rgb(239.8, 248.9, 235.3)',
+            strokeWidth: 1,
+          },
+          img: {
+            x: 6,
+            y: 6,
+            width: 16,
+            height: 16,
+            'xlink:href': '/checkbox-circle-line.png',
+          },
+          label: {
+            fontSize: 12,
+            fill: '#67C23A',
+          },
+        },
+      },
+      true,
+  )
+  Graph.registerNode(
+      'activity-reject',
+      {
+        inherit: 'rect',
+        markup: [
+          {
+            tagName: 'rect',
+            selector: 'body',
+          },
+          {
+            tagName: 'image',
+            selector: 'img',
+          },
+          {
+            tagName: 'text',
+            selector: 'label',
+          },
+        ],
+        attrs: {
+          body: {
+            rx: 6,
+            ry: 6,
+            stroke: '#F56C6C',
+            fill: 'rgb(254, 240.3, 240.3)',
+            strokeWidth: 1,
+          },
+          img: {
+            x: 6,
+            y: 6,
+            width: 16,
+            height: 16,
+            'xlink:href': '/close-circle-line.png',
+          },
+          label: {
+            fontSize: 12,
+            fill: '#F56C6C',
+          },
+        },
+      },
+      true,
+  )
+
+  Graph.registerEdge(
+      'bpmn-edge',
+      {
+        inherit: 'edge',
+        attrs: {
+          line: {
+            stroke: '#C71E1EFF',
+            strokeWidth: 2,
+          },
+        },
+      },
+      true,
+  )
+}
+
+function searchFlowData(){
+
+}
+function getIconUrlAndShape(data,row){
+  let approvalFlow = JSON.parse(row.approvalFlow)
+  for (let i = 0; i < approvalFlow.length; i++) {
+    for (let j = 0; j < data.length; j++) {
+      if (approvalFlow[i].confFlowId === data[j].id){
+        if (approvalFlow[i].operate === 'success'){
+          data[j].operator = approvalFlow[i].operator
+          data[j].shape = 'activity-success'
+          data[j].iconUrl = '/checkbox-circle-line.png'
+        }else if (approvalFlow[i].operate === 'reject'){
+          data[j].operator = approvalFlow[i].operator
+          data[j].iconUrl = '/close-circle-line.png'
+          data[j].shape = 'activity-reject'
+        }else {
+          data[j].operator = ""
+          data[j].iconUrl = '/x6-user.png'
+          data[j].shape = 'activity'
+        }
+      }
+    }
+  }
+  return data
+}
+
+function showFlow(row){
+  showFlowDialog.value = true
+  getFlowConfList(row.businessType).then(res=>{
+    let resData = res.data
+    if (resData.length > 0){
+      for (let i = 0; i < resData.length; i++) {
+        resData[i].parent = JSON.parse(resData[i].parent)
+      }
+    }
+    let data = getIconUrlAndShape(resData,row)
+    let array = []
+    register()
+    let graph = new Graph({
+      container: document.getElementById('flowContainer'),
+      width: 800,
+      height: 500,
+      grid:true,
+      autoResize: true,
+      connecting: {
+        router: 'manhattan'
+      },
+    })
+    data.forEach((item) => {
+      let str = ""
+      if (item.operator !== ''){
+        str += "\r\n审批员："+item.operator
+      }
+      let node = {
+        id: item.id,
+        code: item.code,
+        attrs: {text:{text: item.text + str}},
+        position:{x:item.x,y:item.y},
+        type: item.type,
+        width: 100,
+        height: 60,
+        shape: item.shape,
+        iconUrl: item.iconUrl
+      }
+      array.push(node)
+    })
+    data.forEach((item) => {
+      if (item.parent && item.parent.length > 0){
+        item.parent.forEach((parentNodeId) =>{
+          let node = {
+            id: uuid(),
+            shape: 'edge',
+            source: {cell: parentNodeId},
+            target: {cell: item.id}
+          }
+          array.push(node)
+        })
+      }
+    })
+    graph.fromJSON(array)
+    graph.zoomToFit({ padding:10, maxScale: 1 })
+  })
 
+}
 /** 搜索按钮操作 */
 function handleQuery() {
   queryParams.value.pageNum = 1;
+  queryParams.value.status = flowTab.value
   getList();
 }
 function resetQuery(){
@@ -113,12 +588,10 @@ function resetQuery(){
   getList()
 }
 function showBusinessDataDialog(row){
-
+  businessDialog.value = true
-}
-function showFlowConfig(row){
-
 }
 function agree(row){
+  //获取用户当前的nodeId
   let data = {
     flowId: row.id,
     operateType: 'success',