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>
            <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>
          </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>

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

<script>
import {getList} from '@/api/serveDetail'
import {parseTime} from "@/utils"

import detailServe from "@/views/finance/component/detailServe";
export default {
  components:{
    detailServe
  },
  data() {
    return {
      isShowDetail:false,
      select:{
        page:1,
        page_size:10,
        area_id:'',
        keyword:''
      },
      types:[],

      total:0,
      list:[],
      table:[
        {
          prop:'nurse.name',
          label:'护工',
          width:200
        },
        {
          prop:'date',
          label:'服务日期',
          width: 200
        },
        {
          label:'时间段',
          width: 170,
          customFn:(row) => {
            return (
              <div>{parseTime(new Date(row.start_time),'{h}:{i}')}~{parseTime(new Date(row.end_time),'{h}:{i}')}</div>
            )
          }
        },
        {
          label:'订单编号',
          prop:'no',
          width: 240
        },
        {
          prop:'customer.name',
          label:'服务对象',
          width: 200
        },
        {
          label:'上门地址',
          minWidth:300,
          align:'left',
          prop:'customer_address.address'
        },
        {
          label:'服务状态',
          prop:'status',
          width: 180,
          formatter:(cell,data,value) => {
            switch (value){
              case 0:
                return '已排班未服务'
                break;
              case 1:
                return '已排班未服务'
                break;
              case 2:
                return '已服务'
                break;
              default:
                return value
            }
          }
        }
      ]
    }
  },
  methods: {
    detail(scope){
      this.$refs['detailServe'].time = `${parseTime(new Date(scope.row.start_time),'{h}:{i}')} ~ ${parseTime(new Date(scope.row.end_time),'{h}:{i}')}`
      this.$refs['detailServe'].id = scope.row.id
      this.$refs['detailServe'].isShow = true
    },
    async getList(){
      const res = await getList(this.select)
      this.total = res.total
      this.list = res.data
      console.log(this.list)
    },

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

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