277 lines
10 KiB
Vue
277 lines
10 KiB
Vue
<template>
|
|
<internal-detail-page :content-padding="0" :title="pageTitle" :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('workCenter.basicInformation') }}
|
|
</a>
|
|
<!--人员信息-->
|
|
<a class="switch-item" :class="switchValue === 'user' ? 'table-operator-tab-active' : ''"
|
|
@click="switchChange('user')">{{ $t('workCenter.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="twoLabelCol" :wrapperCol="twoWrapperCol" :label="$t('processName')">
|
|
<a-input :placeholder="$t('pleaseEnter') + $t('processName')"
|
|
@change="event => event.target.value = event.target.value.trim()"
|
|
:maxLength="50"
|
|
disabled
|
|
v-decorator="['processName']" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<!--截止日期-->
|
|
<a-form-item :labelCol="twoLabelCol" :wrapperCol="twoWrapperCol" :label="$t('expirationDate')">
|
|
<a-date-picker class="box-input"
|
|
:placeholder="$t('pleaseSelect') + $t('expirationDate')"
|
|
:getCalendarContainer="(trigger) => trigger.parentNode"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
v-decorator="['processDueDate']"
|
|
style="width: 100%" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<!--流程说明-->
|
|
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('processExplain')">
|
|
<a-input :placeholder="$t('pleaseEnter') + $t('processExplain')"
|
|
@change="event => event.target.value = event.target.value.trim()"
|
|
:maxLength="500"
|
|
type="textarea"
|
|
v-decorator="['processDescription']" />
|
|
</a-form-item>
|
|
</a-form>
|
|
|
|
<!--业务基本信息-->
|
|
<div class="process-part-title">{{ $t('basicServiceInformation') }}</div>
|
|
<a-form :form="basicServiceInfoForm">
|
|
<div class="form-flex-box">
|
|
<div class="form-flex-item custom-flex-form-item">
|
|
<!--标准编号-->
|
|
<a-form-item :label="$t('standardNumber')">
|
|
<standard-selection v-decorator="['standardNumber', validatorRules.standardNumber]"
|
|
:placeholder="$t('pleaseSelect') + $t('standardNumber')" />
|
|
</a-form-item>
|
|
</div>
|
|
<div class="form-flex-item custom-flex-form-item">
|
|
<!--标准名称-->
|
|
<a-form-item :label="$t('standardName')">
|
|
<a-input :placeholder="$t('pleaseEnter') + $t('standardName')"
|
|
@change="event => event.target.value = event.target.value.trim()"
|
|
:maxLength="50"
|
|
disabled
|
|
v-decorator="['standardName', validatorRules.standardName]" />
|
|
</a-form-item>
|
|
</div>
|
|
<div class="form-flex-item custom-flex-form-item">
|
|
<!--标准文本-->
|
|
<a-form-item :label="$t('workCenter.standardConsultationProcess.standardText')">
|
|
<div class="box-title-text">
|
|
<a-input class="box-input"
|
|
v-decorator="['standardText', validatorRules.standardText]"
|
|
readonly
|
|
:placeholder="$t('pleaseSelect') + $t('workCenter.standardConsultationProcess.standardText')" />
|
|
<a-button type="primary" class="button-box" @click="chooseStandardText">
|
|
{{ this.$t('workCenter.standardConsultationProcess.selectText') }}
|
|
</a-button>
|
|
</div>
|
|
</a-form-item>
|
|
</div>
|
|
<div class="form-flex-item custom-flex-form-item">
|
|
<!--相关文件-->
|
|
<a-form-item :label="$t('workCenter.standardConsultationProcess.relevantDocument')">
|
|
<j-upload return-id v-decorator="['relatedFile', validatorRules.relatedFile]" />
|
|
</a-form-item>
|
|
</div>
|
|
<div class="form-flex-item custom-flex-form-item">
|
|
<!--征求意见结束日期-->
|
|
<a-form-item :label="$t('workCenter.standardConsultationProcess.endDate')">
|
|
<j-date show-type="day" v-decorator="['consultationDueDate', validatorRules.consultationDueDate]" />
|
|
</a-form-item>
|
|
</div>
|
|
</div>
|
|
</a-form>
|
|
|
|
<!--业务分派信息-->
|
|
<template v-if="showDispatchInformation">
|
|
<div class="process-part-title">{{ $t('workCenter.dispatchInformation') }}</div>
|
|
<a-form :form="dispatchInfoForm"></a-form>
|
|
</template>
|
|
|
|
<!--流程审批信息-->
|
|
<div class="process-part-title">{{ $t('processApprovalInformation') }}</div>
|
|
<a-form :form="approvalInfoForm">
|
|
<!--备注-->
|
|
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('remarks')">
|
|
<a-input :placeholder="$t('pleaseEnter') + $t('remarks')"
|
|
@change="event => event.target.value = event.target.value.trim()"
|
|
:maxLength="500"
|
|
type="textarea"
|
|
v-decorator="['handleText']" />
|
|
</a-form-item>
|
|
<!--附件-->
|
|
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('businessSupport.questionAnswer.attach')">
|
|
<j-upload v-decorator="['handleFile']" return-id />
|
|
</a-form-item>
|
|
</a-form>
|
|
</div>
|
|
|
|
<div class="detail-page-bottom-operate-box">
|
|
<!--转办 审批节点存在-->
|
|
<a-button type="primary" :loading="loading" ghost icon="arrow-up" v-if="btnList.includes('return')" @click="handleTurnTo">
|
|
{{ $t('turnTo') }}
|
|
</a-button>
|
|
<!--保存 发起节点、审批节点都存在-->
|
|
<a-button type="primary" :loading="loading" ghost v-if="btnList.includes('save')" @click="handleSave">
|
|
<i class="iconfont icon-save" />{{ $t('preservation') }}
|
|
</a-button>
|
|
<!--提交 发起节点存在-->
|
|
<a-button type="primary" :loading="loading" @click="handleSubmit" v-if="btnList.includes('submit')" icon="upload">
|
|
{{ $t('submit') }}
|
|
</a-button>
|
|
<!--同意 审批节点存在-->
|
|
<a-button type="primary" :loading="loading" icon="check-circle" v-if="btnList.includes('agree')" @click="handleSubmit">
|
|
{{ $t('agree') }}
|
|
</a-button>
|
|
<!--驳回 审批节点存在-->
|
|
<a-button type="primary" :loading="loading" icon="close-circle" v-if="btnList.includes('reject')" @click="handleSubmit">
|
|
{{ $t('reject') }}
|
|
</a-button>
|
|
</div>
|
|
</internal-detail-page>
|
|
</template>
|
|
|
|
<script>
|
|
import InternalDetailPage from '../../../components/InternalDetailPage.vue'
|
|
import StandardSelection from '../../../components/selection/StandardSelection.vue'
|
|
import { ConsultationProcess } from '../../../enums/commonEnums'
|
|
|
|
export default {
|
|
name: 'StandardConsultationProcess',
|
|
components: { InternalDetailPage, StandardSelection },
|
|
data () {
|
|
return {
|
|
switchValue: 'base',
|
|
twoLabelCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 4 }
|
|
},
|
|
twoWrapperCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 20 }
|
|
},
|
|
longLabelCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 2 }
|
|
},
|
|
longWrapperCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 22 }
|
|
},
|
|
// 流程信息
|
|
processInfoForm: this.$form.createForm(this),
|
|
// 业务基本信息
|
|
basicServiceInfoForm: this.$form.createForm(this),
|
|
// 流程审批信息
|
|
approvalInfoForm: this.$form.createForm(this),
|
|
// 业务分派信息
|
|
dispatchInfoForm: this.$form.createForm(this),
|
|
validatorRules: {
|
|
// 标准编号
|
|
standardNumber: {
|
|
rules: [{ required: true, message: this.$t('pleaseSelect') + this.$t('standardSelect.standardNumber') }],
|
|
validateTrigger: 'change'
|
|
},
|
|
// 标准名称
|
|
standardName: {
|
|
rules: [{ required: true, message: this.$t('pleaseEnter') + this.$t('standardName') }],
|
|
validateTrigger: 'blur'
|
|
},
|
|
// 标准文本
|
|
standardText: {
|
|
rules: [{
|
|
required: true,
|
|
message: this.$t('pleaseSelect') + this.$t('workCenter.standardConsultationProcess.standardText')
|
|
}],
|
|
validateTrigger: 'change'
|
|
},
|
|
// 相关文件
|
|
relatedFile: {
|
|
rules: [{
|
|
required: false,
|
|
message: this.$t('uploadFile.pleaseUpload') + this.$t('workCenter.standardConsultationProcess.relevantDocument')
|
|
}],
|
|
validateTrigger: 'change'
|
|
},
|
|
// 征求意见结束日期
|
|
consultationDueDate: {
|
|
rules: [{
|
|
required: true,
|
|
message: this.$t('pleaseSelect') + this.$t('workCenter.standardConsultationProcess.endDate')
|
|
}],
|
|
validateTrigger: 'change'
|
|
}
|
|
},
|
|
btnList: [], // 显示的按钮
|
|
loading: false,
|
|
currentNode: '2',
|
|
nodeEnumsKey: null // 当前节点对应枚举的key
|
|
}
|
|
},
|
|
computed: {
|
|
pageTitle () {
|
|
return `${this.$t('flowCenter')}${this.$route.meta.title}`
|
|
},
|
|
// 是否展示业务分派信息
|
|
showDispatchInformation () {
|
|
return this.currentNode === ConsultationProcess.distribute.value
|
|
}
|
|
},
|
|
created () {
|
|
// 有流程id或者草稿id点进来的
|
|
if (this.$route.query.processInstanceId || this.$route.query.draftId) {
|
|
|
|
} else {
|
|
this.nodeEnumsKey = ConsultationProcess.keyOfValue(this.currentNode) || 'audit'
|
|
this.btnList = ConsultationProcess[this.nodeEnumsKey].btn
|
|
}
|
|
},
|
|
methods: {
|
|
switchChange (value) {
|
|
this.switchValue = value
|
|
},
|
|
chooseStandardText () {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.box-title-text {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.box-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.button-box {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
</style>
|