461 lines
13 KiB
Vue
461 lines
13 KiB
Vue
|
<!--
|
|||
|
|
* @Author: hisense.liangjunhua
|
|||
|
|
* @Date: 2022-06-29 15:59:51
|
|||
|
|
* @LastEditors: hisense.liangjunhua
|
|||
|
|
* @LastEditTime: 2022-06-29 17:21:00
|
|||
|
|
* @Description: 告诉大家这是什么
|
|||
|
|
-->
|
|||
|
|
<!-- 流程业务表单 -->
|
|||
|
|
<template>
|
|||
|
|
<el-card shadow="never" class="aui-card--fill" :key='showKey'>
|
|||
|
|
|
|||
|
|
<!-- 申请人详情 -->
|
|||
|
|
<div>
|
|||
|
|
<h3>申请人信息</h3>
|
|||
|
|
<div class="big-BOX">
|
|||
|
|
<p>
|
|||
|
|
<span class="text">申请人：<span> {{dataForm.content.user || '--'}}</span></span>
|
|||
|
|
<span class="text">电话：<span>{{dataForm.content.phone || '--'}}</span></span>
|
|||
|
|
<span class="text">单位：<span>{{dataForm.content.unit || '--'}}</span></span>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<span class="text"> 能力申请标题：<span> {{dataForm.content.title|| '--'}}</span></span>
|
|||
|
|
<span class="text">应用系统：<span>{{dataForm.content.applicationSystem || '--'}}</span></span>
|
|||
|
|
<span class="text">应用场景：<span> {{dataForm.content.applicationSceneStr || '--'}}</span></span>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<span> 能力应用期望效果：<span> {{dataForm.content.effectWish|| '--'}}</span></span>
|
|||
|
|
</p>
|
|||
|
|
<p v-if="dataForm.content.enclosure">
|
|||
|
|
<span> 申请附件：<span> {{dataForm.content.enclosure|| '--'}}<button @click="downloadFile2(dataForm.content.enclosure)">预览</button></span></span>
|
|||
|
|
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 申请能力 -->
|
|||
|
|
<div class="AbilityApply">
|
|||
|
|
<h3>申请能力</h3>
|
|||
|
|
<ul v-for="item in dataList" :key="item.id">
|
|||
|
|
<!-- <li class="title">{{item.address}}</li> -->
|
|||
|
|
<li class="clearfix">
|
|||
|
|
<img
|
|||
|
|
src="~@/assets/img/imgLeft.png"
|
|||
|
|
/>
|
|||
|
|
<div>
|
|||
|
|
<h2>{{item.name}}<span>{{item.type}}</span></h2>
|
|||
|
|
<p>{{item.describe}}</p>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<!-- 流程综合组件 -->
|
|||
|
|
<!-- <ren-process-multiple
|
|||
|
|
v-if="processVisible"
|
|||
|
|
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
|
|||
|
|
saveFormUrl="/processForm/tabilityapplication"
|
|||
|
|
dataFormName="dataForm"
|
|||
|
|
ref="renProcessMultiple"
|
|||
|
|
></ren-process-multiple> -->
|
|||
|
|
|
|||
|
|
<!-- 审批 -->
|
|||
|
|
<div class="agreeOr">
|
|||
|
|
<h3>审批</h3>
|
|||
|
|
<div>
|
|||
|
|
<el-radio-group v-model="agreeOrList" style="width:230px;">
|
|||
|
|
<el-radio-button label="同意" class="blueAll">同意</el-radio-button>
|
|||
|
|
<el-radio-button label="退回" class="redAll">退回</el-radio-button>
|
|||
|
|
</el-radio-group>
|
|||
|
|
<el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意意见"></el-input>
|
|||
|
|
<el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回意见"></el-input>
|
|||
|
|
<el-button class="inputBule" @click="agreeOrNot">提交</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 流程详情 -->
|
|||
|
|
<ren-process-detail-import></ren-process-detail-import>
|
|||
|
|
</el-card>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 引入工作流公共方法
|
|||
|
|
import processModule from '@/mixins/process-module'
|
|||
|
|
import debounce from 'lodash/debounce'
|
|||
|
|
import qs from 'qs'
|
|||
|
|
import RenProcessDetailImport from '@/components/ren-process-detail/src/ren-process-detail-import'
|
|||
|
|
export default {
|
|||
|
|
// 注入公共方法
|
|||
|
|
mixins: [processModule],
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
visible: true,
|
|||
|
|
showKey: 0,
|
|||
|
|
// 表单属性是否可编辑
|
|||
|
|
// fieldDisabled: false,
|
|||
|
|
// dataForm: {
|
|||
|
|
// id: '',
|
|||
|
|
// user: '',
|
|||
|
|
// phone: '',
|
|||
|
|
// unit: '',
|
|||
|
|
// area: '',
|
|||
|
|
// system: '',
|
|||
|
|
// scene: '',
|
|||
|
|
// basis: ''
|
|||
|
|
// }
|
|||
|
|
dataForm: {
|
|||
|
|
id: '',
|
|||
|
|
content: {}
|
|||
|
|
},
|
|||
|
|
dataList: [],
|
|||
|
|
inputAgree: '',
|
|||
|
|
inputNo: '',
|
|||
|
|
agreeOrList: '同意'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created () {
|
|||
|
|
// 将业务KEY赋值给表单
|
|||
|
|
console.log('params=================>', this.$route, this.$route.params)
|
|||
|
|
this.dataForm.taskId = this.$route.params.taskId
|
|||
|
|
this.init()
|
|||
|
|
// // 流程回调
|
|||
|
|
var callbacks = {
|
|||
|
|
startProcessSuccessCallback: this.closeCurrentTab,
|
|||
|
|
startProcessErrorCallback: this.startProcessErrorCallback,
|
|||
|
|
taskHandleSuccessCallback: this.closeCurrentTab,
|
|||
|
|
taskHandleErrorCallback: this.taskHandleErrorCallback,
|
|||
|
|
formSaveSuccessCallback: null,
|
|||
|
|
formSaveErrorCallback: null
|
|||
|
|
}
|
|||
|
|
// 初始化综合组件
|
|||
|
|
this.initProcessMultiple(callbacks)
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// dataRule () {
|
|||
|
|
// return {
|
|||
|
|
// inputAgree: [
|
|||
|
|
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|||
|
|
// ],
|
|||
|
|
// inputNo: [
|
|||
|
|
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|||
|
|
// ]
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
RenProcessDetailImport
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
init () {
|
|||
|
|
// this.visible = true
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
// this.$refs.dataForm.resetFields()
|
|||
|
|
if (this.dataForm.taskId) {
|
|||
|
|
// 如业务KEY已存在，不允许编辑
|
|||
|
|
// this.fieldDisabled = true
|
|||
|
|
this.getInfo()
|
|||
|
|
console.log(this.dataForm, 'init')
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
downloadFile2 (url) {
|
|||
|
|
window.open(
|
|||
|
|
window.SITE_CONFIG.previewUrl +
|
|||
|
|
'hisense_office/onlinePreview?url=' +
|
|||
|
|
btoa(encodeURI(url))
|
|||
|
|
)
|
|||
|
|
},
|
|||
|
|
// 获取信息
|
|||
|
|
getInfo () {
|
|||
|
|
this.$http
|
|||
|
|
.get(`/act/task/getTaskVariables?taskId=${this.dataForm.taskId}&variableName=tAbilityApplicationDTOList`)
|
|||
|
|
.then(({ data: res }) => {
|
|||
|
|
if (res.code !== 0) {
|
|||
|
|
console.log(res.data)
|
|||
|
|
return this.$message.error(res.msg)
|
|||
|
|
}
|
|||
|
|
console.log(res.data, this.dataForm, 'elas============================')
|
|||
|
|
if (res.data.tAbilityApplicationDTOList[0].applicationScene) {
|
|||
|
|
res.data.tAbilityApplicationDTOList[0].applicationSceneStr = ''
|
|||
|
|
res.data.tAbilityApplicationDTOList[0].applicationScene.map((val, index) => {
|
|||
|
|
res.data.tAbilityApplicationDTOList[0].applicationSceneStr += val
|
|||
|
|
if (index < res.data.tAbilityApplicationDTOList[0].applicationScene.length - 1) {
|
|||
|
|
res.data.tAbilityApplicationDTOList[0].applicationSceneStr += '、'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
this.dataForm.content = res.data.tAbilityApplicationDTOList[0]
|
|||
|
|
res.data.tAbilityApplicationDTOList.map(val => {
|
|||
|
|
this.$http.get('/resource/' + val.resourceId).then(res1 => {
|
|||
|
|
console.log(res1.data.data, '1111111111111111111111111111111111')
|
|||
|
|
this.dataList.push({
|
|||
|
|
name: res1.data.data.name,
|
|||
|
|
type: res1.data.data.type,
|
|||
|
|
describe: res1.data.data.description
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
.catch(() => {})
|
|||
|
|
},
|
|||
|
|
// 申请能力
|
|||
|
|
applyData () {
|
|||
|
|
this.$http
|
|||
|
|
.get(`/resource/select/${this.dataForm.instanceId}`)
|
|||
|
|
.then(({ data: res }) => {
|
|||
|
|
if (res.code !== 0) {
|
|||
|
|
console.log(res.data, 'hhhhh')
|
|||
|
|
// return this.$message.error(res.msg)
|
|||
|
|
}
|
|||
|
|
// console.log(res.data, 'elas')
|
|||
|
|
// this.dataForm.content = res.data
|
|||
|
|
// console.log(this.dataForm, 'ela')
|
|||
|
|
})
|
|||
|
|
.catch(() => {})
|
|||
|
|
},
|
|||
|
|
// 同意与退回
|
|||
|
|
agreeOrNot: debounce(function () {
|
|||
|
|
if (this.agreeOrList === '同意') {
|
|||
|
|
console.log('this.dataForm', this.dataForm)
|
|||
|
|
const params = qs.stringify({
|
|||
|
|
taskId: this.dataForm.taskId,
|
|||
|
|
comment: this.inputAgree
|
|||
|
|
})
|
|||
|
|
console.log(params)
|
|||
|
|
this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
|
|||
|
|
if (res.code !== 0) {
|
|||
|
|
this.$message.error(res.msg)
|
|||
|
|
if (this.callbacks.taskHandleErrorCallback) {
|
|||
|
|
this.callbacks.taskHandleErrorCallback(res)
|
|||
|
|
}
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.$message({
|
|||
|
|
message: this.$t('prompt.success'),
|
|||
|
|
type: 'success',
|
|||
|
|
duration: 500,
|
|||
|
|
onClose: () => {
|
|||
|
|
this.visible = false
|
|||
|
|
if (this.callbacks.taskHandleSuccessCallback) {
|
|||
|
|
this.callbacks.taskHandleSuccessCallback(res)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}).catch(() => {})
|
|||
|
|
} else if (this.agreeOrList === '退回') {
|
|||
|
|
const params = qs.stringify({
|
|||
|
|
taskId: this.dataForm.taskId,
|
|||
|
|
comment: this.inputNo
|
|||
|
|
})
|
|||
|
|
this.$http.post('/act/task/backToFirst?', params).then(({ data: res }) => {
|
|||
|
|
if (res.code !== 0) {
|
|||
|
|
this.$message.error(res.msg)
|
|||
|
|
if (this.callbacks.taskHandleErrorCallback) {
|
|||
|
|
this.callbacks.taskHandleErrorCallback(res)
|
|||
|
|
}
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.$message({
|
|||
|
|
message: this.$t('prompt.success'),
|
|||
|
|
type: 'success',
|
|||
|
|
duration: 500,
|
|||
|
|
onClose: () => {
|
|||
|
|
this.visible = false
|
|||
|
|
if (this.callbacks.taskHandleSuccessCallback) {
|
|||
|
|
this.callbacks.taskHandleSuccessCallback(res)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}, 1000, { leading: true, trailing: false }),
|
|||
|
|
// 启动流程出错回调
|
|||
|
|
startProcessErrorCallback (data) {
|
|||
|
|
console.log(data)
|
|||
|
|
},
|
|||
|
|
// 任务处理出错回调
|
|||
|
|
taskHandleErrorCallback (data) {}
|
|||
|
|
},
|
|||
|
|
mounted () {
|
|||
|
|
// this.applyData()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
::v-deep .big-BOX {
|
|||
|
|
background: rgba(244, 245, 248, 0.8);
|
|||
|
|
padding: 24px;
|
|||
|
|
h3 {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #212121;
|
|||
|
|
}
|
|||
|
|
p {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
color: #212121;
|
|||
|
|
font-size: 14px;
|
|||
|
|
span {
|
|||
|
|
display: inline-block;
|
|||
|
|
margin-left: 8px;
|
|||
|
|
line-height: 32px;
|
|||
|
|
span {
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
width: 500px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
p:last-of-type {
|
|||
|
|
margin-top: 16px;
|
|||
|
|
width: 100%;
|
|||
|
|
span {
|
|||
|
|
display: flex;
|
|||
|
|
span {
|
|||
|
|
padding: 0 12px;
|
|||
|
|
height: 32px;
|
|||
|
|
background: rgba(232, 234, 239, 1);
|
|||
|
|
border-radius: 2px;
|
|||
|
|
button {
|
|||
|
|
background: unset;
|
|||
|
|
border: 0;
|
|||
|
|
color: #0558e1;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
::v-deep .AbilityApply {
|
|||
|
|
margin-top: 32px;
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #212121;
|
|||
|
|
border-bottom: 1px solid #dddee1;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
ul {
|
|||
|
|
padding-left: 0px;
|
|||
|
|
li {
|
|||
|
|
list-style: none;
|
|||
|
|
padding: 30px 0;
|
|||
|
|
border-bottom: 1px solid #dddee1;
|
|||
|
|
display: flex;
|
|||
|
|
img {
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
}
|
|||
|
|
div {
|
|||
|
|
margin-left: 16px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
h2 {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #000;
|
|||
|
|
display: flex;
|
|||
|
|
span {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
margin-left: 8px;
|
|||
|
|
background: rgba(0, 184, 230, 0.8);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 5px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
p {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.clearfix:after {
|
|||
|
|
display: block;
|
|||
|
|
content: "";
|
|||
|
|
clear: both;
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
color: #0558e1;
|
|||
|
|
font-size: 18px;
|
|||
|
|
padding-bottom: 0;
|
|||
|
|
border-bottom: 0;
|
|||
|
|
}
|
|||
|
|
.title:before {
|
|||
|
|
content: "";
|
|||
|
|
width: 6px;
|
|||
|
|
height: 6px;
|
|||
|
|
display: inline-block;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #0558e1;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
margin-top: 6px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
::v-deep .agreeOr > div {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
.el-input {
|
|||
|
|
margin-right: 10px;
|
|||
|
|
margin-left: 32px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
::v-deep .agreeOr > div:last-of-type {
|
|||
|
|
margin-top: 15px;
|
|||
|
|
}
|
|||
|
|
.blueAll {
|
|||
|
|
::v-deep .el-radio-button__inner {
|
|||
|
|
width: 80px;
|
|||
|
|
height: 32px;
|
|||
|
|
line-height: 32px;
|
|||
|
|
padding: 0;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
background: #ffffff;
|
|||
|
|
color: #0558e1;
|
|||
|
|
border: 1px solid #0558e1;
|
|||
|
|
}
|
|||
|
|
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|||
|
|
box-shadow: unset !important;
|
|||
|
|
background: #0558e1;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.inputBule {
|
|||
|
|
width: 55px;
|
|||
|
|
height: 32px;
|
|||
|
|
line-height: 32px;
|
|||
|
|
padding: 0;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
background: #0558e1;
|
|||
|
|
color: #ffffff;
|
|||
|
|
border: 1px solid #0558e1;
|
|||
|
|
}
|
|||
|
|
.redAll {
|
|||
|
|
margin-left: 10px;
|
|||
|
|
::v-deep .el-radio-button__inner {
|
|||
|
|
width: 80px;
|
|||
|
|
height: 32px;
|
|||
|
|
line-height: 32px;
|
|||
|
|
padding: 0;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
border: 1px solid #e83a48;
|
|||
|
|
background: #ffffff;
|
|||
|
|
color: #e83a48;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|||
|
|
box-shadow: unset !important;
|
|||
|
|
color: #ffffff;
|
|||
|
|
background: #e83a48;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.blueInput {
|
|||
|
|
width: 55px;
|
|||
|
|
}
|
|||
|
|
</style>
|