564 lines
13 KiB
Vue
564 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view class="app-container">
|
|||
|
|
<!-- 流程列表 -->
|
|||
|
|
<view class="list-container" v-if="ownProcessList.length > 0">
|
|||
|
|
<view
|
|||
|
|
v-for="(item, index) in ownProcessList"
|
|||
|
|
:key="index"
|
|||
|
|
class="list-item"
|
|||
|
|
>
|
|||
|
|
<!-- 1. 基础信息区 -->
|
|||
|
|
<view class="base-info">
|
|||
|
|
<view class="base-info__title">
|
|||
|
|
<text class="label">流程标题：</text>
|
|||
|
|
<text class="value">{{ (item.procVars) || '无标题' }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="base-info__other">
|
|||
|
|
<view class="other-item">
|
|||
|
|
<text class="label">流程名称：</text>
|
|||
|
|
<text class="value">{{ item.procDefName || '未知' }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="other-item">
|
|||
|
|
<text class="label">版本：</text>
|
|||
|
|
<view class="version-tag">v{{ item.procDefVersion || 1 }}</view>
|
|||
|
|
<text class="sort">{{ item.sort || '' }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 2. 状态信息区 -->
|
|||
|
|
<view class="status-info">
|
|||
|
|
<view class="status-item">
|
|||
|
|
<text class="label">当前节点：</text>
|
|||
|
|
<text class="value">{{ item.taskName || '无' }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="status-item">
|
|||
|
|
<text class="label">提交时间：</text>
|
|||
|
|
<text class="value">{{ item.createTime || '未知' }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="status-item">
|
|||
|
|
<text class="label">流程状态：</text>
|
|||
|
|
<view
|
|||
|
|
class="status-tag"
|
|||
|
|
:class="getStatusTagClass(item.processStatus)"
|
|||
|
|
>
|
|||
|
|
{{ getStatusText(item.processStatus) }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="status-item">
|
|||
|
|
<text class="label">耗时：</text>
|
|||
|
|
<text class="value">{{ item.duration || '0' }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 3. 操作按钮区 -->
|
|||
|
|
<view class="action-buttons">
|
|||
|
|
<button
|
|||
|
|
class="action-btn"
|
|||
|
|
@click="handleFlowRecord(item)"
|
|||
|
|
>
|
|||
|
|
详情
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
class="action-btn delete-btn"
|
|||
|
|
@click="handleDelete(item)"
|
|||
|
|
v-if="item.finishTime"
|
|||
|
|
>
|
|||
|
|
删除
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
class="action-btn cancel-btn"
|
|||
|
|
@click="handleStop(item)"
|
|||
|
|
v-else
|
|||
|
|
>
|
|||
|
|
取消
|
|||
|
|
</button>
|
|||
|
|
<!-- <button
|
|||
|
|
class="action-btn restart-btn"
|
|||
|
|
@click="handleAgain(item)"
|
|||
|
|
>
|
|||
|
|
重新发起
|
|||
|
|
</button> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 空数据提示 -->
|
|||
|
|
<view class="empty-tip" v-if="!loading && ownProcessList.length === 0">
|
|||
|
|
<view class="empty-icon">
|
|||
|
|
<text class="icon">📦</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="empty-text">暂无流程数据</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 分页控件（原生实现） -->
|
|||
|
|
<view class="pagination" v-if="total > queryParams.pageSize">
|
|||
|
|
<button
|
|||
|
|
class="page-btn"
|
|||
|
|
@click="prevPage"
|
|||
|
|
:disabled="queryParams.pageNum <= 1"
|
|||
|
|
>
|
|||
|
|
上一页
|
|||
|
|
</button>
|
|||
|
|
<view class="page-info">
|
|||
|
|
第 {{ queryParams.pageNum }} / {{ totalPages }} 页
|
|||
|
|
</view>
|
|||
|
|
<button
|
|||
|
|
class="page-btn"
|
|||
|
|
@click="nextPage"
|
|||
|
|
:disabled="queryParams.pageNum >= totalPages"
|
|||
|
|
>
|
|||
|
|
下一页
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<uni-fab ref="fab" horizontal="right" vertical="bottom"
|
|||
|
|
direction="horizontal" @fabClick="fabClick" />
|
|||
|
|
|
|||
|
|
<uni-popup ref="startpopup">
|
|||
|
|
<view class="" style="background-color: white; display: flex; flex-wrap: wrap; gap: 3px; justify-content: space-evenly; padding: 20rpx;">
|
|||
|
|
<view v-for="item in applyCategory" @click="jumpStart(item)" style="background-color: gainsboro; padding: 20rpx;">
|
|||
|
|
{{ item.label }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</uni-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { delProcess, listOwnProcess, stopProcess } from '@/api/oa/workflow/process';
|
|||
|
|
|
|||
|
|
const applyCategory = [
|
|||
|
|
{
|
|||
|
|
label: '用印申请',
|
|||
|
|
name: 'seal',
|
|||
|
|
path: '/workflow/process/start',
|
|||
|
|
params: {
|
|||
|
|
deploymentId: '743bf626-355e-11f0-b7d7-fa163e1573b1'
|
|||
|
|
},
|
|||
|
|
query: {
|
|||
|
|
definitionId: 'Process_1741171051790%3A2%3A74715e09-355e-11f0-b7d7-fa163e1573b1'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// label: '拨款申请',
|
|||
|
|
// name: 'money',
|
|||
|
|
// path: '/money/addMoney'
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// label: '报销申请',
|
|||
|
|
// name: 'claim',
|
|||
|
|
// path: '/claim/addTripClaim'
|
|||
|
|
// },
|
|||
|
|
{
|
|||
|
|
label: '请假申请',
|
|||
|
|
name: 'absence',
|
|||
|
|
path: '/workflow/process/start',
|
|||
|
|
params: {
|
|||
|
|
deploymentId: 'f16f31cf-9215-11f0-9545-d8f3bc6f4151'
|
|||
|
|
},
|
|||
|
|
query: {
|
|||
|
|
definitionId: 'Process_1741158926906%3A10%3Af1d17612-9215-11f0-9545-d8f3bc6f4151'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '差旅申请',
|
|||
|
|
name: 'trip',
|
|||
|
|
path: '/workflow/process/start',
|
|||
|
|
params: {
|
|||
|
|
deploymentId: 'd7b3b7c2-355f-11f0-b7d7-fa163e1573b1'
|
|||
|
|
},
|
|||
|
|
query: {
|
|||
|
|
definitionId: 'Process_1741509148283%3A2%3Ad7ba4775-355f-11f0-b7d7-fa163e1573b1'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '招待申请',
|
|||
|
|
name: 'entertain',
|
|||
|
|
path: '/workflow/process/start',
|
|||
|
|
params: {
|
|||
|
|
deploymentId: '81c87a72-355f-11f0-b7d7-fa163e1573b1'
|
|||
|
|
},
|
|||
|
|
query: {
|
|||
|
|
definitionId: 'Process_1741172554061%3A3%3A81d60f05-355f-11f0-b7d7-fa163e1573b1'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '其他申请',
|
|||
|
|
name: 'other',
|
|||
|
|
path: '/workflow/process/start',
|
|||
|
|
params: {
|
|||
|
|
deploymentId: '003a0422-3560-11f0-b7d7-fa163e1573b1'
|
|||
|
|
},
|
|||
|
|
query: {
|
|||
|
|
definitionId: 'Process_1741172337682%3A4%3A00454ec5-3560-11f0-b7d7-fa163e1573b1'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "OwnProcessList",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
loading: false, // 加载状态（使用API控制，不依赖组件）
|
|||
|
|
ownProcessList: [],
|
|||
|
|
total: 0,
|
|||
|
|
queryParams: {
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
processKey: undefined,
|
|||
|
|
processName: undefined,
|
|||
|
|
category: undefined,
|
|||
|
|
description: undefined
|
|||
|
|
},
|
|||
|
|
dateRange: [],
|
|||
|
|
applyCategory
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 计算总页数
|
|||
|
|
totalPages() {
|
|||
|
|
return Math.ceil(this.total / this.queryParams.pageSize) || 1;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/** 获取列表数据（使用原生加载提示） */
|
|||
|
|
getList() {
|
|||
|
|
this.loading = true;
|
|||
|
|
// 显示原生加载提示
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '加载中...',
|
|||
|
|
mask: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const params = this.addDateRange({ ...this.queryParams }, this.dateRange);
|
|||
|
|
|
|||
|
|
listOwnProcess(params)
|
|||
|
|
.then(response => {
|
|||
|
|
this.ownProcessList = response.rows || [];
|
|||
|
|
this.total = response.total || 0;
|
|||
|
|
})
|
|||
|
|
.catch(err => {
|
|||
|
|
console.error('获取流程列表失败：', err);
|
|||
|
|
uni.showToast({ title: '加载失败', icon: 'none', duration: 2000 });
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
this.loading = false;
|
|||
|
|
// 关闭原生加载提示
|
|||
|
|
uni.hideLoading();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
fabClick() {
|
|||
|
|
this.$refs.startpopup.open('bottom')
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 日期范围处理 */
|
|||
|
|
addDateRange(params, dateRange) {
|
|||
|
|
const result = { ...params };
|
|||
|
|
if (Array.isArray(dateRange) && dateRange.length === 2) {
|
|||
|
|
result.beginTime = dateRange[0];
|
|||
|
|
result.endTime = dateRange[1];
|
|||
|
|
}
|
|||
|
|
return result;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 上一页 */
|
|||
|
|
prevPage() {
|
|||
|
|
if (this.queryParams.pageNum > 1) {
|
|||
|
|
this.queryParams.pageNum--;
|
|||
|
|
this.getList();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 下一页 */
|
|||
|
|
nextPage() {
|
|||
|
|
if (this.queryParams.pageNum < this.totalPages) {
|
|||
|
|
this.queryParams.pageNum++;
|
|||
|
|
this.getList();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 详情跳转 */
|
|||
|
|
handleFlowRecord(row) {
|
|||
|
|
console.log(row);
|
|||
|
|
const definitionId = row.procDefId;
|
|||
|
|
const deploymentId = row.deployId;
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/workbench/workflow/detail/detail?definitionId=${definitionId}&deployId=${deploymentId}&processed=false`
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 删除流程 */
|
|||
|
|
handleDelete(row) {
|
|||
|
|
const procInsId = row.procInsId;
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '警告',
|
|||
|
|
content: `是否确认删除流程编号为"${procInsId}"的数据？`,
|
|||
|
|
confirmText: '确定',
|
|||
|
|
cancelText: '取消',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
delProcess(procInsId)
|
|||
|
|
.then(() => {
|
|||
|
|
uni.showToast({ title: '删除成功', duration: 1500 });
|
|||
|
|
this.getList();
|
|||
|
|
})
|
|||
|
|
.catch(err => {
|
|||
|
|
console.error('删除失败：', err);
|
|||
|
|
uni.showToast({ title: '删除失败', icon: 'none' });
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 取消流程 */
|
|||
|
|
handleStop(row) {
|
|||
|
|
const params = { procInsId: row.procInsId };
|
|||
|
|
stopProcess(params)
|
|||
|
|
.then(response => {
|
|||
|
|
uni.showToast({ title: response.msg || '取消成功', duration: 1500 });
|
|||
|
|
this.getList();
|
|||
|
|
})
|
|||
|
|
.catch(err => {
|
|||
|
|
console.error('取消失败：', err);
|
|||
|
|
uni.showToast({ title: '取消失败', icon: 'none' });
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 重新发起 */
|
|||
|
|
handleAgain(row) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/workflow/process/start/${row.deployId}?definitionId=${row.procDefId}&procInsId=${row.procInsId}`
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
jumpStart(row) {
|
|||
|
|
const definitionId = row.query.definitionId;
|
|||
|
|
const deploymentId = row.params.deploymentId;
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/workbench/workflow/start/start?definitionId=${definitionId}&deployId=${deploymentId}&processed=false`
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 状态标签样式（原生实现，替代uni-tag） */
|
|||
|
|
getStatusTagClass(status) {
|
|||
|
|
switch (status) {
|
|||
|
|
case 1: return 'status-tag--primary'; // 运行中
|
|||
|
|
case 2: return 'status-tag--success'; // 已完成
|
|||
|
|
case 3: return 'status-tag--danger'; // 已取消
|
|||
|
|
default: return 'status-tag--info'; // 未知
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 状态文本 */
|
|||
|
|
getStatusText(status) {
|
|||
|
|
switch (status) {
|
|||
|
|
case 1: return '运行中';
|
|||
|
|
case 2: return '已完成';
|
|||
|
|
case 3: return '已取消';
|
|||
|
|
default: return '未知状态';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.app-container {
|
|||
|
|
padding: 16rpx;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 列表容器 */
|
|||
|
|
.list-container {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 列表项 */
|
|||
|
|
.list-item {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
border-bottom: 1rpx solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list-item:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 基础信息区 */
|
|||
|
|
.base-info {
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.base-info__title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.base-info__other {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.other-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 版本标签（原生实现） */
|
|||
|
|
.version-tag {
|
|||
|
|
background-color: #e8f3ff;
|
|||
|
|
color: #1677ff;
|
|||
|
|
padding: 2rpx 10rpx;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sort {
|
|||
|
|
margin-left: 8rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 状态信息区 */
|
|||
|
|
.status-info {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 状态标签（原生实现） */
|
|||
|
|
.status-tag {
|
|||
|
|
padding: 2rpx 10rpx;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-tag--primary {
|
|||
|
|
background-color: #e8f3ff;
|
|||
|
|
color: #1677ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-tag--success {
|
|||
|
|
background-color: #f0fff4;
|
|||
|
|
color: #00b42a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-tag--danger {
|
|||
|
|
background-color: #fff1f0;
|
|||
|
|
color: #f53f3f;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-tag--info {
|
|||
|
|
background-color: #f2f3f5;
|
|||
|
|
color: #86909c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 操作按钮区 */
|
|||
|
|
.action-buttons {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
padding: 8rpx 20rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
border: none;
|
|||
|
|
background: transparent;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.delete-btn {
|
|||
|
|
color: #f53f3f;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cancel-btn {
|
|||
|
|
color: #faad14;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.restart-btn {
|
|||
|
|
color: #1677ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 空数据提示 */
|
|||
|
|
.empty-tip {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 400rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-icon {
|
|||
|
|
font-size: 80rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 分页控件 */
|
|||
|
|
.pagination {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 30rpx;
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-btn {
|
|||
|
|
padding: 12rpx 30rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border: 1rpx solid #eee;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-btn:disabled {
|
|||
|
|
color: #ccc;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-info {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 通用样式 */
|
|||
|
|
.label {
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value {
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
</style>
|