sishitongtang-crm/src/views/schedule/component/addSchedule.vue

<template>
  <div v-if="detail">
    <xy-dialog
      ref="dialog"
      :is-show.sync="isShow"
      :width='72'
      title="排班"
      type="normal">
      <template>
        <el-row type="flex" align="middle">
          <el-col :span="4" :push="1">
            姓名：
          </el-col>
          <el-col :span="18">
            <el-input v-model="detail.customer.name" readonly style="width: 300px;">
            </el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="4" :push="1">
            性别：
          </el-col>
          <el-col :span="18">
            <el-input v-model="detail.customer.sex" readonly style="width: 300px;">
            </el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="4" :push="1">
            身份证号：
          </el-col>
          <el-col :span="18">
            <el-input v-model="detail.customer.idcard" readonly style="width: 300px;">
            </el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="4" :push="1">
            年龄：
          </el-col>
          <el-col :span="18">
            <el-input :value="ageComputed" readonly style="width: 300px;">
            </el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="4" :push="1">
            评估等级：
          </el-col>
          <el-col :span="18">
            <el-select v-model="detail.customer.level_id" disabled placeholder="请选择失能等级" style="width: 300px">
              <el-option v-for="item in levels" :key="item.id" :label="item.value" :value="item.id"></el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="4" :push="1">
            上门地址：
          </el-col>
          <el-col :span="18">
            <el-input style="width: 300px;" readonly :value="defaultAddress(addresses)"></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="4" :push="1">
            备注：
          </el-col>
          <el-col :span="18">
            <el-input style="width: 300px;" v-model="detail.customer.remark" readonly></el-input>
          </el-col>
        </el-row>

        <el-calendar>
          <template v-slot:dateCell="{date, data}">
            <div style="display:flex;flex-direction: column;justify-content: center;align-items: center;width: 100%;height: 100%">
              <div>{{timeFormat(date)}}日</div>
              <template v-if="data.type === 'current-month'">
                <template v-if="scheduleCount(data.day)">
                  <div class="schedule-time" @click="datePick(date,data,2,scheduleCount(data.day)[0])">{{scheduleCount(data.day)[0].nurse.name}} {{timeFormat(scheduleCount(data.day)[0].start_time,'{h}:{i}')}}~{{timeFormat(scheduleCount(data.day)[0].end_time,'{h}:{i}')}}</div>
                </template>
                <template v-else>
                  <i class="el-icon-plus" style="padding:10px;" @click="datePick(date,data,1)"></i>
                </template>
              </template>
            </div>
          </template>
        </el-calendar>
      </template>

      <template v-slot:footerContent>
        <Button type="primary" @click="isShow = false">确认</Button>
      </template>
    </xy-dialog>

    <timeSelect
      ref="timeSelect"
      @refresh="()=>{getCustomer();$emit('refresh')}"
      :flag="flag"
      :is-show.sync="isShowTime"
      :skus="detail.product_type.product_skus"
      :addresses="addresses"
      :date="date"
      :order-id="detail.id"
      :product-id="detail.product.id"
      :customer-id="detail.customer.id"></timeSelect>
  </div>
</template>

<script>
import moment from 'moment'
import {parseTime,getAgeByIdcard} from '@/utils'
import {customerDetail} from '@/api/schedule'

import timeSelect from "@/views/schedule/component/timeSelect";
export default {
  components:{
    timeSelect
  },
  props: {
    customers: {
      type: Array,
      default: () => []
    },
    products: {
      type: Array,
      default: () => []
    },
    levels: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      flag:false,//确认获取到数据后提交
      nurseId:'',
      productId: '',
      isShow: false,
      isShowTime:false,
      date:'',

      id:'',
      detail: '',
      addresses:[],
      pickType:1,

      table:[
        {
          label:'护工',
          prop:'nurse_id',
          minWidth:120,
          sortable:false
        },
        {
          label:'护理时间',
          width:310,
          sortable: false,
          customFn:(row)=>{
            return (
              <div>{row.start_time} 至 {row.end_time}</div>
            )
          }
        }
      ]
    }
  },
  methods: {

    datePick(date,data,type,schedule){
      this.date = data.day
      this.$refs['timeSelect'].form.nurse_id = this.nurseId
      if(data.type === 'current-month'){
        if(type === 1){
          this.$refs['timeSelect'].form.id = ''
          this.isShowTime = true
        }
        if(type === 2){
          this.$refs['timeSelect'].isDelete = schedule.status == 0
          this.$refs['timeSelect'].form.id = schedule.id
          this.$refs['timeSelect'].form.nurse_id = schedule.nurse_id
          this.$refs['timeSelect'].form.start_time = schedule.start_time
          this.$refs['timeSelect'].form.end_time = schedule.end_time
          this.$refs['timeSelect'].form.schedule_list_skus = schedule.sku.map(item => item.sku_id)
          this.isShowTime = true
        }
      }
    },

    async getCustomer() {
      try{
        const res = await customerDetail({
          id: this.id
        })
        this.flag = true
        this.detail = res.detail

        if(this.detail.product?.service_rule === 2 && this.detail.schedule && this.detail.schedule.length > 0){
          this.nurseId = this.detail.schedule.at(-1)?.nurse_id
        }
      }catch (err){
        this.flag = false
      }
    },

  },
  computed: {
    ageComputed() {
      return getAgeByIdcard(this.detail.customer.idcard)
      //return moment().diff(moment(this.detail.customer.birthday).format(),'year')
    },
    defaultAddress(){
      return function (adds){
        if(!adds instanceof Array){
          return '无地址'
        }
        return adds.filter(item => {
          return item.default === 1
        })[0]?.address || adds[0]?.address || '无地址'
      }
    },
    timeFormat(){
      return function (data,format='{dd}'){
        return parseTime(data,format)
      }
    },
    scheduleCount(){
      return function (day){
        let arr = this.detail.schedule.filter(item => {
          return day === item.date
        })
        if(arr.length > 0){
          return arr
        }
      }
    }
  },
  watch: {
    isShow(val) {
      if (val) {
        this.getCustomer()
      } else {
        this.nurseId = ''
        this.orderId = ''
        this.productId = ''
        this.date = ''
        this.$emit('close')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../styles/index";
.date-select{
  background: $primaryColor;
  color: #fff;
}
::v-deep .el-calendar-day{
  padding: 0 !important;
}
::v-deep .el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.schedule-num{
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: $primaryColor;
  border-radius: 100%;
}
.schedule-time{
  color: #fff;
  font-size: 13px;
  border-radius: 18px;
  background: $primaryColor;
  filter: drop-shadow( 0 1px 3px #c93731);

  padding: 4px 8px;
  margin-top: 6px;
}
</style>