diff --git a/src/api/workflow/category/types.ts b/src/api/workflow/category/types.ts
index a093073..99a53a6 100644
--- a/src/api/workflow/category/types.ts
+++ b/src/api/workflow/category/types.ts
@@ -6,7 +6,6 @@ export interface CategoryTreeVO {
   children: CategoryTreeVO[];
 }
 export interface CategoryVO {
-
   /**
    * 流程分类ID
    */
@@ -39,7 +38,6 @@ export interface CategoryVO {
 }
 
 export interface CategoryForm extends BaseEntity {
-
   /**
    * 流程分类ID
    */
@@ -59,14 +57,11 @@ export interface CategoryForm extends BaseEntity {
    * 显示顺序
    */
   orderNum?: number;
-
 }
 
 export interface CategoryQuery {
-
   /**
    * 流程分类名称
    */
   categoryName?: string;
-
 }
diff --git a/src/api/workflow/instance/index.ts b/src/api/workflow/instance/index.ts
index 42d748d..fde16a2 100644
--- a/src/api/workflow/instance/index.ts
+++ b/src/api/workflow/instance/index.ts
@@ -31,9 +31,9 @@ export const pageByFinish = (query: FlowInstanceQuery): AxiosPromise<FlowInstanc
 /**
  * 通过业务id获取历史流程图
  */
-export const flowImage = (businessId: string | number) => {
+export const flowHisTaskList = (businessId: string | number) => {
   return request({
-    url: `/workflow/instance/flowImage/${businessId}` + '?t' + Math.random(),
+    url: `/workflow/instance/flowHisTaskList/${businessId}` + '?t' + Math.random(),
     method: 'get'
   });
 };
diff --git a/src/api/workflow/task/index.ts b/src/api/workflow/task/index.ts
index 55ede45..6d515ec 100644
--- a/src/api/workflow/task/index.ts
+++ b/src/api/workflow/task/index.ts
@@ -178,3 +178,16 @@ export const currentTaskAllUser = (taskId: string | number) => {
     method: 'get'
   });
 };
+
+/**
+ * 获取下一节点写
+ * @param data参数
+ * @returns
+ */
+export const getNextNodeList = (data: any): any => {
+  return request({
+    url: '/workflow/task/getNextNodeList',
+    method: 'post',
+    data: data
+  });
+};
diff --git a/src/api/workflow/task/types.ts b/src/api/workflow/task/types.ts
index 8ea803b..8698eff 100644
--- a/src/api/workflow/task/types.ts
+++ b/src/api/workflow/task/types.ts
@@ -29,8 +29,14 @@ export interface FlowTaskVO {
   nodeType: number;
   nodeRatio: string | number;
   version?: string;
+  applyNode?: boolean;
+  buttonList?: buttonList[];
 }
 
+export interface buttonList {
+  code: string;
+  show: boolean;
+}
 export interface VariableVo {
   key: string;
   value: string;
diff --git a/src/views/project/contractorMaterial/component/contractorMaterialRecord.vue b/src/views/project/contractorMaterial/component/contractorMaterialRecord.vue
index 84685b1..7549cc4 100644
--- a/src/views/project/contractorMaterial/component/contractorMaterialRecord.vue
+++ b/src/views/project/contractorMaterial/component/contractorMaterialRecord.vue
@@ -22,7 +22,6 @@
         </el-card>
       </div>
     </transition>
-
     <el-card shadow="never">
       <template #header>
         <el-row :gutter="10" class="mb8">
@@ -213,7 +212,11 @@ const initFormData: ContractorMaterialRecordForm = {
   file: undefined,
   remark: undefined
 };
-const info = ref({});
+const info = ref({
+  contractorName: undefined,
+  materialName: undefined,
+  materialNumber: undefined
+});
 const activeName = '1';
 const data = reactive<PageData<ContractorMaterialRecordForm, ContractorMaterialRecordQuery>>({
   form: { ...initFormData },
diff --git a/src/views/project/contractorTool/component/LevanAutbound.vue b/src/views/project/contractorTool/component/LevanAutbound.vue
index 163330d..8c7b0aa 100644
--- a/src/views/project/contractorTool/component/LevanAutbound.vue
+++ b/src/views/project/contractorTool/component/LevanAutbound.vue
@@ -239,7 +239,12 @@ const initFormData: ContractorToolEntryForm = {
   recordType: undefined,
   recordNumber: undefined
 };
-const info = ref({});
+const info = ref({
+  contractorName:undefined,
+  toolNumber:undefined,
+  toolName:undefined,
+  toolModel:undefined
+});
 const data = reactive<PageData<ContractorToolEntryForm, ContractorToolEntryQuery>>({
   form: { ...initFormData },
   queryParams: {
diff --git a/src/views/workflow/category/index.vue b/src/views/workflow/category/index.vue
new file mode 100644
index 0000000..cd6984e
--- /dev/null
+++ b/src/views/workflow/category/index.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="search">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="分类名称" prop="categoryName">
+            <el-input v-model="queryParams.categoryName" 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>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['workflow:category:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+      <el-table
+        ref="categoryTableRef"
+        v-loading="loading"
+        :data="categoryList"
+        row-key="categoryId"
+        border
+        :default-expand-all="isExpandAll"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+        <el-table-column label="分类名称" prop="categoryName" width="260" />
+        <el-table-column label="显示顺序" align="center" prop="orderNum" width="200" />
+        <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
+        <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['workflow:category:edit']" />
+            </el-tooltip>
+            <el-tooltip content="新增" placement="top">
+              <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['workflow:category:add']" />
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['workflow:category:remove']" />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="categoryFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="上级分类" prop="parentId">
+          <el-tree-select
+            v-model="form.parentId"
+            :data="categoryOptions"
+            :props="{ value: 'categoryId', label: 'categoryName', children: 'children' } as any"
+            value-key="categoryId"
+            placeholder="请选择上级分类"
+            check-strictly
+          />
+        </el-form-item>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="分类名称" prop="categoryName">
+              <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="排序" prop="orderNum">
+              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Category" lang="ts">
+import { listCategory, getCategory, delCategory, addCategory, updateCategory } from '@/api/workflow/category';
+import { CategoryVO, CategoryQuery, CategoryForm } from '@/api/workflow/category/types';
+
+type CategoryOption = {
+  categoryId: number;
+  categoryName: string;
+  children?: CategoryOption[];
+};
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const categoryList = ref<CategoryVO[]>([]);
+const categoryOptions = ref<CategoryOption[]>([]);
+const buttonLoading = ref(false);
+const showSearch = ref(true);
+const isExpandAll = ref(true);
+const loading = ref(false);
+
+const queryFormRef = ref<ElFormInstance>();
+const categoryFormRef = ref<ElFormInstance>();
+const categoryTableRef = ref<ElTableInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const initFormData: CategoryForm = {
+  categoryId: undefined,
+  categoryName: '',
+  parentId: undefined,
+  orderNum: 0
+};
+
+const data = reactive<PageData<CategoryForm, CategoryQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    categoryName: undefined
+  },
+  rules: {
+    categoryId: [{ required: true, message: '流程分类ID不能为空', trigger: 'blur' }],
+    parentId: [{ required: true, message: '请选择上级分类', trigger: 'change' }],
+    categoryName: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询流程分类列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listCategory(queryParams.value);
+  const data = proxy?.handleTree<CategoryVO>(res.data, 'categoryId', 'parentId');
+  if (data) {
+    categoryList.value = data;
+    loading.value = false;
+  }
+};
+
+/** 查询流程分类下拉树结构 */
+const getTreeselect = async () => {
+  const res = await listCategory();
+  categoryOptions.value = [];
+  // 处理树形数据
+  const data = proxy?.handleTree<CategoryOption>(res.data, 'categoryId', 'parentId');
+  if (data) {
+    categoryOptions.value = data; // 将处理后的树形数据赋值
+  }
+};
+
+// 取消按钮
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+// 表单重置
+const reset = () => {
+  form.value = { ...initFormData };
+  categoryFormRef.value?.resetFields();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 新增按钮操作 */
+const handleAdd = (row?: CategoryVO) => {
+  reset();
+  getTreeselect();
+  if (row?.categoryId) {
+    form.value.parentId = row.categoryId;
+  } else {
+    form.value.parentId = undefined;
+  }
+  dialog.visible = true;
+  dialog.title = '添加流程分类';
+};
+
+/** 展开/折叠操作 */
+const handleToggleExpandAll = () => {
+  isExpandAll.value = !isExpandAll.value;
+  toggleExpandAll(categoryList.value, isExpandAll.value);
+};
+
+/** 展开/折叠操作 */
+const toggleExpandAll = (data: CategoryVO[], status: boolean) => {
+  data.forEach((item) => {
+    categoryTableRef.value?.toggleRowExpansion(item, status);
+    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
+  });
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row: CategoryVO) => {
+  reset();
+  await getTreeselect();
+  if (row != null) {
+    form.value.parentId = row.parentId;
+  }
+  const res = await getCategory(row.categoryId);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = '修改流程分类';
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  categoryFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.categoryId) {
+        await updateCategory(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addCategory(form.value).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row: CategoryVO) => {
+  await proxy?.$modal.confirm('是否确认删除"' + row.categoryName + '"的分类？');
+  loading.value = true;
+  await delCategory(row.categoryId).finally(() => (loading.value = false));
+  await getList();
+  proxy?.$modal.msgSuccess('删除成功');
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
diff --git a/src/views/workflow/leave/index.vue b/src/views/workflow/leave/index.vue
new file mode 100644
index 0000000..608cf05
--- /dev/null
+++ b/src/views/workflow/leave/index.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="search">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="请假天数" prop="startLeaveDays">
+            <el-input v-model="queryParams.startLeaveDays" placeholder="请输入请假天数" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item prop="endLeaveDays"> 至 </el-form-item>
+          <el-form-item prop="endLeaveDays">
+            <el-input v-model="queryParams.endLeaveDays" 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>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['workflow:leave:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['workflow:leave:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+          </el-col>
+          <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="leaveList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column v-if="false" label="主键" align="center" prop="id" />
+        <el-table-column label="请假类型" align="center">
+          <template #default="scope">
+            <el-tag>{{ options.find((e) => e.value === scope.row.leaveType)?.label }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="开始时间" align="center" prop="startDate">
+          <template #default="scope">
+            <span>{{ proxy.parseTime(scope.row.startDate, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="结束时间" align="center" prop="endDate">
+          <template #default="scope">
+            <span>{{ proxy.parseTime(scope.row.endDate, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="请假天数" align="center" prop="leaveDays" />
+        <el-table-column label="请假原因" align="center" prop="remark" />
+        <el-table-column align="center" label="流程状态" min-width="70">
+          <template #default="scope">
+            <dict-tag :options="wf_business_status" :value="scope.row.status"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="162">
+          <template #default="scope">
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5" v-if="scope.row.status === 'draft' || scope.row.status === 'cancel' || scope.row.status === 'back'">
+                <el-button v-hasPermi="['workflow:leave:edit']" size="small" type="primary" icon="Edit" @click="handleUpdate(scope.row)"
+                  >修改</el-button
+                >
+              </el-col>
+              <el-col :span="1.5" v-if="scope.row.status === 'draft' || scope.row.status === 'cancel' || scope.row.status === 'back'">
+                <el-button v-hasPermi="['workflow:leave:remove']" size="small" 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 type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
+              </el-col>
+              <el-col :span="1.5" v-if="scope.row.status === 'waiting'">
+                <el-button size="small" type="primary" icon="Notification" @click="handleCancelProcessApply(scope.row.id)">撤销</el-button>
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
+    </el-card>
+  </div>
+</template>
+
+<script setup name="Leave" lang="ts">
+import { delLeave, listLeave } from '@/api/workflow/leave';
+import { cancelProcessApply } from '@/api/workflow/instance';
+import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+const leaveList = ref<LeaveVO[]>([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const options = [
+  {
+    value: '1',
+    label: '事假'
+  },
+  {
+    value: '2',
+    label: '调休'
+  },
+  {
+    value: '3',
+    label: '病假'
+  },
+  {
+    value: '4',
+    label: '婚假'
+  }
+];
+
+const queryFormRef = ref<ElFormInstance>();
+
+const data = reactive<PageData<LeaveForm, LeaveQuery>>({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    startLeaveDays: undefined,
+    endLeaveDays: undefined
+  },
+  rules: {}
+});
+
+const { queryParams } = toRefs(data);
+
+/** 查询请假列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listLeave(queryParams.value);
+  leaveList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: LeaveVO[]) => {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.push({
+    path: `/workflow/leaveEdit/index`,
+    query: {
+      type: 'add'
+    }
+  });
+};
+
+/** 修改按钮操作 */
+const handleUpdate = (row?: LeaveVO) => {
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.push({
+    path: `/workflow/leaveEdit/index`,
+    query: {
+      id: row.id,
+      type: 'update'
+    }
+  });
+};
+
+/** 查看按钮操作 */
+const handleView = (row?: LeaveVO) => {
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.push({
+    path: `/workflow/leaveEdit/index`,
+    query: {
+      id: row.id,
+      type: 'view'
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: LeaveVO) => {
+  const _ids = row?.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除请假编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
+  await delLeave(_ids);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download(
+    'workflow/leave/export',
+    {
+      ...queryParams.value
+    },
+    `leave_${new Date().getTime()}.xlsx`
+  );
+};
+
+/** 撤销按钮操作 */
+const handleCancelProcessApply = async (id: string) => {
+  await proxy?.$modal.confirm('是否确认撤销当前单据？');
+  loading.value = true;
+  const data = {
+    businessId: id,
+    message: '申请人撤销流程！'
+  };
+  await cancelProcessApply(data).finally(() => (loading.value = false));
+  await getList();
+  proxy?.$modal.msgSuccess('撤销成功');
+};
+onMounted(() => {
+  getList();
+});
+</script>
diff --git a/src/views/workflow/leave/leaveEdit.vue b/src/views/workflow/leave/leaveEdit.vue
new file mode 100644
index 0000000..8e5bf62
--- /dev/null
+++ b/src/views/workflow/leave/leaveEdit.vue
@@ -0,0 +1,295 @@
+<template>
+  <div class="p-2">
+    <el-card shadow="never">
+      <approvalButton
+        @submitForm="submitForm"
+        @approvalVerifyOpen="approvalVerifyOpen"
+        @handleApprovalRecord="handleApprovalRecord"
+        :buttonLoading="buttonLoading"
+        :id="form.id"
+        :status="form.status"
+        :pageType="routeParams.type"
+      />
+    </el-card>
+    <el-card shadow="never" style="height: 78vh; overflow-y: auto">
+      <el-form ref="leaveFormRef" v-loading="loading" :disabled="routeParams.type === 'view'" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="请假类型" prop="leaveType">
+          <el-select v-model="form.leaveType" placeholder="请选择请假类型" style="width: 100%">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="请假时间" required>
+          <el-date-picker
+            v-model="leaveTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            range-separator="To"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+            @change="changeLeaveTime()"
+          />
+        </el-form-item>
+        <el-form-item label="请假天数" prop="leaveDays">
+          <el-input v-model="form.leaveDays" disabled type="number" placeholder="请输入请假天数" />
+        </el-form-item>
+        <el-form-item label="请假原因" prop="remark">
+          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入请假原因" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <!-- 提交组件 -->
+    <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
+    <!-- 审批记录 -->
+    <approvalRecord ref="approvalRecordRef" />
+    <el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title" :before-close="handleClose" width="500">
+      <el-select v-model="flowCode" placeholder="Select" style="width: 240px">
+        <el-option v-for="item in flowCodeOptions" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleClose">取消</el-button>
+          <el-button type="primary" @click="submitFlow()"> 确认 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Leave" lang="ts">
+import { addLeave, getLeave, updateLeave } from '@/api/workflow/leave';
+import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types';
+import { startWorkFlow } from '@/api/workflow/task';
+import SubmitVerify from '@/components/Process/submitVerify.vue';
+import ApprovalRecord from '@/components/Process/approvalRecord.vue';
+import ApprovalButton from '@/components/Process/approvalButton.vue';
+import { AxiosResponse } from 'axios';
+import { StartProcessBo } from '@/api/workflow/workflowCommon/types';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const buttonLoading = ref(false);
+const loading = ref(true);
+const leaveTime = ref<Array<string>>([]);
+//路由参数
+const routeParams = ref<Record<string, any>>({});
+const options = [
+  {
+    value: '1',
+    label: '事假'
+  },
+  {
+    value: '2',
+    label: '调休'
+  },
+  {
+    value: '3',
+    label: '病假'
+  },
+  {
+    value: '4',
+    label: '婚假'
+  }
+];
+const flowCodeOptions = [
+  {
+    value: 'leave1',
+    label: '请假申请-普通'
+  },
+  {
+    value: 'leave2',
+    label: '请假申请-排他网关'
+  },
+  {
+    value: 'leave3',
+    label: '请假申请-并行网关'
+  },
+  {
+    value: 'leave4',
+    label: '请假申请-会签'
+  },
+  {
+    value: 'leave5',
+    label: '请假申请-并行会签网关'
+  },
+  {
+    value: 'leave6',
+    label: '请假申请-排他并行会签'
+  }
+];
+
+const flowCode = ref<string>('');
+
+const dialogVisible = reactive<DialogOption>({
+  visible: false,
+  title: '流程定义'
+});
+//提交组件
+const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
+//审批记录组件
+const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
+//按钮组件
+const approvalButtonRef = ref<InstanceType<typeof ApprovalButton>>();
+
+const leaveFormRef = ref<ElFormInstance>();
+
+const submitFormData = ref<StartProcessBo>({
+  businessId: '',
+  flowCode: '',
+  variables: {}
+});
+const taskVariables = ref<Record<string, any>>({});
+
+const initFormData: LeaveForm = {
+  id: undefined,
+  leaveType: undefined,
+  startDate: undefined,
+  endDate: undefined,
+  leaveDays: undefined,
+  remark: undefined,
+  status: undefined
+};
+const data = reactive<PageData<LeaveForm, LeaveQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    startLeaveDays: undefined,
+    endLeaveDays: undefined
+  },
+  rules: {
+    id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
+    leaveType: [{ required: true, message: '请假类型不能为空', trigger: 'blur' }],
+    leaveTime: [{ required: true, message: '请假时间不能为空', trigger: 'blur' }],
+    leaveDays: [{ required: true, message: '请假天数不能为空', trigger: 'blur' }]
+  }
+});
+
+const handleClose = () => {
+  dialogVisible.visible = false;
+  flowCode.value = '';
+  buttonLoading.value = false;
+};
+const { form, rules } = toRefs(data);
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  leaveTime.value = [];
+  leaveFormRef.value?.resetFields();
+};
+
+const changeLeaveTime = () => {
+  const startDate = new Date(leaveTime.value[0]).getTime();
+  const endDate = new Date(leaveTime.value[1]).getTime();
+  const diffInMilliseconds = endDate - startDate;
+  form.value.leaveDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24)) + 1;
+};
+/** 获取详情 */
+const getInfo = () => {
+  loading.value = true;
+  buttonLoading.value = false;
+  nextTick(async () => {
+    const res = await getLeave(routeParams.value.id);
+    Object.assign(form.value, res.data);
+    leaveTime.value = [];
+    leaveTime.value.push(form.value.startDate);
+    leaveTime.value.push(form.value.endDate);
+    loading.value = false;
+    buttonLoading.value = false;
+  });
+};
+
+/** 提交按钮 */
+const submitForm = (status: string) => {
+  if (leaveTime.value.length === 0) {
+    proxy?.$modal.msgError('请假时间不能为空');
+    return;
+  }
+  try {
+    leaveFormRef.value?.validate(async (valid: boolean) => {
+      form.value.startDate = leaveTime.value[0];
+      form.value.endDate = leaveTime.value[1];
+      if (valid) {
+        buttonLoading.value = true;
+        let res: AxiosResponse<LeaveVO>;
+        if (form.value.id) {
+          res = await updateLeave(form.value).finally(() => (buttonLoading.value = false));
+        } else {
+          res = await addLeave(form.value).finally(() => (buttonLoading.value = false));
+        }
+        form.value = res.data;
+        if (status === 'draft') {
+          buttonLoading.value = false;
+          proxy?.$modal.msgSuccess('暂存成功');
+          proxy.$tab.closePage(proxy.$route);
+          proxy.$router.go(-1);
+        } else {
+          if ((form.value.status === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') {
+            flowCode.value = flowCodeOptions[0].value;
+            dialogVisible.visible = true;
+            return;
+          }
+          //说明启动过先随意穿个参数
+          if (flowCode.value === '' || flowCode.value === null) {
+            flowCode.value = 'xx';
+          }
+          await handleStartWorkFlow(res.data);
+        }
+      }
+    });
+  } finally {
+    buttonLoading.value = false;
+  }
+};
+
+const submitFlow = async () => {
+  handleStartWorkFlow(form.value);
+  dialogVisible.visible = false;
+};
+//提交申请
+const handleStartWorkFlow = async (data: LeaveForm) => {
+  try {
+    submitFormData.value.flowCode = flowCode.value;
+    submitFormData.value.businessId = data.id;
+    //流程变量
+    taskVariables.value = {
+      // leave2/6 使用的流程变量
+      leaveDays: data.leaveDays,
+      // leave4/5 使用的流程变量
+      userList: ['1', '3', '4']
+    };
+    submitFormData.value.variables = taskVariables.value;
+    const resp = await startWorkFlow(submitFormData.value);
+    if (submitVerifyRef.value) {
+      buttonLoading.value = false;
+      submitVerifyRef.value.openDialog(resp.data.taskId);
+    }
+  } finally {
+    buttonLoading.value = false;
+  }
+};
+//审批记录
+const handleApprovalRecord = () => {
+  approvalRecordRef.value.init(form.value.id);
+};
+//提交回调
+const submitCallback = async () => {
+  await proxy.$tab.closePage(proxy.$route);
+  proxy.$router.go(-1);
+};
+//审批
+const approvalVerifyOpen = async () => {
+  submitVerifyRef.value.openDialog(routeParams.value.taskId);
+};
+
+onMounted(() => {
+  nextTick(async () => {
+    routeParams.value = proxy.$route.query;
+    reset();
+    loading.value = false;
+    if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
+      getInfo();
+    }
+  });
+});
+</script>
diff --git a/src/views/workflow/processDefinition/design.vue b/src/views/workflow/processDefinition/design.vue
new file mode 100644
index 0000000..35b7da1
--- /dev/null
+++ b/src/views/workflow/processDefinition/design.vue
@@ -0,0 +1,46 @@
+<template>
+  <div ref="container" class="w-full h-[calc(100vh-88px)]">
+    <iframe ref="iframe" :src="iframeUrl" frameborder="0" height="100%" style="height: 100%; width: inherit"></iframe>
+  </div>
+</template>
+
+<script setup name="WarmFlow" lang="ts">
+const { proxy } = getCurrentInstance();
+import { onMounted } from 'vue';
+import { getToken } from '@/utils/auth';
+
+// definitionId为需要查询的流程定义id，
+// disabled为是否可编辑, 例如：查看的时候不可编辑，不可保存
+const iframeUrl = ref('');
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const iframeLoaded = () => {
+  // iframe监听组件内设计器保存事件
+  window.onmessage = (event) => {
+    switch (event.data.method) {
+      case 'close':
+        close();
+        break;
+    }
+  };
+};
+const open = async (definitionId, disabled) => {
+  const url = baseUrl + `/warm-flow-ui/index.html?id=${definitionId}&disabled=${disabled}`;
+  iframeUrl.value = url + '&Authorization=Bearer ' + getToken() + '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID;
+};
+/** 关闭按钮 */
+function close() {
+  const obj = { path: '/workflow/processDefinition', query: { activeName: proxy.$route.query.activeName } };
+  proxy.$tab.closeOpenPage(obj);
+}
+
+onMounted(() => {
+  iframeLoaded();
+  open(proxy.$route.query.definitionId, proxy.$route.query.disabled);
+});
+/**
+ * 对外暴露子组件方法
+ */
+defineExpose({
+  open
+});
+</script>
diff --git a/src/views/workflow/processDefinition/index.vue b/src/views/workflow/processDefinition/index.vue
new file mode 100644
index 0000000..1d4ca0c
--- /dev/null
+++ b/src/views/workflow/processDefinition/index.vue
@@ -0,0 +1,524 @@
+<template>
+  <div class="p-2">
+    <el-row :gutter="20">
+      <!-- 流程分类树 -->
+      <el-col :lg="4" :xs="24" style="">
+        <el-card shadow="hover">
+          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
+          <el-tree
+            ref="categoryTreeRef"
+            class="mt-2"
+            node-key="id"
+            :data="categoryOptions"
+            :props="{ label: 'label', children: 'children' } as any"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            highlight-current
+            default-expand-all
+            @node-click="handleNodeClick"
+          ></el-tree>
+        </el-card>
+      </el-col>
+      <el-col :lg="20" :xs="24">
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div v-show="showSearch" class="mb-[10px]">
+            <el-card shadow="hover">
+              <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px">
+                <el-form-item label="流程定义名称" prop="flowName">
+                  <el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" clearable @keyup.enter="handleQuery" />
+                </el-form-item>
+                <el-form-item label="流程定义编码" prop="flowCode">
+                  <el-input v-model="queryParams.flowCode" 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="primary" icon="Plus" @click="handleAdd()">添加</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="success" icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="danger" icon="Delete" :disabled="multiple" @click="handleDelete()">删除</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="primary" icon="UploadFilled" @click="uploadDialog.visible = true">部署流程文件</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="warning" icon="Download" :disabled="single" @click="handleExportDef">导出</el-button>
+              </el-col>
+              <right-toolbar v-model:show-search="showSearch" @query-table="handleQuery"></right-toolbar>
+            </el-row>
+          </template>
+          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+            <el-tab-pane label="已发布" name="0"></el-tab-pane>
+            <el-tab-pane label="未发布" name="1"></el-tab-pane>
+            <el-table v-loading="loading" border :data="processDefinitionList" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="55" align="center" />
+              <el-table-column align="center" prop="id" label="主键" v-if="false"></el-table-column>
+              <el-table-column align="center" prop="flowName" label="流程定义名称" :show-overflow-tooltip="true"></el-table-column>
+              <el-table-column align="center" prop="flowCode" label="标识KEY" :show-overflow-tooltip="true"></el-table-column>
+              <el-table-column align="center" prop="categoryName" label="流程分类" :show-overflow-tooltip="true"></el-table-column>
+              <el-table-column align="center" prop="version" label="版本号" width="80">
+                <template #default="scope"> v{{ scope.row.version }}.0</template>
+              </el-table-column>
+              <el-table-column align="center" prop="activityStatus" label="激活状态" width="130">
+                <template #default="scope">
+                  <el-switch
+                    v-model="scope.row.activityStatus"
+                    :active-value="1"
+                    :inactive-value="0"
+                    @change="(status) => handleProcessDefState(scope.row, status)"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column align="center" prop="isPublish" label="发布状态" width="100">
+                <template #default="scope">
+                  <el-tag v-if="scope.row.isPublish == 0" type="danger">未发布</el-tag>
+                  <el-tag v-else-if="scope.row.isPublish == 1" type="success">已发布</el-tag>
+                  <el-tag v-else type="danger">失效</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column fixed="right" label="操作" align="center" width="170" 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" size="small" icon="Delete" @click="handleDelete(scope.row)">删除流程</el-button>
+                    </el-col>
+                    <el-col :span="1.5">
+                      <el-button link type="primary" size="small" icon="CopyDocument" @click="handleCopyDef(scope.row)">复制流程</el-button>
+                    </el-col>
+                  </el-row>
+                  <el-row :gutter="10" class="mb8">
+                    <el-col :span="1.5">
+                      <el-button link type="primary" v-if="scope.row.isPublish === 0" icon="Pointer" size="small" @click="design(scope.row)"
+                        >流程设计</el-button
+                      >
+                      <el-button link type="primary" v-else icon="View" size="small" @click="designView(scope.row)">查看流程</el-button>
+                    </el-col>
+                    <el-col v-if="scope.row.isPublish !== 1" :span="1.5">
+                      <el-button link type="primary" size="small" icon="CircleCheck" @click="handlePublish(scope.row)">发布流程</el-button>
+                    </el-col>
+                  </el-row>
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              :total="total"
+              @pagination="getPageList"
+            />
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 部署文件 -->
+    <el-dialog v-if="uploadDialog.visible" v-model="uploadDialog.visible" :title="uploadDialog.title" width="30%">
+      <div v-loading="uploadDialogLoading">
+        <div class="mb5">
+          <el-text class="mx-1" size="large"><span class="text-danger">*</span>请选择部署流程分类：</el-text>
+          <el-tree-select
+            v-model="selectCategory"
+            :data="categoryOptions"
+            :props="{ value: 'id', label: 'label', children: 'children' } as any"
+            filterable
+            value-key="id"
+            :render-after-expand="false"
+            check-strictly
+            style="width: 240px"
+          />
+        </div>
+        <el-upload
+          class="upload-demo"
+          drag
+          multiple
+          accept="application/json,application/text"
+          :before-upload="handlerBeforeUpload"
+          :http-request="handlerImportDefinition"
+        >
+          <el-icon class="UploadFilled"><upload-filled /></el-icon>
+          <div class="el-upload__text"><em>点击上传，选择JSON流程文件</em></div>
+          <div class="el-upload__text">仅支持json格式文件</div>
+          <div class="el-upload__text">PS:如若部署请部署从本项目模型管理导出的数据</div>
+        </el-upload>
+      </div>
+    </el-dialog>
+
+    <!-- 新增/编辑流程定义 -->
+    <el-dialog v-model="modelDialog.visible" :title="modelDialog.title" width="650px" append-to-body :close-on-click-modal="false">
+      <template #footer>
+        <el-form ref="defFormRef" :model="form" :rules="rules" label-width="110px">
+          <el-form-item label="流程类别" prop="category">
+            <el-tree-select
+              v-model="form.category"
+              :data="categoryOptions"
+              :props="{ value: 'id', label: 'label', children: 'children' } as any"
+              filterable
+              value-key="id"
+              :render-after-expand="false"
+              check-strictly
+              style="width: 100%"
+            />
+          </el-form-item>
+          <el-form-item label="流程编码" prop="flowCode">
+            <el-input v-model="form.flowCode" placeholder="请输入流程编码" maxlength="40" show-word-limit />
+          </el-form-item>
+          <el-form-item label="流程名称" prop="flowName">
+            <el-input v-model="form.flowName" placeholder="请输入流程名称" maxlength="100" show-word-limit />
+          </el-form-item>
+          <el-form-item label="表单路径" prop="formPath">
+            <el-input v-model="form.formPath" placeholder="请输入表单路径" maxlength="100" show-word-limit />
+          </el-form-item>
+        </el-form>
+        <div class="dialog-footer">
+          <el-button @click="modelDialog.visible = false">取消</el-button>
+          <el-button type="primary" @click="handleSubmit">保存</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="processDefinition" lang="ts">
+import { listDefinition, deleteDefinition, active, importDef, unPublishList, publish, add, edit, getInfo, copy } from '@/api/workflow/definition';
+import { categoryTree } from '@/api/workflow/category';
+import { CategoryTreeVO } from '@/api/workflow/category/types';
+import { FlowDefinitionQuery, FlowDefinitionVo, FlowDefinitionForm } from '@/api/workflow/definition/types';
+import { UploadRequestOptions, TabsPaneContext } from 'element-plus';
+import { ElMessageBoxOptions } from 'element-plus/es/components/message-box/src/message-box.type';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const queryFormRef = ref<ElFormInstance>();
+const categoryTreeRef = ref<ElTreeInstance>();
+
+const loading = ref(true);
+const ids = ref<Array<any>>([]);
+const flowCodeList = ref<Array<any>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const uploadDialogLoading = ref(false);
+const processDefinitionList = ref<FlowDefinitionVo[]>([]);
+const categoryOptions = ref<CategoryTreeVO[]>([]);
+const categoryName = ref('');
+/** 部署文件分类选择 */
+const selectCategory = ref();
+const defFormRef = ref<ElFormInstance>();
+const activeName = ref('0');
+const uploadDialog = reactive<DialogOption>({
+  visible: false,
+  title: '部署流程文件'
+});
+
+const processDefinitionDialog = reactive<DialogOption>({
+  visible: false,
+  title: '历史版本'
+});
+
+const modelDialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+// 查询参数
+const queryParams = ref<FlowDefinitionQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  flowName: undefined,
+  flowCode: undefined,
+  category: undefined
+});
+const rules = {
+  category: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
+  flowName: [{ required: true, message: '流程定义名称不能为空', trigger: 'blur' }],
+  flowCode: [{ required: true, message: '流程定义编码不能为空', trigger: 'blur' }]
+};
+const initFormData: FlowDefinitionForm = {
+  id: '',
+  flowName: '',
+  flowCode: '',
+  category: '',
+  formPath: ''
+};
+//流程定义参数
+const form = ref<FlowDefinitionForm>({
+  id: '',
+  flowName: '',
+  flowCode: '',
+  category: '',
+  formPath: ''
+});
+onMounted(() => {
+  getPageList();
+  getTreeselect();
+});
+
+/** 节点单击事件 */
+const handleNodeClick = (data: CategoryTreeVO) => {
+  queryParams.value.category = data.id;
+  if (data.id === '0') {
+    queryParams.value.category = '';
+  }
+  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 categoryTree();
+  categoryOptions.value = res.data;
+};
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  // v-model处理有延迟 需要手动处理
+  activeName.value = tab.index;
+  handleQuery();
+};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  if (activeName.value === '0') {
+    getList();
+  } else {
+    getUnPublishList();
+  }
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.category = '';
+  queryParams.value.pageNum = 1;
+  queryParams.value.pageSize = 10;
+  handleQuery();
+};
+// 多选框选中数据
+const handleSelectionChange = (selection: any) => {
+  ids.value = selection.map((item: any) => item.id);
+  flowCodeList.value = selection.map((item: any) => item.flowCode);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+};
+//分页
+const getPageList = async () => {
+  const query = proxy.$route.query;
+  if (query.activeName) {
+    activeName.value = query.activeName;
+  }
+  if (activeName.value === '0') {
+    getList();
+  } else {
+    getUnPublishList();
+  }
+};
+//分页
+const getList = async () => {
+  loading.value = true;
+  const resp = await listDefinition(queryParams.value);
+  processDefinitionList.value = resp.rows;
+  total.value = resp.total;
+  loading.value = false;
+};
+//查询未发布的流程定义列表
+const getUnPublishList = async () => {
+  loading.value = true;
+  const resp = await unPublishList(queryParams.value);
+  processDefinitionList.value = resp.rows;
+  total.value = resp.total;
+  loading.value = false;
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: FlowDefinitionVo) => {
+  const id = row?.id || ids.value;
+  const defList = processDefinitionList.value.filter((x) => id.indexOf(x.id) != -1).map((x) => x.flowCode);
+  await proxy?.$modal.confirm('是否确认删除流程定义编码为【' + defList + '】的数据项？');
+  loading.value = true;
+  await deleteDefinition(id).finally(() => (loading.value = false));
+  await handleQuery();
+  proxy?.$modal.msgSuccess('删除成功');
+};
+
+/** 发布流程定义 */
+const handlePublish = async (row?: FlowDefinitionVo) => {
+  await proxy?.$modal.confirm(
+    '是否确认发布流程定义编码为【' + row.flowCode + '】版本为【' + row.version + '】的数据项？，发布后会将已发布流程定义改为失效！'
+  );
+  loading.value = true;
+  await publish(row.id).finally(() => (loading.value = false));
+  processDefinitionDialog.visible = false;
+  activeName.value = '0';
+  await handleQuery();
+  proxy?.$modal.msgSuccess('发布成功');
+};
+/** 挂起/激活 */
+const handleProcessDefState = async (row: FlowDefinitionVo, status: number | string | boolean) => {
+  let msg: string;
+  if (status === 0) {
+    msg = `暂停后，此流程下的所有任务都不允许往后流转，您确定挂起【${row.flowName || row.flowCode}】吗？`;
+  } else {
+    msg = `启动后，此流程下的所有任务都允许往后流转，您确定激活【${row.flowName || row.flowCode}】吗？`;
+  }
+  try {
+    loading.value = true;
+    await proxy?.$modal.confirm(msg);
+    await active(row.id, !!status);
+    await handleQuery();
+    proxy?.$modal.msgSuccess('操作成功');
+  } catch (error) {
+    row.activityStatus = status === 0 ? 1 : 0;
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+//上传文件前的钩子
+const handlerBeforeUpload = () => {
+  if (selectCategory.value === 'ALL') {
+    proxy?.$modal.msgError('顶级节点不可作为分类！');
+    return false;
+  }
+  if (!selectCategory.value) {
+    proxy?.$modal.msgError('请选择左侧要上传的分类！');
+    return false;
+  }
+};
+//部署文件
+const handlerImportDefinition = (data: UploadRequestOptions): XMLHttpRequest => {
+  const formData = new FormData();
+  uploadDialogLoading.value = true;
+  formData.append('file', data.file);
+  formData.append('category', selectCategory.value);
+  importDef(formData)
+    .then(() => {
+      uploadDialog.visible = false;
+      proxy?.$modal.msgSuccess('部署成功');
+      activeName.value = '1';
+      handleQuery();
+    })
+    .finally(() => {
+      uploadDialogLoading.value = false;
+    });
+  return;
+};
+/**
+ * 设计流程
+ * @param row
+ */
+const design = async (row: FlowDefinitionVo) => {
+  proxy.$router.push({
+    path: `/workflow/design/index`,
+    query: {
+      definitionId: row.id,
+      disabled: false,
+      activeName: activeName.value
+    }
+  });
+};
+
+/**
+ * 查看流程
+ * @param row
+ */
+const designView = async (row: FlowDefinitionVo) => {
+  proxy.$router.push({
+    path: `/workflow/design/index`,
+    query: {
+      definitionId: row.id,
+      disabled: true,
+      activeName: activeName.value
+    }
+  });
+};
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  defFormRef.value?.resetFields();
+};
+/**
+ * 新增
+ */
+const handleAdd = async () => {
+  reset();
+  if (queryParams.value.category != '') {
+    form.value.category = queryParams.value.category;
+  }
+  modelDialog.visible = true;
+  modelDialog.title = '新增流程';
+};
+/** 修改按钮操作 */
+const handleUpdate = async (row?: FlowDefinitionVo) => {
+  reset();
+  const id = row?.id || ids.value[0];
+  const res = await getInfo(id);
+  Object.assign(form.value, res.data);
+  modelDialog.visible = true;
+  modelDialog.title = '修改流程';
+};
+
+const handleSubmit = async () => {
+  defFormRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      loading.value = true;
+      if (form.value.id) {
+        await edit(form.value).finally(() => (loading.value = false));
+      } else {
+        await add(form.value).finally(() => (loading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      modelDialog.visible = false;
+      handleQuery();
+    }
+  });
+};
+//复制
+const handleCopyDef = async (row: FlowDefinitionVo) => {
+  ElMessageBox.confirm(`是否确认复制【${row.flowCode}】版本为【${row.version}】的流程定义！`, '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning'
+  } as ElMessageBoxOptions).then(() => {
+    loading.value = true;
+    copy(row.id)
+      .then((resp) => {
+        if (resp.code === 200) {
+          proxy?.$modal.msgSuccess('操作成功');
+          activeName.value = '1';
+          handleQuery();
+        }
+      })
+      .finally(() => (loading.value = false));
+  });
+};
+
+/** 导出按钮操作 */
+const handleExportDef = () => {
+  proxy?.download(`/workflow/definition/exportDef/${ids.value[0]}`, {}, `${flowCodeList.value[0]}.json`);
+};
+</script>
diff --git a/src/views/workflow/processInstance/index.vue b/src/views/workflow/processInstance/index.vue
new file mode 100644
index 0000000..3037147
--- /dev/null
+++ b/src/views/workflow/processInstance/index.vue
@@ -0,0 +1,421 @@
+<template>
+  <div class="p-2">
+    <el-row :gutter="20">
+      <!-- 流程分类树 -->
+      <el-col :lg="4" :xs="24" style="">
+        <el-card shadow="hover">
+          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
+          <el-tree
+            ref="categoryTreeRef"
+            class="mt-2"
+            node-key="id"
+            :data="categoryOptions"
+            :props="{ label: 'label', children: 'children' } as any"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            highlight-current
+            default-expand-all
+            @node-click="handleNodeClick"
+          ></el-tree>
+        </el-card>
+      </el-col>
+      <el-col :lg="20" :xs="24">
+        <!--        <div class="mb-[10px]">
+                  <el-card shadow="hover" class="text-center">
+                    <el-radio-group v-model="tab" @change="changeTab(tab)">
+                      <el-radio-button value="running">运行中</el-radio-button>
+                      <el-radio-button value="finish">已完成</el-radio-button>
+                    </el-radio-group>
+                  </el-card>
+                </div>-->
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div v-show="showSearch" class="mb-[10px]">
+            <el-card shadow="hover">
+              <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
+                <el-form-item>
+                  <el-badge :value="userSelectCount" :max="10" class="item">
+                    <el-button type="primary" @click="openUserSelect">选择申请人</el-button>
+                  </el-badge>
+                </el-form-item>
+                <el-form-item label="任务名称" prop="nodeName">
+                  <el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+                </el-form-item>
+                <el-form-item label="流程定义名称" label-width="100" prop="flowName">
+                  <el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+                </el-form-item>
+                <el-form-item label="流程定义编码" label-width="100" prop="flowCode">
+                  <el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @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:show-search="showSearch" @query-table="handleQuery"></right-toolbar>
+            </el-row>
+          </template>
+          <el-tabs v-model="tab" @tab-click="changeTab">
+            <el-tab-pane name="running" label="运行中"></el-tab-pane>
+            <el-tab-pane name="finish" label="已完成"></el-tab-pane>
+            <el-table v-loading="loading" border :data="processInstanceList" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="55" align="center" />
+              <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+              <el-table-column :show-overflow-tooltip="true" align="center" label="流程定义名称">
+                <template #default="scope">
+                  <span>{{ scope.row.flowName }}v{{ scope.row.version }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column align="center" prop="nodeName" label="任务名称"></el-table-column>
+              <el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column>
+              <el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
+              <el-table-column align="center" prop="createByName" label="申请人"></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 v-if="tab === 'running'" align="center" prop="isSuspended" label="状态" min-width="70">
+                <template #default="scope">
+                  <el-tag v-if="!scope.row.isSuspended" type="success">激活</el-tag>
+                  <el-tag v-else type="danger">挂起</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="流程状态" min-width="70">
+                <template #default="scope">
+                  <dict-tag :options="wf_business_status" :value="scope.row.flowStatus"></dict-tag>
+                </template>
+              </el-table-column>
+              <el-table-column align="center" prop="createTime" label="启动时间" width="160"></el-table-column>
+              <el-table-column v-if="tab === 'finish'" align="center" prop="updateTime" label="结束时间" width="160"></el-table-column>
+              <el-table-column label="操作" align="center" :width="165">
+                <template #default="scope">
+                  <el-row v-if="tab === 'running'" :gutter="10" class="mb8">
+                    <el-col :span="1.5">
+                      <el-popover :ref="`popoverRef${scope.$index}`" trigger="click" placement="left" :width="300">
+                        <el-input v-model="deleteReason" resize="none" :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="danger" size="small" icon="CircleClose">作废</el-button>
+                        </template>
+                      </el-popover>
+                    </el-col>
+                    <el-col :span="1.5">
+                      <el-button type="danger" size="small" 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 type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
+                    </el-col>
+                    <el-col :span="1.5">
+                      <el-button type="primary" size="small" icon="Document" @click="handleInstanceVariable(scope.row)"> 变量 </el-button>
+                    </el-col>
+                  </el-row>
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              :total="total"
+              @pagination="handleQuery"
+            />
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-dialog v-if="processDefinitionDialog.visible" v-model="processDefinitionDialog.visible" :title="processDefinitionDialog.title" width="70%">
+      <el-table v-loading="loading" :data="processDefinitionHistoryList">
+        <el-table-column fixed align="center" type="index" label="序号" width="60"></el-table-column>
+        <el-table-column fixed align="center" prop="name" label="流程定义名称"></el-table-column>
+        <el-table-column fixed align="center" prop="nodeName" 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="suspensionState" label="状态" min-width="70">
+          <template #default="scope">
+            <el-tag v-if="scope.row.suspensionState == 1" type="success">激活</el-tag>
+            <el-tag v-else type="danger">挂起</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="deploymentTime" label="部署时间" :show-overflow-tooltip="true"></el-table-column>
+      </el-table>
+    </el-dialog>
+    <!-- 流程变量开始 -->
+    <el-dialog v-model="variableVisible" draggable title="流程变量" width="60%" :close-on-click-modal="false">
+      <el-card v-loading="variableLoading" class="box-card">
+        <template #header>
+          <div class="clearfix">
+            <span
+              >流程定义名称：<el-tag>{{ processDefinitionName }}</el-tag></span
+            >
+          </div>
+        </template>
+        <div class="max-h-500px overflow-y-auto">
+          <VueJsonPretty :data="formatToJsonObject(variables)" />
+        </div>
+      </el-card>
+    </el-dialog>
+    <!-- 流程变量结束 -->
+
+    <!-- 申请人 -->
+    <UserSelect ref="userSelectRef" :multiple="true" :data="selectUserIds" @confirm-call-back="userSelectCallBack"></UserSelect>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { pageByRunning, pageByFinish, deleteByInstanceIds, instanceVariable, invalid } from '@/api/workflow/instance';
+import { categoryTree } from '@/api/workflow/category';
+import { CategoryTreeVO } from '@/api/workflow/category/types';
+import { FlowInstanceQuery, FlowInstanceVO } from '@/api/workflow/instance/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
+import UserSelect from '@/components/UserSelect/index.vue';
+//审批记录组件
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+const queryFormRef = ref<ElFormInstance>();
+const categoryTreeRef = ref<ElTreeInstance>();
+import { ref } from 'vue';
+import { UserVO } from '@/api/system/user/types';
+
+const userSelectRef = ref<InstanceType<typeof UserSelect>>();
+// 遮罩层
+const loading = ref(true);
+// 选中数组
+const ids = ref<Array<any>>([]);
+// 选中实例id数组
+const instanceIds = ref<Array<number | string>>([]);
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 总条数
+const total = ref(0);
+
+// 流程变量是否显示
+const variableVisible = ref(false);
+const variableLoading = ref(true);
+const variables = ref<string>('');
+//流程定义名称
+const processDefinitionName = ref();
+// 模型定义表格数据
+const processInstanceList = ref<FlowInstanceVO[]>([]);
+const processDefinitionHistoryList = ref<Array<any>>([]);
+const categoryOptions = ref<CategoryOption[]>([]);
+const categoryName = ref('');
+
+const processDefinitionDialog = reactive<DialogOption>({
+  visible: false,
+  title: '流程定义'
+});
+
+type CategoryOption = {
+  id: string;
+  categoryName: string;
+  children?: CategoryOption[];
+};
+
+const tab = ref('running');
+// 作废原因
+const deleteReason = ref('');
+
+//申请人id
+const selectUserIds = ref<Array<number | string>>([]);
+//申请人选择数量
+const userSelectCount = ref(0);
+// 查询参数
+const queryParams = ref<FlowInstanceQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  nodeName: undefined,
+  flowName: undefined,
+  flowCode: undefined,
+  createByIds: [],
+  category: undefined
+});
+
+/** 节点单击事件 */
+const handleNodeClick = (data: CategoryTreeVO) => {
+  queryParams.value.category = data.id;
+  if (data.id === '0') {
+    queryParams.value.category = '';
+  }
+  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 categoryTree();
+  categoryOptions.value = res.data;
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  if ('running' === tab.value) {
+    getProcessInstanceRunningList();
+  } else {
+    getProcessInstanceFinishList();
+  }
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.category = '';
+  queryParams.value.pageNum = 1;
+  queryParams.value.pageSize = 10;
+  queryParams.value.createByIds = [];
+  userSelectCount.value = 0;
+  handleQuery();
+};
+// 多选框选中数据
+const handleSelectionChange = (selection: FlowInstanceVO[]) => {
+  ids.value = selection.map((item: any) => item.id);
+  instanceIds.value = selection.map((item: FlowInstanceVO) => item.id);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+};
+//分页
+const getProcessInstanceRunningList = () => {
+  loading.value = true;
+  pageByRunning(queryParams.value).then((resp) => {
+    processInstanceList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+//分页
+const getProcessInstanceFinishList = () => {
+  loading.value = true;
+  pageByFinish(queryParams.value).then((resp) => {
+    processInstanceList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row: FlowInstanceVO) => {
+  const instanceIdList = row.id || instanceIds.value;
+  await proxy?.$modal.confirm('是否确认删除？');
+  loading.value = true;
+  if ('running' === tab.value) {
+    await deleteByInstanceIds(instanceIdList).finally(() => (loading.value = false));
+    getProcessInstanceRunningList();
+  } else {
+    await deleteByInstanceIds(instanceIdList).finally(() => (loading.value = false));
+    getProcessInstanceFinishList();
+  }
+  proxy?.$modal.msgSuccess('删除成功');
+};
+const changeTab = async (data: string) => {
+  processInstanceList.value = [];
+  queryParams.value.pageNum = 1;
+  if ('running' === data.paneName) {
+    getProcessInstanceRunningList();
+  } else {
+    getProcessInstanceFinishList();
+  }
+};
+/** 作废按钮操作 */
+const handleInvalid = async (row: FlowInstanceVO) => {
+  await proxy?.$modal.confirm('是否确认作废？');
+  loading.value = true;
+  if ('running' === tab.value) {
+    const param = {
+      id: row.id,
+      comment: deleteReason.value
+    };
+    await invalid(param).finally(() => (loading.value = false));
+    getProcessInstanceRunningList();
+    proxy?.$modal.msgSuccess('操作成功');
+  }
+};
+const cancelPopover = async (index: any) => {
+  (proxy?.$refs[`popoverRef${index}`] as any).hide(); //关闭弹窗
+};
+/** 查看按钮操作 */
+const handleView = (row) => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    businessId: row.businessId,
+    taskId: row.id,
+    type: 'view',
+    formCustom: row.formCustom,
+    formPath: row.formPath
+  });
+  workflowCommon.routerJump(routerJumpVo, proxy);
+};
+
+//查询流程变量
+const handleInstanceVariable = async (row: FlowInstanceVO) => {
+  variableLoading.value = true;
+  variableVisible.value = true;
+  processDefinitionName.value = row.flowName;
+  const data = await instanceVariable(row.id);
+  variables.value = data.data.variable;
+  variableLoading.value = false;
+};
+
+/**
+ * json转为对象
+ * @param data 原始数据
+ */
+function formatToJsonObject(data: string) {
+  try {
+    return JSON.parse(data);
+  } catch (error) {
+    return data;
+  }
+}
+
+//打开申请人选择
+const openUserSelect = () => {
+  userSelectRef.value.open();
+};
+//确认选择申请人
+const userSelectCallBack = (data: UserVO[]) => {
+  userSelectCount.value = 0;
+  selectUserIds.value = [];
+  queryParams.value.createByIds = [];
+
+  if (data && data.length > 0) {
+    userSelectCount.value = data.length;
+    selectUserIds.value = data.map((item) => item.userId);
+    queryParams.value.createByIds = selectUserIds.value;
+  }
+};
+onMounted(() => {
+  getProcessInstanceRunningList();
+  getTreeselect();
+});
+</script>
diff --git a/src/views/workflow/task/allTaskWaiting.vue b/src/views/workflow/task/allTaskWaiting.vue
new file mode 100644
index 0000000..9dc0c89
--- /dev/null
+++ b/src/views/workflow/task/allTaskWaiting.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item>
+              <el-badge :value="userSelectCount" :max="10" class="item">
+                <el-button type="primary" @click="openUserSelect">选择申请人</el-button>
+              </el-badge>
+            </el-form-item>
+            <el-form-item label="任务名称" prop="nodeName">
+              <el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="流程定义名称" label-width="100" prop="flowName">
+              <el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @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" v-if="tab === 'waiting'">
+            <el-button type="primary" plain icon="Edit" :disabled="multiple" @click="handleUpdate">修改办理人 </el-button>
+          </el-col>
+          <right-toolbar v-model:show-search="showSearch" @query-table="handleQuery"></right-toolbar>
+        </el-row>
+      </template>
+      <el-tabs v-model="tab" @tab-click="changeTab">
+        <el-tab-pane name="waiting" label="待办任务"> </el-tab-pane>
+        <el-tab-pane name="finish" label="已办任务"> </el-tab-pane>
+        <el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+          <el-table-column :show-overflow-tooltip="true" prop="flowName" align="center" label="流程定义名称"></el-table-column>
+          <el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column>
+          <el-table-column align="center" prop="categoryName" label="流程分类"></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="nodeName" label="任务名称"></el-table-column>
+          <el-table-column align="center" prop="createByName" label="申请人"></el-table-column>
+          <el-table-column align="center" label="办理人">
+            <template #default="scope">
+              <template v-if="tab === 'waiting'">
+                <template v-if="scope.row.assigneeNames">
+                  <el-tag v-for="(name, index) in scope.row.assigneeNames.split(',')" :key="index" type="success">
+                    {{ name }}
+                  </el-tag>
+                </template>
+                <template v-else>
+                  <el-tag type="success"> 无</el-tag>
+                </template>
+              </template>
+              <template v-else>
+                <el-tag type="success"> {{ scope.row.approveName }}</el-tag>
+              </template>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="流程状态" prop="flowStatus" min-width="70">
+            <template #default="scope">
+              <dict-tag :options="wf_business_status" :value="scope.row.flowStatus"></dict-tag>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="tab === 'finish'" align="center" label="任务状态" prop="flowTaskStatus" min-width="70">
+            <template #default="scope">
+              <dict-tag :options="wf_task_status" :value="scope.row.flowTaskStatus"></dict-tag>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="createTime" label="创建时间" width="160"></el-table-column>
+          <el-table-column label="操作" align="center" :width="tab === 'finish' ? '88' : '188'">
+            <template #default="scope">
+              <el-row :gutter="10" class="mb8">
+                <el-col :span="1.5" v-if="tab === 'waiting' || tab === 'finish'">
+                  <el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
+                </el-col>
+                <el-col :span="1.5" v-if="tab === 'waiting'">
+                  <el-button type="primary" size="small" icon="Setting" @click="handleMeddle(scope.row)">流程干预 </el-button>
+                </el-col>
+              </el-row>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="handleQuery"
+        />
+      </el-tabs>
+    </el-card>
+    <!-- 选人组件 -->
+    <UserSelect ref="userSelectRef" :multiple="false" @confirm-call-back="submitCallback"></UserSelect>
+    <!-- 流程干预组件 -->
+    <processMeddle ref="processMeddleRef" @submitCallback="getWaitingList"></processMeddle>
+    <!-- 申请人 -->
+    <UserSelect ref="applyUserSelectRef" :multiple="true" :data="selectUserIds" @confirm-call-back="userSelectCallBack"></UserSelect>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { pageByAllTaskWait, pageByAllTaskFinish, updateAssignee } from '@/api/workflow/task';
+import UserSelect from '@/components/UserSelect';
+import { TaskQuery } from '@/api/workflow/task/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import processMeddle from '@/components/Process/processMeddle';
+import { UserVO } from '@/api/system/user/types';
+import { TabsPaneContext } from 'element-plus';
+//选人组件
+const userSelectRef = ref<InstanceType<typeof UserSelect>>();
+//流程干预组件
+const processMeddleRef = ref<InstanceType<typeof processMeddle>>();
+//选人组件
+const applyUserSelectRef = ref<InstanceType<typeof UserSelect>>();
+const queryFormRef = ref<ElFormInstance>();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+const { wf_task_status } = toRefs<any>(proxy?.useDict('wf_task_status'));
+// 遮罩层
+const loading = ref(true);
+// 选中数组
+const ids = ref<Array<any>>([]);
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 总条数
+const total = ref(0);
+// 模型定义表格数据
+const taskList = ref([]);
+const title = ref('');
+//申请人id
+const selectUserIds = ref<Array<number | string>>([]);
+//申请人选择数量
+const userSelectCount = ref(0);
+// 查询参数
+const queryParams = ref<TaskQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  nodeName: undefined,
+  flowName: undefined,
+  flowCode: undefined,
+  createByIds: []
+});
+const tab = ref('waiting');
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  if ('waiting' === tab.value) {
+    getWaitingList();
+  } else {
+    getFinishList();
+  }
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.pageSize = 10;
+  queryParams.value.createByIds = [];
+  userSelectCount.value = 0;
+  selectUserIds.value = [];
+  handleQuery();
+};
+// 多选框选中数据
+const handleSelectionChange = (selection: any) => {
+  ids.value = selection.map((item: any) => item.id);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+};
+const changeTab = async (data: TabsPaneContext) => {
+  taskList.value = [];
+  queryParams.value.pageNum = 1;
+  if ('waiting' === data.paneName) {
+    getWaitingList();
+  } else {
+    getFinishList();
+  }
+};
+//分页
+const getWaitingList = () => {
+  loading.value = true;
+  pageByAllTaskWait(queryParams.value).then((resp) => {
+    taskList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+const getFinishList = () => {
+  loading.value = true;
+  pageByAllTaskFinish(queryParams.value).then((resp) => {
+    taskList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+//打开修改选人
+const handleUpdate = () => {
+  userSelectRef.value.open();
+};
+//修改办理人
+const submitCallback = async (data) => {
+  if (data && data.length > 0) {
+    await proxy?.$modal.confirm('是否确认提交？');
+    loading.value = true;
+    await updateAssignee(ids.value, data[0].userId);
+    handleQuery();
+    proxy?.$modal.msgSuccess('操作成功');
+  } else {
+    proxy?.$modal.msgWarning('请选择用户！');
+  }
+};
+/** 查看按钮操作 */
+const handleView = (row) => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    businessId: row.businessId,
+    taskId: row.id,
+    type: 'view',
+    formCustom: row.formCustom,
+    formPath: row.formPath,
+    instanceId: row.instanceId
+  });
+  workflowCommon.routerJump(routerJumpVo, proxy);
+};
+const handleMeddle = (row) => {
+  processMeddleRef.value.open(row.id);
+};
+//打开申请人选择
+const openUserSelect = () => {
+  applyUserSelectRef.value.open();
+};
+//确认选择申请人
+const userSelectCallBack = (data: UserVO[]) => {
+  userSelectCount.value = 0;
+  selectUserIds.value = [];
+  queryParams.value.createByIds = [];
+
+  if (data && data.length > 0) {
+    userSelectCount.value = data.length;
+    selectUserIds.value = data.map((item) => item.userId);
+    queryParams.value.createByIds = selectUserIds.value;
+  }
+};
+onMounted(() => {
+  getWaitingList();
+});
+</script>
diff --git a/src/views/workflow/task/myDocument.vue b/src/views/workflow/task/myDocument.vue
new file mode 100644
index 0000000..18f3c39
--- /dev/null
+++ b/src/views/workflow/task/myDocument.vue
@@ -0,0 +1,246 @@
+<template>
+  <div class="p-2">
+    <el-row :gutter="20">
+      <!-- 流程分类树 -->
+      <el-col :lg="4" :xs="24" style="">
+        <el-card shadow="hover">
+          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
+          <el-tree
+            ref="categoryTreeRef"
+            class="mt-2"
+            node-key="id"
+            :data="categoryOptions"
+            :props="{ label: 'label', children: 'children' } as any"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            highlight-current
+            default-expand-all
+            @node-click="handleNodeClick"
+          ></el-tree>
+        </el-card>
+      </el-col>
+      <el-col :lg="20" :xs="24">
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div v-show="showSearch" class="mb-[10px]">
+            <el-card shadow="hover">
+              <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px">
+                <el-form-item label="流程定义编码" prop="flowCode">
+                  <el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @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">
+              <right-toolbar v-model:show-search="showSearch" @query-table="handleQuery"></right-toolbar>
+            </el-row>
+          </template>
+
+          <el-table v-loading="loading" border :data="processInstanceList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+            <el-table-column v-if="false" align="center" prop="id" label="id"></el-table-column>
+            <el-table-column :show-overflow-tooltip="true" prop="flowName" align="center" label="流程定义名称"> </el-table-column>
+            <el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column>
+            <el-table-column align="center" prop="categoryName" label="流程分类"></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 v-if="tab === 'running'" align="center" prop="isSuspended" label="状态" min-width="70">
+              <template #default="scope">
+                <el-tag v-if="!scope.row.isSuspended" type="success">激活</el-tag>
+                <el-tag v-else type="danger">挂起</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="流程状态" min-width="70">
+              <template #default="scope">
+                <dict-tag :options="wf_business_status" :value="scope.row.flowStatus"></dict-tag>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" prop="createTime" label="启动时间" width="160"></el-table-column>
+            <el-table-column label="操作" align="center" width="162">
+              <template #default="scope">
+                <el-row :gutter="10" class="mb8">
+                  <el-col :span="1.5" v-if="scope.row.flowStatus === 'draft' || scope.row.flowStatus === 'cancel' || scope.row.flowStatus === 'back'">
+                    <el-button type="primary" size="small" icon="Edit" @click="handleOpen(scope.row, 'update')">编辑</el-button>
+                  </el-col>
+                  <el-col :span="1.5" v-if="scope.row.flowStatus === 'draft' || scope.row.flowStatus === 'cancel' || scope.row.flowStatus === 'back'">
+                    <el-button type="primary" size="small" 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 type="primary" size="small" icon="View" @click="handleOpen(scope.row, 'view')">查看</el-button>
+                  </el-col>
+                  <el-col :span="1.5" v-if="scope.row.flowStatus === 'waiting'">
+                    <el-button type="primary" size="small" icon="Notification" @click="handleCancelProcessApply(scope.row.businessId)"
+                      >撤销</el-button
+                    >
+                  </el-col>
+                </el-row>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination
+            v-show="total > 0"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            :total="total"
+            @pagination="getList"
+          />
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- 提交组件 -->
+    <submitVerify ref="submitVerifyRef" @submit-callback="getList" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { pageByCurrent, deleteByInstanceIds, cancelProcessApply } from '@/api/workflow/instance';
+import { categoryTree } from '@/api/workflow/category';
+import { CategoryTreeVO } from '@/api/workflow/category/types';
+import { FlowInstanceQuery, FlowInstanceVO } from '@/api/workflow/instance/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+const queryFormRef = ref<ElFormInstance>();
+const categoryTreeRef = ref<ElTreeInstance>();
+
+// 遮罩层
+const loading = ref(true);
+// 选中数组
+const businessIds = ref<Array<number | string>>([]);
+const instanceIds = ref<Array<number | string>>([]);
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 总条数
+const total = ref(0);
+// 模型定义表格数据
+const processInstanceList = ref<FlowInstanceVO[]>([]);
+
+const categoryOptions = ref<CategoryTreeVO[]>([]);
+const categoryName = ref('');
+
+const tab = ref('running');
+// 查询参数
+const queryParams = ref<FlowInstanceQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  flowCode: undefined,
+  category: undefined
+});
+
+onMounted(() => {
+  getList();
+  getTreeselect();
+});
+
+/** 节点单击事件 */
+const handleNodeClick = (data: CategoryTreeVO) => {
+  queryParams.value.category = data.id;
+  if (data.id === '0') {
+    queryParams.value.category = '';
+  }
+  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 categoryTree();
+  categoryOptions.value = res.data;
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.category = '';
+  queryParams.value.pageNum = 1;
+  queryParams.value.pageSize = 10;
+  handleQuery();
+};
+// 多选框选中数据
+const handleSelectionChange = (selection: FlowInstanceVO[]) => {
+  businessIds.value = selection.map((item: any) => item.businessId);
+  instanceIds.value = selection.map((item: FlowInstanceVO) => item.id);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+};
+//分页
+const getList = () => {
+  loading.value = true;
+  pageByCurrent(queryParams.value).then((resp) => {
+    processInstanceList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row: FlowInstanceVO) => {
+  const instanceIdList = row.id || instanceIds.value;
+  await proxy?.$modal.confirm('是否确认删除？');
+  loading.value = true;
+  if ('running' === tab.value) {
+    await deleteByInstanceIds(instanceIdList).finally(() => (loading.value = false));
+    getList();
+  }
+  proxy?.$modal.msgSuccess('删除成功');
+};
+
+/** 撤销按钮操作 */
+const handleCancelProcessApply = async (businessId: string) => {
+  await proxy?.$modal.confirm('是否确认撤销当前单据？');
+  loading.value = true;
+  if ('running' === tab.value) {
+    const data = {
+      businessId: businessId,
+      message: '申请人撤销流程！'
+    };
+    await cancelProcessApply(data).finally(() => (loading.value = false));
+    getList();
+  }
+  proxy?.$modal.msgSuccess('撤销成功');
+};
+
+//办理
+const handleOpen = async (row, type) => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    businessId: row.businessId,
+    taskId: row.id,
+    type: type,
+    formCustom: row.formCustom,
+    formPath: row.formPath
+  });
+  workflowCommon.routerJump(routerJumpVo, proxy);
+};
+</script>
diff --git a/src/views/workflow/task/taskCopyList.vue b/src/views/workflow/task/taskCopyList.vue
new file mode 100644
index 0000000..673960f
--- /dev/null
+++ b/src/views/workflow/task/taskCopyList.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="任务名称" prop="nodeName">
+              <el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="流程定义名称" label-width="100" prop="flowName">
+              <el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="流程定义编码" label-width="100" prop="flowCode">
+              <el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @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">
+          <right-toolbar v-model:show-search="showSearch" @query-table="handleQuery"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+        <el-table-column :show-overflow-tooltip="true" prop="flowName" align="center" label="流程定义名称"></el-table-column>
+        <el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column>
+        <el-table-column align="center" prop="categoryName" label="流程分类"></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="nodeName" label="任务名称"></el-table-column>
+        <el-table-column align="center" label="流程状态" min-width="70">
+          <template #default="scope">
+            <dict-tag :options="wf_business_status" :value="scope.row.flowStatus"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="200">
+          <template #default="scope">
+            <el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="handleQuery"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { pageByTaskCopy } from '@/api/workflow/task';
+import { TaskQuery } from '@/api/workflow/task/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+//审批记录组件
+const queryFormRef = ref<ElFormInstance>();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+// 遮罩层
+const loading = ref(true);
+// 选中数组
+const ids = ref<Array<any>>([]);
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 总条数
+const total = ref(0);
+// 模型定义表格数据
+const taskList = ref([]);
+// 查询参数
+const queryParams = ref<TaskQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  nodeName: undefined,
+  flowName: undefined,
+  flowCode: undefined
+});
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getTaskCopyList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.pageSize = 10;
+  handleQuery();
+};
+// 多选框选中数据
+const handleSelectionChange = (selection: any) => {
+  ids.value = selection.map((item: any) => item.id);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+};
+//分页
+const getTaskCopyList = () => {
+  loading.value = true;
+  pageByTaskCopy(queryParams.value).then((resp) => {
+    taskList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+
+/** 查看按钮操作 */
+const handleView = (row) => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    businessId: row.businessId,
+    taskId: row.id,
+    type: 'view',
+    formCustom: row.formCustom,
+    formPath: row.formPath
+  });
+  workflowCommon.routerJump(routerJumpVo, proxy);
+};
+
+onMounted(() => {
+  getTaskCopyList();
+});
+</script>
diff --git a/src/views/workflow/task/taskFinish.vue b/src/views/workflow/task/taskFinish.vue
new file mode 100644
index 0000000..130cce9
--- /dev/null
+++ b/src/views/workflow/task/taskFinish.vue
@@ -0,0 +1,184 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item>
+              <el-badge :value="userSelectCount" :max="10" class="item">
+                <el-button type="primary" @click="openUserSelect">选择申请人</el-button>
+              </el-badge>
+            </el-form-item>
+            <el-form-item label="任务名称" prop="nodeName">
+              <el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="流程定义名称" label-width="100" prop="flowName">
+              <el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="流程定义编码" label-width="100" prop="flowCode">
+              <el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @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">
+          <right-toolbar v-model:show-search="showSearch" @query-table="handleQuery"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+        <el-table-column align="center" prop="flowName" label="流程定义名称"></el-table-column>
+        <el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column>
+        <el-table-column align="center" prop="categoryName" label="流程分类"></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="nodeName" label="任务名称"></el-table-column>
+        <el-table-column align="center" prop="createByName" label="申请人"></el-table-column>
+        <el-table-column align="center" prop="approverName" label="办理人">
+          <template #default="scope">
+            <el-tag type="success">
+              {{ scope.row.approveName || '无' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="流程状态" prop="flowStatus" min-width="70">
+          <template #default="scope">
+            <dict-tag :options="wf_business_status" :value="scope.row.flowStatus"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="任务状态" prop="flowTaskStatus" min-width="70">
+          <template #default="scope">
+            <dict-tag :options="wf_task_status" :value="scope.row.flowTaskStatus"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="createTime" label="创建时间" width="160"></el-table-column>
+        <el-table-column label="操作" align="center" width="200">
+          <template #default="scope">
+            <el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="handleQuery"
+      />
+    </el-card>
+    <!-- 申请人 -->
+    <UserSelect ref="userSelectRef" :multiple="true" :data="selectUserIds" @confirm-call-back="userSelectCallBack"></UserSelect>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { pageByTaskFinish } from '@/api/workflow/task';
+import { TaskQuery, FlowTaskVO } from '@/api/workflow/task/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+//审批记录组件
+const queryFormRef = ref<ElFormInstance>();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+const { wf_task_status } = toRefs<any>(proxy?.useDict('wf_task_status'));
+import UserSelect from '@/components/UserSelect';
+import { ref } from 'vue';
+import { UserVO } from '@/api/system/user/types';
+
+const userSelectRef = ref<InstanceType<typeof UserSelect>>();
+// 遮罩层
+const loading = ref(true);
+// 选中数组
+const ids = ref<Array<any>>([]);
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 总条数
+const total = ref(0);
+// 模型定义表格数据
+const taskList = ref([]);
+// 查询参数
+const queryParams = ref<TaskQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  nodeName: undefined,
+  flowName: undefined,
+  flowCode: undefined,
+  createByIds: []
+});
+//申请人id
+const selectUserIds = ref<Array<number | string>>([]);
+//申请人选择数量
+const userSelectCount = ref(0);
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getFinishList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.pageSize = 10;
+  queryParams.value.createByIds = [];
+  userSelectCount.value = 0;
+  selectUserIds.value = [];
+  handleQuery();
+};
+// 多选框选中数据
+const handleSelectionChange = (selection: any) => {
+  ids.value = selection.map((item: any) => item.id);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+};
+const getFinishList = () => {
+  loading.value = true;
+  pageByTaskFinish(queryParams.value).then((resp) => {
+    taskList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+/** 查看按钮操作 */
+const handleView = (row: FlowTaskVO) => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    businessId: row.businessId,
+    taskId: row.id,
+    type: 'view',
+    formCustom: row.formCustom,
+    formPath: row.formPath
+  });
+  workflowCommon.routerJump(routerJumpVo, proxy);
+};
+//打开申请人选择
+const openUserSelect = () => {
+  userSelectRef.value.open();
+};
+//确认选择申请人
+const userSelectCallBack = (data: UserVO[]) => {
+  userSelectCount.value = 0;
+  selectUserIds.value = [];
+  queryParams.value.createByIds = [];
+
+  if (data && data.length > 0) {
+    userSelectCount.value = data.length;
+    selectUserIds.value = data.map((item) => item.userId);
+    queryParams.value.createByIds = selectUserIds.value;
+  }
+};
+onMounted(() => {
+  getFinishList();
+});
+</script>
diff --git a/src/views/workflow/task/taskWaiting.vue b/src/views/workflow/task/taskWaiting.vue
new file mode 100644
index 0000000..c4b9267
--- /dev/null
+++ b/src/views/workflow/task/taskWaiting.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item>
+              <el-badge :value="userSelectCount" :max="10" class="item">
+                <el-button type="primary" @click="openUserSelect">选择申请人</el-button>
+              </el-badge>
+            </el-form-item>
+            <el-form-item label="任务名称" prop="nodeName">
+              <el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="流程定义名称" label-width="100" prop="flowName">
+              <el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="流程定义编码" label-width="100" prop="flowCode">
+              <el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @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">
+          <right-toolbar v-model:show-search="showSearch" @query-table="handleQuery"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+        <el-table-column :show-overflow-tooltip="true" prop="flowName" align="center" label="流程定义名称"></el-table-column>
+        <el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column>
+        <el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
+        <el-table-column align="center" prop="nodeName" label="任务名称"></el-table-column>
+        <el-table-column align="center" prop="createByName" label="申请人"></el-table-column>
+        <el-table-column align="center" label="办理人">
+          <template #default="scope">
+            <template v-if="scope.row.assigneeNames">
+              <el-tag v-for="(name, index) in scope.row.assigneeNames.split(',')" :key="index" type="success">
+                {{ name }}
+              </el-tag>
+            </template>
+            <template v-else>
+              <el-tag type="success"> 无</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="流程状态" prop="flowStatusName" min-width="70">
+          <template #default="scope">
+            <dict-tag :options="wf_business_status" :value="scope.row.flowStatus"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="createTime" label="创建时间" width="160"></el-table-column>
+        <el-table-column label="操作" align="center" width="200">
+          <template #default="scope">
+            <el-button type="primary" size="small" icon="Edit" @click="handleOpen(scope.row)">办理</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="handleQuery"
+      />
+    </el-card>
+    <!-- 申请人 -->
+    <UserSelect ref="userSelectRef" :multiple="true" :data="selectUserIds" @confirm-call-back="userSelectCallBack"></UserSelect>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { pageByTaskWait } from '@/api/workflow/task';
+import { TaskQuery, FlowTaskVO } from '@/api/workflow/task/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+import UserSelect from '@/components/UserSelect';
+import { ref } from 'vue';
+import { UserVO } from '@/api/system/user/types';
+
+const userSelectRef = ref<InstanceType<typeof UserSelect>>();
+//提交组件
+const queryFormRef = ref<ElFormInstance>();
+// 遮罩层
+const loading = ref(true);
+// 选中数组
+const ids = ref<Array<any>>([]);
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 总条数
+const total = ref(0);
+// 模型定义表格数据
+const taskList = ref([]);
+
+//申请人id
+const selectUserIds = ref<Array<number | string>>([]);
+//申请人选择数量
+const userSelectCount = ref(0);
+// 查询参数
+const queryParams = ref<TaskQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  nodeName: undefined,
+  flowName: undefined,
+  flowCode: undefined,
+  createByIds: []
+});
+onMounted(() => {
+  getWaitingList();
+});
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getWaitingList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.pageSize = 10;
+  queryParams.value.createByIds = [];
+  userSelectCount.value = 0;
+  selectUserIds.value = [];
+  handleQuery();
+};
+// 多选框选中数据
+const handleSelectionChange = (selection: any) => {
+  ids.value = selection.map((item: any) => item.id);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+};
+//分页
+const getWaitingList = () => {
+  loading.value = true;
+  pageByTaskWait(queryParams.value).then((resp) => {
+    taskList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+//办理
+const handleOpen = async (row: FlowTaskVO) => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    businessId: row.businessId,
+    taskId: row.id,
+    type: 'approval',
+    formCustom: row.formCustom,
+    formPath: row.formPath
+  });
+  workflowCommon.routerJump(routerJumpVo, proxy);
+};
+//打开申请人选择
+const openUserSelect = () => {
+  userSelectRef.value.open();
+};
+//确认选择申请人
+const userSelectCallBack = (data: UserVO[]) => {
+  userSelectCount.value = 0;
+  selectUserIds.value = [];
+  queryParams.value.createByIds = [];
+
+  if (data && data.length > 0) {
+    userSelectCount.value = data.length;
+    selectUserIds.value = data.map((item) => item.userId);
+    queryParams.value.createByIds = selectUserIds.value;
+  }
+};
+</script>