pco/app/pages/disinfect/addDisinfect.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" style="flex: 7;">
          <text style="color: red;">*</text>
          发货人名称：
        </view>
        <view class="r">
          <u-input placeholder="发货人名称" @input="handler()" v-model="form.sendPeople">
          </u-input>
        </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.receivePeople">
          </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.num">
          </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 placeholder="输入产地" @input="handler()" v-model="form.origin">
          </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.unit">
          </u-input>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          包装：
        </view>
        <view class="r">
          <view class="r">
            <u-input placeholder="输入包装" @input="handler()" v-model="form.pack"/>
          </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.flag"/>
        </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.phone"/>
        </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.sourceAddress"/>
        </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.arrivePart"/>
        </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.carName"/>
        </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 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.chinaCarName"/>
        </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.chinaCarNo"/>
        </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 type="number" placeholder="申报电话" @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.applyUnit">
          </u-input>
        </view>
      </view> -->
      <view class="item">
        <view class="l" style="flex: 7;">其他要求：</view>
        <view class="r">
          <u--textarea @input="handler()" v-model="form.remark" placeholder="其他要求及备注">
          </u--textarea>
        </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: [],
      },
      form: {
        declarePeople: '',
        declarePhone: '',
        goodsName: '',
        grossWeight: '',
        num: '',
        origin: '',
        unit: '',
        pack: '',
        flag: '',
        phone: '',
        sourceAddress: '',
        arrivePart: '',
        carName: '',
        carNo: '',
        chinaCarName: '',
        chinaCarNo: '',
        remark: ''
      },
      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: {
    createModal() {
      return {
        sendPeople: '',
        receivePeople: '',
        declarePeople: '',
        declarePhone: '',
        goodsName: '',
        grossWeight: '',
        num: '',
        origin: '',
        unit: '',
        pack: '',
        flag: '',
        phone: '',
        sourceAddress: '',
        arrivePart: '',
        carName: '',
        carNo: '',
        chinaCarName: '',
        chinaCarNo: '',
        remark: ''
      }
    },
    getCustomerList() {
      this.$api.getCustomerList({type: 0}).then(resp => {
        this.customer.customerList = resp.data;
      })
    },
    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('disinfect')
      uni.removeStorageSync('declare')
    },
    handler() {
      let cacheObj = {
        count: 0,
        cache: this.form
      }
      uni.setStorageSync('info', {
        declarePeople: this.form.declarePeople,
        declarePhone: this.form.declarePhone
      })
      uni.setStorageSync('disinfect', cacheObj);
    },
    addStoreCount() {
      let cacheObj = {
        count: 1,
        cache: this.form
      }
      uni.setStorageSync('disinfect', cacheObj);
    },
    setInfo() {
      let info = uni.getStorageSync('info');
      if (info) {
        this.form.declarePeople = info.declarePeople;
        this.form.declarePhone = info.declarePhone
      }
    },
    checkStore() {
      this.setInfo();
      let disinfectStore = uni.getStorageSync('disinfect');
      if (disinfectStore && disinfectStore.count == 0) {
        let that = this;
        let cache = disinfectStore.cache;
        uni.showModal({
          title: '提示',
          content: '检测到您有未完成表单，是否继续？',
          success(resp) {
            if (resp.confirm) {
              that.form = cache
            } else {
              that.cleanFn();
            }
          }
        })
      }
      let declareStore = uni.getStorageSync('declare');
      if (declareStore) {
        let that = this;
        let cache = declareStore.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.check()) {
        return;
      }
      if (this.customerId == '1') {
        this.form.customerId = this.customer.customerList[this.customer.index].id;
      } else {
        this.form.customerId = this.customerId;
      }
      this.$api.addDisinfect(this.$common.removeNull(this.form)).then(resp => {
        if (resp.code == 200) {
          this.addStoreCount();
          this.$common.to('/pages/disinfect/addDisinfectSuccess')
        }
      })
    },
    check() {
      if (!this.form.sendPeople) {
        this.$common.toast('请填写发货人信息');
        return false;
      }
      if (!this.form.receivePeople) {
        this.$common.toast('请填写接货人信息');
        return false;
      }
      if (!this.form.goodsName) {
        this.$common.toast('请填写品名');
        return false;
      }
      if (!this.$common.isNum(this.form.num)) {
        this.$common.toast('数量请填写数字');
        return false;
      }
      if (!this.$common.isNum(this.form.grossWeight)) {
        this.$common.toast('请填写重量');
        return false;
      }
      if (!this.form.origin) {
        this.$common.toast('请填写原产地');
        return false;
      }
      if (!this.form.pack) {
        this.$common.toast('请填写包装');
        return false;
      }
      if (!this.form.flag) {
        this.$common.toast('请填写标记');
        return false;
      }
      if (!this.form.phone) {
        this.$common.toast('请填写号码');
        return false;
      }
      if (!this.form.sourceAddress) {
        this.$common.toast('请填写启运地');
        return false;
      }
      if (!this.form.arrivePart) {
        this.$common.toast('请填写到货口岸');
        return false;
      }
      if (!this.form.carName) {
        this.$common.toast('请填写运输工具');
        return false;
      }
      if (!this.form.carNo) {
        this.$common.toast('请填写工具号码');
        return false;
      }
      if (!this.form.chinaCarName) {
        this.$common.toast('请填写国内运输工具');
        return false;
      }
      if (!this.form.chinaCarNo) {
        this.$common.toast('请填写国内运输工具号码');
        return false;
      }
      if (!this.form.declarePeople) {
        this.$common.toast('请填写申请人');
        return false;
      }
      if (!this.$common.isPhone(this.form.declarePhone)) {
        this.$common.toast('请填写正确申请电话');
        return false;
      }
      return true;
    }
  },

}
</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>