提交
This commit is contained in:
200
src/views/flow_task/components/loadTypeInit.vue
Normal file
200
src/views/flow_task/components/loadTypeInit.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" class="border">
|
||||
<el-divider content-position="left" style="font-weight: bolder; font-size: 18px">基本信息</el-divider>
|
||||
<el-form-item label="所属单位:">
|
||||
<el-input v-model="addData.orgNo" clearable placeholder="请输入" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select v-model="addData.loadType" clearable collapse-tags placeholder="请选择" disabled>
|
||||
<el-option
|
||||
v-for="item in interferenceType"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="干扰源用户名称:">
|
||||
<el-input v-model="addData.userName" clearable placeholder="请输入关键字" disabled></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="建档时间">
|
||||
<el-date-picker
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
v-model="addData.recordTime"
|
||||
disabled
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left" style="font-weight: bolder; font-size: 18px">
|
||||
入网评估报告上传
|
||||
</el-divider>
|
||||
<el-form-item class="item" label="文件名称:">
|
||||
<el-input v-model="documentName1" clearable placeholder="请输入填报名称" disabled></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button size="small" type="primary" icon="el-icon-download" @click="xz">下载</el-button>
|
||||
</el-form-item>
|
||||
<el-divider content-position="left" style="font-weight: bolder; font-size: 18px">
|
||||
入网评估结论填报
|
||||
</el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-form-item label="是否超标:" style="margin-top: 20px">
|
||||
<el-radio v-model="radio" label="0" disabled>是</el-radio>
|
||||
<el-radio v-model="radio" label="1" disabled>否</el-radio>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-form-item label="超标指标:" style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkedCities" disabled>
|
||||
<el-checkbox :disabled="eventDis" v-for="(city, ind) in cities" :label="city.id" :key="ind">
|
||||
{{ city.name }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="计划采取措施:" style="margin-top: 20px">
|
||||
<el-select v-model="addData.measures" placeholder="请选择" disabled>
|
||||
<el-option
|
||||
v-for="item in takeMeasures"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<br/>
|
||||
<el-form-item label="入网详情:" style="margin-top: 20px">
|
||||
<el-input
|
||||
v-model="addData.rwxq"
|
||||
placeholder="请输入入网详情"
|
||||
type="textarea"
|
||||
style="width: 500px"
|
||||
disabled
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {dicData} from "@/assets/commjs/dictypeData";
|
||||
import {getLoadTypeUserById} from "@/api/Process-supervision/interferencemanagement/interferencemanagement";
|
||||
|
||||
export default {
|
||||
name: "loadTypeInit",
|
||||
|
||||
props:{
|
||||
planId: {
|
||||
type: String, //类型
|
||||
required: true, //是否必须传入
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkedCities: [],
|
||||
cities: [],
|
||||
headers: {
|
||||
Authorization: window.sessionStorage.getItem('cntoken')
|
||||
},
|
||||
|
||||
WordColor: JSON.parse(window.localStorage.echartsColor).WordColor,
|
||||
url: '',
|
||||
total: 0,
|
||||
pageSize: 20,
|
||||
pageNum: 1,
|
||||
vh: '',
|
||||
height: null,
|
||||
chooseAudit:false,
|
||||
auditUser:'',
|
||||
radio: '0',
|
||||
textarea: '评估入网报告缺少XX指标,请整改后提交。',
|
||||
|
||||
//表单
|
||||
addData: {
|
||||
orgNo: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
|
||||
loadType: '',
|
||||
userName: '',
|
||||
recordTime: '',
|
||||
measures:'',
|
||||
rwxq:''
|
||||
},
|
||||
|
||||
documentName: '',
|
||||
documentName1: '',
|
||||
userNumber: '',
|
||||
|
||||
//干扰源类型
|
||||
interferenceType: [],
|
||||
//计划采取措施
|
||||
takeMeasures: [],
|
||||
undocumentednonlinearData: [],
|
||||
multipleSelection: [],
|
||||
loadTypeId:[],
|
||||
multipleSelection1: [],
|
||||
fileList: [],
|
||||
fileList1: [],
|
||||
|
||||
rwzt: [],
|
||||
auditUserList:[],//审核人下拉
|
||||
eventDis: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
this.rwzt = dicData('On-network_Status', [], 1)
|
||||
this.cities = dicData('Steady_Statis', [])
|
||||
|
||||
this.takeMeasures = dicData('Plan_Take', [], 1)
|
||||
this.takeMeasures.shift()
|
||||
|
||||
this.cities.shift()
|
||||
this.interferenceType = dicData('Interference_Source', [], 0)
|
||||
|
||||
this.init()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
init() {
|
||||
getLoadTypeUserById({
|
||||
id: this.planId
|
||||
}).then(res => {
|
||||
this.url = res.data.ifile == null ? '' : res.data.ifile
|
||||
this.addData.orgNo = res.data.orgName == null ? '' : res.data.orgName
|
||||
this.addData.loadType = res.data.loadType == null ? '' : res.data.loadType
|
||||
this.addData.userName = res.data.userName == null ? '' : res.data.userName
|
||||
this.addData.recordTime = res.data.recordTime == null ? '' : res.data.recordTime
|
||||
this.addData.measures = res.data.iplanStep == null ? '' : res.data.iplanStep
|
||||
this.addData.rwxq = res.data.idescription == null ? '' : res.data.idescription
|
||||
this.documentName1 = res.data.ifilePath == null ? '' : res.data.ifilePath
|
||||
this.radio = res.data.iisOverLimit == null ? '' : res.data.iisOverLimit.toString()
|
||||
this.checkedCities = res.data.ioverLimitTarget == null ? '' : res.data.ioverLimitTarget.split(',')
|
||||
})
|
||||
},
|
||||
xz() {
|
||||
window.open(this.url)
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.border {
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
801
src/views/flow_task/components/normalPlanInit.vue
Normal file
801
src/views/flow_task/components/normalPlanInit.vue
Normal file
@@ -0,0 +1,801 @@
|
||||
<template>
|
||||
|
||||
|
||||
<el-form class="border">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="10">
|
||||
<el-divider content-position="left" style="font-size: 18px; font-weight: bolder">
|
||||
基本信息
|
||||
</el-divider>
|
||||
<el-form :inline="true" :model="formdata" class="forms" :disabled="viewDetails" label-width="120px">
|
||||
<el-form-item label="普测负责单位:">
|
||||
<el-input v-model="formdata.orgName" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="计划开始时间:">
|
||||
<el-date-picker
|
||||
v-model.trim="formdata.planStartTime"
|
||||
type="date"
|
||||
placeholder="选择计划开始时间"
|
||||
value-format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="计划结束时间:">
|
||||
<el-date-picker
|
||||
v-model.trim="formdata.planEndTime"
|
||||
type="date"
|
||||
placeholder="选择计划结束时间"
|
||||
value-format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="普测计划编号:">
|
||||
<el-input
|
||||
:disabled="title == '普测计划修改'"
|
||||
v-model="formdata.planNo"
|
||||
placeholder="请输入普测计划编号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="计划名称:">
|
||||
<el-input v-model="formdata.planName" placeholder="请输入计划名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="测试负责人:">
|
||||
<el-input v-model="formdata.leader" placeholder="请输入测试负责人"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<el-divider content-position="left" style="font-size: 18px; font-weight: bolder">
|
||||
添加电站
|
||||
</el-divider>
|
||||
<div class="mb10" style="display: flex" v-if="!viewDetails">
|
||||
<el-input
|
||||
v-model="input"
|
||||
placeholder="请输入电站数"
|
||||
style="width: 240px"
|
||||
@input="handleEdit"
|
||||
class="mr10"
|
||||
></el-input>
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="!input.length > 0"
|
||||
icon="el-icon-circle-check"
|
||||
size="small"
|
||||
@click="Tick"
|
||||
>
|
||||
按配置勾选
|
||||
</el-button>
|
||||
</div>
|
||||
<el-tree
|
||||
:data="treeData"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
style="overflow-y: auto; height: 490px"
|
||||
default-expand-all
|
||||
:props="defaultProps"
|
||||
:check-strictly="true"
|
||||
ref="tree"
|
||||
></el-tree>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider v-if="title == '计划详情' && formdata.status == 2 && formdata.status == 3" content-position="left"
|
||||
style="font-size: 18px; font-weight: bolder">
|
||||
审核意见
|
||||
</el-divider>
|
||||
<el-input v-if="title == '计划详情' && formdata.status == 2 && formdata.status == 3" disabled type="textarea"
|
||||
:rows="2" v-model="textarea">
|
||||
</el-input>
|
||||
<div slot="footer" style="display: flex; justify-content: center" v-if="!viewDetails"></div>
|
||||
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
import Timeinterval from '@/views/components/Timeinterval.vue'
|
||||
import {dicData} from '@/assets/commjs/dictypeData'
|
||||
import {
|
||||
queryPlan,
|
||||
exportSurveyPlan,
|
||||
getGeneratrixByCondition,
|
||||
getstatationStatList,
|
||||
addPlan,
|
||||
initDetpStataionTree,
|
||||
querySubStatation,
|
||||
planStatus,
|
||||
getAuditUser, submitAuditUser, MultipartFile, queryPlanResult, surveyResultDownload, delPlan
|
||||
} from '@/api/Process-supervision/tiaoHarmonicmanagement/harmonicmanagement'
|
||||
|
||||
export default {
|
||||
name: "normalPlanInit",
|
||||
components: {Area, Timeinterval},
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
title: '',
|
||||
height: null,
|
||||
isLoading: false,
|
||||
isLoading1: false,
|
||||
isLoading2: false,
|
||||
isLoading3: false,
|
||||
viewDetails: false,
|
||||
planAddition: false,
|
||||
failed: false,
|
||||
universalBus: false,
|
||||
|
||||
chooseAudit: false,
|
||||
dialogVisible: false,
|
||||
downLoad: false,
|
||||
|
||||
item: ['', ''],
|
||||
Downloaddata: [],
|
||||
|
||||
textarea: '',
|
||||
// 查询数据
|
||||
ruleForm: {
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
status: '',
|
||||
planStartTime: '',
|
||||
planEndTime: '',
|
||||
orgNo: ''
|
||||
},
|
||||
form: {
|
||||
deptId: '',
|
||||
powerStationId: '',
|
||||
powerStationName: '',
|
||||
powerStationVoltageLevel: ''
|
||||
},
|
||||
headers: {
|
||||
Authorization: window.sessionStorage.getItem('cntoken')
|
||||
},
|
||||
formdata: {
|
||||
orgName: '',
|
||||
orgNo: '',
|
||||
planStartTime: '',
|
||||
planEndTime: '',
|
||||
planNo: '',
|
||||
planName: '',
|
||||
leader: '',
|
||||
rgeneralSurveyPlanDetailAddParm: [],
|
||||
subCount: '',
|
||||
busCount: ''
|
||||
},
|
||||
temp: {
|
||||
id: void 0,
|
||||
fileName: '',
|
||||
fileType: void 0
|
||||
},
|
||||
|
||||
//计划状态
|
||||
planstatus: [
|
||||
{
|
||||
id: 0,
|
||||
value: '选项1',
|
||||
label: '新建'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
value: '选项1',
|
||||
label: '待审核'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: '选项1',
|
||||
label: '审核未通过'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
value: '选项1',
|
||||
label: '已发布'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
value: '选项1',
|
||||
label: '已完成'
|
||||
}
|
||||
],
|
||||
//所属单位
|
||||
companyData: [],
|
||||
//变电站/换流站电压等级
|
||||
voltageLevelData: [],
|
||||
//变电站/换流站名称
|
||||
statationName: [],
|
||||
exportData: [],
|
||||
rightData: [],
|
||||
planmanagementData: [],
|
||||
detailData: [],
|
||||
universalBusData1: [],
|
||||
universalBusData2: [],
|
||||
multipleSelection: [],
|
||||
multipleSelection1: [],
|
||||
multipleSelection2: [],
|
||||
device: '',
|
||||
treeData: [],
|
||||
auditUserList: [],
|
||||
auditUser: '',
|
||||
planNo: [],
|
||||
fileList: [],
|
||||
formLoading: false,
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
disabled: 'disabled'
|
||||
},
|
||||
timeOptions: [
|
||||
{label: '年份', value: 1},
|
||||
{label: '季度', value: 2},
|
||||
{label: '月份', value: 3}
|
||||
// { label: "周", value: 4 },
|
||||
// // { label: "自定义", value: 5 },
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.ruleForm.orgNo = JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
this.form.deptId = JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
//确认发起审核
|
||||
auditSubmit() {
|
||||
if (!this.auditUser || this.auditUser === '') {
|
||||
this.$message({
|
||||
message: '请选择审核人!',
|
||||
type: 'warning'
|
||||
})
|
||||
return false;
|
||||
}
|
||||
|
||||
let data = {planIds: this.planNo, auditUser: this.auditUser}
|
||||
submitAuditUser(data).then(res => {
|
||||
if (res && res.code == 'A0000') {
|
||||
this.$message({
|
||||
message: '提交成功!',
|
||||
type: 'success'
|
||||
})
|
||||
this.chooseAudit = false
|
||||
this.initPage()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//获取审核人列表
|
||||
getAuditUser() {
|
||||
let param = {roleType: 3}
|
||||
getAuditUser(param).then(res => {
|
||||
if (res && res.code === 'A0000') {
|
||||
this.auditUserList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// 合计禁止点击
|
||||
selectable(row, index) {
|
||||
// 地址不是 "秦皇岛市海港区居民" 才能被选中
|
||||
if (!row.selectable) {
|
||||
return true
|
||||
}
|
||||
// 函数必须有返回值且是布尔值
|
||||
// 页面刷新后该函数会执行 N 次进行判断(N 为表格行数)
|
||||
// 如果没有返回值则默认返回false(全部无法选中)
|
||||
},
|
||||
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
//电压等级
|
||||
this.voltageLevelData = dicData('Dev_Voltage', [])
|
||||
},
|
||||
//获取数据
|
||||
// getData(){
|
||||
// //变电站名称
|
||||
// getstatationStatList().then(res=>{
|
||||
// // console.log(res);
|
||||
// this.statationName=res.data
|
||||
// });
|
||||
// },
|
||||
changeFn(val) {
|
||||
// console.log(val);
|
||||
this.statationName.forEach(item => {
|
||||
if (item.powerId == val) {
|
||||
this.form.powerStationName = item.powerName
|
||||
}
|
||||
})
|
||||
},
|
||||
// 在 Input 值改变时触发
|
||||
handleEdit(e) {
|
||||
let value = e.replace(/^(0+)|[^\d]+/g, '') // 以0开头或者输入非数字，会被替换成空
|
||||
value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数
|
||||
this.input = value
|
||||
},
|
||||
// 提交审核
|
||||
planReviewFn() {
|
||||
|
||||
if (this.multipleSelection.length === 0) {
|
||||
this.$message({
|
||||
message: '请选择至少一条计划提交审核',
|
||||
type: 'warning'
|
||||
})
|
||||
return false;
|
||||
}
|
||||
|
||||
//需要保证当前用户只能操作自己建的计划
|
||||
|
||||
|
||||
this.planNo = []
|
||||
let flag = true
|
||||
let flagFile = true
|
||||
this.multipleSelection.forEach(item => {
|
||||
if (item.status == 0 || item.status == 2) {
|
||||
this.planNo.push(item.planNo)
|
||||
} else {
|
||||
flag = false
|
||||
}
|
||||
|
||||
if (item.isFileUpload !== 1) {
|
||||
flagFile = false
|
||||
}
|
||||
})
|
||||
|
||||
if (!flagFile) {
|
||||
this.$message({
|
||||
message: '请选择已经上传普测报告的计划进行提交',
|
||||
type: 'warning'
|
||||
})
|
||||
return false;
|
||||
}
|
||||
|
||||
if (flag && flagFile) {
|
||||
this.chooseAudit = true;
|
||||
|
||||
} else {
|
||||
this.$message({
|
||||
message: '请选择新建、未通过的计划进行审核！',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
},
|
||||
//查询
|
||||
initPage() {
|
||||
this.isLoading = true
|
||||
queryPlan(this.ruleForm).then(res => {
|
||||
this.isLoading = false
|
||||
this.planmanagementData = res.data.records
|
||||
})
|
||||
},
|
||||
// 递归函数，给每层树赋值disabled
|
||||
/* setDisabled(treeData) {
|
||||
treeData.forEach(item => {
|
||||
if (item.id !== this.sendMailAccountList.sender) {
|
||||
this.$set(item, 'disabled', true)
|
||||
if (item.children) {
|
||||
this.setDisabled(item.children)
|
||||
}
|
||||
}
|
||||
})
|
||||
},*/
|
||||
|
||||
//查看详情
|
||||
viewDetailsFn(row) {
|
||||
initDetpStataionTree({
|
||||
orgId: JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
}).then(res => {
|
||||
this.treeData = res.data
|
||||
})
|
||||
this.defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
// disabled: 'flag'
|
||||
}
|
||||
this.title = '计划详情'
|
||||
this.textarea = row.checkComment
|
||||
this.formdata = row
|
||||
setTimeout(() => {
|
||||
this.$refs.tree.setCheckedKeys(row.subIds)
|
||||
}, 0)
|
||||
this.planAddition = true
|
||||
this.viewDetails = true
|
||||
},
|
||||
|
||||
//删除计划
|
||||
deletePlan(row) {
|
||||
this.$confirm('是否确认删除计划?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
|
||||
let arr = [row.planNo]
|
||||
delPlan(arr).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
this.$message({
|
||||
message: '删除成功!',
|
||||
type: 'success'
|
||||
})
|
||||
this.initPage()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
//计划新增
|
||||
planAdditionFn() {
|
||||
initDetpStataionTree({
|
||||
orgId: JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
}).then(res => {
|
||||
this.treeData = res.data
|
||||
})
|
||||
this.defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
disabled: 'disabled'
|
||||
}
|
||||
this.title = '普测计划新增'
|
||||
this.planAddition = true
|
||||
this.formdata = {
|
||||
orgName: JSON.parse(window.sessionStorage.getItem('Info')).deptName,
|
||||
orgNo: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
|
||||
planStartTime: '',
|
||||
planEndTime: '',
|
||||
planNo: '',
|
||||
planName: '',
|
||||
leader: '',
|
||||
rgeneralSurveyPlanDetailAddParm: [],
|
||||
substation: '',
|
||||
Bus: ''
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.$refs.tree.setCheckedKeys([])
|
||||
}, 0)
|
||||
// this.isLoading2 = true;
|
||||
// getDetailData().then((res)=>{
|
||||
// this.isLoading2 = false;
|
||||
// this.formdata.rgeneralSurveyPlanDetailAddParm = res.data
|
||||
// })
|
||||
},
|
||||
//普测计划提交
|
||||
submitFn() {
|
||||
|
||||
this.formdata.subIds = this.$refs.tree.getCheckedKeys()
|
||||
addPlan(this.formdata).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
if (this.title == '普测计划新增') {
|
||||
this.$message({
|
||||
message: '新增成功!',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: '修改成功!',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
this.planAddition = false
|
||||
this.initPage()
|
||||
}
|
||||
})
|
||||
},
|
||||
//普测计划保存
|
||||
// preservationFn(){
|
||||
// this.planAddition=false;
|
||||
// },
|
||||
//普测计划取消
|
||||
cancelFn() {
|
||||
this.planAddition = false
|
||||
this.viewDetails = false
|
||||
},
|
||||
//添加普测母线
|
||||
universalBusFn() {
|
||||
this.form = {
|
||||
deptId: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
|
||||
powerStationId: '',
|
||||
powerStationName: '',
|
||||
powerStationVoltageLevel: ''
|
||||
}
|
||||
this.universalBus = true
|
||||
this.AddQuery()
|
||||
},
|
||||
//添加查询
|
||||
AddQuery() {
|
||||
this.isLoading3 = true
|
||||
getGeneratrixByCondition(this.form).then(res => {
|
||||
this.isLoading3 = false
|
||||
this.universalBusData1 = res.data
|
||||
this.universalBusData2 = this.formdata.rgeneralSurveyPlanDetailAddParm
|
||||
this.universalBusData2.forEach(item => {
|
||||
this.universalBusData1.forEach((data, index) => {
|
||||
if (data.busbarId == item.busbarId) {
|
||||
this.universalBusData1.splice(index, 1)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
// 数据过滤
|
||||
formFilter(row, column) {
|
||||
if (column.property == 'voltageLevel') {
|
||||
let title = ''
|
||||
this.voltageLevelData.forEach(item => {
|
||||
if (item.value == row.voltageLevel) {
|
||||
title = item.label
|
||||
}
|
||||
})
|
||||
return title
|
||||
} else {
|
||||
return row[column.property]
|
||||
}
|
||||
},
|
||||
//将左边表格选中的数据添加到右边表格
|
||||
addDataFn() {
|
||||
this.multipleSelection1.forEach(item => {
|
||||
// debugger
|
||||
this.universalBusData2.push(item)
|
||||
this.universalBusData1.forEach((data, index) => {
|
||||
if (data.busbarId == item.busbarId) {
|
||||
this.universalBusData1.splice(index, 1)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
//删除右侧表哥选中的数据
|
||||
deleteData() {
|
||||
this.multipleSelection2.forEach(item => {
|
||||
this.universalBusData1.push(item)
|
||||
this.universalBusData2.forEach((data, index) => {
|
||||
if (data.busbarId == item.busbarId) {
|
||||
this.universalBusData2.splice(index, 1)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
//清空数据
|
||||
emptyFn() {
|
||||
this.universalBusData2.forEach(item => {
|
||||
this.universalBusData1.push(item)
|
||||
})
|
||||
this.universalBusData2 = []
|
||||
},
|
||||
//添加普测母线确认
|
||||
determineFn() {
|
||||
this.universalBus = false
|
||||
this.formdata.rgeneralSurveyPlanDetailAddParm = this.universalBusData2
|
||||
// console.log(this.formdata.rgeneralSurveyPlanDetailAddParm);
|
||||
let substation = []
|
||||
let bus = []
|
||||
this.formdata.rgeneralSurveyPlanDetailAddParm.forEach(item => {
|
||||
substation.push(item.subId)
|
||||
bus.push(item.busbarId)
|
||||
})
|
||||
substation = [...new Set(substation)]
|
||||
bus = [...new Set(bus)]
|
||||
this.formdata.subCount = substation.length
|
||||
this.formdata.busCount = bus.length
|
||||
},
|
||||
//添加普测母线取消
|
||||
cancel() {
|
||||
this.universalBus = false
|
||||
},
|
||||
//编辑
|
||||
editFn(row) {
|
||||
this.input = ''
|
||||
initDetpStataionTree({
|
||||
orgId: JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
}).then(res => {
|
||||
this.treeData = res.data
|
||||
})
|
||||
this.defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
disabled: 'disabled'
|
||||
}
|
||||
this.title = '普测计划修改'
|
||||
this.planAddition = true
|
||||
|
||||
this.formdata = JSON.parse(JSON.stringify(row))
|
||||
setTimeout(() => {
|
||||
this.$refs.tree.setCheckedKeys(row.subIds)
|
||||
}, 0)
|
||||
},
|
||||
//导出
|
||||
exportFn() {
|
||||
if (this.multipleSelection.length != 0) {
|
||||
exportSurveyPlan(this.exportData).then(res => {
|
||||
let blob = new Blob([res], {
|
||||
type: 'application/vnd.ms-excel'
|
||||
})
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url // link.download = "电压暂降事件分析报告"; // 设置下载的文件名
|
||||
link.download = '普测计划信息.xls' // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link)
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: '请选择数据',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//导出
|
||||
exportExportFn() {
|
||||
if (this.multipleSelection.length == 0 || this.multipleSelection.length > 1) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '请选择1条数据!!!',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
} else {
|
||||
this.downLoad = true
|
||||
this.isLoading1 = true
|
||||
let form = {
|
||||
planNo: this.planNo
|
||||
}
|
||||
surveyResultDownload(form).then(res => {
|
||||
|
||||
this.isLoading1 = false
|
||||
this.Downloaddata = res.data
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//计划文件上传
|
||||
uploadFn() {
|
||||
if (this.multipleSelection.length == 0 || this.multipleSelection.length > 1) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '请选择1条数据!!!',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
if (this.multipleSelection[0].status !== 0) {
|
||||
this.$message.warning("当前状态不支持上传普测报告");
|
||||
return false
|
||||
}
|
||||
|
||||
|
||||
this.planNo.push(this.multipleSelection[0].planNo)
|
||||
|
||||
this.dialogVisible = true
|
||||
this.fileList = []
|
||||
|
||||
|
||||
},
|
||||
handleChange(file, fileList) {
|
||||
this.fileList = fileList
|
||||
},
|
||||
submitUpload() {
|
||||
const formData = new FormData()
|
||||
formData.append('planId', this.planNo[0])
|
||||
this.fileList.forEach(item => {
|
||||
formData.append('file', item.raw)
|
||||
// console.log(item.raw, item)
|
||||
})
|
||||
|
||||
|
||||
MultipartFile(formData) //后端上传接口
|
||||
.then(res => {
|
||||
// console.log(res);
|
||||
// this.$emit('added')
|
||||
this.dialogVisible = false
|
||||
this.initPage()
|
||||
})
|
||||
.catch(err => {
|
||||
/// console.log(err);
|
||||
})
|
||||
},
|
||||
//查询
|
||||
onsubmit() {
|
||||
this.isLoading = true
|
||||
|
||||
queryPlanResult(this.ruleForm).then(res => {
|
||||
this.isLoading = false
|
||||
this.resultsmanagementData = res.data.records
|
||||
})
|
||||
},
|
||||
|
||||
// 按配置勾选
|
||||
Tick() {
|
||||
querySubStatation({
|
||||
statetionNum: this.input
|
||||
}).then(res => {
|
||||
this.$refs.tree.setCheckedKeys(res.data.subIds)
|
||||
})
|
||||
},
|
||||
//勾选
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val
|
||||
this.multipleSelection.forEach(item => {
|
||||
this.exportData.push(item.planNo)
|
||||
})
|
||||
},
|
||||
handleSelectionChange1(val) {
|
||||
this.multipleSelection1 = val
|
||||
//console.log(this.multipleSelection1, this.universalBusData1);
|
||||
},
|
||||
handleSelectionChange2(val) {
|
||||
this.multipleSelection2 = val
|
||||
// console.log(this.multipleSelection2, this.universalBusData2);
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.ruleForm.orgNo = data.id
|
||||
},
|
||||
handleNodeClick1(data) {
|
||||
// console.log(data);
|
||||
// if (data.code != null) {
|
||||
let form = {
|
||||
deptId: data.id
|
||||
}
|
||||
// 变电站名称
|
||||
getstatationStatList(form).then(res => {
|
||||
this.statationName = res.data
|
||||
})
|
||||
// }
|
||||
this.form.deptId = data.id
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.ruleForm.pageSize = val
|
||||
this.initPage()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.ruleForm.currentPage = val
|
||||
this.initPage()
|
||||
},
|
||||
//序号
|
||||
rowClassName({row, rowIndex}) {
|
||||
// console.log(row,rowIndex);
|
||||
if (row.voltageLevel == '') {
|
||||
row.number = '合计'
|
||||
} else {
|
||||
row.number = rowIndex + 1
|
||||
}
|
||||
},
|
||||
//重置
|
||||
resetFn() {
|
||||
this.status = ''
|
||||
this.$refs.area.form.valueTitle = JSON.parse(window.sessionStorage.getItem('Info')).deptName
|
||||
this.$refs.interval.intervald = 3
|
||||
this.$refs.interval.nowTime()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.border {
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.border-title {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
margin-top: -20px;
|
||||
margin-left: 10px;
|
||||
text-align: center;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.element-uithree .el-tree{
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
578
src/views/flow_task/definition/index.vue
Normal file
578
src/views/flow_task/definition/index.vue
Normal file
@@ -0,0 +1,578 @@
|
||||
<template>
|
||||
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="deployTime">
|
||||
<el-date-picker clearable size="small"
|
||||
v-model="queryParams.deployTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<!-- <el-col :span="1.5">-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- plain-->
|
||||
<!-- icon="el-icon-upload"-->
|
||||
<!-- size="mini"-->
|
||||
<!-- @click="handleImport"-->
|
||||
<!-- >导入</el-button>-->
|
||||
<!-- </el-col>-->
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleLoadXml"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
<el-alert title="流程设计说明" type="success">
|
||||
<template slot='title'>
|
||||
<p>流程设计说明:</p>
|
||||
<div>1、XML文件中的流程定义id属性用作流程定义的key参数。</div>
|
||||
<div>2、XML文件中的流程定义name属性用作流程定义的name参数。如果未给定name属性，会使用id作为name。</div>
|
||||
<div>3、当每个唯一key的流程第一次部署时，指定版本为1。对其后所有使用相同key的流程定义，部署时版本会在该key当前已部署的最高版本号基础上加1。key参数用于区分流程定义。</div>
|
||||
<div>4、id参数设置为{processDefinitionKey}:{processDefinitionVersion}:{generated-id}，其中generated-id是一个唯一数字，用以保证在集群环境下，流程定义缓存中，流程id的唯一性。</div>
|
||||
</template>
|
||||
</el-alert>
|
||||
<el-table v-loading="loading" fit :data="definitionList" border @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<!-- <el-table-column label="流程编号" align="center" prop="deploymentId" :show-overflow-tooltip="true"/>-->
|
||||
<el-table-column label="流程标识" align="center" prop="flowKey" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="流程分类" align="center" prop="category" />
|
||||
<el-table-column label="流程名称" align="center" width="120" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleReadImage(scope.row.deploymentId)">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="业务功能" align="center" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<label v-if="scope.row.formId == 1" type="text">
|
||||
谐波普测计划
|
||||
</label>
|
||||
<label v-else-if="scope.row.formId == 2" type="text">
|
||||
干扰源用户管理
|
||||
</label>
|
||||
<label v-else>暂无表单</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程版本" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="medium" >v{{ scope.row.version }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
|
||||
<el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="部署时间" align="center" prop="deploymentTime" width="180"/>
|
||||
<el-table-column label="操作" width="250" fixed="right"class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleLoadXml(scope.row)" icon="el-icon-edit-outline" type="text" size="small">设计</el-button>
|
||||
<el-button @click="handleAddForm(scope.row)" icon="el-icon-edit-el-icon-s-promotion" type="text" size="small" v-if="scope.row.formId == null">配置主表单</el-button>
|
||||
<el-button @click="handleUpdateSuspensionState(scope.row)" icon="el-icon-video-pause" type="text" size="small" v-if="scope.row.suspensionState === 1">挂起</el-button>
|
||||
<el-button @click="handleUpdateSuspensionState(scope.row)" icon="el-icon-video-play" type="text" size="small" v-if="scope.row.suspensionState === 2">激活</el-button>
|
||||
<el-button @click="handleDelete(scope.row)" icon="el-icon-delete" type="text" size="small" >删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改流程定义对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="看看" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入看看" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- bpmn20.xml导入对话框 -->
|
||||
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:limit="1"
|
||||
accept=".xml"
|
||||
:headers="upload.headers"
|
||||
:action="upload.url + '?name=' + upload.name+'&category='+ upload.category"
|
||||
:disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:auto-upload="false"
|
||||
drag
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">
|
||||
将文件拖到此处，或
|
||||
<em>点击上传</em>
|
||||
</div>
|
||||
<div class="el-upload__tip" slot="tip">
|
||||
流程名称：<el-input v-model="upload.name"/>
|
||||
流程分类：
|
||||
<div>
|
||||
<!-- <el-input v-model="upload.category"/>-->
|
||||
<el-select v-model="upload.category" placeholder="请选择流程分类">
|
||||
<el-option
|
||||
v-for="dict in upload.category"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“bpmn20.xml”格式文件！</div>
|
||||
</el-upload>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||||
<el-button @click="upload.open = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 流程图 -->
|
||||
<el-dialog :title="readImage.title" :visible.sync="readImage.open" width="70%" append-to-body>
|
||||
<!-- <el-image :src="readImage.src"></el-image> -->
|
||||
<flow :flowData="flowData"/>
|
||||
</el-dialog>
|
||||
|
||||
<!--表单配置详情-->
|
||||
<el-dialog :title="formTitle" :visible.sync="formConfOpen" width="50%" append-to-body>
|
||||
<div class="test-form">
|
||||
<parser :key="new Date().getTime()" :form-conf="formConf" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!--挂载表单-->
|
||||
<el-dialog :title="formDeployTitle" :visible.sync="formDeployOpen" width="40%" append-to-body>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24">
|
||||
<el-table
|
||||
ref="singleTable"
|
||||
:data="formList"
|
||||
border
|
||||
highlight-current-row
|
||||
@current-change="handleCurrentChange"
|
||||
style="width: 100%">
|
||||
<el-table-column label="功能编号" align="center" prop="formId" />
|
||||
<el-table-column label="功能名称" align="center" prop="formName" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" @click="submitFormDeploy(scope.row)">确定</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
|
||||
</el-col>
|
||||
<!-- <el-col :span="14" :xs="24">
|
||||
<div v-if="currentRow">
|
||||
<parser :key="new Date().getTime()" :form-conf="currentRow" />
|
||||
</div>
|
||||
</el-col>-->
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
|
||||
<!-- <!–流程设计器–>-->
|
||||
<!-- <el-dialog-->
|
||||
<!-- title="流程配置"-->
|
||||
<!-- :visible.sync="dialogVisible"-->
|
||||
<!-- :close-on-press-escape="false"-->
|
||||
<!-- :fullscreen=true-->
|
||||
<!-- :before-close="handleClose"-->
|
||||
<!-- append-to-body>-->
|
||||
<!-- <Model :deployId="deployId"/>-->
|
||||
<!-- </el-dialog>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listDefinition,
|
||||
updateState,
|
||||
delDeployment,
|
||||
addDeployment,
|
||||
updateDeployment,
|
||||
exportDeployment,
|
||||
definitionStart,
|
||||
flowXmlAndNode, assFormWithDeploy
|
||||
} from "@/api/flowable/definition";
|
||||
import { getToken } from "@/utils/auth";
|
||||
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import flow from '@/views/flow_task/myProcess/send/flow'
|
||||
import Model from './model';
|
||||
|
||||
export default {
|
||||
name: "Definition",
|
||||
|
||||
components: {
|
||||
Parser,
|
||||
flow,
|
||||
Model
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dicts:[],
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
dialogVisible: false,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 流程定义表格数据
|
||||
definitionList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
formConfOpen: false,
|
||||
formTitle: "",
|
||||
formDeployOpen: false,
|
||||
formDeployTitle: "",
|
||||
formList: [{formId:'1',formName:'谐波普测计划'},{formId:'2',formName:'干扰源用户管理'},{formId:'3',formName:'电能质量问题管理'}],
|
||||
formTotal:0,
|
||||
formConf: {}, // 默认表单数据
|
||||
readImage:{
|
||||
open: false,
|
||||
src: "",
|
||||
},
|
||||
// bpmn.xml 导入
|
||||
upload: {
|
||||
// 是否显示弹出层（xml导入）
|
||||
open: false,
|
||||
// 弹出层标题（xml导入）
|
||||
title: "",
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
name: null,
|
||||
category: null,
|
||||
// 设置上传的请求头部
|
||||
headers: { Authorization: "Bearer " + getToken() },
|
||||
// 上传的地址
|
||||
url: process.env.VUE_APP_BASE_API + "/flowable/definition/import"
|
||||
},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
category: null,
|
||||
key: null,
|
||||
tenantId: null,
|
||||
deployTime: null,
|
||||
derivedFrom: null,
|
||||
derivedFromRoot: null,
|
||||
parentDeploymentId: null,
|
||||
engineVersion: null
|
||||
},
|
||||
formQueryParams:{
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
// 挂载表单到流程实例
|
||||
formDeployParam:{
|
||||
formId: null,
|
||||
deployId: null
|
||||
},
|
||||
deployId: '',
|
||||
currentRow: null,
|
||||
// xml
|
||||
flowData: {},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
activated() {
|
||||
const time = this.$route.query.t;
|
||||
if (time != null) {
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 查询流程定义列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listDefinition(this.queryParams).then(response => {
|
||||
this.definitionList = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确定要关闭吗？关闭未保存的修改都会丢失？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
done();
|
||||
}).catch(() => {});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
name: null,
|
||||
category: null,
|
||||
key: null,
|
||||
tenantId: null,
|
||||
deployTime: null,
|
||||
derivedFrom: null,
|
||||
derivedFromRoot: null,
|
||||
parentDeploymentId: null,
|
||||
engineVersion: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.deploymentId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加流程定义";
|
||||
},
|
||||
/** 跳转到流程设计页面 */
|
||||
handleLoadXml(row){
|
||||
// this.dialogVisible = true;
|
||||
// this.deployId = row.deploymentId;
|
||||
this.$router.push({ path: '/flowable/definition/model',query: { deployId: row.deploymentId }})
|
||||
},
|
||||
/** 流程图查看 */
|
||||
handleReadImage(deployId){
|
||||
this.readImage.title = "流程图";
|
||||
this.readImage.open = true;
|
||||
// this.readImage.src = process.env.VUE_APP_BASE_API + "/flowable/definition/readImage/" + deploymentId;
|
||||
flowXmlAndNode({deployId:deployId}).then(res => {
|
||||
this.flowData = res.data;
|
||||
})
|
||||
},
|
||||
/** 表单查看 */
|
||||
handleForm(formId){
|
||||
getForm(formId).then(res =>{
|
||||
this.formTitle = "表单详情";
|
||||
this.formConfOpen = true;
|
||||
this.formConf = JSON.parse(res.data.formContent)
|
||||
})
|
||||
},
|
||||
/** 启动流程 */
|
||||
handleDefinitionStart(row){
|
||||
definitionStart(row.id).then(res =>{
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
})
|
||||
},
|
||||
/** 挂载表单弹框 */
|
||||
handleAddForm(row){
|
||||
this.formDeployParam.deployId = row.id
|
||||
this.ListFormDeploy()
|
||||
},
|
||||
/** 挂载表单列表 */
|
||||
ListFormDeploy(){
|
||||
|
||||
|
||||
this.formDeployOpen = true;
|
||||
this.formDeployTitle = "挂载表单";
|
||||
|
||||
},
|
||||
// /** 更改挂载表单弹框 */
|
||||
// handleEditForm(row){
|
||||
// this.formDeployParam.deployId = row.deploymentId
|
||||
// const queryParams = {
|
||||
// pageNum: 1,
|
||||
// pageSize: 10
|
||||
// }
|
||||
// listForm(queryParams).then(res =>{
|
||||
// this.formList = res.rows;
|
||||
// this.formDeployOpen = true;
|
||||
// this.formDeployTitle = "挂载表单";
|
||||
// })
|
||||
// },
|
||||
/** 挂载表单 */
|
||||
submitFormDeploy(row){
|
||||
this.formDeployParam.formId = row.formId
|
||||
assFormWithDeploy(this.formDeployParam).then(res =>{
|
||||
this.$message.success(res.message);
|
||||
this.formDeployOpen = false;
|
||||
this.getList();
|
||||
})
|
||||
},
|
||||
handleCurrentChange(data) {
|
||||
if (data) {
|
||||
this.currentRow = JSON.parse(data.formContent);
|
||||
}
|
||||
},
|
||||
/** 挂起/激活流程 */
|
||||
handleUpdateSuspensionState(row){
|
||||
let state = 1;
|
||||
if (row.suspensionState === 1) {
|
||||
state = 2
|
||||
}
|
||||
const params = {
|
||||
deployId: row.deploymentId,
|
||||
state: state
|
||||
}
|
||||
updateState(params).then(res => {
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.deploymentId || this.ids
|
||||
getDeployment(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改流程定义";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateDeployment(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addDeployment(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const deploymentIds = row.deploymentId || this.ids;
|
||||
this.$confirm('是否确认删除流程定义编号为"' + deploymentIds + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
let arr = []
|
||||
arr.push(deploymentIds)
|
||||
return delDeployment(arr);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$message.success('删除成功')
|
||||
})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm('是否确认导出所有流程定义数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return exportDeployment(queryParams);
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
})
|
||||
},
|
||||
/** 导入bpmn.xml文件 */
|
||||
handleImport(){
|
||||
this.upload.title = "bpmn20.xml文件导入";
|
||||
this.upload.open = true;
|
||||
},
|
||||
// 文件上传中处理
|
||||
handleFileUploadProgress(event, file, fileList) {
|
||||
this.upload.isUploading = true;
|
||||
},
|
||||
// 文件上传成功处理
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
this.upload.open = false;
|
||||
this.upload.isUploading = false;
|
||||
this.$refs.upload.clearFiles();
|
||||
this.$message(response.msg);
|
||||
this.getList();
|
||||
},
|
||||
// 提交上传文件
|
||||
submitFileForm() {
|
||||
this.$refs.upload.submit();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
176
src/views/flow_task/definition/model.vue
Normal file
176
src/views/flow_task/definition/model.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div>
|
||||
<bpmn-modeler
|
||||
ref="refNode"
|
||||
:xml="xml"
|
||||
:users="users"
|
||||
:groups="groups"
|
||||
:categorys="categorys"
|
||||
:exps="exps"
|
||||
:is-view="false"
|
||||
@save="save"
|
||||
@showXML="showXML"
|
||||
/>
|
||||
<!-- 在线查看xml-->
|
||||
<el-drawer :title="xmlTitle" :modal="false" direction="rtl" :visible.sync="xmlOpen" size="60%">
|
||||
<!-- 设置对话框内容高度 -->
|
||||
<el-scrollbar>
|
||||
<pre v-highlight="xmlData"><code class="xml"></code></pre>
|
||||
</el-scrollbar>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {readXml, roleList, saveXml, userList,expList} from "@/api/flowable/definition";
|
||||
import bpmnModeler from '@/components/Process/index'
|
||||
import vkBeautify from 'vkbeautify'
|
||||
import hljs from 'highlight.js'
|
||||
import 'highlight.js/styles/atelier-savanna-dark.css'
|
||||
|
||||
export default {
|
||||
name: "Model",
|
||||
components: {
|
||||
bpmnModeler,
|
||||
vkBeautify
|
||||
},
|
||||
// 自定义指令
|
||||
directives: {
|
||||
deep: true,
|
||||
highlight:{
|
||||
deep: true,
|
||||
bind: function bind(el, binding) {
|
||||
const targets = el.querySelectorAll('code');
|
||||
let target;
|
||||
let i;
|
||||
for (i = 0; i < targets.length; i += 1) {
|
||||
target = targets[i];
|
||||
if (typeof binding.value === 'string') {
|
||||
target.textContent = binding.value;
|
||||
}
|
||||
hljs.highlightBlock(target);
|
||||
}
|
||||
},
|
||||
componentUpdated: function componentUpdated(el, binding) {
|
||||
const targets = el.querySelectorAll('code');
|
||||
let target;
|
||||
let i;
|
||||
for (i = 0; i < targets.length; i += 1) {
|
||||
target = targets[i];
|
||||
if (typeof binding.value === 'string') {
|
||||
target.textContent = binding.value;
|
||||
hljs.highlightBlock(target);
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
xml: "", // 后端查询到的xml
|
||||
modeler:"",
|
||||
xmlOpen: false,
|
||||
xmlTitle: '',
|
||||
xmlData: '',
|
||||
users: [],
|
||||
groups: [],
|
||||
categorys: [],
|
||||
exps: [],
|
||||
|
||||
};
|
||||
},
|
||||
created () {
|
||||
const deployId = this.$route.query && this.$route.query.deployId;
|
||||
// 查询流程xml
|
||||
if (deployId) {
|
||||
|
||||
let param = {deployId:deployId}
|
||||
this.getXmlData(param);
|
||||
}
|
||||
//this.getDicts("sys_process_category").then(res => {
|
||||
this.categorys = [{label:'aaa',value:'ddd'}];
|
||||
//});
|
||||
//this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
/** xml 文件 */
|
||||
getXmlData(deployId) {
|
||||
// 发送请求，获取xml
|
||||
readXml(deployId).then(res =>{
|
||||
this.xml = res.data;
|
||||
this.modeler = res.data
|
||||
})
|
||||
},
|
||||
/** 保存xml */
|
||||
save(data) {
|
||||
const params = {
|
||||
name: data.process.name,
|
||||
category: data.process.category,
|
||||
flowableXml: data.xml
|
||||
}
|
||||
saveXml(params).then(res => {
|
||||
this.$message.success(res.message)
|
||||
// 关闭当前标签页并返回上个页面
|
||||
const obj = { path: "/flowable/definition/index", query: { t: Date.now()} };
|
||||
this.$router.push(obj)
|
||||
})
|
||||
},
|
||||
/** 指定流程办理人员列表 */
|
||||
getDataList() {
|
||||
userList().then(res =>{
|
||||
res.data.forEach(val =>{
|
||||
val.userId = val.userId.toString();
|
||||
})
|
||||
this.users = res.data;
|
||||
// let arr = {nickName: "流程发起人", userId: "${INITIATOR}"}
|
||||
// this.users.push(arr)
|
||||
});
|
||||
roleList().then(res =>{
|
||||
res.data.forEach(val =>{
|
||||
val.roleId = val.roleId.toString();
|
||||
})
|
||||
this.groups = res.data;
|
||||
});
|
||||
expList().then(res =>{
|
||||
this.exps = res.data;
|
||||
});
|
||||
},
|
||||
/** 展示xml */
|
||||
showXML(xmlData){
|
||||
this.xmlTitle = 'xml查看';
|
||||
this.xmlOpen = true;
|
||||
this.xmlData = vkBeautify.xml(xmlData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content-box{
|
||||
line-height: 10px;
|
||||
}
|
||||
// 修改对话框高度
|
||||
.showAll_dialog {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
::v-deep .el-dialog {
|
||||
margin: 0 auto !important;
|
||||
height: 80%;
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
.el-dialog__body {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 54px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
// 下边设置字体，我的需求是黑底白字
|
||||
color: #ffffff;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
24
src/views/flow_task/finished/detail/flow.vue
Normal file
24
src/views/flow_task/finished/detail/flow.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<flow-view :flowData="flowData"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FlowView from './flowview'
|
||||
|
||||
export default {
|
||||
name: "Flow",
|
||||
components: {
|
||||
FlowView
|
||||
},
|
||||
props: {
|
||||
flowData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
238
src/views/flow_task/finished/detail/flowview.vue
Normal file
238
src/views/flow_task/finished/detail/flowview.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<div class="containers main-box">
|
||||
<el-button type="success"
|
||||
size="small"
|
||||
icon="el-icon-zoom-in"
|
||||
@click="zoomViewport(true)">放大</el-button>
|
||||
<el-button type="warning"
|
||||
size="small"
|
||||
icon="el-icon-zoom-out"
|
||||
@click="zoomViewport(false)">缩小</el-button>
|
||||
<el-button type="info"
|
||||
size="small"
|
||||
icon="el-icon-rank"
|
||||
@click="fitViewport">适中</el-button>
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
|
||||
export default {
|
||||
name: "FlowView",
|
||||
props: {
|
||||
flowData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bpmnViewer: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
flowData: {
|
||||
handler(newVal) {
|
||||
if (Object.keys(newVal).length > 0) {
|
||||
// 生成实例
|
||||
this.bpmnViewer && this.bpmnViewer.destroy();
|
||||
this.bpmnViewer = new BpmnViewer({
|
||||
container: this.$refs.flowCanvas,
|
||||
height: 'calc(100vh - 200px)',
|
||||
});
|
||||
this.loadFlowCanvas(newVal)
|
||||
}
|
||||
},
|
||||
immediate: true, // 立即生效
|
||||
deep: true //监听对象或数组的时候，要用到深度监听
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
// 加载流程
|
||||
async loadFlowCanvas(flowData) {
|
||||
const self = this
|
||||
try {
|
||||
await self.bpmnViewer.importXML(flowData.xmlData);
|
||||
self.fitViewport()
|
||||
if (flowData.nodeData !==undefined && flowData.nodeData.length > 0 ) {
|
||||
self.fillColor(flowData.nodeData)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err.message, err.warnings)
|
||||
}
|
||||
},
|
||||
// 设置高亮颜色的class
|
||||
setNodeColor(nodeCodes, colorClass, canvas) {
|
||||
for (let i = 0; i < nodeCodes.length; i++) {
|
||||
canvas.addMarker(nodeCodes[i], colorClass);
|
||||
}
|
||||
},
|
||||
// 让图能自适应屏幕
|
||||
fitViewport() {
|
||||
this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
|
||||
},
|
||||
// 放大缩小
|
||||
zoomViewport(zoomIn = true) {
|
||||
this.zoom = this.bpmnViewer.get('canvas').zoom()
|
||||
this.zoom += (zoomIn ? 0.1 : -0.1)
|
||||
if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
|
||||
},
|
||||
|
||||
// 设置高亮颜色的
|
||||
fillColor(nodeData) {
|
||||
const canvas = this.bpmnViewer.get('canvas')
|
||||
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
|
||||
const completeTask = nodeData.find(m => m.key === n.id)
|
||||
const todoTask = nodeData.find(m => !m.completed)
|
||||
const endTask = nodeData[nodeData.length - 1]
|
||||
if (n.$type === 'bpmn:UserTask') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing?.forEach(nn => {
|
||||
const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
|
||||
if (targetTask) {
|
||||
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
|
||||
canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}else {
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
// 排他网关
|
||||
else if (n.$type === 'bpmn:ExclusiveGateway') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing?.forEach(nn => {
|
||||
const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
|
||||
if (targetTask) {
|
||||
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
// 并行网关
|
||||
else if (n.$type === 'bpmn:ParallelGateway') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing?.forEach(nn => {
|
||||
const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
|
||||
if (targetTask) {
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
else if (n.$type === 'bpmn:StartEvent') {
|
||||
n.outgoing.forEach(nn => {
|
||||
const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
|
||||
if (completeTask) {
|
||||
canvas.addMarker(nn.id, 'highlight')
|
||||
canvas.addMarker(n.id, 'highlight')
|
||||
return
|
||||
}
|
||||
})
|
||||
}
|
||||
else if (n.$type === 'bpmn:EndEvent') {
|
||||
if (endTask.key === n.id && endTask.completed) {
|
||||
canvas.addMarker(n.id, 'highlight')
|
||||
return
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
.view-mode {
|
||||
.el-header, .el-aside, .djs-palette, .bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
.el-loading-mask {
|
||||
background-color: initial;
|
||||
}
|
||||
.el-loading-spinner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.containers {
|
||||
// background-color: #ffffff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
width: 300px;
|
||||
}
|
||||
.load {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-form-item__label{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.djs-palette{
|
||||
left: 0px!important;
|
||||
top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.djs-container svg {
|
||||
min-height: 650px;
|
||||
}
|
||||
|
||||
.highlight.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: green !important;
|
||||
stroke: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.highlight.djs-shape .djs-visual > :nth-child(2) {
|
||||
fill: green !important;
|
||||
}
|
||||
.highlight.djs-shape .djs-visual > path {
|
||||
fill: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
stroke: green !important;
|
||||
}
|
||||
.highlight.djs-connection > .djs-visual > path {
|
||||
stroke: green !important;
|
||||
}
|
||||
.highlight-todo.djs-connection > .djs-visual > path {
|
||||
stroke: orange !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: orange !important;
|
||||
stroke: orange !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.overlays-div {
|
||||
font-size: 10px;
|
||||
color: red;
|
||||
width: 100px;
|
||||
top: -20px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
211
src/views/flow_task/finished/detail/index.vue
Normal file
211
src/views/flow_task/finished/detail/index.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-card class="box-card" >
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-document">已办任务</span>
|
||||
<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" v-if="variableOpen">
|
||||
<div class="test-form">
|
||||
<parser :key="new Date().getTime()" :form-conf="variablesData" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-tab-pane>
|
||||
<!--流程流转记录-->
|
||||
<el-tab-pane label="流转记录" name="2">
|
||||
<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 {flowRecord} from "@/api/flowable/finished";
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import {getProcessVariables, flowXmlAndNode} from "@/api/flowable/definition";
|
||||
import flow from '@/views/flowable/task/finished/detail/flow'
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "Record",
|
||||
components: {
|
||||
Parser,
|
||||
flow,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
// 模型xml数据
|
||||
flowData: {},
|
||||
activeName: '1',
|
||||
// 用户表格数据
|
||||
userList: null,
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label"
|
||||
},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
deptId: undefined
|
||||
},
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
flowRecordList: [], // 流程流转数据
|
||||
formConfCopy: {},
|
||||
src: null,
|
||||
taskForm:{
|
||||
multiple: false,
|
||||
comment:"", // 意见内容
|
||||
procInsId: "", // 流程实例编号
|
||||
instanceId: "", // 流程实例编号
|
||||
deployId: "", // 流程定义编号
|
||||
taskId: "" ,// 流程任务编号
|
||||
procDefId: "", // 流程编号
|
||||
vars: "",
|
||||
targetKey:""
|
||||
},
|
||||
variables: [], // 流程变量数据
|
||||
variablesData: {}, // 流程变量数据
|
||||
variableOpen: false, // 是否加载流程变量数据
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
|
||||
this.taskForm.taskId = this.$route.query && this.$route.query.taskId;
|
||||
this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
|
||||
// 回显流程记录
|
||||
// 流程任务重获取变量表单
|
||||
if (this.taskForm.taskId){
|
||||
this.processVariables( this.taskForm.taskId)
|
||||
}
|
||||
this.getFlowRecordList( this.taskForm.procInsId, this.taskForm.deployId);
|
||||
},
|
||||
methods: {
|
||||
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";
|
||||
}
|
||||
},
|
||||
/** 流程流转记录 */
|
||||
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();
|
||||
})
|
||||
},
|
||||
/** 获取流程变量内容 */
|
||||
processVariables(taskId) {
|
||||
if (taskId) {
|
||||
// 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
|
||||
/* getProcessVariables(taskId).then(res => {
|
||||
this.variablesData = res.data.variables;
|
||||
this.variableOpen = true
|
||||
});*/
|
||||
}
|
||||
},
|
||||
/** 返回页面 */
|
||||
goBack() {
|
||||
// 关闭当前标签页并返回上个页面
|
||||
const obj = { path: "/task/finished", query: { t: Date.now()} };
|
||||
this.$tab.closeOpenPage(obj);
|
||||
},
|
||||
}
|
||||
};
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
284
src/views/flow_task/finished/index.vue
Normal file
284
src/views/flow_task/finished/index.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="deployTime">
|
||||
<el-date-picker clearable size="small"
|
||||
v-model="queryParams.deployTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:deployment:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="finishedList" border @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="流程名称" align="center" prop="procDefName" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="任务节点" align="center" prop="taskName" />
|
||||
<el-table-column label="流程发起人" align="center">
|
||||
<template slot-scope="scope">
|
||||
<label>{{scope.row.startUserName}} <el-tag type="info" size="mini">{{scope.row.startDeptName}}</el-tag></label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="接收时间" align="center" prop="createTime" width="180"/>
|
||||
<el-table-column label="审批时间" align="center" prop="finishTime" width="180"/>
|
||||
<el-table-column label="耗时" align="center" prop="duration" width="180"/>
|
||||
<el-table-column label="操作" width="150" fixed="right" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-tickets"
|
||||
@click="handleFlowRecord(scope.row)"
|
||||
>流转记录</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-refresh-left"
|
||||
@click="handleRevoke(scope.row)"
|
||||
>撤回
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { finishedList, getDeployment, delDeployment, addDeployment, updateDeployment, exportDeployment, revokeProcess } from "@/api/flowable/finished";
|
||||
|
||||
export default {
|
||||
name: "Deploy",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 已办任务列表数据
|
||||
finishedList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
src: "",
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
category: null,
|
||||
key: null,
|
||||
tenantId: null,
|
||||
deployTime: null,
|
||||
derivedFrom: null,
|
||||
derivedFromRoot: null,
|
||||
parentDeploymentId: null,
|
||||
engineVersion: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询流程定义列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
finishedList(this.queryParams).then(response => {
|
||||
this.finishedList = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
name: null,
|
||||
category: null,
|
||||
key: null,
|
||||
tenantId: null,
|
||||
deployTime: null,
|
||||
derivedFrom: null,
|
||||
derivedFromRoot: null,
|
||||
parentDeploymentId: null,
|
||||
engineVersion: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
setIcon(val){
|
||||
if (val){
|
||||
return "el-icon-check";
|
||||
}else {
|
||||
return "el-icon-time";
|
||||
}
|
||||
|
||||
},
|
||||
setColor(val){
|
||||
if (val){
|
||||
return "#2bc418";
|
||||
}else {
|
||||
return "#b3bdbb";
|
||||
}
|
||||
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加流程定义";
|
||||
},
|
||||
/** 流程流转记录 */
|
||||
handleFlowRecord(row){
|
||||
this.$router.push({ path: '/flowable/task/finished/detail/index',
|
||||
query: {
|
||||
procInsId: row.procInsId,
|
||||
deployId: row.deployId,
|
||||
taskId: row.taskId,
|
||||
}})
|
||||
},
|
||||
/** 撤回任务 */
|
||||
handleRevoke(row){
|
||||
const params = {
|
||||
instanceId: row.procInsId
|
||||
}
|
||||
revokeProcess(params).then( res => {
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getDeployment(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改流程定义";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateDeployment(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addDeployment(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return delDeployment(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm('是否确认导出所有流程定义数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return exportDeployment(queryParams);
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
24
src/views/flow_task/myProcess/detail/flow.vue
Normal file
24
src/views/flow_task/myProcess/detail/flow.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<flow-view :flowData="flowData"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FlowView from './flowview'
|
||||
|
||||
export default {
|
||||
name: "Flow",
|
||||
components: {
|
||||
FlowView
|
||||
},
|
||||
props: {
|
||||
flowData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
239
src/views/flow_task/myProcess/detail/flowview.vue
Normal file
239
src/views/flow_task/myProcess/detail/flowview.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div class="containers main-box">
|
||||
<el-button type="success"
|
||||
size="small"
|
||||
icon="el-icon-zoom-in"
|
||||
@click="zoomViewport(true)">放大</el-button>
|
||||
<el-button type="warning"
|
||||
size="small"
|
||||
icon="el-icon-zoom-out"
|
||||
@click="zoomViewport(false)">缩小</el-button>
|
||||
<el-button type="info"
|
||||
size="small"
|
||||
icon="el-icon-rank"
|
||||
@click="fitViewport">适中</el-button>
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
|
||||
export default {
|
||||
name: "FlowView",
|
||||
props: {
|
||||
flowData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bpmnViewer: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
flowData: {
|
||||
handler(newVal) {
|
||||
if (Object.keys(newVal).length > 0) {
|
||||
// 生成实例
|
||||
this.bpmnViewer && this.bpmnViewer.destroy();
|
||||
this.bpmnViewer = new BpmnViewer({
|
||||
container: this.$refs.flowCanvas,
|
||||
height: 'calc(100vh - 200px)',
|
||||
});
|
||||
this.loadFlowCanvas(newVal);
|
||||
}
|
||||
},
|
||||
immediate: true, // 立即生效
|
||||
deep: true //监听对象或数组的时候，要用到深度监听
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
// 加载流程
|
||||
async loadFlowCanvas(flowData) {
|
||||
const self = this
|
||||
try {
|
||||
|
||||
await self.bpmnViewer.importXML(flowData.xmlData);
|
||||
self.fitViewport()
|
||||
if (flowData.nodeData !==undefined && flowData.nodeData.length > 0 ) {
|
||||
self.fillColor(flowData.nodeData)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err.message, err.warnings)
|
||||
}
|
||||
},
|
||||
// 设置高亮颜色的class
|
||||
setNodeColor(nodeCodes, colorClass, canvas) {
|
||||
for (let i = 0; i < nodeCodes.length; i++) {
|
||||
canvas.addMarker(nodeCodes[i], colorClass);
|
||||
}
|
||||
},
|
||||
// 让图能自适应屏幕
|
||||
fitViewport() {
|
||||
this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
|
||||
},
|
||||
// 放大缩小
|
||||
zoomViewport(zoomIn = true) {
|
||||
this.zoom = this.bpmnViewer.get('canvas').zoom()
|
||||
this.zoom += (zoomIn ? 0.1 : -0.1)
|
||||
if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
|
||||
},
|
||||
|
||||
// 设置高亮颜色的
|
||||
fillColor(nodeData) {
|
||||
const canvas = this.bpmnViewer.get('canvas')
|
||||
this.bpmnViewer.getDefinitions().rootElements[1].flowElements.forEach(n => {
|
||||
const completeTask = nodeData.find(m => m.key === n.id)
|
||||
const todoTask = nodeData.find(m => !m.completed)
|
||||
const endTask = nodeData[nodeData.length - 1]
|
||||
if (n.$type === 'bpmn:UserTask') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing.forEach(nn => {
|
||||
const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
|
||||
if (targetTask) {
|
||||
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
|
||||
canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}else {
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
// 排他网关
|
||||
else if (n.$type === 'bpmn:ExclusiveGateway') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing.forEach(nn => {
|
||||
const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
|
||||
if (targetTask) {
|
||||
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
// 并行网关
|
||||
else if (n.$type === 'bpmn:ParallelGateway') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing.forEach(nn => {
|
||||
const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
|
||||
if (targetTask) {
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
else if (n.$type === 'bpmn:StartEvent') {
|
||||
n.outgoing.forEach(nn => {
|
||||
const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
|
||||
if (completeTask) {
|
||||
canvas.addMarker(nn.id, 'highlight')
|
||||
canvas.addMarker(n.id, 'highlight')
|
||||
return
|
||||
}
|
||||
})
|
||||
}
|
||||
else if (n.$type === 'bpmn:EndEvent') {
|
||||
if (endTask.key === n.id && endTask.completed) {
|
||||
canvas.addMarker(n.id, 'highlight')
|
||||
return
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
.view-mode {
|
||||
.el-header, .el-aside, .djs-palette, .bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
.el-loading-mask {
|
||||
background-color: initial;
|
||||
}
|
||||
.el-loading-spinner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.containers {
|
||||
// background-color: #ffffff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
width: 300px;
|
||||
}
|
||||
.load {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-form-item__label{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.djs-palette{
|
||||
left: 0px!important;
|
||||
top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.djs-container svg {
|
||||
min-height: 650px;
|
||||
}
|
||||
|
||||
.highlight.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: green !important;
|
||||
stroke: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.highlight.djs-shape .djs-visual > :nth-child(2) {
|
||||
fill: green !important;
|
||||
}
|
||||
.highlight.djs-shape .djs-visual > path {
|
||||
fill: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
stroke: green !important;
|
||||
}
|
||||
.highlight.djs-connection > .djs-visual > path {
|
||||
stroke: green !important;
|
||||
}
|
||||
.highlight-todo.djs-connection > .djs-visual > path {
|
||||
stroke: orange !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: orange !important;
|
||||
stroke: orange !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.overlays-div {
|
||||
font-size: 10px;
|
||||
color: red;
|
||||
width: 100px;
|
||||
top: -20px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
264
src/views/flow_task/myProcess/detail/index.vue
Normal file
264
src/views/flow_task/myProcess/detail/index.vue
Normal file
@@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-document">已发任务</span>
|
||||
<el-button style="float: right;" size="mini" type="danger" @click="goBack">关闭</el-button>
|
||||
<el-button style="margin-right: 10px;float: right;" size="mini" @click="goTo">跳转详情页面</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">
|
||||
<normalPlanInit v-if="formType === 1" :planId="planId"></normalPlanInit>
|
||||
<loadTypeInit v-if="formType === 2" :planId="planId"></loadTypeInit>
|
||||
|
||||
</el-col>
|
||||
</el-tab-pane>
|
||||
<!--流程流转记录-->
|
||||
<el-tab-pane label="流转记录" name="2">
|
||||
<el-col :span="16" :offset="4" >
|
||||
<div class="block" :style="'height: ' + vh + 'px;overflow-y: auto;'"
|
||||
>
|
||||
<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 {flowRecord} from "@/api/flowable/finished";
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import {getProcessVariables, readXml, getFlowViewer, getHighlight, flowXmlAndNode} from "@/api/flowable/definition";
|
||||
import flow from '@/views/flow_task/myProcess/detail/flow'
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import loadTypeInit from "../../components/loadTypeInit"
|
||||
import normalPlanInit from "../../components/normalPlanInit"
|
||||
|
||||
|
||||
export default {
|
||||
name: "Record",
|
||||
components: {
|
||||
|
||||
Parser,
|
||||
flow,
|
||||
loadTypeInit,
|
||||
normalPlanInit
|
||||
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
vh: '',
|
||||
// 模型xml数据
|
||||
flowData: {},
|
||||
activeName: '1',
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
deptId: undefined
|
||||
},
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
flowRecordList: [], // 流程流转数据
|
||||
taskForm: {
|
||||
multiple: false,
|
||||
comment: "", // 意见内容
|
||||
procInsId: "", // 流程实例编号
|
||||
instanceId: "", // 流程实例编号
|
||||
deployId: "", // 流程定义编号
|
||||
taskId: "",// 流程任务编号
|
||||
procDefId: "", // 流程编号
|
||||
},
|
||||
variablesData: {}, // 流程变量数据
|
||||
planId:'', //流程功能对应的id
|
||||
formType:1,
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
|
||||
this.taskForm.taskId = this.$route.query && this.$route.query.taskId;
|
||||
this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
|
||||
this.planId = this.$route.query && this.$route.query.formAssId;
|
||||
this.formType = this.$route.query && this.$route.query.formType;
|
||||
// 回显流程记录
|
||||
// 流程任务重获取变量表单
|
||||
this.processVariables(this.taskForm.taskId)
|
||||
this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 130
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
if (tab.name === '3'){
|
||||
flowXmlAndNode({procInsId:this.taskForm.procInsId,deployId:this.taskForm.deployId}).then(res => {
|
||||
this.flowData = res.data;
|
||||
})
|
||||
}
|
||||
},
|
||||
getFlowViewer(procInsId,executionId) {
|
||||
getFlowViewer(procInsId,executionId).then(res => {
|
||||
this.taskList = res.data
|
||||
})
|
||||
},
|
||||
setIcon(val) {
|
||||
if (val) {
|
||||
return "el-icon-check";
|
||||
} else {
|
||||
return "el-icon-time";
|
||||
}
|
||||
},
|
||||
setColor(val) {
|
||||
if (val) {
|
||||
return "#2bc418";
|
||||
} else {
|
||||
return "#b3bdbb";
|
||||
}
|
||||
},
|
||||
/** 流程流转记录 */
|
||||
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 vModel = item.__vModel__;
|
||||
const val = data[item.__vModel__];
|
||||
|
||||
// 特殊处理el-upload，回显图片
|
||||
if (item.__config__.tag === "el-upload") {
|
||||
// 回显图片
|
||||
item["file-list"] = (val || []).map((url) => ({
|
||||
name: `${vModel}${i}`,
|
||||
url,
|
||||
}));
|
||||
}
|
||||
|
||||
if (val) {
|
||||
item.__config__.defaultValue = val;
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 获取流程变量内容 */
|
||||
processVariables(taskId) {
|
||||
if (taskId) {
|
||||
// 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
|
||||
/* getProcessVariables(taskId).then(res => {
|
||||
this.variablesData = res.data.variables;
|
||||
});*/
|
||||
}
|
||||
},
|
||||
/** 返回页面 */
|
||||
goBack() {
|
||||
// 关闭当前标签页并返回上个页面
|
||||
this.$router.push({ path: '/flowTask/mytask',
|
||||
query: { t: Date.now()}})
|
||||
},
|
||||
|
||||
goTo(){
|
||||
this.$router.push({ path: '/Processsupervision/harmonicmanagement',
|
||||
query: { t: Date.now()}})
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</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;
|
||||
}
|
||||
|
||||
.element-uithree .el-card{
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
418
src/views/flow_task/myProcess/index.vue
Normal file
418
src/views/flow_task/myProcess/index.vue
Normal file
@@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<div class="pd15">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="deployTime">
|
||||
<el-date-picker clearable size="small"
|
||||
v-model="queryParams.deployTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- <el-row style="margin-bottom: 5px;">
|
||||
<el-col :span="2">
|
||||
<el-button
|
||||
type="primary"
|
||||
|
||||
icon="el-icon-plus"
|
||||
|
||||
@click="handleAdd"
|
||||
>新增流程</el-button>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<el-button
|
||||
type="danger"
|
||||
|
||||
icon="el-icon-delete"
|
||||
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<!– <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> –>
|
||||
</el-row>-->
|
||||
|
||||
<el-table v-loading="loading" :data="myProcessList" border @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<!-- <el-table-column label="流程编号" align="center" prop="procInsId" :show-overflow-tooltip="true"/>-->
|
||||
<el-table-column label="流程名称" align="center" prop="procDefName" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="流程类别" align="center" prop="category" width="100px" />
|
||||
<el-table-column label="流程版本" align="center" width="80px">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="medium" >v{{ scope.row.procDefVersion }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="提交时间" align="center" prop="createTime" width="180"/>
|
||||
<el-table-column label="流程状态" align="center" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.finishTime == null" size="mini">进行中</el-tag>
|
||||
<el-tag type="success" v-if="scope.row.finishTime != null" size="mini">已完成</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="耗时" align="center" prop="duration" width="180"/>
|
||||
<el-table-column label="当前节点" align="center" prop="taskName"/>
|
||||
<el-table-column label="办理人" align="center">
|
||||
<template slot-scope="scope">
|
||||
<label v-if="scope.row.assigneeName">{{scope.row.assigneeName}} <el-tag type="info" size="mini">{{scope.row.assigneeDeptName}}</el-tag></label>
|
||||
<!-- <label v-if="scope.row.candidate">{{scope.row.candidate}}</label>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" fixed="right" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleFlowRecord(scope.row)" type="text" size="small">详情</el-button>
|
||||
<!-- <el-button @click="handleStop(scope.row)" type="text" size="small">取消申请</el-button>-->
|
||||
<el-button @click="handleDelete(scope.row)" type="text" size="small" >删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="queryParams.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="queryParams.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
|
||||
|
||||
<!-- 发起流程 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
|
||||
<el-form :model="queryProcessParams" ref="queryProcessForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryProcessParams.name"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleProcessQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetProcessQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table v-loading="processLoading" fit :data="definitionList" border >
|
||||
<el-table-column label="流程名称" align="center" prop="name" />
|
||||
<el-table-column label="流程版本" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="medium" >v{{ scope.row.version }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程分类" align="center" prop="category" />
|
||||
<el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit-outline"
|
||||
@click="handleStartProcess(scope.row)"
|
||||
>发起流程</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="queryParams.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="queryParams.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getDeployment,
|
||||
delDeployment,
|
||||
addDeployment,
|
||||
updateDeployment,
|
||||
exportDeployment,
|
||||
flowRecord
|
||||
} from "@/api/flowable/finished";
|
||||
import { myProcessList,stopProcess } from "@/api/flowable/process";
|
||||
import {listDefinition} from "@/api/flowable/definition";
|
||||
export default {
|
||||
name: "Deploy",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
processLoading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
processTotal:0,
|
||||
// 我发起的流程列表数据
|
||||
myProcessList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
src: "",
|
||||
definitionList:[],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
category: null,
|
||||
key: null,
|
||||
tenantId: null,
|
||||
deployTime: null,
|
||||
derivedFrom: null,
|
||||
derivedFromRoot: null,
|
||||
parentDeploymentId: null,
|
||||
engineVersion: null
|
||||
},
|
||||
// 查询参数
|
||||
queryProcessParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
category: null,
|
||||
key: null,
|
||||
tenantId: null,
|
||||
deployTime: null,
|
||||
derivedFrom: null,
|
||||
derivedFromRoot: null,
|
||||
parentDeploymentId: null,
|
||||
engineVersion: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询流程定义列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
myProcessList(this.queryParams).then(response => {
|
||||
this.myProcessList = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
name: null,
|
||||
category: null,
|
||||
key: null,
|
||||
tenantId: null,
|
||||
deployTime: null,
|
||||
derivedFrom: null,
|
||||
derivedFromRoot: null,
|
||||
parentDeploymentId: null,
|
||||
engineVersion: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleProcessQuery() {
|
||||
this.queryProcessParams.pageNum = 1;
|
||||
this.listDefinition();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetProcessQuery() {
|
||||
this.resetForm("queryProcessForm");
|
||||
this.handleProcessQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.procInsId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.open = true;
|
||||
this.title = "发起流程";
|
||||
this.listDefinition();
|
||||
},
|
||||
listDefinition(){
|
||||
listDefinition(this.queryProcessParams).then(response => {
|
||||
this.definitionList = response.data.records;
|
||||
this.processTotal = response.data.total;
|
||||
this.processLoading = false;
|
||||
});
|
||||
},
|
||||
/** 发起流程申请 */
|
||||
handleStartProcess(row){
|
||||
this.$router.push({ path: '/flowable/task/myProcess/send/index',
|
||||
query: {
|
||||
deployId: row.deploymentId,
|
||||
procDefId: row.id
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 取消流程申请 */
|
||||
handleStop(row){
|
||||
const params = {
|
||||
instanceId: row.procInsId
|
||||
}
|
||||
stopProcess(params).then( res => {
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
})
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
/** 流程流转记录 */
|
||||
handleFlowRecord(row){
|
||||
this.$router.push({ path: '/flow_task/myProcess/detail/index',
|
||||
query: {
|
||||
procInsId: row.procInsId,
|
||||
deployId: row.deployId,
|
||||
taskId: row.taskId,
|
||||
formAssId:row.formAssId,
|
||||
formType:row.formType
|
||||
}})
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getDeployment(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改流程定义";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateDeployment(this.form).then(response => {
|
||||
this.$message({
|
||||
message: '修改成功!',
|
||||
type: 'success'
|
||||
})
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addDeployment(this.form).then(response => {
|
||||
this.$message({
|
||||
message: '修改成功!',
|
||||
type: 'success'
|
||||
})
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.procInsId || this.ids;// 暂不支持删除多个流程
|
||||
this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
const params = {instanceIds: ids}
|
||||
return delDeployment(params);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$message({
|
||||
message: '删除成功!',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm('是否确认导出所有流程定义数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
return exportDeployment(queryParams);
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.queryParams.pageSize = val;
|
||||
this.lowVoltageUserAccount();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.queryParams.pageNum = val;
|
||||
this.lowVoltageUserAccount();
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
24
src/views/flow_task/myProcess/send/flow.vue
Normal file
24
src/views/flow_task/myProcess/send/flow.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<flow-view :flowData="flowData"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FlowView from './flowview'
|
||||
|
||||
export default {
|
||||
name: "Flow",
|
||||
components: {
|
||||
FlowView
|
||||
},
|
||||
props: {
|
||||
flowData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
129
src/views/flow_task/myProcess/send/flowview.vue
Normal file
129
src/views/flow_task/myProcess/send/flowview.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<!-- <template>
|
||||
<div class="containers main-box">
|
||||
<el-button type="success"
|
||||
size="small"
|
||||
icon="el-icon-zoom-in"
|
||||
@click="zoomViewport(true)">放大</el-button>
|
||||
<el-button type="warning"
|
||||
size="small"
|
||||
icon="el-icon-zoom-out"
|
||||
@click="zoomViewport(false)">缩小</el-button>
|
||||
<el-button type="info"
|
||||
size="small"
|
||||
icon="el-icon-rank"
|
||||
@click="fitViewport">适中</el-button>
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
|
||||
export default {
|
||||
name: "FlowView",
|
||||
props: {
|
||||
flowData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bpmnViewer: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
flowData: {
|
||||
handler(newVal) {
|
||||
if (Object.keys(newVal).length > 0) {
|
||||
// 生成实例
|
||||
this.bpmnViewer && this.bpmnViewer.destroy();
|
||||
this.bpmnViewer = new BpmnViewer({
|
||||
container: this.$refs.flowCanvas,
|
||||
height: 'calc(100vh - 200px)',
|
||||
});
|
||||
this.loadFlowCanvas(newVal)
|
||||
}
|
||||
},
|
||||
immediate: true, // 立即生效
|
||||
deep: true //监听对象或数组的时候，要用到深度监听
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 加载流程图片
|
||||
async loadFlowCanvas(flowData) {
|
||||
const self = this
|
||||
try {
|
||||
await self.bpmnViewer.importXML(flowData.xmlData);
|
||||
self.fitViewport()
|
||||
} catch (err) {
|
||||
console.error(err.message, err.warnings)
|
||||
}
|
||||
},
|
||||
// 让图能自适应屏幕
|
||||
fitViewport() {
|
||||
this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
|
||||
},
|
||||
// 放大缩小
|
||||
zoomViewport(zoomIn = true) {
|
||||
this.zoom = this.bpmnViewer.get('canvas').zoom()
|
||||
this.zoom += (zoomIn ? 0.1 : -0.1)
|
||||
if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
.view-mode {
|
||||
.el-header, .el-aside, .djs-palette, .bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
.el-loading-mask {
|
||||
background-color: initial;
|
||||
}
|
||||
.el-loading-spinner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.containers {
|
||||
// background-color: #ffffff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
width: 300px;
|
||||
}
|
||||
.load {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-form-item__label{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.djs-palette{
|
||||
left: 0px!important;
|
||||
top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.djs-container svg {
|
||||
min-height: 650px;
|
||||
}
|
||||
|
||||
.overlays-div {
|
||||
font-size: 10px;
|
||||
color: red;
|
||||
width: 100px;
|
||||
top: -20px !important;
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
287
src/views/flow_task/myProcess/send/index.vue
Normal file
287
src/views/flow_task/myProcess/send/index.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<!-- <template>
|
||||
<div class="app-container">
|
||||
<el-card class="box-card" >
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-document">发起任务</span>
|
||||
<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="test-form">
|
||||
<parser :key="new Date().getTime()" :form-conf="formConf" @submit="submitForm" ref="parser" @getData="getData" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-tab-pane>
|
||||
<!--流程图-->
|
||||
<el-tab-pane label="流程图" name="2">
|
||||
<flow :flowData="flowData"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!--选择流程接收人-->
|
||||
<el-dialog :title="taskTitle" :visible.sync="taskOpen" width="65%" append-to-body>
|
||||
<flow-user v-if="checkSendUser" :checkType="checkType" @handleUserSelect="handleUserSelect"/>
|
||||
<flow-role v-if="checkSendRole" @handleRoleSelect="handleRoleSelect"/>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="taskOpen = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitTask">提 交</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import {definitionStart, flowXmlAndNode} from "@/api/flowable/definition";
|
||||
import flow from './flow'
|
||||
import {flowFormData} from "@/api/flowable/process";
|
||||
import {getNextFlowNodeByStart} from "@/api/flowable/todo";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Record",
|
||||
components: {
|
||||
Parser,
|
||||
flow,
|
||||
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
// 模型xml数据
|
||||
flowData: {},
|
||||
activeName: '1', // 切换tab标签
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label"
|
||||
},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
deptId: undefined
|
||||
},
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
deployId: "", // 流程定义编号
|
||||
procDefId: "", // 流程实例编号
|
||||
formConf: {}, // 默认表单数据
|
||||
variables: [], // 流程变量数据
|
||||
taskTitle: null,
|
||||
taskOpen: false,
|
||||
checkSendUser: false, // 是否展示人员选择模块
|
||||
checkSendRole: false,// 是否展示角色选择模块
|
||||
checkType: '', // 选择类型
|
||||
checkValues: null, // 选中任务接收人员数据
|
||||
formData: {}, // 填写的表单数据,
|
||||
multiInstanceVars: '' // 会签节点
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.deployId = this.$route.query && this.$route.query.deployId;
|
||||
// 初始化表单
|
||||
this.procDefId = this.$route.query && this.$route.query.procDefId;
|
||||
// this.getNextFlowNodeByStart(this.deployId);
|
||||
this.getFlowFormData(this.deployId);
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
if (tab.name === '2'){
|
||||
flowXmlAndNode({deployId:this.deployId}).then(res => {
|
||||
this.flowData = res.data;
|
||||
})
|
||||
}
|
||||
},
|
||||
/** 流程表单数据 */
|
||||
getFlowFormData(deployId) {
|
||||
const that = this
|
||||
const params = {deployId: deployId}
|
||||
flowFormData(params).then(res => {
|
||||
// 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
|
||||
that.formConf = res.data;
|
||||
}).catch(res => {
|
||||
this.goBack();
|
||||
})
|
||||
},
|
||||
/** 返回页面 */
|
||||
goBack() {
|
||||
// 关闭当前标签页并返回上个页面
|
||||
const obj = { path: "/task/process", query: { t: Date.now()} };
|
||||
this.$tab.closeOpenPage(obj);
|
||||
},
|
||||
/** 接收子组件传的值 */
|
||||
getData(data) {
|
||||
if (data) {
|
||||
const variables = [];
|
||||
data.fields.forEach(item => {
|
||||
let variableData = {};
|
||||
variableData.label = item.__config__.label
|
||||
// 表单值为多个选项时
|
||||
if (item.__config__.defaultValue instanceof Array) {
|
||||
const array = [];
|
||||
item.__config__.defaultValue.forEach(val => {
|
||||
array.push(val)
|
||||
})
|
||||
variableData.val = array;
|
||||
} else {
|
||||
variableData.val = item.__config__.defaultValue
|
||||
}
|
||||
variables.push(variableData)
|
||||
})
|
||||
this.variables = variables;
|
||||
}
|
||||
},
|
||||
/** 申请流程表单数据提交 */
|
||||
submitForm(formData) {
|
||||
// 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
|
||||
getNextFlowNodeByStart({deploymentId: this.deployId,variables:formData.valData}).then(res => {
|
||||
const data = res.data;
|
||||
if (data) {
|
||||
this.formData = formData;
|
||||
if (data.dataType === 'dynamic') {
|
||||
if (data.type === 'assignee') { // 指定人员
|
||||
this.checkSendUser = true;
|
||||
this.checkType = "single";
|
||||
} else if (data.type === 'candidateUsers') { // 候选人员(多个)
|
||||
this.checkSendUser = true;
|
||||
this.checkType = "multiple";
|
||||
} else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
|
||||
this.checkSendRole = true;
|
||||
} else { // 会签
|
||||
// 流程设计指定的 elementVariable 作为会签人员列表
|
||||
this.multiInstanceVars = data.vars;
|
||||
this.checkSendUser = true;
|
||||
this.checkType = "multiple";
|
||||
}
|
||||
this.taskOpen = true;
|
||||
this.taskTitle = "选择任务接收";
|
||||
} else {
|
||||
const variables = this.formData.valData;
|
||||
const formData = this.formData.formData;
|
||||
formData.disabled = true;
|
||||
formData.formBtns = false;
|
||||
if (this.procDefId) {
|
||||
variables.variables = formData;
|
||||
// 启动流程并将表单数据加入流程变量
|
||||
definitionStart(this.procDefId, JSON.stringify(variables)).then(res => {
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
this.goBack();
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 提交流程 */
|
||||
submitTask() {
|
||||
if (!this.checkValues && this.checkSendUser){
|
||||
this.$modal.msgError("请选择任务接收!");
|
||||
return;
|
||||
}
|
||||
if (!this.checkValues && this.checkSendRole){
|
||||
this.$modal.msgError("请选择流程接收角色组!");
|
||||
return;
|
||||
}
|
||||
if (this.formData) {
|
||||
const variables = this.formData.valData;
|
||||
const formData = this.formData.formData;
|
||||
// 表单是否禁用
|
||||
formData.disabled = true;
|
||||
// 是否显示按钮
|
||||
formData.formBtns = false;
|
||||
variables.variables = formData;
|
||||
if (this.multiInstanceVars) {
|
||||
this.$set(variables, this.multiInstanceVars, this.checkValues);
|
||||
} else {
|
||||
this.$set(variables, "approval", this.checkValues);
|
||||
}
|
||||
console.log(variables,"流程发起提交表单数据")
|
||||
// 启动流程并将表单数据加入流程变量
|
||||
definitionStart(this.procDefId, JSON.stringify(variables)).then(res => {
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
this.goBack();
|
||||
})
|
||||
}
|
||||
},
|
||||
/** 根据当前任务获取流程设计配置的下一步节点 */
|
||||
getNextFlowNodeByStart(deploymentId,variables) {
|
||||
// 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
|
||||
getNextFlowNodeByStart({deploymentId: deploymentId,variables:variables}).then(res => {
|
||||
const data = res.data;
|
||||
if (data) {
|
||||
if (data.type === 'assignee') { // 指定人员
|
||||
this.checkSendUser = true;
|
||||
this.checkType = "single";
|
||||
} else if (data.type === 'candidateUsers') { // 候选人员(多个)
|
||||
this.checkSendUser = true;
|
||||
this.checkType = "multiple";
|
||||
} else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
|
||||
this.checkSendRole = true;
|
||||
} else if (data.type === 'multiInstance') { // 会签?
|
||||
// 流程设计指定的 elementVariable 作为会签人员列表
|
||||
this.multiInstanceVars = data.vars;
|
||||
this.checkSendUser = true;
|
||||
this.checkType = "multiple";
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 用户信息选中数据
|
||||
handleUserSelect(selection) {
|
||||
if (selection) {
|
||||
if (selection instanceof Array) {
|
||||
const selectVal = selection.map(item => item.userId);
|
||||
if (this.multiInstanceVars) {
|
||||
this.checkValues = selectVal;
|
||||
} else {
|
||||
this.checkValues = selectVal.join(',');
|
||||
}
|
||||
} else {
|
||||
this.checkValues = selection.userId;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 角色信息选中数据
|
||||
handleRoleSelect(selection) {
|
||||
if (selection) {
|
||||
if (selection instanceof Array) {
|
||||
const selectVal = selection.map(item => item.roleId);
|
||||
this.checkValues = selectVal.join(',')
|
||||
} else {
|
||||
this.checkValues = selection;
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</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;
|
||||
}
|
||||
</style> -->
|
||||
24
src/views/flow_task/todo/detail/flow.vue
Normal file
24
src/views/flow_task/todo/detail/flow.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<flow-view :flowData="flowData"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FlowView from './flowview'
|
||||
|
||||
export default {
|
||||
name: "Flow",
|
||||
components: {
|
||||
FlowView
|
||||
},
|
||||
props: {
|
||||
flowData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
239
src/views/flow_task/todo/detail/flowview.vue
Normal file
239
src/views/flow_task/todo/detail/flowview.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div class="containers main-box">
|
||||
<el-button type="success"
|
||||
size="small"
|
||||
icon="el-icon-zoom-in"
|
||||
@click="zoomViewport(true)">放大</el-button>
|
||||
<el-button type="warning"
|
||||
size="small"
|
||||
icon="el-icon-zoom-out"
|
||||
@click="zoomViewport(false)">缩小</el-button>
|
||||
<el-button type="info"
|
||||
size="small"
|
||||
icon="el-icon-rank"
|
||||
@click="fitViewport">适中</el-button>
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
|
||||
export default {
|
||||
name: "FlowView",
|
||||
props: {
|
||||
flowData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bpmnViewer: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
flowData: {
|
||||
handler(newVal) {
|
||||
if (Object.keys(newVal).length > 0) {
|
||||
// 生成实例
|
||||
this.bpmnViewer && this.bpmnViewer.destroy();
|
||||
this.bpmnViewer = new BpmnViewer({
|
||||
container: this.$refs.flowCanvas,
|
||||
height: 'calc(100vh - 200px)',
|
||||
});
|
||||
this.loadFlowCanvas(newVal);
|
||||
}
|
||||
},
|
||||
immediate: true, // 立即生效
|
||||
deep: true //监听对象或数组的时候，要用到深度监听
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
// 加载流程
|
||||
async loadFlowCanvas(flowData) {
|
||||
const self = this
|
||||
try {
|
||||
|
||||
await self.bpmnViewer.importXML(flowData.xmlData);
|
||||
self.fitViewport()
|
||||
if (flowData.nodeData !==undefined && flowData.nodeData.length > 0 ) {
|
||||
self.fillColor(flowData.nodeData)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err.message, err.warnings)
|
||||
}
|
||||
},
|
||||
// 设置高亮颜色的class
|
||||
setNodeColor(nodeCodes, colorClass, canvas) {
|
||||
for (let i = 0; i < nodeCodes.length; i++) {
|
||||
canvas.addMarker(nodeCodes[i], colorClass);
|
||||
}
|
||||
},
|
||||
// 让图能自适应屏幕
|
||||
fitViewport() {
|
||||
this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
|
||||
},
|
||||
// 放大缩小
|
||||
zoomViewport(zoomIn = true) {
|
||||
this.zoom = this.bpmnViewer.get('canvas').zoom()
|
||||
this.zoom += (zoomIn ? 0.1 : -0.1)
|
||||
if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
|
||||
},
|
||||
|
||||
// 设置高亮颜色的
|
||||
fillColor(nodeData) {
|
||||
const canvas = this.bpmnViewer.get('canvas')
|
||||
this.bpmnViewer.getDefinitions().rootElements[1].flowElements.forEach(n => {
|
||||
const completeTask = nodeData.find(m => m.key === n.id)
|
||||
const todoTask = nodeData.find(m => !m.completed)
|
||||
const endTask = nodeData[nodeData.length - 1]
|
||||
if (n.$type === 'bpmn:UserTask') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing?.forEach(nn => {
|
||||
const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
|
||||
if (targetTask) {
|
||||
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
|
||||
canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}else {
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
// 排他网关
|
||||
else if (n.$type === 'bpmn:ExclusiveGateway') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing?.forEach(nn => {
|
||||
const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
|
||||
if (targetTask) {
|
||||
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
// 并行网关
|
||||
else if (n.$type === 'bpmn:ParallelGateway') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing?.forEach(nn => {
|
||||
const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
|
||||
if (targetTask) {
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
else if (n.$type === 'bpmn:StartEvent') {
|
||||
n.outgoing.forEach(nn => {
|
||||
const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
|
||||
if (completeTask) {
|
||||
canvas.addMarker(nn.id, 'highlight')
|
||||
canvas.addMarker(n.id, 'highlight')
|
||||
return
|
||||
}
|
||||
})
|
||||
}
|
||||
else if (n.$type === 'bpmn:EndEvent') {
|
||||
if (endTask.key === n.id && endTask.completed) {
|
||||
canvas.addMarker(n.id, 'highlight')
|
||||
return
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
.view-mode {
|
||||
.el-header, .el-aside, .djs-palette, .bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
.el-loading-mask {
|
||||
background-color: initial;
|
||||
}
|
||||
.el-loading-spinner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.containers {
|
||||
// background-color: #ffffff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
width: 300px;
|
||||
}
|
||||
.load {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-form-item__label{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.djs-palette{
|
||||
left: 0px!important;
|
||||
top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.djs-container svg {
|
||||
min-height: 650px;
|
||||
}
|
||||
|
||||
.highlight.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: green !important;
|
||||
stroke: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.highlight.djs-shape .djs-visual > :nth-child(2) {
|
||||
fill: green !important;
|
||||
}
|
||||
.highlight.djs-shape .djs-visual > path {
|
||||
fill: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
stroke: green !important;
|
||||
}
|
||||
.highlight.djs-connection > .djs-visual > path {
|
||||
stroke: green !important;
|
||||
}
|
||||
.highlight-todo.djs-connection > .djs-visual > path {
|
||||
stroke: orange !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: orange !important;
|
||||
stroke: orange !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.overlays-div {
|
||||
font-size: 10px;
|
||||
color: red;
|
||||
width: 100px;
|
||||
top: -20px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
504
src/views/flow_task/todo/detail/index.vue
Normal file
504
src/views/flow_task/todo/detail/index.vue
Normal file
@@ -0,0 +1,504 @@
|
||||
<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="test-form">
|
||||
<!-- <parser :key="new Date().getTime()" :form-conf="variablesData"/>-->
|
||||
<parser :key="new Date().getTime()" :form-conf="variablesData" @submit="submitForm" ref="parser"/>
|
||||
|
||||
</div>
|
||||
<div style="margin-left:15%;margin-bottom: 20px;font-size: 14px;">
|
||||
<el-button v-if="!formKeyExist" icon="el-icon-edit-outline" type="success" size="mini"
|
||||
@click="handleComplete">审批
|
||||
</el-button>
|
||||
<!-- <el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">委派</el-button>-->
|
||||
<!-- <el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleAssign">转办</el-button>-->
|
||||
<!-- <el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">签收</el-button>-->
|
||||
<!-- <el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleReturn">退回</el-button>-->
|
||||
<!-- <el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回</el-button>-->
|
||||
</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-dialog :title="completeTitle" :visible.sync="completeOpen" width="60%" append-to-body>
|
||||
<el-form ref="taskForm" :model="taskForm">
|
||||
<el-form-item prop="targetKey">
|
||||
<flow-user v-if="checkSendUser" :checkType="checkType" @handleUserSelect="handleUserSelect"></flow-user>
|
||||
<flow-role v-if="checkSendRole" @handleRoleSelect="handleRoleSelect"></flow-role>
|
||||
</el-form-item>
|
||||
<el-form-item label="处理意见" label-width="80px" prop="comment"
|
||||
:rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
|
||||
<el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="completeOpen = false">取 消</el-button>
|
||||
<el-button type="primary" @click="taskComplete">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!--退回流程-->
|
||||
<el-dialog :title="returnTitle" :visible.sync="returnOpen" width="40%" append-to-body>
|
||||
<el-form ref="taskForm" :model="taskForm" label-width="80px">
|
||||
<el-form-item label="退回节点" prop="targetKey">
|
||||
<el-radio-group v-model="taskForm.targetKey">
|
||||
<el-radio-button
|
||||
v-for="item in returnTaskList"
|
||||
:key="item.id"
|
||||
:label="item.id"
|
||||
>{{ item.name }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="退回意见" prop="comment"
|
||||
:rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
|
||||
<el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="returnOpen = false">取 消</el-button>
|
||||
<el-button type="primary" @click="taskReturn">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!--驳回流程-->
|
||||
<el-dialog :title="rejectTitle" :visible.sync="rejectOpen" width="40%" append-to-body>
|
||||
<el-form ref="taskForm" :model="taskForm" label-width="80px">
|
||||
<el-form-item label="驳回意见" prop="comment"
|
||||
:rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
|
||||
<el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="rejectOpen = false">取 消</el-button>
|
||||
<el-button type="primary" @click="taskReject">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {flowRecord} from "@/api/flowable/finished";
|
||||
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import {getProcessVariables, flowXmlAndNode, definitionStart} from "@/api/flowable/definition";
|
||||
import {
|
||||
complete,
|
||||
rejectTask,
|
||||
returnList,
|
||||
returnTask,
|
||||
getNextFlowNode,
|
||||
delegate,
|
||||
flowTaskForm,
|
||||
} from "@/api/flowable/todo";
|
||||
import flow from '@/views/flowable/task/todo/detail/flow'
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import {listUser} from "@/api/system/user";
|
||||
|
||||
export default {
|
||||
name: "Record",
|
||||
components: {
|
||||
Parser,
|
||||
flow,
|
||||
|
||||
},
|
||||
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: {}, // 表单校验
|
||||
variablesForm: {}, // 流程变量数据
|
||||
taskForm: {
|
||||
returnTaskShow: false, // 是否展示回退表单
|
||||
delegateTaskShow: false, // 是否展示回退表单
|
||||
defaultTaskShow: true, // 默认处理
|
||||
comment: "", // 意见内容
|
||||
procInsId: "", // 流程实例编号
|
||||
instanceId: "", // 流程实例编号
|
||||
deployId: "", // 流程定义编号
|
||||
taskId: "",// 流程任务编号
|
||||
procDefId: "", // 流程编号
|
||||
targetKey: "",
|
||||
variables: {
|
||||
variables: {}
|
||||
},
|
||||
},
|
||||
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, // 当前节点是否存在表单
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.$route.query) {
|
||||
this.taskName = this.$route.query.taskName;
|
||||
this.startUser = this.$route.query.startUser;
|
||||
this.taskForm.deployId = this.$route.query.deployId;
|
||||
this.taskForm.taskId = this.$route.query.taskId;
|
||||
this.taskForm.procInsId = this.$route.query.procInsId;
|
||||
this.taskForm.executionId = this.$route.query.executionId;
|
||||
this.taskForm.instanceId = this.$route.query.procInsId;
|
||||
// 流程任务获取变量信息
|
||||
if (this.taskForm.taskId) {
|
||||
this.processVariables(this.taskForm.taskId)
|
||||
this.getFlowTaskForm(this.taskForm.taskId)
|
||||
}
|
||||
this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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);
|
||||
},
|
||||
/** 用户审批任务 */
|
||||
taskComplete() {
|
||||
if (!this.taskForm.variables && this.checkSendUser) {
|
||||
this.$modal.msgError("请选择流程接收人员!");
|
||||
return;
|
||||
}
|
||||
if (!this.taskForm.variables && this.checkSendRole) {
|
||||
this.$modal.msgError("请选择流程接收角色组!");
|
||||
return;
|
||||
}
|
||||
if (!this.taskForm.comment) {
|
||||
this.$modal.msgError("请输入审批意见!");
|
||||
return;
|
||||
}
|
||||
if (this.taskForm && this.formKeyExist) {
|
||||
// 表单是否禁用
|
||||
this.taskForm.formData.formData.disabled = true;
|
||||
// 是否显示按钮
|
||||
this.taskForm.formData.formData.formBtns = false;
|
||||
this.taskForm.variables = Object.assign({}, this.taskForm.variables, this.taskForm.formData.valData);
|
||||
this.taskForm.variables.variables = this.taskForm.formData.formData;
|
||||
complete(this.taskForm).then(response => {
|
||||
this.$modal.msgSuccess(response.msg);
|
||||
this.goBack();
|
||||
});
|
||||
} else {
|
||||
// 流程设计人员类型配置为固定人员接收任务时,直接提交任务到下一步
|
||||
complete(this.taskForm).then(response => {
|
||||
this.$modal.msgSuccess(response.msg);
|
||||
this.goBack();
|
||||
});
|
||||
}
|
||||
},
|
||||
/** 委派任务 */
|
||||
handleDelegate() {
|
||||
this.taskForm.delegateTaskShow = true;
|
||||
this.taskForm.defaultTaskShow = false;
|
||||
},
|
||||
handleAssign() {
|
||||
|
||||
},
|
||||
/** 返回页面 */
|
||||
goBack() {
|
||||
// 关闭当前标签页并返回上个页面
|
||||
const obj = { path: "/task/todo", query: { t: Date.now()} };
|
||||
this.$tab.closeOpenPage(obj);
|
||||
},
|
||||
/** 驳回任务 */
|
||||
handleReject() {
|
||||
this.rejectOpen = true;
|
||||
this.rejectTitle = "驳回流程";
|
||||
},
|
||||
/** 驳回任务 */
|
||||
taskReject() {
|
||||
this.$refs["taskForm"].validate(valid => {
|
||||
if (valid) {
|
||||
rejectTask(this.taskForm).then(res => {
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
this.goBack();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 可退回任务列表 */
|
||||
handleReturn() {
|
||||
this.returnOpen = true;
|
||||
this.returnTitle = "退回流程";
|
||||
returnList(this.taskForm).then(res => {
|
||||
this.returnTaskList = res.data;
|
||||
this.taskForm.variables = null;
|
||||
})
|
||||
},
|
||||
/** 提交退回任务 */
|
||||
taskReturn() {
|
||||
this.$refs["taskForm"].validate(valid => {
|
||||
if (valid) {
|
||||
returnTask(this.taskForm).then(res => {
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
this.goBack()
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 取消回退任务按钮 */
|
||||
cancelTask() {
|
||||
this.taskForm.returnTaskShow = false;
|
||||
this.taskForm.defaultTaskShow = true;
|
||||
this.returnTaskList = [];
|
||||
},
|
||||
/** 委派任务 */
|
||||
submitDeleteTask() {
|
||||
this.$refs["taskForm"].validate(valid => {
|
||||
if (valid) {
|
||||
delegate(this.taskForm).then(response => {
|
||||
this.$modal.msgSuccess(response.msg);
|
||||
this.goBack();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 取消回退任务按钮 */
|
||||
cancelDelegateTask() {
|
||||
this.taskForm.delegateTaskShow = false;
|
||||
this.taskForm.defaultTaskShow = true;
|
||||
this.returnTaskList = [];
|
||||
},
|
||||
/** 申请流程表单数据提交 */
|
||||
submitForm(formData) {
|
||||
// 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
|
||||
const params = {taskId: this.taskForm.taskId}
|
||||
getNextFlowNode(params).then(res => {
|
||||
const data = res.data;
|
||||
this.taskForm.formData = formData;
|
||||
if (data) {
|
||||
if (data.dataType === 'dynamic') {
|
||||
if (data.type === 'assignee') { // 指定人员
|
||||
this.checkSendUser = true;
|
||||
this.checkType = "single";
|
||||
} else if (data.type === 'candidateUsers') { // 候选人员(多个)
|
||||
this.checkSendUser = true;
|
||||
this.checkType = "multiple";
|
||||
} else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
|
||||
this.checkSendRole = true;
|
||||
} else { // 会签
|
||||
// 流程设计指定的 elementVariable 作为会签人员列表
|
||||
this.multiInstanceVars = data.vars;
|
||||
this.checkSendUser = true;
|
||||
this.checkType = "multiple";
|
||||
}
|
||||
}
|
||||
}
|
||||
this.completeOpen = true;
|
||||
this.completeTitle = "流程审批";
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
237
src/views/flow_task/todo/index.vue
Normal file
237
src/views/flow_task/todo/index.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="deployTime">
|
||||
<el-date-picker clearable size="small"
|
||||
v-model="queryParams.deployTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="todoList" border @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center"/>
|
||||
<el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="流程名称" align="center" prop="procDefName"/>
|
||||
<el-table-column label="当前节点" align="center" prop="taskName"/>
|
||||
<el-table-column label="流程版本" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程发起人" align="center">
|
||||
<template slot-scope="scope">
|
||||
<label>{{ scope.row.startUserName }}
|
||||
<el-tag type="info" size="mini">{{ scope.row.startDeptName }}</el-tag>
|
||||
</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="接收时间" align="center" prop="createTime" width="180"/>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit-outline"
|
||||
@click="handleProcess(scope.row)"
|
||||
>处理
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
|
||||
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="queryParams.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="queryParams.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
todoList,
|
||||
complete,
|
||||
returnList,
|
||||
returnTask,
|
||||
rejectTask,
|
||||
getDeployment,
|
||||
delDeployment,
|
||||
exportDeployment
|
||||
} from "@/api/flowable/todo";
|
||||
|
||||
export default {
|
||||
name: "Deploy",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 流程待办任务表格数据
|
||||
todoList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
category: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询流程定义列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
todoList(this.queryParams).then(response => {
|
||||
this.todoList = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 跳转到处理页面
|
||||
handleProcess(row) {
|
||||
|
||||
let route = ''
|
||||
if(row.formType == 1){
|
||||
//普测
|
||||
route = '/Processsupervision/harmonicmanagement'
|
||||
}else if(row.formType == 2){
|
||||
route = "/Processsupervision/interferencemanagement"
|
||||
}
|
||||
//flowType 0.查看 1. 审核
|
||||
//funType:1,
|
||||
this.$router.push({
|
||||
path: route,
|
||||
query: {
|
||||
flowType: 1,
|
||||
formAssId: row.formAssId
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
name: null,
|
||||
category: null,
|
||||
key: null,
|
||||
tenantId: null,
|
||||
deployTime: null,
|
||||
derivedFrom: null,
|
||||
derivedFromRoot: null,
|
||||
parentDeploymentId: null,
|
||||
engineVersion: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.taskId)
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.taskId || this.ids;
|
||||
this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function () {
|
||||
return delDeployment(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
},
|
||||
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.queryParams.pageSize = val;
|
||||
this.lowVoltageUserAccount();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.queryParams.pageNum = val;
|
||||
this.lowVoltageUserAccount();
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user