jsm-mall-front/src/views/workOrder/workOrderPool2/components/reschedule/index.vue

<template>
  <zj-page-container>
    <zj-page-fill class="neibuview">
      <zj-form-container ref="formRef" :form-data="orderInfo" :form-attributes="{ size: 'mini' }">
        <zj-form-module
          title="预单信息"
          label-width="110px"
          :form-data="orderInfo"
          :form-items="serviceInfo"
        ></zj-form-module>
        <zj-form-module
          title="已选工单"
          label-width="100px"
          :form-data="orderInfo"
          :form-items="selectedItems"
        ></zj-form-module>
      </zj-form-container>
    </zj-page-fill>
    <!-- 操作按钮 -->
    <div>
      <div style="box-sizing: border-box; padding: 16px; text-align: right">
        <el-button size="mini" @click="$emit('close')"> 取消 </el-button>
        <el-button type="primary" size="mini" @click="allVerify"> 确定 </el-button>
      </div>
    </div>
  </zj-page-container>
</template>

<script>
import showRecordSelected from '../mixins/showRecordSelected.js'
import { required } from '@/components/template/rules_verify.js'
import { changeOrderChangeAppointmentTime } from '@/api/workOrderPool.js'
import { addHours } from '@/utils/common.js'
export default {
  mixins: [showRecordSelected],
  data() {
    return {
      orderInfo: {
        appointmentTime: '',
        appointmentEndTime: '',
        recordSelected: [],
        remark: ''
      }
    }
  },
  computed: {
    serviceInfo() {
      return [
        // {
        //   isShow: this.formOptions.appointmentTime.isShow,
        //   name: 'el-date-picker',
        //   md: 8,
        //   attributes: {
        //     disabled: !this.formOptions.appointmentTime.isEdit,
        //     style: { width: '100%' },
        //     placeholder: '请选择',
        //     'value-format': 'yyyy-MM-dd HH:mm:ss',
        //     'picker-options': {
        //       disabledDate: time => {
        //         return time.getTime() < Date.now() - 86400000
        //       }
        //     }
        //   },
        //   formItemAttributes: {
        //     label: '预约上门日期',
        //     prop: 'appointmentTime',
        //     rules: this.formOptions.appointmentTime.isRules
        //   }
        // },
        {
          isShow: this.formOptions.appointmentTime.isShow,
          name: 'el-date-picker',
          md: 8,
          attributes: {
            disabled: !this.formOptions.appointmentTime.isEdit,
            'picker-options': 'pickerOptions11',
            'popper-class': 'custom-popper11',
            'append-to-body': true,
            style: { width: '100%' },
            type: 'datetime',
            placeholder: '请选择',
            'value-format': 'yyyy-MM-dd HH:mm:ss',
            'picker-options': {
              disabledDate: time => {
                return time.getTime() < Date.now() - 86400000
              }
            }
          },
          events: {
            change: value => {
              if (value && new Date(value).getTime() < new Date().getTime() - 2000) {
                this.orderInfo.appointmentTime = ''
                this.$message.warning('必须大于当前时间')
              } else {
                this.orderInfo.appointmentEndTime = ''
              }
            }
          },
          formItemAttributes: {
            label: '预约开始时间',
            prop: 'appointmentTime',
            rules: this.formOptions.appointmentTime.isRules
          }
        },
        {
          isShow: this.formOptions.appointmentTime.isShow,
          name: 'el-date-picker',
          md: 8,
          attributes: {
            disabled: !this.formOptions.appointmentTime.isEdit,
            'picker-options': 'pickerOptions11',
            'popper-class': 'custom-popper11',
            'append-to-body': true,
            style: { width: '100%' },
            type: 'datetime',
            placeholder: '请选择',
            'value-format': 'yyyy-MM-dd HH:mm:ss',
            'picker-options': {
              disabledDate: time => {
                var data = this.orderInfo?.appointmentTime?.split(' ')?.[0]
                return (
                  time.getTime() < new Date(data ? `${data} 00:00:00` : '').getTime() ||
                  time.getTime() > new Date(data ? `${data} 00:00:00` : '').getTime()
                )
              }
            }
          },
          events: {
            change: value => {
              if (value && new Date(value).getTime() < new Date().getTime() - 2000) {
                this.orderInfo.appointmentEndTime = ''
                this.$message.warning('必须大于当前时间')
              } else if (value && new Date(value).getTime() < new Date(this.orderInfo?.appointmentTime).getTime()) {
                this.orderInfo.appointmentTime = value
              }
            }
          },
          formItemAttributes: {
            label: '预约结束时间',
            prop: 'appointmentEndTime',
            rules: this.formOptions.appointmentTime.isRules
          }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            type: 'textarea',
            rows: 3,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '备注',
            prop: 'remark'
          }
        }
      ]
    },
    formOptions() {
      return {
        appointmentTime: {
          isEdit: true,
          isShow: true,
          isRules: [...required]
        }
      }
    }
  },
  methods: {
    allVerify() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          changeOrderChangeAppointmentTime({
            ids: this.orderInfo.recordSelected.map(item => item.id),
            appointmentTime: this.orderInfo.appointmentTime,
            appointmentEndTime: this.orderInfo.appointmentEndTime,
            remark: this.orderInfo.remark
          }).then(res => {
            this.$message({
              type: 'success',
              message: '约单成功!'
            })
            this.$emit('close')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.neibuview {
  box-sizing: border-box;
  padding-left: 16px;

  ::v-deep & > .zj-page-fill-scroll {
    box-sizing: border-box;
    padding-right: 16px;

    & > div:nth-child(1) {
      margin-top: 20px;
    }
  }
}
</style>