From 89b5bf66dd8ceea5cb4b9538e1eefdb63018b8e1 Mon Sep 17 00:00:00 2001
From: gssong <1742057357@qq.com>
Date: Sat, 1 Jul 2023 11:16:49 +0800
Subject: [PATCH] =?UTF-8?q?add=20=E6=B7=BB=E5=8A=A0=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8B=EF=BC=8C=E6=B5=81=E7=A8=8B=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/workflow/processDefinition/types.ts   |   8 -
 src/views/workflow/model/index.vue            |   4 +-
 .../workflow/processDefinition/index.vue      | 239 +++++++++++------
 src/views/workflow/processInstance/index.vue  | 248 +++++++++++-------
 4 files changed, 314 insertions(+), 185 deletions(-)
 delete mode 100644 src/api/workflow/processDefinition/types.ts

diff --git a/src/api/workflow/processDefinition/types.ts b/src/api/workflow/processDefinition/types.ts
deleted file mode 100644
index dbf7cc5..0000000
--- a/src/api/workflow/processDefinition/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface processDefinitionForm {
-  businessKey: string;
-  processKey: string;
-}
-export interface processDefinitionQuery extends PageQuery {
-  name: string;
-  key: string;
-}
\ No newline at end of file
diff --git a/src/views/workflow/model/index.vue b/src/views/workflow/model/index.vue
index b5baaae..f4223e9 100644
--- a/src/views/workflow/model/index.vue
+++ b/src/views/workflow/model/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="p-2">
     <el-row :gutter="20">
-      <!-- 部门树 -->
+      <!-- 流程分类树 -->
       <el-col :lg="4" :xs="24" style="">
         <el-card shadow="hover">
           <el-input placeholder="请输入流程分类名" v-model="categoryName" prefix-icon="Search" clearable />
