supplier-dispatch-h5/src/views/index/toDoList.vue

<template>
  <div class="wrapCotainer">
    <div class="navBar">
      <van-nav-bar
          title="待办列表"
          left-arrow
          left-arrow-color="#FFFFFF"
          :border="false"
          :fixed="true"
          :safe-area-inset-top="true"
          @click-left="goBack"
      />
    </div>
    <div class="empty" v-if="show">
      <img src="@/assets/empty.png" >
    </div>
    <div class="wrap"  v-else>
      <div class="itemWrap" @click="goApprovalList" v-for="(item,index) in todolist" :key="index">
        <div class="left">
          <div class="title">{{ item.toDoName }}<span class="num" v-if="item.toDoCount">{{item.toDoCount}}</span></div>
          <img class="ritBtn" src="@/assets/todoRight.png">
        </div>
        <div class="time">{{ item.toDoTime }}</div>
      </div>
    </div>
  </div>

<!--  <div class="wrap" v-else>
    <ul id="dataList" class="dataList">
      <li class="item" v-for="(item,i) in todolist" :key="i">
        <div class="left">
          <div class="repairName">
            <span class="name">{{ item.toDoType.label }}</span>
            <span class="carCode">{{ item.plateNumber ? item.plateNumber : "无" }}</span></div>
          <div class="addressName">{{ item.address }}</div>
          <div class="time">{{ item.toDoTime }} &nbsp;&nbsp;{{ item.userName }}</div>
        </div>
        <div class="right" v-if="permissonList.includes('approve')">
          <button class="nopass" @click="todoAudit(item ,2)">不通过</button>
          <button class="pass" @click="todoAudit(item ,1)">通过</button>
        </div>
      </li>
    </ul>
  </div>-->
</template>

<script>
//getToDoList,toDoAudit
import {toDoListNew} from "@/api/order"
import {userOperationPermissions} from "@/api/mine"
import {myMixins} from  "@/utils/myMixins"

export default {
  name: "toDoList",
  mixins:[myMixins],
  data() {
    return {
      todolist: [],
      show: false,
      permissonList:[]
    }
  },
  mounted() {
    this.getPermissions()
    this.getList()
  },
  methods: {
    goApprovalList(){
      this.$router.push({ name: 'vehicleMaintenanceList',})
    },
    async getList() {
      // let result = await getToDoList();
      let result=await toDoListNew();
      this.todolist = result.data;
      console.log("this.todolist",this.todolist)
      if (this.todolist?.length === 0) {
        this.show = true
      } else {
        this.show = false
      }
    },
    async getPermissions(){
      let res = await userOperationPermissions();
      this.permissonList = res.data
    },
/*    async todoAudit(item,type) {
       await toDoAudit({
        toDoId: item.toDoId,
        toDoType: item.toDoType.code,
        auditResult:type
      })
      this.todolist=[]
      await this.getList();
    },*/
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrapCotainer{
  @include wh(100%,100%);
  background-color: #F4F5F7;
}
.navBar{
  height: 46px;
}
.empty{
  @include wh(100%,100%);
  background-color: #FAFAFA;
  @include flexTwoCenter;
  img{
    width: 100%;
  }
}
.wrap {
  @include wh(100%, 100%);
  @include sizing4Padding(13px,13px,0,13px);
  .itemWrap{
    @include wh(349px, 68px);
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 0px rgba(216,216,216,0.5);
    @include sizing4Radius(11px,12px,16px,15px, 6px);
    @include flexBetween;
    margin-bottom: 10px;
    .left{
      @include flexColBet;
    }
    .ritBtn{
      @include wh(6px, 9px);
    }
    .time{
      opacity: .6;
    }
    .title{
      @include flexCenter;
    }
    .num{
      display: inline-block;
      @include whLin(14px, 14px);
      @include fontWeightSize(10px,bold);
      @include bgFontColor(#FFFFFF,#F93D3D);
      border-radius: 2px;
      text-align: center;
      margin-left: 8px;
    }
  }
}

.dataList {
  padding: 0;
}

.item {
  list-style: none;
  @include flexColBet;
  margin-bottom: 10px;
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
  border-radius: 6px;
  padding: 10px 13px;
  box-sizing: border-box;
}

.repairName {
  font-weight: bold;
}

.name {
  font-size: 14px;
  margin-right: 22px;
}

.carCode {
  font-size: 12px;
}

.addressName {
  margin-top: 8px;
  margin-bottom: 5px;
}

.addressName,
.time {
  font-size: 12px;
}

button {
  padding: 2px 8px;
  @include fontWeightSize(bold, 12px);
  border-radius: 3px;
}

.nopass {
  background: white;
  border: 1px solid #DDDDDD !important;
  margin-right: 15px;
}

.pass {
  border: 1px solid #2A5094 !important;
  @include bgFontColor(white, #2A5094);
}


</style>