root/flowable_management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add : 工单流程交互开发

Browse Source
This commit is contained in:
ls
2025-11-08 15:46:45 +08:00
parent 712aefd8d3
commit edc28808fa
13 changed files with 382 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
base-vue/src/views/modules/tickets/detail.vue
View File

@@ -26,7 +26,9 @@
<tbody>
<tr>
<td class="label">工单ID</td>
<td class="value"><el-tag size="small">{{ ticketsData.ticketsId }}</el-tag></td>
<td class="value">
<el-tag size="small">{{ ticketsData.ticketsId }}</el-tag>
</td>
<td class="label">小车类型</td>
<td class="value">{{ ticketsData.carName || '-' }}</td>
</tr>
@@ -80,26 +82,25 @@
<!-- 审批操作按钮组 -->
<div class="approval-tools">
<el-upload
ref="upload"
:action="$baseUrl + '/api/localStorage' + '?name=' + dataForm.filename"
:limit="1"
:headers="headers"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:on-error="handleError"
:on-remove="handleRemove"
:auto-upload="false"
>
<el-button slot="trigger" size="mini" type="primary">上传附件</el-button>
<div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
<el-upload
ref="upload"
:action="$baseUrl + '/api/localStorage' + '?name=' + dataForm.filename"
:limit="1"
:headers="headers"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:on-error="handleError"
:on-remove="handleRemove"
:auto-upload="false"
>
<el-button slot="trigger" size="mini" type="primary">上传附件</el-button>
<div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
</el-upload>
</el-upload>
</div>
<!-- 处理意见输入 -->
<div class="opinion-input">
<el-input
@@ -116,19 +117,33 @@
</el-input>
</div>
<!-- 外层容器控制对齐方式 -->
<div v-if= "ticketsData.processInstanceUser === '销售经理'" style="text-align: left; margin: 8px 0;"> <!-- 左对齐 + 上下间距 -->
<el-button type="text" size="small"
class="custom-assign-btn"
@click="startFlowUser()"
>
指派
</el-button>
</div>
<div v-if="assignedUsername" class="assigned-username">
指派：{{ assignedUsername }}
</div>
<el-radio-group v-if= "ticketsData.processInstanceUser === '销售专员'" v-model="approvalForm.result">
<el-radio label="同意" border size="small">同意</el-radio>
<el-radio label="完结" border size="small">完结</el-radio>
</el-radio-group>
<!-- 附加选项 -->
<div class="approval-options">
<el-checkbox v-model="approvalForm.hideOpinion">意见隐藏</el-checkbox>
<div class="option-item">
<el-checkbox v-model="approvalForm.track">跟踪</el-checkbox>
<el-radio-group v-model="approvalForm.trackType" v-if="approvalForm.track">
<el-radio label="全部" border size="small">全部</el-radio>
<el-radio label="指定人" border size="small">指定人</el-radio>
</el-radio-group>
</div>
<el-checkbox v-model="approvalForm.archiveAfterHandle">处理后归档</el-checkbox>
</div>
</div>
<!-- 底部操作按钮（固定在底部） -->
@@ -140,30 +155,86 @@
</div>
</div>
</div>
<!-- 弹窗, 新增 / 修改 -->
<el-dialog
title="指派"
:visible.sync="dialogFormVisible"
width="30%"
:close-on-click-modal="false"
>
<el-form
:model="flowForm"
label-width="100px"
class="demo-dynamic"
ref="flowFormRef"
>
<!-- 循环渲染动态表单时，增加v-if判断避免空数据报错 -->
<el-form-item
v-for="(form, index) in dynamiForm"
:label="form.name || '未命名'"
:key="`${form.key}-${index}`"
:prop="form.key"
:rules="[{ required: true, message: `请选择${form.name}`, trigger: 'change' }]"
>
<!-- 只在users有数据时渲染选择器，避免循环空数组 -->
<el-select
v-if="form.type === 'assignee' && users.length > 0"
v-model="flowForm[form.key]"
placeholder="请选择"
clearable
>
<el-option
v-for="user in users"
:key="user.userId"
:label="`${user.nickname || user.username}[${user.username}]`"
:value="user.userId"
/>
</el-select>
<!-- 当users为空时显示提示 -->
<div v-else-if="form.type === 'assignee' && users.length === 0">
暂无可选用户
</div>
</el-form-item>
</el-form>
<!-- 弹窗底部按钮区（之前可能缺少，导致无法提交/关闭） -->
<template #footer>
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="handleAssign">确认指派</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import AddOrUpdate from "./tickets-add-or-update.vue";
export default {
components: {AddOrUpdate},
data() {
return {
column: 0,
ticketsData: {},
statusOpt: [
{ value: '0', label: '未开始' },
{ value: '1', label: '已指派' },
{ value: '2', label: '处理中' },
{ value: '3', label: '已完成' }
{value: '0', label: '未开始'},
{value: '1', label: '已指派'},
{value: '2', label: '处理中'},
{value: '3', label: '已完成'}
],
assignedUsername: '',
// 审批表单数据
approvalForm: {
result: '同意', // 默认为同意
result: '指派', // 默认为同意
opinion: '', // 处理意见
hideOpinion: false, // 意见隐藏
track: false, // 跟踪
trackType: '全部', // 跟踪类型
archiveAfterHandle: false // 处理后归档
archiveAfterHandle: false, // 处理后归档
assignUserId: 0 // 指派人id
},
dictData: [],
// 上传文件
dataForm: {
contractId: 0,
@@ -177,13 +248,19 @@ export default {
totalSum: 0,
filename: null,
storageId: null
}
},
dialogFormVisible: false, // 必须初始化
flowForm: {},
users: [],
}
},
created() {
// 初始化布局
this.column = this.isMobile() || window.innerWidth < 768 ? 2 : 4;
this.getDataList();
// this.checkAndSetAgree();
},
methods: {
// 移动端判断
@@ -192,6 +269,31 @@ export default {
const mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
return mobileAgents.some(agent => userAgentInfo.indexOf(agent) > -1);
},
handleAssign() {
// 先验证表单必填项
this.$refs.flowFormRef.validate(valid => {
if (valid) {
// 1. 获取选中的userId（假设dynamiForm中只有一个assignee类型的表单项，取第一个）
const formItem = this.dynamiForm[0]; // 若有多个，需根据实际场景调整
const selectedUserId = this.flowForm[formItem.key];
// 2. 从users数组中找到对应的user，获取username
const selectedUser = this.users.find(user => user.userId === selectedUserId);
if (selectedUser) {
this.assignedUsername = selectedUser.nickname;// 保存username
this.approvalForm.assignUserId = selectedUser.userId;
} else {
this.assignedUsername = '未知用户'; // 未找到时的兜底
}
// 3. 关闭对话框
this.dialogFormVisible = false;
// （可选）这里可以添加实际的指派逻辑，如调用接口等
}
});
},
// 上传文件
beforeUpload(file) {
let isLt2M = true
@@ -203,8 +305,22 @@ export default {
this.dataForm.filename = file.name
return isLt2M
},
startFlowUser() {
this.$http({
url: this.$http.adornUrl('/flow/deploy/flowDef'),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
if (data && data.code === 0) {
this.dynamiForm = [...data.data]
this.users = [...data.users]
this.roles = [...data.roles]
this.dialogFormVisible = true
}
})
},
handleSuccess(response, file, fileList) {
this.$notify({title: '上传成功',type: 'success'})
this.$notify({title: '上传成功', type: 'success'})
this.dataForm.storageId = response.storageId
},
handleError(e, file, fileList) {
@@ -215,7 +331,7 @@ export default {
duration: 2500
})
},
handleRemove (file, fileList) {
handleRemove(file, fileList) {
this.dataForm.storageId = null
},
// 获取工单数据
@@ -224,10 +340,14 @@ export default {
url: this.$http.adornUrl(`/tickets/tickets/info/${this.$route.query.id}`),
method: 'get',
params: this.$http.adornParams({})
}).then(({ data }) => {
}).then(({data}) => {
if (data && data.code === 0) {
this.ticketsData = data.tickets;
}
const user = this.ticketsData.processInstanceUser;
if (user && (user.includes('指派') || user.includes('完结'))) {
this.approvalForm.result = '提交'; // 自动选中“同意”
}
});
},
// 提交审批
@@ -249,9 +369,10 @@ export default {
ticketsId: this.ticketsData.ticketsId,
processInstance: this.ticketsData.processInstance,
result: this.approvalForm.result,
opinion: this.approvalForm.opinion
opinion: this.approvalForm.opinion,
userId: this.approvalForm.assignUserId
})
}).then(({ data }) => {
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
@@ -265,7 +386,8 @@ export default {
this.$message.error(data.msg || '操作失败');
}
});
}).catch(() => {});
}).catch(() => {
});
},
// 存为草稿
saveAsDraft() {
@@ -302,16 +424,19 @@ export default {
padding-bottom: 10px;
border-bottom: 1px solid #e5e5e5;
}
.title {
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.meta-info {
color: #666;
font-size: 14px;
}
.meta-info .creator {
margin-right: 15px;
}
@@ -328,7 +453,7 @@ export default {
flex: 1;
background-color: #fff;
padding: 30px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #eee; /* 新增边框，与右侧视觉统一 */
}
@@ -350,11 +475,27 @@ export default {
color: #333;
}
.custom-assign-btn {
color: #606266; /* 与表单文字色统一 */
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 4px 8px;
margin: 8px 0;
font-size: 16px;
}
.custom-assign-btn:hover {
color: #409EFF;
border-color: #c6e2ff;
background-color: #f0f9ff;
}
/* 表单区块样式 */
.form-block {
margin-bottom: 25px;
border: 1px solid #ddd;
}
.block-title {
background-color: #f8f0e3; /* 浅橙色背景 */
color: #333;
@@ -368,13 +509,16 @@ export default {
width: 100%;
border-collapse: collapse;
}
.info-table tr {
border-bottom: 1px solid #f0f0f0;
}
.info-table td {
padding: 12px 15px;
vertical-align: middle;
}
.info-table .label {
width: 25%;
background-color: #fafafa;
@@ -383,6 +527,7 @@ export default {
padding-right: 20px;
border-right: 1px solid #f0f0f0;
}
.info-table .value {
width: 25%;
padding-left: 20px;
@@ -400,7 +545,7 @@ export default {
background-color: #fff;
padding: 30px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #eee; /* 与左侧统一边框 */
align-self: stretch; /* 强制高度与左侧一致 */
}
@@ -438,6 +583,7 @@ export default {
gap: 10px;
margin-bottom: 5px;
}
.approval-result .el-radio {
flex: 1;
}
@@ -452,16 +598,19 @@ export default {
.approval-options {
margin-bottom: 10px;
}
.option-item {
display: flex;
align-items: center;
gap: 10px;
margin: 8px 0; /* 缩减选项间距 */
}
.option-item .el-radio-group {
display: flex;
gap: 10px;
}
.approval-options .el-checkbox {
display: block;
margin: 8px 0; /* 缩减复选框间距 */
@@ -482,10 +631,12 @@ export default {
.main-container {
flex-direction: column;
}
.approval-sidebar {
width: 100%;
margin-top: 20px; /* 垂直排列时增加间距 */
}
.info-table .label, .info-table .value {
width: 50%;
}
@@ -495,17 +646,20 @@ export default {
.form-container, .approval-sidebar {
padding: 15px;
}
.info-table td {
display: block;
width: 100% !important;
text-align: left !important;
}
.info-table .label {
border-right: none;
padding-right: 0;
background-color: transparent;
font-weight: bold;
}
.info-table .value {
padding-left: 0;
margin-bottom: 10px;

8
base-vue/src/views/modules/tickets/tickets.vue
View File

@@ -137,8 +137,16 @@
header-align="center"
align="center"
min-width="100px"
label="工单更新时间">
</el-table-column>
<el-table-column
prop="finishTime"
header-align="center"
align="center"
min-width="100px"
label="工单审批完成时间">
</el-table-column>
<el-table-column
fixed="right"
header-align="center"