pco/app/pages/declare/add.vue

<template>
  <view>
    <view class="box">
      <view class="top">
        <text class="title">申报单录入</text>
      </view>
      <view class="item" v-show="customerId=='1'">
        <view class="l">
          <text style="color: red;">*</text>
          申报单位：
        </view>
        <view class="r">
          <picker v-if="customer.customerList.length>0" class="p-picker" id="qy"
                  @change="bindPickerChange($event)" :value="customer.index" :range="customer.customerList"
                  range-key="name">
            <text class="p-text">{{ customer.customerList[customer.index].name }}</text>
            <u-icon class="p-icon" name="arrow-down-fill" size="20"></u-icon>
          </picker>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          申报人：
        </view>
        <view class="r">
          <u-input placeholder="申报人" @input="handler()" v-model="form.declarePeople">
          </u-input>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          申报电话：
        </view>
        <view class="r">
          <u-input placeholder="申报电话" type="number" @input="handler()" v-model="form.declarePhone">
          </u-input>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          产品学名：
        </view>
        <view class="r">
          <u-input placeholder="输入产品学名" @input="handler()" v-model="form.goodsName">
          </u-input>
        </view>
      </view>

      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          毛重：
        </view>
        <view class="r">
          <u-input type="number" placeholder="输入毛重" @input="handler()" v-model="form.grossWeight">
            <text slot="suffix">kg</text>
          </u-input>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          件数：
        </view>
        <view class="r">
          <u-input type="number" placeholder="输入件数" @input="handler()" v-model="form.num">
          </u-input>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          生产日期：
        </view>
        <view class="r">
          <view class="r">
            <uni-datetime-picker placeholder="请选择" :end="startDate" @input="handler()" :clear-icon="false"
                                 type="date" v-model="form.productionDate"/>
          </view>
        </view>
      </view>
      <view class="item">
        <view class="l" style="flex: 7;">
          <text style="color: red;">*</text>
          保质期(天)：
        </view>
        <view class="r">
          <view class="r">
            <u-input placeholder="输入保质期" type="number" @input="handler()" v-model="form.expirationDate"/>
          </view>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          储藏条件：
        </view>
        <view class="r">
          <u-input placeholder="储存条件" @input="handler()" v-model="form.storageMode"/>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          生产方式：
        </view>
        <view class="r">
          <u-input placeholder="生产方式" @input="handler()" v-model="form.productionMode"/>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          原产国：
        </view>
        <view class="r">
          <u-input placeholder="原产国" @input="handler()" v-model="form.origin"/>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          货主单位：
        </view>
        <view class="r">
          <u-input placeholder="货主单位" @input="handler()" v-model="form.sendUnit"/>
        </view>
      </view>
      <view class="item">
        <view class="l" style="flex: 7;">
          <text style="color: red;">*</text>
          生产商注册号：
        </view>
        <view class="r">
          <u-input placeholder="生产商注册号" @input="handler()" v-model="form.producerCode"/>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          收货单位：
        </view>
        <view class="r">
          <u-input placeholder="收货单位" @input="handler()" v-model="form.receiveUnit"/>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          货物流向：
        </view>
        <view class="r">
          <u-input placeholder="货物流向" @input="handler()" v-model="form.route"/>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          运输车辆（车头牌）：
        </view>
        <view class="r">
          <u--textarea @input="handler()" v-model="form.chinaCarNo" placeholder="运输车车头牌,多个请用逗号隔开">
          </u--textarea>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          运输车辆（车尾牌）：
        </view>
        <view class="r">
          <u--textarea @input="handler()" v-model="form.chinaCarSuff" placeholder="运输车车尾牌,多个请用逗号隔开">
          </u--textarea>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          司机姓名：
        </view>
        <view class="r">
          <u--textarea @input="handler()" v-model="form.driverName" placeholder="司机姓名,多个请用逗号隔开"></u--textarea>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          司机电话：
        </view>
        <view class="r">
          <u--textarea @input="handler()" v-model="form.driverPhone" placeholder="司机电话,多个请用逗号隔开">
          </u--textarea>
        </view>
      </view>

      <view class="item">
        <view class="l" style="flex: 7;">
          <text style="color: red;">*</text>
          代理商电话：
        </view>
        <view class="r">
          <u-input type="number" placeholder="代理商电话" @input="handler()" v-model="form.agentPhone"/>
        </view>
      </view>
      <view class="item">
        <view class="l" style="flex: 7;">
          <text style="color: red;">*</text>
          海关报关单据：
        </view>
        <view class="r">
          <u-input placeholder="海关报关单据" @input="handler()" v-model="form.customProof"/>
        </view>
      </view>

      <view class="item">
        <view class="l" style="flex: 7;">
          <text style="color: red;">*</text>
          检验检疫证：
        </view>
        <view class="r">
          <u-input placeholder="检验检疫证" @input="handler()" v-model="form.quarantineProof"/>
        </view>
      </view>
      <view class="item">
        <view class="l">商铺：</view>
        <view class="r">
          <u-input placeholder="商铺" @input="handler()" v-model="form.shop"/>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          生产批号：
        </view>
        <view class="r">
          <u-input placeholder="生产批号" @input="handler()" v-model="form.productionCode"/>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          柜号：
        </view>
        <view class="r">
          <u-input placeholder="柜号" @input="handler()" v-model="form.containerCode"/>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          越南车牌：
        </view>
        <view class="r">
          <u-input placeholder="越南车牌" @input="handler()" v-model="form.carNo"/>
        </view>
      </view>

    </view>
    <u-button type="primary" text="确定" @click="saveFn"></u-button>
    <u-button type="info" text="重置" @click="cleanFn" style="margin-top: 20rpx;"></u-button>
    <!-- ---------------------------------------------------------- -->
    <view class="bottom-safety"></view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      customerId: '1',
      customer: {
        index: 0,
        customerList: [],
      },
      startDate: new Date().getTime() - 24 * 60 * 60 * 1000,
      form: {
        declarePeople: '',
        declarePhone: '',
        goodsName: '',
        grossWeight: '',
        num: '',
        productionDate: '',
        expirationDate: '',
        productionMode: '',
        origin: '',
        sendUnit: '',
        producerCode: '',
        receiveUnit: '',
        route: '',
        storageMode: '',
        driverName: '',
        driverPhone: '',
        agent: '',
        chinaCarNo: '',
        chinaCarSuff: '',
        carNo: '',
        customProof: '',
        quarantineProof: '',
        shop: '',
        productionCode: '',
        containerCode: '',
      },
      perList: []
    }
  },
  onShow() {
    this.customerId = uni.getStorageSync('customerId');
    this.perList = uni.getStorageSync('perList');
  },

  mounted() {
    this.checkStore();
    this.getCustomerList();
  },
  onBackPress() {
    this.$common.to('/pages/index/index');
    return true;
  },
  methods: {
    getCustomerList() {
      this.$api.getCustomerList({type: 0}).then(resp => {
        this.customer.customerList = resp.data;
      })
    },
    createModal() {
      return {
        declarePeople: '',
        declarePhone: '',
        goodsName: '',
        grossWeight: '',
        num: '',
        productionDate: this.$common.forDate(new Date().getTime() - 24 * 60 * 60 * 1000, 1),
        expirationDate: '',
        productionMode: '',
        origin: '',
        sendUnit: '',
        producerCode: '',
        receiveUnit: '',
        route: '',
        storageMode: '',
        driverName: '',
        driverPhone: '',
        agent: '',
        chinaCarNo: '',
        chinaCarSuff: '',
        carNo: '',
        customProof: '',
        quarantineProof: '',
        shop: '',
        productionCode: '',
        containerCode: ''
      }
    },
    bindPickerChange(e) {
      var value = e.detail.value; //当前picker选中的值
      this.customer.index = value;
      this.handler();
    },
    cleanFn() {
      this.form = this.createModal();
      this.cleanStore();
      this.setInfo();
    },
    cleanStore() {
      uni.removeStorageSync('declare')
      uni.removeStorageSync('disinfect')
    },
    handler() {
      let cacheObj = {
        count: 0,
        cache: this.form
      }
      uni.setStorageSync('info', {
        declarePeople: this.form.declarePeople,
        declarePhone: this.form.declarePhone
      })
      uni.setStorageSync('declare', cacheObj);
    },
    addStoreCount() {
      let cacheObj = {
        count: 1,
        cache: this.form
      }
      uni.setStorageSync('declare', cacheObj);
    },
    setInfo() {
      let info = uni.getStorageSync('info');
      if (info) {
        this.form.declarePeople = info.declarePeople;
        this.form.declarePhone = info.declarePhone
      }
    },
    checkStore() {
      let store = uni.getStorageSync('declare');
      this.setInfo();
      if (store && store.count == 0) {
        let that = this;
        let cache = store.cache;
        uni.showModal({
          title: '提示',
          content: '检测到您有未完成表单，是否继续？',
          success(resp) {
            if (resp.confirm) {
              that.form = cache
              if (!that.form.productionDate) {
                that.form.productionDate = that.$common.forDate(new Date().getTime() - 24 *
                    60 * 60 * 1000, 1)
              }
            } else {
              that.cleanFn();
            }
          }
        })
      }
      let disinfectStore = uni.getStorageSync('disinfect');
      if (disinfectStore) {
        let that = this;
        let cache = disinfectStore.cache;
        that.form.declarePeople = cache.declarePeople
        that.form.declarePhone = cache.declarePhone
        uni.showModal({
          title: '提示',
          content: '检测到最近有相似消杀申报信息，是否导入？',
          success(resp) {
            if (resp.confirm) {
              that.form = cache
            } else {
              that.cleanFn();
            }
          }
        })
      }
    },
    saveFn() {
      if (!this.form.declarePeople) {
        this.$common.toast('请填写申报人');
        return;
      }
      if (!this.$common.isPhone(this.form.declarePhone)) {
        this.$common.toast('请填写正确的申报电话');
        return;
      }
      if (!this.form.goodsName) {
        this.$common.toast('请填写产品');
        return;
      }
      if (!this.form.grossWeight || !this.$common.isNum(this.form.grossWeight)) {
        this.$common.toast('毛重只能填写数字');
        return;
      }
      if (!this.form.num || !this.$common.isNum(this.form.num)) {
        this.$common.toast('件数只能填整数');
        return;
      }

      if (!this.form.productionDate) {
        this.$common.toast('请选择生产日期');
        return;
      }
      if (!this.form.expirationDate || !this.$common.isNum(this.form.expirationDate)) {
        this.$common.toast('保质期为正数');
        return;
      }
      if (!this.form.storageMode) {
        this.$common.toast('请填写储藏条件');
        return;
      }
      if (!this.form.productionMode) {
        this.$common.toast('请填写生产方式');
        return;
      }
      if (!this.form.origin) {
        this.$common.toast('请输入原产国');
        return;
      }
      if (!this.form.sendUnit) {
        this.$common.toast('请填写货主单位');
        return;
      }
      if (!this.form.producerCode) {
        this.$common.toast('请填写生产商注册号');
        return;
      }
      if (!this.form.receiveUnit) {
        this.$common.toast('请填写收货单位');
        return;
      }
      if (!this.form.route) {
        this.$common.toast('请填写货物流向');
        return;
      }
      let chinaCarNo = this.form.chinaCarNo;
      if (!chinaCarNo) {
        this.$common.toast('请填写运输车辆车头牌');
        return;
      }
      let noArray = chinaCarNo.replace("，", ",").split(",");
      for (let i in noArray) {
        noArray[i] = noArray[i].toUpperCase();
        if (!this.$common.isCarNo(noArray[i])) {
          this.$common.toast('运输车头牌不正确');
          return;
        }
      }
      let chinaCarSuff = this.form.chinaCarSuff;
      if (!chinaCarSuff) {
        this.$common.toast('请填写运输车辆车尾牌');
        return;
      }
      let suffArray = chinaCarSuff.replace("，", ",").split(",");
      for (let i in suffArray) {
        suffArray[i] = suffArray[i].toUpperCase();
        if (!this.$common.isCarNo(suffArray[i])) {
          this.$common.toast('运输车尾牌不正确');
          return;
        }
      }
      if (!this.form.driverName) {
        this.$common.toast('请填写司机姓名');
        return;
      }
      let driverPhone = this.form.driverPhone;
      if (!driverPhone) {
        this.$common.toast('请填写司机号码');
        return;
      }
      let phoneArray = driverPhone.replace("，", ",").split(",");
      for (let i in phoneArray) {
        let phone = phoneArray[i];
        if (!this.$common.isPhone(phone)) {
          this.$common.toast('司机联系号码不正确');
          return;
        }
      }
      if (!this.$common.isPhone(this.form.agentPhone)) {
        this.$common.toast('代理商联系号码不正确');
        return;
      }
      if (!this.form.customProof) {
        this.$common.toast('海关报关单据');
        return;
      }
      if (!this.form.quarantineProof) {
        this.$common.toast('请填写检验检疫证');
        return;
      }
      if (!this.form.productionCode) {
        this.$common.toast('请填写生产批号');
        return;
      }
      if (!this.form.containerCode) {
        this.$common.toast('请填写柜号');
        return;
      }

      if (!this.form.carNo) {
        this.$common.toast('请填写越南车牌号');
        return;
      }
      if (this.customerId == '1') {
        this.form.customerId = this.customer.customerList[this.customer.index].id;
      } else {
        this.form.customerId = this.customerId;
      }
      this.$api.addDeclare(this.$common.removeNull(this.form)).then(resp => {
        if (resp.code == 200) {
          this.addStoreCount();
          this.$common.to('/pages/declare/addDeclareSuccess')
        }
      })
    },
  },

}
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.hs-item {
  text-align: center;
}

.item-line {
  color: #a2a2a2;
  padding: 5px 0 10px 29px;
  border-bottom: 1px solid #E5E5E5;
}

.hj {
  padding: 50rpx;
  font-size: 40rpx;
  color: red;
  font-weight: bold;
}

.save-btn {
  background-color: #ff4200;
  height: 88rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60rpx;
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  border-radius: 10rpx;
}

@import '@/common/common.scss'
</style>