Files
laws-sinotruk-client/src/views/workCenter/enterpriseStandardStartUse/EnterpriseStandardStartUseFlow.vue
T

583 lines
22 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 v-if="!isLook">
<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 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="labelCol" :wrapperCol="wrapperCol" :label="$t('processName')" :colon="formItemColon">
<a-input :placeholder="$t('pleaseEnter') + $t('processName')"
disabled
:maxLength="50"
v-decorator="['prcName', validatorRules.prcName]" />
</a-form-item>
</a-col>
<a-col :span="12">
<!-- 截止日期 -->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('expirationDate')" :colon="formItemColon">
<a-date-picker :placeholder="$t('pleaseSelect') + $t('expirationDate')"
style="width: 100%"
:disabled="disabled || isLook"
value-format="YYYY-MM-DD"
v-decorator="['dueTime']" />
</a-form-item>
</a-col>
<a-col :span="24">
<!-- 流程说明 -->
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('processExplain')" :colon="formItemColon">
<a-textarea :placeholder="$t('pleaseEnter') + $t('processExplain')"
:maxLength="500"
:rows="4"
:disabled="disabled || isLook"
v-decorator="['prcMes']" />
</a-form-item>
</a-col>
</a-row>
</a-form>
<!-- 业务基本信息 -->
<div class="process-part-title">{{ $t('basicServiceInformation') }}</div>
<!-- 节点1发起人发起 -->
<base-info-form v-if="currentNode === 1" ref="baseInfoRef" :disabled="isLook" @processNameChange="processNameChange"></base-info-form>
<!-- 节点2相关人员会签 -->
<!-- 节点3起草人和会签人主管级领导审批 -->
<!-- 节点4标准化审批 -->
<base-info-form v-else ref="baseInfoRef" disabled></base-info-form>
<!-- 流程审批信息 -->
<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"
:disabled="isLook"
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 :disabled="isLook" />
</a-form-item>
</a-form>
</div>
<!-- 人员信息 -->
<div v-show="switchValue === 'user'" class="detail-page-scroll-content p-0">
<process-detail-list :processKey="ProcessKey.ES_ENABLE.value">
<personnel-info slot="personnelInfo" ref="personnelInfo" :data="personnelInfoData" :currentNode="currentNodeId" :notPermissField="['relatedUserList']" :onlySelectFromFlowStation="onlySelectFromFlowStation"></personnel-info>
</process-detail-list>
</div>
<!-- 操作按钮 -->
<div v-if="!isLook" class="detail-page-bottom-operate-box">
<!-- 发起节点 -->
<template v-if="currentNode === 1">
<!-- 保存 -->
<a-button type="primary" ghost :loading="loading" @click="handleSave"><i class="iconfont icon-save"></i> {{ $t('preservation') }}</a-button>
<!-- 提交 -->
<a-button type="primary" :loading="loading" @click="handleStart" icon="upload">{{ $t('submit') }}</a-button>
</template>
<template v-else>
<!-- 转办 -->
<a-button type="primary" ghost :loading="loading" @click="handleTurnTo" icon="arrow-up">{{ $t('turnTo') }}</a-button>
<!-- 保存 -->
<a-button type="primary" ghost :loading="loading" @click="handleSave"><i class="iconfont icon-save"></i> {{ $t('preservation') }}</a-button>
<!-- 同意 -->
<a-button type="primary" :loading="loading" @click="handleAgree" icon="check-circle">{{ $t('agree') }}</a-button>
<!-- 驳回 -->
<a-button type="primary" :loading="loading" @click="handleReject" icon="close-circle">{{ $t('reject') }}</a-button>
</template>
</div>
<!-- 选人弹框 -->
<user-select-modal ref="userSelectModal" type="radio" @change="userSelectModalChange"></user-select-modal>
</internal-detail-page>
</template>
<script>
import InternalDetailPage from '@/components/InternalDetailPage'
import ProcessDetailList from '@/components/ProcessDetailList'
import PersonnelInfo from '@/components/PersonnelInfo'
import UserSelectModal from '@/components/selection/UserSelectModal'
import pick from 'lodash.pick'
import {
enStandardStartUseGetDataById,
enStandardStartUseGetDataDraft,
enStandardStartUseSave,
enStandardStartUseApproval,
enStandardStartUseTurnTo,
enStandardStartUseAgree,
enStandardStartUseReject,
getLookData,
saveSnapShot
} from '@/api/workCenter'
import BaseInfoForm from './modules/BaseInfoForm'
import { WorkCenterMixin } from '@/mixins/WorkCenterMixin'
import { ProcessKey, EsStartUseNodes, ProcessType } from '@/enums/commonEnums'
export default {
name: 'EnterpriseStandardStartUseFlow',
components: {
BaseInfoForm,
InternalDetailPage,
ProcessDetailList,
PersonnelInfo,
UserSelectModal
},
mixins: [WorkCenterMixin],
computed: {
pageTitle () {
return this.$t('flowCenter') + this.$route.meta.title + '' + this.currentNodeName + ''
}
},
mounted () {
// 初始化节点
const nodeId = this.$route.query.nodeId
if (nodeId) {
this.currentNodeId = nodeId
if (nodeId === EsStartUseNodes.initiatorStart.value) {
// 发起人发起
this.currentNode = 1
} else if (nodeId === EsStartUseNodes.relevantPersonnelWillSign.value) {
// 相关人员会签
this.currentNode = 2
} else if (nodeId === EsStartUseNodes.leaderApproval.value) {
// 起草人部长审批
this.currentNode = 3
} else if (nodeId === EsStartUseNodes.standardizationApproval.value) {
// 标准化审批
this.currentNode = 4
} else {
// 预留加签节点
this.currentNode = 999
}
}
// 获取人员信息结构
this.getPersonInfoStructure(ProcessKey.ES_ENABLE.value, () => {
if (this.$route.query.processInstanceId) {
if (this.currentNode === 1) {
this.disabled = false
this.initPersonInfoData(true)
} else {
this.disabled = true
// 如果不是第一个节点,人员信息全部不可选
this.initPersonInfoData(false)
}
}
})
if (this.$route.query.isLook + '' === '1') {
// 是查看
this.isLook = true
// 人员信息全部不可选
this.initPersonInfoData(false)
// 查询数据
this.getProcessData('look', { snapshotId: this.$route.query.snapshotId })
} else {
if (this.$route.query.taskId && !this.$route.query.draftId) {
// 有流程id说明是从流程中心来的,需要初始化数据
this.getProcessData('todo', { taskId: this.$route.query.taskId })
}
if (this.$route.query.draftId) {
// 有草稿id,说明是从流程中心-草稿来的,需要初始化数据
this.getProcessData('draft', { draftId: this.$route.query.draftId, projectId: this.$route.query.projectId })
}
}
if (this.$route.query.taskName) {
// 说明是已发起流程
this.currentNodeName = this.$route.query.taskName
} else {
this.currentNodeName = '发起人发起'
}
},
data () {
return {
ProcessKey,
loading: false,
switchValue: 'base', // 头部tab选中值
disabled: false,
currentNode: 1, // 当前节点
currentNodeName: '',
currentNodeId: EsStartUseNodes.initiatorStart.value, // 当前节点id
model: {},
processInfoForm: this.$form.createForm(this),
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 }
},
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'
}
},
formInline: {},
approvalInfoForm: this.$form.createForm(this), // 审批信息表单
personnelInfoData: [],
url: {
list: '' // 人员信息的右侧表格获取接口
},
onlySelectFromFlowStation: [EsStartUseNodes.standardizationApproval.value], // 只能在标准与流程所里选人的节点
isLook: false
}
},
methods: {
// 根据流程id获取数据并回显
getProcessData (type, param) {
this.loading = true
let func
let params = {}
if (type === 'todo') {
func = enStandardStartUseGetDataById
params = param.taskId
} else if (type === 'look') {
func = getLookData
params = param
} else {
func = enStandardStartUseGetDataDraft
params = param
}
func(params).then(res => {
if (res.success) {
this.model = res.result
this.$nextTick(() => {
// 初始化流程信息
this.processInfoForm.setFieldsValue(pick(this.model.common, 'prcName', 'dueTime', 'prcMes'))
// 有草稿json按草稿进来的回显
if (this.model.infoJsonStr) {
// 初始化流程信息
const prcObj = Object.assign({}, this.model)
prcObj.dueTime = this.model.processDueDate
prcObj.prcMes = this.model.processDescription
this.processInfoForm.setFieldsValue(pick(prcObj, 'prcName', 'dueTime', 'prcMes'))
// 初始化流程审批信息
prcObj.commitText = this.model.handleText
prcObj.commitFile = this.model.handleFile
this.approvalInfoForm.setFieldsValue(pick(prcObj, 'commitText', 'commitFile'))
this.model.data = JSON.parse(this.model.infoJsonStr).data
// 如果是节点1的保存回显人员信息
if (this.currentNode === 1) {
this.draftInitPersonInfo(JSON.parse(this.model.infoJsonStr).personnelObj)
}
}
if (this.$refs.baseInfoRef) {
this.$refs.baseInfoRef.initData(this.model.data)
}
})
// 初始化业务基本信息中组件内容
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.loading = false
})
},
// 头部tab改变
switchChange (value) {
this.switchValue = value
},
// 业务基本信息组件中获取到流程名称改变后的值
processNameChange (value) {
const param = { prcName: value }
this.$nextTick(() => {
this.processInfoForm.setFieldsValue(pick(param, 'prcName'))
})
},
// 保存
handleSave () {
if (this.loading) {
return
}
// 有任意一项填了即可
// 流程信息表单
const processInfoForm = this.processInfoForm.getFieldsValue()
// 流程审批信息
const approvalInfoForm = this.approvalInfoForm.getFieldsValue()
// 人员信息的数据, 处理成对象
const personnelObj = this.$refs.personnelInfo.getDataObj()
// 业务基本信息
const baseInfo = this.$refs.baseInfoRef.getData()
const param = { ...processInfoForm, ...baseInfo.formInline, ...approvalInfoForm, ...personnelObj }
const flag = Object.values(param).some(v => !!v || v === 0)
if (!flag) {
// 提示至少填写一项
this.$message.warning(this.$t('pleaseFillInAtLeastOneItem'))
return
}
// 需要传给后端的数据
const paramObj = {}
// 流程信息
paramObj.basicProcessInfoDTO = Object.assign({}, processInfoForm)
paramObj.basicProcessInfoDTO.processName = paramObj.basicProcessInfoDTO.prcName
paramObj.basicProcessInfoDTO.processDueDate = paramObj.basicProcessInfoDTO.dueTime
paramObj.basicProcessInfoDTO.processDescription = paramObj.basicProcessInfoDTO.prcMes
paramObj.basicProcessInfoDTO.processInstanceId = this.$route.query.processInstanceId
// 流程审批信息
paramObj.basicTaskInfoDTO = Object.assign({}, approvalInfoForm)
paramObj.basicTaskInfoDTO.handleText = paramObj.basicTaskInfoDTO.commitText
paramObj.basicTaskInfoDTO.handleFile = paramObj.basicTaskInfoDTO.commitFile
paramObj.basicTaskInfoDTO.taskId = this.$route.query.taskId
// 草稿id
if (this.model.infoJsonStr) {
paramObj.draftId = this.model.id
}
// 业务基本信息和人员信息
paramObj.infoJsonStr = JSON.stringify({
data: baseInfo.formInline,
personnelObj: personnelObj
})
// paramObj.common = { ...processInfoForm, ...approvalInfoForm }
// paramObj.common.taskId = this.$route.query.taskId || null
// paramObj.common.processInstanceId = this.model.common ? this.model.common.processInstanceId : null
// paramObj.flowUser = personnelObj
// paramObj.data = baseInfo.formInline
this.loading = true
// 保存到草稿
enStandardStartUseSave(paramObj).then(res => {
if (res.success) {
this.$message.success(res.message)
this.goBack()
} else {
this.$message.warning(res.message)
this.loading = false
}
})
},
// 获取快照json
getParamJsonStr () {
// 流程信息表单
const processInfoForm = this.processInfoForm.getFieldsValue()
// 流程审批信息
const approvalInfoForm = this.approvalInfoForm.getFieldsValue()
// 人员信息的数据, 处理成对象
const personnelObj = this.$refs.personnelInfo.getDataObj()
// 业务基本信息
const baseInfo = this.$refs.baseInfoRef.getData()
const infoJsonStr = JSON.stringify({
basicProcessInfoDTO: processInfoForm,
basicTaskInfoDTO: approvalInfoForm,
data: baseInfo.formInline,
personnelObj: personnelObj
})
return infoJsonStr
},
// 保存快照
saveParamJsonStr (callback) {
// 流程信息表单
const processInfoForm = this.processInfoForm.getFieldsValue()
// 流程审批信息
const approvalInfoForm = this.approvalInfoForm.getFieldsValue()
// 人员信息的数据, 处理成对象
const personnelObj = this.$refs.personnelInfo.getDataObj()
// 业务基本信息
const baseInfo = this.$refs.baseInfoRef.getData()
const params = { ...processInfoForm, ...approvalInfoForm }
params.infoJsonStr = JSON.stringify({
basicProcessInfoDTO: processInfoForm,
basicTaskInfoDTO: approvalInfoForm,
data: baseInfo.formInline,
personnelObj: personnelObj
})
params.taskId = this.$route.query.taskId
params.prcType = ProcessType.ES_ENABLE.value
saveSnapShot(params).then(async res => {
if (res.success) {
callback && await callback()
} else {
this.$message.warning(res.message)
this.loading = false
}
})
},
// 节点一时候的提交
handleStart () {
if (this.loading) return
// 流程信息的校验
this.processInfoForm.validateFields((err, values) => {
// 流程审批信息的校验
this.approvalInfoForm.validateFields(async (approvalErr, approvalValues) => {
const data = await this.$refs.baseInfoRef.getDataValidate()
if (!err && !approvalErr && data) {
// 人员信息的数据, 处理成对象
const personnelObj = this.$refs.personnelInfo.getDataObjVerify()
if (!personnelObj) {
this.switchValue = 'user'
return
}
this.loading = true
const paramObj = {} // 需要传给后端的数据
paramObj.common = { ...values, ...approvalValues }
// 草稿id
if (this.model.infoJsonStr) {
paramObj.common.draftId = this.model.id
}
paramObj.flowUser = personnelObj
paramObj.data = data.formInline
let func
if (this.$route.query.taskId) {
// 有taskId说明是驳回的提交
func = enStandardStartUseAgree
paramObj.common.taskId = this.$route.query.taskId
} else {
func = enStandardStartUseApproval
// 快照JSON
paramObj.common.infoJsonStr = this.getParamJsonStr()
}
if (this.$route.query.taskId) {
// 先保存快照再提交
this.saveParamJsonStr(() => {
func(paramObj).then(res => {
if (res.success) {
this.$message.success(res.message)
this.goBack()
} else {
this.$message.warning(res.message)
this.loading = false
}
})
})
} else {
func(paramObj).then(res => {
if (res.success) {
this.$message.success(res.message)
this.goBack()
} else {
this.$message.warning(res.message)
this.loading = false
}
})
}
} else {
this.switchValue = 'base'
}
})
})
},
// 转办
handleTurnTo () {
if (this.loading) return
// 点击显示选人组件
this.$refs.userSelectModal.open()
},
// 转办选完人的回调
userSelectModalChange (userIds) {
this.approvalInfoForm.validateFields((err, values) => {
if (!err) {
this.loading = true
const param = Object.assign({}, values)
param.userId = userIds
param.taskId = this.$route.query.taskId
enStandardStartUseTurnTo(param).then(res => {
if (res.success) {
this.$message.success(res.message)
this.goBack()
} else {
this.$message.warning(res.message)
this.loading = false
}
})
}
})
},
// 同意
handleAgree () {
if (this.loading) return
this.validatorRules.commitText.rules[0].required = false
if (!this.approvalInfoForm.getFieldValue('commitText')) {
this.approvalInfoForm.setFieldsValue({ commitText: '同意' })
}
this.approvalInfoForm.validateFields((err, values) => {
if (!err) {
this.loading = true
const param = {}
param.common = Object.assign({}, values)
param.common.taskId = this.$route.query.taskId
// 保存快照
this.saveParamJsonStr(() => {
enStandardStartUseAgree(param).then(res => {
if (res.success) {
this.$message.success(res.message)
this.goBack()
} else {
this.$message.warning(res.message)
this.loading = false
}
})
})
}
})
},
// 驳回
handleReject () {
if (this.loading) return
this.validatorRules.commitText.rules[0].required = true
if (!this.approvalInfoForm.getFieldValue('commitText')) {
this.$message.warning(this.$t('pleaseEnterRemarks'))
this.switchValue = 'base'
}
this.$nextTick(() => {
this.approvalInfoForm.validateFields({ force: true }, (err, values) => {
if (!err) {
this.loading = true
const param = {}
param.common = Object.assign({}, values)
param.common.taskId = this.$route.query.taskId
// 保存快照
this.saveParamJsonStr(() => {
enStandardStartUseReject(param).then(res => {
if (res.success) {
this.$message.success(res.message)
this.goBack()
} else {
this.$message.warning(res.message)
this.loading = false
}
}).finally(() => {
this.validatorRules.commitText.rules[0].required = false
})
})
}
})
})
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
</style>