zfire-newmall-admin/src/views/workOrder/workOrderPool/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: "",
        recordSelected: []
      }
    }
  },
  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',
          },
          formItemAttributes: {
            label: '预约上门日期',
            prop: 'appointmentTime',
            rules: this.formOptions.appointmentTime.isRules
          }
        },
      ]
    },
    formOptions() {
      return {
        appointmentTime: {
          isEdit: true,
          isShow: true,
          isRules: [...required]
        },
      }
    },
  },
  methods: {
    allVerify() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        changeOrderChangeAppointmentTime({
          ids: this.orderInfo.recordSelected.map(item => item.id),
          appointmentTime: this.orderInfo.appointmentTime,
          appointmentEndTime: this.orderInfo.appointmentTime
        }).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>