sishitongtang-crm/src/views/schedule/workerSchedule.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">
<!--            <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,getList()" @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"
      @pageIndexChange="e => {select.page = e;getList()}"
      @pageSizeChange="e => {select.page = 1;select.page_size = e;getList()}">
      <<template v-slot:btns>
      <el-table-column :width="80" align="center" label="操作" fixed="right" header-align="center">
        <template v-slot:default="scope">
          <Button size="small" type="primary" ghost @click="show(scope.row)">查看</Button>
        </template>
      </el-table-column>
    </template>
    </xy-table>

    <el-drawer
      size="46%"
      title="护工排班"
      :visible.sync="isShowDrawer"
      direction="rtl">
      <div class="draw-title">护工信息</div>
      <div style="margin-left: 2%;">
        <div style="margin-bottom: 8px;">
          <span class="info-title">姓名</span>
          <span class="info-content">{{ worker.name }}</span>
        </div>
        <div style="margin-bottom: 8px;">
          <span class="info-title">性别</span>
          <span class="info-content">{{ worker.sex }}</span>
        </div>
        <div style="margin-bottom: 8px;">
          <span class="info-title">手机号</span>
          <span class="info-content">{{ worker.mobile }}</span>
        </div>
        <div style="margin-bottom: 8px;">
          <span class="info-title">年龄</span>
          <span class="info-content">{{ $moment().diff(worker.birthday,'year') }}</span>
        </div>
      </div>

      <xy-table :height="400" style="margin-top: 20px;" :list="schedules" :table-item="scheduleTable" :is-page="false">
          <template v-slot:btns>
            <el-table-column :width="130" align="center" label="操作" header-align="center">
              <template v-slot:default="scope">
                <el-popover
                  placement="right"
                  width="300"
                  trigger="click">
                  <el-table :data="skus" :height="300">
                    <el-table-column width="120" property="sku_info.name" label="明细名称"></el-table-column>
                    <el-table-column width="100" property="time" label="时长(分)"></el-table-column>
                  </el-table>
                  <Button size="small" type="primary" ghost slot="reference" style="margin-right: 4px" @click="showDialog(scope.row)">明细</Button>
                </el-popover>

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

  </div>
</template>

<script>
import { nurseSchedule,scheduleIndex,scheduleDelete } from '@/api/schedule'
import { getList } from '@/api/serveDetail'
export default {
  data() {
    return {
      worker:{},
      isShowDrawer:false,
      isShowSku:false,
      skus:[],
      select: {
        page: 1,
        page_size: 10,
       // keyword:'',
        //product_type_id:'',
       // area_id:'',
        //month:'',
        //schedule_status:'',
      },
      customers:[],
      products:[],
      levels:[],
      orders:[],
      accounts:[],
      types:[],
      areas:[],

      list:[],
      total:0,
      table:[
        {
          prop:'name',
          label:'护工姓名',
          width:140
        },
        {
          prop:'mobile',
          label:'护工手机号',
          width:160
        },
        {
          prop:'birthday',
          label:'护工年龄',
          formatter:(cell,data,value) => {
            return value ? this.$moment().diff(value,'year') : value
          },
          width:100
        },
        {
          prop:'address',
          label:'护工地址',
          align:'left',
          minWidth:200
        },
        {
          prop:'has_arrange',
          label:'已排班',
          width:120
        },
        {
          prop:'has_end',
          label:'已完成',
          width:120
        }
      ],

      schedules:[],
      scheduleTable:[
        {
          prop:'customer.name',
          label:'客户名称',
          width:120
        },
        {
          prop:'customer.phone',
          label:'客户手机号',
          width:150
        },
        {
          prop:'start_time',
          label:'开始时间',
          width: 170
        },
        {
          prop:'end_time',
          label:'结束时间',
          width: 170
        },
        {
          prop:'status',
          label:'状态',
          width: 120,
          formatter:(row,data,value) => {
            let map = new Map([
              [0,'待护理'],
              [1,'护理中'],
              [2,'已护理']
            ])
            return map.get(value)
          }
        }
      ]
    }
  },
  methods: {
    async getList(){
      const res = await nurseSchedule(this.select)
      this.list = res.data
      this.total = res.total
    },
    reset(){

    },

    editor(){

    },
    showDialog(row){
      getList({
        customer_id:row.customer_id
      }).then(res => {
        this.skus = res.data.filter(item => {
          return row.id === item.id
        })[0]?.sku ?? []
        this.isShowSku = true
      })
    },
    deleteSchedule(row){
      scheduleDelete({
        id:row.id
      }).then(res => {
        this.$message({
          type:'success',
          message:'删除成功'
        })
        this.getList()
      })
    },
    show(e){
      this.worker = e
      scheduleIndex({
        nurse_name:e.name,
        page_size:9999
      }).then(res => {
        this.schedules = res
        this.isShowDrawer = true
      })
    }
  },
  computed: {},
  mounted() {
    this.getList()
  }
}
</script>

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

  &__label{
    width: 100px;
    padding: 10px 10px;
  }
}
.draw-title{
  letter-spacing: 2px;
  font-weight: 600;

  position: relative;
  padding: 10px 8px 10px 30px;
  &::after{
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #B3241D;

    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: 10px;
  }
}
.info-title{
  font-weight: 600;
}
.info-content{

  padding-left: 10px;
}
</style>