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">应排客户：{{statistics.need}}</el-tag>
            <el-tag effect="dark" style="margin-right: 10px;" type="success">已排客户：{{statistics.use}}</el-tag>
            <Input v-model="select.keyword" placeholder="关键字搜索" style="width: 200px; margin-right: 10px"/>
            <Button style="margin-right: 10px" type="primary" @click="select.page = 1,getCustomerList()">查询</Button>
            <xy-selectors @search="select.page = 1,getCustomerList()" @reset="reset">
              <template>
                <div class="select-item">
                  <div class="select-item__label">业务板块</div>
                  <el-select size="small" v-model="select.product_type_id" placeholder="选择业务板块" clearable style="width: 200px">
                    <el-option v-for="item in types" :value="item.id" :label="item.name" :key="item.id"></el-option>
                  </el-select>
                </div>

                <div class="select-item">
                  <div class="select-item__label">所属区域</div>
                  <el-select size="small" v-model="select.area_id" placeholder="选择区域" clearable style="width: 200px">
                    <el-option v-for="item in areas" :value="item.id" :label="item.value" :key="item.id"></el-option>
                  </el-select>
                </div>

                <div class="select-item">
                  <div class="select-item__label">所属月份</div>
                  <el-date-picker
                    size="small"
                    v-model="select.month"
                    type="month"
                    value-format="yyyy-MM"
                    placeholder="选择月"
                    style="width: 200px">
                  </el-date-picker>
                </div>

                <div class="select-item">
                  <div class="select-item__label">状态</div>
                  <el-radio v-model="select.schedule_status" :label="1">已排</el-radio>
                  <el-radio v-model="select.schedule_status" :label="2">未排</el-radio>
                  <el-radio v-model="select.schedule_status" label="">全部</el-radio>
                </div>
              </template>
            </xy-selectors>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      :default-expand-all="false"
      :list="list"
      :table-item="table"
      :total="total"
      @pageSizeChange="e => select.page_size = e"
      @pageIndexChange="e => {select.page = e;getCustomerList()}">
      <template v-slot:btns>
        <el-table-column :width="130" align="center" label="操作" fixed="right" header-align="center">
          <template v-slot:default="scope">
            <Button size="small" type="primary" ghost @click="schedule(scope.row)" style="margin-right: 6px;">排班</Button>

            <template v-if="scope.row.service_times === 0">
              <Poptip
                transfer
                confirm
                title="确认要删除订单?"
                @on-ok="deleteOrder(scope.row)">
                <Button size="small" type="primary" ghost>删除</Button>
              </Poptip>
            </template>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <add-schedule
      ref="addSchedule"
      :products="products"
      :customers="customers"
      :levels="levels"
      :orders="orders"
      @refresh="getCustomerList"></add-schedule>
  </div>
</template>

<script>
import {customerList} from '@/api/schedule'
import {getList as productIndex} from '@/api/product'
import {getList as nurseIndex} from '@/api/worker'
import {getparameter} from '@/api/system/dictionary'
import {getList as typeIndex} from '@/api/productType'
import {destroy} from '@/api/order'

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

export default {
  components: {
    addSchedule
  },
  data() {
    return {
      select: {
        page: 1,
        page_size: 10,
        keyword:'',
        product_type_id:'',
        area_id:'',
        month:'',
        schedule_status:'',
      },
      statistics:{
        use:0,
        need:0
      },
      customers:[],
      products:[],
      levels:[],
      orders:[],
      accounts:[],
      types:[],
      areas:[],

      total: 0,
      list: [],
      table: [
        {
          width: 40,
          type:'index',
          fixed:'left'
        },
        {
          prop: 'customer.name',
          label: '客户',
          width: 180,
          fixed:'left'
        },
        {
          label:'产品',
          width: 200,
          align:'left',
          prop:'product.name'
        },
        {
          label:'上门区域',
          width: 200,
          customFn:(row) => {
            return (
              <div>{row.customer.area_detail?.value}</div>
            )
          }
        },
        {
          prop: '',
          label: '上门地址',
          minWidth: 320,
          align: 'left',
          customFn: (row) => {
            let add = row.customer.customer_address.filter(item => {
              return item.default === 1
            })[0]?.address || row.customer.customer_address[0]?.address || '无地址'
            return (
              <div>{add}</div>
            )
          }
        },
        {
          label: '应服务次数',
          width: 120,
          prop:'service_times'
        },
        {
          label: '已排班',
          width: 120,
          prop:'schedule_count'
        },
      ]

    }
  },
  methods: {
    async getAreas(){
      const res = await getparameter({number : 'changzhou'},false)
      this.areas = res.detail
    },

    async getTypes(){
      const res = await typeIndex({page_size:9999,page:1},false)
      this.types = res.data
    },

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

    deleteOrder(row){
      console.log(row)
      destroy(row.id).then(res => {
        this.$successMessage('destroy', '订单')
        this.getCustomerList()
      })
    },

    async getCustomerList() {
      const res = await customerList(this.select)
      this.total = res.list.total
      this.list = res.list.data
      this.statistics.need = res.need_count
      this.statistics.use = res.use_count
    },

    reset(){
      this.select = {
        page: 1,
        page_size: 10,
        keyword:'',
        product_type_id:'',
        area_id:'',
        month:'',
        schedule_status:'',
      }
    },

    schedule(row){
      this.$refs['addSchedule'].id = row.id
      this.$refs['addSchedule'].addresses = row.customer.customer_address
      this.$refs['addSchedule'].isShow = true
    }
  },
  mounted() {
    this.getTypes()
    this.getProducts()
    this.getLevels()
    this.getCustomerList()
    this.getAreas()
  }
}
</script>

<style lang="scss" scoped>
.select-item{
  display: flex;
  align-items: center;

  &__label{
    width: 100px;
    padding: 10px 10px;
  }
}
</style>