ZPSZ-BASE.git - Gitblit

<template>
  <view class="content">
    <Nav title="新增车辆预约" customBack="pages/vehicle/list"></Nav>
    <u--form ref="form1" :model="form" :rules="rules" labelPosition="left" labelWidth="90">
      <view class="title">预约信息</view>
      <view class="container">
 
        <!--        <u-form-item borderBottom :required="true" label="被访人" prop="interviewee">-->
        <!--          <u&#45;&#45;input v-model="form.interviewee" border="none" disabledColor="#ffffff" placeholder="请输入被访人"></u&#45;&#45;input>-->
        <!--        </u-form-item>-->
 
        <!-- <u-form-item :required="true" :borderBottom="isShowDept" label="被访单位" prop="companyName"
          @click="showSex = true;">
          <u--input v-model="form.companyName" border="none" :readonly="true" :disabled="true" @focus="showSex = true;"
            disabledColor="#ffffff" placeholder="请选择被访单位"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item> -->
 
        <u-form-item borderBottom :required="true" label="被访单位" prop="companyName" @click="enterpriseShow = true;">
          <u--input v-model="form.companyName" border="none" :readonly="true" :disabled="true"
            @focus="enterpriseShow = true;" disabledColor="#ffffff" placeholder="请选择被访单位"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
 
 
        <view v-if="isShowDept">
          <u-form-item :required="true" label="被访部门" prop="interviewee" @click="showDept = true;">
            <u--input v-model="form.interviewee" border="none" :readonly="true" :disabled="true"
              @focus="showDept = true;" disabledColor="#ffffff" placeholder="请选择被访部门"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
        </view>
 
        <!--        <u-form-item borderBottom :required="true" label="被访人电话" prop="intervieweePhone">-->
        <!--          <u&#45;&#45;input v-model="form.intervieweePhone" border="none" disabledColor="#ffffff"-->
        <!--            placeholder="请输入被访人电话"></u&#45;&#45;input>-->
        <!--        </u-form-item>-->
 
        <!--        <u-form-item label="进出场类型" :required="true" prop="entryExitFlagName" @click="showIE = true;">-->
        <!--          <u&#45;&#45;input v-model="form.entryExitFlagName" border="none" :readonly="true" :disabled="true"-->
        <!--            disabledColor="#ffffff" placeholder="请选择进出场类型"></u&#45;&#45;input>-->
        <!--          <u-icon slot="right" name="arrow-right"></u-icon>-->
        <!--        </u-form-item>-->
      </view>
      <view class="title">去哪里</view>
      <view class="container">
        <u-form-item :required="true" label="位置" prop="positionList">
          <u-checkbox-group v-model="form.positionList" @change="checkboxChange">
            <u-checkbox :customStyle="{ marginRight: '20px' }" v-for="(item, index) in checkboxList" :key="index"
              :label="item.label" :name="item.name">
            </u-checkbox>
          </u-checkbox-group>
        </u-form-item>
      </view>
 
      <view class="title">联系信息</view>
      <view class="container">
 
 
        <u-form-item borderBottom :required="true" label="来访人" prop="visitor">
          <u--input v-model="form.visitor" border="none" disabledColor="#ffffff" placeholder="请输入来访人"></u--input>
        </u-form-item>
 
 
        <!-- <u-form-item borderBottom :required="true" label="身份证号码" prop="idCard">
          <u--input v-model="form.idCard" border="none" disabledColor="#ffffff" placeholder="请输入身份证号码"></u--input>
        </u-form-item> -->
        <u-form-item :required="true" label="联系电话" prop="phone">
          <u--input v-model="form.phone" border="none" disabledColor="#ffffff" placeholder="请输入联系电话"></u--input>
        </u-form-item>
        <!-- <u-form-item borderBottom label="联系电话" prop="phone">
          <u--input v-model="form.phone" disabledColor="#ffffff" placeholder="请输入联系电话" border="none"></u--input>
        </u-form-item> -->
 
        <!--        <u-form-item borderBottom :required="true" label="来访人单位" prop="visitorUnit">-->
        <!--          <u&#45;&#45;input v-model="form.visitorUnit" border="none" disabledColor="#ffffff" placeholder="请输入来访人单位"></u&#45;&#45;input>-->
        <!--        </u-form-item>-->
 
        <!--        <u-form-item borderBottom :required="true" label="来访事由" prop="remark">-->
        <!--          <u&#45;&#45;input v-model="form.remark" border="none" disabledColor="#ffffff" placeholder="请输入来访事由"></u&#45;&#45;input>-->
        <!--        </u-form-item>-->
 
        <!-- <u-form-item label="来访事由" prop="remark">
 
          <u--input v-model="form.remark"  disabledColor="#ffffff" placeholder="请输入来访事由" border="none"></u--input>
        </u-form-item> -->
        <!--        <u-form-item  label="备注" prop="remark">-->
        <!--          <u&#45;&#45;input-->
        <!--              v-model="form.remark"  placeholder="请输入备注"-->
        <!--              border="none"-->
        <!--          ></u&#45;&#45;input>-->
        <!--        </u-form-item>-->
      </view>
      <view class="title">预约时间</view>
      <view class="container">
        <!-- <u-form-item  label="时间" :required="true" prop="startTime" @click="showTime = true; ">
          <u--input v-model="form.time" border="none" :disabled="true" disabledColor="#ffffff" placeholder="请选择预约时间"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item> -->
 
        <u-form-item label="开始时间" :required="true" prop="startTime" @click="showTimeClick(1)">
          <u--input v-model="form.startTime" border="none" :disabled="true" disabledColor="#ffffff"
            placeholder="请选择开始时间"></u--input>
          <!-- <uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" /> -->
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
 
        <u-datetime-picker ref="datetimePicker" :show="showStartTime" :minDate="minStartTime" @cancel="cancelTimeIshow"
          @confirm="showStartClik" mode="datetime" :formatter="formatter">
          <view>年月日时分</view>
        </u-datetime-picker>
 
        <!-- <u-form-item label="结束时间" :required="true" prop="endTime" @click="showTimeClick(2)">
          <u--input v-model="form.endTime" border="none" :disabled="true" disabledColor="#ffffff"
            placeholder="请选择结束时间"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item> -->
      </view>
 
 
      <view v-for="(item, index) in form.carList" :key="index">
        <view style="display: flex;justify-content: space-between;align-items: center">
          <view class="title" style="color: #f9ae3d">来访车辆{{ index + 1 }}</view>
          <view v-if="index != 0" style="color: red;font-size: 14px" @click="delItem(index)">删除</view>
        </view>
        <view class="container">
          <u-form-item borderBottom :required="true" label="车辆类型" :prop="'carTypeName' + index"
            @click="showCarType = true; activeIndex = index">
            <u--input v-model="item.carTypeName" border="none" :readonly="true" :disabled="true" disabledColor="#ffffff"
              placeholder="请选择车辆类型"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
 
          <u-form-item labelWidth="0" label=" " :prop="'vehicleNum' + index"
            v-for="(cItem, cIndex) in item.vehicleNumList" :key="cIndex">
            <!--:style="{ height:index == indexCp? '180px' : '' }"  -->
            <view @click="platClick(index)">
              <plate @listenPlateChange="(val) => plateChange(val, index, cIndex)" :indexIds="index"
                @bindmyevent="(val, nub) => bindChange(val)" />
            </view>
          </u-form-item>
        </view>
      </view>
 
      <view>
        <u-button @click="addCar" icon="plus" type="success">继续添加来访车辆</u-button>
      </view>
 
 
    </u--form>
 
    <view style="margin-top: 50px">
      <u-button @click="submit" shape="circle" type="primary">确认预约</u-button>
    </view>
 
    <u-calendar :show="showTime" mode="range" @confirm="confirmTime" @close="showTime = false"></u-calendar>
 
    <u-action-sheet :actions="parkList" :show="showSex" title="请选择被访单位" @close="showSex = false" @select="parkSelect">
    </u-action-sheet>
    <u-action-sheet :actions="deptLists" :show="showDept" title="请选择被访部门" @close="showDept = false"
      @select="deptSelect">
    </u-action-sheet>
    <!-- 企业 -->
    <u-picker :show="enterpriseShow" ref="uPicker" :columns="columns" @confirm="confirmEnterprise"
      @cancel="cancelEnterprise"></u-picker>
 
 
    <u-action-sheet :actions="sysEntryExitFlag" :show="showIE" title="请选择进出场类型" @close="showIE = false"
      @select="ieSelect">
    </u-action-sheet>
    <u-action-sheet :actions="sysCarType" :show="showCarType" title="请选择车辆类型" @close="showCarType = false"
      @select="carTypeSelect">
    </u-action-sheet>
    <u-modal :show="show" title="温馨提示" content='提交车辆预约申请成功！请等待审核' @confirm="getSubMsg"></u-modal>
 
  </view>
