397 lines
10 KiB
Vue
397 lines
10 KiB
Vue
<template>
|
||
<div class="meeting">
|
||
<div class="title">
|
||
<a-icon type="user"/>
|
||
<span class="my-meeting">我的会议</span>
|
||
<span class="download"><a-button icon="cloud-download" type="primary">资料下载</a-button></span>
|
||
</div>
|
||
<div class="content">
|
||
<section class="meeting—status">
|
||
<span>会议分类：</span>
|
||
<span @click="filterMeeting(item.key)" class="inactive-status"
|
||
:class="{'active-status':item.key === meetingKey}" v-for="item of meetingStatusArr"
|
||
:key="item.key">{{ item.value }}</span>
|
||
</section>
|
||
<!--查询区域begin-->
|
||
<div class="table-page-search-wrapper">
|
||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||
<a-row :gutter="24">
|
||
<a-col :xl="7" :lg="8" :md="8" :sm="24">
|
||
<a-form-item label="会议名称">
|
||
<a-input placeholder="请输入会议名称" v-model="queryParam.meetingName"></a-input>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xl="7" :lg="8" :md="8" :sm="24">
|
||
<a-form-item label="会议类型">
|
||
<j-dict-select-tag dict-code="meeting_type" placeholder="请选择会议类型"
|
||
v-model="queryParam.meetingType"></j-dict-select-tag>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xxl="7" :xl="10" :md="10" :sm="24">
|
||
<a-form-item label="提醒时间">
|
||
<j-date
|
||
placeholder="请选择开始日期"
|
||
class="query-group-cust"
|
||
v-model="queryParam.meetingStartTime"
|
||
:disabled-date="disabledStartDate">
|
||
</j-date>
|
||
<span class="query-group-split-cust"></span>
|
||
<j-date
|
||
placeholder="请选择结束日期"
|
||
class="query-group-cust"
|
||
v-model="queryParam.meetingEndTime"
|
||
:disabled-date="disabledEndDate">
|
||
</j-date>
|
||
</a-form-item>
|
||
</a-col>
|
||
|
||
<a-col :xl="7" :lg="8" :md="8" :sm="24">
|
||
<a-form-item label="会议状态">
|
||
<j-dict-select-tag dict-code="meeting_status" placeholder="请选择会议状态"
|
||
v-model="queryParam.meetingType"></j-dict-select-tag>
|
||
</a-form-item>
|
||
</a-col>
|
||
|
||
<a-col :xl="6" :lg="8" :md="8" :sm="24">
|
||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||
<a-button class="reset-button" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||
</span>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</div>
|
||
<!--查询区域end-->
|
||
<!--列表区域begin-->
|
||
<a-spin :spinning="loading">
|
||
<div class="list" v-if="tableData.length > 0">
|
||
<div class="item-meeting" v-for="(item,index) of tableData" :key="index">
|
||
<p class="item-meeting-meetingName">会议名称</p>
|
||
<p class="item-meeting-meetingCost"><span>￥</span>199.9</p>
|
||
<p class="item-meeting-img item-meeting-meetingDirector">
|
||
<img src="../../assets/meetingImgs/meeting-user.png"/>
|
||
张益达
|
||
</p>
|
||
<p class="item-meeting-img item-meeting-meetingAddress">
|
||
<img src="../../assets/meetingImgs/meeting-address.png"/>
|
||
天津是河西区花店给值过的高房价和
|
||
</p>
|
||
<p class="item-meeting-img item-meeting-meetingTime">
|
||
<img src="../../assets/meetingImgs/meeting-time.png"/>
|
||
2021124545454247
|
||
</p>
|
||
<p class="item-meeting-img item-meeting-meetingPaymode">
|
||
<img src="../../assets/meetingImgs/meeting_paymode.png"/>
|
||
缴费方式
|
||
<a-button type="primary" @click="uploadPaymentRecord">上传凭证</a-button>
|
||
</p>
|
||
<img class="meeting-img-status" src="../../assets/meetingImgs/no-start.png"/>
|
||
<!-- <img class="meeting-img-status" src="../../assets/meetingImgs/ing.png" />-->
|
||
<!-- <img class="meeting-img-status" src="../../assets/meetingImgs/end.png.png" />-->
|
||
</div>
|
||
<i></i>
|
||
<i></i>
|
||
<i></i>
|
||
<i></i>
|
||
<i></i>
|
||
</div>
|
||
<section v-else class="list">
|
||
<a-empty/>
|
||
</section>
|
||
</a-spin>
|
||
<!--列表区域end-->
|
||
<div class="fenye">
|
||
<!--分页-->
|
||
<a-pagination
|
||
v-model="current"
|
||
:page-size.sync="pageSize"
|
||
class="pagination"
|
||
show-size-changer
|
||
:show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"
|
||
:pageSizeOptions="['10','20','50','100']"
|
||
show-quick-jumper
|
||
:total="total"
|
||
@change="changePagination"
|
||
@showSizeChange="onShowSizeChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!--上传凭证-->
|
||
<upload-meeting-certificate-modal ref="upload"></upload-meeting-certificate-modal>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import JDictSelectTag from '@comp/dict/JDictSelectTag'
|
||
import {RangeDateMixin} from '@/mixins/RangeDateMixin'
|
||
import JDate from '@comp/tools/JDate'
|
||
import UploadMeetingCertificateModal from '@views/MessagePage/UploadMeetingCertificateModal'
|
||
import {getAction} from '@api/manage'
|
||
|
||
export default {
|
||
name: 'MeetingActivity',
|
||
mixins: [RangeDateMixin],
|
||
components: {
|
||
JDictSelectTag,
|
||
JDate,
|
||
UploadMeetingCertificateModal
|
||
},
|
||
data() {
|
||
return {
|
||
// 会议分类 全部 1 未开始 2 进行中 3 已结束 4
|
||
meetingStatusArr: [
|
||
{
|
||
key: '1',
|
||
value: '全部'
|
||
},
|
||
{
|
||
key: '2',
|
||
value: '未开始'
|
||
},
|
||
{
|
||
key: '3',
|
||
value: '进行中'
|
||
},
|
||
{
|
||
key: '4',
|
||
value: '已结束'
|
||
}
|
||
],
|
||
// 会议的key值 默认是全部
|
||
meetingKey: '1',
|
||
// 禁用时间的key值
|
||
dateKeyObj: {
|
||
beginKey: 'meetingStartTime',
|
||
endKey: 'meetingEndTime'
|
||
},
|
||
url: {
|
||
list: '/meeting/payMeeting/pageContract'
|
||
},
|
||
tableData: [],
|
||
// 查询参数
|
||
queryParam: {},
|
||
lastQueryParam: {},
|
||
// 分页参数
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
// 当前页
|
||
current: 1,
|
||
// 加载状态
|
||
loading: false,
|
||
}
|
||
},
|
||
methods: {
|
||
/*
|
||
* 会议分类筛选
|
||
* */
|
||
filterMeeting(key) {
|
||
this.meetingKey = key
|
||
this.initData(1,key)
|
||
},
|
||
/*
|
||
* 分页
|
||
* */
|
||
onShowSizeChange(current, pageSize) {
|
||
this.pageNo = current
|
||
this.pageSize = pageSize
|
||
console.log(current, pageSize)
|
||
this.initData()
|
||
},
|
||
/*
|
||
* 页码改变后的回调
|
||
* */
|
||
changePagination(pageNo, pageSize) {
|
||
this.pageSize = pageSize
|
||
this.pageNo = pageNo
|
||
this.initData()
|
||
},
|
||
/*
|
||
* 初始化加载数据
|
||
* */
|
||
initData(arg,key) {
|
||
if (!this.url.list) {
|
||
this.$message.error('请设置url.list属性!')
|
||
return
|
||
}
|
||
//加载数据 若传入参数1则加载第一页的内容
|
||
if (arg === 1) {
|
||
this.pageNo = 1
|
||
}
|
||
// 修改会议状态参数
|
||
if(key){
|
||
this.queryParam.meetingStatus = key
|
||
}
|
||
var params = Object.assign({}, this.lastQueryParam)
|
||
params.pageNo = this.pageNo
|
||
params.pageSize = this.pageSize
|
||
this.loading = true
|
||
getAction(this.url.list, params).then((res) => {
|
||
if (res.success) {
|
||
this.tableData = [...res.result.records] || res.result
|
||
this.current = res.result.current
|
||
if (res.result.total) {
|
||
this.total = res.result.total
|
||
} else {
|
||
this.total = 0
|
||
}
|
||
}
|
||
if (res.code === 510) {
|
||
this.$message.warning(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/*
|
||
* 查询
|
||
* */
|
||
searchQuery() {
|
||
this.lastQueryParam = {...this.queryParam}
|
||
console.log(this.lastQueryParam)
|
||
this.initData(1)
|
||
},
|
||
/*
|
||
* 重置
|
||
* */
|
||
searchReset() {
|
||
this.queryParam = {}
|
||
this.lastQueryParam = {}
|
||
this.pageNo = 1
|
||
this.pageSize = 10
|
||
this.initData(1)
|
||
},
|
||
/*
|
||
* 上传凭证
|
||
* */
|
||
uploadPaymentRecord(item){
|
||
if(item){
|
||
this.$refs.upload.open(item)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="less">
|
||
@import '~@assets/less/common.less';
|
||
|
||
.meeting {
|
||
background: #fff;
|
||
}
|
||
|
||
.title {
|
||
height: 56px;
|
||
line-height: 56px;
|
||
background: #fff;
|
||
border-bottom: 2px solid #f2f2f2;
|
||
padding: 0 20px;
|
||
|
||
.my-meeting {
|
||
margin-left: 6px;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.download {
|
||
float: right;
|
||
}
|
||
|
||
/*内容begin*/
|
||
.content {
|
||
padding: 0 20px 20px 20px;
|
||
}
|
||
|
||
.meeting—status {
|
||
height: 56px;
|
||
box-sizing: border-box;
|
||
line-height: 56px;
|
||
color: #666;
|
||
}
|
||
|
||
.inactive-status {
|
||
user-select: none;
|
||
padding: 0 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active-status {
|
||
background: #069f99;
|
||
padding: 8px 20px;
|
||
border-radius: 4px;
|
||
color: white;
|
||
}
|
||
.list {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
& > i {
|
||
width: 323px;
|
||
}
|
||
}
|
||
.item-meeting {
|
||
position: relative;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
color: #999;
|
||
padding: 10px;
|
||
width: 323px;
|
||
height: 219px;
|
||
opacity: 1;
|
||
background: #ffffff;
|
||
border-radius: 4px;
|
||
box-shadow: -2px 0px 10px 10px rgba(51, 51, 51, 0.10);
|
||
|
||
& > p {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
&-img > img {
|
||
margin-right: 4px;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
&-meetingName {
|
||
color: #333;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
&-meetingCost {
|
||
color: #FF5252;
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
font-family: Acre, Acre-Medium;
|
||
|
||
& > span {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
&-meetingPaymode {
|
||
.ant-btn {
|
||
float: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.meeting-img-status {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
|
||
/*内容end*/
|
||
|
||
.fenye {
|
||
background: #fff;
|
||
height: 50px;
|
||
}
|
||
|
||
.pagination {
|
||
float: right;
|
||
margin-right: 20px;
|
||
}
|
||
</style> |