迁移广东基础党建

src/apps/party/AppThreeSessions/AppThreeSessions.vue

@@ -0,0 +1,552 @@
+<template>
+  <div class="page">
+    <div v-if="isShow" style="height:100%;">
+      <div class="fixed-top" style="width:100%;">
+        <!-- 头部搜索样式 -->
+        <div class="search-box">
+          <div class="search-input flex-row" @click="changeSearchBox">
+            <image src="https://cdn.cunwuyun.cn/img/search-red.svg"></image>
+            <span>{{ inputValue }}</span>
+          </div>
+        </div>
+        <!-- 选择时间和类型 -->
+        <div class='slect flex-row'>
+          <!-- 类型选择 -->
+          <div class="uni-list type-slect">
+            <div class="uni-list-cell">
+              <div class="uni-list-cell-db">
+                <picker @change="bindPickerChange" :range="array" range-key="dictName">
+                  <div class="uni-input">{{ meetTypespan }}</div>
+                  <image src="https://cdn.cunwuyun.cn/img/down.svg"></image>
+                </picker>
+              </div>
+            </div>
+          </div>
+          <!-- 时间选择 -->
+          <div class="uni-list type-slect">
+            <div class="uni-list-cell">
+              <div class="uni-list-cell-db">
+                <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"
+                        fields='month'>
+                  <div class="uni-input">{{ day }}</div>
+                  <image src="https://cdn.cunwuyun.cn/img/down.svg"></image>
+                </picker>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="session-list">
+        <div class="session-item" v-for="(item, index) in meetList" :key="index">
+          <div class="item-top" @click="toSessionDetail(item.meetingId, item.status)">
+            <div class="item-title mar-b12">{{ item.meetingAgenda }}</div>
+            <div class="item-info">
+              <span class="info-label">会议状态：</span>
+              <span :class="'item-status'+item.postStatus" class="info-value">
+                {{ $dict.getLabel('postStatus', item.postStatus) }}
+              </span>
+            </div>
+            <div class="item-info">
+              <span class="info-label">开始时间：</span>
+              <span class="info-value">{{ item.startTime || '-' }}</span>
+            </div>
+            <div class="item-info">
+              <span class="info-label">会议地点：</span>
+              <span class="info-value">{{ item.meetingAddress || '-' }}</span>
+            </div>
+            <div class="item-info">
+              <span class="info-label">主持人员：</span>
+              <span class="info-value">{{ item.hostName || '-' }}</span>
+            </div>
+            <div class="item-info mar-b12">
+              <span class="info-label">会议类型：</span>
+              <span class="info-value">{{ item.meetingClassification || '-' }}</span>
+            </div>
+          </div>
+          <div class="item-bottom">
+            <span class="item-btn border-E1E1E1" v-if="item.status == 3">已请假</span>
+            <span class="item-btn border-1365DD" v-if="item.status == 0" @click="signMeeting(item.meetingId)">签到</span>
+            <span class="item-btn border-E1E1E1" v-if="item.status == 1">已签到</span>
+            <span class="item-btn border-E1E1E1" v-if="item.status == 4">不签到</span>
+          </div>
+          <div class="item-status" :class="'item-status'+item.postStatus">
+            {{ $dict.getLabel('postStatus', item.postStatus) }}
+          </div>
+        </div>
+      </div>
+      <AiEmpty v-if="meetList.length == 0"/>
+    </div>
+    <div v-if="!isShow" class="search-input">
+      <div class="input-box flex-row">
+        <input class="input" placeholder="请输入会议标题" focus="false" v-model="searchValue" @blur="onBlur"/>
+        <image class="sousuo" src="https://cdn.cunwuyun.cn/img/search-active.svg"></image>
+        <image v-if="searchValue" @tap="clearInput" class="clear"
+               src="https://cdn.cunwuyun.cn/img/empty-Input.svg"></image>
+        <div class="search-word" @click="search">搜索</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  appName: "三会一课",
+  data() {
+    const currentDate = this.getDate({
+      format: true
+    })
+    return {
+      inputValue: "请输入会议标题",
+      isShow: true,
+      array: [],
+      meetType: "",
+      meetTypespan: "会议类型",
+      index: 0,
+      date: currentDate,
+      day: "会议时间",
+      createDate: "",//创建时间
+      meetList: [],
+      searchValue: "",//搜索框输入值
+      pageNum: 1,
+      pageSize: 10,
+      pages: 2,
+      userId: '',
+      partyId: '',
+      meetTypeIndex: '',
+    };
+  },
+  computed: {
+    startDate() {
+      return this.getDate('start');
+    },
+    endDate() {
+      return this.getDate('end');
+    },
+    ...mapState(['user']),
+  },
+  onLoad() {
+    this.partyId = this.user.id
+    this.$dict.load('postStatus', 'meetingClassification')
+    this.array = this.$dict.getDict('meetingClassification')
+    this.getList()
+  },
+  methods: {
+    signMeeting(id) {
+      this.$http.post(`/app/appthreemeetinguser/signByMeetingIdAndUserIdForWX?meetingId=${id}&userId=${this.user.id}`, null, {}).then(res => {
+        if (res.code == 0) {
+          this.$toast('签到成功')
+          this.pageNum = 1;
+          this.pages = 2;
+          this.getList()
+        }
+      }).catch(err => {
+        uni.showToast({
+          icon: 'none',
+          title: err,
+          duration: 2000
+        });
+      })
+    },
+    btnClick(span) {
+      uni.showToast({
+        icon: 'none',
+        title: span,
+        duration: 2000
+      });
+    },
+    bindPickerChange(e) {
+      this.array.map((item, index) => {
+        if (e.detail.value == item.dictValue) {
+          this.meetTypespan = this.array[index].dictName
+        }
+      })
+      this.meetTypeIndex = e.detail.value
+      this.pageNum = 1;
+      this.pages = 2;
+      this.pageSize = 10;
+      this.getList()
+    },
+    bindDateChange: function (e) {
+      this.day = e.target.value;
+      this.createDate = e.target.value + '-' + "01"
+      this.pageNum = 1;
+      this.pages = 2;
+      this.pageSize = 10;
+      this.getList()
+    },
+    getDate(type) {
+      const date = new Date();
+      let year = date.getFullYear();
+      let month = date.getMonth() + 1;
+      let day = date.getDate();
+
+      if (type === 'start') {
+        year = year - 60;
+      } else if (type === 'end') {
+        year = year + 2;
+      }
+      month = month > 9 ? month : '0' + month;
+      day = day > 9 ? day : '0' + day;
+
+      return `${year}-${month}-08 00:00:00  `;
+    },
+    changeSearchBox() {
+      this.isShow = false;
+    },
+    onBlur(e) {
+      this.searchValue = e.target.value;
+      if (this.searchValue) {
+        this.inputValue = this.searchValue;
+      } else {
+        this.inputValue = "请输入会议标题";
+      }
+    },
+    search() {
+      this.isShow = true;
+      this.pageNum = 1;
+      this.pageSize = 10;
+      this.pages = 2;
+      this.getList()
+    },
+    clearInput() {
+      this.searchValue = ''
+      this.inputValue = "请输入会议标题";
+    },
+    getList() {
+      if (this.pageNum > this.pages) return
+      // var searchYMD = ''
+      // if(this.createDate) {
+      //     searchYMD = this.createDate + '-01'
+      // }
+      this.$http.post(`/app/appthreemeetinguser/listForWX?meetingUserId=${this.user.id}&meetingAgenda=${this.searchValue}&meetingClassification=${this.meetTypeIndex}&searchYMD=${this.createDate}&current=${this.pageNum}&size=${this.pageSize}`
+      ).then(res => {
+        if (res.code == 0) {
+          const meetList = this.pageNum > 1 ? [...this.meetList, ...res.data.records] : res.data.records
+          meetList.map(item => {
+            if (item.meetingClassification.length == 1) {
+              item.meetingClassification = this.$dict.getLabel('meetingClassification', item.meetingClassification)
+            } else {
+              var typeList = item.meetingClassification.split(',')
+              typeList.map((items, index) => {
+                if (index == 0) {
+                  item.meetingClassification = this.$dict.getLabel('meetingClassification', items)
+                } else {
+                  item.meetingClassification = item.meetingClassification + ',' + this.$dict.getLabel('meetingClassification', items)
+                }
+                return item.meetingClassification
+              })
+              return item.meetingClassification
+            }
+            return item
+          })
+          this.pages = Math.ceil(res.data.total / 10)
+          this.meetList = meetList
+        }
+      })
+    },
+    toSessionDetail(id, signStatus) {
+      uni.navigateTo({
+        url: `../threeSessions/threeSessionsDetail?id=${id}&signStatus=${signStatus}&token=${uni.getStorageSync("token")}`
+      })
+    },
+    leave() {
+      uni.showModal({
+        title: '如需请假，请联系签到负责人',
+        confirmspan: "确认",
+        confirmColor: "#135AB8",
+        success: function (res) {
+          if (res.confirm) {
+          } else if (res.cancel) {
+          }
+        }
+      });
+    },
+    changeStatus(id, signStatus, joinStatus, signMethod, absence, meetingUserId, meetingId, successspan) {
+      let signTime = new Date().getFullYear() + '-' + this.isDate(new Date().getMonth() + 1) + '-' + this.isDate(new Date().getDate()) + ' ' + this.isDate(new Date().getHours()) + ':' + this.isDate(new Date().getMinutes()) + ':' + this.isDate(new Date().getSeconds())
+      var params = {
+        id,
+        signStatus,
+        joinStatus,
+        signMethod,
+        absence,
+        signUserId: this.user.id,
+        signUserName: this.user.realName,
+        signTime,
+        meetingUserId,
+        meetingId
+      }
+      this.$http.post(`/app/appthreemeetinguser/addOrUpdate`, null, {
+        data: params
+      }).then(res => {
+        if (res?.code == 0) {
+          uni.showToast({
+            title: successspan + '成功！',
+            duration: 2000
+          });
+          this.pageNum = 1;
+          this.pages = 2;
+          this.getList()
+        }
+      })
+    },
+    isDate(num) {
+      if (num < 10) {
+        num = '0' + num
+      }
+      return num
+    },
+  },
+  onReachBottom() {
+    this.pageNum = this.pageNum + 1
+    this.getList()
+  }
+};
+</script>
+<style lang="scss" scope>
+@import "../../../common/common.css";
+
+.page {
+  .search-box {
+    width: 100%;
+    height: 112px;
+    background-color: #e60012;
+    padding: 24px 32px;
+    box-sizing: border-box;
+
+    .search-input {
+      line-height: 64px;
+      width: 100%;
+      height: 100%;
+      background: #CE0010;
+      border-radius: 32px;
+      color: #F0CBCD;
+      font-size: 26px;
+
+      image {
+        width: 34px;
+        height: 34px;
+        margin: 8px 8px 8px 24px;
+        position: relative;
+        top: 6px;
+      }
+    }
+  }
+
+  .slect {
+    width: 100%;
+    height: 96px;
+    background-color: #fff;
+    color: #666;
+
+    .type-slect {
+      width: 50%;
+      border-right: 1px solid #F7F7F7;
+      margin: 30px 0;
+      box-sizing: border-box;
+      text-align: center;
+      font-size: 26px;
+
+      .uni-input {
+        display: inline-block;
+      }
+
+      image {
+        width: 32px;
+        height: 32px;
+        display: inline-block;
+        position: relative;
+        top: 6px;
+        margin-left: 8 srpx;
+      }
+    }
+
+    .type-slect:nth-child(2) {
+      border: none;
+    }
+  }
+
+  .search-input {
+    .input-box {
+      width: 100%;
+      height: 112px;
+      background-color: #fff;
+      padding: 24px 32px;
+      box-sizing: border-box;
+      position: relative;
+
+      .sousuo {
+        position: absolute;
+        top: 35px;
+        left: 60px;
+        width: 34px;
+        height: 34px;
+      }
+
+      .input {
+        background-color: #F3F3F3;
+        width: 598px;
+        height: 64px;
+        color: #999999;
+        font-size: 26px;
+        margin-left: 8px;
+        border-radius: 32px;
+        padding-left: 70px;
+        padding-right: 60px;
+        box-sizing: border-box;
+      }
+
+      .clear {
+        width: 32px;
+        height: 32px;
+        position: absolute;
+        top: 40px;
+        right: 130px;
+        z-index: 10;
+      }
+
+      .search-word {
+        font-size: 28px;
+        color: #135AB8;
+        line-height: 60px;
+        margin-left: 20px;
+      }
+    }
+  }
+
+  .session-list {
+    padding-top: 224px;
+
+    .session-item {
+      width: 686px;
+      margin: 0 auto 32px auto;
+      background-color: #fff;
+      // height: 462rpx;
+      position: relative;
+      overflow: hidden;
+
+      .item-top {
+        padding: 32px 32px 0 32px;
+      }
+
+      .item-title {
+        font-size: 32px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+        line-height: 44px;
+        word-break: break-all;
+      }
+
+      .item-info {
+        line-height: 42px;
+        font-size: 28px;
+        margin-bottom: 8px;
+
+        .info-label {
+          color: #999;
+        }
+
+      }
+
+      .item-bottom {
+        border-top: 2px solid #EEE;
+        text-align: right;
+        padding-right: 64px;
+        box-sizing: border-box;
+        line-height: 96px;
+
+        .item-btn {
+          display: inline-block;
+          width: 152px;
+          height: 52px;
+          line-height: 52px;
+          border-radius: 28px;
+          text-align: center;
+          font-size: 28px;
+          margin-left: 32px;
+          border: 2px solid #E1E1E1;
+        }
+      }
+
+      .info-value {
+        color: #343D65;
+        background-color: #fff !important;
+      }
+
+      .item-status {
+        position: absolute;
+        top: 14px;
+        right: -36rpx;
+        width: 140px;
+        text-align: center;
+        line-height: 44px;
+        font-size: 24px;
+        transform: rotate(45deg);
+      }
+
+      .item-status1 {
+        color: #FF9B2B;
+        background-color: #FFF3E8;
+      }
+
+      .item-status0 {
+        color: #2EA222;
+        background-color: #EAF5E8;
+      }
+
+      .item-status3 {
+        color: #999;
+        background-color: #F2F2F2;
+      }
+
+      .item-status2 {
+        color: #5A98F2;
+        background-color: #F1F6FF;
+      }
+
+      .color-1365DD {
+        color: #1365DD;
+      }
+
+      .color-FF4466 {
+        color: #FF4466;
+      }
+
+      .color-333333 {
+        color: #333;
+      }
+
+      .color-606060 {
+        color: #606060;
+      }
+
+      .border-1365DD {
+        border-color: #1365DD !important;
+        color: #1365DD !important;
+      }
+
+      .border-E1E1E1 {
+        border-color: #E1E1E1 !important;
+        color: #606060;
+      }
+
+      .border-E1E1E1 {
+        border-color: #E1E1E1 !important;
+      }
+
+      .mar-b12 {
+        margin-bottom: 26px !important;
+      }
+    }
+  }
+
+  .no-affairs {
+    width: 100%;
+    height: calc(100% - 210rpx);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>