558 lines
19 KiB
Vue
558 lines
19 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span class="el-icon-document">待办任务</span>
|
||
<el-tag style="margin-left: 10px">发起人:{{ startUser }}</el-tag>
|
||
<el-tag>任务节点:{{ taskName }}</el-tag>
|
||
<el-button style="float: right" size="mini" type="danger" @click="goBack">关闭</el-button>
|
||
</div>
|
||
<el-tabs tab-position="top" v-model="activeName" @tab-click="handleClick">
|
||
<!--表单信息-->
|
||
<el-tab-pane label="表单信息" name="1">
|
||
<el-col :span="16" :offset="4">
|
||
<div class="">
|
||
<!-- 复学 -->
|
||
<el-descriptions class="margin-top" title="" :column="3" size="medium" border style="width: 100%" v-if="dropOutForm">
|
||
<el-descriptions-item>
|
||
<template slot="label"> 学号 </template>
|
||
{{ form.stuNo }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template slot="label"> 姓名 </template>
|
||
{{ form.stuName }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template slot="label"> 性别 </template>
|
||
{{ form.gender }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template slot="label"> 院部 </template>
|
||
{{ form.departmentName }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template slot="label"> 年级 </template>
|
||
{{ form.gradeName }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template slot="label"> 班级 </template>
|
||
{{ form.className }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template slot="label"> 出生日期 </template>
|
||
{{ form.birthday }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label"> 家长姓名 </template>
|
||
{{ form.parentName }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label"> 家长电话 </template>
|
||
{{ form.parentPhone }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label"> 民族 </template>
|
||
{{ form.mz }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label"> 政治面貌 </template>
|
||
{{ form.politicalStatus }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label"> 籍贯：省/自治区/直辖市 </template>
|
||
{{ form.jg }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item span="3">
|
||
<template slot="label"> 复学类别 </template>
|
||
{{ reentrySchoolMethodFormat(form) }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item span="3">
|
||
<template slot="label"> 附件上传 </template>
|
||
<Affix v-model="form.attachmentUpload" :disabled="true"></Affix>
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item span="3">
|
||
<template slot="label"> 申请原因 </template>
|
||
{{ form.reasonApplying }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item span="3">
|
||
<template slot="label"> 签名 </template>
|
||
<img v-if="form.applySignature" :src="baseUrl + form.applySignature" width="200px" height="200px" class="avatar" />
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item span="3">
|
||
<template slot="label"> 辅导员 </template>
|
||
{{ form.applicantName }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item span="3">
|
||
<template slot="label"> 辅导员联系情况 </template>
|
||
{{ form.ideologicalEducation }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item span="3">
|
||
<template slot="label"> 在校时间说明 </template>
|
||
{{ form.instructionSchoolHours }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item span="3">
|
||
<template slot="label"> 辅导员处理意见 </template>
|
||
{{ form.ihandlingSuggestion }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item span="3">
|
||
<template slot="label"> 休学时间 </template>
|
||
{{ form.quitTime }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item span="3">
|
||
<template slot="label"> 复学时间 </template>
|
||
{{ form.reentryTime }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item span="3">
|
||
<template slot="label"> 复学班级 </template>
|
||
{{ form.className }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item span="3">
|
||
<template slot="label"> 复学原因 </template>
|
||
{{ form.reentryCause }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item span="3">
|
||
<template slot="label"> 复学年份 </template>
|
||
{{ form.reentryYear }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item span="3">
|
||
<template slot="label"> 复学文号 </template>
|
||
{{ form.reentryNumber }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item span="3">
|
||
<template slot="label"> 休学类别 </template>
|
||
{{ transactionTypeMethodFormat(form) }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
</el-col>
|
||
</el-tab-pane>
|
||
<!--流程流转记录-->
|
||
<el-tab-pane label="流转记录" name="2">
|
||
<!--flowRecordList-->
|
||
<el-col :span="16" :offset="4">
|
||
<div class="block">
|
||
<el-timeline>
|
||
<el-timeline-item v-for="(item, index) in flowRecordList" :key="index" :icon="setIcon(item.finishTime)" :color="setColor(item.finishTime)">
|
||
<p style="font-weight: 700">{{ item.taskName }}</p>
|
||
<el-card :body-style="{ padding: '10px' }">
|
||
<el-descriptions class="margin-top" :column="1" size="small" border>
|
||
<el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
|
||
<template slot="label"><i class="el-icon-user"></i>办理人</template>
|
||
{{ item.assigneeName }}
|
||
<el-tag type="info" size="mini">{{ item.deptName }}</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item v-if="item.candidate" label-class-name="my-label">
|
||
<template slot="label"><i class="el-icon-user"></i>候选办理</template>
|
||
{{ item.candidate }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label-class-name="my-label">
|
||
<template slot="label"><i class="el-icon-date"></i>接收时间</template>
|
||
{{ item.createTime }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item v-if="item.finishTime" label-class-name="my-label">
|
||
<template slot="label"><i class="el-icon-date"></i>处理时间</template>
|
||
{{ item.finishTime }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item v-if="item.duration" label-class-name="my-label">
|
||
<template slot="label"><i class="el-icon-time"></i>耗时</template>
|
||
{{ item.duration }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item v-if="item.comment" label-class-name="my-label">
|
||
<template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
|
||
{{ item.comment.comment }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
</el-col>
|
||
</el-tab-pane>
|
||
<!--流程图-->
|
||
<el-tab-pane label="流程图" name="3">
|
||
<flow :flowData="flowData" />
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { flowXmlAndNode, getProcessVariables } from '@/api/flowable/definition'
|
||
import { flowRecord } from '@/api/flowable/finished'
|
||
import { flowTaskForm } from '@/api/flowable/todo'
|
||
import { getRtStuReentrySchoolByProcInsId } from '@/api/routine/rtStuReentrySchool'
|
||
import { getClass } from '@/api/stuCQS/basedata/class'
|
||
import { getClassName } from '@/api/stuCQS/basedata/student'
|
||
import FlowRole from '@/components/flow/Role'
|
||
import FlowUser from '@/components/flow/User'
|
||
import Parser from '@/components/parser/Parser'
|
||
import download from '@/plugins/download'
|
||
import flow from '@/views/flowable/task/todo/detail/flow'
|
||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||
import pdf from 'vue-pdf'
|
||
|
||
export default {
|
||
name: 'DropOutIndex',
|
||
dicts: ['rt_penalty_type', 'rt_penalty_status', 'rt_quit_type', 'sys_teacher_kpi_filling_year', 'rt_logout_type', 'rt_transaction_type', 'rt_reentry_type'],
|
||
components: {
|
||
Parser,
|
||
flow,
|
||
FlowUser,
|
||
FlowRole,
|
||
pdf,
|
||
},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
// 模型xml数据
|
||
xmlData: '',
|
||
flowData: {},
|
||
activeName: '1',
|
||
// 部门名称
|
||
deptName: undefined,
|
||
// 部门树选项
|
||
// 用户表格数据
|
||
userList: null,
|
||
defaultProps: {
|
||
children: 'children',
|
||
label: 'label',
|
||
},
|
||
// 查询参数
|
||
queryParams: {
|
||
deptId: undefined,
|
||
},
|
||
// 遮罩层
|
||
loading: true,
|
||
flowRecordList: [], // 流程流转数据
|
||
formConfCopy: {},
|
||
src: null,
|
||
rules: {
|
||
ideologicalEducation: [{ required: true, message: '请输入辅导员联系情况', trigger: 'blur' }],
|
||
instructionSchoolHours: [{ required: true, message: '请输入在校时间说明', trigger: 'blur' }],
|
||
ihandlingSuggestion: [{ required: true, message: '请输入辅导员处理意见', trigger: 'blur' }],
|
||
quitTime: [{ required: true, message: '请输入休学时间', trigger: 'blur' }],
|
||
reentryTime: [{ required: true, message: '请选择复学时间', trigger: 'blur' }],
|
||
reentryClass: [{ required: true, message: '请选择班级', trigger: 'blur' }],
|
||
reentryCause: [{ required: true, message: '请输入退学原因', trigger: 'blur' }],
|
||
reentryYear: [{ required: true, message: '请复学年份', trigger: 'blur' }],
|
||
reentryNumber: [{ required: true, message: '请输入复学文号', trigger: 'blur' }],
|
||
quitType: [{ required: true, message: '请选择休学类别', trigger: 'blur' }],
|
||
}, // 表单校验
|
||
variablesForm: {}, // 流程变量数据
|
||
taskForm: {
|
||
returnTaskShow: false, // 是否展示回退表单
|
||
delegateTaskShow: false, // 是否展示回退表单
|
||
defaultTaskShow: true, // 默认处理
|
||
comment: '', // 意见内容
|
||
procInsId: '', // 流程实例编号
|
||
instanceId: '', // 流程实例编号
|
||
deployId: '', // 流程定义编号
|
||
taskId: '', // 流程任务编号
|
||
procDefId: '', // 流程编号
|
||
targetKey: '',
|
||
variables: {
|
||
variables: {},
|
||
},
|
||
penaltyNumber: '',
|
||
letterServiceContent: '',
|
||
violationDate: '',
|
||
relieveNumber: '',
|
||
dispositionServiceContent: '',
|
||
ideologicalEducation: '',
|
||
reentryClass: '',
|
||
},
|
||
assignee: null,
|
||
formConf: {}, // 默认表单数据
|
||
variables: [], // 流程变量数据
|
||
variablesData: {}, // 流程变量数据
|
||
returnTaskList: [], // 回退列表数据
|
||
completeTitle: null,
|
||
completeOpen: false,
|
||
returnTitle: null,
|
||
returnOpen: false,
|
||
rejectOpen: false,
|
||
rejectTitle: null,
|
||
userData: [],
|
||
checkSendUser: false, // 是否展示人员选择模块
|
||
checkSendRole: false, // 是否展示角色选择模块
|
||
checkType: 'single', // 选择类型
|
||
taskName: null, // 任务节点
|
||
startUser: null, // 发起人信息,
|
||
multiInstanceVars: '', // 会签节点
|
||
formKeyExist: false, // 当前节点是否存在表单
|
||
// 表单参数：目前是考勤表单
|
||
form: {},
|
||
// 学生基础信息
|
||
stuInfo: {},
|
||
baseUrl: process.env.VUE_APP_BASE_API,
|
||
category: null, // 流程分类
|
||
dropOutForm: false, // 复学申请表单
|
||
pdfURL: '', // pdf路径
|
||
classVlue1: [], //班级搜索选择
|
||
classVlue2: [], //班级添加修改选择
|
||
ClassNameList: [], //班级名称
|
||
}
|
||
},
|
||
created() {
|
||
if (this.$route.query) {
|
||
this.taskForm.deployId = this.$route.query.deployId
|
||
this.taskForm.taskId = this.$route.query.taskId
|
||
this.taskForm.procInsId = this.$route.query.procInsId
|
||
this.category = this.$route.query.category
|
||
// 如果任务名是其中的两个，则改变审批意见的输入框内容
|
||
if (this.category == 'reentry') {
|
||
|
||
this.dropOutForm = true
|
||
console.log('状态值',this.dropOutForm)
|
||
this.getRtStuReentrySchoolByProcInsId(this.taskForm.procInsId)
|
||
}
|
||
// 流程任务获取变量信息
|
||
if (this.taskForm.taskId) {
|
||
this.processVariables(this.taskForm.taskId)
|
||
}
|
||
this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId)
|
||
}
|
||
},
|
||
methods: {
|
||
transactionTypeMethodFormat(row, column) {
|
||
return this.selectDictLabel(this.dict.type.rt_transaction_type, row.quitCategory)
|
||
},
|
||
reentrySchoolMethodFormat(row, column) {
|
||
return this.selectDictLabel(this.dict.type.rt_reentry_type, row.reentryType)
|
||
},
|
||
penaltyTypeMethodFormat(row, column) {
|
||
return this.selectDictLabel(this.dict.type.rt_penalty_type, row.penaltyType)
|
||
},
|
||
quitSchoolMethodFormat(row, column) {
|
||
return this.selectDictLabel(this.dict.type.rt_quit_type, row.dropOutType)
|
||
},
|
||
// 查询复学表单信息
|
||
getRtStuReentrySchoolByProcInsId(procInsId) {
|
||
getRtStuReentrySchoolByProcInsId(procInsId).then((res) => {
|
||
this.form = res.data
|
||
this.taskForm.dropOutType = this.form.dropOutType
|
||
if (this.form.reentryClass) {
|
||
getClass(this.form.reentryClass).then((res) => {
|
||
this.form.className = res.data.className
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
handleClick(tab, event) {
|
||
if (tab.name === '3') {
|
||
flowXmlAndNode({ procInsId: this.taskForm.procInsId, deployId: this.taskForm.deployId }).then((res) => {
|
||
this.flowData = res.data
|
||
})
|
||
}
|
||
},
|
||
setIcon(val) {
|
||
if (val) {
|
||
return 'el-icon-check'
|
||
} else {
|
||
return 'el-icon-time'
|
||
}
|
||
},
|
||
setColor(val) {
|
||
if (val) {
|
||
return '#2bc418'
|
||
} else {
|
||
return '#b3bdbb'
|
||
}
|
||
},
|
||
// 用户信息选中数据
|
||
handleUserSelect(selection) {
|
||
if (selection) {
|
||
if (selection instanceof Array) {
|
||
const selectVal = selection.map((item) => item.userId)
|
||
if (this.multiInstanceVars) {
|
||
this.$set(this.taskForm.variables, this.multiInstanceVars, selectVal)
|
||
} else {
|
||
this.$set(this.taskForm.variables, 'approval', selectVal.join(','))
|
||
}
|
||
} else {
|
||
this.$set(this.taskForm.variables, 'approval', selection.userId.toString())
|
||
}
|
||
}
|
||
},
|
||
// 角色信息选中数据
|
||
handleRoleSelect(selection) {
|
||
if (selection) {
|
||
if (selection instanceof Array) {
|
||
const selectVal = selection.map((item) => item.roleId)
|
||
this.$set(this.taskForm.variables, 'approval', selectVal.join(','))
|
||
} else {
|
||
this.$set(this.taskForm.variables, 'approval', selection)
|
||
}
|
||
}
|
||
},
|
||
/** 流程流转记录 */
|
||
getFlowRecordList(procInsId, deployId) {
|
||
const that = this
|
||
const params = { procInsId: procInsId, deployId: deployId }
|
||
flowRecord(params)
|
||
.then((res) => {
|
||
that.flowRecordList = res.data.flowList
|
||
})
|
||
.catch((res) => {
|
||
this.goBack()
|
||
})
|
||
},
|
||
fillFormData(form, data) {
|
||
form.fields.forEach((item) => {
|
||
const val = data[item.__vModel__]
|
||
if (val) {
|
||
item.__config__.defaultValue = val
|
||
}
|
||
})
|
||
},
|
||
/** 获取流程变量内容 */
|
||
processVariables(taskId) {
|
||
if (taskId) {
|
||
// 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
|
||
getProcessVariables(taskId).then((res) => {
|
||
this.variablesData = res.data.variables
|
||
})
|
||
}
|
||
},
|
||
/** 流程节点表单 */
|
||
getFlowTaskForm(taskId) {
|
||
if (taskId) {
|
||
// 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
|
||
flowTaskForm({ taskId: taskId }).then((res) => {
|
||
this.variablesData = res.data.formData
|
||
this.taskForm.variables = res.data.formData
|
||
this.formKeyExist = res.data.formKeyExist
|
||
})
|
||
}
|
||
},
|
||
/** 加载审批任务弹框 */
|
||
handleComplete() {
|
||
// this.completeOpen = true;
|
||
// this.completeTitle = "流程审批";
|
||
this.submitForm(null)
|
||
},
|
||
/** 委派任务 */
|
||
handleDelegate() {
|
||
this.taskForm.delegateTaskShow = true
|
||
this.taskForm.defaultTaskShow = false
|
||
},
|
||
handleAssign() {},
|
||
/** 返回页面 */
|
||
goBack() {
|
||
// 关闭当前标签页并返回上个页面
|
||
const obj = { path: '/task/todo', query: { t: Date.now() } }
|
||
console.log(obj)
|
||
this.$tab.closeOpenPage(obj)
|
||
},
|
||
fileUpload() {
|
||
download.resource(this.pdfURL)
|
||
},
|
||
getClassNameList() {
|
||
getClassName().then((res) => {
|
||
this.ClassNameList = res.data
|
||
})
|
||
},
|
||
//搜索班级选择
|
||
handleChange1(value) {
|
||
this.form.reentryClass = value[2]
|
||
console.log('班级',value[2])
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.test-form {
|
||
margin: 15px auto;
|
||
width: 800px;
|
||
padding: 15px;
|
||
}
|
||
|
||
.clearfix:before,
|
||
.clearfix:after {
|
||
display: table;
|
||
content: '';
|
||
}
|
||
|
||
.clearfix:after {
|
||
clear: both;
|
||
}
|
||
|
||
.box-card {
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.el-tag + .el-tag {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.my-label {
|
||
background: #e1f3d8;
|
||
}
|
||
|
||
.indented-text {
|
||
text-indent: 1em;
|
||
}
|
||
|
||
.gongzhang {
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
position: relative;
|
||
}
|
||
|
||
.gongzhang img {
|
||
position: absolute;
|
||
top: -20px;
|
||
/* 根据需要调整图片的垂直位置 */
|
||
left: 0;
|
||
/* 根据需要调整图片的水平位置 */
|
||
}
|
||
|
||
.gongzhang p {
|
||
margin-top: 20px;
|
||
/* 根据需要调整两个 p 标签之间的垂直距离 */
|
||
}
|
||
|
||
.certificate-service {
|
||
.desc {
|
||
text-indent: 2em;
|
||
}
|
||
|
||
.stamp {
|
||
text-align: right;
|
||
& > div {
|
||
margin-top: -70px;
|
||
margin-right: 25px;
|
||
}
|
||
|
||
img {
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|