流程引擎， 提审和待办。

src/api/flow/index.ts

@@ -55,3 +55,46 @@ export function getRoleList(queryParams: object) {
     data: {},
   });
 }
+
+// 流程定义列表查询
+export function queryFlowDataList(queryParams: object) {
+  return request({
+    url: "/api/v1/definition/list",
+    method: "post",
+    data: queryParams,
+  });
+}
+
+// 下一节点人员 type 1 流程 2 任务
+export function getNextUser(type: string, id: string) {
+  return request({
+    url: `/api/v1/flowTask/nextUsers/${type}/${id}`,
+    method: "get",
+  });
+}
+
+// 提交流程
+export function submitFlow(data: object) {
+  return request({
+    url: `/api/v1/op/route/startFlow`,
+    method: "post",
+    data: data,
+  });
+}
+
+// 流程撤销
+export function cancelFlow(data: object) {
+  return request({
+    url: `/api/v1/op/route/cancelFlow`,
+    method: "post",
+    data: data,
+  });
+}
+
+// 查看流程记录
+export function queryFlowRecord(insId: string) {
+  return request({
+    url: `/api/v1/flowTask/list/${insId}`,
+    method: "get",
+  });
+}

src/common/configs/dictDataUtil.ts

@@ -28,6 +28,8 @@ const DictDataUtil = {
     device_maintenance_cycle: "device_maintenance_cycle",
     // 工艺路线类型
     routing_type: "routing_type",
+    // 流程状态
+    flow_ins_state: "flow_ins_state",
     //缺陷管理
     defect_mana: "defect_mana",
     //封装方法

src/components/MyFlow/src/hooks/useDnD.ts

@@ -1,7 +1,7 @@
-import {Position, useVueFlow} from '@vue-flow/core'
-import { ref, watch } from 'vue'
-import type { Node, Edge } from '@vue-flow/core';
-import {HJInterNodeData, HJPosition} from "../types/comTypes";
+import { Position, useVueFlow } from "@vue-flow/core";
+import { ref, watch } from "vue";
+import type { Node, Edge } from "@vue-flow/core";
+import { HJInterNodeData, HJPosition } from "../types/comTypes";
 
 import { v4 as uuidv4 } from "uuid";
 
@@ -9,7 +9,7 @@ import { v4 as uuidv4 } from "uuid";
  * @returns {string} - A unique id.
  */
 function getId(): string {
-    return uuidv4();
+  return uuidv4();
 }
 
 /**
@@ -17,129 +17,132 @@ function getId(): string {
  * @type {{draggedType: Ref<string|null>, isDragOver: Ref<boolean>, isDragging: Ref<boolean>}}
  */
 const state = {
-    /**
-     * The type of the node being dragged.
-     */
-    dragData: ref<HJInterNodeData | null>(null),
-    draggedType: ref<string | null>(null),
-    isDragOver: ref(false),
-    isDragging: ref(false),
-}
+  /**
+   * The type of the node being dragged.
+   */
+  dragData: ref<HJInterNodeData | null>(null),
+  draggedType: ref<string | null>(null),
+  isDragOver: ref(false),
+  isDragging: ref(false),
+};
 
 export default function useDragAndDrop() {
-    const { draggedType, isDragOver, isDragging , dragData} = state
-
-    const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow()
+  const { draggedType, isDragOver, isDragging, dragData } = state;
 
-    watch(isDragging, (dragging) => {
-        document.body.style.userSelect = dragging ? 'none' : ''
-    })
+  const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } =
+    useVueFlow();
 
