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

<template>
  <div v-if="detail">
    <xy-dialog
      ref="dialog"
      :form="form"
      :rules="rules"
      :is-show.sync="isShow"
      :width='84'
      title="排班"
      type="form"
      @submit="submit"
      @reset="pickType = 1,dateStartPick = '',dateEndPick = ''">
      <template v-slot:extraFormTop>
        <div :style="{
          'display':'flex',
          'align-items':'center',
          'flex-wrap':'wrap',
          'min-width':'380px'
        }">
          <el-form-item>
            <div class="xy-table-item">
              <div class="xy-table-item-label">
                性别：
              </div>
              <div class="xy-table-item-content">
                <el-input v-model="detail.sex" readonly style="width: 300px;"></el-input>
              </div>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="xy-table-item">
              <div class="xy-table-item-label">
                年龄：
              </div>
              <div class="xy-table-item-content">
                <el-input :value="ageComputed" readonly style="width: 300px;"></el-input>
              </div>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="xy-table-item">
              <div class="xy-table-item-label">
                身份证号：
              </div>
              <div class="xy-table-item-content">
                <el-input :value="detail.idcard" readonly style="width: 300px;"></el-input>
              </div>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="xy-table-item">
              <div class="xy-table-item-label">
                失能等级：
              </div>
              <div class="xy-table-item-content">
                <el-select v-model="detail.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>
              </div>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="xy-table-item">
              <div class="xy-table-item-label">
                备注：
              </div>
              <div class="xy-table-item-content">
                <el-input v-model="detail.remark" :autosize="{minRows:2}" placeholder="请输入备注" readonly
                          style="width: 300px;"
                          type="textarea"></el-input>
              </div>
            </div>
          </el-form-item>
        </div>
      </template>

      <template v-slot:customer_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            客户：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.customer_id" disabled placeholder="请选择客户" style="width: 300px">
              <el-option v-for="item in customers" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:product_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            产品：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.product_id"  placeholder="请选择产品" style="width: 300px">
              <el-option v-for="item in products" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:order_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            订单：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.order_id"  placeholder="请选择订单" style="width: 300px">
              <el-option v-for="item in orders" :key="item.id" :label="item.no" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:extraFormBottom>
        <el-calendar>
          <template v-slot:dateCell="{date, data}">

            <el-popover
              :ref="`popover-${data.day}`"
              placement="top"
              trigger="click"
              width="280">
              <div
                slot="reference"
                :style="
                {
                  'padding':'8px',
                }"
                :class="{
                  'date-select':isInDate(data.day)
                }"
                style="width: 100%;height: 100%"
                @click="datePicked(data,date)">
                {{ data.day.split('-').slice(1).join('-') }} {{ isInDate(data.day) ? '✔️' : '' }}
              </div>

              <template>
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
                  <template v-if="pickType === 1">
                    <el-time-select
                      style="width: 200px;margin-bottom: 10px"
                      v-model="form.start_time"
                      :picker-options="{
                    start: '00:00',
                    step: '00:5',
                    end: '23:59'
                  }"
                      placeholder="开始时间">
                    </el-time-select>
                  </template>
                  <template v-else>
                    <el-time-select
                      style="width: 200px;margin-bottom: 10px"
                      v-model="form.end_time"
                      :picker-options="{
                    start: '00:00',
                    step: '00:5',
                    end: '23:59',
                    minTime: form.start_time
                  }"
                      placeholder="结束时间">
                    </el-time-select>
                  </template>
                  <el-select placeholder="请选择护工" v-model="form.nurse_id" style="width: 200px;margin-bottom: 10px">
                    <el-option
                      v-for="item in nurses"
                      :key="item.id"
                      :value="item.id"
                      :label="item.name"></el-option>
                  </el-select>
                  <div style="width: 200px;display: flex;justify-content: space-between;">
                    <Button ghost type="primary" @click="$refs[`popover-${data.day}`].doClose()">取消</Button>
                    <Button type="primary" @click="dateConfirm(data)">确认</Button>
                  </div>
                </div>
              </template>
            </el-popover>
          </template>
        </el-calendar>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {customerDetail,scheduleSave} from '@/api/schedule'

export default {
  props: {
    customers: {
      type: Array,
      default: () => []
    },
    products: {
      type: Array,
      default: () => []
    },
    nurses: {
      type: Array,
      default: () => []
    },
    levels: {
      type: Array,
      default: () => []
    },
    orders:{
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      productId: '',
      customerId: '',
      isShow: false,

      detail: {},
      dateStartPick:'',
      dateEndPick:'',
      pickType:1,
      form: {
        customer_id: '',
        product_id: '',
        order_id: '',
        start_time: '',
        end_time: '',
        nurse_id: '',
      },
      rules:{
        product_id:[
          {required:true,message:'请选择产品'}
        ],
        order_id:[
          {required:true,message:'请选择订单'}
        ],
        start_time:[
          {required:true,message:'请选择开始时间'}
        ],
        end_time:[
          {required:true,message:'请选择结束时间'}
        ]
      }
    }
  },
  methods: {
    async getCustomer() {
      const res = await customerDetail({
        product_id: this.form.product_id,
        id: this.form.customer_id,
      })
      console.log(res)
      this.detail = res.detail
    },

    dateConfirm(data){
      if(this.pickType === 1){
        this.pickType = 2
        return
      }
      this.$refs[`popover-${data.day}`].doClose()
    },
    datePicked(data,date){
      if(this.pickType === 1){
        this.dateStartPick = data.day
      }
      if(this.pickType === 2){
        this.dateEndPick = data.day
      }
    },
    submit() {
      this.form.start_time = `${this.dateStartPick} ${this.form.start_time}`
      this.form.end_time = `${this.dateEndPick || this.dateStartPick} ${this.form.end_time}`

      scheduleSave(this.form).then(res => {
        this.$successMessage('排班','')
        this.isShow = false
      })
    }
  },
  computed: {
    ageComputed() {
      return new Date().getFullYear() - new Date(this.detail.birthday).getFullYear()
    },
    isInDate(){
      return function (day){
        let startTimer = new Date(this.dateStartPick).getTime()
        let endTimer = new Date(this.dateEndPick).getTime()
        let dayTimer = new Date(day).getTime()
        return dayTimer >= startTimer && dayTimer <= endTimer
      }
    }
  },
  watch: {
    isShow(val) {
      if (val) {
        //this.getCustomer()
      } else {
        this.pickType = 1
        this.dateEndPick = ''
        this.dateStartPick = ''
        this.$refs['dialog'].reset()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../styles/index";
.date-select{
  background: $primaryColor;
  color: #fff;
}
::v-deep .el-calendar-day{
  padding: 0 !important;
}
</style>