pco/app-ui/pages/business-entering/business-entering.vue

<template>
  <view>
    <view class="box" v-show="hs.visible">
      <view class="top">
        <text class="title">录入核酸人员</text>
      </view>
      <view style="display: flex;margin-top: 40rpx;">
        <u-button type="primary" @click="hs.visible=false" text="返回" style="width: 20px;" size="mini"/>
        <u-button type="primary" @click="showHsModal" text="添加" v-show="hs.num>hs.list.length" icon="plus"
                  style="width: 20px;" size="mini"/>
      </view>
      <u-row style="margin-top: 70rpx;">
        <u-col span="4" style="text-align: center;">姓名</u-col>
        <u-col span="4" style="text-align: center;">联系号码</u-col>
        <u-col span="4" style="text-align: center;">操作</u-col>
      </u-row>
      <u-row v-for="item in hs.list" style="margin-top: 40rpx;">
        <u-col span="4" style="text-align: center;">{{ item.name }}</u-col>
        <u-col span="4" style="text-align: center;">{{ item.phone }}</u-col>
        <u-col span="4" style="text-align: center;">
          <u-row>
            <u-col span="6">
              <u-button type="primary" text="编辑" style="width: 20px;" @click="editFn(item)" size="mini">
              </u-button>
            </u-col>
            <u-col span="6">
              <u-button type="error" style="width: 20px;" text="删除" @click="deleteFn(item)" size="mini">
              </u-button>
            </u-col>
          </u-row>
        </u-col>
      </u-row>
    </view>
    <view class="box" v-show="china.visible">
      <view class="top">
        <text class="title">中国车录入</text>
      </view>
      <view style="display: flex;margin-top: 40rpx;">
        <u-button type="primary" @click="china.visible=false" text="返回" style="width: 20px;" size="mini"/>
        <u-button type="primary" @click="showChinaModal" text="添加" icon="plus" style="width: 20px;"
                  size="mini"/>
      </view>
      <u-row style="margin-top: 70rpx;">
        <u-col span="3" style="text-align: center;">车牌号</u-col>
        <u-col span="3" style="text-align: center;">联系人</u-col>
        <u-col span="3" style="text-align: center;">联系号码</u-col>
        <u-col span="3" style="text-align: center;">操作</u-col>
      </u-row>
      <u-row v-for="(item,index) in china.list" style="margin-top: 40rpx;">
        <u-col span="3" style="text-align: center;">{{ item.carNo }}</u-col>
        <u-col span="3" style="text-align: center;">{{ item.driverName }}</u-col>
        <u-col span="3" style="text-align: center;">{{ item.driverPhone }}</u-col>
        <u-col span="3" style="text-align: center;">
          <u-row>
            <u-col span="6">
              <u-button type="primary" text="编辑" style="width: 20px;" @click="editChinaCar(item,index)"
                        size="mini">
              </u-button>
            </u-col>
            <u-col span="6">
              <u-button type="error" style="width: 20px;" text="删除" @click="deleteChinaCar(item,index)"
                        size="mini">
              </u-button>
            </u-col>
          </u-row>
        </u-col>
      </u-row>
    </view>
    <view class="box" v-show="!hs.visible&&!china.visible">
      <view class="top">
        <text class="title">整车录入</text>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          申报单号：
        </view>
        <view class="r">
          <u-input placeholder="申报订单号" v-model="form.declareNo" clearable readonly>
            <text slot="suffix" style="font-size: 50rpx;" @click="selectDeclare">+</text>
          </u-input>
        </view>
      </view>
      <view class="item">
        <view class="l">申报单位：</view>
        <view class="r">
          <u-input placeholder="申报单位" disabled @input="handler()" v-model="form.customerName">
          </u-input>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          货物：
        </view>
        <view class="r">
          <picker v-if="goods.goodsList.length>0" class="p-picker" id="hw" @change="whChange($event)"
                  :value="goods.index" :range="goods.goodsList" range-key="name">
            <text class="p-text">{{ goods.goodsList[goods.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 type="number" placeholder="输入载重" @input="handler()" v-model="form.netWeight">
            <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.cardNo"/>
        </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.cardSize">
            <text slot="suffix">米</text>
          </u-input>
        </view>
      </view>
      <view class="item">
        <view class="l">中国车：</view>
        <view class="r">
          <u-input placeholder="中国车" v-model="china.list.map(obj=>obj.carNo).join('、')" readonly>
            <text slot="suffix" style="font-size: 50rpx;" @click="addCar">+</text>
          </u-input>
        </view>
      </view>
      <view class="item-line">
        业务项
      </view>
      <view class="item" v-for="item in filterItemList" :key="item.id" v-if="item.items.length>0">
        <view class="l">
          <text v-if="needTypeId.indexOf(item.id)!==-1" style="color: red;">*</text>
          {{ item.name }}：
        </view>
        <view class="r">
          <view @click="selectItemFn(item)">
            <u-input placeholder="请选择" v-model="item.itemName" readonly clearable style="width: 120px;">
              <u-icon name="close" v-if="item.itemName" slot="suffix" color="#E5E5E5;" size="5"
                      @click="cleanItemSelect(item)"></u-icon>
            </u-input>
          </view>
          <u-input placeholder="数量" :disabled="item.inc==0" border="surround" v-model="item.num" type="number"
                   style="width: 10px;" v-if="item.itemName"></u-input>
          <view style="margin-left: 20rpx;color: red;" v-if="item.itemName">
            {{ item.items.filter(obj => obj.itemName == item.itemName)[0].price * item.num }}元
          </view>
          <u-icon name="plus" style="position: absolute;right: 10rpx;"
                  v-if="item.itemName&&item.name.indexOf('人')!==-1&&item.name.indexOf('核酸')!==-1"
                  @click="addHsFn(item.itemName,item.num)"></u-icon>
        </view>
      </view>
      <view class="hj" v-show="totalPrice>0">
        合计：{{ totalPrice }}元
      </view>
    </view>
    <u-button type="primary" text="确定" @click="saveFn"
              v-show="(!hs.visible&&!china.visible)&&perList.indexOf('tb-business-add')!==-1"></u-button>
    <!-- ---------------------------------------------------------- -->
    <view class="bottom-safety"></view>
    <u-popup :show="car.carInput" :overlay="false" @close="car.carInput=false" borderRadius="10">
      <view style="padding: 40rpx;line-height: 60rpx;text-align: center;">
        <view v-for="item in filterUnitList" :id="item.id"
              style="margin-bottom: 20rpx;border-bottom: 1rpx solid #E5E5E5;" @click="selectCarSize(item)">
          {{ item.unit }}
        </view>
      </view>
    </u-popup>
    <u-popup :show="driver.show" :overlay="false" @close="driver.show=false" borderRadius="10">
      <view style="padding: 40rpx;line-height: 60rpx;text-align: center;">
        <view v-for="item in driver.filterList" :id="item.id"
              style="margin-bottom: 20rpx;border-bottom: 1rpx solid #E5E5E5;" @click="selectDriverFn(item)">
          {{ item.name }}({{ item.idCard }})
        </view>
      </view>
    </u-popup>
    <u-popup :show="show" closeable closeOnClickOverlay @close="show=false">
      <view style="padding: 40rpx;">
        <u-radio-group @change="itemSelectFn" placement="column" v-model="item.itemName">
          <u-radio v-for="item in item.items" :key="item.id" :label="item.itemName" :name="item.itemName"
                   v-if="form.netWeight >= item.minWeight
						&& form.netWeight < item.maxWeight
						&&form.cardSize<=item.carLength
						&&form.cardSize>=item.minLength" style="margin-top: 30rpx;">
          </u-radio>
        </u-radio-group>
      </view>
    </u-popup>
    <u-modal :show="modal.visible" showCancelButton closeOnClickOverlay @cancel="modal.visible=false"
             @confirm="addHsPeopleFn">
      <view style="">
        <u--input placeholder="姓名" border="surround" v-model="modal.form.name"></u--input>
        <u--input style="margin-top: 20rpx;" placeholder="联系号码" border="surround" v-model="modal.form.phone">
        </u--input>
      </view>
    </u-modal>
    <u-modal :show="chinaAddModal.visible" title="中国车" @confirm="sureCarFn" @cancel="chinaAddModal.visible=false"
             showCancelButton cancelText="关闭">
      <view class="slot-content">
        <u-row>
          <u-col span="4">车牌号</u-col>
          <u-col span="8">
            <u--input placeholder="车牌号" v-model="chinaAddModal.form.carNo"></u--input>
          </u-col>
        </u-row>
        <u-row>
          <u-col span="4">联系人</u-col>
          <u-col span="8">
            <u--input placeholder="联系人" v-model="chinaAddModal.form.driverName"></u--input>
          </u-col>
        </u-row>
        <u-row>
          <u-col span="4">联系号码</u-col>
          <u-col span="8">
            <u--input placeholder="联系号码" v-model="chinaAddModal.form.driverPhone"></u--input>
          </u-col>
        </u-row>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      car: {
        carInput: false,
        filterList: [],
      },
      driver: {
        show: false,
        filterList: [],
      },
      customerId: '1',
      exprctStart: new Date().getTime(),
      itemList: [],
      filterItemList: [],
      needTypeId: [],
      noNeedIds: [],
      form: {
        customerId: '',
        customerIndex: 0,
        declareNo: '',
        countryIndex: 0,
        goodsIndex: 0,
        cardNo: '',
        cardSize: '',
        goodsName: '',
        netWeight: '',
        driverName: '',
        driverPhone: '',
        expectInDay: ''
      },
      show: false,
      item: {
        items: []
      },
      customer: {
        index: 0,
        customerList: [],
      },
      carList: [],
      driverList: [],
      unitList: [],
      filterUnitList: [],
      country: {
        index: 0,
        list: ['越南车', '中国车']
      },
      goods: {
        index: 0,
        goodsList: []
      },
      hs: {
        visible: false,
        num: 1,
        list: []
      },
      modal: {
        visible: false,
        form: {
          name: '',
          phone: ''
        }
      },
      china: {
        visible: false,
        index: -1,
        list: []
      },
      chinaAddModal: {
        visible: false,
        form: {
          carNo: '',
          driverName: '',
          driverPhone: ''
        }
      },
      checkItem: '',
      perList: []
    }
  },
  onShow() {
    this.customerId = uni.getStorageSync('customerId');
    this.perList = uni.getStorageSync('perList')
  },
  computed: {
    totalPrice() {
      let itemList = this.itemList.filter(obj => obj.itemName);
      let price = 0;
      for (let i in itemList) {
        let type = itemList[i];
        let items = type.items;
        for (let j in items) {
          let item = items[j];
          if (item.itemName == type.itemName) {
            price += item.price;
            break;
          }
        }
      }
      return price;
    },
  },
  created() {
    this.getGoodsList();
    this.getUnit();
  },
  onLoad(options) {
    let that = this;
    uni.$on('getSelectDeclare', declare => {
      that.$nextTick(() => {
        that.form.declareNo = declare.declareNo;
        that.form.cardNo = declare.carNo;
        that.form.chinaCarNo = declare.chinaCarNo;
        that.form.netWeight = declare.grossWeight;
        that.form.customerId = declare.customerId;
        that.form.customerName = declare.customerName;
        let chinaCarNo = declare.chinaCarNo;
        if (chinaCarNo) {
          let list = [];
          chinaCarNo.replace("，", ",").split(",").forEach(carNo => {
            let obj = {
              carNo: carNo
            }
            list.push(obj);
            that.china.list = list;
          })
        } else {
          that.china.list = [];
        }
        that.handler();
      })
    })
  },
  methods: {
    selectDeclare() {
      this.$common.to('/pages/business-entering/declare-select?declareNo=' + this.form.declareNo)
    },
    addCar() {
      this.china.visible = true;
    },
    showChinaModal() {
      Object.assign(this.chinaAddModal, {
        visible: true,
        index: -1,
        form: {
          carNo: '',
          driverName: '',
          driverPhone: ''
        }
      })
    },
    sureCarFn() {
      let form = this.chinaAddModal.form;
      let carNo = form.carNo;
      let phone = form.driverPhone;
      if (carNo && !this.$common.isCarNo(carNo)) {
        this.$common.toast('请输入正确的车牌号')
        return;
      }
      if (phone && !this.$common.isPhone(phone)) {
        this.$common.toast('请输入正确的手机号')
        return;
      }
      let list = this.china.list;
      let index = this.chinaAddModal.index;
      if (index > -1) {
        list.splice(index, 1)
      }
      list.push(form)
      this.chinaAddModal.visible = false;
    },
    deleteChinaCar(item, index) {
      this.china.list.splice(index, 1);
    },
    editChinaCar(item, index) {
      Object.assign(this.chinaAddModal, {
        visible: true,
        index: index,
        form: item
      })
    },
    whChange(event) {
      let index = event.detail.value; //当前picker选中的值
      this.goods.index = index;
      let goods = this.goods.goodsList[index];
      let noNeedIds = goods.noNeedIds.split(',');
      this.needTypeId = goods.needIds.split(',');
      this.noNeedIds = goods.noNeedIds.split(',')
      this.filterItemList = this.itemList.filter(obj => noNeedIds.indexOf(obj.id) == -1);
      this.handler();
    },
    carSizeInput() {
      let carSize = this.form.cardSize;
      let filterUnitList = this.unitList.filter(obj => obj.unit.indexOf(carSize) !== -1);
      this.car.carInput = filterUnitList.length > 0;
      this.filterUnitList = filterUnitList;
      this.handler();
    },
    getUnit() {
      this.$api.getUnitList().then(resp => {
        this.unitList = resp.data;
      })
    },
    selectCarSize(data) {
      this.form.cardSize = data.unit;
      this.car.carInput = false;
      this.handler();
    },
    expectDayChange(date) {
      this.form.expectInDay = date;
      this.handler();
    },
    addHsFn(itemName, num) {
      this.hs.visible = true;
      this.hs.num = num;
    },
    showHsModal() {
      Object.assign(this.modal, {
        visible: true,
        form: {
          name: '',
          phone: '',
          index: -1
        }
      });
    },
    addHsPeopleFn() {
      if (!this.modal.form.name) {
        this.$common.toast('请输入名称');
        return;
      }
      if (this.modal.form.phone && !this.$common.isPhone(this.modal.form.phone)) {
        this.$common.toast('联系号码不正确');
        return;
      }
      let dbIndex = this.modal.form.index;
      if (dbIndex >= 0) {
        this.hs.list[dbIndex].name = this.modal.form.name;
        this.hs.list[dbIndex].phone = this.modal.form.phone;
      } else {
        this.modal.form.index = this.hs.list.length;
        this.hs.list.push(this.modal.form);
      }
      this.modal.visible = false;
      this.handler();
    },
    editFn(data) {
      Object.assign(this.modal, {
        visible: true,
        form: data
      })
    },
    deleteFn(data) {
      this.hs.list.splice(data.index, 1);
      if (data.id) {
        this.$api.deleteHsPeople({
          id: data.id
        });
      }
    },
    getGoodsList() {
      this.$api.getGoodsList().then(resp => {
        this.goods.goodsList = resp.data;
        let goods = resp.data[0];
        let noNeedIds = goods.noNeedIds.split(',');
        this.needTypeId = goods.needIds.split(',')
        this.noNeedIds = goods.noNeedIds.split(',')
        this.$api.getItemList({business: 1}).then(resp => {
          let list = resp.data;
          this.itemList = list;
          this.filterItemList = list.filter(obj => noNeedIds.indexOf(obj.id) == -1);
          this.checkStore();
        })
      })
    },
    handlerTypeItem(goods) {

    },
    idCardInput() {
      let val = this.form.driverIdCard;
      let list = this.driverList.filter(obj => obj.idCard.indexOf(val) !== -1);
      if (list.length > 0 && val) {
        this.driver.show = true;
        this.driver.filterList = list;
      } else {
        this.driver.show = false;
      }
    },
    selectDriverFn(item) {
      this.form.driverIdCard = item.idCard;
      this.form.driverName = item.name;
      this.form.driverPhone = item.phone
      let that = this;
      setTimeout(() => {
        that.driver.show = false;
      }, 150)
    },
    carInputFn() {
      this.handler();
    },
    selectCarNo(item) {
      this.form.cardNo = item.cardNo;
      this.form.cardSize = item.cardSize;
      this.form.netWeight = item.lastNetWeight;
      let names = this.goods.goodsList.map(obj => obj.name);
      let index = names.indexOf(item.lastGoodsName);
      this.goods.index = index == -1 ? 0 : index;
      this.country.index = this.country.list.indexOf(item.countryName)
      let that = this;
      this.handler();
      setTimeout(() => {
        this.car.carInput = false;
      }, 150)

    },
    selectItemFn(item) {
      this.item = item;
      this.show = true;
    },
    cleanItemSelect(item) {
      item.itemName = '';
      setTimeout(() => {
        this.show = false;
        this.checkItem = ''
      }, 80)
    },
    itemSelectFn(data) {
      this.show = false;
      this.item.itemName = data;
      this.handler();
    },
    handler() {
      let goodsIndex = this.goods.index;
      let countryIndex = this.country.index;
      this.form.goodsName = this.goods.goodsList[goodsIndex].name;
      this.form.countryName = this.country.list[countryIndex];
      this.form.goodsIndex = goodsIndex;
      this.form.countryIndex = countryIndex;
      this.form.peopleJson = JSON.stringify(this.hs.list);
      this.form.carJson = JSON.stringify(this.china.list);
      let customerId = this.customerId;
      let inputItem = this.filterItemList
          .filter(obj => obj.itemName).map(o => {
            return {
              typeId: o.id,
              itemName: o.itemName,
              num: o.num
            }
          });
      this.form.inputItemJson = JSON.stringify(inputItem);
      let that = this;
      uni.setStorage({
        key: 'business_' + customerId,
        data: that.form
      })
    },
    checkStore() {
      let customerId = this.customerId;
      let data = uni.getStorageSync('business_' + customerId)
      if (data) {
        let that = this;
        uni.showModal({
          title: '提示',
          content: '您上次录入数据未提交，是否继续？',
          cancelText: '重新录入',
          confirmText: '继续',
          success(res) {
            if (res.confirm) {
              that.rebackStore(data);
            } else {
              uni.removeStorageSync('business_' + customerId)
            }
          }
        })
      }
    },
    rebackStore(data) {
      this.form = data;
      this.goods.index = data.goodsIndex ? data.goodsIndex : 0;
      this.hs.list = data.peopleJson ? JSON.parse(data.peopleJson) : [];
      this.china.list = data.carJson ? JSON.parse(data.carJson) : [];
      if (data.inputItemJson) {
        let inputItemList = JSON.parse(data.inputItemJson);
        let filterList = this.filterItemList;
        for (let i in filterList) {
          let type = filterList[i];
          for (let j in inputItemList) {
            let s = inputItemList[j];
            if (type.id == s.typeId) {
              type.itemName = s.itemName;
              type.num = s.num;
              break;
            }
          }
        }
      }
      setTimeout(() => {
        this.car.carInput = false;
      }, 100)
    },
    check() {
      this.handler();
      if (!this.form.cardNo) {
        this.$common.toast('请录入境外车牌号')
        return false;
      }
      if (!this.$common.isNum(this.form.cardSize)) {
        this.$common.toast('车辆规格请录入数字')
        return false;
      }
      if (!this.form.netWeight || !this.$common.isNum(this.form.netWeight)) {
        this.$common.toast('载重必须输入数字')
        return false;
      }
      let typeList = this.filterItemList.filter(obj => obj.itemName);
      if (typeList.length == 0) {
        this.$common.toast('至少选择一项业务项')
        return false;
      }
      let noNeedIds = this.noNeedIds;
      let needIds = this.needTypeId;
      for (let i in needIds) {
        if (typeList.map(obj => obj.id).indexOf(needIds[i]) == -1) {
          this.$common.toast('缺少必选业务');
          return false;
        }
      }
      let peopleList = this.hs.list;
      if (typeList.filter(obj => obj.name.indexOf('人') !== -1 &&
              obj.name.indexOf('核酸') !== -1).length > 0 &&
          peopleList.length == 0) {
        this.$common.toast('录入核酸检测人员')
        return false;
      }
      let list = [];
      for (let i in typeList) {
        let type = typeList[i];
        type.num = 1;
        for (let j in type.items) {
          let item = type.items[j];
          if (type.itemName == item.itemName) {
            type.itemId = item.id;
            break;
          }
        }
        list.push({
          itemId: type.itemId,
          num: type.num
        })
      }
      this.form.itemJson = JSON.stringify(list);
      this.form.peopleJson = JSON.stringify(peopleList);
      this.form.carJson = JSON.stringify(this.china.list);
      this.form.items = null;
      if (this.customerId == '1') {
      } else {
        this.form.customerId = this.customerId;
      }
      this.form.goodsName = this.goods.goodsList[this.goods.index].name;

      return true;
    },
    saveFn() {
      if (this.check()) {
        let obj = this.$common.removeNull(this.form);
        this.$api.saveBusiness(obj).then(resp => {
          if (resp.code == 200) {
            uni.removeStorageSync('business_' + this.customerId);
            this.$common.toast('录入成功');
            this.hs.list = [];
            setTimeout(() => {
              this.$common.to('/pages/business-order/business-order')
            }, 1000)
          }
        })
      }
    },
    bindPickerChange(e) {
      var nowId = e.target.id; //当前picker的ID id需要自己设置 在picker中
      var value = e.detail.value; //当前picker选中的值
      switch (nowId) { //根据ID判断是哪个picker
        case "qy": //picker的ID
          this.customer.index = value;
          break;
        case "hw": //picker的ID
          this.goods.index = value;
          break;
        case "gj": //picker的ID
          this.country.index = value;
          break;
      }
      this.handler();
    },
  }
}
</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>