-    // 第二个类型是HJInterNodeData
-    function onDragStart(event: DragEvent, data: HJInterNodeData) {
-        if (event.dataTransfer) {
-            event.dataTransfer.setData('application/vueflow', data.type!)
-            event.dataTransfer.effectAllowed = 'move'
-        }
+  watch(isDragging, (dragging) => {
+    document.body.style.userSelect = dragging ? "none" : "";
+  });
 
-        draggedType.value = data.type!
-        dragData.value = data
-        isDragging.value = true
-
-        document.addEventListener('drop', onDragEnd)
+  // 第二个类型是HJInterNodeData
+  function onDragStart(event: DragEvent, data: HJInterNodeData) {
+    if (event.dataTransfer) {
+      event.dataTransfer.setData("application/vueflow", data.type!);
+      event.dataTransfer.effectAllowed = "move";
     }
 
-    /**
-     * Handles the drag over event.
-     *
-     * @param {DragEvent} event
-     */
-    function onDragOver(event: DragEvent) {
-        event.preventDefault()
+    draggedType.value = data.type!;
+    dragData.value = JSON.parse(JSON.stringify(data));
+    isDragging.value = true;
 
-        if (draggedType.value) {
-            isDragOver.value = true
+    document.addEventListener("drop", onDragEnd);
+  }
 
-            if (event.dataTransfer) {
-                event.dataTransfer.dropEffect = 'move'
-            }
-        }
-    }
+  /**
+   * Handles the drag over event.
+   *
+   * @param {DragEvent} event
+   */
+  function onDragOver(event: DragEvent) {
+    event.preventDefault();
 
-    function onDragLeave() {
-        isDragOver.value = false
-    }
+    if (draggedType.value) {
+      isDragOver.value = true;
 
-    function onDragEnd() {
-        isDragging.value = false
-        isDragOver.value = false
-        draggedType.value = null
-        dragData.value = null
-        document.removeEventListener('drop', onDragEnd)
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "move";
+      }
+    }
+  }
+
+  function onDragLeave() {
+    isDragOver.value = false;
+  }
+
+  function onDragEnd() {
+    isDragging.value = false;
+    isDragOver.value = false;
+    draggedType.value = null;
+    dragData.value = null;
+    document.removeEventListener("drop", onDragEnd);
+  }
+
+  /**
+   * Handles the drop event.
+   *
+   * @param {DragEvent} event
+   */
+  function onDrop(event: DragEvent) {
+    const position = screenToFlowCoordinate({
+      x: event.clientX,
+      y: event.clientY,
+    });
+
+    const nodeId = getId();
+
+    const newNode: Node = {
+      id: nodeId,
+      position,
+      data: JSON.parse(JSON.stringify(dragData.value)).data,
+      type: JSON.parse(JSON.stringify(dragData.value)).type,
+      targetPosition: Position.Top,
+      sourcePosition: Position.Bottom,
+    };
+
+    console.log("从左侧拖拽的添加操作", newNode);
+    // 如果没有给node的data设置handles属性，这默认上下结构
+    if (!newNode.data.handles) {
+      newNode.data.handles = [
+        {
+          type: "source",
+          position: HJPosition.Bottom,
+        },
+        {
+          type: "target",
+          position: HJPosition.Top,
+        },
+      ];
     }
 
     /**
-     * Handles the drop event.
+     * Align node position after drop, so it's centered to the mouse
      *
-     * @param {DragEvent} event
+     * We can hook into events even in a callback, and we can remove the event listener after it's been called.
      */
-    function onDrop(event: DragEvent) {
-        const position = screenToFlowCoordinate({
-            x: event.clientX,
-            y: event.clientY,
-        })
-
-        const nodeId = getId()
-
-        const newNode: Node = {
-            id: nodeId,
-            position,
-            data: dragData.value!.data,
-            type: dragData.value!.type,
-            targetPosition: Position.Top,
-            sourcePosition:  Position.Bottom,
-        }
-
-        console.log("从左侧拖拽的添加操作",newNode)
-        // 如果没有给node的data设置handles属性，这默认上下结构
-        if (!newNode.data.handles) {
-            newNode.data.handles = [
-                {
-                    type: 'source',
-                    position: HJPosition.Bottom,
-
-                },
-                {
-                    type: 'target',
-                    position: HJPosition.Top,
-                }
-            ]
-        }
-
-
-        /**
-         * Align node position after drop, so it's centered to the mouse
-         *
-         * We can hook into events even in a callback, and we can remove the event listener after it's been called.
-         */
-        const { off } = onNodesInitialized(() => {
-            updateNode(nodeId, (node) => ({
-                position: { x: node.position.x - 100, y: node.position.y - node.dimensions.height / 2 },
-            }))
-
-            off()
-        })
-
-        addNodes(newNode)
-    }
-
-    return {
-        draggedType,
-        isDragOver,
-        isDragging,
-        onDragStart,
-        onDragLeave,
-        onDragOver,
-        onDrop,
-    }
+    const { off } = onNodesInitialized(() => {
+      updateNode(nodeId, (node) => ({
+        position: {
+          x: node.position.x - 100,
+          y: node.position.y - node.dimensions.height / 2,
+        },
+      }));
+
+      off();
+    });
+
+    addNodes(newNode);
+    draggedType.value = null;
+  }
+
+  return {
+    draggedType,
+    isDragOver,
+    isDragging,
+    onDragStart,
+    onDragLeave,
+    onDragOver,
+    onDrop,
+  };
 }

