add 起草组报名页面部分
This commit is contained in:
danshihao
@@ -0,0 +1,438 @@
|
||||
<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 @change="changeCompany" v-decorator="['companyId',validatorRules.companyId]"
|
||||
placeholder="请选择参会企业"
|
||||
:is-limit="true"
|
||||
full-company-info
|
||||
:maxLength='50'>
|
||||
</company-select>
|
||||
<span class="color-red">若没有您要选择的企业,请您添加企业信息(发票抬头)</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :xxl="8" :xl="12" :sm="24">
|
||||
<a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<select-contacts :selected-company="selectedCompany"
|
||||
placeholder="请选择参会人"
|
||||
:is-limit="true"
|
||||
v-decorator="['companyContactId',validatorRules.companyContactId]"
|
||||
:maxLength='50'
|
||||
@change="changeContact"
|
||||
ref="selectMailContacts"
|
||||
@ok="addContactsOk"></select-contacts>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="8" :xl="12" :sm="24">
|
||||
<a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入手机号"
|
||||
@change="(e) => {e.target.value = e.target.value.replace(/[^0-9]/g,'')}"
|
||||
:maxLength='11'
|
||||
disabled
|
||||
v-decorator="['phone',validatorRules.phone]"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!--个人信息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} from '@api/manage'
|
||||
import CompanySelect from '@comp/company/CompanySelect'
|
||||
import SelectContacts from '@comp/company/SelectContacts'
|
||||
import {getContactsById, validateStandard} from '@api/incomePaymentsApi'
|
||||
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}
|
||||
},
|
||||
validatorRules: {
|
||||
companyId: {
|
||||
rules: [{required: true, message: '请选择参会企业'}],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
choiceTopic: {
|
||||
rules: [
|
||||
// {required: true, message: '请选择会议名称'},
|
||||
{required: true, validator: this.checkChoiceTopic},
|
||||
],
|
||||
validateTrigger: ['change']
|
||||
},
|
||||
inviteCode: {
|
||||
rules: [{required: true, message: '请选择是否有邀请码'}],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
invitationCode: {
|
||||
rules: [{required: true, validator: this.checkCode}],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
companyContactId: {
|
||||
rules: [{required: true, message: '请选择参会人'}],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
phone: {
|
||||
rules: [{required: true, message: '请输入手机号'}],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
identify: {
|
||||
rules: [{required: true, message: '请选择身份'}],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
guestType: {
|
||||
rules: [{required: true, message: '请选择嘉宾类型'}],
|
||||
validateTrigger: 'change'
|
||||
}
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
// 起草组信息
|
||||
currentDraftTempInfo: {},
|
||||
url: {
|
||||
info: '/drafting/payDraftingGroup/queryById'
|
||||
},
|
||||
// 选择企业
|
||||
selectedCompany: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
getAction(this.url.info, { id: this.$route.query.id }).then(res => {
|
||||
if (res.success) {
|
||||
this.currentDraftTempInfo = res.result || {}
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
addContactsOk() {
|
||||
this.$refs.selectContacts.getContactsList()
|
||||
},
|
||||
/*
|
||||
* 选择联系人获取信息
|
||||
* */
|
||||
changeContact(val) {
|
||||
// 监听删除联系人的时候 清除对应的表单赋值
|
||||
if (val === undefined) {
|
||||
this.form.resetFields(['phone'])
|
||||
}
|
||||
const that = this
|
||||
// 通过id查询联系人信息
|
||||
getContactsById({id: val}).then(res => {
|
||||
const model = Object.assign({}, res.result)
|
||||
// 设置手机 邮箱 职务
|
||||
if (res.success) {
|
||||
that.form.setFieldsValue(pick(model, 'phone'))
|
||||
}
|
||||
})
|
||||
},
|
||||
/*
|
||||
* 选择参会企业
|
||||
* */
|
||||
changeCompany(value) {
|
||||
this.selectedCompany = value
|
||||
// 选择企业清空 姓名 手机号
|
||||
this.form.resetFields(['companyContactId', 'phone'])
|
||||
},
|
||||
/*
|
||||
* 取消
|
||||
* */
|
||||
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>
|
||||
Reference in New Issue
Block a user