581 lines
21 KiB
Vue
581 lines
21 KiB
Vue
<template>
|
||
<internal-detail-page :title="pageTitle" :content-padding="0" :loading="loading">
|
||
<!-- 标题右侧tab -->
|
||
<template v-slot:titleRightCustom>
|
||
<div class="table-operator-tab">
|
||
<a :class="(switchValue === 'base' ? 'table-operator-tab-active' : '') + ' ' + ($i18n.locale === EN ? 'switch-item-en' : 'switch-item')"
|
||
@click="switchChange('base')">{{ $t('basicInformation') }}
|
||
</a>
|
||
<a :class="(switchValue === 'user' ? 'table-operator-tab-active' : '') + ' ' + ($i18n.locale === EN ? 'switch-item-en' : 'switch-item')"
|
||
@click="switchChange('user')">{{ $t('personalInformation') }}
|
||
</a>
|
||
</div>
|
||
</template>
|
||
<!-- 基础信息 -->
|
||
<div v-show="switchValue === 'base'" class="detail-page-scroll-content">
|
||
<!-- 流程信息 -->
|
||
<div class="process-part-title">{{ $t('processInformation') }}</div>
|
||
<a-form :form="processInfoForm">
|
||
<a-row>
|
||
<a-col :span="12">
|
||
<!-- 流程名称 -->
|
||
<a-form-item
|
||
:labelCol="$i18n.locale === EN ? labelColEn : labelCol"
|
||
:wrapperCol="$i18n.locale === EN ? wrapperColEn : wrapperCol"
|
||
:label="$t('processName')"
|
||
:colon="formItemColon">
|
||
<a-input :placeholder="$t('pleaseEnter') + $t('processName')"
|
||
disabled
|
||
:maxLength="50"
|
||
v-decorator="['prcName']" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<!-- 截止日期 -->
|
||
<a-form-item
|
||
:labelCol="$i18n.locale === EN ? labelColEn : labelCol"
|
||
:wrapperCol="$i18n.locale === EN ? wrapperColEn : wrapperCol"
|
||
:label="$t('expirationDate')"
|
||
:colon="formItemColon">
|
||
<a-date-picker :placeholder="$t('pleaseSelect') + $t('expirationDate')"
|
||
style="width: 100%"
|
||
:disabled="disabled"
|
||
value-format="YYYY-MM-DD hh:mm:ss"
|
||
v-decorator="['dueTime']" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24">
|
||
<!-- 流程说明 -->
|
||
<a-form-item
|
||
:labelCol="$i18n.locale === EN ? longLabelColEn : longLabelCol"
|
||
:wrapperCol="$i18n.locale === EN ? longWrapperColEn : longWrapperCol"
|
||
:label="$t('processExplain')"
|
||
:colon="formItemColon">
|
||
<a-textarea :placeholder="$t('pleaseEnter') + $t('processExplain')"
|
||
:maxLength="500"
|
||
:rows="4"
|
||
:disabled="disabled"
|
||
v-decorator="['prcMes']" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
|
||
<!-- 业务信息 -->
|
||
<!-- 发起节点 -->
|
||
<interpretation-initiate v-if="isInitiate" :disabled="disabled" ref="businessComp"/>
|
||
<!-- 主控部门联络人分发 -->
|
||
<interpretation-liaison-distribute v-if="currentNodeId === StandardInterpretationNodes.controlDepartLiaisonDistribution.value"
|
||
:disabled="disabled" ref="businessComp"/>
|
||
<!-- 主解读人分发 -->
|
||
<interpretation-main-interpreter-distribute v-if="currentNodeId === StandardInterpretationNodes.standardInterpreterDistribution.value"
|
||
:disabled="disabled" ref="businessComp"/>
|
||
|
||
<!-- 流程审批信息 -->
|
||
<div class="process-part-title">{{ $t('processApprovalInformation') }}</div>
|
||
<a-form :form="approvalInfoForm">
|
||
<!--备注-->
|
||
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('remarks')" :colon="formItemColon">
|
||
<a-textarea :placeholder="$t('pleaseEnter') + $t('remarks')"
|
||
:maxLength="500"
|
||
:rows="4"
|
||
v-decorator="['commitText', validatorRules.commitText]" />
|
||
</a-form-item>
|
||
<!--附件-->
|
||
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('attach')" :colon="formItemColon">
|
||
<j-upload v-decorator="['commitFile']" return-id multiple />
|
||
</a-form-item>
|
||
</a-form>
|
||
</div>
|
||
<!-- 人员信息 -->
|
||
<div v-show="switchValue === 'user'" class="detail-page-scroll-content p-0">
|
||
<process-detail-list :processKey="processKey">
|
||
<personnel-info slot="personnelInfo" ref="personnelInfo" :data="personnelInfoData" :currentNode="currentNodeId"></personnel-info>
|
||
</process-detail-list>
|
||
</div>
|
||
<!-- 操作按钮 -->
|
||
<div class="detail-page-bottom-operate-box">
|
||
<!-- 转办 -->
|
||
<a-button v-if="btn.includes('transfer')" type="primary" ghost :loading="loading" @click="handleTurnTo" icon="arrow-up">{{ $t('turnTo') }}</a-button>
|
||
<!-- 保存 -->
|
||
<a-button v-if="btn.includes('save')" type="primary" ghost :loading="loading" @click="handleSave"><i class="iconfont icon-save"></i> {{ $t('preservation') }}</a-button>
|
||
<!-- 同意 -->
|
||
<a-button v-if="btn.includes('agree')" type="primary" :loading="loading" @click="handleAgree" icon="check-circle">{{ $t('agree') }}</a-button>
|
||
<!-- 提交 -->
|
||
<a-button v-if="btn.includes('submit')" type="primary" :loading="loading" @click="handleSubmit" icon="upload">{{ $t('submit') }}</a-button>
|
||
<!-- 驳回 -->
|
||
<a-button v-if="btn.includes('reject')" type="primary" :loading="loading" @click="handleReject" icon="close-circle">{{ $t('reject') }}</a-button>
|
||
</div>
|
||
|
||
<!--转办选人-->
|
||
<user-select-modal ref="userSelectModal" check-required @change="continueTurnTo" />
|
||
</internal-detail-page>
|
||
</template>
|
||
|
||
<script>
|
||
import ProcessDetailList from '@comp/ProcessDetailList'
|
||
import InternalDetailPage from '@comp/InternalDetailPage'
|
||
import PersonnelInfo from '@comp/PersonnelInfo'
|
||
import { WorkCenterMixin } from '@/mixins/WorkCenterMixin'
|
||
import {
|
||
ApprovalOpinions,
|
||
ProcessKey,
|
||
ProcessType,
|
||
StandardInterpretationNodes,
|
||
StandardSource
|
||
} from '@/enums/commonEnums'
|
||
import {
|
||
interpretGetProjectId,
|
||
interpretGetDetail, interpretFlowStart, interpretFlowApproval
|
||
} from '@api/workCenter'
|
||
import InterpretationInitiate from '@views/workCenter/standardInterpretationProcess/modules/InterpretationInitiate'
|
||
import UserSelectModal from '@comp/selection/UserSelectModal'
|
||
import InterpretationLiaisonDistribute
|
||
from '@views/workCenter/standardInterpretationProcess/modules/InterpretationLiaisonDistribute'
|
||
import InterpretationMainInterpreterDistribute
|
||
from '@views/workCenter/standardInterpretationProcess/modules/InterpretationMainInterpreterDistribute'
|
||
|
||
const tabList = ['base', 'user']
|
||
export default {
|
||
name: 'StandardInterpretationProcess',
|
||
components: { InterpretationMainInterpreterDistribute, InterpretationLiaisonDistribute, UserSelectModal, InterpretationInitiate, PersonnelInfo, InternalDetailPage, ProcessDetailList },
|
||
mixins: [WorkCenterMixin],
|
||
data () {
|
||
return {
|
||
StandardInterpretationNodes,
|
||
EN: 'en-us',
|
||
processKey: ProcessKey.STANDARD_INTERPRETATION_PROCESS.value,
|
||
StandardSource,
|
||
loading: false,
|
||
switchValue: 'base', // 头部tab选中值
|
||
disabled: false,
|
||
// 项目id
|
||
projectId: '',
|
||
currentNodeName: '',
|
||
currentNodeId: StandardInterpretationNodes.initiated.value, // 当前节点id
|
||
btn: [], // 当前节点显示的按钮
|
||
model: {},
|
||
approvalInfoForm: this.$form.createForm(this),
|
||
processInfoForm: this.$form.createForm(this),
|
||
// region 表单宽调整
|
||
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 }
|
||
},
|
||
labelColEn: {
|
||
xs: { span: 24 },
|
||
sm: { span: 8 }
|
||
},
|
||
wrapperColEn: {
|
||
xs: { span: 24 },
|
||
sm: { span: 16 }
|
||
},
|
||
longLabelColEn: {
|
||
xs: { span: 24 },
|
||
sm: { span: 4 }
|
||
},
|
||
longWrapperColEn: {
|
||
xs: { span: 24 },
|
||
sm: { span: 20 }
|
||
},
|
||
// endregion
|
||
validatorRules: {
|
||
// 流程名称
|
||
prcName: {
|
||
rules: [{ required: true, message: this.$t('pleaseEnter') + this.$t('processName') }],
|
||
validateTrigger: 'blur'
|
||
},
|
||
commitText: {
|
||
rules: [{ required: false, message: this.$t('pleaseEnter') + this.$t('remarks') }],
|
||
validateTrigger: 'blur'
|
||
}
|
||
},
|
||
info: {}
|
||
}
|
||
},
|
||
computed: {
|
||
// 是否发起节点
|
||
isInitiate () {
|
||
return this.currentNodeId === StandardInterpretationNodes.initiated.value
|
||
},
|
||
// 页面标题
|
||
pageTitle () {
|
||
return this.$t('flowCenter') + this.$route.meta.title + '（' + this.currentNodeName + '）'
|
||
}
|
||
},
|
||
created () {
|
||
const { projectId, nodeId, taskName } = this.$route.query
|
||
// 发起、草稿进来没有nodeId，就默认发起节点
|
||
this.currentNodeId = nodeId || StandardInterpretationNodes.initiated.value
|
||
this.currentNodeName = taskName || StandardInterpretationNodes.initiated.text
|
||
this.projectId = projectId || ''
|
||
this.btn = StandardInterpretationNodes.propertyOfValue('btn', this.currentNodeId) || []
|
||
// 查询人员信息
|
||
this.getPersonInfoStructure(this.processKey, () => {
|
||
this.initPersonInfoData(this.isInitiate)
|
||
})
|
||
// 如果是待办或草稿进来，就获取详情数据
|
||
if (this.$route.query.projectId) {
|
||
this.loadPage()
|
||
return
|
||
}
|
||
// 如果是新建进来，就获取项目id
|
||
interpretGetProjectId().then(id => { this.projectId = (id + '') })
|
||
},
|
||
methods: {
|
||
/**
|
||
* 获取页面详情
|
||
*/
|
||
loadPage () {
|
||
const { projectId, taskId, draftId } = this.$route.query
|
||
this.loading = true
|
||
interpretGetDetail({
|
||
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
|
||
})
|
||
// 业务组件内自己处理回显数据
|
||
this.$nextTick(() => {
|
||
this.$refs.businessComp.setData(data)
|
||
})
|
||
// 草稿状态回显
|
||
if (draftId) {
|
||
const infoJson = JSON.parse(data.infoJsonStr || '{}')
|
||
console.log('草稿回显', JSON.parse(data.infoJsonStr || '{}'))
|
||
// 节点1 回显人员信息
|
||
if (this.isInitiate) {
|
||
this.draftInitPersonInfo(infoJson.personInfo)
|
||
}
|
||
// 回显业务信息，如果有标识属性就是强制撤回
|
||
if (Object.hasOwnProperty.call(infoJson, 'revocation')) {
|
||
|
||
}
|
||
}
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
// 获取人员信息
|
||
getPersonInfo (isValidate = true) {
|
||
let personnelObj = {}
|
||
const funName = isValidate ? 'getDataObjVerify' : 'getDataObj'
|
||
// 节点1：所有的人员信息
|
||
if (this.isInitiate) {
|
||
// 人员信息的数据, 处理成对象
|
||
personnelObj = this.$refs.personnelInfo[funName]()
|
||
if (!personnelObj) {
|
||
return false
|
||
}
|
||
// List拆成数组
|
||
for (const key in personnelObj) {
|
||
if (personnelObj[key] && key.includes('List')) {
|
||
personnelObj[key] = personnelObj[key].split(',')
|
||
}
|
||
}
|
||
}
|
||
return personnelObj
|
||
},
|
||
// 获取页面参数
|
||
async getPageParams (isValidate = true) {
|
||
// 去除备注必填
|
||
this.validatorRules.commitText.rules[0].required = false
|
||
// 报错标记（base基本信息校验失败，user人员信息校验失败）
|
||
let flag = ''
|
||
const base = 'base'
|
||
const user = 'user'
|
||
const params = {}
|
||
// 收集流程信息和流程审批信息
|
||
let formDataList = []
|
||
if (isValidate) {
|
||
formDataList = await this.validateFormList(this.processInfoForm, this.approvalInfoForm).catch(() => {
|
||
if (!flag) { flag = base }
|
||
// 空数组防止后续操作报错
|
||
return []
|
||
})
|
||
} else {
|
||
formDataList = [this.processInfoForm.getFieldsValue(), this.approvalInfoForm.getFieldsValue()]
|
||
// 保存清空校验
|
||
this.approvalInfoForm.validateFields(['commitText'], { force: true }, () => {})
|
||
}
|
||
|
||
// 收集业务组件的数据(组件内部校验提示)
|
||
const compData = await this.$refs.businessComp.getData(isValidate)
|
||
// 组件内校验失败
|
||
if (!flag && compData._flag) { flag = base }
|
||
|
||
// 收集人员信息
|
||
const personInfo = this.getPersonInfo(isValidate && !flag)
|
||
if (!personInfo) { flag = user }
|
||
|
||
// 开始处理信息
|
||
// 流程信息
|
||
params.processAll = Object.assign({}, this.info.processAll, formDataList[0], {
|
||
projectId: this.projectId,
|
||
nodeId: this.$route.query.nodeId,
|
||
taskId: this.$route.query.taskId,
|
||
prcType: ProcessType.STANDARD_INTERPRETATION_PROCESS.value
|
||
})
|
||
|
||
// 处理其他参数
|
||
params.map = Object.assign({}, personInfo)
|
||
// 流程审批信息
|
||
params.processApprovalRecord = Object.assign({}, this.info.processApprovalRecord, formDataList[1], {
|
||
projectId: this.projectId
|
||
})
|
||
|
||
// 发起保存草稿信息
|
||
// if (this.isInitiate) {
|
||
// params.infoJsonStr = JSON.stringify({
|
||
// // 人员信息(要重新获取，流程里的信息不能直接用，后端需要多选人员处理成数组了)
|
||
// personInfo: this.$refs.personnelInfo.getDataObj(),
|
||
// // 业务表格数据，用于强制撤回后回显
|
||
// draftData: params.processEsInspectPlanList
|
||
// })
|
||
// }
|
||
|
||
params.data = {}
|
||
// 发起节点
|
||
if (this.isInitiate) {
|
||
// 选择的标准数据
|
||
params.data.processStandardInterpret = Object.assign({}, {
|
||
// 分解单来源
|
||
decompositionSource: compData.standardData[0] && compData.standardData[0].decompositionSource,
|
||
// 标准id
|
||
standardId: compData.standardData[0] && compData.standardData[0].id,
|
||
projectId: this.projectId
|
||
})
|
||
// 条款列表
|
||
params.data.processStandardInterpretClauseList = compData.clauseData
|
||
} else if (this.currentNodeId === StandardInterpretationNodes.controlDepartLiaisonDistribution.value) {
|
||
// 联络人分发节点
|
||
params.data.processStandardInterpret = Object.assign({}, this.info.data.processStandardInterpret, compData.formData, {
|
||
projectId: this.projectId
|
||
})
|
||
// 条款列表
|
||
params.data.processStandardInterpretClauseList = compData.clauseData
|
||
}
|
||
// 如果有校验失败的，那就报错
|
||
if (flag) {
|
||
throw new Error(flag)
|
||
}
|
||
return params
|
||
},
|
||
/**
|
||
* 转办弹框
|
||
*/
|
||
handleTurnTo () {
|
||
this.$refs.userSelectModal.open()
|
||
},
|
||
// 转办
|
||
continueTurnTo (userId) {
|
||
// if (this.loading) return
|
||
// this.loading = true
|
||
// const params = {
|
||
// taskId: this.$route.query.taskId,
|
||
// userId
|
||
// }
|
||
// transferInspectPlan(params).then(res => {
|
||
// if (res.success) {
|
||
// this.$message.success(res.message)
|
||
// this.goBack()
|
||
// } else {
|
||
// this.$message.warn(res.message)
|
||
// }
|
||
// }).catch(() => {
|
||
// this.loading = false
|
||
// }).finally(() => {
|
||
// setTimeout(() => {
|
||
// this.loading = false
|
||
// }, 1000)
|
||
// })
|
||
},
|
||
// 保存
|
||
handleSave () {
|
||
if (this.loading) return
|
||
this.loading = true
|
||
this.getPageParams(false).then(res => {
|
||
// 1待办 2草稿
|
||
res.saveSource = (this.$route.query.draftId || !this.$route.query.projectId) ? 2 : 1
|
||
console.log(res)
|
||
// return saveInspectPlan(res)
|
||
}).then(res => {
|
||
// if (res.success) {
|
||
// this.$message.success(res.message)
|
||
// this.goBack()
|
||
// } else {
|
||
// this.$message.warn(res.message)
|
||
// }
|
||
}).catch((err) => {
|
||
console.log(err)
|
||
this.loading = false
|
||
}).finally(() => {
|
||
setTimeout(() => {
|
||
this.loading = false
|
||
}, 1000)
|
||
})
|
||
},
|
||
// 同意
|
||
handleAgree (isSubmitBtn) {
|
||
if (this.loading) return
|
||
this.loading = true
|
||
this.getPageParams().then(res => {
|
||
res.map.pass = true
|
||
// 不是提交按钮
|
||
if (isSubmitBtn !== true) {
|
||
// 没有填写注释，就默认同意
|
||
if (!res.processApprovalRecord.commitText) {
|
||
res.processApprovalRecord.commitText = '同意'
|
||
}
|
||
// 审批意见
|
||
res.processApprovalRecord.commitFlag = ApprovalOpinions.AGREE.value
|
||
}
|
||
return interpretFlowApproval(res)
|
||
}).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.goBack()
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
}).catch((err) => {
|
||
if (err && err.message && tabList.includes(err.message)) {
|
||
this.switchChange(err.message)
|
||
}
|
||
this.loading = false
|
||
}).finally(() => {
|
||
setTimeout(() => {
|
||
this.loading = false
|
||
}, 1000)
|
||
})
|
||
},
|
||
// 提交
|
||
handleSubmit () {
|
||
if (this.loading) return
|
||
// 有taskId说明已经发起过，调审批接口，否则调发起接口
|
||
if (this.$route.query.taskId) {
|
||
this.handleAgree(true)
|
||
return
|
||
}
|
||
this.loading = true
|
||
this.getPageParams().then(res => {
|
||
console.log(res)
|
||
return interpretFlowStart(res)
|
||
}).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.goBack()
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
}).catch((err) => {
|
||
console.log(err)
|
||
if (err && err.message && tabList.includes(err.message)) {
|
||
this.switchChange(err.message)
|
||
}
|
||
this.loading = false
|
||
}).finally(() => {
|
||
setTimeout(() => {
|
||
this.loading = false
|
||
}, 1000)
|
||
})
|
||
},
|
||
// 驳回
|
||
handleReject () {
|
||
if (this.loading) return
|
||
// 备注设置必填并校验(校验第一次正常，第二次校验就不提示，force配置项解决问题)
|
||
this.validatorRules.commitText.rules[0].required = true
|
||
this.$nextTick(() => {
|
||
this.approvalInfoForm.validateFields(['commitText'], { force: true }, (err) => {
|
||
if (err) {
|
||
this.switchChange('base')
|
||
}
|
||
})
|
||
})
|
||
// 驳回需要填写备注
|
||
if (!this.approvalInfoForm.getFieldValue('commitText')) {
|
||
this.$message.warning(this.$t('pleaseEnterRemarks'))
|
||
return
|
||
}
|
||
this.loading = true
|
||
this.getPageParams().then(res => {
|
||
res.map.pass = false
|
||
// 审批意见
|
||
res.processApprovalRecord.commitFlag = ApprovalOpinions.REJECT.value
|
||
// return rejectInspectPlan(res)
|
||
}).then(res => {
|
||
// if (res.success) {
|
||
// this.$message.success(res.message)
|
||
// this.goBack()
|
||
// } else {
|
||
// this.$message.warn(res.message)
|
||
// }
|
||
}).catch((err) => {
|
||
if (err && err.message && tabList.includes(err.message)) {
|
||
this.switchChange(err.message)
|
||
}
|
||
this.loading = false
|
||
}).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')
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '~@assets/less/common.less';
|
||
|
||
</style>
|