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" @click="getCustomers">查询</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>
        <el-table-column :width="70" align="center" label="操作" fixed="right" header-align="center">
          <template v-slot:default="scope">
            <Button size="small" type="primary" ghost @click="schedule(scope.row)">排班</Button>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <add-schedule
      ref="addSchedule"
      :products="products"
      :customers="customers"
      :nurses="nurses"
      :levels="levels"
      :orders="orders"></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:[],
      orders:[],

      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>
        //     )
        //   }
        // },
        {
          width: 40,
          type:'index',
          fixed:'left'
        },
        {
          prop: 'name',
          label: '客户',
          width: 180,
          fixed:'left'
        },
        {
          label:'产品',
          width: 200,
          align:'left',
          customFn:(row)=>{
            return (
              <div>{row.orders[0]?.product.name}</div>
            )
          }
        },
        {
          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) => {
            let total = 0;
            row.orders.map(item => {
              total += item.service_times
            })
            return (
              <div>
                {
                  total
                }
              </div>
            )
          }
        },
        {
          label: '已排班',
          width: 120
        },
        {
          label:'排班状态',
          width: 140,

        }
      ]

    }
  },
  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
    },

    schedule(row){
      this.$refs['addSchedule'].detail = row
      this.$refs['addSchedule'].form.customer_id = row.id
      this.orders = row.orders
      this.$refs['addSchedule'].isShow = true
    }
  },
  mounted() {
    this.getCustomers()
    this.getProducts()
    this.getNurses()
    this.getLevels()
    this.getCustomerList()
  }
}
</script>

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