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="110px">
          <el-form-item label="时间选择" prop="end_time">
            <div style="font-weight: 600">{{ date }}</div>
            <el-time-picker
              size="small"
              value-format="HH:mm:ss"
              v-model="form.start_time"
              arrow-control
              :picker-options="{
                selectableRange: '00:00:00 - 23:59:59'
              }"
              placeholder="开始时间"
             @change="startTimePick">
            </el-time-picker>
            <el-time-picker
              size="small"
              value-format="HH:mm:ss"
              v-model="form.end_time"
              arrow-control
              :picker-options="{
                selectableRange: '00:00:00 - 23:59:59'
              }"
              placeholder="结束时间"
              @change="endTimePick">
            </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="address_id">
            <el-select v-model="form.address_id" placeholder="请选择上门地址选择" style="width: 300px;">
              <el-option v-for="(item,index) in addresses" :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.sku.id">{{ item.sku.name }}</el-checkbox>
              </template>
              <el-checkbox :indeterminate="indeterminate" @change="handleCheckAllChange">全选</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </template>

      <template v-slot:footer>
        <Poptip
          :transfer="true"
          confirm
          title="确认要删除吗"
          @on-ok="destroySchedule">
          <Button type="primary" ghost>删除</Button>
        </Poptip>
        <Button @click="$emit('update:isShow',false)" style="margin-left: 8px">取消</Button>
        <Button type="primary" @click="submit">确认</Button>
      </template>
    </Modal>
  </div>
</template>

<script>
import {parseTime} from '@/utils'
import {scheduleDelete, 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: () => []
    },
    addresses:{
      type:Array,
      default:()=>[]
    }
  },
  data() {
    return {
      checkAll:false,
      indeterminate:false,
      form: {
        id:'',
        customer_id: '',
        product_id: '',
        order_id: '',
        nurse_id: '',
        address_id:'',
        start_time: '',
        end_time: '',
        schedule_list_skus: []
      },
      rules: {
        nurse_id: [
          {required: true, message: '请选择护工'}
        ],
        start_time: [
          {required: true, message: '请选择开始时间'}
        ],
        end_time: [
          {required: true, message: '请选择结束时间'}
        ],
        address_id: [
          {required: true, message: '请选择护工'}
        ],
        schedule_list_skus: [
          {required: true, message: '请选择护理项目'}
        ]
      }
    }
  },
  methods: {
    startTimePick(e){
      this.form.start_time = `${this.date} ${e}`
      console.log(this.form)
    },
    endTimePick(e){
      this.form.end_time = `${this.date} ${e}`
      console.log(this.form)
    },

    handleCheckAllChange(val){
      this.form.schedule_list_skus = val ? this.skus.map(item => {
        return item.sku.id
      }) : []
      this.indeterminate =! this.indeterminate
    },
    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)
            this.$emit('refresh')
          }).catch(err => {
            this.$emit('update:isShow', false)
          })
        }
      })
    },
    destroySchedule(){
      scheduleDelete({id:this.form.id}).then(res => {
        this.$successMessage('destroy','排班')
        this.isShow = false
        this.$emit('refresh')
      })
    },
  },
  watch: {
    isShow(val) {
      if (val) {
        this.form.address_id = this.addresses.filter(item => {
          return item.default === 1
        })[0]?.id || ''
      } else {
        this.$emit('update:date','')
        this.$refs['elForm'].resetFields()
      }
    }
  }
}
</script>

<style lang="scss" scoped>

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