nsgk_mobile/src/views/yinnong/expenditureDetail.vue

<template>
  <div class="app-container">
    <van-nav-bar
      title="支出明细公开表"
      left-arrow
      @click-left="$router.back(-1)"
    />
    <van-row style="margin-top: 20px">
      <van-col span="9" :offset="2">
        <h3>{{$store.state.user.bookName}}</h3>
      </van-col>
      <van-col span="10" :offset="2">
        <van-field placeholder="日期选择" v-model="date" @click="show = true" :disabled="true" right-icon="arrow-down" style=" border-radius: 10px;padding: 0 0 0 5px;text-align: center"/>
        <van-calendar v-model="show" type="range" :min-date="minDate" :max-date="maxDate" :show-confirm="false" @confirm="onConfirm"/>
      </van-col>
    </van-row>
    <van-cell-group  v-for="(item,index) in list" :key="index" style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
      <van-cell>
        <template #icon>
          <p style="line-height: 50px;font-size: 16px">{{item.id}}</p>
        </template>
        <template #title>
          <van-row>
            <van-col span="11" :offset="1">
              <p>{{item.voucherSummary}}</p>
            </van-col>
            <van-col span="12">
              <p v-if="item.out" style="color:#E50000;text-align: right">-{{item.out}}</p>
              <p v-if="item.in" style="color:#0AA214;text-align: right">{{item.in}}</p>
            </van-col>
          </van-row>
        </template>
        <template #label>
          <van-row>
            <van-col span="9" :offset="1">
              <p>{{item.subjectName}}</p>
            </van-col>
            <van-col span="5" :offset="2">
              {{item.num}}
            </van-col>
            <van-col span="7">
              <p style="text-align: right">{{item.bookDate}}</p>
            </van-col>
          </van-row>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group  v-if="list.length==0" style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
      <van-cell>
        <template #icon>
          <p style="line-height: 50px;font-size: 16px"></p>
        </template>
        <template #title>
          <van-row>
            <van-col span="11" :offset="1">
              <p> 暂无数据 </p>
            </van-col>
            <van-col span="12">

            </van-col>
          </van-row>
        </template>
        <template #label>
          <van-row>
            <van-col span="9" :offset="1">

            </van-col>
            <van-col span="5" :offset="2">

            </van-col>
            <van-col span="7">

            </van-col>
          </van-row>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- <van-datetime-picker
       v-model="currentDate1"
       type="year-month"
       title="开始时间"
       :formatter="formatter"
     />
     <van-datetime-picker
       v-model="currentDate2"
       type="year-month"
       title="截止时间"
       :formatter="formatter"
     />-->
  </div>
</template>

<script>
  import onlineHomeIndex from "../onlineHomeIndex";
  import {getFinancialOut} from "../../api/onlineHome/finacial";

  export default {
    components: {
      onlineHomeIndex
    },
    name: "incomeDetail",
    data() {
      return {
        activeName: 'a',
        list: [],
        loading: false,
        finished: false,
        result:[],
        date: null,
        show: false,
        queryParams: {
          // 分页
          pageNum: 1,
          pageSize: 10,
          deptId:this.$store.state.user.loginDeptId,
          bookType:this.$store.getters.bookType,
          beginTime: "",
          endTime: ""
          // 查询排序
          //orderByColumn: "id",
          //isAsc: "desc",
        },
        currentDate1:null,
        currentDate2:null,
        minDate: new Date(2000, 0, 1),
        maxDate: new Date(2050, 0, 31),
      };
    },
    created() {
    },
    methods: {
      formatDate(date) {
        let month = `${date.getMonth() + 1}`
        if(month.indexOf('0')<0){
          month = '0'+month
        }
        return `${date.getFullYear() + 1}-`+month ;
      },
      onConfirm(date) {
        const [start, end] = date;
        this.show = false;
        this.date = `${this.formatDate(start)} ~ ${this.formatDate(end)}`;
        this.queryParams.beginTime = '${this.formatDate(start)}'
        this.queryParams.endTime = '${this.formatDate(end)}'
        this.getList();
      },
      getList(){
        this.loading = true;
        getFinancialOut(this.queryParams).then(res =>{
          this.list = res.rows
          this.loading = false;
          this.total = res.total
        })
      },
    },
  }
</script>

<style scoped>
  >>>.van-cell::after {
    border-bottom: none;
  }
  input::-ms-input-placeholder{text-align: center;}
  input::-webkit-input-placeholder{text-align: center;}
</style>