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

<template>
  <div>
    <Modal :value="isShow" title="排班" width="48" @on-visible-change="e => $emit('update:isShow',e)">
      <template v-slot:default>
        <el-form ref="elForm" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="时间选择" prop="end_time">
            <div style="font-weight: 600">{{ date }}</div>
            <el-time-picker
              v-model="time"
              arrow-control
              end-placeholder="结束时间"
              is-range
              placeholder="选择时间范围"
              range-separator="-"
              start-placeholder="开始时间"
              style="width: 300px;"
              value-format="hh:mm:ss"
              @change="timePick">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="护工选择" prop="nurse_id">
            <el-select v-model="form.nurse_id" placeholder="请选择护工" style="width: 300px;">
              <el-option v-for="(item,index) in nurses" :key="item.index" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务项目" prop="schedule_list_skus">
            <el-checkbox-group v-model="form.schedule_list_skus">
              <template v-for="(item) in skus">
                <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
              </template>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </template>

      <template v-slot:footer>
        <Button @click="$emit('update:isShow',false)">取消</Button>
        <Button type="primary" @click="submit">确认</Button>
      </template>
    </Modal>
  </div>
</template>

<script>
import {parseTime} from '@/utils'
import {scheduleSave} from '@/api/schedule'

export default {
  props: {
    customerId: [Number, String],
    orderId: [Number, String],
    productId: [Number, String],
    date: {
      type: String,
      default: ''
    },
    isShow: {
      type: Boolean,
      default: false
    },
    skus: {
      type: Array,
      default: () => []
    },
    nurses: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {
        customer_id: '',
        product_id: '',
        order_id: '',
        nurse_id: '',
        start_time:'',
        end_time: '',
        schedule_list_skus: []
      },
      time: [new Date(),new Date()],
      rules: {
        nurse_id: [
          {required: true, message: '请选择护工'}
        ],
        start_time: [
          {required: true, message: '请选择开始时间'}
        ],
        end_time: [
          {required: true, message: '请选择结束时间'}
        ],
        schedule_list_skus: [
          {required: true, message: '请选择护理项目'}
        ]
      }
    }
  },
  methods: {
    timePick(e) {
      this.form.start_time = `${this.date} ${e[0]}`
      this.form.end_time = `${this.date} ${e[1]}`
    },
    submit() {
      this.form.customer_id = this.customerId
      this.form.product_id = this.productId
      this.form.order_id = this.orderId
      let temp = this.form.schedule_list_skus.map(item => {
        return {sku_id: item}
      })
      this.form.schedule_list_skus = temp
      this.$refs['elForm'].validate().then(valid => {
        console.log(valid)
        if (valid) {
          scheduleSave(this.form).then(res => {
            this.$successMessage('add', '排班')
            this.$emit('update:isShow', false)
          }).catch(err => {
            this.$emit('update:isShow', false)
          })
        }
      })
    }
  },
  watch: {
    isShow(val) {
      if(val){
        this.form.start_time =  `${this.date} ${parseTime(new Date(),'{h}:{i}:{s}')}`
        this.form.end_time =  `${this.date} ${parseTime(new Date(),'{h}:{i}:{s}')}`
      }else{
        this.$refs['elForm'].resetFields()
      }
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-form-item__error {
  transform: none !important;
  left: 0 !important;
}
</style>