410 lines
13 KiB
Vue
410 lines
13 KiB
Vue
<template>
|
||
<process-common-layout class="page-box" :loading="loading" :process-key="ProcessKey.FB_ENTRY_CHANGE.value" ref="personInfo">
|
||
<template v-slot:process>
|
||
<!--流程信息-->
|
||
<div class="process-part">
|
||
<div class="process-part-title">{{ $t('processInformation') }}</div>
|
||
<van-form input-align="right">
|
||
<!--流程名称-->
|
||
<van-field v-model="processInfo.processName"
|
||
:label="$t('processName')"
|
||
type="textarea"
|
||
autosize
|
||
readonly
|
||
rows="1"
|
||
:placeholder="global.emptyLine || $t('pleaseEnter')+$t('processName')"
|
||
:border="false" />
|
||
<!--截止日期-->
|
||
<van-field v-model="processInfo.processDueDate"
|
||
:label="$t('expirationDate')"
|
||
type="textarea"
|
||
autosize
|
||
readonly
|
||
rows="1"
|
||
:placeholder="global.emptyLine || $t('pleaseSelect')+$t('expirationDate')"
|
||
:border="false" />
|
||
<!--流程说明-->
|
||
<van-field v-model="processInfo.processDescription"
|
||
:label="$t('processExplain')"
|
||
type="textarea"
|
||
autosize
|
||
disabled
|
||
rows="1"
|
||
:placeholder="$t('pleaseEnter')+$t('processExplain')"
|
||
:border="false"
|
||
input-align="left"
|
||
class="vertical-form-item">
|
||
</van-field>
|
||
</van-form>
|
||
</div>
|
||
|
||
<!--业务信息，循环展示-->
|
||
<template v-for="(part,index) in formList">
|
||
<div class="process-part" :key="'part' + index" v-if="(part && part.length > 0) || formPartList.findIndex(index) === 0">
|
||
<div class="process-part-title">{{ index }}</div>
|
||
<van-form input-align="right" label-width="7.2em">
|
||
<!--来源-->
|
||
<van-field v-if="formPartList.indexOf(index) === 0"
|
||
:placeholder="global.emptyLine"
|
||
v-model="formInline.source_dictText"
|
||
:label="$t('standardEntryOrChange.source')"
|
||
type="textarea"
|
||
autosize
|
||
readonly
|
||
rows="1"
|
||
:border="false" />
|
||
<!--操作类型-->
|
||
<van-field v-if="formPartList.indexOf(index) === 0"
|
||
:placeholder="global.emptyLine"
|
||
v-model="formInline.operateType_dictText"
|
||
:label="$t('standardEntryOrChange.operationType')"
|
||
type="textarea"
|
||
autosize
|
||
readonly
|
||
rows="1"
|
||
:border="false" />
|
||
<van-field v-for="formItem in part"
|
||
:placeholder="global.emptyLine"
|
||
:key="formItem.id"
|
||
v-model="formInline[dictField.includes(formItem.dbFieldName) ? formItem.dbFieldName + '_dictText' : formItem.dbFieldName]"
|
||
:label="formItem.dbFieldTxt"
|
||
type="textarea"
|
||
autosize
|
||
readonly
|
||
rows="1"
|
||
:border="false">
|
||
<template v-slot:input v-if="fileField.includes(formItem.dbFieldName)">
|
||
<file-display :file-ids="formInline[formItem.dbFieldName]" v-if="!!formInline[formItem.dbFieldName]" />
|
||
<div v-else>{{ global.emptyLine }}</div>
|
||
</template>
|
||
</van-field>
|
||
</van-form>
|
||
</div>
|
||
</template>
|
||
|
||
<!--流程审批信息-->
|
||
<div class="process-part">
|
||
<div class="process-part-title">{{ $t('processApprovalInfo') }}</div>
|
||
<van-form input-align="right" ref="approvalForm">
|
||
<!--备注-->
|
||
<van-field v-model="approvalInfo.handleText"
|
||
:label="$t('remark')"
|
||
type="textarea"
|
||
autosize
|
||
rows="1"
|
||
:maxlength="500"
|
||
:placeholder="$t('pleaseEnter')+$t('remark')"
|
||
:border="false"
|
||
input-align="left"
|
||
:required="rules.handleText[0].required"
|
||
:rules="rules.handleText"
|
||
class="vertical-form-item">
|
||
</van-field>
|
||
<!--附件-->
|
||
<van-field readonly :label="$t('attachment')" class="attach-form-item" input-align="left">
|
||
<template v-slot:input>
|
||
<z-upload v-model="approvalInfo.handleFile" />
|
||
</template>
|
||
</van-field>
|
||
</van-form>
|
||
</div>
|
||
</template>
|
||
|
||
<template v-slot:operation>
|
||
<!--转办-->
|
||
<van-button class="operation-common-btn" @click="handleTurnTo">
|
||
<template #icon>
|
||
<van-icon class="iconfont" class-prefix="icon" name="xunhuan" />
|
||
</template>
|
||
{{ $t('turnTo') }}
|
||
</van-button>
|
||
<!--同意-->
|
||
<van-button icon="revoke" class="operation-common-btn" type="primary" @click="handleAgree">
|
||
<template #icon>
|
||
<van-icon class="iconfont" class-prefix="icon" name="check" />
|
||
</template>
|
||
{{ $t('agree') }}
|
||
</van-button>
|
||
<!--驳回-->
|
||
<van-button icon="revoke" class="operation-common-btn light-color-button" @click="handleReject">
|
||
<template #icon>
|
||
<van-icon class="iconfont" class-prefix="icon" name="close" />
|
||
</template>
|
||
{{ $t('reject') }}
|
||
</van-button>
|
||
</template>
|
||
|
||
<select-user ref="selectUser" @selected-change="continueTurnTo" />
|
||
</process-common-layout>
|
||
</template>
|
||
|
||
<script>
|
||
import ProcessCommonLayout from '../../../components/ProcessCommonLayout'
|
||
import {
|
||
queryStandardECProcessData,
|
||
getDomesticStandardFormModal,
|
||
getOverseasStandardForm,
|
||
turnToStandardECProcess,
|
||
agreeStandardECProcess,
|
||
rejectStandardECProcess
|
||
} from '../../../api/api'
|
||
import { FieldType, StandardSource, ProcessKey, FGEntryChangeProcessNode } from '../../../enums/commonEnums'
|
||
import FileDisplay from '../../../components/FileDisplay'
|
||
import SelectUser from '../../../components/SelectUser'
|
||
import ZUpload from '../../../components/ZUpload'
|
||
|
||
export default {
|
||
name: 'StandardEntryOrChangeProcess',
|
||
components: { ZUpload, ProcessCommonLayout, FileDisplay, SelectUser },
|
||
data () {
|
||
return {
|
||
ProcessKey,
|
||
loading: false,
|
||
processInfo: {}, // 流程信息数据
|
||
businessId: null,
|
||
formInline: {}, // 业务信息表单数据
|
||
formList: [], // 表单
|
||
dictField: [], // 需要翻译的字段
|
||
fileField: [], // 文件字段
|
||
formPartList: [], // 展示区域信息
|
||
approvalInfo: {}, // 流程审批信息
|
||
rules: {
|
||
handleText: [{ required: false, message: this.$t('pleaseEnter') + this.$t('remark'), trigger: 'onBlur' }]
|
||
}
|
||
}
|
||
},
|
||
created () {
|
||
this.initProcessData()
|
||
},
|
||
methods: {
|
||
/**
|
||
* 获取流程数据
|
||
*/
|
||
initProcessData () {
|
||
this.loading = true
|
||
const { processInstanceId, taskId, projectId } = this.$route.query
|
||
queryStandardECProcessData({ processInstanceId, taskId, projectId }).then(async res => {
|
||
if (res.success) {
|
||
const { result = {} } = res
|
||
this.processInfo = Object.assign({}, result.basicProcessInfoDTO || {})
|
||
this.approvalInfo = Object.assign({}, result.basicTaskInfoDTO || {})
|
||
this.formInline = {
|
||
...result.businessInfoDTO.businessMap,
|
||
source_dictText: result.businessInfoDTO.source_dictText,
|
||
operateType_dictText: result.businessInfoDTO.operateType_dictText
|
||
}
|
||
switch (this.formInline.source) {
|
||
case StandardSource.DOMESTIC.value:
|
||
await this.getDomesticFormItem()
|
||
break
|
||
case StandardSource.OVERSEAS.value:
|
||
await this.getOverseasFormItem()
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
} else {
|
||
this.$message(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/**
|
||
* 获取国标的表单
|
||
*/
|
||
getDomesticFormItem () {
|
||
return new Promise(resolve => {
|
||
getDomesticStandardFormModal({
|
||
module: StandardSource.DOMESTIC.value,
|
||
type: 2 // 2是新增；1是详情
|
||
}).then(res => {
|
||
if (res.success) {
|
||
this.formList = res.result
|
||
this.dealFileAndDict()
|
||
} else {
|
||
this.$message(res.message)
|
||
}
|
||
}).finally(() => {
|
||
resolve()
|
||
})
|
||
})
|
||
},
|
||
/**
|
||
* 获取海外表单
|
||
*/
|
||
getOverseasFormItem () {
|
||
return new Promise(resolve => {
|
||
getOverseasStandardForm({
|
||
module: StandardSource.OVERSEAS.value,
|
||
type: 2 // 2是新增；1是详情
|
||
}).then(res => {
|
||
if (res.success) {
|
||
this.formList = res.result
|
||
this.dealFileAndDict()
|
||
} else {
|
||
this.$message(res.message)
|
||
}
|
||
}).finally(() => {
|
||
resolve()
|
||
})
|
||
})
|
||
},
|
||
dealFileAndDict () {
|
||
this.formPartList = Object.keys(this.formList)
|
||
// 字段列表
|
||
const formArr = Object.values(this.formList).reduce((acc, cur) => acc.concat(cur), [])
|
||
this.fileField = []
|
||
this.dictField = []
|
||
formArr.forEach(item => {
|
||
if (item.fieldShowType === FieldType.FILE_UP.value) {
|
||
this.fileField.push(item.dbFieldName)
|
||
}
|
||
const dictType = [FieldType.USER_SINGLE.value, FieldType.ORGAN_SINGLE.value, FieldType.ORGAN_MORE.value, FieldType.OPTION_SINGLE.value, FieldType.OPTION_MORE.value, FieldType.TREE.value, FieldType.TREE_SINGLE.value]
|
||
if (dictType.includes(item.fieldShowType)) {
|
||
this.dictField.push(item.dbFieldName)
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 处理提交的表单数据
|
||
* @returns {{}|boolean}
|
||
*/
|
||
dealFormData () {
|
||
const formData = {}
|
||
let flag = true
|
||
// 流程信息
|
||
formData.basicProcessInfoDTO = { ...this.processInfo }
|
||
// 业务信息
|
||
const formInline = { ...this.formInline }
|
||
Object.keys(formInline).forEach(res => {
|
||
if (formInline[res] instanceof Array) {
|
||
if (formInline[res][0] instanceof Object) {
|
||
// 说明是树选择
|
||
formInline[res] = formInline[res].map(item => item.value).join(',')
|
||
} else {
|
||
formInline[res] = formInline[res].join(',')
|
||
}
|
||
}
|
||
})
|
||
formData.businessInfoDTO = {
|
||
businessMap: formInline,
|
||
id: this.businessId
|
||
}
|
||
// 流程审批信息，需要进行表单校验
|
||
formData.basicTaskInfoDTO = { ...this.approvalInfo }
|
||
formData.basicTaskInfoDTO.taskId = this.$route.query.taskId
|
||
// 处理人员信息
|
||
const userInfo = this.$refs.personInfo.getDataObjVerify()
|
||
if (!userInfo) {
|
||
flag = false
|
||
} else {
|
||
formData.userInfoMap = userInfo
|
||
}
|
||
if (flag) {
|
||
return formData
|
||
}
|
||
return flag
|
||
},
|
||
validateForm () {
|
||
let flag = true
|
||
return new Promise(resolve => {
|
||
this.$refs.approvalForm.validate().then(() => {
|
||
}).catch(() => {
|
||
flag = false
|
||
this.$message(this.$t('pleaseEnterRemarks'))
|
||
}).finally(() => {
|
||
resolve(flag)
|
||
})
|
||
})
|
||
},
|
||
/**
|
||
* 转办
|
||
*/
|
||
handleTurnTo () {
|
||
this.$refs.selectUser.open()
|
||
},
|
||
continueTurnTo (value) {
|
||
const params = {
|
||
taskId: this.$route.query.taskId,
|
||
userId: value
|
||
}
|
||
this.loading = true
|
||
turnToStandardECProcess(params).then(res => {
|
||
this.$message(res.message)
|
||
if (res.success) {
|
||
this.goBack()
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/**
|
||
* 同意
|
||
*/
|
||
handleAgree () {
|
||
this.rules.handleText[0].required = false
|
||
if (!this.approvalInfo.handleText) {
|
||
this.approvalInfo.handleText = '同意'
|
||
}
|
||
const formData = this.dealFormData()
|
||
if (!formData) {
|
||
return
|
||
}
|
||
this.loading = true
|
||
agreeStandardECProcess(formData).then(res => {
|
||
this.$message(res.message)
|
||
if (res.success) {
|
||
this.goBack()
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/**
|
||
* 驳回
|
||
*/
|
||
async handleReject () {
|
||
this.rules.handleText[0].required = true
|
||
const validateResult = await this.validateForm()
|
||
if (!validateResult) {
|
||
return
|
||
}
|
||
const formData = this.dealFormData()
|
||
if (!formData) {
|
||
return
|
||
}
|
||
this.loading = true
|
||
rejectStandardECProcess(formData).then(res => {
|
||
this.$message(res.message)
|
||
if (res.success) {
|
||
this.goBack()
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
goBack () {
|
||
let timer = setTimeout(() => {
|
||
clearTimeout(timer)
|
||
timer = null
|
||
this.$router.go(-1)
|
||
}, 700)
|
||
}
|
||
},
|
||
// 组件内路由拦截
|
||
beforeRouteEnter (to, from, next) {
|
||
// 如果不是移动端支持的节点，就跳转NoMobile
|
||
if (!FGEntryChangeProcessNode.propertyOfValue('isMobile', to.query.nodeId)) {
|
||
next({ path: '/noMobile' })
|
||
}
|
||
next()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '~../../../assets/less/common.less';
|
||
|
||
</style>
|