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="1. 预约时间"   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="2. 时间段：" prop="timeSelection">
              <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="3. 订单号" prop="orderNumber0" :model="dynamicForm">
              <a-input v-model="model.orderNumber0" id="numbers0" placeholder="请输入订单号" ></a-input>
              <div class="b123456" v-for="(item, index) in dynamicForm.counter" style="text-align: center;">
<!--              <a-input   placeholder="请输入订单号" ></a-input>-->
                <input :id="item.id" placeholder='请输入订单号' type='text' class='ant-input'>
              </div>
              <a @click="addOrderNumber()">我有更多订单号</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>-->
<!--&lt;!&ndash;              <a @click="addPhone()">我有更多手机号</a>&ndash;&gt;-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="4.月台组" prop="railwayPlatform">-->
<!--              <a-select   placeholder="请选择月台组"  v-model="model.railwayPlatform" >-->
<!--                <a-select-option  v-for="railwayPlatform in PlatformList" :key="railwayPlatform.code" :value="railwayPlatform.code">{{ railwayPlatform.name}}</a-select-option>-->
<!--              </a-select>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
          <a-col :span="24">
            <a-form-model-item label="5.车型" prop="vehicle">
              <j-dict-select-tag type="list" v-model="model.vehicle" dictCode="car_model"
                                 placeholder="请选择车型"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="6.填表人名称" 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="7.填表人电话" 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,
        },
        dynamicForm: {
          counter: []
        },
        timeSelection:'',
        codez:'',
        disableSubmit:'',
        a:0,
        b:0,
        timeSelectionList:[],
        PlatformList:[],
        timedateList:[],
        model: {
          orderNumber:''
        },
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wxCode:'',
        isShow:false,
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        confirmLoading: false,
        validatorRules: {
          appointmentTime: [
            {required: true, message: '请选择预约时间!'},
          ],
          timeSelection: [
            {required: true, message: '请选择预约时间段!'},
          ],
          orderNumber0: [
            {required: true, message: '请输入订单号!'},
            {pattern: /^.{6,18}$/, message: '请输入6到18位任意字符!'},
          ],
          customerName: [
            {required: true, message: '请输入填表人名称!'},
          ],
          vehicle:[
            { required: true, message: '请选择车型!'},
          ],
          submitPhone: [
            {required: true, message: '请输入填表人电话!'},
            {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!'},
          ],
          // railwayPlatform:[
          //   {required: true, 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() {
      // 判断是微信公众号还是浏览器打开
      if (this.checkBrowserType()){
        this.getCode();
      }
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      getCode(){
        const code = this.getUrlParam('code')
        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.wxCode = code;
        }
      },
      getUrlParam: function (name) {
        var reg=new RegExp('(^|&)'+name+'=([^&]*)(&|$)')
        var r=window.location.search.substr(1).match(reg)
        if(r!=null) return unescape(r[2])
        return null
      },
      checkBrowserType(){
        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
        var ua = navigator.userAgent.toLowerCase();
        // 检查浏览器是否在微信环境下
        if(ua.match(/MicroMessenger/i) == "micromessenger"){
          return true;
        }
        return false;
      },
      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 () {
        // this.$router.push('/404')
        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;
      },

      addOrderNumber() {
        //添加订单号方法
        this.b++;
        let number="numbers"+this.b;
        let params = {id: number}
        this.dynamicForm.counter.push(params);
      },
      onSubmit() {
        // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
        // this.wxCode = getUrlParam('code')
        // this.wxCode = "061eZKFa1skE7D03grHa1Z7q9b2eZKFw";
        const local = window.location.href;
        const code = this.wxCode;
        if (!this.wxCode && this.checkBrowserType()) {
          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.orderNumber = "";
          for (let i = this.b; i >= 0; i--) {
            let temp = document.getElementById("numbers" + i).value;
            if (temp == null){
              continue;
            }
            if (i==0)
            {
              this.model.orderNumber = this.model.orderNumber  + temp;
            }
            else {
              this.model.orderNumber = this.model.orderNumber  + temp + ",";
            }
          }
          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("预约成功！");
                  that.$emit('ok');
                  this.$router.push({
                    name: "Success",
                    query:{
                      description: this.model.driverName,
                      orderCode: this.model.orderNumber,
                      contactNumber:  res.result.submitPhone,
                      time: res.result.appointmentTime + " "+res.result.timeSelection,
                      // railwayPlatform: this.model.railwayPlatform,
                      title:"预约成功"
                    }
                  });
                } else {
                  that.$message.warning(res.message);
                  let list = this.model.orderNumber.split(',');
                  this.model.orderNumber = list[list.length - 1];
                }
              }).finally(() => {
                that.confirmLoading = false;
              })
            }
          })
        }
      }
    }
  }
</script>