Files
laws_chery_client/src/views/workCenter/standardInterpretationProcess/StandardInterpretationProcess.vue
T

661 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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 || !isInitiate"
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 || !isInitiate"
v-decorator="['prcMes']" />
</a-form-item>
</a-col>
<a-col v-if="!isInitiate && info.data && info.data.processStandardInterpret" :span="24">
<!-- 标准编号/标准名称 -->
<a-form-item
:labelCol="$i18n.locale === EN ? longLabelColEn : longLabelCol"
:wrapperCol="$i18n.locale === EN ? longWrapperColEn : longWrapperCol"
:label="$t('standardNumber') + '/' + $t('standardName')"
:colon="formItemColon">
<a @click.capture="toStandardDetail">{{info.data.processStandardInterpret.standardNumber}} {{info.data.processStandardInterpret.standardName}}</a>
</a-form-item>
</a-col>
</a-row>
</a-form>
<!-- 业务信息 -->
<!-- 发起节点 -->
<interpretation-initiate v-if="isInitiate" :disabled="disabled" ref="businessComp" :current-node-id="currentNodeId"/>
<!-- 主控部门联络人分发 -->
<interpretation-liaison-distribute v-else-if="currentNodeId === StandardInterpretationNodes.controlDepartLiaisonDistribution.value"
:current-node-id="currentNodeId"
:disabled="disabled" ref="businessComp"/>
<!-- 主解读人分发 -->
<interpretation-main-interpreter-distribute v-else-if="mainInterpreterDistributeNodes.includes(currentNodeId)"
:current-node-id="currentNodeId"
:disabled="disabled" ref="businessComp"/>
<!-- 解读人填写解读信息 -->
<!-- 标准主解读人单线审核 -->
<interpretation-interpreter-fill-info v-else :current-node-id="currentNodeId"
: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('countersign')" type="primary" ghost :loading="loading" @click="handleCountersign" icon="arrow-up">{{ $t('countersign') }}</a-button>
<!-- 转办 -->
<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, IsDistribute,
ProcessKey,
ProcessType,
StandardInterpretationNodes,
StandardSource
} from '@/enums/commonEnums'
import {
interpretGetProjectId,
interpretGetDetail,
interpretFlowStart,
interpretFlowApproval,
interpretFlowSave,
interpretFlowReject,
interpretFlowTransfer
} 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'
import InterpretationInterpreterFillInfo
from '@views/workCenter/standardInterpretationProcess/modules/InterpretationInterpreterFillInfo'
const tabList = ['base', 'user']
export default {
name: 'StandardInterpretationProcess',
components: { InterpretationInterpreterFillInfo, InterpretationMainInterpreterDistribute, InterpretationLiaisonDistribute, UserSelectModal, InterpretationInitiate, PersonnelInfo, InternalDetailPage, ProcessDetailList },
mixins: [WorkCenterMixin],
data () {
return {
// 主解读人分发节点
mainInterpreterDistributeNodes: [
StandardInterpretationNodes.standardInterpreterDistribution.value,
StandardInterpretationNodes.standardInterpreterReDistribution.value
],
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: {
// 跳转详情
toStandardDetail () {
const { standardId } = this.info.data.processStandardInterpret
this.$openPageNewSheet({
path: '/standardRegulationLibrary/foreignStandardDetailPage',
query: {
id: standardId
}
})
},
/**
* 获取页面详情
*/
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')) {
this.$nextTick(() => {
this.$refs.businessComp.setData(infoJson.pageData)
})
}
}
}
}).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
})
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].standardId,
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
} else if (this.mainInterpreterDistributeNodes.includes(this.currentNodeId)) {
// 标准主解读人分发节点
params.data.processStandardInterpret = Object.assign({}, this.info.data.processStandardInterpret, compData.formData, {
projectId: this.projectId
})
// 条款列表(分发和不分发传入的字段不一样)
if (compData.isDistribute) {
params.data.processStandardInterpretClauseList = compData.clauseData
} else {
// 将条款的表格复制到完整的条款解读表,id需要处理
params.data.processStandardInterpretClauseSublistList = compData.clauseData.map(item => {
item.standardInterpretClauseId = item.id
delete item.id
return item
})
}
} else {
// 解读人填写节点 及 后续节点
params.data.processStandardInterpret = Object.assign({}, this.info.data.processStandardInterpret, compData.formData, {
projectId: this.projectId
})
// 条款列表
params.data.processStandardInterpretClauseList = []
params.data.processStandardInterpretClauseSublistList = compData.clauseInterpretData
}
// 后端取值不能为空,设置成空字符串
const notIsNullField = [
'approvePersonId', // 批准人员
'countersignPersonIds', // 会签人员
'masterInterpretId', // 主解读人
'uploader' // 审核人员
]
notIsNullField.forEach(field => {
if (!params.data.processStandardInterpret[field]) {
params.data.processStandardInterpret[field] = ''
}
})
// 所有删除的id
params.processAllDelIds = compData.processAllDelIds
// 保存草稿信息
params.infoJsonStr = JSON.stringify({
// 人员信息(要重新获取,流程里的信息不能直接用,后端需要多选人员处理成数组了)
personInfo: this.$refs.personnelInfo.getDataObj(),
// 业务表格数据,用于强制撤回后回显
pageData: params
})
// 如果有校验失败的,那就报错
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
}
interpretFlowTransfer(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 interpretFlowSave(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.warn(this.$t('pleaseEnterRemarks'))
return
}
this.loading = true
this.getPageParams(false).then(res => {
res.map.pass = false
// 解读人分发节点点击驳回特殊处理
if (this.mainInterpreterDistributeNodes.includes(this.currentNodeId)) {
res.map.passFirst = IsDistribute.REJECT.value
}
// 审批意见
res.processApprovalRecord.commitFlag = ApprovalOpinions.REJECT.value
return interpretFlowReject(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>