</template>
 
<script>
import plate from '@/components/plate/index.vue'
import { deptList, dictType, getDeptList, vehicle } from "../../common/api";
function parseTime(time, pattern) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
      time = parseInt(time)
    } else if (typeof time === 'string') {
      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay(),
  }
  return format.replace(/{([ymdhisa])+}/g, (result, key) => {
    let value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') {
      return ['日', '一', '二', '三', '四', '五', '六'][value]
    }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
}
export default {
  name: "index",
  components: {
    plate
  },
  data() {
    return {
      indexCp: -1,
      enterpriseShow: false,
      columns: [],
      bindmyevent: false,
      showDept: false,
      isShowDept: false,
      ishowHeging: false,
      plateNumber: [],
      show: false,
      showSex: false,
      showStartTime: false,
      minStartTime: Date.now(),
      timeSum: 0,
      showIE: false,
      showCarType: false,
      showTime: false,
      activeIndex: 0,
      form: {
        companyId: '',
        companyName: '',
        idCard: '',
        entryExitFlag: 'IE',
        personType: '',
        time: '',
        startTime: parseTime(new Date()),
        endTime: '',
        vehicleType: '3',
        phone: '',
        carList: [
          {
            carType: '1',
            carTypeName: '大陆车',
            vehicleNumList: [''],
          },
        ],
        positionList: [],
        position: 0
      },
      parkList: [],
      deptLists: [],
      sysEntryExitFlag: [],
      sysCarType: [],
      checkboxValue: [],
      checkboxList: [
        { name: 1, label: '物流园' },
        { name: 2, label: '办公楼' },
      ],
      rules: {
        'companyName': {
          type: 'string',
          required: true,
          message: '请选择被访单位',
          trigger: ['blur', 'change']
        },
        'entryExitFlagName': {
          type: 'string',
          required: true,
          message: '请选择进出场类型',
          trigger: ['blur', 'change']
        },
        'positionList': {
          type: 'array',
          required: true,
          message: '请选择位置',
          trigger: ['blur', 'change']
        },
        // 'idCard': [
        //   {
        //     type: 'string',
        //     required: true,
        //     len: 18,
        //     message: '请输入身份证号码',
        //     trigger: ['blur', 'change']
        //   },
        //   {
        //     // 自定义验证函数，见上说明
        //     validator: (rule, value, callback) => {
        //       // 上面有说，返回true表示校验通过，返回false表示不通过
        //       // uni.$u.test.mobile()就是返回true或者false的
        //       return uni.$u.test.idCard(value);
        //     },
        //     message: '身份证号码不正确',
        //     // 触发器可以同时用blur和change
        //     trigger: ['change','blur'],
        //   }
        // ],
        'interviewee': {
          type: 'string',
          required: true,
          message: '请选择被访部门',
          trigger: ['blur', 'change']
        },
        'intervieweePhone': {
          type: 'string',
          required: true,
          message: '请输入被访人电话',
          trigger: ['blur', 'change']
        },
        ' visitor': {
          type: 'string',
          required: true,
          message: '请输入来访人',
          trigger: ['blur', 'change']
        },
        'visitorUnit': {
          type: 'string',
          required: true,
          message: '请输入来访人单位',
          trigger: ['blur', 'change']
        },
        'startTime': {
          type: 'string',
          required: true,
          message: '请选择开始时间',
          trigger: ['blur', 'change']
        },
        'endTime': {
          type: 'string',
          required: true,
          message: '请选择结束时间',
          trigger: ['blur', 'change']
        },
        'remark': {
          type: 'string',
          required: true,
          message: '请输入来访事由',
          trigger: ['blur', 'change']
        },
        'phone': {
          type: 'string',
          required: true,
          message: '请输入联系电话',
          trigger: ['blur', 'change']
        },
      },
    }
  },
 
  onLoad() {
    uni.setNavigationBarTitle({ title: '车辆预约', })
    this.getDeptList();
    this.getDictType();
  },
  methods: {
    getDeptList() {
      deptList().then(res => {
        this.parkList = (res || []).map(item => {
          item.name = item.label
          return item;
        });
        this.columns = []
        if (this.parkList.length > 0) {
          this.parkList.forEach(item => {
            if (item.name == "汇畅公司") {
              this.parkSelect(item)
            }
          });
          this.columns = [this.parkList.map(item => item.name)];
        }
      })
    },
    confirmEnterprise(e) {
      this.parkList.map((item) => {
        if (item.name == e.value[0]) {
          this.parkSelect(item)
          this.form.companyName = e.value[0];
          this.form.companyId = item.id;
        }
      })
      this.enterpriseShow = false;
    },
    cancelEnterprise() {
      this.enterpriseShow = false;
    },
    getDictType() {
      dictType('sys_entry_exit_flag').then(res => {
        this.sysEntryExitFlag = (res || []).map(item => {
          item.name = item.dictLabel
          return item;
        });
        if (this.sysEntryExitFlag.length > 0) {
          this.sysEntryExitFlag.forEach(item => {
            if (item.name == "进园+出园") {
              this.form.entryExitFlagName = item.name
              this.form.entryExitFlag = item.dictValue
            }
          });
        }
 
      })
      dictType('sys_car_type').then(res => {
        this.sysCarType = (res || []).map(item => {
          item.name = item.dictLabel
          return item;
        });
      })
    },
    plateChange(val, index, cIndex) {
      if (val.length >= 7) {
        this.form.carList[index].vehicleNumList[cIndex] = val.join('')
      }
    },
    parkSelect(e) {
      let _this = this;
      _this.form.companyId = e.id
      _this.form.companyName = e.name;
      getDeptList({ companyId: e.id }).then(res => {
        let list = res || [];
        _this.deptLists = list.map(item => { return { id: item.deptId, name: item.deptName } });
        _this.isShowDept = _this.deptLists.length > 0
        
        _this.form.interviewee = '';
        _this.$forceUpdate();
      })
    },
    deptSelect(e) {
      this.showDept = false;
      this.form.interviewee = e.name;
    },
    ieSelect(e) {
      this.form.entryExitFlagName = e.name
      this.form.entryExitFlag = e.dictValue
    },
    carTypeSelect(e) {
      this.form.carList[this.activeIndex].carTypeName = e.name
      this.form.carList[this.activeIndex].carType = e.dictValue
      let number = Number(e.dictValue) == 4 ? 1 : Number(e.dictValue);
      this.form.carList[this.activeIndex].vehicleNumList = Array.from({ length: number }, () => '')
    },
    confirmTime(e) {
      this.form.time = e[0] + '至' + e[1];
      this.form.startTime = e[0] + ' 00:00:00'
      this.form.endTime = e[1] + ' 23:59:59'
      this.showTime = false;
    },
    showStartClik(e) {
      if (this.timeSum == 1) {
        this.form.startTime = this.timestampToDateTime(e.value)
        this.showStartTime = false
      } else if (this.timeSum == 2) {
        this.form.endTime = this.timestampToDateTime(e.value)
        this.showStartTime = false
      }
 
    },
    cancelTimeIshow() {
      this.showStartTime = false
 
    },
    timestampToDateTime(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:00`;
    },
 
    addCar() {
      this.form.carList.push({ carType: '1', carTypeName: '大陆车', vehicleNumList: [''] })
    },
    submit() {
      this.$refs.form1.validate().then(res => {
        let msg = '';
        for (const item of this.form.carList) {
          if (!item.carTypeName) {
            msg = '请选择车辆类型';
            break;
          }
          let so = item.vehicleNumList.some(cItem => !cItem);
          if (so) {
            msg = '请填写车牌号';
            break;
          }
        }
        if (msg) {
          uni.$u.toast(msg)
          return;
        }
        this.form.applyId = this.car_open_id;
        let startDate = new Date(this.form.startTime.replace(' ', 'T'));
        let endDate = new Date(this.form.endTime.replace(' ', 'T'));
        // 检查 endTime 是否小于 startTime
        // if (endDate < startDate) {
        //   uni.$u.toast('结束时间不能小于开始时间');
        //   return;
        // }
        let position = 0;
        this.form.positionList.map(item => {
          position = item + position
        })
        this.form.position = position;
        vehicle(this.form).then(res => {
          this.show = true;
        })
      })
    },
    confirmShow() {
      this.$u.route({
        url: '/pages/vehicle/list?parm=false',
        type: 'redirectTo',
      });
    },
    getSubMsg() {
      let _this = this;
      uni.requestSubscribeMessage({
        tmplIds: ['_kQ8TVF504YIyJ4eShQvfhAB3KYPwqzwezyZy2uSdOk'],
        success(res) {
          _this.confirmShow()
        }, fail(err) {
          _this.confirmShow()
        }
      })
    },
    delItem(index) {
      this.form.carList.splice(index, 1);
    },
    showTimeClick(e) {
      this.timeSum = e
 
      this.showStartTime = true
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      if (type === 'hour') {
        return `${value}时`
      }
      if (type === 'minute') {
        return `${value}分`
      }
      return value
    },
    bindChange(index) {
      this.indexCp = index
      this.$forceUpdate()
    },
    platClick(index) {
      // this.indexCp= index
    },
    checkboxChange(e) {
    }
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.form1.setRules(this.rules)
    if (this.$refs.datetimePicker) {
      this.$refs.datetimePicker.setFormatter(this.formatter)
    }
 
  },
}
</script>
 
<style lang="scss" scoped>
@import "@/common/formCommon";
</style>