add 添加流程定义列表，添加流程图，xml预览，添加简单流程启动，办理

src/api/workflow/processDefinition/index.ts

@@ -0,0 +1,74 @@
+import request from '@/utils/request';
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+import { getToken } from '@/utils/auth';
+
+/**
+ * 获取审批记录
+ * @param processInstanceId 流程实例id
+ * @returns
+ */
+export const listProcessDefinition = (query: object) => {
+  return request({
+    url: `/workflow/processDefinition/list`,
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 通过流程定义id获取流程图
+ */
+export const processDefinitionImage = (processDefinitionId: string) => {
+  return baseUrl + `/workflow/processDefinition/processDefinitionImage/${processDefinitionId}` + '?Authorization=Bearer ' + getToken() + '&t' + Math.random()
+};
+
+/**
+ * 通过流程定义id获取xml
+ * @param processDefinitionId 流程定义id
+ * @returns
+ */
+export const processDefinitionXml = (processDefinitionId: string) => {
+  return request({
+    url: `/workflow/processDefinition/processDefinitionXml/${processDefinitionId}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 删除流程定义
+ * @param processDefinitionId 流程定义id
+ * @param deploymentId 部署id
+ * @returns
+ */
+export const deleteProcessDefinition = (deploymentId: string, processDefinitionId: string) => {
+  return request({
+    url: `/workflow/processDefinition/${deploymentId}/${processDefinitionId}`,
+    method: 'delete'
+  });
+};
+
+/**
+ * 挂起/激活
+ * @param processDefinitionId 流程定义id
+ * @returns
+ */
+export const updateProcessDefState = (processDefinitionId: string) => {
+  return request({
+    url: `/workflow/processDefinition/updateProcessDefState/${processDefinitionId}`,
+    method: 'put'
+  });
+};
+
+/**
+ * 流程定义转换为模型
+ * @param processDefinitionId 流程定义id
+ * @returns
+ */
+export const convertToModel = (processDefinitionId: string) => {
+  return request({
+    url: `/workflow/processDefinition/convertToModel/${processDefinitionId}`,
+    method: 'put'
+  });
+};
+
+

src/api/workflow/processDefinition/types.ts

@@ -0,0 +1,8 @@
+export interface processDefinitionForm {
+  businessKey: string;
+  processKey: string;
+}
+export interface processDefinitionQuery extends PageQuery {
+  name: string;
+  key: string;
+}

src/api/workflow/task/index.ts

@@ -26,3 +26,30 @@ export const getTaskFinishByPage = (query: object) => {
   });
 };
 
+/**
+ * 启动流程
+ * @param data
+ * @returns {*}
+ */
+export const startWorkFlow = (data: object) => {
+  return request({
+    url: '/workflow/task/startWorkFlow',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 办理流程
+ * @param data
+ * @returns {*}
+ */
+export const completeTask = (data: object) => {
+  return request({
+    url: '/workflow/task/completeTask',
+    method: 'post',
+    data: data
+  });
+};
+
+

src/components/Process/approvalRecord.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-dialog v-model="visible" title="审批记录" :width="width" :height="height" append-to-body :close-on-click-modal="false">
+  <el-dialog v-model="visible" draggable title="审批记录" :width="width" :height="height" append-to-body :close-on-click-modal="false">
     <div v-loading="loading">
-      <div style="width: 100%;height: 300px;overflow-y: auto;position: relative;">
+      <div style="width: 100%;height: 300px;overflow: auto;position: relative;">
         <div
           v-for="(graphic, index) in graphicInfoVos"
           :key="index"
@@ -20,12 +20,12 @@
         <!-- 弹出的 div 元素 -->
         <div
           v-show="popupVisible"
+          class="triangle"
           :style="{ 
               position: 'absolute',
               left: `${graphicX}px`,
               top: `${graphicY}px`,
               backgroundColor: '#fff',
-              border: '1px solid #ccc',
               padding: '10px',
               zIndex: 100
             }"
@@ -42,13 +42,13 @@
         <el-table :data="historyList" style="width: 100%" border fit max-height="570">
           <el-table-column label="流程审批历史记录" align="center">
             <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
-            <el-table-column prop="name" label="任务名称" align="center"></el-table-column>
+            <el-table-column prop="name" label="任务名称" sortable align="center"></el-table-column>
-            <el-table-column prop="nickName" label="办理人" align="center"></el-table-column>
+            <el-table-column prop="nickName" label="办理人" sortable align="center"></el-table-column>
-            <el-table-column prop="status" label="状态" align="center"></el-table-column>
+            <el-table-column prop="status" label="状态" sortable align="center"></el-table-column>
-            <el-table-column prop="comment" label="审批意见" align="center"></el-table-column>
+            <el-table-column prop="comment" label="审批意见" sortable align="center"></el-table-column>
-            <el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
+            <el-table-column prop="startTime" label="开始时间" sortable align="center"></el-table-column>
-            <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
+            <el-table-column prop="endTime" label="结束时间" sortable align="center"></el-table-column>
-            <el-table-column prop="runDuration" label="运行时长" align="center"></el-table-column>
+            <el-table-column prop="runDuration" label="运行时长" sortable align="center"></el-table-column>
           </el-table-column>
         </el-table>
       </div>
@@ -97,11 +97,11 @@ export default {
       });
     },
     handleMouseOver(graphic) {
-      this.graphicX = graphic.x+graphic.width
+      this.graphicX = graphic.x + graphic.width + 10;
-      this.graphicY = graphic.y-graphic.height
+      this.graphicY = graphic.y - graphic.height + -10;
       this.nodeInfo = {};
       if (this.nodeListInfo && this.nodeListInfo.length > 0) {
-        let info = this.nodeListInfo.find((e) => (e.taskDefinitionKey == graphic.nodeId));
+        let info = this.nodeListInfo.find((e) => e.taskDefinitionKey == graphic.nodeId);
         if (info) {
           this.nodeInfo = {
             nickName: info.nickName,
@@ -120,3 +120,18 @@ export default {
   }
 };
 </script>
+<style scoped>
+.triangle{
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  border-radius: 6px;
+}
+
+.triangle::after {
+  content: ' ';
+  position: absolute;
+  top: 8em;
+  right: 215px;
+  border: 15px solid;
+  border-color: transparent #fff transparent transparent;
+}
+</style>

src/views/workflow/model/index.vue

@@ -42,24 +42,24 @@
         <el-table-column align="center" prop="metaInfo" label="备注说明" min-width="130"></el-table-column>
         <el-table-column align="center" prop="createTime" label="创建时间" width="160"></el-table-column>
         <el-table-column align="center" prop="lastUpdateTime" label="更新时间" width="160"></el-table-column>
-        <el-table-column fixed="right" label="操作" align="center" width="160" class-name="small-padding fixed-width">
+        <el-table-column fixed="right" label="操作" align="center" width="180" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-row :gutter="10" class="mb8">
               <el-col :span="1.5">
-                <el-button link type="primary" icon="el-icon-thumb" @click="clickDesign(scope.row.id)">设计流程</el-button>
+                <el-button link type="primary" icon="Pointer" @click="clickDesign(scope.row.id)">设计流程</el-button>
               </el-col>
               <el-col :span="1.5">
-                <el-button link type="primary" icon="el-icon-download" @click="clickExportZip(scope.row)">导出</el-button>
+                <el-button link type="primary" icon="Download" @click="clickExportZip(scope.row)">导出</el-button>
               </el-col>
             </el-row>
             <el-row :gutter="10" class="mb8">
               <el-col :span="1.5">
-                <el-button link type="primary" icon="el-icon-c-scale-to-original" @click="clickDeploy(scope.row.id, scope.row.key)">
+                <el-button link type="primary" icon="ScaleToOriginal" @click="clickDeploy(scope.row.id, scope.row.key)">
                   流程部署
                 </el-button>
               </el-col>
               <el-col :span="1.5">
-                <el-button link type="primary" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
               </el-col>
             </el-row>
           </template>

src/views/workflow/processDefinition/components/processPreview.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-dialog title="预览" v-model="visible" width="70%" append-to-body>
+    <div v-if="type==='png'" style="align:center">
+      <el-image :src="url[0]" v-if="type==='png'"> </el-image>
+    </div>
+    <div class="xml-data" v-if="type==='xml'">
+      <div v-for="(xml,index) in url" :key="index">
+        <pre class="font">{{xml}}</pre>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    url: {
+      type: Array,
+      default: () => []
+    },
+    type: String
+  },
+  data() {
+    return {
+      visible: false
+    };
+  },
+  methods: {
+    init() {
+      this.visible = true;
+    }
+  }
+};
+</script>
+<style>
+.xml-data {
+  background-color: #2b2b2b;
+  border-radius: 5px;
+  color: #c6c6c6;
+  word-break: break-all;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  padding: 8px 0px;
+  height: 500px;
+  width: inherit;
+  line-height: 1px;
+}
+.font {
+  font-family: '幼圆';
+  font-weight: 500;
+}
+</style>

src/views/workflow/processDefinition/index.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
+          <el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch" label-width="120px">
+            <el-form-item label="流程定义名称" prop="name">
+              <el-input v-model="queryParams.name" placeholder="请输入流程定义名称" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="流程定义Key" prop="key">
+              <el-input v-model="queryParams.key" placeholder="请输入流程定义Key" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+    <el-card shadow="hover">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5"> </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" :data="processDefinitionList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
+        <el-table-column fixed align="center" prop="name" label="流程定义名称"></el-table-column>
+        <el-table-column align="center" prop="key" label="标识Key"></el-table-column>
+        <el-table-column align="center" prop="version" label="版本号" width="90">
+          <template #default="scope"> v{{ scope.row.version }}.0</template>
+        </el-table-column>
+        <el-table-column align="center" prop="resourceName" label="流程XML" min-width="80" :show-overflow-tooltip="true">
+          <template #default="scope">
+            <el-link type="primary" @click="clickPreviewXML(scope.row.id)">{{ scope.row.resourceName }}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="diagramResourceName" label="流程图片" min-width="80" :show-overflow-tooltip="true">
+          <template #default="scope">
+            <el-link type="primary" @click="clickPreviewImg(scope.row.id)">{{ scope.row.diagramResourceName }}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="suspensionState" label="状态" min-width="70">
+          <template #default="scope">
+            <el-tag type="success" v-if="scope.row.suspensionState==1">激活</el-tag>
+            <el-tag type="danger" v-else>挂起</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="deploymentTime" label="部署时间" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column fixed="right" label="操作" align="center" width="200" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button link type="primary" :icon="scope.row.suspensionState === 1?'Lock':'Unlock'" @click="handleProcessDefState(scope.row)">
+                  {{ scope.row.suspensionState === 1?"挂起流程":"激活流程" }}
+                </el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+              </el-col>
+            </el-row>
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button link type="primary" icon="Sort" @click="handleConvertToModel(scope.row)"> 转换模型 </el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button link type="primary" icon="Pointer" @click="openHandleStartWorkFlow(scope.row)">启动流程</el-button>
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+
+    <!-- 预览图片或xml -->
+    <process-preview ref="previewRef" :url="url" :type="type" />
+
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="30%">
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialog.visible = false">取消</el-button>
+          <el-button type="primary" @click="handleStartWorkFlow"> 提交流程 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup name="processDefinition">
+import {
+  listProcessDefinition,
+  processDefinitionImage,
+  processDefinitionXml,
+  deleteProcessDefinition,
+  updateProcessDefState,
+  convertToModel
+} from '@/api/workflow/processDefinition';
+import { startWorkFlow, completeTask } from '@/api/workflow/task';
+import { processDefinitionQuery, processDefinitionForm } from '@/api/workflow/processDefinition/types';
+import { ComponentInternalInstance } from 'vue';
+import ProcessPreview from './components/processPreview.vue';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const previewRef = ref<InstanceType<typeof ProcessPreview>>();
+const queryFormRef = ref(ElForm);
+
+const loading = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const processDefinitionList = ref<Record<string, any>>([]);
+const url = ref<Array<string>>([]);
+const type = ref<string>('');
+const variables = ref<string>('');
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: '启动'
+});
+
+const submitFormData: processDefinitionForm = {
+  businessKey: '',
+  processKey: ''
+};
+
+const data = reactive<PageData<processDefinitionQuery, processDefinitionForm>>({
+  form: { ...submitFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    name: '',
+    key: ''
+  }
+});
+const { queryParams, form } = toRefs(data);
+
+onMounted(() => {
+  getList();
+});
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+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 getList = () => {
+  loading.value = true;
+  listProcessDefinition(queryParams.value).then((resp) => {
+    processDefinitionList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+//预览图片
+const clickPreviewImg = (id: string) => {
+  if (previewRef.value) {
+    url.value = [];
+    type.value = 'png';
+    url.value.push(processDefinitionImage(id));
+    previewRef.value.init();
+  }
+};
+//预览xml
+const clickPreviewXML = (id: string) => {
+  loading.value = true;
+  type.value = 'xml';
+  processDefinitionXml(id).then((response) => {
+    if (previewRef.value) {
+      url.value = [];
+      url.value = response.data.xml;
+      loading.value = false;
+      previewRef.value.init();
+    }
+  });
+};
+/** 删除按钮操作 */
+const handleDelete = async (row: any) => {
+  await proxy?.$modal.confirm('是否确认流程定义key为"' + row.key + '"的数据项？');
+  loading.value = true;
+  await deleteProcessDefinition(row.deploymentId, row.id).finally(() => (loading.value = false));
+  getList();
+  proxy?.$modal.msgSuccess('删除成功');
+};
+/** 挂起/激活 */
+const handleProcessDefState = async (row: any) => {
+  let msg = '';
+  if (row.suspensionState === 1) {
+    msg = `暂停后，此流程下的所有任务都不允许往后流转，您确定挂起【${row.name || row.key}】吗？`;
+  } else {
+    msg = `启动后，此流程下的所有任务都允许往后流转，您确定激活【${row.name || row.key}】吗？`;
+  }
+  await proxy?.$modal.confirm(msg);
+  loading.value = true;
+  await updateProcessDefState(row.id).finally(() => (loading.value = false));
+  getList();
+  proxy?.$modal.msgSuccess('操作成功');
+};
+/** 流程定义转换为模型 */
+const handleConvertToModel = async (row: any) => {
+  await proxy?.$modal.confirm('是否确认流程定义key为"' + row.key + '"的数据项？');
+  await convertToModel(row.id).finally(() => (loading.value = false));
+  getList();
+  proxy?.$modal.msgSuccess('操作成功');
+};
+
+/** 打开启动流程弹窗 */
+const openHandleStartWorkFlow = async (row: any) => {
+  form.value.processKey = row.key;
+  form.value.businessKey = Date.parse(new Date());
+  dialog.visible = true;
+};
+/** 启动流程 */
+const handleStartWorkFlow = async () => {
+  startWorkFlow(form.value).then((response) => {
+    handleCompleteTask(response.data.taskId);
+  });
+};
+/** 办理流程 */
+const handleCompleteTask = async (taskId: string) => {
+  await proxy?.$modal.confirm('是否确认启动流程？');
+  let param = {
+    taskId: taskId
+  };
+  await completeTask(param).finally(() => (loading.value = false));
+  getList();
+  proxy?.$modal.msgSuccess('操作成功');
+  dialog.visible = false
+};
+</script>

src/views/workflow/task/taskWaiting.vue

@@ -34,6 +34,9 @@
               <el-col :span="1.5">
                 <el-button type="text" size="small" icon="el-icon-thumb" @click="handleApprovalRecord(scope.row)">审批记录</el-button>
               </el-col>
+              <el-col :span="1.5">
+                <el-button type="text" size="small" icon="el-icon-thumb" @click="handleCompleteTask(scope.row.id)">办理</el-button>
+              </el-col>
             </el-row>
           </template>
         </el-table-column>
@@ -46,7 +49,7 @@
 </template>
 
 <script lang="ts" setup>
-import { getTaskWaitByPage } from '@/api/workflow/task';
+import { getTaskWaitByPage, completeTask } from '@/api/workflow/task';
 import { ComponentInternalInstance } from 'vue';
 import ApprovalRecord from '@/components/Process/approvalRecord.vue';
 //审批记录组件
@@ -109,4 +112,14 @@ const getList = () => {
     loading.value = false;
   });
 };
+/** 办理流程 */
+const handleCompleteTask = async (taskId: string) => {
+  await proxy?.$modal.confirm('是否确认办理流程？');
+  let param = {
+    taskId: taskId
+  };
+  await completeTask(param).finally(() => (loading.value = false));
+  getList();
+  proxy?.$modal.msgSuccess('操作成功');
+};
 </script>