596 lines
20 KiB
Vue
596 lines
20 KiB
Vue
<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> |