src/components/WorkFlows/workFlowCheck.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { getNextUser, queryFlowDataList, submitFlow } from "@/api/flow";
+
+const dialogVisible = ref(false);
+const dialogTitle = ref("Workflow Check");
+
+const emits = defineEmits(["sureToSave"]);
+
+// 流程定义的列表
+const flowDataList = ref<any[]>([]);
+const getFlowList = () => {
+  queryFlowDataList({ flowType: flowForm.flow_type }).then((res) => {
+    flowDataList.value = res.data;
+  });
+};
+const name = ref("");
+const nextUserList = ref<any[]>([]);
+const whenSelectFlow = () => {
+  //   选择完模板之后  下一节点人员 type 1 流程 2 任务
+  getNextUser("1", flowForm.definitionId).then((res) => {
+    name.value = res.data?.roleName ?? "";
+    nextUserList.value = res.data?.users ?? [];
+  });
+};
+
+const flowFormRef = ref();
+const flowForm = reactive<any>({
+  businessId: "",
+  flow_type: "",
+  definitionId: "",
+  users: "",
+});
+
+const close = () => {
+  dialogVisible.value = false;
+};
+
+const sureToSave = () => {
+  submitFlow(flowForm).then(() => {
+    ElMessage.success("提交成功");
+    emits("sureToSave");
+    dialogVisible.value = false;
+  });
+};
+
+// businessId	业务ID   流程类型flow_type  测试类型  testService;   通用工艺提审  commonRouteFlowService;
+const openDialog = (businessId: string, flow_type: string) => {
+  flowForm.businessId = businessId;
+  flowForm.flow_type = flow_type;
+  dialogVisible.value = true;
+  getFlowList();
+};
+
+defineExpose({
+  openDialog,
+  close,
+});
+</script>
+
+<template>
+  <el-drawer
+    v-model="dialogVisible"
+    direction="rtl"
+    size="400"
+    append-to-body
+    destroy-on-close
+  >
+    <template #header>
+      <h4 v-text="dialogTitle"></h4>
+    </template>
+    <template #default>
+      <el-scrollbar>
+        <div class="check-container">
+          <el-form ref="flowFormRef" v-model="flowForm" label-width="100px">
+            <el-form-item label="选择流程模板">
+              <el-tree-select
+                v-model="flowForm.definitionId"
+                :data="flowDataList"
+                filterable
+                :props="{ label: 'flowName', value: 'id' }"
+                @change="whenSelectFlow"
+              />
+            </el-form-item>
+            <el-form-item :label="name" v-if="name">
+              <el-tree-select
+                v-model="flowForm.users"
+                :data="nextUserList"
+                filterable
+                :props="{ label: 'userName', value: 'userName' }"
+              />
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-scrollbar>
+    </template>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="sureToSave">保存</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-drawer__header) {
+  margin: 0;
+}
+.check-container {
+  font-size: 14px;
+}
+</style>

src/views/base/craftManagement/routeCommon/index.vue

@@ -67,6 +67,21 @@
         <el-button link icon="el-icon-copy-document" @click="bindProcess(row)"
           >绑定</el-button
         >
+        <el-button
+          link
+          icon="el-icon-copy-document"
+          v-if="row.flowState == '0' || row.flowState == '2'"
+          @click="openCheckView(row)"
+          >提审</el-button
+        >
+
+        <el-button
+          link
+          icon="el-icon-copy-document"
+          v-if="row.flowState == '3'"
+          @click="onCancelFlow(row)"
+          >撤销</el-button
+        >
       </template>
     </avue-crud>
     <CommonTable
