311 lines
12 KiB
Vue
311 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<a-spin :spinning="loading">
|
|
<div class="process-part-title">{{ $t('basicServiceInformation') }}</div>
|
|
<div class="table-container mb-20">
|
|
<j-table
|
|
:can-drag="true"
|
|
:scroll="{x: '100%'}"
|
|
ref="table"
|
|
rowKey="id"
|
|
:columns="columns"
|
|
:dataSource="dataSource"
|
|
:pagination="false">
|
|
</j-table>
|
|
</div>
|
|
<a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<a-row>
|
|
<a-col :span="8">
|
|
<a-form-item :label="$t('workCenter.standardInterpretationProcess.interpretingTasksIsDistribute')" :colon="false">
|
|
<!--解读任务是否下发-->
|
|
<j-dict-select-tag :placeholder="$t('pleaseSelect') + $t('workCenter.standardInterpretationProcess.interpretingTasksIsDistribute')"
|
|
dict-code="is_distribute"
|
|
:disabled="disabled || isNextStep"
|
|
v-decorator="[ 'isDistribute', validatorRules.isDistribute ]" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
<div class="mb-20">
|
|
<!-- 下一步-->
|
|
<a-button icon="arrow-down" type="primary" ghost @click="handleNextStep" :disabled="isNextStep">{{ $t('next') }}</a-button>
|
|
</div>
|
|
<!-- 确认下一步展示 -->
|
|
<template v-if="isNextStep">
|
|
<div class="process-part-title">{{ $t('dispatchInformation') }}</div>
|
|
<interpretation-clause-table ref="interpretationClauseTable" :disabled="disabled" :current-node-id="currentNodeId" :is-distribute="isDistribute"/>
|
|
<!-- 不分发的表单 -->
|
|
<template v-if="!isDistribute">
|
|
<a-form :form="userForm" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<a-row>
|
|
<a-col :span="8">
|
|
<a-form-item :label="$t('workCenter.standardInterpretationProcess.countersigningPerson')" :colon="false">
|
|
<!--会签人员-->
|
|
<user-selection :placeholder="$t('pleaseSelect')+$t('workCenter.standardInterpretationProcess.countersigningPerson')"
|
|
v-decorator="['countersignPersonIds', validatorRules.countersignPersonIds]"
|
|
:disabled="disabled"
|
|
type="checkbox"
|
|
filedName="countersignPersonIds"
|
|
@nameChange="userSelectNameChange"
|
|
:nameStr="formInline.countersignPersonIds_dictText" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item :label="$t('workCenter.standardInterpretationProcess.reviewersPerson')" :colon="false">
|
|
<!--审核人员-->
|
|
<user-selection :placeholder="$t('pleaseSelect')+$t('workCenter.standardInterpretationProcess.reviewersPerson')"
|
|
v-decorator="['uploader', validatorRules.uploader]"
|
|
:disabled="disabled"
|
|
filedName="uploader"
|
|
@nameChange="userSelectNameChange"
|
|
:nameStr="formInline.uploader_dictText" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item :label="$t('workCenter.standardInterpretationProcess.approvedPerson')" :colon="false">
|
|
<!--批准人员-->
|
|
<user-selection :placeholder="$t('pleaseSelect')+$t('workCenter.standardInterpretationProcess.approvedPerson')"
|
|
v-decorator="['approvePersonId', validatorRules.approvePersonId]"
|
|
:disabled="disabled"
|
|
filedName="approvePersonId"
|
|
@nameChange="userSelectNameChange"
|
|
:nameStr="formInline.approvePersonId_dictText" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</template>
|
|
</template>
|
|
</a-spin>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import UserSelection from '@comp/selection/UserSelection'
|
|
import InterpretationClauseTable
|
|
from '@views/workCenter/standardInterpretationProcess/modules/InterpretationClauseTable'
|
|
import { IsDistribute } from '@/enums/commonEnums'
|
|
export default {
|
|
name: 'InterpretationMainInterpreterDistribute',
|
|
components: { InterpretationClauseTable, UserSelection },
|
|
props: {
|
|
// 当前节点
|
|
currentNodeId: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
form: this.$form.createForm(this),
|
|
userForm: this.$form.createForm(this),
|
|
labelCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 6 }
|
|
},
|
|
wrapperCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 16 }
|
|
},
|
|
columns: [
|
|
{ // 标准编号
|
|
title: this.$t('standardNumber'),
|
|
align: 'center',
|
|
width: 180,
|
|
dataIndex: 'standardNumber',
|
|
scopedSlots: { customRender: 'text' }
|
|
},
|
|
{ // 标准名称
|
|
title: this.$t('standardName'),
|
|
align: 'center',
|
|
width: 180,
|
|
dataIndex: 'standardName',
|
|
scopedSlots: { customRender: 'text' }
|
|
},
|
|
{ // 标准状态
|
|
title: this.$t('standardState'),
|
|
align: 'center',
|
|
width: 180,
|
|
dataIndex: 'standardState_dictText',
|
|
scopedSlots: { customRender: 'text' }
|
|
},
|
|
{ // 分解单来源
|
|
title: this.$t('workCenter.standardInterpretationProcess.decompositionOrderSource'),
|
|
align: 'center',
|
|
width: 180,
|
|
dataIndex: 'decompositionSource_dictText',
|
|
scopedSlots: { customRender: 'text' }
|
|
},
|
|
{ // 实施日期
|
|
title: this.$t('implementationDate'),
|
|
align: 'center',
|
|
width: 180,
|
|
dataIndex: 'implementationDate',
|
|
scopedSlots: { customRender: 'text' }
|
|
},
|
|
{ // 新生产车实施日期
|
|
title: this.$t('newProductionVehicleImplementationDate'),
|
|
align: 'center',
|
|
width: 180,
|
|
dataIndex: 'newProductImplDate',
|
|
scopedSlots: { customRender: 'text' }
|
|
},
|
|
{ // 新认证车实施日期
|
|
title: this.$t('newCertifiedVehicleImplementationDate'),
|
|
align: 'center',
|
|
width: 180,
|
|
dataIndex: 'newAuthImplDate',
|
|
scopedSlots: { customRender: 'text' }
|
|
}
|
|
],
|
|
dataSource: [],
|
|
// 表单的数据
|
|
formInline: {},
|
|
validatorRules: {
|
|
// 解读任务是否下发
|
|
isDistribute: {
|
|
rules: [
|
|
{ required: true, message: this.$t('pleaseSelect') + this.$t('workCenter.standardInterpretationProcess.interpretingTasksIsDistribute') }
|
|
],
|
|
validateTrigger: 'change'
|
|
},
|
|
// 会签人员
|
|
countersignPersonIds: {
|
|
rules: [
|
|
{ required: true, message: this.$t('pleaseSelect') + this.$t('workCenter.standardInterpretationProcess.countersigningPerson') }
|
|
],
|
|
validateTrigger: 'change'
|
|
},
|
|
// 审核人员
|
|
uploader: {
|
|
rules: [
|
|
{ required: true, message: this.$t('pleaseSelect') + this.$t('workCenter.standardInterpretationProcess.reviewersPerson') }
|
|
],
|
|
validateTrigger: 'change'
|
|
},
|
|
// 批准人员
|
|
approvePersonId: {
|
|
rules: [
|
|
{ required: true, message: this.$t('pleaseSelect') + this.$t('workCenter.standardInterpretationProcess.approvedPerson') }
|
|
],
|
|
validateTrigger: 'change'
|
|
}
|
|
},
|
|
// 是否点击下一步
|
|
isNextStep: false,
|
|
// 是否下发 (true是, false否, null未选择)
|
|
isDistribute: null
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 校验表单 必定返回成功的promise，携带表单的参数
|
|
* @param form
|
|
* @return {Promise<resolve>}
|
|
*/
|
|
validateFormPromise (form) {
|
|
return new Promise((resolve) => {
|
|
form.validateFields((err, values) => {
|
|
resolve({ err, values })
|
|
})
|
|
})
|
|
},
|
|
async getData (isValidate) {
|
|
const obj = {
|
|
isDistribute: this.isDistribute,
|
|
formData: {}, // 表单的数据
|
|
clauseData: [] // 条款的表格
|
|
}
|
|
if (isValidate) {
|
|
// 校验是否分发
|
|
const formObj = await this.validateFormPromise(this.form)
|
|
if (formObj.err) { obj._flag = true }
|
|
Object.assign(obj.formData, formObj.values)
|
|
|
|
// 没有下一步就提示
|
|
if (!this.isNextStep) {
|
|
obj._flag = true
|
|
this.$message.warn(this.$t('workCenter.standardInterpretationProcess.pleaseSelectTheNextStep'))
|
|
} else {
|
|
// 只要下一步了，对新增的部分进行校验
|
|
obj.clauseData = this.$refs.interpretationClauseTable.getData()
|
|
// 至少一条条款数据
|
|
if (!obj.clauseData.length) {
|
|
this.$message.warn('addAtLeastOneRowOfData')
|
|
obj._flag = true
|
|
} else if (this.isDistribute && !obj.clauseData.some(item => item.interpretPersonIds)) {
|
|
// 有数据且选分发时候校验 至少一条数据选择解读人
|
|
this.$message.warn(this.$t('workCenter.standardInterpretationProcess.pleaseSelectInterpreter'))
|
|
obj._flag = true
|
|
} else if (!this.isDistribute) {
|
|
// 有数据且不分发时校验用户表单
|
|
const userFormObj = await this.validateFormPromise(this.userForm)
|
|
if (userFormObj.err) { obj._flag = true }
|
|
Object.assign(obj.formData, userFormObj.values)
|
|
}
|
|
}
|
|
} else {
|
|
// 不需要校验，直接获取各部分数据
|
|
Object.assign({}, this.form.getFieldsValue())
|
|
// 选择下一步，获取新增部分的数据
|
|
if (this.isNextStep) {
|
|
obj.clauseData = this.$refs.interpretationClauseTable.getData()
|
|
// 并且是不分发，就获取表单数据
|
|
if (!this.isDistribute) {
|
|
Object.assign(obj.formData, this.userForm.getFieldsValue())
|
|
}
|
|
}
|
|
}
|
|
return obj
|
|
},
|
|
setData (data) {
|
|
console.log(data)
|
|
this.dataSource = [data.data.processStandardInterpret]
|
|
this.formInline = data.data.processStandardInterpret
|
|
this.clauseDataSource = data.data.processStandardInterpretClauseList
|
|
// 是否下发
|
|
if (data.data.processStandardInterpret.isDistribute === IsDistribute.DISTRIBUTE.value) {
|
|
this.isDistribute = true
|
|
} else if (data.data.processStandardInterpret.isDistribute === IsDistribute.NOT_DISTRIBUTE.value) {
|
|
this.isDistribute = false
|
|
}
|
|
// 是否下发有值就自动带入下一步，并回显数据
|
|
if (data.data.processStandardInterpret.isDistribute) {
|
|
this.isNextStep = true
|
|
this.$nextTick(() => {
|
|
this.$refs.interpretationClauseTable.setData(this.clauseDataSource)
|
|
})
|
|
}
|
|
},
|
|
// 下一步
|
|
handleNextStep () {
|
|
this.form.validateFields((err, values) => {
|
|
if (!err) {
|
|
this.isDistribute = values.isDistribute === IsDistribute.DISTRIBUTE.value
|
|
this.isNextStep = true
|
|
this.$nextTick(() => {
|
|
this.$refs.interpretationClauseTable.setData(this.clauseDataSource)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 选择用户回显用户名
|
|
userSelectNameChange (value, fieldName) {
|
|
this.formInline[fieldName + '_dictText'] = value
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.mb-20 {
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|