sishitongtang-crm/src/views/finance/serveDetail.vue

<template>
  <div>
    <div ref="lxHeader">
      <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="服务明细">
        <div slot="content"></div>
        <slot>
          <div style="display: flex;align-items: center">
            <el-radio-group v-model="datePickMode" size="small" style="margin-right: 10px;">
              <el-radio-button :label="0">年</el-radio-button>
              <el-radio-button :label="1">月</el-radio-button>
            </el-radio-group>
            <template v-if="datePickMode">
              <el-date-picker
                size="small"
                placeholder="请选择时间"
                style="width: 200px;margin-right: 10px;"
                v-model="select.month"
                type="month"
                value-format="yyyy-MM"
                @change="datePick">
              </el-date-picker>
            </template>
            <template v-else>
              <el-date-picker
                size="small"
                placeholder="请选择时间"
                style="width: 200px;margin-right: 10px;"
                v-model="select.year"
                type="year"
                value-format="yyyy"
                @change="datePick">
              </el-date-picker>
            </template>
            <Input v-model="select.keyword" placeholder="关键字搜索" style="width: 200px; margin-right: 10px"/>
            <Button style="margin-left: 10px" type="primary" @click="select.page = 1,getList()">查询</Button>
            <Button style="margin-left: 10px" type="primary" @click="exportServe">导出服务统计</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      :total="total"
      :list="list"
      :table-item="table"
      @pageSizeChange="e => select.page_size = e"
      @pageIndexChange="e => {select.page = e;getList()}">
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="68" header-align="center" align="center">
          <template v-slot:default="scope">
            <Button size="small" type="primary" @click="detail(scope)">查看</Button>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <serveDraw ref="serveDraw"></serveDraw>
  </div>
</template>

<script>
import {serveList} from '@/api/serveDetail'
import {parseTime,getAgeByIdcard} from "@/utils"
import { download } from '@/utils/downloadRequest'

import serveDraw from "@/views/finance/component/serveDraw";
export default {
  components:{
    serveDraw
  },
  data() {
    return {
      isShowDraw:false,
      isShowDetail:false,
      datePickMode:1,//0为年1为月
      select:{
        page:1,
        page_size:10,
        keyword:'',
        year:`${new Date().getFullYear()}`,
        month:`${new Date().getFullYear()}-${new Date().getMonth()+1}`,
      },
      types:[],

      total:0,
      list:[],
      table:[
        {
          prop:'name',
          label:'客户姓名',
          width: 140
        },
        {
          prop:'idcard',
          label:'年龄',
          width: 80,
          formatter:(cell,data,value) => {
            return getAgeByIdcard(value)
          }
        },
        {
          prop:'sex',
          label:'性别',
          width: 80
        },
        {
          prop:'idcard',
          label:'身份证号',
          width: 170
        },
        {
          prop:'phone',
          label:'手机号',
          width: 140
        },
        {
          prop:'server_total',
          label:'服务次数',
          width: 120
        },
        {
          prop:'server_time',
          label:'服务时长',
          width: 120
        },
        {
          prop:'remark',
          label:'备注',
          minWidth: 200,
          align:'left'
        }
      ],
    }
  },
  methods: {
    exportServe(){
      download('/api/admin/customer/schedule_list_skus','get',{
        start_date:this.$moment(this.select.month).startOf('month').format('YYYY-MM-DD'),
        end_date:this.$moment(this.select.month).endOf('month').format('YYYY-MM-DD'),
        page:1,
        page_size:9999,
        is_export:1
      },`服务统计表${this.select.month}.xls`)
    },


    datePick(){
      if(this.datePickMode){
        this.select.year = ''
      }else{
        this.select.month = ''
      }
    },

    detail(scope){
      this.$refs['serveDraw'].row = scope.row
      this.$refs['serveDraw'].select.customer_id = scope.row.id
      this.$refs['serveDraw'].select.year = this.select.year
      this.$refs['serveDraw'].select.month = this.select.month
      this.$refs['serveDraw'].isShow = true
    },
    async getList(){
      const res = await serveList(this.select)
      this.total = res.total
      this.list = res.data
      console.log(this.list)
    },

  },
  mounted() {
    this.getList()
  }
}
</script>

<style scoped lang="scss">
</style>