@@ -113,6 +128,11 @@
     >
       <RouteChangeLog :targetRouteId="routeDeatil.id" />
     </el-dialog>
+
+    <work-flow-check
+      ref="workFlowCheckRef"
+      @sureToSave="onWFSave"
+    ></work-flow-check>
   </div>
 </template>
 <script setup>
@@ -124,6 +144,8 @@ import { useDictionaryStore } from "@/store";
 import { copyRoute } from "@/api/craft/route/index";
 import { getUserTree } from "@/api/system/user/index";
 import RouteChangeLog from "@/views/base/craftManagement/route/components/routeChangeLog.vue";
+import WorkFlowCheck from "@/components/WorkFlows/workFlowCheck.vue";
+import { cancelFlow } from "@/api/flow";
 
 // 数据字典相关
 const { dicts } = useDictionaryStore();
@@ -316,6 +338,21 @@ option.value = Object.assign(option.value, {
       ],
       value: 0,
     },
+    {
+      label: "流程状态",
+      prop: "flowState",
+      width: 120,
+      search: true,
+      addDisplay: false,
+      editDisplay: false,
+      overHidden: true,
+      type: "select",
+      dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.flow_ins_state,
+      props: {
+        label: "dictLabel",
+        value: "dictValue",
+      },
+    },
     // 只有绑定了工序才可以复制。
     {
       label: "是否可复制",
@@ -377,4 +414,25 @@ option.value = Object.assign(option.value, {
     },
   ],
 });
+
+//  工作流相关
+const workFlowCheckRef = ref(null);
+const openCheckView = (row) => {
+  workFlowCheckRef.value &&
+    workFlowCheckRef.value.openDialog(row.id, "routeFlowComService");
+};
+const onWFSave = () => {
+  dataList();
+};
+
+const onCancelFlow = (row) => {
+  console.log(row);
+  cancelFlow({
+    businessId: row.id,
+    insId: row.flowIns,
+  }).then(() => {
+    ElMessage.success("撤销成功");
+    dataList();
+  });
+};
 </script>

src/views/flow/common/CheckFlow.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import {
+  getNextUser,
+  queryFlowDataList,
+  queryFlowRecord,
+  submitFlow,
+} from "@/api/flow";
+import {
+  ComponentNameClass,
+  DrawerTitleClass,
+  TopTitleClass,
+} from "@/views/flow/common/CheckTopInfos/utils";
+// 要在这里引入组件 才能展示
+import RouteFlowComService from "@/views/flow/common/CheckTopInfos/routeFlowComService.vue";
+
+const dialogVisible = ref(false);
+const dialogTitle = ref("");
+const componentName = ref("");
+
+const emits = defineEmits(["finish", "cancel"]);
+
+const close = () => {
+  dialogVisible.value = false;
+  componentName.value = "";
+};
+
+let currentRow: any = {};
+const openCheckDrawer = (row) => {
+  dialogVisible.value = true;
+  currentRow = row;
+};
+
+defineExpose({
+  openCheckDrawer,
+  close,
+});
+
+const activeNames = ref(["1"]);
+const handleChange = (val: any) => {
+  console.log(val);
+};
+
+const allComponents = shallowReactive({
+  RouteFlowComService,
+});
+
+const toPass = async () => {
+  dialogVisible.value = false;
+};
+
+const disAgree = async () => {
+  dialogVisible.value = false;
+};
+</script>
+
+<template>
+  <el-drawer
+    v-model="dialogVisible"
+    direction="rtl"
+    size="1000"
+    append-to-body
+    destroy-on-close
+    :close-on-click-modal="false"
+  >
+    <template #header>
+      <h4 v-text="DrawerTitleClass[currentRow.taskType]"></h4>
+    </template>
+    <template #default>
+      <el-scrollbar>
+        <div class="check-container">
+          <el-collapse v-model="activeNames" @change="handleChange">
+            <el-collapse-item
+              :title="TopTitleClass[currentRow.taskType]"
+              name="1"
+            >
+              <component
+                :is="allComponents[ComponentNameClass[currentRow.taskType]]"
+                :row="currentRow"
+              />
+            </el-collapse-item>
+            <el-collapse-item title="Feedback" name="2">
+              <div>
+                {{ componentName }}
+              </div>
+              <div>
+                Visual feedback: reflect current state by updating or
+                rearranging elements of the page.
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </el-scrollbar>
+    </template>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="toPass">通过</el-button>
+        <el-button type="warning" @click="toPass">不同意</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-drawer__header) {
+  margin: 0;
+}
+.check-container {
+  font-size: 14px;
+}
+</style>

