387 lines
12 KiB
Vue
387 lines
12 KiB
Vue
<template>
|
||
<internal-detail-page :title="pageTitle" :content-padding="0" :loading="loading">
|
||
<!--基本信息-->
|
||
<div class="detail-page-scroll-content" v-show="switchValue === 'base'">
|
||
<!-- 流程信息 -->
|
||
<div class="process-part-title">{{ $t('processInformation') }}</div>
|
||
<a-form :form="processInfoForm">
|
||
<a-row>
|
||
<a-col :span="12">
|
||
<!-- 流程名称 -->
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('processName')">
|
||
<a-input :placeholder="$t('pleaseEnter') + $t('processName')"
|
||
@change="event => event.target.value = event.target.value.trim()"
|
||
:maxLength="50"
|
||
:disabled="disabled || processDisabled"
|
||
v-decorator="['prcName', validatorRules.processName]" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<!-- 截止日期 -->
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('expirationDate')">
|
||
<a-date-picker :placeholder="$t('pleaseSelect') + $t('expirationDate')"
|
||
style="width: 100%"
|
||
:disabled="disabled || processDisabled"
|
||
value-format="YYYY-MM-DD hh:mm:ss"
|
||
v-decorator="['dueTime']" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24">
|
||
<!-- 流程说明 -->
|
||
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('processExplain')">
|
||
<a-textarea :placeholder="$t('pleaseEnter') + $t('processExplain')"
|
||
:maxLength="500"
|
||
:rows="4"
|
||
:disabled="disabled || processDisabled"
|
||
v-decorator="['prcMes']" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
|
||
<!-- 业务基本信息 -->
|
||
<div class="process-part-title">{{ $t('basicServiceInformation') }}</div>
|
||
<base-info-form :disabled="disabled" ref="baseInfoForm"/>
|
||
|
||
<!-- 流程审批信息 -->
|
||
<div class="process-part-title">{{ $t('processApprovalInformation') }}</div>
|
||
<a-form :form="approvalInfoForm">
|
||
<!--备注-->
|
||
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('remarks')">
|
||
<a-textarea :placeholder="$t('pleaseEnter') + $t('remarks')"
|
||
:maxLength="500"
|
||
:rows="4"
|
||
v-decorator="['commitText', validatorRules.remarks]" />
|
||
</a-form-item>
|
||
<!--附件-->
|
||
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('businessSupport.questionAnswer.attach')">
|
||
<j-upload v-decorator="['commitFile']" return-id />
|
||
</a-form-item>
|
||
</a-form>
|
||
</div>
|
||
|
||
<div class="detail-page-bottom-operate-box">
|
||
<!--取消-->
|
||
<a-button v-if="btn.includes('cancel')" type="primary" :loading="loading" ghost @click="handleCancel">{{ $t('cancel') }}</a-button>
|
||
<!--保存-->
|
||
<a-button v-if="btn.includes('save')" type="primary" :loading="loading" @click="handleSave" ghost><i class="iconfont icon-save" />{{ $t('preservation') }}</a-button>
|
||
<!--提交-->
|
||
<a-button v-if="btn.includes('submit')" type="primary" :loading="loading" @click="handleSubmit" icon="upload">{{ $t('submit') }}</a-button>
|
||
</div>
|
||
</internal-detail-page>
|
||
</template>
|
||
|
||
<script>
|
||
import '@assets/less/common.less'
|
||
import InternalDetailPage from '@comp/InternalDetailPage'
|
||
import BaseInfoForm from '@views/workCenter/standardPromotionProcess/modules/BaseInfoForm'
|
||
import { ProcessKey, StandardPromotion } from '@/enums/commonEnums'
|
||
import {
|
||
getStandardPromotionDataById, getStandardPromotionDetail,
|
||
getStandardPromotionProjectId,
|
||
saveStandardPromotion,
|
||
startStandardPromotion
|
||
} from '@api/workCenter'
|
||
|
||
export default {
|
||
name: 'StandardPromotionProcess',
|
||
components: { BaseInfoForm, InternalDetailPage },
|
||
data () {
|
||
return {
|
||
loading: false,
|
||
switchValue: 'base',
|
||
labelCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 4 }
|
||
},
|
||
wrapperCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 20 }
|
||
},
|
||
longLabelCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 2 }
|
||
},
|
||
longWrapperCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 22 }
|
||
},
|
||
// 流程key
|
||
processKey: ProcessKey.STANDARD_PROMOTION.value,
|
||
// 当前流程信息
|
||
StandardPromotion,
|
||
info: {},
|
||
formInfo: {},
|
||
currentNode: '',
|
||
currentNodeName: '',
|
||
// 项目id
|
||
projectId: '',
|
||
btn: [],
|
||
validatorRules: {
|
||
// 流程名称
|
||
processName: {
|
||
rules: [
|
||
{ required: true, message: this.$t('pleaseEnter') + this.$t('processName') }
|
||
],
|
||
validateTrigger: 'blur'
|
||
},
|
||
// 授权到期日期
|
||
authExpirationDate: {
|
||
rules: [
|
||
{ required: true, message: this.$t('pleaseSelect') + this.$t('workCenter.permissionApplicationProcess.authExpirationDate') }
|
||
],
|
||
validateTrigger: 'change'
|
||
},
|
||
// 备注
|
||
remarks: {
|
||
rules: [
|
||
{ required: false, message: this.$t('pleaseEnter') + this.$t('remarks') }
|
||
],
|
||
validateTrigger: 'blur'
|
||
}
|
||
},
|
||
// 流程表单
|
||
processInfoForm: this.$form.createForm(this),
|
||
// 流程审批信息表单
|
||
approvalInfoForm: this.$form.createForm(this)
|
||
}
|
||
},
|
||
computed: {
|
||
pageTitle () {
|
||
return this.$t('flowCenter') + this.$route.meta.title + '（' + this.nodeTitle + '）'
|
||
},
|
||
// 节点标题
|
||
nodeTitle () {
|
||
return this.$route.query.taskName || StandardPromotion.initiate.text
|
||
},
|
||
// 禁用业务表单
|
||
disabled () {
|
||
return !this.isInitiate
|
||
},
|
||
// 流程信息禁用
|
||
processDisabled () {
|
||
return this.currentNode !== StandardPromotion.initiate.value
|
||
},
|
||
// 是否发起节点（节点1）
|
||
isInitiate () {
|
||
return this.currentNode === StandardPromotion.initiate.value
|
||
}
|
||
// leaderApproval
|
||
// standardApproval
|
||
},
|
||
created () {
|
||
const { projectId, nodeId, taskName } = this.$route.query
|
||
// 发起、草稿进来没有nodeId，就默认发起节点
|
||
this.currentNode = nodeId || StandardPromotion.initiate.value
|
||
this.currentNodeName = taskName || StandardPromotion.initiate.text
|
||
this.projectId = projectId || ''
|
||
this.btn = StandardPromotion.propertyOfValue('btn', this.currentNode) || []
|
||
// 如果有nodeId，但是匹配不到任何节点，就是是增加的审批节点
|
||
if (nodeId && !StandardPromotion.keyOfValue(nodeId)) {
|
||
// 提交按钮
|
||
this.btn = ['submit']
|
||
}
|
||
// 如果是待办进来，就获取详情数据
|
||
if (this.$route.query.projectId) {
|
||
this.loadPage()
|
||
return
|
||
}
|
||
// 如果是新建进来，就获取项目id
|
||
this.getProjectId()
|
||
},
|
||
methods: {
|
||
/**
|
||
* 获取项目id
|
||
*/
|
||
getProjectId () {
|
||
this.loading = true
|
||
// 否则就是创建一个新的流程
|
||
getStandardPromotionProjectId().then(res => {
|
||
if (res) {
|
||
this.projectId = res + ''
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/**
|
||
* 获取页面详情
|
||
*/
|
||
loadPage () {
|
||
const { projectId, taskId } = this.$route.query
|
||
this.loading = true
|
||
// 获取业务数据
|
||
getStandardPromotionDataById({ projectId: this.projectId }).then(res => {
|
||
if (res.success) {
|
||
const data = res.result || {}
|
||
// 保存并回显表单信息
|
||
this.formInfo = data
|
||
this.$nextTick(() => {
|
||
this.$refs.baseInfoForm.initData(data)
|
||
})
|
||
}
|
||
})
|
||
// 获取流程数据
|
||
getStandardPromotionDetail({
|
||
projectId,
|
||
taskId
|
||
}).then(res => {
|
||
if (res.success) {
|
||
const data = res.result || {}
|
||
const processAll = data.processAll || {}
|
||
const processApprovalRecord = data.processApprovalRecord || {}
|
||
this.info = data
|
||
// 页面回显
|
||
this.processInfoForm && this.processInfoForm.setFieldsValue({
|
||
prcName: processAll.prcName,
|
||
dueTime: processAll.dueTime,
|
||
prcMes: processAll.prcMes
|
||
})
|
||
this.approvalInfoForm && this.approvalInfoForm.setFieldsValue({
|
||
commitText: processApprovalRecord.commitText,
|
||
commitFile: processApprovalRecord.commitFile
|
||
})
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
// 获取页面参数
|
||
async getPageParams (isValidate = true) {
|
||
// 去除备注必填
|
||
this.validatorRules.remarks.rules[0].required = false
|
||
const params = {}
|
||
// 收集所有表单信息
|
||
let formDataList = []
|
||
if (isValidate) {
|
||
// 记录表单验证是否报错
|
||
let err = null
|
||
formDataList = await this.validateFormList(this.processInfoForm, this.approvalInfoForm).catch(() => {
|
||
err = true
|
||
return []
|
||
})
|
||
formDataList[2] = await this.$refs.baseInfoForm.getDataValidate().catch(() => {
|
||
err = true
|
||
})
|
||
// 如果有错误就跳转表单
|
||
if (err !== null) {
|
||
throw new Error('base')
|
||
}
|
||
} else {
|
||
formDataList = [
|
||
this.processInfoForm.getFieldsValue(),
|
||
this.approvalInfoForm.getFieldsValue(),
|
||
this.$refs.baseInfoForm.getData()
|
||
]
|
||
}
|
||
|
||
// 开始处理信息
|
||
// 流程信息
|
||
params.processAll = Object.assign({}, this.info.processAll, formDataList[0], {
|
||
projectId: this.projectId,
|
||
nodeId: this.$route.query.nodeId,
|
||
taskId: this.$route.query.taskId,
|
||
prcType: 21
|
||
})
|
||
|
||
// 处理其他参数
|
||
params.map = Object.assign({}, {
|
||
initiator: this.$store.getters.userInfo.id
|
||
})
|
||
|
||
// 流程审批信息
|
||
params.processApprovalRecord = Object.assign({}, this.info.processApprovalRecord, formDataList[1], {
|
||
projectId: this.projectId
|
||
})
|
||
|
||
// 业务信息
|
||
params.processEsDeclare = Object.assign({}, formDataList[2], {
|
||
projectId: this.projectId,
|
||
id: this.formInfo.id
|
||
})
|
||
return params
|
||
},
|
||
/**
|
||
* 保存
|
||
*/
|
||
handleSave () {
|
||
if (this.loading) return
|
||
this.loading = true
|
||
this.getPageParams(false).then(res => {
|
||
console.log(res)
|
||
// 1待办 2草稿
|
||
res.saveSource = (this.$route.query.draftId || !this.$route.query.projectId) ? 2 : 1
|
||
return saveStandardPromotion(res)
|
||
}).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.handleCancel()
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
}).catch((err) => {
|
||
console.log(err)
|
||
}).finally(() => {
|
||
setTimeout(() => {
|
||
this.loading = false
|
||
}, 1000)
|
||
})
|
||
},
|
||
/**
|
||
* 提交
|
||
*/
|
||
handleSubmit () {
|
||
if (this.loading) return
|
||
this.loading = true
|
||
this.getPageParams().then(res => {
|
||
console.log(res)
|
||
return startStandardPromotion(res)
|
||
}).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.handleCancel()
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
}).catch((err) => {
|
||
console.log(err)
|
||
}).finally(() => {
|
||
setTimeout(() => {
|
||
this.loading = false
|
||
}, 1000)
|
||
})
|
||
},
|
||
/**
|
||
* 验证所有表单
|
||
* @param formList - 多个需要校验的表单实例
|
||
*/
|
||
validateFormList (...formList) {
|
||
const promiseList = []
|
||
for (const form of formList) {
|
||
promiseList.push(
|
||
new Promise((resolve, reject) => {
|
||
form.validateFields({ force: true }, (err, val) => {
|
||
if (!err) {
|
||
resolve(val)
|
||
} else {
|
||
reject(err)
|
||
}
|
||
})
|
||
})
|
||
)
|
||
}
|
||
return Promise.all(promiseList).catch(() => {
|
||
throw new Error('base')
|
||
})
|
||
},
|
||
handleCancel () {
|
||
this.$router.go(-1)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|