storevisit-ui-mobile/src/views/week/dailyApprovalList.vue

<template>
  <div class="bgcolor">
    <!--        顶部条-->
    <div class="navBarTOP">
      <van-nav-bar class="navBar" title="汇报审批" left-arrow @click-left="onClickLeft" />
      <van-tabs v-model="type" color="#0057ba" @change="tabChange">
        <van-tab title="待审批" name="approvalPending" :disabled="disabled"></van-tab>
        <van-tab title="已审批" name="approvalSuccess" :disabled="disabled"></van-tab>
      </van-tabs>
    </div>
    <div class="container">
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="--已经到底了--"
        @load="onLoad">
        <div class="cellcontent brud weekList" v-for="(item, index) in list" :key="index">
          <van-cell @click="approveFn(item)">
            <div class="cardContent">
              <div class="title" v-if="type == 'approvalPending'">
                <!-- reportType: 1日报；2周报；3半月报 -->
                <!-- <p class="textLeft" v-if="item.reportType == 1">
                  {{ item.nickName }}的{{ item.reportTypeStr }}
                </p>
                <p class="textLeft" v-if="item.reportType == 2">
                  {{ item.deptName }}的{{ item.reportTypeStr }}
                </p>
                <p class="textLeft" v-if="item.reportType == 3">
                  {{ item.dqName }}的{{ item.reportTypeStr }}
                </p> -->
                <p class="textLeft">{{ filterName(item) }}的{{ item.reportTypeStr }}</p>
                <p class="textRight">审批</p>
              </div>
              <div class="title" v-if="type == 'approvalSuccess'">
                <p class="textLeft" v-if="item.reportType == 1">
                  {{ item.nickName }}的{{ item.reportTypeStr }}
                </p>
                <p class="textLeft" v-if="item.reportType == 2">
                  {{ item.deptName }}的{{ item.reportTypeStr }}
                </p>
                <p class="textLeft" v-if="item.reportType == 3">
                  {{ item.dqName }}的{{ item.reportTypeStr }}
                </p>
                <p class="textRight">
                  <van-rate
                    v-model="item.number"
                    :size="18"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                    readonly />
                </p>
              </div>
              <div class="info" v-if="type == 'approvalPending'">
                提交时间：{{ item.commitTime }}
              </div>
              <div class="info" v-if="type == 'approvalSuccess'">
                审批时间：{{ item.approvalTime }}
              </div>
            </div>
          </van-cell>
        </div>
        <van-empty description="" v-if="list.length == 0" />
      </van-list>
    </div>
  </div>
</template>

<script>
import { approveList } from '@/api/index';
export default {
  name: 'MyHistoricalWeekly',
  data() {
    return {
      type: 'approvalPending',
      disabled: false,
      pageNum: 1,
      pageSize: 10,
      loading: false,
      finished: false,
      list: [],
    };
  },
  created() {
    // this.approveList()
  },
  watch: {
    $route(to, from) {
      this.powerGrade = localStorage.getItem('powerGrade');
      this.pageNum = 1;
      if (to.path == '/dailyApprovalList' && from.path == '/home') {
        this.approveList();
      }
      if (to.path == '/dailyApprovalList' && from.path == '/daily') {
        this.pageNum = 1;
        this.approveList();
      }
      if (to.path == '/dailyApprovalList' && from.path == '/dailyApproval') {
        this.pageNum = 1;
        this.approveList();
      }
      if (to.path == '/dailyApprovalList' && from.path == '/weeklyApproval') {
        this.pageNum = 1;
        this.approveList();
      }
      if (to.path == '/dailyApprovalList' && from.path == '/doubleWeeklyApproval') {
        this.pageNum = 1;
        this.approveList();
      }
      if (to.path == '/dailyApprovalList' && from.path == '/dailyDetails') {
        this.pageNum = 1;
        this.approveList();
      }
      if (to.path == '/dailyApprovalList' && from.path == '/weeklyApprovalDetils') {
        this.pageNum = 1;
        this.approveList();
      }
      if (to.path == '/dailyApprovalList' && from.path == '/doubleWeeklyDetils') {
        this.pageNum = 1;
        this.approveList();
      }
    },
  },
  methods: {
    filterName(item) {
      // <!-- reportType: 1日报；2周报；3半月报 -->
      let name = '';
      // 应用服务平台
      if (item.postType == 'DIY') {
        if (item.reportType == 1) {
          name = item.nickName;
        } else if (item.reportType == 2) {
          name = item.deptName;
        } else if (item.reportType == 3) {
          name = item.dqName;
        }
      } else {
        name = item.nickName;
      }
      return name;
    },
    onLoad() {
      this.approveList();
    },
    approveFn(row) {
      this.list = [];
      if (this.type == 'approvalPending') {
        if (row.reportType == '1') {
          this.$router.push({
            path: '/dailyApproval',
            query: { reportId: row.id },
          });
        } else if (row.reportType == '2') {
          this.$router.push({
            path: '/weeklyApproval',
            query: { reportId: row.id },
          });
        } else {
          this.$router.push({
            path: '/doubleWeeklyApproval',
            query: { reportId: row.id },
          });
        }
      } else {
        if (row.reportType == '1') {
          this.$router.push({
            path: '/dailyDetails',
            query: { reportId: row.id },
          });
        } else if (row.reportType == '2') {
          this.$router.push({
            path: '/weeklyApprovalDetils',
            query: { reportId: row.id },
          });
        } else {
          this.$router.push({
            path: '/doubleWeeklyDetils',
            query: { reportId: row.id },
          });
        }
      }
    },
    tabChange() {
      this.disabled = true;
      this.list = [];
      this.pageNum = 1;
      this.approveList();
    },
    approveList() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '数据加载中...',
        forbidClick: true,
      });
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      approveList({ type: this.type, pageNum: this.pageNum, pageSize: this.pageSize }).then(
        (res) => {
          loading1.clear();
          this.disabled = false;
          this.loading = false;
          if (this.pageNum == 1) {
            this.list = [];
            this.refreshing = false;
          }
          this.list = this.list.concat(res.data);
          if (this.list.length >= res.total) {
            this.finished = true;
          } else {
            this.finished = false;
          }
          this.pageNum = this.pageNum + 1;
        }
      );
    },
    onClickLeft() {
      this.$router.push('/home');
    },
  },
};
</script>
<style>
.bgcolor {
  background-color: #f5f5f5;
}

.cardContent {
  box-sizing: border-box;
}

.cardContent .title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  line-height: 14px;
}

.cardContent .info {
  font-size: 14px;
  color: #999;
  line-height: 26px;
}

.cardContent .title p {
  padding: 0;
  margin: 0;
}

.cardContent .title .textLeft {
  display: inline-block;
  padding-bottom: 10px;
}

.cardContent .title .textRight {
  float: right;
  color: #0057ba;
}

.van-tab--active {
  color: #0057ba;
}

.brud {
  margin: 16px;
  border-radius: 8px;
  overflow: hidden;
}
.weekList {
  border-radius: 0;
}
.weekList .van-cell {
  border-radius: 6px;
  overflow: hidden;
}
.weekList .cardContent .title {
  line-height: 32px;
}
</style>