@@ -198,7 +198,6 @@ onMounted(() => {
 /** 节点单击事件 */
 const handleNodeClick = (data: ModelForm) => {
     queryParams.value.categoryCode = data.categoryCode;
-    console.log(data.categoryCode)
     if(data.categoryCode === 'ALL'){
         queryParams.value.categoryCode =''
     }
@@ -225,6 +224,7 @@ const handleQuery = () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value.resetFields();
+  queryParams.value.categoryCode = '';
   queryParams.value.pageNum = 1;
   queryParams.value.pageSize = 10;
   handleQuery();
diff --git a/src/views/workflow/processDefinition/index.vue b/src/views/workflow/processDefinition/index.vue
index 457a9f6..074f939 100644
--- a/src/views/workflow/processDefinition/index.vue
+++ b/src/views/workflow/processDefinition/index.vue
@@ -1,82 +1,109 @@
 <template>
   <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+    <el-row :gutter="20">
+      <!-- 流程分类树 -->
+      <el-col :lg="4" :xs="24" style="">
         <el-card shadow="hover">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch" label-width="120px">
-            <el-form-item label="流程定义名称" prop="name">
-              <el-input v-model="queryParams.name" placeholder="请输入流程定义名称" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="流程定义Key" prop="key">
-              <el-input v-model="queryParams.key" placeholder="请输入流程定义Key" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
+          <el-input placeholder="请输入流程分类名" v-model="categoryName" prefix-icon="Search" clearable />
+          <el-tree
+            class="mt-2"
+            ref="categoryTreeRef"
+            node-key="id"
+            :data="categoryOptions"
+            :props="{ label: 'categoryName', children: 'children' }"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            highlight-current
+            default-expand-all
+            @node-click="handleNodeClick"
+          ></el-tree>
         </el-card>
-      </div>
-    </transition>
-    <el-card shadow="hover">
-      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5"> </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-      </template>
-
-      <el-table v-loading="loading" :data="processDefinitionList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
-        <el-table-column fixed align="center" prop="name" label="流程定义名称"></el-table-column>
-        <el-table-column align="center" prop="key" label="标识Key"></el-table-column>
-        <el-table-column align="center" prop="version" label="版本号" width="90">
-          <template #default="scope"> v{{ scope.row.version }}.0</template>
-        </el-table-column>
-        <el-table-column align="center" prop="resourceName" label="流程XML" min-width="80" :show-overflow-tooltip="true">
-          <template #default="scope">
-            <el-link type="primary" @click="clickPreviewXML(scope.row.id)">{{ scope.row.resourceName }}</el-link>
-          </template>
-        </el-table-column>
-        <el-table-column align="center" prop="diagramResourceName" label="流程图片" min-width="80" :show-overflow-tooltip="true">
-          <template #default="scope">
-            <el-link type="primary" @click="clickPreviewImg(scope.row.id)">{{ scope.row.diagramResourceName }}</el-link>
-          </template>
-        </el-table-column>
-        <el-table-column align="center" prop="suspensionState" label="状态" min-width="70">
-          <template #default="scope">
-            <el-tag type="success" v-if="scope.row.suspensionState==1">激活</el-tag>
-            <el-tag type="danger" v-else>挂起</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column align="center" prop="deploymentTime" label="部署时间" :show-overflow-tooltip="true"></el-table-column>
-        <el-table-column fixed="right" label="操作" align="center" width="200" class-name="small-padding fixed-width">
-          <template #default="scope">
+      </el-col>
+      <el-col :lg="20" :xs="24">
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div class="mb-[10px]" v-show="showSearch">
+            <el-card shadow="hover">
+              <el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch" label-width="120px">
+                <el-form-item label="流程定义名称" prop="name">
+                  <el-input v-model="queryParams.name" placeholder="请输入流程定义名称" clearable @keyup.enter="handleQuery" />
+                </el-form-item>
+                <el-form-item label="流程定义Key" prop="key">
+                  <el-input v-model="queryParams.key" placeholder="请输入流程定义Key" clearable @keyup.enter="handleQuery" />
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                </el-form-item>
+              </el-form>
+            </el-card>
+          </div>
+        </transition>
+        <el-card shadow="hover">
+          <template #header>
             <el-row :gutter="10" class="mb8">
-              <el-col :span="1.5">
-                <el-button link type="primary" :icon="scope.row.suspensionState === 1?'Lock':'Unlock'" @click="handleProcessDefState(scope.row)">
-                  {{ scope.row.suspensionState === 1?"挂起流程":"激活流程" }}
-                </el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
-              </el-col>
-            </el-row>
-            <el-row :gutter="10" class="mb8">
-              <el-col :span="1.5">
-                <el-button link type="primary" icon="Sort" @click="handleConvertToModel(scope.row)"> 转换模型 </el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button link type="primary" icon="Pointer" @click="openHandleStartWorkFlow(scope.row)">启动流程</el-button>
-              </el-col>
+              <el-col :span="1.5"> </el-col>
+              <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
             </el-row>
           </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-card>
 
+          <el-table v-loading="loading" :data="processDefinitionList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
+            <el-table-column fixed align="center" prop="name" label="流程定义名称"></el-table-column>
+            <el-table-column align="center" prop="key" label="标识Key"></el-table-column>
+            <el-table-column align="center" prop="version" label="版本号" width="90">
+              <template #default="scope"> v{{ scope.row.version }}.0</template>
+            </el-table-column>
+            <el-table-column align="center" prop="resourceName" label="流程XML" min-width="80" :show-overflow-tooltip="true">
+              <template #default="scope">
+                <el-link type="primary" @click="clickPreviewXML(scope.row.id)">{{ scope.row.resourceName }}</el-link>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" prop="diagramResourceName" label="流程图片" min-width="80" :show-overflow-tooltip="true">
+              <template #default="scope">
+                <el-link type="primary" @click="clickPreviewImg(scope.row.id)">{{ scope.row.diagramResourceName }}</el-link>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" prop="suspensionState" label="状态" min-width="70">
+              <template #default="scope">
+                <el-tag type="success" v-if="scope.row.suspensionState==1">激活</el-tag>
+                <el-tag type="danger" v-else>挂起</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" prop="deploymentTime" label="部署时间" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column fixed="right" label="操作" align="center" width="200" class-name="small-padding fixed-width">
+              <template #default="scope">
+                <el-row :gutter="10" class="mb8">
+                  <el-col :span="1.5">
+                    <el-button link type="primary" :icon="scope.row.suspensionState === 1?'Lock':'Unlock'" @click="handleProcessDefState(scope.row)">
+                      {{ scope.row.suspensionState === 1?"挂起流程":"激活流程" }}
+                    </el-button>
+                  </el-col>
+                  <el-col :span="1.5">
+                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="10" class="mb8">
+                  <el-col :span="1.5">
+                    <el-button link type="primary" icon="Sort" @click="handleConvertToModel(scope.row)"> 转换模型 </el-button>
+                  </el-col>
+                  <el-col :span="1.5">
+                    <el-button link type="primary" icon="Pointer" @click="openHandleStartWorkFlow(scope.row)">启动流程</el-button>
+                  </el-col>
+                </el-row>
+              </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-card>
+      </el-col>
+    </el-row>
     <!-- 预览图片或xml -->
     <process-preview ref="previewRef" :url="url" :type="type" />
 
@@ -101,15 +128,23 @@ import {
   convertToModel
 } from '@/api/workflow/processDefinition';
 import { startWorkFlow, completeTask } from '@/api/workflow/task';
-import { processDefinitionQuery, processDefinitionForm } from '@/api/workflow/processDefinition/types';
 import { ComponentInternalInstance } from 'vue';
 import ProcessPreview from './components/processPreview.vue';
+import { listCategory } from '@/api/workflow/category';
+import { CategoryVO } from '@/api/workflow/category/types';
+import { ElTree } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const previewRef = ref<InstanceType<typeof ProcessPreview>>();
 const queryFormRef = ref(ElForm);
 
+type CategoryOption = {
+  categoryCode: string;
+  categoryName: string;
+  children?: CategoryOption[];
+};
+
 const loading = ref(true);
 const ids = ref<Array<string | number>>([]);
 const single = ref(true);
@@ -119,32 +154,61 @@ const total = ref(0);
 const processDefinitionList = ref<Record<string, any>>([]);
 const url = ref<Array<string>>([]);
 const type = ref<string>('');
-const variables = ref<string>('');
+const categoryOptions = ref<CategoryOption[]>([]);
+const categoryName = ref('');
+const categoryTreeRef = ref(ElTree);
 
 const dialog = reactive<DialogOption>({
   visible: false,
   title: '启动'
 });
 
-const submitFormData: processDefinitionForm = {
-  businessKey: '',
-  processKey: ''
-};
-
-const data = reactive<PageData<processDefinitionQuery, processDefinitionForm>>({
-  form: { ...submitFormData },
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    name: '',
-    key: ''
-  }
+// 查询参数
+const queryParams = ref<Record<string, any>>({
+  pageNum: 1,
+  pageSize: 10,
+  name: undefined,
+  key: undefined,
+  categoryCode: undefined
 });
-const { queryParams, form } = toRefs(data);
 
 onMounted(() => {
   getList();
+  getTreeselect();
 });
+
+/** 节点单击事件 */
+const handleNodeClick = (data: CategoryVO) => {
+  queryParams.value.categoryCode = data.categoryCode;
+  if (data.categoryCode === 'ALL') {
+    queryParams.value.categoryCode = '';
+  }
+  handleQuery();
+};
+/** 通过条件过滤节点  */
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.categoryName.indexOf(value) !== -1;
+};
+/** 根据名称筛选部门树 */
+watchEffect(
+  () => {
+    categoryTreeRef.value.filter(categoryName.value);
+  },
+  {
+    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+
+/** 查询流程分类下拉树结构 */
+const getTreeselect = async () => {
+  const res = await listCategory();
+  categoryOptions.value = [];
+  const data: CategoryOption = { categoryCode: 'ALL', categoryName: '顶级节点', children: [] };
+  data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId');
+  categoryOptions.value.push(data);
+};
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
@@ -153,6 +217,7 @@ const handleQuery = () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value.resetFields();
+  queryParams.value.categoryCode = '';
   queryParams.value.pageNum = 1;
   queryParams.value.pageSize = 10;
   handleQuery();
diff --git a/src/views/workflow/processInstance/index.vue b/src/views/workflow/processInstance/index.vue
index afcdf2b..b2493a7 100644
--- a/src/views/workflow/processInstance/index.vue
+++ b/src/views/workflow/processInstance/index.vue
@@ -1,99 +1,121 @@
 <template>
   <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]">
+    <el-row :gutter="20">
+      <!-- 流程分类树 -->
+      <el-col :lg="4" :xs="24" style="">
         <el-card shadow="hover">
-          <center>
-            <el-radio-group v-model="tab" @change="changeTab(tab)">
-              <el-radio-button label="running">运行中</el-radio-button>
-              <el-radio-button label="finish">已完成</el-radio-button>
-            </el-radio-group>
-          </center>
+          <el-input placeholder="请输入流程分类名" v-model="categoryName" prefix-icon="Search" clearable />
+          <el-tree
+            class="mt-2"
+            ref="categoryTreeRef"
+            node-key="id"
+            :data="categoryOptions"
+            :props="{ label: 'categoryName', children: 'children' }"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            highlight-current
+            default-expand-all
+            @node-click="handleNodeClick"
+          ></el-tree>
         </el-card>
-      </div>
-    </transition>
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+      </el-col>
+      <el-col :lg="20" :xs="24">
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div class="mb-[10px]">
+            <el-card shadow="hover">
+              <center>
+                <el-radio-group v-model="tab" @change="changeTab(tab)">
+                  <el-radio-button label="running">运行中</el-radio-button>
+                  <el-radio-button label="finish">已完成</el-radio-button>
+                </el-radio-group>
+              </center>
+            </el-card>
+          </div>
+        </transition>
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div class="mb-[10px]" v-show="showSearch">
+            <el-card shadow="hover">
+              <el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch" label-width="120px">
+                <el-form-item label="流程定义名称" prop="name">
+                  <el-input v-model="queryParams.name" placeholder="请输入流程定义名称" clearable @keyup.enter="handleQuery" />
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                </el-form-item>
+              </el-form>
+            </el-card>
+          </div>
+        </transition>
         <el-card shadow="hover">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch" label-width="120px">
-            <el-form-item label="流程定义名称" prop="name">
-              <el-input v-model="queryParams.name" placeholder="请输入流程定义名称" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
-      </div>
-    </transition>
-    <el-card shadow="hover">
-      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="handleQuery"></right-toolbar>
-        </el-row>
-      </template>
-
-      <el-table v-loading="loading" :data="processInstanceList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
-        <el-table-column fixed align="center" prop="id" label="id"></el-table-column>
-        <el-table-column fixed align="center" prop="processDefinitionName" label="流程定义名称"></el-table-column>
-        <el-table-column fixed align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
-        <el-table-column align="center" prop="processDefinitionVersion" label="版本号" width="90">
-          <template #default="scope"> v{{ scope.row.processDefinitionVersion }}.0</template>
-        </el-table-column>
-        <el-table-column align="center" prop="isSuspended" label="状态" min-width="70" v-if="tab === 'running'">
-          <template #default="scope">
-            <el-tag type="success" v-if="!scope.row.isSuspended">激活</el-tag>
-            <el-tag type="danger" v-else>挂起</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column align="center" prop="businessStatusName" label="流程状态" min-width="70">
-          <template #default="scope">
-            <el-tag type="success">{{scope.row.businessStatusName}}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column align="center" prop="startTime" label="启动时间" width="160"></el-table-column>
-        <el-table-column align="center" v-if="tab === 'finish'" prop="endTime" label="结束时间" width="160"></el-table-column>
-        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
-          <template #default="scope">
+          <template #header>
             <el-row :gutter="10" class="mb8">
               <el-col :span="1.5">
-                <el-button type="text" size="small" icon="el-icon-thumb" @click="handleApprovalRecord(scope.row)">审批记录</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="text" size="small" icon="el-icon-thumb" @click="handleDelete(scope.row)">删除</el-button>
-              </el-col>
-            </el-row>
-            <el-row :gutter="10" class="mb8" v-if="tab === 'running'">
-              <el-col :span="1.5">
-                <el-popover trigger="click" :ref="`popoverRef${scope.$index}`" placement="left" :width="300">
-                  <el-input resize="none" v-model="deleteReason" :rows="3" type="textarea" placeholder="请输入作废原因" />
-                  <div style="text-align: right; margin: 5px 0px 0px 0px">
-                    <el-button size="small" text @click="cancelPopover(scope.$index)">取消</el-button>
-                    <el-button size="small" type="primary" @click="handleInvalid(scope.row)">确认</el-button>
-                  </div>
-                  <template #reference>
-                    <el-button type="text" size="small" icon="el-icon-thumb">作废</el-button>
-                  </template>
-                </el-popover>
+                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
               </el-col>
+              <right-toolbar v-model:showSearch="showSearch" @queryTable="handleQuery"></right-toolbar>
             </el-row>
           </template>
-        </el-table-column>
-      </el-table>
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getProcessInstanceRunningList"
-      />
-    </el-card>
+
+          <el-table v-loading="loading" :data="processInstanceList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
+            <el-table-column fixed align="center" prop="id" label="id" v-if="false"></el-table-column>
+            <el-table-column fixed align="center" prop="processDefinitionName" label="流程定义名称"></el-table-column>
+            <el-table-column fixed align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
+            <el-table-column align="center" prop="processDefinitionVersion" label="版本号" width="90">
+              <template #default="scope"> v{{ scope.row.processDefinitionVersion }}.0</template>
+            </el-table-column>
+            <el-table-column align="center" prop="isSuspended" label="状态" min-width="70" v-if="tab === 'running'">
+              <template #default="scope">
+                <el-tag type="success" v-if="!scope.row.isSuspended">激活</el-tag>
+                <el-tag type="danger" v-else>挂起</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" prop="businessStatusName" label="流程状态" min-width="70">
+              <template #default="scope">
+                <el-tag type="success">{{scope.row.businessStatusName}}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" prop="startTime" label="启动时间" width="160"></el-table-column>
+            <el-table-column align="center" v-if="tab === 'finish'" prop="endTime" label="结束时间" width="160"></el-table-column>
+            <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+              <template #default="scope">
+                <el-row :gutter="10" class="mb8">
+                  <el-col :span="1.5">
+                    <el-button type="text" size="small" icon="el-icon-thumb" @click="handleApprovalRecord(scope.row)">审批记录</el-button>
+                  </el-col>
+                  <el-col :span="1.5">
+                    <el-button type="text" size="small" icon="el-icon-thumb" @click="handleDelete(scope.row)">删除</el-button>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="10" class="mb8" v-if="tab === 'running'">
+                  <el-col :span="1.5">
+                    <el-popover trigger="click" :ref="`popoverRef${scope.$index}`" placement="left" :width="300">
+                      <el-input resize="none" v-model="deleteReason" :rows="3" type="textarea" placeholder="请输入作废原因" />
+                      <div style="text-align: right; margin: 5px 0px 0px 0px">
+                        <el-button size="small" text @click="cancelPopover(scope.$index)">取消</el-button>
+                        <el-button size="small" type="primary" @click="handleInvalid(scope.row)">确认</el-button>
+                      </div>
+                      <template #reference>
+                        <el-button type="text" size="small" icon="el-icon-thumb">作废</el-button>
+                      </template>
+                    </el-popover>
+                  </el-col>
+                </el-row>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getProcessInstanceRunningList"
+          />
+        </el-card>
+      </el-col>
+    </el-row>
     <!-- 审批记录 -->
     <approvalRecord ref="approvalRecordRef" />
   </div>
@@ -109,9 +131,14 @@ import {
 } from '@/api/workflow/processInstance';
 import { ComponentInternalInstance } from 'vue';
 import ApprovalRecord from '@/components/Process/approvalRecord.vue';
+import { listCategory } from "@/api/workflow/category";
+import { ElTree } from 'element-plus';
+import { CategoryVO } from '@/api/workflow/category/types';
 //审批记录组件
 const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const queryFormRef = ref(ElForm);
+
 // 遮罩层
 const loading = ref(true);
 // 选中数组
@@ -126,7 +153,17 @@ const showSearch = ref(true);
 const total = ref(0);
 // 模型定义表格数据
 const processInstanceList = ref([]);
-const queryFormRef = ref(ElForm);
+
+const categoryOptions = ref<CategoryOption[]>([]);
+const categoryName = ref('');
+const categoryTreeRef = ref(ElTree);
+
+type CategoryOption = {
+  categoryCode: string;
+  categoryName: string;
+  children?: CategoryOption[];
+}
+
 const tab = ref('running');
 // 作废原因
 const deleteReason = ref('');
@@ -134,12 +171,46 @@ const deleteReason = ref('');
 const queryParams = ref<Record<string, any>>({
   pageNum: 1,
   pageSize: 10,
-  name: undefined
+  name: undefined,
+  categoryCode: undefined
 });
 
 onMounted(() => {
   getProcessInstanceRunningList();
+  getTreeselect();
 });
+
+
+/** 节点单击事件 */
+const handleNodeClick = (data: CategoryVO) => {
+    queryParams.value.categoryCode = data.categoryCode;
+    if(data.categoryCode === 'ALL'){
+        queryParams.value.categoryCode =''
+    }
+    handleQuery()
+}
+/** 通过条件过滤节点  */
+const filterNode = (value: string, data: any) => {
+    if (!value) return true
+    return data.categoryName.indexOf(value) !== -1
+}
+/** 根据名称筛选部门树 */
+watchEffect(
+    () => {categoryTreeRef.value.filter(categoryName.value);},
+    {
+        flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+    }
+);
+
+/** 查询流程分类下拉树结构 */
+const getTreeselect = async () => {
+  const res = await listCategory();
+  categoryOptions.value = [];
+  const data: CategoryOption = { categoryCode: 'ALL', categoryName: '顶级节点', children: [] };
+  data.children = proxy?.handleTree<CategoryOption>(res.data, "id", "parentId");
+  categoryOptions.value.push(data);
+}
+
 //审批记录
 const handleApprovalRecord = (row: any) => {
   if (approvalRecordRef.value) {
@@ -158,6 +229,7 @@ const handleQuery = () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value.resetFields();
+  queryParams.value.categoryCode = '';
   queryParams.value.pageNum = 1;
   queryParams.value.pageSize = 10;
   handleQuery();