storevisit-ui-mobile/src/views/week/SUPTaskApproval/index.vue

<template>
  <div class="SUPTaskApproval">
    <van-nav-bar class="navBar" title="主管任务审批" left-arrow @click-left="onClickLeft" />
    <van-tabs class="myTab" type="card" v-model="tabVal" color="#0057ba" @change="tabChange">
      <van-tab title="待审批" name="1"></van-tab>
      <van-tab title="已审批" name="2"></van-tab>
    </van-tabs>
    <div class="content">
      <van-list v-model="loading" :finished="finished" finished-text="--已经到底了--">
        <div class="newCarList" v-for="(item, index) in list" :key="index">
          <van-cell is-link>
            <div class="newlist" @click="approveFn(item)">
              <div class="title">
                <p class="textLeft">{{ item.summaryTaskName }}</p>
              </div>
              <div class="info">提交人：{{ item.applyUserName }}</div>
              <div class="info">部门：{{ item.applyDeptName }}</div>
              <div class="info">拜访时间：{{ item.todoTime }}</div>
            </div>
          </van-cell>
        </div>
        <van-empty description="" v-if="list.length == 0" />
      </van-list>
    </div>
  </div>
</template>
<script>
import { getSummaryApprovalList } from '@/api/SUPTaskApproval.js';
export default {
  data() {
    return {
      tabVal: '1',
      list: [],
      loading: false,
      finished: true,
    };
  },
  created() {
    this.tabVal = this.$route.query.tabVal || '1';
    this.getApprovalList();
  },
  methods: {
    tabChange(name) {
      window.scrollTo(0, 0);
      this.list = [];
      this.tabVal = name;
      this.getApprovalList();
    },
    onClickLeft() {
      this.$router.replace({
        path: '/My/index',
      });
    },
    getApprovalList() {
      this.toastLoading(0, '加载中...', true);
      getSummaryApprovalList({ type: this.tabVal })
        .then((res) => {
          this.toastLoading().clear();
          if (res.code == 200 && res.data) {
            this.list = res.data;
          }
        })
        .catch((err) => {
          this.toastLoading().clear();
          this.$toast(err.msg);
        });
    },
    approveFn(row) {
      this.$router.push({
        path: '/VisitSummaryDetail',
        query: {
          userSummaryId: row.userSummaryId,
          summaryApprovalId: row.summaryApprovalId,
          source: 'SUPTaskApproval',
          approvalType: this.tabVal,
        },
      });
    },
  },
};
</script>
<style lang="scss">
.SUPTaskApproval {
  .myTab {
    .van-tabs__nav--card {
      margin: 0 !important;
      border-left: 0;
      border-right: 0;
    }
    .van-tabs__wrap,
    .van-tabs__nav--card {
      height: 39px;
    }
    .van-tab {
      line-height: 40px;
    }
  }
  .van-tabs__nav--card .van-tab.van-tab--active {
    background-color: #0057ba !important;
  }
  .content {
    .newCarList {
      margin: 14px;
      border-radius: 8px;
      overflow: hidden;
    }
    .newCarList .van-cell {
      border-radius: 6px;
      overflow: hidden;
    }
    .newCarList .newlist .title {
      /* line-height: 32px; */
    }
    .newCarList .van-cell__right-icon {
      top: 5px;
    }
    .newCarList .newlist {
      box-sizing: border-box;
    }
    .newCarList .newlist .title {
      font-size: 14px;
      font-weight: bold;
      color: #333;
      padding: 5px 0;
      /* line-height: 14px; */
    }
    .newCarList .newlist .info {
      font-size: 14px;
      color: #999;
      line-height: 26px;
    }
    .newCarList .newlist .title p {
      padding: 0;
      margin: 0;
    }
    .newCarList .newlist .title .textLeft {
      display: inline-block;
      /* padding-bottom: 10px; */
    }
    .newCarList .newlist .title .textRight {
      float: right;
      color: #0057ba;
    }
  }
}
</style>