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>
            <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
      :default-expand-all="false"
      row-key="name"
      :total="total"
      :list="list"
      :table-item="table">
      <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 {
      select:{
        page:1,
        page_size:10,
        keyword:''
      },
      types:[],

      total:0,
      list:[],
      tableArr:[],
      dataTable:[
        {
          prop:'date',
          label:'日期'
        },
        {
          prop:'money',
          label:'金额(元)',
          align:'right'
        }
      ],
      table:[
        {
          type:'expand',
          label:'详情',
          width: 80,
          expandFn:(props)=>{
            return (
              <div style={{'width':'400px','margin-left':'40px'}}>
                <xy-table
                  defaultExpandAll={false}
                  table-item={this.dataTable}
                  list={props.row.data}
                  is-page={false}
                  height={260}
                  scopedSlots={{
                    btns:()=>{
                      return ''
                    }
                  }}>

                </xy-table>
              </div>
            )
          }
        },
        {
          label:'姓名',
          width:260,
          prop:'name'
        },
        {
          label:'小计',
          minWidth: 160,
          align:'right',
          customFn:(row)=>{
            let total = 0;
            row.data.map(item => {
              total += item.money
            })
            return (
              <div>
                {total}
              </div>
            )
          }
        }
      ]
    }
  },
  methods: {
    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
    },
  },
  mounted() {
    this.getList()
  }
}
</script>

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