我的会议
This commit is contained in:
fengachen
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 542 B |
Binary file not shown.
|
After Width: | Height: | Size: 518 B |
Binary file not shown.
|
After Width: | Height: | Size: 553 B |
Binary file not shown.
|
After Width: | Height: | Size: 397 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
@@ -1,13 +1,383 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>会议活动</div>
|
<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="true">
|
||||||
|
<div class="item-meeting" v-for="(item,index) of 20" :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>
|
||||||
|
</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>
|
</template>
|
||||||
<script>
|
<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 {
|
export default {
|
||||||
name: 'MeetingActivity',
|
name: 'MeetingActivity',
|
||||||
data() {
|
mixins: [RangeDateMixin],
|
||||||
return {}
|
components: {
|
||||||
|
JDictSelectTag,
|
||||||
|
JDate,
|
||||||
|
UploadMeetingCertificateModal
|
||||||
},
|
},
|
||||||
methods: {}
|
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/page'
|
||||||
|
},
|
||||||
|
tableData: [],
|
||||||
|
// 查询参数
|
||||||
|
queryParam: {},
|
||||||
|
lastQueryParam: {},
|
||||||
|
// 分页参数
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
// 当前页
|
||||||
|
current: 1,
|
||||||
|
// 加载状态
|
||||||
|
loading: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/*
|
||||||
|
* 会议分类筛选
|
||||||
|
* */
|
||||||
|
filterMeeting(key) {
|
||||||
|
this.meetingKey = 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) {
|
||||||
|
if (!this.url.list) {
|
||||||
|
this.$message.error('请设置url.list属性!')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
//加载数据 若传入参数1则加载第一页的内容
|
||||||
|
if (arg === 1) {
|
||||||
|
this.pageNo = 1
|
||||||
|
}
|
||||||
|
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]
|
||||||
|
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>
|
</script>
|
||||||
<style scoped lang="less"></style>
|
<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 {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.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>
|
||||||
@@ -11,7 +11,7 @@
|
|||||||
v-model="queryParam.titile"></j-dict-select-tag>
|
v-model="queryParam.titile"></j-dict-select-tag>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :xl="7" :lg="8" :md="8" :sm="24">
|
<a-col :xxl="7" :xl="10" :md="10" :sm="24">
|
||||||
<a-form-item label="提醒时间">
|
<a-form-item label="提醒时间">
|
||||||
<j-date
|
<j-date
|
||||||
placeholder="请选择开始日期"
|
placeholder="请选择开始日期"
|
||||||
@@ -228,12 +228,6 @@ export default {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
meetingDetail(){
|
|
||||||
this.$refs.meetingDetailModal.open({id:'1442374989698080770'})
|
|
||||||
},
|
|
||||||
uploadMeeting(){
|
|
||||||
this.$refs.upload.open()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user