uniDataCenter/pages/addExpense/addExpense.vue

<template>
  <view>
    <view class="title flex">
      <view class="flex">
        <view v-for="t in tabTilte" :key="t.id" class="rMar32 f32" @click="acIdx = t.id,init()">
          <view :class="t.id == acIdx ? 'acv' : ''">{{t.name}}</view>
          <view class="line" :class="t.id == acIdx ? 'acLine' : ''"></view>
        </view>
      </view>
<!--
<view class="c-B8B8B8 f24 rMar24" style="position: relative">
                <text class="iconfont icon-guize_icon f24 rMar10"></text>
                报销规则
                <text class="explain" v-if="showexplain">晚8点之后和节假日打车费报销</text>
              </view>
-->
      <view class="addExbtn" v-if="acIdx == 0" @click="addDocument_else({},0)">添加报销</view>
    </view>

    <view style="padding: 0 20rpx">
      <timeFiltrate @getchildTime="getchildTime"></timeFiltrate>
    </view>
    <view class="ec-table">
      <view class="flex ex-thead">
        <view class="date">日期</view>
        <view class="time">{{acIdx == 1 ? '实际下播时间' : '下班时间'}}</view>
        <view class="opa">操作</view>
      </view>
      <view class="ex-tbody">
        <view v-if="infoList&&infoList.length>0">
          <view v-for="item in infoList" :key="item.id" class="flex ex-tbody_item">
            <view class="date">{{item.date}}</view>
            <view class="time">{{item.off_time.split(' ')[1]}}</view>
            <view class="opa" v-if="acIdx == 1">
              <text @click="addDocument(item,0)" class="c-4F7EFF pointer" v-if="item.is_add_detail==0">添加报销单</text>
              <text @click="addDocument(item,1)" class="c-446EF6 pointer" v-else-if="item.is_add_detail==1&&item.if_edit==1">编辑报销单</text>
              <text @click="addDocument(item,2)" class="pointer c-F39F2F" v-else>查看</text>
            </view>
            <view class="opa" v-if="acIdx == 0">
              <text @click="addDocument_else(item,1)" class="c-446EF6 pointer" v-if="item.if_edit==1">编辑报销单</text>
              <text @click="addDocument_else(item,2)" class="pointer c-F39F2F" v-else>查看</text>
            </view>
          </view>
        </view>
        <noData v-else></noData>
      </view>
    </view>

    <view class="text-center f26 loadinfo" v-if="noMoreShow">没有更多了...</view>
    <view class="text-center f26 loadinfo" v-if="loadingShow">加载中...</view>

    <wm-watermark :text="real_name"></wm-watermark>
    <expenseConfig ref="showexpense"></expenseConfig>
  </view>
</template>

<script>
import noData from "../../components/noData";
import timeFiltrate from '@/components/timeFiltrate.vue'
import expenseConfig from '@/components/expenseConfig.vue'
export default {
  components: {
    timeFiltrate,
    noData,
    expenseConfig
  },
  data () {
    return {
      real_name: '',
      showexplain: false,
      infoList: [],
      total: 0,
      page: 1,
      pages: 0,
      page_size: 20,
      loading: false,
      start_time: this.$getDay(-30, false),
      end_time: this.$getDay(0, false),
      acIdx: 1,
      tabTilte: [
        {
          id: 1,
          name: '直播报销'
        },
        {
          id: 0,
          name: '其他报销'
        }
      ],
      info: {}, //info.reimburse_info
      noMoreShow:false,
      loadingShow:false
    }
  },
  computed: {
    timeChange () {
      const { start_time, end_time } = this
      return {
        start_time,
        end_time
      }
    }
  },
  watch: {
    timeChange () {//同时监听两个数据变化
      this.init()
    }
  },
  async onLoad () {
    await this.$onLaunched;
    this.$show_init_loading()
    this.real_name = uni.getStorageSync('userInfo').info.real_name;
    this.$refs.showexpense.closeDrawer()
    this.get_info()
    this.init()
  },
  onPullDownRefresh(){
    this.init()
  },
  onReachBottom(){
    if(this.infoList.length < this.page_size){
      this.noMoreShow = true
      return false
    }
    this.loadingShow = true
    setTimeout(()=>{
      this.init()
    },1000)
  },
  methods: {
    get_info () {
      this.$req(this.$api.dialogProfile, 'get', {}, (res) => {
        if (res && res.errno == 0) {
          this.info = res.rst
          this.$hide_init_loading()
        }
      })
    },
    addDocument_else (item, isEdit) {
      if (this.info.reimburse_info) {
        uni.navigateTo({
          url: '../addExpenseFormElse/addExpenseForm?item=' + encodeURIComponent(JSON.stringify(item)) + '&isEdit=' + isEdit
        })
      } else {
        this.$refs.showexpense.openDrawer()
      }
    },
    addDocument (item, isEdit) {
      // isEdit是否可编辑,0新增,1可编辑,2仅查看
      if (this.info.reimburse_info) {
        uni.navigateTo({
          url: '../addExpenseForm/addExpenseForm?item=' + encodeURIComponent(JSON.stringify(item)) + '&isEdit=' + isEdit
        })
      } else {
        this.$refs.showexpense.openDrawer()
      }
    },
    getchildTime (st, et) {
      this.start_time = st
      this.end_time = et
    },
    init () {
      this.infoList = []
      let api = this.$api.LiveReimbs
      if (this.acIdx == 0) {
        api = this.$api.reimbsList
      }
      this.$req(api, 'get', {
        staff_id: uni.getStorageSync('admin_id'),
        start: this.start_time,
        end: this.end_time,
        page: this.page,
        pagesize: this.page_size
      }, (res) => {
        if (res && res.errno == 0) {
          this.infoList=[...this.infoList,...res.rst.data]
          this.page = res.rst.pageInfo.page;
          uni.stopPullDownRefresh()
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
        this.loadingShow = false
        this.$hide_init_loading()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.explain {
  position: absolute;
  top: 20rpx;
}
.title {
  font-size: 30rpx;
  padding: 40rpx 20rpx 0;
  .acv {
    color: #5b80f4;
  }
  .line {
    width: 70%;
    height: 3px;
    background-color: transparent;
    margin: 10rpx auto 0;
  }
  .acLine {
    background-color: #5b80f4;
  }
}
.addExbtn {
  padding: 10rpx 20rpx;
  background-color: #5b80f4;
  border-radius: 8rpx;
  margin-left: auto;
}
.ec-table {
  .ex-thead {
    padding: 18rpx 32rpx 26rpx;
    font-size: 26rpx;
    color: #b8b8b8;
    background: #1c222e;
    view {
      text-align: center;
    }
  }
  .ex-tbody {
    background-color: #373e4e;
    view {
      text-align: center;
    }
    .ex-tbody_item {
      padding: 30rpx 32rpx;
      border-bottom: 1px solid #3d4453;
      font-size: 28rpx;
    }
  }
}

.date {
  width: 25%;
}
.time {
  width: 50%;
}
.opa {
  width: 25%;
}
</style>