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">
      <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="操作" fixed="right" header-align="center">-->
<!--              <template v-slot:default="scope">-->
<!--                <Button size="small" type="primary" ghost style="margin-right: 6px;">编辑</Button>-->

<!--                <template v-if="scope.row.status === 0">-->
<!--                  <Poptip-->
<!--                    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'
export default {
  data() {
    return {
      isShowDrawer:false,
      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(){

    },
    deleteSchedule(row){
      scheduleDelete({
        id:row.id
      }).then(res => {
        this.$message({
          type:'success',
          message:'删除成功'
        })
        this.getList()
      })
    },
    show(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;
  }
}
</style>