wms / yuyue · Files

<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail"
                    style="max-width: 800px; margin: 40px auto 0;">
        <a-row>

          <a-col :span="24">
            <a-form-model-item label="预约时间"   prop="appointmentTime">
              <a-select   placeholder="请选择预约时间段"  v-model="model.appointmentTime"  v-on:change="changeEvn($event)"  >
                <a-select-option  v-for="appointmentTime in timedateList" :key="appointmentTime.itemValue" :value="appointmentTime.itemValue">{{ appointmentTime.itemText}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="时间段：" >
              <a-select  class="extTimeSelection"  placeholder="请选择预约时间段"  v-model="model.timeSelection"  v-on:change="changeEvn2($event)" >
                <a-select-option  v-for="timeSelection in timeSelectionList" :key="timeSelection" :value="timeSelection">{{ timeSelection }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="2. 订单号" prop="orderNumber">
              <div class="b123456" >
              <a-input v-model="model.orderNumber" id="numbers0" placeholder="请输入订单号"></a-input>
              </div>
              <a @click="adddPhone()">我有更多订单号</a>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="4. 车牌号码" prop="carNumber">
              <a-input v-model="model.carNumber" placeholder="请输入车牌号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="5. 司机名称" prop="driverName">
              <a-input v-model="model.driverName" placeholder="请输入司机名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="6. 司机手机号" prop="phoneNumber">
              <div class="a123456" >
                <a-input v-model="model.phoneNumber" id="number0" placeholder="请输入司机手机号"></a-input>
              </div>
              <a @click="addPhone()">我有更多手机号</a>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="8.月台组" prop="railwayPlatform">
              <a-select   placeholder="请选择月台组"  v-model="model.railwayPlatform" >
                <a-select-option  v-for="railwayPlatform in PlatformList" :key="railwayPlatform.name" :value="railwayPlatform.name">{{ railwayPlatform.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="9.车型" prop="vehicle">
              <j-dict-select-tag type="list" v-model="model.vehicle" dictCode="vehicle_table,name,name"
                                 placeholder="请选择车型"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="11.填表人名称" prop="customerName">
              <a-input v-model="model.customerName" placeholder="请输入客户名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="12.填表人电话" prop="submitPhone">
              <a-input v-model="model.submitPhone" placeholder="请输入填表人电话"></a-input>
            </a-form-model-item>
          </a-col>

          <a-input  type="hidden" v-model="model.objective=1"></a-input>

          <a-input  type="hidden" v-model="model.reservationMethod='H5微信端'"></a-input>

          <j-modal
            :visible.sync="modal.visible"
            :width="1200"
            :title="modal.title"
            :ant-btn="modal.title"
            :fullscreen.sync="modal.fullscreen"
            :switchFullscreen="modal.switchFullscreen"
            switchFullscreen
            @ok="handleOk"
            :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
            @cancel="handleCancel"
            cancelText="关闭">
            <template v-for="(i,k) of 5">
              <p :key="k">这是协议内容，循环5次</p>
            </template>

          </j-modal>

          <font color="#6C6C6C"> 注意事项：<br>
            1、请在预约时间内拿提单到公司地磅激活IC卡，并在此期间内到门岗室（入厂登记处）点击允许入厂，在预约时间外后激活卡，预约无效。<br>
            2. 如要修改预约信息或取消预约，请扫描预约更改二维码填写信息或者拨打电话：0731-88289175，然后再重新预约。</font>
          <br>
        </a-row>
        <a-form-model-item :wrapperCol="{span: 19, offset: 5}">
          <a-button type="primary" @click="onSubmit()">下一步</a-button>
        </a-form-model-item>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import {httpAction} from '@/api/manage'
  import {getSchedulerPrint, getTime, Platform, searchTimePeriod} from "../../../api/api";
  import {getUrlParam} from "../../../api/getUrlParam";

  export default {
    name: 'ReservationSubmissionForm',
    components: {},
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },

    data() {
      return {
        modal: {
          title: '用户协议',
          visible: true,
          fullscreen: false,
          switchFullscreen: false,
        },
        timeSelection:'',
        codez:'',
        disableSubmit:'',
        a:0,
        b:0,
        timeSelectionList:[],
        PlatformList:[],
        timedateList:[],
        model: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        isShow:false,
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        confirmLoading: false,
        validatorRules: {
          appointmentTime: [
            {required: true, message: '请输入预约时间!'},
          ],
          // orderNumber: [
          //   {required: true, message: '请输入订单号!'},
          //   {pattern: /^.{6,18}$/, message: '请输入6到18位任意字符!'},
          // ],
          // phoneNumber: [
          //   {required: true, message: '请输入司机手机号!'},
          //   {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!'},
          // ],
          // submitPhone: [
          //   {required: true, message: '请输入填表人电话!'},
          //   {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!'},
          // ],
        },
        url: {
          add: "/reservationsubmission/reservationSubmission/add",
          edit: "/reservationsubmission/reservationSubmission/edit",
          queryById: "/reservationsubmission/reservationSubmission/queryById"
        }
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
    },
    mounted:function() {
      let id = this.$route.query.id;
      this.loadForm(id);
      this.PlatformTimeSlot(id);
    },




    created() {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      timeSlot(id){
        searchTimePeriod(id).then((res) => {
          this.timeSelectionList=res;
          let els= document.querySelector(".extTimeSelection .ant-select-selection-selected-value");
          els.innerText='';

        });
      },
      PlatformTimeSlot(id){
        Platform(id).then((res) => {
          this.PlatformList=res;
        });
      },

      loadForm(id){
        getTime(id).then((res) => {
          this.timedateList=res;
        })
      },
      handleOk () {
        this.close();
      },

      handleCancel () {
        window.location.replace("http://localhost/404");
      },
      changeEvn(event){
        this.timeSlot(event)
      },

      PlatformChange(event){
        this.PlatformTimeSlot(event)
      },


      changeEvn2(event){
        var str1=event.substring(0, event.indexOf("---"));
        if (event.substring(event.indexOf("预约")+2,event.length-1)==0)
        {
          alert("当前预约次数是不足的,您可以继续预约,不能确保审核通过")
        };
        let els= document.querySelector(".extTimeSelection .ant-select-selection-selected-value");
        if(els!=null)els.innerText=str1;
        this.model.timeSelection=str1;
      },

      add() {
        this.edit(this.modelDefault);
      },
      edit(record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },

      addPhone() {
        //添加手机号方法
        let els= document.querySelector(".a123456");
        this.a++;
        let number="number"+this.a;
        let html="<input placeholder='请输入司机手机号' type='text' class='ant-input' id="+number+">";
        els.innerHTML=els.innerHTML+html;
      },

      adddPhone() {
        //添加订单号方法
        let els= document.querySelector(".b123456");
        this.b++;
        let number="numbers"+this.b;
        let html="<input placeholder='请输入订单号' type='text' class='ant-input' id="+number+">";
        els.innerHTML=els.innerHTML+html;
      },


      onSubmit() {

        const code = getUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
        const local = window.location.href
        if (code == null || code === '') {
          window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + "wx3f9ef1399cfe4aed" + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
        } else {

        this.model.codez=code;

          if (this.model.objective == 1) {
            this.model.detailed = '';
          }
          const that = this;
          // 触发表单验证
          this.model.phoneNumber = "";
          this.model.orderNumber = "";
          for (let i = this.a; i >= 0; i--) {
            if (i==0)
            {
              this.model.phoneNumber = this.model.phoneNumber + document.getElementById("number" + i).value;
            }
            else
            {
              this.model.phoneNumber = this.model.phoneNumber  + document.getElementById("number" + i).value+ ",";
            }


          }
          for (let i = this.b; i >= 0; i--) {
            if (i==0)
            {
              this.model.orderNumber = this.model.orderNumber  + document.getElementById("numbers" + i).value;
            }
            else {
              this.model.orderNumber = this.model.orderNumber  + document.getElementById("numbers" + i).value+ ",";
            }

          }
          this.$refs.form.validate(valid => {
            if (valid) {
              that.confirmLoading = true;
              let httpurl = '';
              let method = '';
              if (!this.model.id) {
                httpurl += this.url.add;
                method = 'post';
              } else {
                httpurl += this.url.edit;
                method = 'put';
              }
              httpAction(httpurl, this.model, method).then((res) => {
                if (res.success) {
                  that.$message.success(res.message);
                  that.$emit('ok');
                  this.$router.push({
                    path: "/result/Success"
                  });
                } else {
                  that.$message.warning(res.message);
                  this.$router.push({
                    path: "/reserve/submit"
                  });
                }
              }).finally(() => {
                that.confirmLoading = false;
              })
            }
          })
        }
      }
    }
  }
</script>