src/views/flow/common/CheckTopInfos/routeFlowComService.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { getRouteInfo } from "@/views/flow/common/CheckTopInfos/utils";
+
+const infoObj = ref<any>(null);
+
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+  },
+});
+
+const showRouteFlow = () => {};
+
+onMounted(async () => {
+  console.log("CheckTopInfos routeFlowComService mounted", props.row);
+  let res = await getRouteInfo(props.row.businessId);
+  infoObj.value = res.data;
+});
+</script>
+
+<template>
+  <div class="box">
+    <el-button type="primary" @click="showRouteFlow">查看工艺路线</el-button>
+    <el-form :inline="true" :model="infoObj" class="demo-form-inline">
+      <el-form-item label="Approved by: ">
+        <span class="info-text" v-text="infoObj?.processRouteCode"></span>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.box {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+.info-text {
+  font-size: 14px;
+  color: #666;
+  font-weight: bold;
+}
+:deep(.el-form-item__label) {
+  color: rgba(0, 0, 0, 0.5);
+}
+</style>

src/views/flow/common/CheckTopInfos/utils/index.ts

@@ -0,0 +1,21 @@
+import request from "@/utils/request";
+
+// 获取基础工艺路线详情
+export function getRouteInfo(id: string) {
+  return request({
+    url: `/api/v1/op/route/get/${id}`,
+    method: "get",
+  });
+}
+
+export class DrawerTitleClass {
+  static routeFlowComService = "工艺流程审核";
+}
+
+export class TopTitleClass {
+  static routeFlowComService = "工艺信息";
+}
+
+export class ComponentNameClass {
+  static routeFlowComService = "RouteFlowComService";
+}

src/views/flow/common/LookFlowStep.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import {
+  getNextUser,
+  queryFlowDataList,
+  queryFlowRecord,
+  submitFlow,
+} from "@/api/flow";
+
+const dialogVisible = ref(false);
+const dialogTitle = ref("审核流程");
+
+const close = () => {
+  dialogVisible.value = false;
+};
+
+const recordList = ref<any[]>([]);
+const openFlowStepDrawer = (insId: string) => {
+  queryFlowRecord(insId).then((res) => {
+    recordList.value = res.data;
+  });
+  dialogVisible.value = true;
+};
+
+defineExpose({
+  openFlowStepDrawer,
+  close,
+});
+</script>
+
+<template>
+  <el-drawer
+    v-model="dialogVisible"
+    direction="rtl"
+    size="400"
+    append-to-body
+    destroy-on-close
+  >
+    <template #header>
+      <h4 v-text="dialogTitle"></h4>
+    </template>
+    <template #default>
+      <el-scrollbar>
+        <div class="check-container">
+          <el-timeline style="max-width: 600px">
+            <el-timeline-item
+              v-for="(activity, index) in recordList"
+              :key="index"
+              :timestamp="activity.timestamp"
+            >
+              {{ activity }}
+            </el-timeline-item>
+          </el-timeline>
+        </div>
+      </el-scrollbar>
+    </template>
+    <template #footer>
+      <!--      <div style="flex: auto">-->
+      <!--        <el-button @click="close">取消</el-button>-->
+      <!--        <el-button type="primary" @click="sureToSave">保存</el-button>-->
+      <!--      </div>-->
+    </template>
+  </el-drawer>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-drawer__header) {
+  margin: 0;
+}
+.check-container {
+  font-size: 14px;
+}
+</style>

src/views/flow/definition/com/edit.vue

