484 lines
17 KiB
Vue
484 lines
17 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="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"
|
||
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-plan-table ref="inspectionPlanTable" :current-node="currentNode" />
|
||
<!-- 会签表单 -->
|
||
<a-form :form="countersignForm" v-if="currentNode === EsInspectionPlan.liaisonCollect.value">
|
||
<a-row type="flex">
|
||
<a-col :span="12">
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.esInspectionPlan.isCountersign')">
|
||
<j-dict-select-tag :placeholder="$t('pleaseSelect') + $t('workCenter.esInspectionPlan.isCountersign')"
|
||
type="radio"
|
||
dictCode="yn"
|
||
@change="changeIsCountersign"
|
||
v-decorator="['pass', validatorRules.isCountersign]" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12"></a-col>
|
||
<a-col :span="12">
|
||
<a-form-item v-if="isCountersign" :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.esInspectionPlan.countersignRelevantPersonnel')">
|
||
<user-selection :placeholder="$t('pleaseSelect') + $t('workCenter.esInspectionPlan.countersignRelevantPersonnel')"
|
||
type="checkbox"
|
||
v-decorator="['involveList', validatorRules.countersignRelevantPersonnel]" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
<!-- 流程审批信息 -->
|
||
<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>
|
||
<template #personnelInfo>
|
||
<personnel-info ref="personnelInfo" :data="personnelInfoData" />
|
||
</template>
|
||
</process-detail-list>
|
||
</div>
|
||
|
||
<div class="detail-page-bottom-operate-box">
|
||
<!--转办-->
|
||
<a-button v-if="1 & btn" type="primary" :loading="loading" @click="handleTurnTo" ghost icon="arrow-up">{{ $t('turnTo') }}</a-button>
|
||
<!--保存-->
|
||
<a-button v-if="2 & btn" type="primary" :loading="loading" @click="handleSave" ghost><i class="iconfont icon-save" />{{ $t('preservation') }}</a-button>
|
||
<!--提交-->
|
||
<a-button v-if="4 & btn" type="primary" :loading="loading" @click="handleSubmit" icon="upload">{{ $t('submit') }}</a-button>
|
||
<!--同意-->
|
||
<a-button v-if="8 & btn" type="primary" :loading="loading" @click="handleAgree" icon="check-circle">{{ $t('agree') }}</a-button>
|
||
<!--驳回-->
|
||
<a-button v-if="16 & btn" 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 InspectionPlanTable from '@views/workCenter/enterpriseStandardInspectionPlan/modules/InspectionPlanTable'
|
||
import UserSelection from '@comp/selection/UserSelection'
|
||
import { WorkCenterMixin } from '@/mixins/WorkCenterMixin'
|
||
import { EsInspectionPlan, ProcessKey } from '@/enums/commonEnums'
|
||
import {
|
||
approvalInspectPlan,
|
||
getInspectPlanDetail,
|
||
getInspectPlanProjectId,
|
||
refusalInspectPlan,
|
||
saveInspectPlan,
|
||
startInspectPlan, transferInspectPlan
|
||
} from '@api/workCenter'
|
||
import UserSelectModal from '@comp/selection/UserSelectModal'
|
||
|
||
export default {
|
||
name: 'EnterpriseStandardInspectionPlanFlow',
|
||
components: { UserSelectModal, UserSelection, InspectionPlanTable, ProcessDetailList, PersonnelInfo, InternalDetailPage },
|
||
mixins: [WorkCenterMixin],
|
||
data () {
|
||
return {
|
||
EsInspectionPlan,
|
||
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 }
|
||
},
|
||
currentNode: '',
|
||
// 项目id
|
||
projectId: '',
|
||
btn: 0,
|
||
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'
|
||
},
|
||
// 是否会签
|
||
isCountersign: {
|
||
rules: [
|
||
{ required: true, message: this.$t('pleaseSelect') + this.$t('workCenter.esInspectionPlan.isCountersign') }
|
||
],
|
||
validateTrigger: 'change'
|
||
},
|
||
countersignRelevantPersonnel: {
|
||
rules: [
|
||
{ required: true, message: this.$t('pleaseSelect') + this.$t('workCenter.esInspectionPlan.countersignRelevantPersonnel') }
|
||
],
|
||
validateTrigger: 'change'
|
||
}
|
||
},
|
||
// 流程基本信息
|
||
processInfoForm: this.$form.createForm(this),
|
||
countersignForm: this.$form.createForm(this),
|
||
approvalInfoForm: this.$form.createForm(this),
|
||
// 是否会签
|
||
isCountersign: null,
|
||
url: {
|
||
list: '' // 人员信息右侧表的分页查询接口
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
pageTitle () {
|
||
return this.$t('flowCenter') + this.$route.meta.title + '（' + this.subTitle + '）'
|
||
},
|
||
subTitle () {
|
||
return this.$route.query.taskName || this.$t('workCenter.esInspectionPlan.node1')
|
||
},
|
||
processDisabled () {
|
||
return this.currentNode !== EsInspectionPlan.initiate.value
|
||
}
|
||
},
|
||
created () {
|
||
// 查询人员信息
|
||
this.getPersonInfoStructure(ProcessKey.ES_Inspection_Plan.value)
|
||
// 如果是待办进来，就获取详情数据
|
||
const { projectId, taskId } = this.$route.query
|
||
if (projectId || taskId) {
|
||
this.loadPage({ projectId, taskId })
|
||
return
|
||
}
|
||
// 否则就是创建一个新的流程
|
||
getInspectPlanProjectId().then(res => {
|
||
if (res) {
|
||
this.projectId = res
|
||
this.currentNode = EsInspectionPlan.initiate.value
|
||
this.btn = EsInspectionPlan.initiate.btn
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
/**
|
||
* 获取页面详情
|
||
*/
|
||
loadPage (params) {
|
||
this.currentNode = this.$route.query.nodeId
|
||
this.projectId = this.$route.query.projectId
|
||
switch (this.currentNode) {
|
||
case EsInspectionPlan.initiate.value:
|
||
this.btn = EsInspectionPlan.initiate.btn
|
||
break
|
||
case EsInspectionPlan.fillInComments.value:
|
||
this.btn = EsInspectionPlan.fillInComments.btn
|
||
break
|
||
case EsInspectionPlan.liaisonCollect.value:
|
||
this.btn = EsInspectionPlan.liaisonCollect.btn
|
||
break
|
||
case EsInspectionPlan.relevantPersonnelCountersign.value:
|
||
this.btn = EsInspectionPlan.relevantPersonnelCountersign.btn
|
||
break
|
||
case EsInspectionPlan.liaisonLeaderApproval.value:
|
||
this.btn = EsInspectionPlan.liaisonLeaderApproval.btn
|
||
break
|
||
}
|
||
getInspectPlanDetail(params).then(res => {
|
||
if (res.success) {
|
||
const data = res.result || {}
|
||
this.processInfoForm.setFieldsValue({
|
||
prcName: data.processAll.prcName,
|
||
dueTime: data.processAll.dueTime,
|
||
prcMes: data.processAll.prcMes
|
||
})
|
||
}
|
||
})
|
||
},
|
||
switchChange (value) {
|
||
this.switchValue = value
|
||
},
|
||
// 获取页面参数
|
||
getPageParams (isValidate = true) {
|
||
return new Promise((resolve, reject) => {
|
||
// 人员信息的数据, 处理成对象
|
||
const personnelObj = this.$refs.personnelInfo.getDataObjVerify()
|
||
// List拆成数组
|
||
for (const key in personnelObj) {
|
||
if (key.includes('List')) {
|
||
personnelObj[key] = personnelObj[key].split(',')
|
||
}
|
||
}
|
||
// 获取表格数据
|
||
const params = {
|
||
processEsInspectPlanList: this.$refs.inspectionPlanTable.getData()
|
||
}
|
||
if (isValidate) {
|
||
this.validateFormList(
|
||
this.processInfoForm,
|
||
this.countersignForm,
|
||
this.approvalInfoForm
|
||
).then(res => {
|
||
params.processAll = res[0]
|
||
if (params.processAll.dueTime && params.processAll.dueTime.includes(' 00:00:00')) {
|
||
params.processAll.dueTime = params.processAll.dueTime + ' 00:00:00'
|
||
}
|
||
params.processAll.projectId = this.projectId
|
||
params.processAll.taskId = this.$route.query.taskId
|
||
params.processApprovalRecord = res[2]
|
||
params.processApprovalRecord.projectId = this.projectId
|
||
params.map = {}
|
||
Object.assign(params.map, res[1], personnelObj)
|
||
params.map.pass = params.map.pass === '1'
|
||
resolve(params)
|
||
}).catch(err => {
|
||
reject(err)
|
||
})
|
||
} else {
|
||
params.processAll = this.processInfoForm.getFieldsValue()
|
||
if (params.processAll.dueTime && params.processAll.dueTime.includes(' 00:00:00')) {
|
||
params.processAll.dueTime = params.processAll.dueTime + ' 00:00:00'
|
||
}
|
||
params.processAll.projectId = this.projectId
|
||
params.processApprovalRecord = this.approvalInfoForm.getFieldsValue()
|
||
params.processApprovalRecord.projectId = this.projectId
|
||
params.map = {}
|
||
Object.assign(params.map, this.countersignForm.getFieldsValue(), personnelObj)
|
||
if (params.map.pass) {
|
||
params.map.pass = params.map.pass === '1'
|
||
}
|
||
resolve(params)
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 转办弹框
|
||
*/
|
||
handleTurnTo () {
|
||
this.$refs.userSelectModal.open()
|
||
},
|
||
/**
|
||
* 转办
|
||
*/
|
||
continueTurnTo () {
|
||
if (this.loading) return
|
||
this.loading = true
|
||
this.getPageParams().then(res => {
|
||
console.log(res)
|
||
return transferInspectPlan(res)
|
||
}).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.goBack()
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/**
|
||
* 保存
|
||
*/
|
||
handleSave () {
|
||
if (this.loading) return
|
||
this.loading = true
|
||
this.getPageParams(false).then(res => {
|
||
console.log(res)
|
||
return saveInspectPlan(res)
|
||
}).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.goBack()
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/**
|
||
* 提交
|
||
*/
|
||
handleSubmit () {
|
||
if (this.loading) return
|
||
this.loading = true
|
||
let fn
|
||
if (this.currentNode === EsInspectionPlan.initiate.value) {
|
||
fn = startInspectPlan
|
||
} else if (this.currentNode === EsInspectionPlan.fillInComments.value) {
|
||
fn = approvalInspectPlan
|
||
} else if (this.currentNode === EsInspectionPlan.liaisonCollect.value) {
|
||
fn = approvalInspectPlan
|
||
}
|
||
this.getPageParams().then(res => {
|
||
console.log(res)
|
||
return fn && fn(res)
|
||
}).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.goBack()
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/**
|
||
* 同意
|
||
*/
|
||
handleAgree () {
|
||
if (this.loading) return
|
||
this.loading = true
|
||
this.getPageParams().then(res => {
|
||
console.log(res)
|
||
return approvalInspectPlan(res)
|
||
}).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.goBack()
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/**
|
||
* 驳回
|
||
*/
|
||
handleReject () {
|
||
if (this.loading) return
|
||
this.loading = true
|
||
this.getPageParams().then(res => {
|
||
console.log(res)
|
||
return refusalInspectPlan(res)
|
||
}).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.goBack()
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
// 是否会签改变
|
||
changeIsCountersign (val) {
|
||
if (val === '1') {
|
||
this.isCountersign = true
|
||
} else if (val === '2') {
|
||
this.isCountersign = false
|
||
} else {
|
||
this.isCountersign = null
|
||
}
|
||
},
|
||
/**
|
||
* 验证所有表单
|
||
* @param formList - 多个需要校验的表单实例
|
||
*/
|
||
validateFormList (...formList) {
|
||
const promiseList = []
|
||
for (const form of formList) {
|
||
promiseList.push(
|
||
new Promise((resolve, reject) => {
|
||
form.validateFields((err, val) => {
|
||
if (!err) {
|
||
resolve(val)
|
||
} else {
|
||
reject(err)
|
||
}
|
||
})
|
||
})
|
||
)
|
||
}
|
||
return Promise.all(promiseList)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|