566 lines
17 KiB
Vue
566 lines
17 KiB
Vue
<template>
|
||
<div>
|
||
<!--头部begin-->
|
||
<header class="header">
|
||
<img src="../../assets/signUpImg/bg.png" class="header-img">
|
||
<div class="meeting-name">{{ currentDraftTempInfo.draftingGroupProject }}</div>
|
||
</header>
|
||
<!--头部end-->
|
||
<!--内容begin-->
|
||
<section class="content">
|
||
<div class="main-content">
|
||
<section class="main-content-title">
|
||
<img src="../../assets/signUpImg/meetingInfo.png"/> 起草组信息
|
||
</section>
|
||
<section class="main-content-info">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<label>起草组项目名称：</label>
|
||
<span>{{ currentDraftTempInfo.draftingGroupProject }}</span>
|
||
</a-col>
|
||
<a-col :span="12" class="flex-col">
|
||
<label>关联工作组：</label>
|
||
<span>{{ currentDraftTempInfo.workingGroupName }}</span>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<label>负责人A：</label>
|
||
<span>{{ currentDraftTempInfo.principalNameA }}</span>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<label>负责人B：</label>
|
||
<span>{{ currentDraftTempInfo.principalNameB }}</span>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<label>每年召开次数：</label>
|
||
<span> {{ currentDraftTempInfo.convokeNum }}</span>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<label>运行周期：</label>
|
||
<span> {{ currentDraftTempInfo.convokeNum }}</span>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-row :gutter="24" >
|
||
<a-col :span="24" class="flex-col">
|
||
<label>任务及目标：</label>
|
||
<span class="word-beak">{{ currentDraftTempInfo.missionAndObjectives }}</span>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24">
|
||
<a-col :span="24" class="flex-col">
|
||
<label>备注：</label>
|
||
<span class="word-beak"> {{ currentDraftTempInfo.remarks }}</span>
|
||
</a-col>
|
||
</a-row>
|
||
</section>
|
||
<section class="main-content-title mt-10">
|
||
<img src="../../assets/signUpImg/signUpInfo.png"/> 报名信息
|
||
</section>
|
||
<a-spin :spinning="confirmLoading" v-if="$route.query.id">
|
||
<a-form :form="form">
|
||
<!--个人信息begin-->
|
||
<div class="item-title">个人信息</div>
|
||
<a-row :gutter="24">
|
||
<a-col :xxl="8" :xl="12" :sm="24">
|
||
<a-form-item label="成员单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<company-select placeholder="请选择成员单位"
|
||
v-decorator="['chargeCompany',validatorRules.chargeCompany]"
|
||
@change="companyChange"
|
||
:maxLength='50'>
|
||
</company-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
<template
|
||
v-if="model.payDraftingGroupSubItemContactsList && model.payDraftingGroupSubItemContactsList.length > 0">
|
||
<a-row :gutter="24" v-for="(item, index) in model.payDraftingGroupSubItemContactsList" :key="index + ''">
|
||
<a-col :xxl="8" :xl="12" :sm="24">
|
||
<a-form-item :label="`企业联系人${index + 1}`" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<select-contacts :selected-company="selectedCompany"
|
||
:init-contacts="model.payDraftingGroupSubItemContactsList[index]"
|
||
:placeholder="`请选择企业联系人${index + 1}`"
|
||
v-decorator="[`payDraftingGroupSubItemContactsList[${index}].contactsId`, {rules: [{ required: index === 0, validator: index === 0 ? validateContactRequired : validateContact }],validateTrigger: 'change'}]"
|
||
:maxLength='50'
|
||
:ref="`selectContacts${index}`"></select-contacts>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xxl="6" :xl="8" :sm="24">
|
||
<!-- v-show="hasContactOne"-->
|
||
<a-form-item :label="`备注${index + 1}`" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-input
|
||
:placeholder="`请输入备注${index + 1}`"
|
||
v-decorator="[`payDraftingGroupSubItemContactsList[${index}].remarks`]"
|
||
:maxLength='50'
|
||
@change="e => {e.target.value = (e.target.value + '').trim()}">
|
||
</a-input>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xxl="3" :xl="4" :sm="24">
|
||
<a-button type="link" class="contact-btn" @click="handleAddContact(index)">添加</a-button>
|
||
<a-button type="link" class="contact-btn del-btn" @click="handleDelContact(index)">删除</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
</template>
|
||
|
||
<!--个人信息end-->
|
||
<div class="item-title">其他信息</div>
|
||
<a-row :gutter="24">
|
||
<a-col :xxl="8" :xl="12" :sm="24">
|
||
<a-form-item label="备注" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
|
||
<a-textarea
|
||
placeholder="请输入备注"
|
||
:auto-size="{ minRows: 3, maxRows: 6 }"
|
||
v-decorator="['remark']"
|
||
:maxLength='200'
|
||
@change="e => {e.target.value = (e.target.value + '').trim()}"/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<div class="action">
|
||
<a-button class="submit" type="primary" @click="handleOk" v-preventclick>确定</a-button>
|
||
<a-button @click="handleCancel">取消</a-button>
|
||
</div>
|
||
</a-form>
|
||
</a-spin>
|
||
</div>
|
||
</section>
|
||
<!--内容end-->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {getAction, postAction} from '@api/manage'
|
||
import CompanySelect from '@comp/company/CompanySelect'
|
||
import SelectContacts from '@comp/company/SelectContacts'
|
||
import pick from 'lodash.pick'
|
||
|
||
export default {
|
||
name: 'SignUpDraftTeamPage',
|
||
components: {SelectContacts, CompanySelect},
|
||
data () {
|
||
return {
|
||
labelCol: {
|
||
xs: {span: 24},
|
||
sm: {span: 6}
|
||
},
|
||
wrapperCol: {
|
||
xs: {span: 24},
|
||
sm: {span: 18}
|
||
},
|
||
remarksLabelCol: {
|
||
xs: {span: 24},
|
||
sm: {span: 3}
|
||
},
|
||
remarksWrapperCol: {
|
||
xs: {span: 24},
|
||
sm: {span: 21}
|
||
},
|
||
model: {},
|
||
validatorRules: {
|
||
chargeCompany: {
|
||
rules: [{ required: true, validator: this.checkCompany }],
|
||
validateTrigger: 'change'
|
||
},
|
||
contactsIdOne: {
|
||
rules: [{ required: true, message: '请选择企业联系人1' }],
|
||
validateTrigger: 'change'
|
||
},
|
||
contactsRepeat: {
|
||
rules: [{ required: false, validator: this.validateContact }],
|
||
validateTrigger: 'change'
|
||
},
|
||
},
|
||
selectedCompany: null, // 当前选中的企业
|
||
selectedContact1: null, // 编辑时的联系人
|
||
selectedContact2: null, // 编辑时的联系人
|
||
selectedContact3: null, // 编辑时的联系人
|
||
confirmLoading: false,
|
||
form: this.$form.createForm(this),
|
||
// 起草组信息
|
||
currentDraftTempInfo: {},
|
||
url: {
|
||
add: '/drafting/payDraftingGroupSubitem/addByQRCode',
|
||
info: '/drafting/payDraftingGroup/applyQueryById'
|
||
},
|
||
// 默认的联系人数据
|
||
defaultPayWorkingGroupSubItemContact: {
|
||
contactsId: undefined,
|
||
remarks: null,
|
||
name: null
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
getAction(this.url.info, { id: this.$route.query.id }).then(res => {
|
||
if (res.success) {
|
||
this.currentDraftTempInfo = res.result || {}
|
||
}
|
||
})
|
||
// 默认表单显示
|
||
this.companyChange()
|
||
this.form.resetFields()
|
||
this.model.payDraftingGroupSubItemContactsList = []
|
||
this.model.payDraftingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
|
||
this.model.payDraftingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
|
||
this.model.payDraftingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
|
||
this.model.chargeCompany = {
|
||
id: undefined,
|
||
companyName: undefined
|
||
}
|
||
this.$nextTick(() => {
|
||
this.form.setFieldsValue(pick(this.model, 'chargeCompany', 'contactsIdOne', 'contactsIdTwo', 'contactsIdThree', 'remarks', 'remarksOne', 'remarksTwo', 'remarksThree', 'payDraftingGroupSubItemContactsList'))
|
||
})
|
||
},
|
||
methods: {
|
||
// 提交
|
||
handleOk () {
|
||
if (this.confirmLoading) {
|
||
return
|
||
}
|
||
const that = this
|
||
// 触发表单验证
|
||
this.form.validateFields((err, values) => {
|
||
console.log(err, values)
|
||
if (!err) {
|
||
that.confirmLoading = true
|
||
values.chargeCompanyTemporaryName = values.chargeCompany.companyName
|
||
values.chargeCompanyId = values.chargeCompany.id
|
||
// 当前起草组id
|
||
values.draftingGroupId = this.$route.query.id
|
||
// 企业联系人信息中将没有值的去掉
|
||
let haveValueContactArr = values.payDraftingGroupSubItemContactsList.filter(tt => tt.contactsId)
|
||
let obj = {
|
||
payDraftingGroupSubItemContactsList: haveValueContactArr
|
||
}
|
||
const formData = Object.assign(this.model, values, obj)
|
||
// 企业端添加的是需要审核 1 待审核；2 已审核；3 已驳回
|
||
formData.checkResult = 1
|
||
console.log('表单提交数据', formData)
|
||
postAction(this.url.add, formData).then((res) => {
|
||
if (res.success) {
|
||
let messageText = '报名成功'
|
||
that.$notification.success({
|
||
message: messageText,
|
||
})
|
||
setTimeout(() => {
|
||
that.handleCancel()
|
||
}, 500)
|
||
that.$emit('ok')
|
||
that.close()
|
||
} else {
|
||
that.$message.warning(res.message)
|
||
}
|
||
}).finally(() => {
|
||
setTimeout(() => {
|
||
this.confirmLoading = false
|
||
}, 1000)
|
||
})
|
||
} else {
|
||
this.confirmLoading = false
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 选中企业变化，将联系人的值清空
|
||
* @param value
|
||
*/
|
||
companyChange(value) {
|
||
// 当前选中的企业和之前选中的企业一致，就不修改了
|
||
if (this.selectedCompany && value && this.selectedCompany.id === value.id) {
|
||
return
|
||
}
|
||
this.selectedCompany = value
|
||
// this.model.contactsIdOne = undefined
|
||
// this.model.contactsIdTwo = undefined
|
||
// this.model.contactsIdThree = undefined
|
||
// 处理默认显示的三个企业联系人
|
||
this.model.payDraftingGroupSubItemContactsList = []
|
||
this.model.payDraftingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
|
||
this.model.payDraftingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
|
||
this.model.payDraftingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
|
||
// this.model.mailContactsId = undefined
|
||
this.selectedMailContact = null
|
||
this.model.contractNum = undefined
|
||
this.$nextTick(() => {
|
||
this.form.setFieldsValue(pick(this.model, 'contractNum', 'payDraftingGroupSubItemContactsList'))
|
||
})
|
||
},
|
||
validateContactRequired(rule, value, callback) {
|
||
if (value) {
|
||
callback()
|
||
}
|
||
callback('请选择企业联系人1')
|
||
},
|
||
/**
|
||
* 校验企业联系人是否重复
|
||
* @param rule
|
||
* @param value
|
||
* @param callback
|
||
*/
|
||
validateContact(rule, value, callback) {
|
||
if (value) {
|
||
let contactsList = this.form.getFieldValue('payDraftingGroupSubItemContactsList')
|
||
let hasValueArr = contactsList.filter(tt => tt.contactsId === value)
|
||
if (hasValueArr.length <= 1) {
|
||
callback()
|
||
}
|
||
callback('请选择不同的联系人')
|
||
return
|
||
}
|
||
callback()
|
||
},
|
||
/**
|
||
* 企业必填校验
|
||
* @param rules
|
||
* @param value
|
||
* @param callback
|
||
*/
|
||
checkCompany(rules, value, callback) {
|
||
if (value.id && value.companyName) {
|
||
callback()
|
||
return
|
||
}
|
||
callback('请选择成员单位')
|
||
},
|
||
/**
|
||
* 添加联系人
|
||
* @param index
|
||
*/
|
||
handleAddContact(index) {
|
||
if (this.model.payDraftingGroupSubItemContactsList.length >= 10) {
|
||
this.$message.warn('最多添加十个企业联系人')
|
||
return
|
||
}
|
||
let obj = {
|
||
contactsId: undefined,
|
||
remarks: null
|
||
}
|
||
this.model.payDraftingGroupSubItemContactsList.splice(index + 1, 0, obj)
|
||
this.$forceUpdate()
|
||
let formData = this.form.getFieldValue('payDraftingGroupSubItemContactsList')
|
||
formData.splice(index + 1, 0, obj)
|
||
this.$nextTick(() => {
|
||
this.form.setFieldsValue({ payDraftingGroupSubItemContactsList: formData })
|
||
})
|
||
},
|
||
/**
|
||
* 删除联系人
|
||
* @param index
|
||
*/
|
||
handleDelContact(index) {
|
||
if (this.model.payDraftingGroupSubItemContactsList.length === 1) {
|
||
this.$message.warn('最少需要一个企业联系人')
|
||
return
|
||
}
|
||
this.model.payDraftingGroupSubItemContactsList.splice(index, 1)
|
||
let formData = this.form.getFieldValue('payDraftingGroupSubItemContactsList')
|
||
formData.splice(index, 1)
|
||
this.$nextTick(() => {
|
||
this.form.setFieldsValue({ payDraftingGroupSubItemContactsList: formData })
|
||
})
|
||
},
|
||
// 下拉框的搜索
|
||
filterOption(input, option) {
|
||
return (
|
||
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||
)
|
||
},
|
||
/*
|
||
* 取消
|
||
* */
|
||
handleCancel() {
|
||
this.$router.go(-1)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style scoped lang="less">
|
||
.header {
|
||
text-align: center;
|
||
position: relative;
|
||
user-select: none;
|
||
|
||
.header-img {
|
||
width: 100%;
|
||
min-width: 1200px;
|
||
height: 450px;
|
||
}
|
||
|
||
.meeting-name {
|
||
width: 80%;
|
||
min-width: 1200px;
|
||
position: absolute;
|
||
font-family: PingFang SC, PingFang SC-Bold;
|
||
font-weight: 700;
|
||
letter-spacing: 2px;
|
||
color: #fff;
|
||
font-size: 42px;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
|
||
.content {
|
||
user-select: none;
|
||
background: rgba(240, 242, 245);
|
||
|
||
.main-content {
|
||
min-height: calc(100vh - 450px);
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
width: 80%;
|
||
min-width: 1200px;
|
||
background: #fff;
|
||
font-family: PingFang SC, PingFang SC-Medium;
|
||
|
||
&-title {
|
||
text-align: left;
|
||
padding-left: 20px;
|
||
width: 100%;
|
||
background: rgba(8, 182, 175, .1);
|
||
color: #333;
|
||
font-family: PingFang SC, PingFang SC-Medium;
|
||
letter-spacing: 1px;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
}
|
||
|
||
&-info {
|
||
padding: 20px 20px 0 20px;
|
||
box-sizing: border-box;
|
||
font-size: 16px;
|
||
color: #555;
|
||
line-height: 2.1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.color-red {
|
||
color: red;
|
||
}
|
||
|
||
.qr-code {
|
||
width: 140px;
|
||
height: 140px;
|
||
}
|
||
|
||
.mt-10 {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.action {
|
||
text-align: right;
|
||
|
||
.submit {
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
|
||
.meetingCost {
|
||
text-align: right;
|
||
padding-right: 20px;
|
||
width: 100%;
|
||
background: #F7F7F7;
|
||
color: #333;
|
||
font-family: PingFang SC, PingFang SC-Medium;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.item-title {
|
||
padding-left: 40px;
|
||
box-sizing: border-box;
|
||
height: 46px;
|
||
line-height: 46px;
|
||
color: #333;
|
||
position: relative;
|
||
font-size: 16px;
|
||
|
||
&::before {
|
||
position: absolute;
|
||
content: "";
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background: #069f99;
|
||
top: 50%;
|
||
margin-top: -5px;
|
||
left: 15px;
|
||
}
|
||
}
|
||
|
||
.center {
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.word-beak {
|
||
word-break: break-all;
|
||
}
|
||
|
||
.block-span {
|
||
display: block;
|
||
}
|
||
|
||
.flex-col {
|
||
display: flex;
|
||
|
||
label {
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
// 邀请码内部的样式问题
|
||
.code-form-item {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.ant-input {
|
||
flex: 1;
|
||
}
|
||
|
||
.split-span {
|
||
display: inline-block;
|
||
width: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
}
|
||
|
||
// 国际研讨会-关联会议 多选样式的修改
|
||
.meeting-form-multi-select {
|
||
.topic-title {
|
||
padding: 10px 0;
|
||
}
|
||
|
||
/deep/ .ant-checkbox-wrapper + .ant-checkbox-wrapper {
|
||
margin-left: 0 !important;
|
||
}
|
||
|
||
/deep/ .ant-checkbox-wrapper,
|
||
/deep/ .ant-radio-wrapper {
|
||
margin-right: 8px;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.radio-div {
|
||
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
||
padding-top: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
</style> |