我的会议

2021-09-28 20:26:23 +08:00
parent 74f0af9b74
commit 8e3a9afe9c
9 changed files with 376 additions and 12 deletions
@@ -1,13 +1,383 @@
 <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>
 <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',
-  data() {
-    return {}
+  mixins: [RangeDateMixin],
+  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>
-<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>
            </a-form-item>
          </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="提醒时间">
              <j-date
                placeholder="请选择开始日期"
@@ -228,12 +228,6 @@ export default {
        }
      })
    },
-    meetingDetail(){
-      this.$refs.meetingDetailModal.open({id:'1442374989698080770'})
-    },
-    uploadMeeting(){
-      this.$refs.upload.open()
-    }
  }
 }
 </script>