@@ -173,14 +173,14 @@ const testGetCurrentData = () => {
         <el-form-item label="节点描述" prop="desc">
           <el-input v-model="formData.desc" type="textarea" />
         </el-form-item>
-        <el-form-item label="抄送人员" prop="copyUsers">
-          <el-tree-select
-            v-model="formData.copyUsers"
-            :data="usersOptions"
-            filterable
-            multiple
-          />
-        </el-form-item>
+        <!--        <el-form-item label="抄送人员" prop="copyUsers">-->
+        <!--          <el-tree-select-->
+        <!--            v-model="formData.copyUsers"-->
+        <!--            :data="usersOptions"-->
+        <!--            filterable-->
+        <!--            multiple-->
+        <!--          />-->
+        <!--        </el-form-item>-->
         <el-form-item label="人员类型" prop="userType">
           <el-select v-model="formData.userType" placeholder="请选择人员类型">
             <el-option
@@ -201,7 +201,6 @@ const testGetCurrentData = () => {
             v-model="formData.assignee"
             :data="usersOptions"
             filterable
-            multiple
           />
         </el-form-item>
         <el-form-item

src/views/flow/definition/index.vue

@@ -17,9 +17,9 @@
       @selection-change="selectionChange1"
     >
       <template #menu="{ size, row }">
-        <el-button icon="el-icon-setting" text type="primary" :size="size"
-          >编辑</el-button
-        >
+        <!--        <el-button icon="el-icon-setting" text type="primary" :size="size"-->
+        <!--          >编辑</el-button-->
+        <!--        >-->
         <el-button
           icon="el-icon-setting"
           text
@@ -61,7 +61,7 @@ option.value = Object.assign(option.value, {
   delBtn: false,
   selection: false,
   addBtn: true,
-  editBtn: false,
+  editBtn: true,
   viewBtn: false,
   column: [
     /*{

src/views/flow/todo/index.vue

@@ -15,6 +15,17 @@
       @size-change="dataList"
       @current-change="dataList"
     >
+      <template #menu="{ row }">
+        <el-button link icon="el-icon-copy-document" @click="showFlowSteps(row)"
+          >流程</el-button
+        >
+        <el-button
+          link
+          icon="el-icon-copy-document"
+          @click="showFlowDetail(row)"
+          >详情</el-button
+        >
+      </template>
     </avue-crud>
     <el-dialog
       v-model="dialog.visible"
@@ -22,15 +33,19 @@
       width="1250px"
       @close="dialog.visible = false"
     >
-
       <div class="dialog-footer" align="center">
         <el-button @click="dialog.visible = false">取消</el-button>
         <el-button type="primary" @click="printPage">--</el-button>
       </div>
     </el-dialog>
+
+    <LookFlowStep ref="LookFlowStepRef"></LookFlowStep>
+    <CheckFlow ref="CheckFlowRef" @finish="onCheckFinish"></CheckFlow>
   </div>
 </template>
 <script setup>
+import LookFlowStep from "@/views/flow/common/LookFlowStep.vue";
+import CheckFlow from "@/views/flow/common/CheckFlow.vue";
 import { ref, getCurrentInstance } from "vue";
 import { useCrud } from "@/hooks/userCrud";
 import { useCommonStoreHook } from "@/store";
@@ -89,18 +104,30 @@ option.value = Object.assign(option.value, {
       label: "审核状态",
       prop: "state",
       type: "select",
-      dicUrl:
-          dictDataUtil.request_url + "flow_state",
+      dicUrl: dictDataUtil.request_url + "flow_state",
       props: {
         label: "dictLabel",
         value: "dictValue",
       },
-    }
+    },
   ],
 });
 
 onMounted(() => {
-  search.value.state = "0"
+  search.value.state = "0";
   dataList();
 });
+
+const LookFlowStepRef = ref(null);
+const showFlowSteps = (row) => {
+  LookFlowStepRef.value && LookFlowStepRef.value.openFlowStepDrawer(row.insId);
+};
+
+const CheckFlowRef = ref(null);
+const showFlowDetail = (row) => {
+  CheckFlowRef.value && CheckFlowRef.value.openCheckDrawer(row);
+};
+const onCheckFinish = (value) => {
+  console.log(value);
+};
 </script>