Files
income_payments_client/src/views/incomePayments/meetManage/AddOrDetailMeet.vue
T
2021-09-15 15:51:32 +08:00

780 lines
27 KiB
Vue

<template>
<div>
<page-header-title :is-level-one="false" :level-two-title="title"></page-header-title>
<a-card :bordered="false">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<!-- 会议信息begin-->
<div class="item-title">会议信息</div>
<a-row :gutter="24">
<!--如果是工作组项目的会议维护跳转的 需要隐藏会议类型-->
<a-col :xxl="8" :xl="12" :sm="24" v-if="isWorkGroupMeetType">
<a-form-item label="会议类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag style="width: 100%" v-decorator="['meetingType',validatorRules.meetingType]"
@change="changeMeetingType"
:trigger-change="true" dict-code="meeting_type"
placeholder="请选择会议类型"></j-dict-select-tag>
</a-form-item>
</a-col>
<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="['meetingName',validateInviteCode.meetingName]"></a-input>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="召开时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-range-picker
@change="changeConvokeTime"
format="YYYY-MM-DD HH:mm:00"
:show-time="{ format: 'HH:mm' }"
v-decorator="['convokeTime',validatorRules.convokeTime]"
:trigger-change="true"
style="width: 100%"/>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="meetingType === '2' ">
<a-form-item label="标协会议类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag v-decorator="['tbMeetingType',validatorRules.tbMeetingType]" :trigger-change="true"
style="width: 100%" dict-code="standard_meeting_type"
placeholder="请选择标协会议类型"></j-dict-select-tag>
</a-form-item>
</a-col>
<!--工作组会议才有-->
<a-col :xxl="8" :xl="12" :sm="24" v-if="meetingType === '1' ">
<a-form-item label="工作组" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select placeholder="请选择工作组"
v-decorator="['workingGroupId',validatorRules.parentId]"
:maxLength='50'>
<a-select-option v-for="item in workGroupList" :key="item.id" :value="item.id">
{{ item.workingGroupProject }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-year-date v-decorator="['particularYear',validateInviteCode.particularYear]" placeholder="请选择年份"
style="width: 100%"></j-year-date>
</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='50'
v-decorator="[ 'estimatedNumber']"></a-input>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-if="meetingType === '2' ">
<a-form-item label="注册签到" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-range-picker
@change="changeSignTime"
format="YYYY-MM-DD HH:mm:00"
:show-time="{ format: 'HH:mm' }"
v-decorator="['signInTime',validatorRules.signInTime]"
:trigger-change="true"
style="width: 100%"/>
</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="['registerDeadline',validatorRules.registerDeadline]" :trigger-change="true"
date-format="YYYY-MM-DD HH:mm:ss" :show-time="true"/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :xxl='8' :xl="12" :sm="24">
<a-form-item label="召开地点" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-area-linkage
type="cascader"
placeholder="请选择省市"
v-decorator="['convokeLocale',validatorRules.convokeLocale]"
></j-area-linkage>
</a-form-item>
</a-col>
<a-col :xxl='8' :xl="12" :sm="24">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入详细地址"
class="address"
v-decorator="['address',validatorRules.address]"
@change="event => event.target.value = event.target.value.trim()"
:maxLength='50'
></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :xxl="18" :xl="18" :sm="24">
<a-form-item label="会议内容" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
<a-textarea
placeholder="请输入会议内容"
:auto-size="{ minRows: 3, maxRows: 6 }"
v-decorator="['meetingContent',validatorRules.meetingContent]"
:maxLength='200'
@change="e => {e.target.value = (e.target.value + '').trim()}"/>
</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">
<j-upload :return-id="true" v-decorator="[ 'meetingFiles']"></j-upload>
</a-form-item>
</a-col>
</a-row>
<!--会议信息end-->
<!--邀请码begin-->
<!-- 国际研讨会出现-->
<section v-if="meetingType === '3' ">
<div class="item-title">邀请码</div>
<a-row :gutter="24">
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="VIP" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入邀请码"
@change="event => event.target.value = event.target.value.trim()"
:maxLength='50'
v-decorator="['vipInvitationCode',validateInviteCode.invitationCode]"></a-input>
</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="event => event.target.value = event.target.value.trim()"
:maxLength='50'
v-decorator="[ 'speakerInvitationCode',validateInviteCode.invitationCode]"></a-input>
</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="event => event.target.value = event.target.value.trim()"
:maxLength='50'
v-decorator="[ 'guestInvitationCode',validateInviteCode.invitationCode]"></a-input>
</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="event => event.target.value = event.target.value.trim()"
:maxLength='50'
v-decorator="[ 'cooperativeInvitationCode',validateInviteCode.invitationCode]"></a-input>
</a-form-item>
</a-col>
</a-row>
</section>
<!--邀请码end-->
<!--会议费用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="{ xs: {span: 24},sm: {span: 16}}">
<a-input placeholder="请输入会议费用"
:maxLength='50'
@change="(e) => {e.target.value = e.target.value.replace(/[^0-9.]/g,'')}"
@blur="addZero"
v-decorator="[ 'meetingCosts',validatorRules.meetingCosts]"></a-input>
<span class="yuan">元/人</span>
</a-form-item>
</a-col>
<!-- 标协会议才有 -->
<a-col :xxl="8" :xl="12" :sm="24" v-if="meetingType === '2' ">
<a-form-item label="会议费用(标协会员)" :labelCol="{ xs: {span: 24},sm: {span: 8}}"
:wrapperCol="{ xs: {span: 24},xl:{span:14},sm: {span: 16}}">
<a-input placeholder="请输入会议费用"
:maxLength='50'
@change="(e) => {e.target.value = e.target.value.replace(/[^0-9.]/g,'')}"
v-decorator="[ 'meetingCostsVip',validatorRules.meetingCostsVip]"></a-input>
<span class="yuan">元/人</span>
</a-form-item>
</a-col>
</a-row>
<!--会议费用end-->
<!--联系方式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">
<select-principal placeholder="请选择会议负责人"
@change="selectPerson"
v-decorator="['directorId',validatorRules.directorId]"></select-principal>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入手机号"
disabled
:maxLength='11'
@change="(e) => {e.target.value = e.target.value.replace(/[^0-9.]/g,'')}"
v-decorator="['directorPhone']"></a-input>
</a-form-item>
</a-col>
<!--标协会议才有-->
<a-col :xxl="8" :xl="12" :sm="24" v-if="meetingType === '2' ">
<a-form-item label="酒店名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入酒店名称"
:maxLength='50'
@change="event => event.target.value = event.target.value.trim()"
v-decorator="['hotelName',validatorRules.hotelName]"></a-input>
</a-form-item>
</a-col>
<!--标协会议才有-->
<a-col :xxl="8" :xl="12" :sm="24" v-if="meetingType === '2' ">
<a-form-item label="酒店地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入酒店地址"
:maxLength='50'
@change="event => event.target.value = event.target.value.trim()"
v-decorator="[ 'hotelAddress',validatorRules.hotelAddress]"></a-input>
</a-form-item>
</a-col>
</a-row>
<!--标协会议-->
<section v-if="meetingType === '2'">
<a-row :gutter="24" v-for="(hotel, index) in model.hotelContactsList" :key="index">
<a-col :xxl="8" :xl="10" :md="12">
<a-form-item label="酒店联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
@change="event => event.target.value = event.target.value.trim()"
:maxLength="50"
v-decorator="['hotelContactsList['+index+'].hotelContacts', validatorRules.contactPerson]"
placeholder="请输入酒店联系人"></a-input>
</a-form-item>
</a-col>
<a-col :xxl="8" :xl="10" :md="12">
<a-form-item :wrapperCol="{xl:{span:17}}">
<a-input
@change="(e) => {e.target.value = e.target.value.replace(/[^0-9.]/g,'')}"
:maxLength="15"
v-decorator="['hotelContactsList['+index+'].hotelContactsPhone',validatorRules.telephoneNumber]"
placeholder="请输入联系人手机号"></a-input>
</a-form-item>
</a-col>
<a-col :xxl="2" :xl="4" :sm="6" style="transform: translateX(-130px);">
<a-form-item>
<a-button icon="plus" @click="addNew"></a-button>
<a-button icon="minus" @click="remove(index)" style="margin-left: 8px;"></a-button>
</a-form-item>
</a-col>
</a-row>
</section>
<a-row :gutter="24">
<a-col :xxl="18" :xl="18" :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>
<!--联系方式end-->
</a-form>
<div class="footer">
<a-button type="primary" @click="handleOk" class="submit" v-preventclick>发布</a-button>
<a-button @click="handleCancel">取消</a-button>
</div>
</a-spin>
</a-card>
</div>
</template>
<script>
import {getUserInfo, getMeetInfoById, getAllWorkProjects} from '@api/incomeMeetingApi'
import {isRepeat} from '@/utils/util'
import {httpAction} from '@api/manage'
import JDictSelectTag from '@comp/dict/JDictSelectTag'
import JYearDate from '@comp/jero/JYearDate'
import JUpload from '@comp/jero/JUpload'
// import JDate from "@comp/tools/JDate";
import JDate from '@comp/jero/JDate'
import SelectPrincipal from '@comp/company/SelectPrincipal'
import JAreaLinkage from '@comp/jero/JAreaLinkagePca'
import AreaPca from '@comp/_util/AreaPca'
import moment from 'moment'
import pick from 'lodash.pick'
import meetingValidate from '@views/incomePayments/meetManage/meetingValidate'
import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
import {checkMeetingName} from '@/utils/validateOnly'
import {addZero} from '@/utils/util'
export default {
name: 'AddOrDetailMeet',
components: {
JDictSelectTag,
JYearDate,
JUpload,
JDate,
SelectPrincipal,
JAreaLinkage,
PageHeaderTitle
},
data() {
return {
description: '新增会议',
title: '新增会议',
confirmLoading: false,
visible: false,
form: this.$form.createForm(this),
model: {},
labelCol: {
xxl: {span: 7},
xs: {span: 24},
sm: {span: 6}
},
wrapperCol: {
xxl: {span: 17},
xs: {span: 24},
sm: {span: 18}
},
remarksLabelCol: {
xxl: {span: 3},
xl: {span: 4},
xs: {span: 24},
sm: {span: 3}
},
remarksWrapperCol: {
xxl: {span: 21},
xl: {span: 20},
xs: {span: 24},
sm: {span: 21}
},
// 详细地址
address: '',
// 会议类型 新增时默认为其他会议
meetingType: '4',
validatorRules: meetingValidate,
validateInviteCode: {
invitationCode: {
rules: [
{required: true, validator: this.validateCode},
],
validateTrigger: ['blur']
},
meetingName: {
rules: [
{required: true, validator: this.validaeMeetingName},
],
validateTrigger: ['blur']
},
particularYear: {
rules: [
{required: true, validator: this.validateYear},
],
validateTrigger: ['blur', 'change'],
initialValue: this.$store.getters.currentYear
},
},
url: {
add: '/meeting/payMeeting/add',
edit: '/meeting/payMeeting/edit',
},
// 召开时间
newConvokeTime: '',
// 注册召开时间
newSignInTime: '',
// 工作组会议列表
workGroupList: []
}
},
computed: {
// 是否从工作组会议维护来的
isWorkGroupMeetType() {
if (this.$route.query.workingGroupProjectId) {
return false
} else {
return true
}
},
},
mounted() {
this.pcaData = new AreaPca()
// 编辑获取会议信息
if (this.$route.query.id) {
getMeetInfoById({id: this.$route.query.id}).then(res => {
if (res.success) {
this.edit(res.result)
}
})
}
},
methods: {
moment,
addZero,
/*
* 新增
* */
add() {
this.edit({})
},
/*
* 编辑
* */
edit(record) {
this.form.resetFields()
this.model = Object.assign({}, record)
let dateFormat = 'YYYY-MM-DD HH:mm:ss'
if (this.model.id) {
this.title = '编辑会议'
} else {
this.title = '新增会议'
}
// 修改会议类型 控制dom显示
this.meetingType = record.meetingType + ''
// 当为工作组会议的时候 需要获取工作组
if (this.meetingType === '1') {
this.getWorkSelectList()
}
// 召开时间回显
this.model.convokeTime = [moment(this.model.startTime, dateFormat), moment(this.model.endTime, dateFormat)]
// 注册签到时间回显
this.model.signInTime = [moment(this.model.startSignInTime, dateFormat), moment(this.model.endSignInTime, dateFormat)]
// 后端需要的召开时间
this.newConvokeTime = [this.model.startTime, this.model.endTime]
// 后端需要的注册签到时间
this.newSignInTime = [this.model.startSignInTime, this.model.endSignInTime]
this.$nextTick(() => {
// 加定时器是因为有可能赋值不成功
setTimeout(() => {
this.form.setFieldsValue(pick(this.model, 'meetingName', 'meetingType', 'convokeTime', 'particularYear', 'estimatedNumber', 'meetingFiles', 'registerDeadline', 'meetingContent', 'convokeLocale', 'address', 'meetingCosts', 'directorId', 'remark', 'directorPhone')), 200
})
// 如果是标协会议则回显 标协会议的字段
if (this.meetingType === '2') {
console.log('this.model', this.model)
this.form.setFieldsValue(pick(this.model, 'signInTime', 'hotelContactsList', 'tbMeetingType', 'meetingCostsVip', 'hotelName', 'hotelAddress'))
}
// 如果是工作组会议 赋值工作组
if (this.meetingType === '1') {
this.form.setFieldsValue(pick(this.model, 'workingGroupId',))
}
// 如果是国际研讨会则赋值邀请码
if (this.meetingType === '3') {
this.form.setFieldsValue(pick(this.model, 'vipInvitationCode', 'speakerInvitationCode', 'guestInvitationCode', 'cooperativeInvitationCode'))
}
})
},
/*
* 发布会议
* */
handleOk() {
const that = this
that.confirmLoading = true
this.form.validateFields((err, values) => {
if (!err) {
let httpurl = ''
let method = 'post'
if (that.model.id) {
httpurl = this.url.edit
} else {
httpurl = this.url.add
}
let placeName = values.convokeLocale
const formData = Object.assign(this.model, values, {venue: this.getPcaText(placeName)})
// 如果是工作会议维护跳转的需要加上会议类型为工作组会议和工作组id
if (!this.isWorkGroupMeetType) {
formData.meetingType = '1'
formData.workingGroupId = this.$route.query.workingGroupProjectId
}
// 转换召开时间
formData.startTime = this.newConvokeTime[0]
formData.endTime = this.newConvokeTime[1]
// 转换注册签到时间
if (values.signInTime) {
formData.startSignInTime = this.newSignInTime[0]
formData.endSignInTime = this.newSignInTime[1]
}
console.log('表单提交数据', formData)
httpAction(httpurl, formData, method).then((res) => {
if (res.success) {
that.$message.success(res.message)
that.confirmLoading = false
that.handleCancel()
} else {
that.$message.warning(res.message)
}
}).finally(() => {
})
}
})
},
/*
* 取消
* */
handleCancel() {
console.log('取消')
this.$router.go(-1)
},
/*
* 监听会议类型变化
* */
changeMeetingType(val) {
this.meetingType = val
// 如果是工作组会议就需要查询所有的工作组
if (val === '1') {
this.getWorkSelectList()
}
if (val === '2') {
this.model.hotelContactsList = [{
hotelContacts: '',
hotelContactsPhone: ''
}]
} else {
// eslint-disable-next-line
if (this.model.hasOwnProperty('hotelContactsList')) {
delete this.model.hotelContactsList
}
}
},
/*
* 会议负责人
* */
selectPerson(val) {
getUserInfo({id: val}).then(res => {
if (res.success) {
this.$nextTick(() => {
this.form.setFieldsValue({directorPhone: res.result.phone})
})
}
})
},
/*
* 添加酒店联系人
* */
addNew(index) {
if (this.model.hotelContactsList.length >= 5) {
this.$message.warning('最多添加5个酒店联系人')
return
}
const {form} = this
const obj = {
hotelContacts: '',
hotelContactsPhone: ''
}
const keys = form.getFieldValue('hotelContactsList')
// 增加数据后重新赋值
this.model.hotelContactsList.splice(index + 1, 0, obj)
keys.splice(index + 1, 0, obj)
this.$nextTick(() => {
form.setFieldsValue({
hotelContactsList: keys
})
})
},
/*
* 删减酒店联系人
* */
remove(k) {
// 如果长度是1的话则不进行删除操作
if (this.model.hotelContactsList.length === 1) {
return
}
const {form} = this
// // can use data-binding to get
const hotelContactsList = form.getFieldValue('hotelContactsList')
// 把循环的dom元素删除
this.model.hotelContactsList.splice(k, 1)
// 把绑定在dom里面的值删除
hotelContactsList.splice(k, 1)
this.$nextTick(() => {
// 重新赋值
form.setFieldsValue({
hotelContactsList: hotelContactsList
})
})
},
/*
* 召开地点吗转换
* */
getPcaText(code) {
return this.pcaData.getText(code)
},
/*
* 召开时间转化
* */
changeConvokeTime(date, dateString) {
this.newConvokeTime = dateString
},
/*
* 注册签到时间转化
* */
changeSignTime(date, dateString) {
this.newSignInTime = dateString
},
/*
* 校验邀请码
* */
validateCode(rule, value, callback) {
if (value === null || value === '' || value === undefined) {
callback(new Error('请输入邀请码'))
} else {
let codeObj = this.form.getFieldsValue(['cooperativeInvitationCode', 'vipInvitationCode', 'speakerInvitationCode', 'guestInvitationCode'])
const codeArr = Object.values(codeObj)
console.log('codearr', codeArr)
// 校验是否重复
if (isRepeat(codeArr)) {
callback('请填写不同的邀请码!')
} else {
callback()
}
}
},
/*
* 会议名称唯一校验
* */
validaeMeetingName(rule, value, callback) {
checkMeetingName(value, this.model.id).then(res => {
if (res.success) {
callback()
} else {
callback(res.code === 500 ? '会议名称已存在' : res)
}
})
},
/*
* 年份校验
* */
validateYear(rule, value, callback) {
if (value === undefined || value === '' || value === null) {
callback('请选择年份')
}
const year = new Date().getFullYear()
if (Number(value) < year) {
callback(`请选择${year}年或之后的年份`)
} else {
callback()
}
},
/*
* 获取所有的工作组
* */
getWorkSelectList() {
getAllWorkProjects().then(res => {
if (res.success) {
this.workGroupList = [...res.result]
}
})
},
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
/deep/ .ant-card-body {
padding-top: 0;
}
.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;
}
}
/* 新建会议 */
.project-base-info-title {
height: 50px;
line-height: 50px;
color: #666;
.back {
cursor: pointer;
font-size: 20px;
color: #666;
}
.title {
display: inline-block;
margin-left: 14px;
color: #666;
}
}
.line {
height: 1px;
background-color: #cccccc;
margin: 0 -24px;
}
.footer {
text-align: center;
}
.submit {
margin-right: 8px;
}
.yuan {
position: absolute;
right: -40px;
}
.add-icon {
height: 100%;
margin-right: 10px;
cursor: pointer;
}
.remove-icon {
height: 100%;
cursor: pointer;
}
.address {
transform: translate(4px, -4px);
}
</style>