目录
flowable工作流需要提供"提交申请"按钮、"撤销"按钮、"处理"按钮、"审批历史"按钮来完成工作流的处理流程
前端封装组件：
ActApplyBtn.vue:
<a-button :loading="submitLoading" :type="btnType" @click="applySubmit()" >{{text}}</a-button>此按钮点击事件applySubmit()，对不同类型的申请进行处理：
applySerType:{
excApply:"0",//任课老师实验课授课申请
extApply:"1",//实验老师申请实验课
extArrangement:"2",//实验排课申请
scoresInput:"3"//修改成绩申请
}
applySubmint():
applySubmit() {
if (this.dataId && this.dataId.length < 1) {
this.error = '必须传入参数dataId，请先关联流程！';
this.$message.error(this.error);
return;
} else {
this.error = '';
}
//不可重复提交
if(this.isapply == "是"||this.ischoose == "是"||this.tongzhi == "已通知"){
this.$message.error("此申请已提交，不可重复提交！");
return;
}
this.submitLoading = true;
var params = Object.assign({
dataId: this.dataId
}, this.variables);
//调用此方法设置taskid，开启流程
definitionStartByDataId(this.dataId, params)
.then(res => {
if (res.success) {
this.$emit('success');
this.clearTimeout(time);
} else {
this.$message.error(res.message+",请先关联流程！");
return;
}
})
.finally(() => (this.submitLoading = false));
//extApply提交申请将ischoose设为"是",将servicekey设为"extApply"
if(this.serviceType == this.applySerType.extApply){
getAction("ExtApply/extApply/setChoose",{id:this.dataId}).then(res=>{
if(res.success){
this.$message.success('操作成功');
this.loadData()
}else{
this.$message.error("操作失败")
}
})
// }
}
//excApply提交申请将isapply设为"是",将servicekey设为"excApply"
else if(this.serviceType == this.applySerType.excApply){
getAction("ExcApply/excApply/setService",{id:this.dataId}).then(res=>{
if(res.success){
this.$message.success('操作成功');
this.loadData()
}else{
this.$message.error("操作失败")
}
})
} //extArrangement提交申请将tongzhi设为"已通知"
else if(this.serviceType == this.applySerType.extArrangement){
if(this.hasDeploy != "已安排"){
this.$message.error("请先点击'检查可行'安排课程时间！")
return;
}else{
var data = this.dataId;
let that = this;
setTimeout(function () {
getAction("/test/shiyananpai/tongzhianpai",{id:data}).then(res=>{
if(res.success){
that.loadData()
this.$message.success('操作成功');
}else{
this.$message.error("操作失败")
}
})
}, 500)
}
} //changeScoreApply提交申请将scoreisapply设为"是"
else if(this.serviceType == this.applySerType.scoresInput){
getAction("/ScoresInput/changeScoresApply/setApply",{id:this.dataId}).then(res=>{
if(res.success){
this.$message.success('操作成功');
this.loadData()
}else{
this.$message.error("操作失败")
}
})
}
}ActHandleBtn.vue:
点击handle按钮，有通过、驳回两种，点击handle按钮需要弹出弹窗记录处理信息
<span>
<a-button :type="btnType" @click="handle()" >{{text}}</a-button>
<a-modal :title="modalTaskTitle" v-model="modalTaskVisible" :mask-closable="false" :width="500">
<div slot="footer">
<a-button type="text" @click="modalTaskVisible=false">取消</a-button>
<a-button type="primary" :loading="submitLoading" @click="handelSubmit">提交</a-button>
</div>
</a-modal>
</span>此按钮点击事件handle()，对不同类型的申请进行处理：
handleSerType:{
excApply:"0",//任课老师实验课授课申请
extApply:"1",//实验老师申请实验课
confirmClass:"2",//任课老师确认实验课安排
sendClass:"3",//发布实验安排
scoreInput:"4",//修改成绩申请
}
handle()：
handle() {
this.form.comment = ''
this.candidateUsersSelecteds = []
if (this.type === this.handleType.delegate) {
// this.delegateTask();
} else if (this.type === this.handleType.pass) {
//通过
this.passTask();
} else if (this.type === this.handleType.back) {
//驳回
this.backTask();
} else {
this.$message.warn('未知类型type，参见 handleType');
}
}, 通过处理passTask():
passTask() {
if(this.serviceType == this.handleSerType.excApply){
if((this.recordOne.type == "任课教师") || (this.recordOne.type == "任课教师、助教")){
//设置实验老师
getAction("/ExcApply/excApply/setTestTea",{tid:this.recordOne.tid,zhujiao:this.recordOne.zhujiao,id:this.recordOne.id}).then(res=>{
if(res.success){
this.loadData()
}else{
this.$message.error("操作失败")
}
})
//插入到ext_apply表，方便任课老师后期申请
getAction("/ExtApply/extApply/insertTeaExtApply",{id:this.recordOne.id}).then(res=>{
if(res.success){
this.loadData()
}else{
this.$message.error("操作失败")
}
})
}else if(this.recordOne.type == "任课教师、实验教师"){
//设置实验老师
getAction("/ExcApply/excApply/setTestTea",{tid:this.recordOne.tid,zhujiao:this.recordOne.zhujiao,id:this.recordOne.id}).then(res=>{
if(res.success){
this.loadData()
}else{
this.$message.error("操作失败")
}
})
}else if(this.recordOne.type == "实验教师"){
getAction("ExcApply/excApply/isVisiable",{id:this.recordOne.id}).then(res=>{
if(res.success){
this.loadData()
}else{
this.$message.error("操作失败")
}
})
}
}else if(this.serviceType == this.handleSerType.extApply){
//设置实验老师
if(this.recordOne.type == "任课教师"||this.recordOne.type == "实验教师"||this.recordOne.type == "任课教师、助教"){
this.temtestTea = this.recordOne.extid;
}else if(this.recordOne.type =="任课教师、实验教师"){
this.temtestTea = this.recordOne.testteacher+","+this.recordOne.extid;
}
//设置实验老师
getAction("ExtApply/extApply/setTestteacher",{testteacher:this.temtestTea,id:this.recordOne.id}).then(res=>{
if(res.success){
this.loadData()
}else{
this.$message.error("操作失败")
}
})
//插入实验排课extarrangement表中，方便后续实验课排课
getAction("/ExtApply/extApply/chushihua",{testteacher:this.temtestTea,id:this.recordOne.id}).then(res=>{
if(res.success){
this.loadData()
}else{
this.$message.error("操作失败")
}
})
}else if(this.serviceType == this.handleSerType.confirmClass){
//任课老师确认实验课排课结果
getAction("/test/shiyananpai/commitanpai", {id: this.recordOne.id}).then((res) => {
if (res.success) {
this.reCalculatePage(1)
this.$message.success(res.message);
this.loadData();
} else {
this.$message.warning(res.message);
}
});
}else if(this.serviceType == this.handleSerType.sendClass){
//实验管理员发布排课结果，学生、任课老师、实验课老师可以查看
getAction("/test/shiyananpai/fabuanpai", {id: this.recordOne.id}).then((res) => {
if (res.success) {
this.reCalculatePage(1)
this.$message.success(res.message);
this.loadData();
} else {
this.$message.warning(res.message);
}
});
}else if(this.serviceType == this.handleSerType.scoreInput){
}
else{
this.$message,error("错误")
}
const v = this;
this.modalTaskTitle = '审批通过';
//显示弹窗，方便输入通过、驳回意见
this.modalTaskVisible = true;
},退回处理backTask():
backTask() {
const v = this;
this.modalTaskTitle = '审批驳回';
//显示弹窗，方便输入驳回意见
this.modalTaskVisible = true;
},"通过"和"退回"类型的按钮点击后，会弹窗点击弹窗的“提交”调用点击事件handleSubmit()
handelSubmit() {
console.log('提交');
this.submitLoading = true;
var formData = Object.assign({
dataId:this.dataId,
candidateUsers:this.candidateUsersSelecteds,
values:Object.assign({dataId:this.dataId},this.variables)
}, this.form);
if (!formData.comment){
//需要输入审批意见，健壮性设计
this.$message.error('请输入审批意见！');
this.submitLoading=false
return;
}
if (this.type == this.handleType.reApply||this.type == this.handleType.pass){
// 通过
completeTask(formData).then(res => {
this.submitLoading = false;
if (res.success) {
this.$message.success('操作成功');
this.modalTaskVisible = false;
this.$emit('success');
} else {
this.$message.error('操作失败');
}
}).finally(()=>{this.submitLoading=false});
}else if (this.type == this.handleType.back) {
// 驳回
rejectTask(formData).then(res => {
this.submitLoading = false;
if (res.success) {
this.$message.success('操作成功');
this.modalTaskVisible = false;
this.$emit('success');
} else {
this.$message.error('操作失败');
}
}).finally(()=>{this.submitLoading=false});
if(this.serviceType == this.handleSerType.excApply){
//excApply点击驳回，将excApply中的isapply设置为"否"
getAction("ExcApply/excApply/cancelApply",{id:this.dataId}).then(res=>{
if(res.success){
this.loadData()
}else{
this.$message.error("操作失败")
}
})
}else if(this.serviceType == this.handleSerType.extApply){
//extApply申请点击驳回，将extApply中的ischoose设置为"否"
getAction("ExtApply/extApply/cancelApply",{id:this.dataId}).then(res=>{
if(res.success){
this.loadData()
}else{
this.$message.error("操作失败")
}
})
}else if(this.serviceType == this.handleSerType.confirmClass){
//extarrangement申请点击驳回，将extarrangement中的tongzhi设置为"未通知"
getAction("/test/shiyananpai/revokeanpai", {id: this.dataId}).then((res) => {
if (res.success) {
this.reCalculatePage(1)
this.$message.success(res.message);
this.loadData();
} else {
this.$message.warning(res.message);
}
});
}
else if(this.serviceType == this.handleSerType.sendClass){
//extApply申请点击驳回，将extApply中的ischoose设置为"否"
getAction("ExtApply/extApply/cancelApply",{id:this.dataId}).then(res=>{
if(res.success){
this.loadData()
}else{
this.$message.error("操作失败")
}
})
}
else if(this.serviceType == this.handleSerType.scoreInput){
//extApply申请点击驳回，将extApply中的scoreisapply设置为"否"
getAction("/ScoresInput/changeScoresApply/cancelApply",{id:this.dataId}).then(res=>{
if(res.success){
this.loadData()
}else{
this.$message.error("操作失败")
}
})
}
}
},ActCancelBtn.vue:
<span>
<a-button :type="btnType" @click="cancel()" >{{text}}</a-button>
<a-modal title="确认撤回" v-model="modalCancelVisible" :mask-closable="false" :width="500">
<a-form ref="delForm" v-model="cancelForm" :label-width="70" v-if="modalCancelVisible">
<a-form-item label="撤回原因" prop="reason">
<a-input type="textarea" v-model="cancelForm.reason" :rows="4" />
</a-form-item>
</a-form>
<div slot="footer">
<a-button type="text" @click="modalCancelVisible = false">取消</a-button>
<a-button type="primary" :disabled="submitLoading" @click="handelSubmitCancel">提交</a-button>
</div>
</a-modal>
</span>点击"撤回"按钮会弹窗，让申请人输入撤回意见，点击弹窗中的"提交"会触发handelSubmitCancel点击事件
handelSubmitCancel():
handelSubmitCancel() {
this.submitLoading = true;
//健壮性设置
if(this.isapply == "否"||this.ischoose == "否"){
this.$message.error("该申请未提交，不可撤回！");
return
}
//撤回，调用flowable定义的接口
deleteByDataId(this.dataId, this.cancelForm.reason)
.then(res => {
if (res.success) {
this.$message.success('操作成功');
this.modalCancelVisible = false;
this.$emit('success');
} else {
this.$message.error(res.message);
}
})
.finally(() => (this.submitLoading = false));
//如果服务类型为excApply
if(this.serviceType == this.applySerType.excApply){
//将excApply中的isapply设为"否"
getAction("/ExcApply/excApply/cancelApply",{id:this.dataId}).then(res=>{
if(res.success){
this.loadData()
}else{
this.$message.error("操作失败")
}
})
}else if(this.serviceType == this.applySerType.extApply){
//将extApply中的ischoose设为"否"
getAction("/ExtApply/extApply/cancelApply",{id:this.dataId}).then(res=>{
if(res.success){
this.loadData()
}else{
this.$message.error("操作失败")
}
})
}else if(this.serviceType == this.applySerType.scoresInput){
//将changeScoresApply中的scoreisapply设为"否"
getAction("/ScoresInput/changeScoresApply/cancelApply",{id:this.dataId}).then(res=>{
if(res.success){
this.loadData()
}else{
this.$message.error("操作失败")
}
})
}
}ActHistoricDetailBtn.vue:
点击"审批历史"按钮，调用history()，会有审批历史弹窗
<span>
<a-button :type="btnType" @click="history()" >{{text}}</a-button>
<a-modal title="审批历史" v-model="modalLsVisible" :mask-closable="true" :width="'80%'" :footer="null">
<div v-if="modalLsVisible">
<HistoricDetail ref="historicDetail" :data-id="dataId"></HistoricDetail>
</div>
</a-modal>
</span>history():
history() {
if (!this.dataId) {
this.$message.error('流程实例ID不存在');
return;
}
this.modalLsVisible = true;
}history()会展现审批历史细节，即HistoricDetail.vue，这是参照教程，调用flowable接口
846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
