sishitongtang-crm/src/views/finance/salaryList.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>
            <el-date-picker
              size="small"
              v-model="date"
              type="month"
              placeholder="选择月"
              style="width: 180px;"
              @change="datePick">
            </el-date-picker>
            <Button style="margin-left: 10px" type="primary" @click="total = 0,select.page = 1,getList()">查询</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      ref="xyTable"
      :default-expand-all="false"
      row-key="name"
      :total="total"
      :list="list"
      :table-item="table"
      @pageSizeChange="e => select.page_size = e"
      @pageIndexChange="e => {select.page = e;getList()}">
      <template v-slot:btns>
        <div></div>
      </template>
    </xy-table>
  </div>
</template>

<script>
import {salaryList as getList} from '@/api/worker'
import {parseTime} from "@/utils"

export default {
  data() {
    return {
      date:'',
      select:{
        page:1,
        page_size:10,
        keyword:'',
        start_date:'',
        end_date:''
      },
      types:[],

      total:0,
      list:[],
      tableArr:[],
      dataTable:[
        {
          prop:'date',
          label:'日期'
        },
        {
          prop:'money',
          label:'金额(元)',
          align:'right'
        }
      ],
      table:[],
      baseTable:[
        {
          label:'姓名',
          fixed: 'left',
          width:140,
          prop:'name'
        },
        {
          label:'小计',
          width: 80,
          align:'right',
          fixed:'right',
          customFn:(row)=>{
            let total = 0;
            row.data.map(item => {
              total += item.money
            })
            return (
              <div>
                {total}
              </div>
            )
          }
        }
      ]
    }
  },
  methods: {
    getDate(year,month){
      let d = new Date(year,month,0)
      return d.getDate()
    },

    datePick(e){
      if(!e){
        return
      }
      let start = parseTime(e,'{y}-{m}-{d}')

      let end = parseTime(new Date(e.getFullYear(),e.getMonth()+1,0),'{y}-{m}-{d}')
      this.select.start_date = start
      this.select.end_date = end
    },

    async getList(){
      const res = await getList(this.select)
      this.tableArr = res.map((item,index) => {
        return item.name
      })
      this.total = res.length ?? 0
      this.list = res

      this.table = []
      let date = this.getDate(new Date(this.select.start_date).getFullYear(),new Date(this.select.start_date).getMonth()+1)
      let header = []
      const getHeader = (h) => {
        header = []
        for(let i = 1;i <= date;i ++){
          header.push(h('div',{style:{width:'100px',flex:'none',borderRight:'2px solid #EBEEF5'}},`${i}日`))
        }
        return header
      }
      let temp = {
        minWidth:date*100 + 10,
        renderHeader:(h)=>{
          return h('div',{style:{display:'flex',width:'100%'}},getHeader(h))
        },
        customFn:(row)=>{
          return (
            <div style={{display:'flex'}}>
              {
                row.data.map(item => {
                  return (
                    <div style={{width:'100px',flex:'none',borderRight:'2px solid #EBEEF5',textAlign:'right',padding:'0 4px'}}>{item.money}</div>
                  )
                })
              }
            </div>
          )
        }
      }
      this.table.push(temp)
      this.table.push(...this.baseTable)
      this.$nextTick(()=>{
        this.$refs['xyTable'].doLayout()
      })
    },
  },
  mounted() {
    this.date = new Date()
    this.select.start_date = parseTime(new Date(new Date().getFullYear(),new Date().getMonth(),1),'{y}-{m}-{d}')
    this.select.end_date = parseTime(new Date(new Date().getFullYear(),new Date().getMonth()+1,0),'{y}-{m}-{d}')
    this.getList()
  }
}
</script>

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