pco/app/pages/onely-disinfect/type-business.vue

<template>
  <view>
    <view class="box">
      <view class="top">
        <text class="title">{{ goods.name }}</text>
      </view>
      <view class="item" v-if="goods.needDeclare==1">
        <view class="l">
          <text style="color: red;" v-if="goods.needDeclare==1">*</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" v-if="goods.needCustomer==1">
        <view class="l">客户：</view>
        <view class="r" style="flex: 12;">
          <picker :disabled="goods.needDeclare==1" v-if="customer.customerList.length>0" class="p-picker"
                  @change="customerChange($event)" :value="customer.index" :range="customer.customerList"
                  range-key="name">
            <text class="p-text">{{ customer.customerList[customer.index].name }}</text>
          </picker>
        </view>
      </view>
      <view class="item" v-if="goods.needOwner==1">
        <view class="l">
          <text style="color: red;">*</text>
          货主：
        </view>
        <view class="r">
          <u-input placeholder="输入货主" v-model="form.owner">
          </u-input>
        </view>
      </view>
      <view class="item">
        <view class="l">作业人员：</view>
        <view class="r">
          <u-input placeholder="输入作业人员" v-model="form.operator">
          </u-input>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;" v-if="goods.needOperateTime">*</text>
          作业时间：
        </view>
        <view class="r">
          <uni-datetime-picker type="datetime" v-model="form.operateTime"/>
        </view>
      </view>
      <view class="item-line">
        <u-row style="height: 40px;">
          <u-col span=4>车辆</u-col>
          <u-col span=8>
            <u-button type="primary" text="添加" @click="addCar" icon="plus"
                      style="width: 60px;height: 26px;" v-if="goods.mulCar==1||car.list.length==0"/>
          </u-col>
        </u-row>
      </view>
      <view class="item" v-for="(car,index) in car.list" :key="index">
        <view class="l">车牌：</view>
        <view class="r">
          <u-input placeholder="车辆" v-model="car.carNo" readonly>
            <view slot="suffix" style="display: flex;">
              <u-icon @click="editCar(car)" size="20" name="edit-pen-fill" color="blue"></u-icon>
              <u-icon style="margin-left:20rpx;" size="20" @click="delCar(car)" name="close-circle-fill"
                      color="red"></u-icon>
            </view>
          </u-input>
        </view>
      </view>
      <view class="item-line" style="margin-top: 30rpx;">
        业务项
      </view>
      <view class="business-list" v-for="(item,index) in typeList">
        <u-row>
          <u-col span="4.5">
            <text>
              <text style="color: red;display: inline;" v-if="item.need==1">*</text>
              {{ item.name }}:
            </text>
          </u-col>
          <u-col span="7.5">
            <u-row>
              <u-col span="10" @click="showSelect(item)">
                {{ item.itemName ? item.itemName : '请选择' }}
              </u-col>
              <u-col span="2" @click="item.itemName='',item.itemId=''" v-if="item.itemId">
                <u-icon style="margin-left:15rpx;display: inline;" size="20" name="close-circle-fill"
                        color="red"></u-icon>
              </u-col>
            </u-row>
          </u-col>
        </u-row>
        <view style="display: flex;position: relative;left: 30%;" v-if="item.itemName">
          <u-number-box style="margin-left: 15rpx;" :disabled="item.inc==0" v-model="item.num"></u-number-box>
          <text style="margin-left: 20rpx;color: red;">
            ¥{{ item.num * item.price }}
          </text>
          <view style="margin-left: 60rpx;" @click="remarkFn(item)">
            备注
          </view>
        </view>
        <u-line></u-line>
      </view>
      <view class="hj" v-show="totalPrice>0">
        合计：{{ totalPrice }}元
      </view>
    </view>
    <u-button type="primary" text="确定" @click="saveFn" v-show="perList.indexOf('tb-flex-business-add')!==-1">
    </u-button>
    <!-- ---------------------------------------------------------- -->
    <view class="bottom-safety"></view>
    <u-picker :show="show" :columns="columns" @confirm="confirmFn" keyName="itemName" @cancel="show=false">
    </u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      columns: [],
      customerId: '1',
      customer: {
        index: 0,
        customerList: [],
      },
      goods: {
        id: '',
        name: '',
        mulCar: 0
      },
      typeList: [],
      allTypeList: [],
      form: {
        customerId: '',
        declareNo: '',
        carNo: '',
        owner: '',
        carSize: '',
        goodsName: '',
        netWeight: '',
      },
      show: false,
      item: {
        items: []
      },
      car: {
        list: [{
          id: '',
          carNo: '',
          index: 0
        }]
      },
      perList: []
    }
  },
  onShow() {
    this.perList = uni.getStorageSync('perList')
  },
  computed: {
    totalPrice() {
      let typeList = this.typeList.filter(obj => obj.itemName);
      let price = 0;
      for (let i in typeList) {
        let type = typeList[i];
        price = price + type.price * type.num;
      }
      return price;
    },
  },
  onLoad(options) {
    this.customerId = uni.getStorageSync('customerId');
    this.goods = JSON.parse(options.goodsJson);
    this.getCustomerList();
    this.getTypeByGoodsId();
    let that = this;
    uni.$on('getSelectDeclare', declare => {
      that.$nextTick(() => {
        that.handlerSelectDeclare(declare)
      })
    })
    uni.$on('getCar', car => {
      that.$nextTick(() => {
        that.handlerCar(car)
      })
    })
    uni.$on('getRemark', type => {
      that.$nextTick(() => {
        that.handlerRemark(type)
      })
    })
  },
  methods: {
    remarkFn(type) {
      let remark = type.remark ? type.remark : '';
      this.$common.to('/pages/onely-disinfect/add-remark?needRemark=' + type.needRemark + '&typeId=' + type.id +
          '&remark=' + remark)
    },
    handlerRemark(type) {
      let typeList = this.typeList;
      typeList.filter(obj => type.typeId == obj.id).forEach(obj => obj.remark = type.remark)
    },
    addCar() {
      this.car.list.push({
        index: Math.random(),
        id: '',
        carNo: '',
        index: 0
      })
    },
    filterItems(car) {
      let carList = this.car.list;
      let filterTypeList = JSON.parse(JSON.stringify(this.allTypeList));
      if (carList.length == 0) {
        this.typeList = filterTypeList;
        return;
      }
      if (!car) {
        let checkList = carList.filter(obj => obj.carType.indexOf('空') === -1);
        if (checkList.length > 0) {
          car = checkList[0];
        }
      }
      let carSize = car.carSize;
      let carType = car.carType;
      if (carType.indexOf('空') !== -1 && carList.length > 1) {
        return;
      }
      let netWeight = car.netWeight;
      let tempList = [];
      for (let i in filterTypeList) {
        let type = filterTypeList[i];
        let items = type.items;
        if (carType) {
          items = items.filter(item => item.itemType && item.itemType.indexOf(carType) !== -1);
        }
        if (carSize && carSize > 1) {
          items = items.filter(item => item.minLength <= carSize && item.carLength >= carSize);
        }
        if (netWeight && netWeight > 1 && carType.indexOf('空') == -1) {
          items = items.filter(item => item.minWeight <= netWeight && item.maxWeight >= netWeight);
        }
        let itemIds = items.map(item => item.id);
        if (itemIds.indexOf(type.itemId) == -1) {
          this.cleanItem(type);
        }
        type.items = items;
        tempList.push(type);
      }
      this.typeList = tempList;
    },
    cleanItem(type) {
      type.itemId = '';
      type.itemName = '';
      type.price = '';
    },
    showSelect(item) {
      if (this.validBefore()) {
        this.columns = [];
        this.columns.push(item.items);
        this.show = true;
      }
    },
    confirmFn(e) {
      let selects = e.value;
      if (selects.length > 0) {
        let item = selects[0];
        let typeId = item.typeId;
        let typeList = this.typeList;
        typeList.filter(obj => obj.id == typeId).forEach(obj => {
          obj.itemId = item.id;
          obj.itemName = item.itemName;
          obj.inc = item.inc;
          obj.price = item.price;
          obj.needRemark = item.needRemark;
        })
      }
      this.show = false;
    },
    getTypeByGoodsId() {
      this.$api.getTypeByGoodsId({
        goodsId: this.goods.id
      }).then(resp => {
        let list = resp.data;
        this.allTypeList = JSON.parse(JSON.stringify(list));
        this.typeList = list;
      })
    },
    getCustomerList() {
      this.$api.getCustomerList({
        pageNo: 1,
        pageSize: 100
      }).then(resp => {
        let list = resp.data;
        let customerId = this.customerId;
        if (customerId !== '1') {
          this.customer.index = list.map(obj => obj.id).indexOf(customerId);
        }
        this.customer.customerList = list;
      })
    },
    customerChange(e) {
      var value = e.detail.value; //当前picker选中的值
      this.customer.index = value;
    },
    handlerCar(car) {
      let list = this.car.list;
      let check = list.filter(obj => obj.carNo == car.carNo).pop();
      if (check) {
        check.carSize = car.carSize;
        check.netWeight = car.netWeight;
        check.carType = car.carType;
      } else {
        this.car.list.push(car);
      }
      this.clearEmptyCar(car);
    },
    clearEmptyCar(car) {
      let list = this.car.list;
      let obj = list.filter(obj => !obj.carNo).pop();
      if (obj) {
        this.car.list.splice(list.indexOf(obj), 1);
      }
      this.filterItems(car);
    },
    handlerSelectDeclare(declare) {
      let oldDeclareNo = this.form.declareNo;
      if (oldDeclareNo && oldDeclareNo !== declare.declareNo) {
        this.car.list = [];
      }
      this.form.declareNo = declare.declareNo;
      this.form.cardNo = declare.carNo;
      this.form.chinaCarNo = declare.chinaCarNo;
      this.form.netWeight = declare.grossWeight;
      this.form.owner = declare.sendUnit;
      let customerList = this.customer.customerList;
      this.customer.index = customerList.map(customer => customer.id).indexOf(declare.customerId);
      let carNo = declare.carNo;
      let grossWeight = declare.grossWeight;
      let carList = this.car.list;
      let exit = carList.filter(obj => obj.carNo == carNo).pop();
      if (!exit) {
        let car = {
          carNo: carNo,
          netWeight: grossWeight,
          carType: '载重'
        }
        this.car.list.push(car)
      }
      this.form.cardNo = declare.carNo;
      this.form.chinaCarNo = declare.chinaCarNo;
      this.form.netWeight = declare.grossWeight;
      let chinaCarNo = declare.chinaCarNo;
      if (chinaCarNo) {
        let list = [];
        chinaCarNo.replace("，", ",").split(",").forEach(carNo => {
          let exit = carList.filter(obj => obj.carNo == carNo).pop();
          if (!exit) {
            let car = {
              carNo: carNo,
              carType: '空车',
            }
            this.car.list.push(car)
          }
        })
      }
      this.clearEmptyCar();
    },

    selectDeclare() {
      this.$common.to('/pages/business-entering/declare-select?declareNo=' + this.form.declareNo)
    },
    editCar(car) {
      let goods = this.goods;
      this.$common.to('/pages/onely-disinfect/car-manager?carJson=' + JSON.stringify(car) + "&needCarSize=" +
          goods.needCarSize + '&needWeight=' + goods.needWeight)
    },

    delCar(car) {
      let list = this.car.list;
      if (list.length == 1) {
        this.$common.toast('至少有一辆车');
        return;
      }
      this.car.list.splice(list.indexOf(car), 1);
      this.filterItems();
    },
    validBefore() {
      let form = this.form;
      let goods = this.goods;
      let needDeclare = goods.needDeclare;
      let needCustomer = goods.needCustomer;
      let index = this.customer.index;
      if (needDeclare == 1 && !form.declareNo) {
        this.$common.toast('请选择申报单');
        return false;
      }
      if (!form.owner && goods.needOwner == 1) {
        this.$common.toast('请填写货主');
        return false;
      }
      let needOperateTime = goods.needOperateTime;
      let operateTime = form.operateTime;
      if (!operateTime && needOperateTime == '1') {
        this.$common.toast('请录入作业时间');
        return false;
      }
      if (operateTime && operateTime.length < 12) {
        this.$common.toast('请录入准确的作业时间');
        return false;
      }
      let carList = this.car.list;
      if (carList.length == 0) {
        this.$common.toast('请录入车辆');
        return false;
      }
      let needCarSize = goods.needCarSize;
      let needWeight = goods.needWeight;
      for (let i in carList) {
        let car = carList[i];
        if (needCarSize == 1 && !car.carSize) {
          this.$common.toast('请补充' + car.carNo + '的规格');
          return false;
        }
        if (needWeight == 1 && car.carType.indexOf('重') !== -1 && !car.netWeight) {
          this.$common.toast('请补充' + car.carNo + '载重');
          return false;
        }
      }
      return true;
    },
    check() {
      let form = this.form;
      let goods = this.goods;
      let needDeclare = goods.needDeclare;
      let needCustomer = goods.needCustomer;
      let index = this.customer.index;
      if (needDeclare == 1 && !form.declareNo) {
        this.$common.toast('请选择申报单');
        return false;
      }
      if (!form.owner && goods.needOwner == 1) {
        this.$common.toast('请填写货主');
        return false;
      }
      let needOperateTime = goods.needOperateTime;
      let operateTime = form.operateTime;
      if (!operateTime && needOperateTime == '1') {
        this.$common.toast('请录入作业时间');
        return false;
      }
      if (operateTime && operateTime.length < 12) {
        this.$common.toast('请录入准确的作业时间');
        return false;
      }
      let carList = this.car.list;
      if (carList.length == 0) {
        this.$common.toast('请录入车辆');
        return false;
      }
      let needCarSize = goods.needCarSize;
      let needWeight = goods.needWeight;
      for (let i in carList) {
        let car = carList[i];
        if (needCarSize == 1 && !car.carSize) {
          this.$common.toast('请补充' + car.carNo + '的规格');
          return false;
        }
        if (needWeight == 1 && car.carType.indexOf('重') !== -1 && !car.netWeight) {
          this.$common.toast('请补充' + car.carNo + '载重');
          return false;
        }
      }
      let typeList = this.typeList;
      let selectList = [];
      for (let i in typeList) {
        let type = typeList[i];
        if (type.need == 1 && !type.itemId) {
          this.$common.toast('【' + type.name + '】必选');
          return false;
        }
        if (type.needRemark == 1 && !type.remark) {
          this.$common.toast('请录入【' + type.name + '】备注');
          return false;
        }
        if (type.itemId) {
          let obj = {
            typeId: type.id,
            typeName: type.name,
            id: type.itemId,
            num: type.num,
            price: type.price,
            remark: type.remark
          }
          selectList.push(obj);
        }
      }
      this.form.itemJson = JSON.stringify(selectList);
      this.form.carJson = JSON.stringify(this.car.list);
      this.form.items = null;
      if (needCustomer == 1) {
        let customerList = this.customer.customerList;
        let index = this.customer.index;
        let customer = customerList[index];
        this.form.customerId = customer.id;
        this.form.customerName = customer.name;
      } else {
        this.form.customerId = '';
        this.form.customerName = '';
      }
      this.form.goodsId = this.goods.id;
      this.form.goodsName = this.goods.name;
      let chinaCarNo = carList
          .filter(car => this.$common.isCarNo(car.carNo.toUpperCase()))
          .map(car => car.carNo.toUpperCase())
          .join("、");
      let yueCarNo = carList
          .filter(car => !this.$common.isCarNo(car.carNo.toUpperCase()))
          .map(car => car.carNo.toUpperCase())
          .join("、");
      this.form.cardNo = yueCarNo;
      this.form.chinaCarNo = chinaCarNo;
      return true;
    },
    saveFn() {
      if (this.check()) {
        let obj = this.$common.removeNull(this.form);
        this.$api.addOtherBusiness(obj).then(resp => {
          if (resp.code == 200) {
            this.$common.toast('录入成功');
            setTimeout(() => {
              this.$common.to('/pages/onely-disinfect/Index')
            }, 1000)
          }
        })
      }
    },
  }
}
</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;
}

.business-list {
  line-height: 75rpx;
  margin: 4rpx 0 0 48rpx;

}

.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>