Files
laws-sinotruk-client/src/views/workCenter/enterpriseStandardInspectionProcess/EnterpriseStandardInspectionProcess.vue
T

627 lines
21 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="switch-item" :class="switchValue === 'base' ? 'table-operator-tab-active' : ''"
@click="switchChange('base')">{{ $t('basicInformation') }}
</a>
<!-- 人员信息 -->
<a class="switch-item" :class="switchValue === 'user' ? 'table-operator-tab-active' : ''"
@click="switchChange('user')">{{ $t('personalInformation') }}
</a>
</div>
</template>
<!--基本信息-->
<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()"
:disabled="disabled || processDisabled"
:maxLength="50"
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>
<!-- 流程表格 -->
<inspection-process-table ref="inspectionProcessTable" :current-node="currentNode" :project-id="projectId"/>
<!-- 流程审批信息 -->
<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 v-show="switchValue === 'user'" class="detail-page-scroll-content p-0">
<process-detail-list :process-key="processKey">
<template #personnelInfo>
<personnel-info ref="personnelInfo" :data="personnelInfoData" :current-node="currentNode" />
</template>
</process-detail-list>
</div>
<div class="detail-page-bottom-operate-box">
<!--转办-->
<a-button v-if="btn.includes('transfer')" type="primary" :loading="loading" @click="handleTurnTo" ghost icon="arrow-up">{{ $t('turnTo') }}</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>
<!--同意-->
<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('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 '@assets/less/common.less'
import InternalDetailPage from '@comp/InternalDetailPage'
import PersonnelInfo from '@comp/PersonnelInfo'
import ProcessDetailList from '@comp/ProcessDetailList'
import InspectionProcessTable
from '@views/workCenter/enterpriseStandardInspectionProcess/modules/InspectionProcessTable'
import UserSelectModal from '@comp/selection/UserSelectModal'
import { ApprovalOpinions, EsInspectionProcess, ProcessKey } from '@/enums/commonEnums'
import { WorkCenterMixin } from '@/mixins/WorkCenterMixin'
import {
approvalInspectProcess,
getInspectProcessDetail,
getInspectProcessProjectId, rejectInspectProcess, saveInspectProcess, startInspectProcess, transferInspectProcess
} from '@api/workCenter'
export default {
name: 'EnterpriseStandardInspectionProcess',
components: { UserSelectModal, InspectionProcessTable, PersonnelInfo, ProcessDetailList, InternalDetailPage },
mixins: [WorkCenterMixin],
data () {
return {
loading: false,
switchValue: 'base',
disabled: false,
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.ES_INSPECTION_PROCESS.value,
// 当前流程信息
EsInspectionProcess,
info: {},
currentNode: '',
currentNodeName: '',
// 项目id
projectId: '',
btn: [],
validatorRules: {
// 流程名称
processName: {
rules: [
{ required: true, message: this.$t('pleaseEnter') + this.$t('processName') }
],
validateTrigger: 'blur'
},
// 备注
remarks: {
rules: [
{ required: false, message: this.$t('pleaseEnter') + this.$t('remarks') }
],
validateTrigger: 'blur'
}
},
// 流程表单
processInfoForm: this.$form.createForm(this),
// 流程审批信息表单
approvalInfoForm: this.$form.createForm(this),
url: {
list: '' // 人员信息右侧表的分页查询接口
}
}
},
computed: {
pageTitle () {
return this.$t('flowCenter') + this.$route.meta.title + '' + this.nodeTitle + ''
},
// 节点标题
nodeTitle () {
return this.$route.query.taskName || EsInspectionProcess.initiate.text
},
processDisabled () {
return this.currentNode !== EsInspectionProcess.initiate.value
},
// 是否发起节点
isInitiate () {
return this.currentNode === EsInspectionProcess.initiate.value
},
// 是否上传稽查报告整改计划的节点3
isInputInspectionReport () {
return this.currentNode === EsInspectionProcess.inputInspectionReport.value
}
},
created () {
const { projectId, nodeId, taskName } = this.$route.query
// 发起、草稿进来没有nodeId,就默认发起节点
this.currentNode = nodeId || EsInspectionProcess.initiate.value
this.currentNodeName = taskName || EsInspectionProcess.initiate.text
this.projectId = projectId || ''
this.btn = EsInspectionProcess.propertyOfValue('btn', this.currentNode) || []
// 如果有nodeId,但是匹配不到任何节点,就是是增加的审批节点
if (nodeId && !EsInspectionProcess.keyOfValue(nodeId)) {
// 同意按钮
this.btn = ['agree']
}
// 查询人员信息
this.getPersonInfoStructure(this.processKey, () => {
this.initPersonInfoData(this.isInitiate)
})
// 如果是待办或草稿进来,就获取详情数据
if (this.$route.query.projectId) {
this.loadPage()
return
}
// 如果是新建进来,就获取项目id
this.getProjectId()
},
methods: {
/**
* 获取项目id
*/
getProjectId () {
this.loading = true
// 否则就是创建一个新的流程
getInspectProcessProjectId().then(res => {
if (res) {
this.projectId = res + ''
}
}).finally(() => {
this.loading = false
})
},
/**
* 获取页面详情
*/
loadPage () {
const { projectId, taskId, draftId } = this.$route.query
this.loading = true
getInspectProcessDetail({
projectId,
taskId
}).then(res => {
if (res.success) {
const data = res.result || {}
const processAll = data.processAll || {}
const processApprovalRecord = data.processApprovalRecord || {}
// 回显表格
this.$refs.inspectionProcessTable.setData(data.processEsInspectVOList || [])
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
})
// 草稿状态回显
if (draftId) {
const infoJson = JSON.parse(data.infoJsonStr || '{}')
console.log('草稿回显', JSON.parse(data.infoJsonStr || '{}'), infoJson)
// 节点1 回显人员信息
if (this.isInitiate) {
this.draftInitPersonInfo(infoJson.personInfo)
}
// 回显业务信息,如果有标识属性就是强制撤回
if (Object.hasOwnProperty.call(infoJson, 'revocation')) {
this.$refs.inspectionProcessTable.setData(infoJson.draftData)
}
}
}
}).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.remarks.rules[0].required = false
// 报错标记(base基本信息校验失败,user人员信息校验失败)
let flag = ''
const base = 'base'
const user = 'user'
// 如果需要校验校验表格数据
if (isValidate) {
const list = this.$refs.inspectionProcessTable.dataSource
if (list.length === 0) {
this.$message.warning(this.$t('addAtLeastOneRowOfData'))
if (!flag) {
flag = base
}
}
/**
* 调整为前端存储
*/
// 节点1:稽查内容条数不能为0
if (this.isInitiate && list.some(item => !(item.enterpriseStandardInspectContentList && item.enterpriseStandardInspectContentList.length))) {
this.$message.warning(this.$t('workCenter.esInspectionProcess.pleaseFillInspectionContent'))
if (!flag) {
flag = base
}
}
// 节点3:稽查报告条数不能为0
if (this.isInputInspectionReport && list.some(item => !(item.enterpriseStandardInspectReportList && item.enterpriseStandardInspectReportList.length))) {
this.$message.warning(this.$t('workCenter.esInspectionProcess.pleaseFillInspectionReport'))
if (!flag) {
flag = base
}
}
// 节点3:整改计划条数不能为0
if (this.isInputInspectionReport && list.some(item => !(item.enterpriseStandardInspectRectifyPlanList && item.enterpriseStandardInspectRectifyPlanList.length))) {
this.$message.warning(this.$t('workCenter.esInspectionProcess.pleaseFillRectificationPlan'))
if (!flag) {
flag = base
}
}
}
const params = {}
// 收集表格数据
params.processEsInspectList = this.$refs.inspectionProcessTable.dataSource.map(item => {
// 如果没有子表格数据,就默认空数组,否则后端报错
// 稽查内容
if (!item.enterpriseStandardInspectContentList) {
item.enterpriseStandardInspectContentList = []
}
// 稽查报告
if (!item.enterpriseStandardInspectReportList) {
item.enterpriseStandardInspectReportList = []
}
// 整改计划
if (!item.enterpriseStandardInspectRectifyPlanList) {
item.enterpriseStandardInspectRectifyPlanList = []
}
return item
})
// 获取删除业务信息的ids列表
params.processAllDelIds = this.$refs.inspectionProcessTable.getDelIds()
// 收集所有表单信息
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 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: 17
})
// 处理其他参数
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.processEsInspectList
})
}
// 如果有校验失败的,那就报错
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
}
transferInspectProcess(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 saveInspectProcess(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)
})
},
/**
* 提交
*/
handleSubmit () {
if (this.loading) return
// 节点3,判断表格中实际稽查完成日期和实际稽查人是否填写
if (
this.currentNode === EsInspectionProcess.inputInspectionReport.value &&
this.$refs.inspectionProcessTable.dataSource.some(item => (!item.completeDate || !item.actualInspectUser))
) {
this.switchChange('base')
this.$message.warning(this.$t('workCenter.esInspectionProcess.pleaseCompleteTimeAndUserInfo'))
return
}
// 有taskId说明已经发起过,调审批接口,否则调发起接口
if (this.$route.query.taskId) {
this.handleAgree(true)
return
}
this.loading = true
this.getPageParams().then(res => {
console.log(res)
return startInspectProcess(res)
}).then(res => {
if (res.success) {
this.$message.success(res.message)
this.goBack()
} else {
this.$message.warn(res.message)
}
}).catch((err) => {
this.switchChange(err.message)
this.loading = false
}).finally(() => {
setTimeout(() => {
this.loading = false
}, 1000)
})
},
/**
* 同意
* @param isSubmitBtn - 是否提交按钮(提交按钮除了发起也走同意接口)
*/
handleAgree (isSubmitBtn) {
if (this.loading) return
this.loading = true
this.getPageParams().then(res => {
// 同意和提交一直传true
res.map.pass = true
// 不是提交按钮
if (isSubmitBtn !== true) {
// 没有填写注释,就默认同意
if (!res.processApprovalRecord.commitText) {
res.processApprovalRecord.commitText = '同意'
}
// 审批意见
res.processApprovalRecord.commitFlag = ApprovalOpinions.AGREE.value
}
return approvalInspectProcess(res)
}).then(res => {
if (res.success) {
this.$message.success(res.message)
this.goBack()
} else {
this.$message.warn(res.message)
}
}).catch((err) => {
this.switchChange(err.message)
this.loading = false
}).finally(() => {
setTimeout(() => {
this.loading = false
}, 1000)
})
},
/**
* 驳回
*/
handleReject () {
if (this.loading) return
// 备注设置必填并校验(校验第一次正常,第二次校验就不提示,force配置项解决问题)
this.validatorRules.remarks.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 rejectInspectProcess(res)
}).then(res => {
if (res.success) {
this.$message.success(res.message)
this.goBack()
} else {
this.$message.warn(res.message)
}
}).catch((err) => {
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>
</style>