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

add 起草组报名页面部分

Browse Source
This commit is contained in:
danshihao
2024-01-11 11:32:25 +08:00
parent ea03c4c5f9
commit 6d747ba506
8 changed files with 1524 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/development_address_config.js
+3
View File
@@ -19,6 +19,9 @@ window._CONFIG['singUpQRCodeURL'] = 'http://bxxt.hzwlsoft.com/signupentrance'
// 页面显示用的会议报名网址-pc端使用
window._CONFIG["singInQRCodHref"]= 'http://10.0.1.9:21826/signupentrance'
// 起草组报名页面-报名二维码网址 -生成小程序二维码使用
window._CONFIG['singUpDraftTeamQRCodeURL'] = 'http://bxxt.hzwlsoft.com/signupdraftteamentrance'
// 路由转发 -会员系统的路由转发前缀
window._CONFIG["memberURL"] = "/memberApi";
// 会员系统的静态文件的地址
src/config/router.config.js
+13
View File
@@ -3,6 +3,8 @@ import { UserLayout, TabLayout } from '@/components/layouts'
import SignUpEntrance from "@views/signUp/SignUpEntrance"
import SignUpPage from "@views/signUp/SignUpPage"
import LookExpressInfo from "@views/expressInfo/LookExpressInfo"
import SignUpDraftTeamEntrance from '@views/draftTeam/SignUpDraftTeamEntrance'
import SignUpDraftTeamPage from '@views/draftTeam/SignUpDraftTeamPage'
/**
* 走菜单，走权限控制
@@ -84,6 +86,17 @@ export const constantRouterMap = [
path: "/lookExpressInfo",
component: LookExpressInfo,
hidden: true
},
// 起草组报名入口和报名页面
{
path: "/signUpDraftTeamEntrance",
component: SignUpDraftTeamEntrance,
hidden: true,
},
{
path: "/signUpDraftTeamPage",
component: SignUpDraftTeamPage,
hidden: true,
}
]
src/views/draftTeam/DraftTeam.vue
+6 -11
View File
@@ -74,6 +74,7 @@
<project-detail-modal ref="projectDetail" @openContractModule="handleOpenContractModule"></project-detail-modal>
<mine-contract-module :contract-id="contractId" :visible.sync="contractModuleVisible"
@openProjectDetail="openDetailModal"></mine-contract-module>
<draft-team-modal ref="draftTeamModal" @ok="modalFormOk"/>
</div>
</template>
<script>
@@ -81,10 +82,11 @@ import { JeroListMixin } from '@/mixins/JeroListMixin'
import ProjectDetailModal from '@views/MessagePage/ProjectDetailModal'
import MineContractModule from '@views/mineContract/modules/MineContractModule'
import JYearDate from '@comp/jero/JYearDate'
import DraftTeamModal from '@views/draftTeam/modules/DraftTeamModal'
export default {
name: 'DraftTeam',
components: { ProjectDetailModal, MineContractModule, JYearDate },
components: {DraftTeamModal, ProjectDetailModal, MineContractModule, JYearDate },
mixins: [JeroListMixin],
data() {
return {
@@ -150,7 +152,7 @@ export default {
contractId: null,
contractModuleVisible: false,
url: {
list: '/project/payWorkingGroupSubitem/queryCompanyPageList'
list: '/drafting/payDraftingGroupSubitem/queryCompanyPageList'
},
disableMixinCreated: true
}
@@ -182,18 +184,11 @@ export default {
this.contractModuleVisible = true
},
/**
* 缴费凭证
* 联系人
* @param record
*/
handleContacts(record) {
this.$router.push({
path: '/MessagePage/PaymentVoucher',
query: {
projectId: record.id,
projectName: record.chargeProject,
projectType: 2
}
})
this.$refs.draftTeamModal.edit(record)
},
/**
* 跳转至详情
src/views/draftTeam/SignUpDraftTeamEntrance.vue
+221
View File
@@ -0,0 +1,221 @@
<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">
起草组信息
</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>
<a-row>
<label>起草组报名：</label>
</a-row>
<a-row>
<img :src="singUpQRCode" class="qr-code"/>
</a-row>
<a-button type="primary" style="margin-left: 19px;" @click="toSingUpPage">立即报名
</a-button>
</section>
</div>
</section>
<!--内容end-->
</div>
</template>
<script>
import {getAction} from '@api/manage'
import {createQcCode} from '@api/incomePaymentsApi'
export default {
name: 'SignUpDraftTeamEntrance',
data () {
return {
// 当前起草组信息
currentDraftTempInfo: {},
// 报名二维码
singUpQRCode: '',
url: {
info: '/drafting/payDraftingGroup/queryById'
}
}
},
created() {
getAction(this.url.info, { id: this.$route.query.id }).then(res => {
if (res.success) {
this.currentDraftTempInfo = res.result || {}
}
})
},
async mounted() {
let codeUrl = `${ window._CONFIG['singUpDraftTeamQRCodeURL'] }?id=${this.meetingId}`
this.singUpQRCode = await this.generateQRCode(codeUrl)
},
methods: {
/*
* 立即报名
* */
toSingUpPage() {
this.$router.push({
path: '/signUpDraftTeamPage',
query: {
id: this.$route.query.id
}
})
},
/*
* 生成二维码
* */
generateQRCode(params) {
return new Promise(resolve => {
let code = ''
createQcCode({contact: params}).then(res => {
if (res.success) {
code = res.result
} else {
console.error('生成二维码失败')
}
}).finally(() => {
resolve(code)
})
})
},
}
}
</script>
<style scoped lang="less">
.flex-col {
display: flex;
label {
flex-shrink: 0;
}
}
.header {
text-align: center;
position: relative;
user-select: none;
-webkit-user-seletct: none;
-moz-user-seletct: none;
-ms-user-seletct: 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: center;
width: 100%;
background: rgba(8, 182, 175, .1);
color: #333;
font-family: PingFang SC, PingFang SC-Medium;
letter-spacing: 1px;
font-weight: 500;
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;
}
}
}
.qr-code {
width: 140px;
height: 140px;
}
.word-beak {
word-break: break-all;
}
.block-span{
display: block;
}
</style>
src/views/draftTeam/SignUpDraftTeamPage.vue
+438
View File
@@ -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>
src/views/draftTeam/modules/DraftTeamModal.vue
+399
View File
@@ -0,0 +1,399 @@
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
switchFullscreen
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row>
<a-col>
<a-form-item label="成员单位" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
<company-select placeholder="请选择成员单位"
v-decorator="['chargeCompany',validatorRules.chargeCompany]"
:disabled="disabledCompany"
@change="companyChange"
:maxLength='50'>
</company-select>
</a-form-item>
</a-col>
</a-row>
<template
v-if="model.payWorkingGroupSubItemContactsList && model.payWorkingGroupSubItemContactsList.length > 0">
<a-row v-for="(item, index) in model.payWorkingGroupSubItemContactsList" :key="index + ''">
<a-col :xl="12" :sm="24">
<a-form-item :label="`企业联系人${index + 1}`" :labelCol="labelCol" :wrapperCol="wrapperCol">
<select-contacts :selected-company="selectedCompany"
:init-contacts="model.payWorkingGroupSubItemContactsList[index]"
:placeholder="`请选择企业联系人${index + 1}`"
v-decorator="[`payWorkingGroupSubItemContactsList[${index}].contactsId`, {rules: [{ required: index === 0, validator: index === 0 ? validateContactRequired : validateContact }],validateTrigger: 'change'}]"
:maxLength='50'
:ref="`selectContacts${index}`"
@ok="addContactsOneOk"
@change="value => contactsChange(value, index)"></select-contacts>
</a-form-item>
</a-col>
<a-col :xl="9" :sm="20">
<!-- v-show="hasContactOne"-->
<a-form-item :label="`备注${index + 1}`" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
:placeholder="`请输入备注${index + 1}`"
v-decorator="[`payWorkingGroupSubItemContactsList[${index}].remarks`]"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}">
</a-input>
</a-form-item>
</a-col>
<a-col :xl="3" :sm="4">
<a-button type="link" class="contact-btn" @click="handleAddContact(index)">添加</a-button>
<a-button type="link" class="contact-btn del-btn" @click="handleDelContact(index)">删除</a-button>
</a-col>
</a-row>
</template>
</a-form>
</a-spin>
</j-modal>
</template>
<script>
import pick from 'lodash.pick'
import {httpAction} from '@api/manage'
import SelectContacts from '@comp/company/SelectContacts'
import CompanySelect from '@comp/company/CompanySelect'
export default {
name: 'DraftTeamModal',
components: {CompanySelect, SelectContacts},
data () {
return {
title: '操作',
width: 800,
visible: false,
confirmLoading: false,
form: this.$form.createForm(this),
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 8 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
},
remarksLabelCol: {
xs: { span: 24 },
sm: { span: 4 }
},
remarksWrapperCol: {
xs: { span: 24 },
sm: { span: 20 }
},
validatorRules: {
workingGroupId: {
rules: [{ required: true, message: '请选择工作组项目' }],
validateTrigger: 'change'
},
chargeCompany: {
rules: [{ required: true, validator: this.checkCompany }],
validateTrigger: 'change'
},
taxRate: {
rules: [{ required: true, message: '请选择税率' }],
validateTrigger: 'change', initialValue: '0.06'
},
contactsIdOne: {
rules: [{ required: true, message: '请选择企业联系人1' }],
validateTrigger: 'change'
},
contactsRepeat: {
rules: [{ required: false, validator: this.validateContact }],
validateTrigger: 'change'
}
},
selectedCompany: null, // 当前选中的企业
selectedContact1: null, // 编辑时的联系人
selectedContact2: null, // 编辑时的联系人
selectedContact3: null, // 编辑时的联系人
draftingGroupId: null,
disabledCompany: true, // 企业是否禁用
// 默认的联系人数据
defaultPayWorkingGroupSubItemContact: {
contactsId: undefined,
remarks: null,
name: null
}
}
},
methods: {
add() {
this.edit({})
},
edit(record) {
console.log(record)
// 回显选中的企业
record.chargeCompany = {
id: record.chargeCompanyId,
companyName: record.chargeCompanyTemporaryName
}
this.selectedCompany = record.chargeCompany
this.companyChange(this.selectedCompany)
this.form.resetFields()
this.model = Object.assign({}, JSON.parse(JSON.stringify(record)))
if (this.model.id) {
// 传给组件的init-contact值，需要id和name两个属性
this.model.payWorkingGroupSubItemContactsList && this.model.payWorkingGroupSubItemContactsList.forEach(item => {
item.name = item.contactsTemporaryName
})
} else {
// 新增处理默认显示的三个企业联系人
this.model.payWorkingGroupSubItemContactsList = []
this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
}
this.visible = true
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'chargeCompany', 'contactsIdOne', 'contactsIdTwo', 'contactsIdThree'))
})
},
close() {
this.$emit('close')
this.selectedCompany = null
// 清除选中联系人信息
this.selectedContact1 = null
this.selectedContact2 = null
this.selectedContact3 = null
// 清除企业、来款方式、合同号的限制
this.isAssociatedContract = false
// this.disabledCompany = false
// 清除联系人备注信息
// this.hasContactOne = false
// this.hasContactTwo = false
// this.hasContactThree = false
this.visible = false
this.model = Object.assign({}, {})
this.form.resetFields()
},
handleOk() {
if (this.confirmLoading) {
return
}
this.confirmLoading = true
const that = this
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
that.confirmLoading = true
values.chargeCompanyTemporaryName = values.chargeCompany.companyName
values.chargeCompanyId = values.chargeCompany.id
let httpurl = ''
let method = 'post'
if (!this.model.id) {
httpurl += this.url.add
} else {
httpurl += this.url.edit
}
if (this.draftingGroupId) {
values.draftingGroupId = this.draftingGroupId
}
// 企业联系人信息中将没有值的去掉
let haveValueContactArr = values.payWorkingGroupSubItemContactsList.filter(tt => tt.contactsId)
let obj = {
payWorkingGroupSubItemContactsList: haveValueContactArr
}
const formData = Object.assign(this.model, values, obj)
console.log('表单提交数据', formData)
httpAction(httpurl, formData, method).then((res) => {
if (res.success) {
that.$message.success(res.message)
that.$emit('ok')
that.close()
} else {
that.$message.warning(res.message)
}
}).finally(() => {
setTimeout(() => {
this.confirmLoading = false
}, 1000)
})
} else {
this.confirmLoading = false
}
})
},
handleCancel() {
this.close()
},
validateContactRequired(rule, value, callback) {
if (value) {
callback()
}
callback('请选择企业联系人1')
},
addMailContactsOk() {
this.$refs.selectContacts1.getContactsList()
this.$refs.selectContacts2.getContactsList()
this.$refs.selectContacts3.getContactsList()
},
/**
* 校验企业联系人是否重复
* @param rule
* @param value
* @param callback
*/
validateContact(rule, value, callback) {
if (value) {
let contactsList = this.form.getFieldValue('payWorkingGroupSubItemContactsList')
let hasValueArr = contactsList.filter(tt => tt.contactsId === value)
if (hasValueArr.length <= 1) {
callback()
}
callback('请选择不同的联系人')
return
}
callback()
},
/**
* 企业必填校验
* @param rules
* @param value
* @param callback
*/
checkCompany(rules, value, callback) {
if (value.id && value.companyName) {
callback()
return
}
callback('请选择成员单位')
},
/**
* 选中企业变化，将联系人的值清空
* @param value
*/
companyChange(value) {
// 当前选中的企业和之前选中的企业一致，就不修改了
if (this.selectedCompany && value && this.selectedCompany.id === value.id) {
return
}
this.selectedCompany = value
// this.model.contactsIdOne = undefined
// this.model.contactsIdTwo = undefined
// this.model.contactsIdThree = undefined
// 处理默认显示的三个企业联系人
this.model.payWorkingGroupSubItemContactsList = []
this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'payWorkingGroupSubItemContactsList'))
})
},
/**
* 企业联系人1、邮寄联系人联动
* @param value
* @param index
*/
contactsChange(value, index) {
let formData = this.form.getFieldValue('payWorkingGroupSubItemContactsList')
formData[index].contactsId = value
// 如果没有值，清空对应的备注
if (!value) {
formData[index].remarks = null
} else {
// 如果值和初始值不一致，则清除备注
if (this.model.payWorkingGroupSubItemContactsList[index].contactsId !== value) {
formData[index].remarks = null
}
}
this.$nextTick(() => {
this.form.setFieldsValue({ payWorkingGroupSubItemContactsList: formData })
this.form.validateFields(['payWorkingGroupSubItemContactsList'])
})
},
/**
* 添加联系人
* @param index
*/
handleAddContact(index) {
if (this.model.payWorkingGroupSubItemContactsList.length >= 10) {
this.$message.warn('最多添加十个企业联系人')
return
}
let obj = {
contactsId: undefined,
remarks: null
}
this.model.payWorkingGroupSubItemContactsList.splice(index + 1, 0, obj)
this.$forceUpdate()
let formData = this.form.getFieldValue('payWorkingGroupSubItemContactsList')
formData.splice(index + 1, 0, obj)
this.$nextTick(() => {
this.form.setFieldsValue({ payWorkingGroupSubItemContactsList: formData })
})
},
/**
* 删除联系人
* @param index
*/
handleDelContact(index) {
if (this.model.payWorkingGroupSubItemContactsList.length === 1) {
this.$message.warn('最少需要一个企业联系人')
return
}
this.model.payWorkingGroupSubItemContactsList.splice(index, 1)
let formData = this.form.getFieldValue('payWorkingGroupSubItemContactsList')
formData.splice(index, 1)
this.$nextTick(() => {
this.form.setFieldsValue({ payWorkingGroupSubItemContactsList: formData })
})
},
// 下拉框的搜索
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
)
},
}
}
</script>
<style scoped lang="less">
.charge-notice-no {
width: 100%;
/deep/ .ant-radio-wrapper {
display: inline-block;
width: 100%;
span.ant-radio + * {
display: inline-block;
width: 100%;
span {
vertical-align: bottom;
display: inline-block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
.contact-btn {
display: inline-block;
margin: 0 8px;
padding: 0;
height: 40px;
}
.del-btn {
color: #ff4d4f
}
</style>
src/views/workTeam/WorkTeam.vue
+10 -2
View File
@@ -64,6 +64,7 @@
<!-- 缴费凭证-->
<span slot="action" class="action-span-cell" slot-scope="text,record">
<a @click="paymentVoucher(record)" :disabled="Number(record.receivableAmount) === 0 || $store.getters.userInfo.roleCode === '3' ">申请开票</a>
<a @click="handleContacts(record)">联系人</a>
</span>
</a-table>
</div>
@@ -74,6 +75,8 @@
<project-detail-modal ref="projectDetail" @openContractModule="handleOpenContractModule"></project-detail-modal>
<mine-contract-module :contract-id="contractId" :visible.sync="contractModuleVisible"
@openProjectDetail="openDetailModal"></mine-contract-module>
<!-- 联系人弹框 -->
<work-team-modal ref="workTeamModal" @ok="modalFormOk"/>
</div>
</template>
<script>
@@ -81,10 +84,11 @@ import { JeroListMixin } from '@/mixins/JeroListMixin'
import ProjectDetailModal from '@views/MessagePage/ProjectDetailModal'
import MineContractModule from '@views/mineContract/modules/MineContractModule'
import JYearDate from '@comp/jero/JYearDate'
import WorkTeamModal from '@views/workTeam/modules/WorkTeamModal'
export default {
name: 'WorkTeam',
components: { ProjectDetailModal, MineContractModule, JYearDate },
components: {WorkTeamModal, ProjectDetailModal, MineContractModule, JYearDate },
mixins: [JeroListMixin],
data() {
return {
@@ -142,7 +146,7 @@ export default {
title: '操作',
dataIndex: 'action',
align: 'center',
width: 100,
width: 200,
fixed: 'right',
scopedSlots: { customRender: 'action' }
}
@@ -165,6 +169,10 @@ export default {
this.loadData()
},
methods: {
// 联系人弹框
handleContacts (record) {
this.$refs.workTeamModal.edit(record)
},
toMeeting() {
this.$router.push({
path: '/meetingActivity/MeetingActivity',
src/views/workTeam/modules/WorkTeamModal.vue
+434
View File
@@ -0,0 +1,434 @@
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
switchFullscreen
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row>
<a-col>
<a-form-item label="成员单位" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
<company-select placeholder="请选择成员单位"
v-decorator="['chargeCompany',validatorRules.chargeCompany]"
:disabled="disabledCompany"
@change="companyChange"
:maxLength='50'>
</company-select>
</a-form-item>
</a-col>
</a-row>
<template
v-if="model.payWorkingGroupSubItemContactsList && model.payWorkingGroupSubItemContactsList.length > 0">
<a-row v-for="(item, index) in model.payWorkingGroupSubItemContactsList" :key="index + ''">
<a-col :xl="12" :sm="24">
<a-form-item :label="`企业联系人${index + 1}`" :labelCol="labelCol" :wrapperCol="wrapperCol">
<select-contacts :selected-company="selectedCompany"
:init-contacts="model.payWorkingGroupSubItemContactsList[index]"
:placeholder="`请选择企业联系人${index + 1}`"
v-decorator="[`payWorkingGroupSubItemContactsList[${index}].contactsId`, {rules: [{ required: index === 0, validator: index === 0 ? validateContactRequired : validateContact }],validateTrigger: 'change'}]"
:maxLength='50'
:ref="`selectContacts${index}`"
@ok="addContactsOneOk"
@change="value => contactsChange(value, index)"></select-contacts>
</a-form-item>
</a-col>
<a-col :xl="9" :sm="20">
<!-- v-show="hasContactOne"-->
<a-form-item :label="`备注${index + 1}`" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
:placeholder="`请输入备注${index + 1}`"
v-decorator="[`payWorkingGroupSubItemContactsList[${index}].remarks`]"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}">
</a-input>
</a-form-item>
</a-col>
<a-col :xl="3" :sm="4">
<a-button type="link" class="contact-btn" @click="handleAddContact(index)">添加</a-button>
<a-button type="link" class="contact-btn del-btn" @click="handleDelContact(index)">删除</a-button>
</a-col>
</a-row>
</template>
<a-row>
<a-col :xl="12" :sm="24">
<a-form-item label="邮寄联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<select-contacts :selected-company="selectedCompany"
:init-contacts="selectedMailContact"
placeholder="请选择邮寄联系人"
v-decorator="['mailContactsId',validatorRules.mailContactsId]"
:maxLength='50'
ref="selectMailContacts">
</select-contacts>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
</j-modal>
</template>
<script>
import pick from 'lodash.pick'
import {httpAction} from '@api/manage'
import SelectContacts from '@comp/company/SelectContacts'
import CompanySelect from '@comp/company/CompanySelect'
export default {
name: 'WorkTeamModal',
components: {CompanySelect, SelectContacts},
data () {
return {
title: '操作',
width: 800,
visible: false,
confirmLoading: false,
form: this.$form.createForm(this),
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 8 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
},
remarksLabelCol: {
xs: { span: 24 },
sm: { span: 4 }
},
remarksWrapperCol: {
xs: { span: 24 },
sm: { span: 20 }
},
validatorRules: {
workingGroupId: {
rules: [{ required: true, message: '请选择工作组项目' }],
validateTrigger: 'change'
},
chargeCompany: {
rules: [{ required: true, validator: this.checkCompany }],
validateTrigger: 'change'
},
taxRate: {
rules: [{ required: true, message: '请选择税率' }],
validateTrigger: 'change', initialValue: '0.06'
},
contactsIdOne: {
rules: [{ required: true, message: '请选择企业联系人1' }],
validateTrigger: 'change'
},
contactsRepeat: {
rules: [{ required: false, validator: this.validateContact }],
validateTrigger: 'change'
},
mailContactsId: {
rules: [{ required: true, message: '请选择邮寄联系人' }],
validateTrigger: 'blur'
}
},
selectedCompany: null, // 当前选中的企业
selectedContact1: null, // 编辑时的联系人
selectedContact2: null, // 编辑时的联系人
selectedContact3: null, // 编辑时的联系人
selectedMailContact: null, // 编辑时的邮寄联系人
workingGroupId: null,
disabledCompany: true, // 企业是否禁用
// 默认的联系人数据
defaultPayWorkingGroupSubItemContact: {
contactsId: undefined,
remarks: null,
name: null
}
}
},
methods: {
add() {
this.edit({})
},
edit(record) {
console.log(record)
// 回显选中的企业
record.chargeCompany = {
id: record.chargeCompanyId,
companyName: record.chargeCompanyTemporaryName
}
this.selectedCompany = record.chargeCompany
this.companyChange(this.selectedCompany)
this.form.resetFields()
this.model = Object.assign({}, JSON.parse(JSON.stringify(record)))
if (this.model.id) {
// 传给组件的init-contact值，需要id和name两个属性
this.model.payWorkingGroupSubItemContactsList && this.model.payWorkingGroupSubItemContactsList.forEach(item => {
item.name = item.contactsTemporaryName
})
this.selectedMailContact = {
id: this.model.mailContactsTemporaryId,
name: this.model.mailContactsTemporaryName
}
} else {
// 新增处理默认显示的三个企业联系人
this.model.payWorkingGroupSubItemContactsList = []
this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
}
this.visible = true
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'chargeCompany', 'contactsIdOne', 'contactsIdTwo', 'contactsIdThree', 'mailContactsId'))
})
},
close() {
this.$emit('close')
this.selectedCompany = null
// 清除选中联系人信息
this.selectedContact1 = null
this.selectedContact2 = null
this.selectedContact3 = null
this.selectedMailContact = null
// 清除企业、来款方式、合同号的限制
this.isAssociatedContract = false
// this.disabledCompany = false
// 清除联系人备注信息
// this.hasContactOne = false
// this.hasContactTwo = false
// this.hasContactThree = false
this.visible = false
this.model = Object.assign({}, {})
this.form.resetFields()
},
handleOk() {
if (this.confirmLoading) {
return
}
// this.confirmLoading = true
const that = this
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
// that.confirmLoading = true
values.chargeCompanyTemporaryName = values.chargeCompany.companyName
values.chargeCompanyId = values.chargeCompany.id
let httpurl = '/project/payWorkingGroupSubitem/editCompany'
let method = 'post'
if (this.workingGroupId) {
values.workingGroupId = this.workingGroupId
}
// 企业联系人信息中将没有值的去掉
let haveValueContactArr = values.payWorkingGroupSubItemContactsList.filter(tt => tt.contactsId)
let obj = {
payWorkingGroupSubItemContactsList: haveValueContactArr
}
const formData = Object.assign(this.model, values, obj)
console.log('表单提交数据', formData)
return
httpAction(httpurl, formData, method).then((res) => {
if (res.success) {
that.$message.success(res.message)
that.$emit('ok')
that.close()
} else {
that.$message.warning(res.message)
}
}).finally(() => {
setTimeout(() => {
this.confirmLoading = false
}, 1000)
})
} else {
this.confirmLoading = false
}
})
},
handleCancel() {
this.close()
},
validateContactRequired(rule, value, callback) {
if (value) {
callback()
}
callback('请选择企业联系人1')
},
/**
* 在新增成功后重新获取联系人列表
*/
addContactsOneOk() {
this.$refs.selectMailContacts.getContactsList()
},
addMailContactsOk() {
this.$refs.selectContacts1.getContactsList()
this.$refs.selectContacts2.getContactsList()
this.$refs.selectContacts3.getContactsList()
},
/**
* 校验企业联系人是否重复
* @param rule
* @param value
* @param callback
*/
validateContact(rule, value, callback) {
if (value) {
let contactsList = this.form.getFieldValue('payWorkingGroupSubItemContactsList')
let hasValueArr = contactsList.filter(tt => tt.contactsId === value)
if (hasValueArr.length <= 1) {
callback()
}
callback('请选择不同的联系人')
return
}
callback()
},
/**
* 企业必填校验
* @param rules
* @param value
* @param callback
*/
checkCompany(rules, value, callback) {
if (value.id && value.companyName) {
callback()
return
}
callback('请选择成员单位')
},
/**
* 选中企业变化，将联系人的值清空
* @param value
*/
companyChange(value) {
// 当前选中的企业和之前选中的企业一致，就不修改了
if (this.selectedCompany && value && this.selectedCompany.id === value.id) {
return
}
this.selectedCompany = value
// this.model.contactsIdOne = undefined
// this.model.contactsIdTwo = undefined
// this.model.contactsIdThree = undefined
// 处理默认显示的三个企业联系人
this.model.payWorkingGroupSubItemContactsList = []
this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
this.model.mailContactsId = undefined
this.selectedMailContact = null
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'mailContactsId', 'payWorkingGroupSubItemContactsList'))
})
},
/**
* 企业联系人1、邮寄联系人联动
* @param value
* @param index
*/
contactsChange(value, index) {
let formData = this.form.getFieldValue('payWorkingGroupSubItemContactsList')
formData[index].contactsId = value
// 如果没有值，清空对应的备注
if (!value) {
formData[index].remarks = null
} else {
// 如果值和初始值不一致，则清除备注
if (this.model.payWorkingGroupSubItemContactsList[index].contactsId !== value) {
formData[index].remarks = null
}
let mailContact = Object.values(this.form.getFieldValue(['mailContactsId']))[0]
// 邮寄联系人非undefined时赋值
if (!mailContact && index === 0) {
this.model.mailContactsId = value
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'mailContactsId'))
})
}
}
this.$nextTick(() => {
this.form.setFieldsValue({ payWorkingGroupSubItemContactsList: formData })
this.form.validateFields(['payWorkingGroupSubItemContactsList'])
})
},
/**
* 添加联系人
* @param index
*/
handleAddContact(index) {
if (this.model.payWorkingGroupSubItemContactsList.length >= 10) {
this.$message.warn('最多添加十个企业联系人')
return
}
let obj = {
contactsId: undefined,
remarks: null
}
this.model.payWorkingGroupSubItemContactsList.splice(index + 1, 0, obj)
this.$forceUpdate()
let formData = this.form.getFieldValue('payWorkingGroupSubItemContactsList')
formData.splice(index + 1, 0, obj)
this.$nextTick(() => {
this.form.setFieldsValue({ payWorkingGroupSubItemContactsList: formData })
})
},
/**
* 删除联系人
* @param index
*/
handleDelContact(index) {
if (this.model.payWorkingGroupSubItemContactsList.length === 1) {
this.$message.warn('最少需要一个企业联系人')
return
}
this.model.payWorkingGroupSubItemContactsList.splice(index, 1)
let formData = this.form.getFieldValue('payWorkingGroupSubItemContactsList')
formData.splice(index, 1)
this.$nextTick(() => {
this.form.setFieldsValue({ payWorkingGroupSubItemContactsList: formData })
})
},
// 下拉框的搜索
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
)
},
}
}
</script>
<style scoped lang="less">
.charge-notice-no {
width: 100%;
/deep/ .ant-radio-wrapper {
display: inline-block;
width: 100%;
span.ant-radio + * {
display: inline-block;
width: 100%;
span {
vertical-align: bottom;
display: inline-block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
.contact-btn {
display: inline-block;
margin: 0 8px;
padding: 0;
height: 40px;
}
.del-btn {
color: #ff4d4f
}
</style>