sishitongtang-crm/src/views/schedule/schedule.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">
            <el-tag effect="dark" style="margin-right: 10px;" type="warning">应排客户</el-tag>
            <el-tag effect="dark" style="margin-right: 10px;" type="success">已排客户</el-tag>
            <Input placeholder="关键字搜索" style="width: 200px; margin-right: 10px"/>
            <Button style="margin-right: 10px" type="primary">查询</Button>
            <xy-selectors>

            </xy-selectors>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      :default-expand-all="false"
      :list="list"
      :table-item="table"
      :total="total">
      <template v-slot:btns>
        <div></div>
      </template>
    </xy-table>

    <add-schedule
      ref="addSchedule"
      :products="products"
      :customers="customers"
      :nurses="nurses"
      :levels="levels"></add-schedule>
  </div>
</template>

<script>
import {customerList} from '@/api/schedule'
import {getList as customerIndex} from '@/api/customer'
import {getList as productIndex} from '@/api/product'
import {getList as nurseIndex} from '@/api/worker'
import {getparameter} from '@/api/system/dictionary'

import addSchedule from "@/views/schedule/component/addSchedule";

export default {
  components: {
    addSchedule
  },
  data() {
    return {
      select: {
        page: 1,
        page_size: 10,
      },
      customers:[],
      products:[],
      nurses:[],
      levels:[],

      total: 0,
      list: [],
      table: [
        {
          type: 'expand',
          expandFn: (props) => {
            let {$refs} = this
            return (
              <xy-table
                style={{'margin':'0 20px','filter':'drop-shadow(0 2px 16px rgba(200,200,200,0.8))'}}
                is-page={false}
                height={240}
                list={props.row.orders}
                table-item={
                  [
                    {
                      prop: 'no',
                      label: '订单编号',
                      width: 210,
                      sortable: false
                    },
                    {
                      prop: 'product.name',
                      label: '产品',
                      minWidth: 200,
                      sortable: false
                    },
                    {
                      label: '排班状态',
                      width: 160,
                      sortable: false
                    }
                  ]
                }
                scopedSlots={{
                  btns() {
                    return (
                      <el-table-column
                        width={70}
                        header-align="center"
                        align="center"
                        label="操作"
                        scopedSlots={{
                          default(scope) {
                            return (
                              <Button
                                type="primary"
                                size="small"
                                on={{
                                  ['click']: () => {
                                    $refs['addSchedule'].form.product_id = scope.row.product_id
                                    $refs['addSchedule'].form.customer_id = scope.row.customer_id
                                    $refs['addSchedule'].form.order_id = scope.row.id
                                    $refs['addSchedule'].isShow = true
                                  }
                                }}>排班</Button>
                            )
                          }
                        }}>
                      </el-table-column>
                    )
                  }
                }}>

              </xy-table>
            )
          }
        },
        {
          prop: 'name',
          label: '客户',
          width: 180,
        },
        {
          prop: '',
          label: '上门地址',
          minWidth: 320,
          align: 'left',
          customFn: (row) => {
            let add = row.customer_address.filter(item => {
              return item.default === 1
            })[0]?.address || row.customer_address[0]?.address || '无地址'
            return (
              <div>{add}</div>
            )
          }
        },
        {
          label: '应服务次数',
          width: 120,
          customFn: (row) => {
            return (
              <div>{row.orders.length}</div>
            )
          }
        },
        {
          label: '已排班',
          width: 120
        }
      ]

    }
  },
  methods: {
    async getCustomers(){
      const res = await customerIndex({page_size:9999,page:1},false)
      this.customers = res.data.data
    },
    async getProducts(){
      const res = await productIndex({page_size:9999,page:1},false)
      this.products = res.data
    },
    async getNurses(){
      const res = await nurseIndex({page_size:9999,page:1},false)
      this.nurses = res.data
    },
    async getLevels(){
      const res = await getparameter({number:'disabilityLevel'})
      this.levels = res.detail
    },

    async getCustomerList() {
      const res = await customerList(this.select)
      this.total = res.total
      this.list = res.data
    }
  },
  mounted() {
    this.getCustomers()
    this.getProducts()
    this.getNurses()
    this.getLevels()
    this.getCustomerList()
  }
}
</script>

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