445 lines
15 KiB
Vue
445 lines
15 KiB
Vue
<template>
|
|
<internal-detail-page :title="pageTitle">
|
|
<!-- 标题右侧tab -->
|
|
<template v-slot:titleRightCustom>
|
|
<div class="table-operator-tab">
|
|
<a class="switch-item" :class="switchValue === 'base' ? 'table-operator-tab-active' : ''"
|
|
@click="switchChange('base')">基础信息
|
|
</a>
|
|
<a class="switch-item" :class="switchValue === 'user' ? 'table-operator-tab-active' : ''"
|
|
@click="switchChange('user')">人员信息
|
|
</a>
|
|
</div>
|
|
</template>
|
|
<div v-if="switchValue === 'base'" class="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')">
|
|
<a-input :placeholder="$t('pleaseEnter') + $t('processName')"
|
|
@change="event => event.target.value = event.target.value.trim()"
|
|
:disabled="disabled"
|
|
:maxLength="50"
|
|
v-decorator="['processName', 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"
|
|
value-format="YYYY-MM-DD"
|
|
v-decorator="['expirationDate']" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<!-- 流程说明 -->
|
|
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('processExplain')">
|
|
<a-textarea :placeholder="$t('pleaseEnter') + $t('processExplain')"
|
|
:maxLength="500"
|
|
:rows="4"
|
|
:disabled="disabled"
|
|
v-decorator="['processExplain']" />
|
|
</a-form-item>
|
|
</a-row>
|
|
</a-form>
|
|
|
|
<!-- 业务基本信息 -->
|
|
<div class="process-part-title">{{ $t('basicServiceInformation') }}</div>
|
|
<!-- 申请类型和项目类型 -->
|
|
<a-form-model :model="formInline" class="form-add" :rules="rules" ref="ruleForm">
|
|
<div class="collapsible-panel-form">
|
|
<div class="form-flex-box collapsible-panel-form-content collapsible-content-no-head">
|
|
<!-- 申请类型 -->
|
|
<div class="box-title-text form-flex-item">
|
|
<div class="title-text">
|
|
<span class="required">*</span>
|
|
<span class="title-text-text" :title="$t('workCenter.enterpriseInitChangePlan.applicationType')">
|
|
{{ $t('workCenter.enterpriseInitChangePlan.applicationType') }}
|
|
</span>
|
|
</div>
|
|
<a-form-model-item class="item-model" prop="applicationType">
|
|
<a-select v-model="formInline.applicationType"
|
|
:disabled="disabled"
|
|
:placeholder="$t('pleaseSelect')+$t('workCenter.enterpriseInitChangePlan.applicationType')">
|
|
<a-select-option :value="1">{{ $t('workCenter.enterpriseInitChangePlan.standardProjectEstablishment') }}</a-select-option>
|
|
<a-select-option :value="2">{{ $t('workCenter.enterpriseInitChangePlan.change') }}</a-select-option>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
</div>
|
|
<!-- 项目类别 -->
|
|
<div class="box-title-text form-flex-item">
|
|
<div class="title-text">
|
|
<span class="required">*</span>
|
|
<span class="title-text-text" :title="$t('workCenter.enterpriseInitChangePlan.itemCategory')">
|
|
{{ $t('workCenter.enterpriseInitChangePlan.itemCategory') }}
|
|
</span>
|
|
</div>
|
|
<a-form-model-item class="item-model" prop="itemCategory">
|
|
<a-select v-if="formInline.applicationType === 1"
|
|
v-model="formInline.itemCategory"
|
|
:disabled="disabled"
|
|
@change="itemCategoryChange"
|
|
:placeholder="$t('pleaseSelect')+$t('workCenter.enterpriseInitChangePlan.itemCategory')">
|
|
<a-select-option :value="1">{{ $t('workCenter.enterpriseInitChangePlan.formulate') }}</a-select-option>
|
|
<a-select-option :value="2">{{ $t('workCenter.enterpriseInitChangePlan.revise') }}</a-select-option>
|
|
</a-select>
|
|
<a-select v-else
|
|
v-model="formInline.itemCategory"
|
|
:disabled="disabled"
|
|
@change="itemCategoryChange"
|
|
:placeholder="$t('pleaseSelect')+$t('workCenter.enterpriseInitChangePlan.itemCategory')">
|
|
<a-select-option :value="1">{{ $t('workCenter.enterpriseInitChangePlan.completionTimeChange') }}</a-select-option>
|
|
<a-select-option :value="2">{{ $t('workCenter.enterpriseInitChangePlan.terminationOfWork') }}</a-select-option>
|
|
<a-select-option :value="3">{{ $t('workCenter.enterpriseInitChangePlan.masterDraftingDepartmentChanges') }}</a-select-option>
|
|
<a-select-option :value="4">{{ $t('workCenter.enterpriseInitChangePlan.merge') }}</a-select-option>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-form-model>
|
|
<!-- 申请类型为立项时的业务基本信息部分组件 -->
|
|
<approval-base-info
|
|
v-if="formInline.applicationType === 1"
|
|
ref="approvalBaseInfo"
|
|
:disabled="disabled"
|
|
:itemCategory="formInline.itemCategory">
|
|
</approval-base-info>
|
|
<!-- 申请类型为变更时的业务基本信息部分组件 -->
|
|
<change-base-info
|
|
v-else-if="formInline.applicationType === 2"
|
|
ref="changeBaseInfo"
|
|
:disabled="disabled"
|
|
>
|
|
</change-base-info>
|
|
|
|
<!-- 流程审批信息 -->
|
|
<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="['remarks', validatorRules.remarks]" />
|
|
</a-form-item>
|
|
<!--附件-->
|
|
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('businessSupport.questionAnswer.attach')">
|
|
<j-upload v-decorator="['file']" return-id />
|
|
</a-form-item>
|
|
</a-form>
|
|
</div>
|
|
<div v-if="switchValue === 'user'" class="scroll-content">
|
|
<personnel-info></personnel-info>
|
|
</div>
|
|
<!-- 操作按钮 -->
|
|
<div class="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="handleSubmit" icon="upload">{{ $t('agree') }}</a-button>
|
|
</template>
|
|
<template v-if="currentNode === 2">
|
|
<!-- 转办 -->
|
|
<a-button type="primary" ghost :loading="loading" @click="handleTurnTo" icon="upload">{{ $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="check-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 PersonnelInfo from '@/components/PersonnelInfo'
|
|
import UserSelectModal from '@/components/selection/UserSelectModal'
|
|
import {
|
|
enterprisePlanApprovalTurnTo,
|
|
enterprisePlanApprovalAgree,
|
|
enterprisePlanApprovalReject
|
|
} from '@/api/workCenter'
|
|
import ApprovalBaseInfo from './modules/ApprovalBaseInfo'
|
|
import ChangeBaseInfo from './modules/ChangeBaseInfo'
|
|
|
|
export default {
|
|
name: 'PlanApprovalFlow',
|
|
components: {
|
|
ChangeBaseInfo,
|
|
ApprovalBaseInfo,
|
|
UserSelectModal,
|
|
PersonnelInfo,
|
|
InternalDetailPage
|
|
},
|
|
computed: {
|
|
pageTitle () {
|
|
return this.$t('flowCenter') + this.$route.meta.title
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
switchValue: 'base', // 头部tab选中值
|
|
disabled: false,
|
|
currentNode: 2, // 当前节点
|
|
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: {
|
|
// 流程名称
|
|
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'
|
|
}
|
|
},
|
|
formInline: {},
|
|
rules: {
|
|
// 申请类型
|
|
applicationType: [
|
|
{
|
|
required: true,
|
|
message: this.$t('workCenter.enterpriseInitChangePlan.applicationType') + this.$t('cannotEmpty'),
|
|
trigger: 'change'
|
|
}
|
|
],
|
|
// 项目类别
|
|
itemCategory: [
|
|
{
|
|
required: true,
|
|
message: this.$t('workCenter.enterpriseInitChangePlan.itemCategory') + this.$t('cannotEmpty'),
|
|
trigger: 'change'
|
|
}
|
|
]
|
|
},
|
|
approvalInfoForm: this.$form.createForm(this) // 审批信息表单
|
|
}
|
|
},
|
|
methods: {
|
|
// 头部tab改变
|
|
switchChange (value) {
|
|
this.switchValue = value
|
|
},
|
|
// 项目类别改变
|
|
itemCategoryChange (value) {
|
|
if (value === 1) {
|
|
this.$refs.approvalBaseInfo.rules.enterpriseStandardName[0].required = true
|
|
} else {
|
|
this.$refs.approvalBaseInfo.rules.enterpriseStandardName[0].required = false
|
|
}
|
|
},
|
|
// 保存
|
|
handleSave () {
|
|
|
|
},
|
|
// 提交
|
|
handleSubmit () {
|
|
if (this.loading) return
|
|
this.processInfoForm.validateFields((err, values) => {
|
|
this.$refs.ruleForm.validate(valid => {
|
|
this.$refs.approvalBaseInfo.$refs.ruleForm.validate(approvalBaseValid => {
|
|
this.approvalInfoForm.validateFields((approvalErr, approvalValues) => {
|
|
if (valid && approvalBaseValid && !err && !approvalErr) {
|
|
this.loading = true
|
|
const param = Object.assign({}, this.$refs.approvalBaseInfo.formInline)
|
|
console.log(param)
|
|
}
|
|
})
|
|
})
|
|
})
|
|
})
|
|
},
|
|
// 转办
|
|
handleTurnTo () {
|
|
if (this.loading) return
|
|
// 点击显示选人组件
|
|
this.$refs.userSelectModal.open()
|
|
},
|
|
// 转办选完人的回调
|
|
userSelectModalChange (userIds) {
|
|
this.approvalInfoForm.validateFields((err, values) => {
|
|
if (!err) {
|
|
this.loading = true
|
|
let param = {}
|
|
param = Object.assign({}, values)
|
|
param.userIds = userIds
|
|
param.processId = this.model.id
|
|
enterprisePlanApprovalTurnTo(param).then(res => {
|
|
if (res.success) {
|
|
this.$message.success(res.message)
|
|
} else {
|
|
this.$message.warning(res.message)
|
|
}
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 同意
|
|
handleAgree () {
|
|
if (this.loading) return
|
|
this.approvalInfoForm.validateFields((err, values) => {
|
|
if (!err) {
|
|
this.loading = true
|
|
let param = {}
|
|
param = Object.assign({}, values)
|
|
param.processId = this.model.id
|
|
enterprisePlanApprovalAgree(param).then(res => {
|
|
if (res.success) {
|
|
this.$message.success(res.message)
|
|
} else {
|
|
this.$message.warning(res.message)
|
|
}
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 驳回
|
|
handleReject () {
|
|
if (this.loading) return
|
|
this.validatorRules.remarks.rules[0].required = true
|
|
this.approvalInfoForm.validateFields((err, values) => {
|
|
if (!err) {
|
|
this.loading = true
|
|
let param = {}
|
|
param = Object.assign({}, values)
|
|
param.processId = this.model.id
|
|
enterprisePlanApprovalReject(param).then(res => {
|
|
if (res.success) {
|
|
this.$message.success(res.message)
|
|
} else {
|
|
this.$message.warning(res.message)
|
|
}
|
|
}).finally(() => {
|
|
this.loading = false
|
|
this.validatorRules.remarks.rules[0].required = false
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
/deep/ .ant-form-item-children {
|
|
width: 100%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.form-flex-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.form-flex-item-line {
|
|
width: 100%;
|
|
}
|
|
|
|
.collapsible-panel-form {
|
|
margin-top: 20px;
|
|
|
|
&-header {
|
|
height: 56px;
|
|
line-height: 56px;
|
|
background: rgba(245, 245, 245, 0.6);
|
|
border-radius: 8px 8px 0 0;
|
|
border: 1px solid #E5E6EB;
|
|
padding: 0 20px;
|
|
font-size: 16px;
|
|
font-family: PingFang SC-Medium, PingFang SC, sans-serif;
|
|
font-weight: 600;
|
|
color: #1D2129;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.retractable-btn {
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-family: PingFang SC-Regular, PingFang SC, sans-serif;
|
|
color: @primary-color;
|
|
}
|
|
|
|
.anticon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.pack-up-btn {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.unfold-btn {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
border: 1px solid #E5E6EB;
|
|
border-top: none;
|
|
border-radius: 0 0 8px 8px;
|
|
padding: 20px;
|
|
}
|
|
}
|
|
.collapsible-content-no-head {
|
|
border-top: 1px solid #E5E6EB;
|
|
border-radius: 8px 8px 8px 8px;
|
|
}
|
|
|
|
.form-flex-item {
|
|
width: calc(100% / 3);
|
|
}
|
|
|
|
.bottom-operate-box {
|
|
height: 52px;
|
|
padding: 10px 32px;
|
|
text-align: right;
|
|
|
|
.ant-btn {
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
|
|
.scroll-content {
|
|
height: calc(100% - 52px);
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
padding: 32px;
|
|
}
|
|
</style>
|