LK/income_payments_enterprise_terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【变更】待签到国际研讨会嘉宾可以修改个人信息

Browse Source
This commit is contained in:
fengachen
2022-05-17 16:19:46 +08:00
parent 70aa857dd7
commit 34083ad462
6 changed files with 2034 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/MessagePage/MeetingDetailModal.vue
+62 -37
View File
@@ -42,17 +42,19 @@
</a-col>
</a-row>
<a-row :gutter="24" class="flex-col">
<a-col :span="12" v-for="(item,index) in model.meetingContactsList"
<a-col :span="12" v-for="(item,index) in model.meetingContactsList"
:key="index">
<label class="label">会议联系人及手机号：</label>
<span class="mul-row-content">
<span
class="content"
>{{ item.meetingContactsName}} {{item.meetingContactsName? '：' :''}} {{item.meetingContactsPhone + ' ' }}</span>
>{{ item.meetingContactsName }} {{ item.meetingContactsName ? '：' : '' }} {{
item.meetingContactsPhone + ' '
}}</span>
</span>
</a-col>
</a-row>
<a-row :gutter="24" class="flex-col">
<a-row :gutter="24" class="flex-col">
<a-col :span="12">
<label>酒店名称：</label><span>{{ model.hotelName }}</span>
</a-col>
@@ -62,13 +64,13 @@
</a-row>
<a-row :gutter="24" class="flex-col">
<a-col :span="12" v-for="(item,index) in model.hotelContactsList"
<a-col :span="12" v-for="(item,index) in model.hotelContactsList"
:key="index">
<label class="label">酒店联系人及手机号：</label>
<span class="mul-row-content">
<span
class="content"
>{{ item.hotelContacts}} {{item.hotelContacts? '：' :''}} {{item.hotelContactsPhone + ' ' }}</span>
>{{ item.hotelContacts }} {{ item.hotelContacts ? '：' : '' }} {{ item.hotelContactsPhone + ' ' }}</span>
</span>
</a-col>
</a-row>
@@ -96,7 +98,7 @@
<a-col :span="12" v-if="model.paymentQrCode && model.meetingType !== '2'">
<label>收费二维码：</label>
<span>
<img :src="paymentQrCodeSrc" alt="nothing show" class="payment-qrcode-img" />
<img :src="paymentQrCodeSrc" alt="nothing show" class="payment-qrcode-img"/>
</span>
</a-col>
</a-row>
@@ -104,7 +106,7 @@
<a-col :span="24">
<label>收费二维码：</label>
<span>
<img :src="paymentQrCodeSrc" alt="nothing show" class="payment-qrcode-img" />
<img :src="paymentQrCodeSrc" alt="nothing show" class="payment-qrcode-img"/>
</span>
</a-col>
</a-row>
@@ -234,14 +236,18 @@
</span>
</a-col>
</a-row>
<!-- <div>-->
<!-- <a-button type="primary" @click="goSignUpPage">报名</a-button>-->
<!-- </div>-->
<!-- <div>-->
<!-- <a-button type="primary" @click="goSignUpPage">报名</a-button>-->
<!-- </div>-->
</template>
</section>
<!-- 国际研讨会嘉宾身份个人信息的显示 -->
<section class="base-info" v-else>
<h3 class="title">报名信息</h3>
<div style="display: flex">
<h3 class="title">报名信息</h3>
<!--报名状态为待签到 会议类型是国际研讨会 并且是嘉宾 才能编辑报名信息-->
<a-button type="primary" v-if="model.signUpStatus === 6 " class="m-l-10" @click="editSignUpInfo">编辑报名信息</a-button>
</div>
<template v-if="Object.keys(situationInfo).length > 0">
<section>
<a-row :gutter="24" class="flex-col">
@@ -547,30 +553,33 @@
</span>
</a-col>
</a-row>
<!-- 只有可报名的会议 才能去报名 -->
<!-- 只有可报名的会议 才能去报名 -->
</template>
</section>
<section>
</section>
<div v-if=" (Number(model.meetingSignUpType) === MeetingSignUpTypeEnums.canSignUp.index && !compareCurrentTime(model.registerDeadline)) ">
<a-button type="primary" @click="goSignUpPage" >报名 </a-button>
<div
v-if=" (Number(model.meetingSignUpType) === MeetingSignUpTypeEnums.canSignUp.index && !compareCurrentTime(model.registerDeadline)) ">
<a-button type="primary" @click="goSignUpPage">报名</a-button>
</div>
</a-spin>
<!--报名信息end-->
<!--会议资料begin-->
<section class="base-info">
<h3 class="title">会议资料</h3>
<!-- 报名成功才显示查看按钮-->
<file-table :file-id="model.meetingData" :has-limit-bool="true" :meeting-id="model.id" :show-detail-bool="showDetailBool"></file-table>
<!-- 报名成功才显示查看按钮-->
<file-table :file-id="model.meetingData" :has-limit-bool="true" :meeting-id="model.id"
:show-detail-bool="showDetailBool"></file-table>
</section>
<!--会议资料end-->
<!--会议纪要begin-->
<section class="base-info">
<h3 class="title">会议纪要</h3>
<file-table :file-id="model.meetingMinute" :has-limit-bool="true" :meeting-id="model.id" :show-detail-bool="showDetailBool"></file-table>
<file-table :file-id="model.meetingMinute" :has-limit-bool="true" :meeting-id="model.id"
:show-detail-bool="showDetailBool"></file-table>
</section>
<!--会议纪要end-->
<!--到账信息 begin 2021-12-10 版需求变更去掉了-->
@@ -591,6 +600,7 @@
<template slot="footer">
<a-button @click="handleCancel">关闭</a-button>
</template>
<edit-sign-up-info ref="editSignUpInfoForm"></edit-sign-up-info>
</j-modal>
</template>
@@ -598,13 +608,14 @@
import PreviewFile from '@comp/jero/PreviewFile'
import FileTable from '@/views/MessagePage/modules/FileTable'
import JEllipsis from '@comp/jero/JEllipsis'
import { getMeetInfoById, queryCommonProjectById } from '@api/incomePaymentsApi'
import { getSingUpUserInfo, checkMember } from '@api/incomePaymentsApi'
import {getMeetInfoById, queryCommonProjectById} from '@api/incomePaymentsApi'
import {getSingUpUserInfo, checkMember} from '@api/incomePaymentsApi'
import JImageUpload from '@comp/jero/JImageUpload'
import '@/assets/less/TableExpand.less'
import SignStep from './modules/SignStep'
import { MeetingSignUpTypeEnums, MeetingTypeEnums } from '../../enums/commonEnum'
import { compareCurrentTime } from '../../utils/meetingJudgeUtil'
import {MeetingSignUpTypeEnums, MeetingTypeEnums} from '../../enums/commonEnum'
import {compareCurrentTime} from '../../utils/meetingJudgeUtil'
import EditSignUpInfo from '@views/meetingActivity/modules/EditSignUpInfo'
const columns = [
{
@@ -651,7 +662,7 @@ const columns = [
title: '操作',
align: 'center',
dataIndex: '',
scopedSlots: { customRender: 'action' }
scopedSlots: {customRender: 'action'}
}
]
export default {
@@ -661,7 +672,8 @@ export default {
JEllipsis,
JImageUpload,
FileTable,
SignStep
SignStep,
EditSignUpInfo
},
props: {
// 是否是从会议点进来的 默认走消息
@@ -692,7 +704,7 @@ export default {
// 显示更多的开票邮寄信息
showMoreInfo: false,
showDetailBool:true
showDetailBool: true
}
},
computed: {
@@ -720,7 +732,7 @@ export default {
},
methods: {
// 是否显示文件查看
async changeShowDetailBool(){
async changeShowDetailBool() {
// 增加判断，等后端接口开发完成后再做处理
//先判断当前的会议类型，如果会议是分标委会议或者理事会会议 需要判断当前人是否是 分标委成员或者理事会成员，
if (this.model.meetingType === MeetingTypeEnums.committee.index || this.model.meetingType === MeetingTypeEnums.council.index) {
@@ -729,12 +741,18 @@ export default {
this.showDetailBool = isBool
return
}
if((this.situationInfo.checkResult == 1 && this.situationInfo.registerCheckResult == 1)){
this.showDetailBool = true
}else{
this.showDetailBool = false
if ((this.situationInfo.checkResult == 1 && this.situationInfo.registerCheckResult == 1)) {
this.showDetailBool = true
} else {
this.showDetailBool = false
}
},
/**
* @description 国际研讨会嘉宾编辑个人信息
* */
editSignUpInfo(){
this.$refs.editSignUpInfoForm.open(this.situationInfo)
},
// 判断是否是 分标委成员或者理事会成员
judgeIsMember() {
return new Promise(resolve => {
@@ -758,8 +776,8 @@ export default {
this.situationInfoLoading = true
this.showMoreInfo = false
// 通过id查询项目详情
if(!param.situationId) {
queryCommonProjectById({ id: param.situationId }).then(res => {
if (!param.situationId) {
queryCommonProjectById({id: param.situationId}).then(res => {
if (res.success) {
console.log(res.result, 'res.result')
// 到账信息
@@ -803,8 +821,8 @@ export default {
getSingUpUserInfoFunc(param) {
return new Promise(resolve => {
// 存在报名信息
if(param.situationId) {
getSingUpUserInfo({ id: param.situationId }).then(res => {
if (param.situationId) {
getSingUpUserInfo({id: param.situationId}).then(res => {
if (res.success) {
this.situationInfo = res.result
} else {
@@ -859,7 +877,7 @@ export default {
queryMeetingInfoById(id) {
return new Promise(resolve => {
let result = {}
getMeetInfoById({ id }).then(res => {
getMeetInfoById({id}).then(res => {
if (res.success) {
result = res.result
}
@@ -935,6 +953,7 @@ export default {
.ant-col {
display: flex;
}
label {
flex-shrink: 0;
}
@@ -1081,14 +1100,20 @@ h3.title::before {
}
// 多个酒店联系人及手机号 换行显示
.mul-row-row{
.mul-row-row {
display: flex;
clear: both;
}
.mul-row-content{
.mul-row-content {
display: block;
.content{
.content {
display: block;
}
}
.m-l-10 {
margin-left: 10px;
}
</style>
src/views/meetingActivity/modules/CooperativeForm.vue
+249
View File
@@ -0,0 +1,249 @@
<template>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row class="item-title">个人信息</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="参会企业" :labelCol="labelCol"
:wrapperCol="wrapperCol">
<a-input placeholder="请输入参会企业"
v-decorator="['companyName']"
:maxLength='50'
disabled
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入姓名"
v-decorator="['companyContactName']"
:maxLength='50'
disabled
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入手机号"
v-decorator="['phone']"
:maxLength='50'
disabled
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group disabled v-decorator="['identity']">
<a-radio :value="1">嘉宾</a-radio>
<a-radio :value="2">参会人</a-radio>
<a-radio :value="3">内部企业</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="嘉宾类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group disabled v-decorator="['guestType']">
<a-radio :value="1">VIP</a-radio>
<a-radio :value="2">演讲嘉宾</a-radio>
<a-radio :value="3">特邀嘉宾</a-radio>
<a-radio :value="4">合作伙伴</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row class="item-title">行程信息</a-row>
<a-row :gutter="24">
<a-col :xxl="8" :xl="12" :sm="24" >
<a-form-item label="抵达时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date placeholder="请选择抵达时间" style="width: 100%;" v-decorator="['arrivalTime',validatorRules.arrivalTime]"
:trigger-change="true"
:disabled-date="disabledArrivalTimeEndDate"
show-type="day"
date-format="YYYY-MM-DD"/>
</a-form-item>
</a-col>
<!--送站选择是才显示-->
<a-col :xxl="8" :xl="12" :sm="24" >
<a-form-item label="离开时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date placeholder="请选择离开时间" style="width: 100%;" v-decorator="['departureTime',validatorRules.departureTime]"
:trigger-change="true"
:disabled-date="disabledDepartureTimeEndDate"
show-type="day"
date-format="YYYY-MM-DD"/>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="sendBool">
<a-form-item label="离开站" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入离开站"
@change="event => event.target.value = event.target.value.trim()" :maxLength="50"
v-decorator="[ 'departureStation',validatorRules.departureStation]"></a-input>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="sendBool">
<a-form-item label="离开班次" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入离开班次"
@change="event => event.target.value = event.target.value.trim()" :maxLength="50"
v-decorator="[ 'departureShift',validatorRules.departureShift]"></a-input>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
</template>
<script>
import JDate from '@comp/jero/JDate'
import moment from 'moment'
import {httpAction} from '@api/manage'
export default {
name: 'CooperativeForm',
components:{
JDate,
},
data() {
return {
form: this.$form.createForm(this),
confirmLoading:false,
haveMealBool:false,
pickUpBool:false,
sendBool:false,
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: {
departureTime:{
rules: [{ required: false, message: '请选择离开时间' }],
validateTrigger: 'change'
},
arrivalTime:{
rules: [{ required: false, message: '请选择抵达时间' }],
validateTrigger: 'change'
}
},
url:{
edit:'/meeting/payMeetingSituation/editGuestInfo'
}
}
},
methods:{
moment,
handleOk() {
const that = this
this.form.validateFields((err, values) => {
if (!err) {
that.confirmLoading = true
let url = this.url.edit
const formData = Object.assign({}, values)
formData.id = this.model.id
httpAction(url, formData, 'post').then(res => {
if (res.success) {
that.$message.success('编辑成功')
that.$emit('ok')
that.confirmLoading = false
} else {
this.$message.warn(res.message)
}
}).finally(() => {
that.confirmLoading = false
})
}
})
},
initForm(record){
this.model = Object.assign({},record)
this.form.resetFields()
this.form.setFieldsValue({
'companyName':record.companyName,
'companyContactName':record.companyContactName,
'phone':record.phone,
'identity':record.identity,
'guestType':record.guestType,
'arrivalTime':record.arrivalTime,
'departureTime':record.departureTime,
})
},
/*
* 离开时间禁用
* */
disabledDepartureTimeEndDate(endValue) {
const startValueTemp = this.form.getFieldValue('arrivalTime')
const startValue = startValueTemp && moment(startValueTemp, 'YYYY-MM-DD')
if (!endValue || !startValue) {
return false
}
return startValue.valueOf() > endValue.valueOf()
},
/*
* 抵达时间禁用
* */
disabledArrivalTimeEndDate(endValue) {
const startValueTemp = this.form.getFieldValue('departureTime')
const startValue = startValueTemp && moment(startValueTemp, 'YYYY-MM-DD')
if (!endValue || !startValue) {
return false
}
return startValue.valueOf() < endValue.valueOf() - 86400000
},
}
}
</script>
<style scoped lang="less">
.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;
}
}
</style>
src/views/meetingActivity/modules/EditSignUpInfo.vue
+124
View File
@@ -0,0 +1,124 @@
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
switchFullscreen
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<vip-form ref="vipForm" v-if="model.guestType === 1" @ok="handleCancel"></vip-form>
<speak-guest-form ref="speakGuestForm" @ok="handleCancel" v-if="model.guestType === 2"></speak-guest-form>
<teyao-guest-form ref="teyaoGuestForm" @ok="handleCancel" v-if="model.guestType === 3"></teyao-guest-form>
<cooperative-form ref="cooperativeForm" @ok="handleCancel" v-if="model.guestType === 4"></cooperative-form>
</j-modal>
</template>
<script>
import VipForm from '@views/meetingActivity/modules/VipForm'
import SpeakGuestForm from '@views/meetingActivity/modules/SpeakGuestForm'
import TeyaoGuestForm from '@views/meetingActivity/modules/TeyaoGuestForm'
import CooperativeForm from '@views/meetingActivity/modules/CooperativeForm'
export default {
name: 'EditSignUpInfo',
data() {
return {
title: '编辑报名信息',
width: 1100,
visible: false,
confirmLoading: false,
form: this.$form.createForm(this),
model: {},
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: {
projectName: {
rules: [{required: true, message: '请输入会员项目'}],
validateTrigger: 'blur'
},
},
url: {
add: '',
edit: '',
}
}
},
components: {
VipForm,
SpeakGuestForm,
TeyaoGuestForm,
CooperativeForm
},
methods: {
open(record) {
this.visible = true
console.log(record)
this.model = Object.assign({}, record)
setTimeout(() => {
this.initForm()
},500)
},
initForm(){
switch (this.model.guestType) {
case 1 :
this.$refs.vipForm && this.$refs.vipForm.initForm(this.model)
break
case 2 :
this.$refs.speakGuestForm && this.$refs.speakGuestForm.initForm(this.model)
break
case 3 :
this.$refs.teyaoGuestForm && this.$refs.teyaoGuestForm.initForm(this.model)
break
case 4 :
this.$refs.cooperativeForm && this.$refs.cooperativeForm.initForm(this.model)
break
}
},
close() {
this.visible = false
},
handleOk() {
switch (this.model.guestType) {
case 1 :
this.$refs.vipForm && this.$refs.vipForm.handleOk()
break
case 2 :
this.$refs.speakGuestForm && this.$refs.speakGuestForm.handleOk()
break
case 3 :
this.$refs.teyaoGuestForm && this.$refs.teyaoGuestForm.handleOk()
break
case 4 :
this.$refs.cooperativeForm && this.$refs.cooperativeForm.handleOk()
break
}
this.visible = true
},
handleCancel() {
this.close()
}
}
}
</script>
<style scoped lang="less">
</style>
src/views/meetingActivity/modules/SpeakGuestForm.vue
+517
View File
@@ -0,0 +1,517 @@
<template>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row class="item-title">个人信息</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="参会企业" :labelCol="labelCol"
:wrapperCol="wrapperCol">
<a-input placeholder="请输入参会企业"
v-decorator="['companyName']"
:maxLength='50'
disabled
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入姓名"
v-decorator="['companyContactName']"
:maxLength='50'
disabled
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入手机号"
v-decorator="['phone']"
:maxLength='50'
disabled
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group disabled v-decorator="['identity']">
<a-radio :value="1">嘉宾</a-radio>
<a-radio :value="2">参会人</a-radio>
<a-radio :value="3">内部企业</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="嘉宾类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group disabled v-decorator="['guestType']">
<a-radio :value="1">VIP</a-radio>
<a-radio :value="2">演讲嘉宾</a-radio>
<a-radio :value="3">特邀嘉宾</a-radio>
<a-radio :value="4">合作伙伴</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row class="item-title">演讲信息</a-row>
<a-row :gutter="24">
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="演讲题目" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入演讲题目"
@change="event => event.target.value = event.target.value.trim()" :maxLength="50"
v-decorator="['speechTopic']"></a-input>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="演讲ppt" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-upload v-decorator="['speechPpt']" :return-id="true"></j-upload>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="照片" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-image-upload v-decorator="['photo']" :return-id="true"></j-image-upload>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col>
<a-form-item label="个人简介" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
<a-textarea
placeholder="请输入个人简介"
:auto-size="{ minRows: 3, maxRows: 6 }"
v-decorator="['profile']"
:maxLength='200'
@change="e => {e.target.value = (e.target.value + '').trim()}"/>
</a-form-item>
</a-col>
</a-row>
<a-row class="item-title">用餐信息</a-row>
<a-row :gutter="24">
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="是否用餐" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['haveMeals',validatorRules.haveMealBools]"
@change="selecthaveMealBools">
<a-radio :value="1">是</a-radio>
<a-radio :value="0">否</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
<!--选择了用餐才会出现-->
<a-col :xxl="8" :xl="12" :sm="24" v-if="haveMealBool">
<a-form-item label="是否回民" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['huiPeople',validatorRules.huiPeople]">
<a-radio :value="1">是</a-radio>
<a-radio :value="0">否</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row class="item-title">行程信息</a-row>
<a-row :gutter="24">
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="是否需要接站" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['pickUp',validatorRules.pickUp]" @change="changePickup">
<a-radio :value="1">是</a-radio>
<a-radio :value="0">否</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :xxl="8" :xl="12" :sm="24" v-if="pickUpBool">
<a-form-item label="抵达时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date placeholder="请选择抵达时间" style="width: 100%;" v-decorator="['arrivalTime',validatorRules.arrivalTime]"
:trigger-change="true"
:disabled-date="disabledArrivalTimeEndDate"
show-type="day"
date-format="YYYY-MM-DD"/>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="pickUpBool">
<a-form-item label="到达站" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入到达站"
@change="event => event.target.value = event.target.value.trim()" :maxLength="50"
v-decorator="[ 'destination',validatorRules.destination]"></a-input>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="pickUpBool">
<a-form-item label="到达班次" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入到达班次"
@change="event => event.target.value = event.target.value.trim()" :maxLength="50"
v-decorator="[ 'arrivalShift',validatorRules.arrivalShift]"></a-input>
</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">
<a-radio-group v-decorator="['deliveryStation',validatorRules.deliveryStation]"
@change="changeSend">
<a-radio :value="1">是</a-radio>
<a-radio :value="0">否</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<!--送站选择是才显示-->
<a-col :xxl="8" :xl="12" :sm="24" v-if="sendBool">
<a-form-item label="离开时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date placeholder="请选择离开时间" style="width: 100%;" v-decorator="['departureTime',validatorRules.departureTime]"
:trigger-change="true"
:disabled-date="disabledDepartureTimeEndDate"
show-type="day"
date-format="YYYY-MM-DD"/>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="sendBool">
<a-form-item label="离开站" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入离开站"
@change="event => event.target.value = event.target.value.trim()" :maxLength="50"
v-decorator="[ 'departureStation',validatorRules.departureStation]"></a-input>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="sendBool">
<a-form-item label="离开班次" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入离开班次"
@change="event => event.target.value = event.target.value.trim()" :maxLength="50"
v-decorator="[ 'departureShift',validatorRules.departureShift]"></a-input>
</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">
<a-input placeholder="请输入同行人"
:maxLength='50'
@change="event => event.target.value = event.target.value.trim()"
v-decorator="[ 'peer']"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" style="transform: translateX(-4px)">
<a-col>
<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>
</a-form>
</a-spin>
</template>
<script>
import JUpload from '@comp/signUpForm/JUpload'
import JImageUpload from '@comp/jero/JImageUpload'
import JDate from '@comp/jero/JDate'
import moment from 'moment'
import pick from 'lodash.pick'
import {httpAction} from '@api/manage'
export default {
name: 'SpeakGuestForm',
components:{
JUpload,
JImageUpload,
JDate,
},
data() {
return {
form: this.$form.createForm(this),
confirmLoading:false,
haveMealBool:false,
pickUpBool:false,
sendBool:false,
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: {
haveMealBools: {
rules: [{ required: true, message: '请选择是否用餐' }],
validateTrigger: 'change'
},
huiPeople: {
rules: [{ required: true, message: '请选择是否回民' }],
validateTrigger: 'change'
},
pickUp: {
rules: [{ required: true, message: '请选择是否需要接站' }],
validateTrigger: 'change'
},
departureTime:{
rules: [{ required: true, message: '请选择离开时间' }],
validateTrigger: 'change'
},
departureStation:{
rules: [{ required: true, message: '请输入离开站' }],
validateTrigger: 'blur'
},
arrivalShift:{
rules: [{ required: true, message: '请输入到达班次' }],
validateTrigger: 'blur'
},
deliveryStation: {
rules: [{ required: true, message: '请选择是否需要送站' }],
validateTrigger: 'change'
},
arrivalTime:{
rules: [{ required: true, message: '请选择抵达时间' }],
validateTrigger: 'change'
},
destination:{
rules: [{ required: true, message: '请输入到达站' }],
validateTrigger: 'blur'
},
departureShift:{
rules: [{ required: true, message: '请输入离开班次' }],
validateTrigger: 'blur'
},
},
url:{
edit:'/meeting/payMeetingSituation/editGuestInfo'
}
}
},
methods:{
moment,
handleOk() {
const that = this
this.form.validateFields((err, values) => {
if (!err) {
that.confirmLoading = true
let url = this.url.edit
const formData = Object.assign({}, values)
formData.id = this.model.id
httpAction(url, formData, 'post').then(res => {
if (res.success) {
that.$message.success('编辑成功')
that.$emit('ok')
that.confirmLoading = false
} else {
this.$message.warn(res.message)
}
}).finally(() => {
that.confirmLoading = false
})
}
})
},
initForm(record){
this.model = Object.assign({},record)
this.form.resetFields()
this.form.setFieldsValue({
'companyName':record.companyName,
'companyContactName':record.companyContactName,
'phone':record.phone,
'identity':record.identity,
'guestType':record.guestType,
})
// 是否用餐的显示
if (record.haveMeals === 1) {
this.haveMealBool = true
this.$nextTick(() => {
// 是否回民回显
this.form.setFieldsValue(pick(record,
'huiPeople'
))
})
} else if (record.haveMeals === 0) {
this.haveMealBool = false
}
// 是否接站
if (record.pickUp === 1) {
this.pickUpBool = true
// 抵达时间 到达站 到达班次
this.$nextTick(() => {
this.form.setFieldsValue(pick(record,
'arrivalTime',
'destination',
'arrivalShift'
))
})
} else if (record.pickUp === 0) {
this.pickUpBool = false
}
// 是否送站
if (record.deliveryStation === 1) {
this.sendBool = true
this.$nextTick(() => {
// 离开时间 离开站 离开班次
this.form.setFieldsValue(pick(record,
'departureTime',
'departureStation',
'departureShift'
))
})
} else if (record.pickUp === 0) {
this.sendBool = false
}
console.log(record, 'record')
this.$nextTick(() => {
// 身份类型是嘉宾 内部企业只渲染 住店 抵达时间 离开时间
this.form.setFieldsValue(pick(record,
'speechTopic',
'speechPpt',
'photo',
'profile',
'haveMeals',
'checkInHotel',
'pickUp',
'deliveryStation',
'peer',
'remark'
))
})
},
/*
* 选择是否用餐
* */
selecthaveMealBools(e) {
if (e.target.value === 1) {
this.haveMealBool = true
} else {
this.haveMealBool = false
}
},
/*
* 选择是否送站
* */
changeSend(e) {
if (e.target.value === 1) {
this.sendBool = true
} else {
this.sendBool = false
}
},
/*
* 选择是否接站
* */
changePickup(e) {
if (e.target.value === 1) {
this.pickUpBool = true
} else {
this.pickUpBool = false
}
},
/*
* 离开酒店时间禁用
* */
disabledEndDate(endValue) {
const startValueTemp = this.form.getFieldValue('inHotelTime')
const startValue = startValueTemp && moment(startValueTemp, 'YYYY-MM-DD')
if (!endValue || !startValue) {
return false
}
return startValue.valueOf() > endValue.valueOf()
},
/*
* 入住酒店时间禁用
* */
disabledStartDate(endValue){
const startValueTemp = this.form.getFieldValue('outHotelTime')
const startValue = startValueTemp && moment(startValueTemp, 'YYYY-MM-DD')
if (!endValue || !startValue) {
return false
}
return startValue.valueOf() < endValue.valueOf() - 86400000
},
/*
* 离开时间禁用
* */
disabledDepartureTimeEndDate(endValue) {
const startValueTemp = this.form.getFieldValue('arrivalTime')
const startValue = startValueTemp && moment(startValueTemp, 'YYYY-MM-DD')
if (!endValue || !startValue) {
return false
}
return startValue.valueOf() > endValue.valueOf()
},
/*
* 抵达时间禁用
* */
disabledArrivalTimeEndDate(endValue) {
const startValueTemp = this.form.getFieldValue('departureTime')
const startValue = startValueTemp && moment(startValueTemp, 'YYYY-MM-DD')
if (!endValue || !startValue) {
return false
}
return startValue.valueOf() < endValue.valueOf() - 86400000
},
}
}
</script>
<style scoped lang="less">
.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;
}
}
</style>
src/views/meetingActivity/modules/TeyaoGuestForm.vue
+486
View File
@@ -0,0 +1,486 @@
<template>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row class="item-title">个人信息</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="参会企业" :labelCol="labelCol"
:wrapperCol="wrapperCol">
<a-input placeholder="请输入参会企业"
v-decorator="['companyName']"
:maxLength='50'
disabled
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入姓名"
v-decorator="['companyContactName']"
:maxLength='50'
disabled
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入手机号"
v-decorator="['phone']"
:maxLength='50'
disabled
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group disabled v-decorator="['identity']">
<a-radio :value="1">嘉宾</a-radio>
<a-radio :value="2">参会人</a-radio>
<a-radio :value="3">内部企业</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="嘉宾类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group disabled v-decorator="['guestType']">
<a-radio :value="1">VIP</a-radio>
<a-radio :value="2">演讲嘉宾</a-radio>
<a-radio :value="3">特邀嘉宾</a-radio>
<a-radio :value="4">合作伙伴</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row class="item-title">用餐信息</a-row>
<a-row :gutter="24">
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="是否用餐" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['haveMeals',validatorRules.haveMealBools]"
@change="selecthaveMealBools">
<a-radio :value="1">是</a-radio>
<a-radio :value="0">否</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
<!--选择了用餐才会出现-->
<a-col :xxl="8" :xl="12" :sm="24" v-if="haveMealBool">
<a-form-item label="是否回民" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['huiPeople',validatorRules.huiPeople]">
<a-radio :value="1">是</a-radio>
<a-radio :value="0">否</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row class="item-title">行程信息</a-row>
<a-row :gutter="24">
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="是否需要接站" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['pickUp',validatorRules.pickUp]" @change="changePickup">
<a-radio :value="1">是</a-radio>
<a-radio :value="0">否</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :xxl="8" :xl="12" :sm="24" v-if="pickUpBool">
<a-form-item label="抵达时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date placeholder="请选择抵达时间" style="width: 100%;" v-decorator="['arrivalTime',validatorRules.arrivalTime]"
:trigger-change="true"
:disabled-date="disabledArrivalTimeEndDate"
show-type="day"
date-format="YYYY-MM-DD"/>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="pickUpBool">
<a-form-item label="到达站" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入到达站"
@change="event => event.target.value = event.target.value.trim()" :maxLength="50"
v-decorator="[ 'destination',validatorRules.destination]"></a-input>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="pickUpBool">
<a-form-item label="到达班次" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入到达班次"
@change="event => event.target.value = event.target.value.trim()" :maxLength="50"
v-decorator="[ 'arrivalShift',validatorRules.arrivalShift]"></a-input>
</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">
<a-radio-group v-decorator="['deliveryStation',validatorRules.deliveryStation]"
@change="changeSend">
<a-radio :value="1">是</a-radio>
<a-radio :value="0">否</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<!--送站选择是才显示-->
<a-col :xxl="8" :xl="12" :sm="24" v-if="sendBool">
<a-form-item label="离开时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date placeholder="请选择离开时间" style="width: 100%;" v-decorator="['departureTime',validatorRules.departureTime]"
:trigger-change="true"
:disabled-date="disabledDepartureTimeEndDate"
show-type="day"
date-format="YYYY-MM-DD"/>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="sendBool">
<a-form-item label="离开站" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入离开站"
@change="event => event.target.value = event.target.value.trim()" :maxLength="50"
v-decorator="[ 'departureStation',validatorRules.departureStation]"></a-input>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="sendBool">
<a-form-item label="离开班次" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入离开班次"
@change="event => event.target.value = event.target.value.trim()" :maxLength="50"
v-decorator="[ 'departureShift',validatorRules.departureShift]"></a-input>
</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">
<a-input placeholder="请输入同行人"
:maxLength='50'
@change="event => event.target.value = event.target.value.trim()"
v-decorator="[ 'peer']"></a-input>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
</template>
<script>
import JDate from '@comp/jero/JDate'
import moment from 'moment'
import pick from 'lodash.pick'
import {httpAction} from '@api/manage'
export default {
name: 'TeyaoGuestForm',
components:{
JDate,
},
data() {
return {
form: this.$form.createForm(this),
confirmLoading:false,
haveMealBool:false,
pickUpBool:false,
sendBool:false,
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: {
haveMealBools: {
rules: [{ required: true, message: '请选择是否用餐' }],
validateTrigger: 'change'
},
huiPeople: {
rules: [{ required: true, message: '请选择是否回民' }],
validateTrigger: 'change'
},
checkinHotel: {
rules: [{ required: true, message: '请选择是否住酒店' }],
validateTrigger: 'change'
},
inHotelTime:{
rules: [{ required: true, message: '请选择入住酒店时间' }],
validateTrigger: 'change'
},
outHotelTime:{
rules: [{ required: true, message: '请选择离店时间' }],
validateTrigger: 'change'
},
roomLayout:{
rules: [{ required: true, message: '请输入房型' }],
validateTrigger: 'blur'
},
pickUp: {
rules: [{ required: true, message: '请选择是否需要接站' }],
validateTrigger: 'change'
},
departureTime:{
rules: [{ required: true, message: '请选择离开时间' }],
validateTrigger: 'change'
},
departureStation:{
rules: [{ required: true, message: '请输入离开站' }],
validateTrigger: 'blur'
},
arrivalShift:{
rules: [{ required: true, message: '请输入到达班次' }],
validateTrigger: 'blur'
},
deliveryStation: {
rules: [{ required: true, message: '请选择是否需要送站' }],
validateTrigger: 'change'
},
arrivalTime:{
rules: [{ required: true, message: '请选择抵达时间' }],
validateTrigger: 'change'
},
destination:{
rules: [{ required: true, message: '请输入到达站' }],
validateTrigger: 'blur'
},
departureShift:{
rules: [{ required: true, message: '请输入离开班次' }],
validateTrigger: 'blur'
},
},
url:{
edit:'/meeting/payMeetingSituation/editGuestInfo'
}
}
},
methods:{
moment,
handleOk() {
const that = this
this.form.validateFields((err, values) => {
if (!err) {
that.confirmLoading = true
let url = this.url.edit
const formData = Object.assign({}, values)
formData.id = this.model.id
httpAction(url, formData, 'post').then(res => {
if (res.success) {
that.$message.success('编辑成功')
that.$emit('ok')
that.confirmLoading = false
} else {
this.$message.warn(res.message)
}
}).finally(() => {
that.confirmLoading = false
})
}
})
},
initForm(record){
this.model = Object.assign({},record)
this.form.resetFields()
this.form.setFieldsValue({
'companyName':record.companyName,
'companyContactName':record.companyContactName,
'phone':record.phone,
'identity':record.identity,
'guestType':record.guestType,
})
// 是否用餐的显示
if (record.haveMeals === 1) {
this.haveMealBool = true
this.$nextTick(() => {
// 是否回民回显
this.form.setFieldsValue(pick(record,
'huiPeople'
))
})
} else if (record.haveMeals === 0) {
this.haveMealBool = false
}
// 是否住酒店
if (record.checkInHotel === 1) {
this.inHotelBool = true
// 入住酒店回显 离店时间回显 房型回显
this.$nextTick(() => {
// 身份类型是嘉宾 内部企业只渲染 住店 抵达时间 离开时间
this.form.setFieldsValue(pick(record,
'inHotelTime',
'outHotelTime',
'roomLayout'
))
})
} else if (record.checkInHotel === 0) {
this.inHotelBool = false
}
// 是否接站
if (record.pickUp === 1) {
this.pickUpBool = true
// 抵达时间 到达站 到达班次
this.$nextTick(() => {
this.form.setFieldsValue(pick(record,
'arrivalTime',
'destination',
'arrivalShift'
))
})
} else if (record.pickUp === 0) {
this.pickUpBool = false
}
// 是否送站
if (record.deliveryStation === 1) {
this.sendBool = true
this.$nextTick(() => {
// 离开时间 离开站 离开班次
this.form.setFieldsValue(pick(record,
'departureTime',
'departureStation',
'departureShift'
))
})
} else if (record.pickUp === 0) {
this.sendBool = false
}
this.$nextTick(() => {
this.form.setFieldsValue(pick(record,
'haveMeals',
'checkInHotel',
'pickUp',
'deliveryStation',
'peer',
'remark'
))
})
},
/*
* 选择是否用餐
* */
selecthaveMealBools(e) {
if (e.target.value === 1) {
this.haveMealBool = true
} else {
this.haveMealBool = false
}
},
/*
* 选择是否送站
* */
changeSend(e) {
if (e.target.value === 1) {
this.sendBool = true
} else {
this.sendBool = false
}
},
/*
* 选择是否接站
* */
changePickup(e) {
if (e.target.value === 1) {
this.pickUpBool = true
} else {
this.pickUpBool = false
}
},
/*
* 离开酒店时间禁用
* */
disabledEndDate(endValue) {
const startValueTemp = this.form.getFieldValue('inHotelTime')
const startValue = startValueTemp && moment(startValueTemp, 'YYYY-MM-DD')
if (!endValue || !startValue) {
return false
}
return startValue.valueOf() > endValue.valueOf()
},
/*
* 入住酒店时间禁用
* */
disabledStartDate(endValue){
const startValueTemp = this.form.getFieldValue('outHotelTime')
const startValue = startValueTemp && moment(startValueTemp, 'YYYY-MM-DD')
if (!endValue || !startValue) {
return false
}
return startValue.valueOf() < endValue.valueOf() - 86400000
},
/*
* 离开时间禁用
* */
disabledDepartureTimeEndDate(endValue) {
const startValueTemp = this.form.getFieldValue('arrivalTime')
const startValue = startValueTemp && moment(startValueTemp, 'YYYY-MM-DD')
if (!endValue || !startValue) {
return false
}
return startValue.valueOf() > endValue.valueOf()
},
/*
* 抵达时间禁用
* */
disabledArrivalTimeEndDate(endValue) {
const startValueTemp = this.form.getFieldValue('departureTime')
const startValue = startValueTemp && moment(startValueTemp, 'YYYY-MM-DD')
if (!endValue || !startValue) {
return false
}
return startValue.valueOf() < endValue.valueOf() - 86400000
},
}
}
</script>
<style scoped lang="less">
.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;
}
}
</style>
src/views/meetingActivity/modules/VipForm.vue
+596
View File
@@ -0,0 +1,596 @@
<template>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row class="item-title">个人信息</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="参会企业" :labelCol="labelCol"
:wrapperCol="wrapperCol">
<a-input placeholder="请输入参会企业"
v-decorator="['companyName']"
:maxLength='50'
disabled
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入姓名"
v-decorator="['companyContactName']"
:maxLength='50'
disabled
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入手机号"
v-decorator="['phone']"
:maxLength='50'
disabled
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group disabled v-decorator="['identity']">
<a-radio :value="1">嘉宾</a-radio>
<a-radio :value="2">参会人</a-radio>
<a-radio :value="3">内部企业</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="嘉宾类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group disabled v-decorator="['guestType']">
<a-radio :value="1">VIP</a-radio>
<a-radio :value="2">演讲嘉宾</a-radio>
<a-radio :value="3">特邀嘉宾</a-radio>
<a-radio :value="4">合作伙伴</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row class="item-title">演讲信息</a-row>
<a-row :gutter="24">
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="演讲题目" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入演讲题目"
@change="event => event.target.value = event.target.value.trim()" :maxLength="50"
v-decorator="['speechTopic']"></a-input>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="演讲ppt" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-upload v-decorator="['speechPpt']" :return-id="true"></j-upload>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="照片" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-image-upload v-decorator="['photo']" :return-id="true"></j-image-upload>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col>
<a-form-item label="个人简介" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
<a-textarea
placeholder="请输入个人简介"
:auto-size="{ minRows: 3, maxRows: 6 }"
v-decorator="['profile']"
:maxLength='200'
@change="e => {e.target.value = (e.target.value + '').trim()}"/>
</a-form-item>
</a-col>
</a-row>
<a-row class="item-title">用餐信息</a-row>
<a-row :gutter="24">
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="是否用餐" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['haveMeals',validatorRules.haveMealBools]"
@change="selecthaveMealBools">
<a-radio :value="1">是</a-radio>
<a-radio :value="0">否</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
<!--选择了用餐才会出现-->
<a-col :xxl="8" :xl="12" :sm="24" v-if="haveMealBool">
<a-form-item label="是否回民" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['huiPeople',validatorRules.huiPeople]">
<a-radio :value="1">是</a-radio>
<a-radio :value="0">否</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row class="item-title">住店信息</a-row>
<a-row :gutter="24">
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="是否住酒店" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['checkInHotel',validatorRules.checkinHotel]"
@change="changeHotel">
<a-radio :value="1">是</a-radio>
<a-radio :value="0">否</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<!--入住酒店选择是才显示-->
<a-col :xxl="8" :xl="12" :sm="24" v-if="inHotelBool">
<a-form-item label="入住酒店时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date v-decorator="['inHotelTime',validatorRules.inHotelTime]" :trigger-change="true" show-type="day" :disabled-date="disabledStartDate"
placeholder="请选择入住酒店时间"></j-date>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="inHotelBool">
<a-form-item label="离店时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date :disabled-date="disabledEndDate" :trigger-change="true" show-type="day"
v-decorator="['outHotelTime',validatorRules.outHotelTime]" placeholder="请选择离店时间"></j-date>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="inHotelBool">
<a-form-item label="房型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input @change="event => event.target.value = event.target.value.trim()"
:maxLength="50"
v-decorator="['roomLayout',validatorRules.roomLayout]"
placeholder="请输入房型"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row class="item-title">行程信息</a-row>
<a-row :gutter="24">
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="是否需要接站" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['pickUp',validatorRules.pickUp]" @change="changePickup">
<a-radio :value="1">是</a-radio>
<a-radio :value="0">否</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :xxl="8" :xl="12" :sm="24" v-if="pickUpBool">
<a-form-item label="抵达时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date placeholder="请选择抵达时间" style="width: 100%;" v-decorator="['arrivalTime',validatorRules.arrivalTime]"
:trigger-change="true"
:disabled-date="disabledArrivalTimeEndDate"
show-type="day"
date-format="YYYY-MM-DD"/>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="pickUpBool">
<a-form-item label="到达站" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入到达站"
@change="event => event.target.value = event.target.value.trim()" :maxLength="50"
v-decorator="[ 'destination',validatorRules.destination]"></a-input>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="pickUpBool">
<a-form-item label="到达班次" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入到达班次"
@change="event => event.target.value = event.target.value.trim()" :maxLength="50"
v-decorator="[ 'arrivalShift',validatorRules.arrivalShift]"></a-input>
</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">
<a-radio-group v-decorator="['deliveryStation',validatorRules.deliveryStation]"
@change="changeSend">
<a-radio :value="1">是</a-radio>
<a-radio :value="0">否</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<!--送站选择是才显示-->
<a-col :xxl="8" :xl="12" :sm="24" v-if="sendBool">
<a-form-item label="离开时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date placeholder="请选择离开时间" style="width: 100%;" v-decorator="['departureTime',validatorRules.departureTime]"
:trigger-change="true"
:disabled-date="disabledDepartureTimeEndDate"
show-type="day"
date-format="YYYY-MM-DD"/>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="sendBool">
<a-form-item label="离开站" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入离开站"
@change="event => event.target.value = event.target.value.trim()" :maxLength="50"
v-decorator="[ 'departureStation',validatorRules.departureStation]"></a-input>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="sendBool">
<a-form-item label="离开班次" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入离开班次"
@change="event => event.target.value = event.target.value.trim()" :maxLength="50"
v-decorator="[ 'departureShift',validatorRules.departureShift]"></a-input>
</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">
<a-input placeholder="请输入同行人"
:maxLength='50'
@change="event => event.target.value = event.target.value.trim()"
v-decorator="[ 'peer']"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" style="transform: translateX(-4px)">
<a-col>
<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>
</a-form>
</a-spin>
</template>
<script>
import JUpload from '@comp/signUpForm/JUpload'
import JImageUpload from '@comp/jero/JImageUpload'
import JDate from '@comp/jero/JDate'
import moment from 'moment'
import pick from 'lodash.pick'
import {httpAction} from '@api/manage'
export default {
name: 'VIPForm',
components:{
JUpload,
JImageUpload,
JDate,
},
data() {
return {
form: this.$form.createForm(this),
confirmLoading:false,
haveMealBool:false,
inHotelBool:false,
pickUpBool:false,
sendBool:false,
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: {
haveMealBools: {
rules: [{ required: true, message: '请选择是否用餐' }],
validateTrigger: 'change'
},
huiPeople: {
rules: [{ required: true, message: '请选择是否回民' }],
validateTrigger: 'change'
},
checkinHotel: {
rules: [{ required: true, message: '请选择是否住酒店' }],
validateTrigger: 'change'
},
inHotelTime:{
rules: [{ required: true, message: '请选择入住酒店时间' }],
validateTrigger: 'change'
},
outHotelTime:{
rules: [{ required: true, message: '请选择离店时间' }],
validateTrigger: 'change'
},
roomLayout:{
rules: [{ required: true, message: '请输入房型' }],
validateTrigger: 'blur'
},
pickUp: {
rules: [{ required: true, message: '请选择是否需要接站' }],
validateTrigger: 'change'
},
departureTime:{
rules: [{ required: true, message: '请选择离开时间' }],
validateTrigger: 'change'
},
departureStation:{
rules: [{ required: true, message: '请输入离开站' }],
validateTrigger: 'blur'
},
arrivalShift:{
rules: [{ required: true, message: '请输入到达班次' }],
validateTrigger: 'blur'
},
deliveryStation: {
rules: [{ required: true, message: '请选择是否需要送站' }],
validateTrigger: 'change'
},
arrivalTime:{
rules: [{ required: true, message: '请选择抵达时间' }],
validateTrigger: 'change'
},
destination:{
rules: [{ required: true, message: '请输入到达站' }],
validateTrigger: 'blur'
},
departureShift:{
rules: [{ required: true, message: '请输入离开班次' }],
validateTrigger: 'blur'
},
},
url:{
edit:'/meeting/payMeetingSituation/editGuestInfo'
}
}
},
methods:{
moment,
handleOk() {
const that = this
this.form.validateFields((err, values) => {
if (!err) {
that.confirmLoading = true
let url = this.url.edit
const formData = Object.assign({}, values)
formData.id = this.model.id
httpAction(url, formData, 'post').then(res => {
if (res.success) {
that.$message.success('编辑成功')
that.$emit('ok')
that.confirmLoading = false
} else {
this.$message.warn(res.message)
}
}).finally(() => {
that.confirmLoading = false
})
}
})
},
initForm(record){
this.model = Object.assign({},record)
this.form.resetFields()
this.form.setFieldsValue({
'companyName':record.companyName,
'companyContactName':record.companyContactName,
'phone':record.phone,
'identity':record.identity,
'guestType':record.guestType,
})
// 是否用餐的显示
if (record.haveMeals === 1) {
this.haveMealBool = true
this.$nextTick(() => {
// 是否回民回显
this.form.setFieldsValue(pick(record,
'huiPeople'
))
})
} else if (record.haveMeals === 0) {
this.haveMealBool = false
}
// 是否住酒店
if (record.checkInHotel === 1) {
this.inHotelBool = true
// 入住酒店回显 离店时间回显 房型回显
this.$nextTick(() => {
// 身份类型是嘉宾 内部企业只渲染 住店 抵达时间 离开时间
this.form.setFieldsValue(pick(record,
'inHotelTime',
'outHotelTime',
'roomLayout'
))
})
} else if (record.checkInHotel === 0) {
this.inHotelBool = false
}
// 是否接站
if (record.pickUp === 1) {
this.pickUpBool = true
// 抵达时间 到达站 到达班次
this.$nextTick(() => {
this.form.setFieldsValue(pick(record,
'arrivalTime',
'destination',
'arrivalShift'
))
})
} else if (record.pickUp === 0) {
this.pickUpBool = false
}
// 是否送站
if (record.deliveryStation === 1) {
this.sendBool = true
this.$nextTick(() => {
// 离开时间 离开站 离开班次
this.form.setFieldsValue(pick(record,
'departureTime',
'departureStation',
'departureShift'
))
})
} else if (record.pickUp === 0) {
this.sendBool = false
}
console.log(record, 'record')
this.$nextTick(() => {
// 身份类型是嘉宾 内部企业只渲染 住店 抵达时间 离开时间
this.form.setFieldsValue(pick(record,
'speechTopic',
'speechPpt',
'photo',
'profile',
'haveMeals',
'checkInHotel',
'pickUp',
'deliveryStation',
'peer',
'remark'
))
})
},
/*
* 选择是否用餐
* */
selecthaveMealBools(e) {
if (e.target.value === 1) {
this.haveMealBool = true
} else {
this.haveMealBool = false
}
},
/*
* 选择是否入住酒店
* */
changeHotel(e) {
if (e.target.value === 1) {
this.inHotelBool = true
} else {
this.inHotelBool = false
}
},
/*
* 选择是否送站
* */
changeSend(e) {
if (e.target.value === 1) {
this.sendBool = true
} else {
this.sendBool = false
}
},
/*
* 选择是否接站
* */
changePickup(e) {
if (e.target.value === 1) {
this.pickUpBool = true
} else {
this.pickUpBool = false
}
},
/*
* 离开酒店时间禁用
* */
disabledEndDate(endValue) {
const startValueTemp = this.form.getFieldValue('inHotelTime')
const startValue = startValueTemp && moment(startValueTemp, 'YYYY-MM-DD')
if (!endValue || !startValue) {
return false
}
return startValue.valueOf() > endValue.valueOf()
},
/*
* 入住酒店时间禁用
* */
disabledStartDate(endValue){
const startValueTemp = this.form.getFieldValue('outHotelTime')
const startValue = startValueTemp && moment(startValueTemp, 'YYYY-MM-DD')
if (!endValue || !startValue) {
return false
}
return startValue.valueOf() < endValue.valueOf() - 86400000
},
/*
* 离开时间禁用
* */
disabledDepartureTimeEndDate(endValue) {
const startValueTemp = this.form.getFieldValue('arrivalTime')
const startValue = startValueTemp && moment(startValueTemp, 'YYYY-MM-DD')
if (!endValue || !startValue) {
return false
}
return startValue.valueOf() > endValue.valueOf()
},
/*
* 抵达时间禁用
* */
disabledArrivalTimeEndDate(endValue) {
const startValueTemp = this.form.getFieldValue('departureTime')
const startValue = startValueTemp && moment(startValueTemp, 'YYYY-MM-DD')
if (!endValue || !startValue) {
return false
}
return startValue.valueOf() < endValue.valueOf() - 86400000
},
}
}
</script>
<style scoped lang="less">
.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;
}
}
</style>