jsm-mall-h5-front/src/packageMaterial/pages/newSale/index.vue

<template>
  <zj-page-layout :hasFooter="true">
    <view class="form-container">
      <view class="item">
        <view class="label"><text>*</text>客户电话</view>
        <u--input :maxlength="11" placeholder="请输入" border="none" inputAlign="right" v-model="userMobile"></u--input>
      </view>
      <view class="item">
        <view class="label"><text>*</text>工单单号</view>
        <u--input :readonly="hasOid" placeholder="请输入" border="none" inputAlign="right" v-model="orderNo"></u--input>
      </view>
      <view class="item" @tap="hasOid ? '' : (isShowWebsitDialog = true)">
        <view class="label"><text>*</text>所属网点</view>
        <view class="picker">
          <text class="value" v-if="websit">{{ websit.name }}</text>
          <text class="placeholder" v-else>请选择工单所属网点</text>
          <text class="iconfont icon-jinru"></text>
        </view>
      </view>
      <!-- ------------------------------------ -->
      <view v-for="(item, index) in rpMaterialOrderItemList" :key="index">
        <u-gap height="10" bgColor="#F7F8FF"></u-gap>
        <view class="item">
          <view class="label" style="font-weight: bold">配件信息{{ index + 1 }}</view>
          <view class="label" style="color: red; margin-right: 10rpx" @click="delpeijian(index)">删除</view>
        </view>
        <view class="item">
          <view class="label"><text>*</text>维修标识</view>
          <radio-group
            @change="
              d => {
                item.repairFlag = d.detail.value
              }
            "
          >
            <label style="margin-right: 20upx">
              <radio value="INNER" :checked="item.repairFlag === 'INNER'" />保内
            </label>
            <label> <radio value="OUTSIDE" :checked="item.repairFlag === 'OUTSIDE'" />保外 </label>
          </radio-group>
        </view>
        <view class="item">
          <view class="label"><text>*</text>旧配件编号</view>
          <u--input placeholder="请输入" border="none" inputAlign="right" v-model="item.oldPartsNumber"></u--input>
        </view>
        <view class="item">
          <view class="label"><text>*</text>旧配件名称</view>
          <u--input placeholder="请输入" border="none" inputAlign="right" v-model="item.oldPartsName"></u--input>
        </view>
        <view class="item" @tap="toChooseProduct(index)">
          <view class="label"><text>*</text>新配件名称</view>
          <view class="picker">
            <text class="value" v-if="item">{{ item.goodsName }}</text>
            <text class="placeholder" v-else>选择产品</text>
            <text class="iconfont icon-jinru"></text>
          </view>
        </view>
        <view class="item">
          <view class="label"><text>*</text>新配件编号</view>
          <u--input
            :disabled="true"
            :readonly="true"
            placeholder="请输入"
            border="none"
            inputAlign="right"
            v-model="item.goodsCode"
          ></u--input>
        </view>
      </view>
      <u-gap height="10" bgColor="#F7F8FF"></u-gap>
      <u-button class="btnloukong" text="添加配件" @click="addpeijian"></u-button>
      <u-gap height="10" bgColor="#F7F8FF"></u-gap>
    </view>

    <template slot="footer">
      <view class="footer-btn-group">
        <!-- <u-button
          text="历史记录"
          @click="$navToPage({ url: `/packageMaterial/pages/newSale/orderList?type=${type}` })"
        ></u-button> -->
        <u-button type="primary" text="提交" @click="submitData"></u-button>
      </view>
    </template>

    <zjDialogPicker
      ref="websitDialog"
      :isShow="isShowWebsitDialog"
      :multiple="false"
      :styleType="2"
      :title="'所属网点'"
      :list="websitList"
      :keyName="'name'"
      @cancel="isShowWebsitDialog = false"
      @confirm="confirmWebsitDialog"
    >
    </zjDialogPicker>
  </zj-page-layout>
</template>

<script>
import zjDialogPicker from '@/components/zj-dialog/zj-dialog-picker.vue'

export default {
  components: {
    zjDialogPicker
  },

  data() {
    return {
      hasOid: false,
      wbId: null, // 维保工单
      wbIsAllFee: null, // 维保工单是否包含全部费用
      wbPayType: null, // 维保工单费用支付方式
      type: 'M',
      userMobile: '',
      orderNo: '',
      salesType: 'OUT',
      brand: null,
      brandList: [],
      isShowBrandDialog: false,
      category: null,
      categoryList: [],
      isShowCategoryDialog: false,
      websit: null,
      websitList: [],
      isShowWebsitDialog: false,
      rpMaterialOrderItemList: []
    }
  },

  onLoad({ type, oid = '' }) {
    this.type = type
    this.hasOid = oid.length > 0
    uni.setNavigationBarTitle({
      title: '配件收款'
    })
    this.getWebsitList(() => {
      if (this.hasOid) {
        this.$api
          .post('/pg/order/base/detail', {
            orderBaseId: oid
          })
          .then(res => {
            console.log(res.data)
            const data = res.data
            this.orderNo = oid
            this.userMobile = data.userMobile
            this.websit = this.websitList.find(item => item.websitId == data.websitId) || {}
            if (data.pgOrderProducts && data.pgOrderProducts.length > 0) {
              this.brand = {
                id: data.pgOrderProducts[0].brandId,
                brandName: data.pgOrderProducts[0].brandName
              }
            }
            this.wbId = data.rpProjectRepairId || ''
            this.wbIsAllFee = data.isAllFee || ''
            this.wbPayType = data.feePayMethod || ''
          })
      }
    })
  },

  onShow() {
    var data = this.$getStorage('materialSaleData')
    if (data.dijiIndex !== undefined && this.rpMaterialOrderItemList[Number(data.dijiIndex)]) {
      this.rpMaterialOrderItemList.splice(Number(data.dijiIndex), 1, {
        ...this.rpMaterialOrderItemList[Number(data.dijiIndex)],
        goodsAmount: data.goodsAmount,
        goodsCode: data.goodsCode,
        goodsId: data.goodsId,
        goodsName: data.goodsName,
        unit: data.goodsUnit,
        num: data.num
      })
    }
    this.$removeStorage('materialSaleData')
  },

  methods: {
    addpeijian() {
      this.rpMaterialOrderItemList.push({
        goodsAmount: '',
        goodsCode: '',
        goodsId: '',
        goodsName: '',
        unit: '',
        num: '',
        oldPartsName: '',
        oldPartsNumber: '',
        repairFlag: ''
      })
    },

    delpeijian(index) {
      this.rpMaterialOrderItemList.splice(index, 1)
    },

    getWebsitList(cb) {
      this.$api.get('/user/apply/websit').then(res => {
        this.websitList = res.data
        if (this.websitList.length == 1) {
          this.websit = this.websitList[0]
        }
        cb?.()
      })
    },

    confirmWebsitDialog(e) {
      this.websit = this.websitList[e[0]]
      this.isShowWebsitDialog = false
    },

    toChooseProduct(index) {
      if (!this.websit) return this.$toast('请选择所属网点')
      this.$navToPage({
        url: `/packageMaterial/pages/newSale/product?dijiIndex=${index}&type=${this.type}&categoryId=${
          this.type == 'P' ? this?.category?.categoryId : ''
        }&categoryName=${this.type == 'P' ? this?.category?.name : ''}&userMobile=${this.userMobile}&orderNo=${
          this.orderNo
        }&partsWebsitId=${this.websit.partsWebsitId}&websitId=${this.websit.websitId}&websitName=${
          this.websit.name
        }&wbId=${this.wbId || ''}&wbIsAllFee=${this.wbIsAllFee || ''}&wbPayType=${this.wbPayType || ''}`
      })
    },

    submitData() {
      if (!this.userMobile) return this.$toast('请输入客户电话')
      if (this.rpMaterialOrderItemList.length < 1) return this.$toast('请选择')
      for (var item of this.rpMaterialOrderItemList) {
        if (!item.repairFlag) return this.$toast('维修标识不能为空')
        if (!item.oldPartsNumber) return this.$toast('旧配件编号不能为空')
        if (!item.oldPartsName) return this.$toast('旧配件名称不能为空')
        if (!item.goodsName) return this.$toast('新配件名称不能为空')
        if (!item.goodsCode) return this.$toast('新配件编号不能为空')
      }
      if (!this.orderNo) return this.$toast('请填写工单号')
      this.$setStorage('materialSaleDataZhiFu', {
        type: this.type,
        categoryId: this.type == 'P' ? this?.category?.categoryId : '',
        categoryName: this.type == 'P' ? this?.category?.name : '',
        salesType: 'OUT',
        brandId: null,
        brandName: null,
        websitId: this.websit.websitId,
        websitName: this.websit.name,
        userMobile: this.userMobile,
        orderNo: this.orderNo,
        wbId: this.wbId,
        wbIsAllFee: this.wbIsAllFee,
        wbPayType: this.wbPayType,
        goodsList: this.rpMaterialOrderItemList
      })
      this.$navToPage({
        url: `/packageMaterial/pages/newSale/order`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-container {
  background: #ffffff;
  margin-top: 20rpx;
  border-top: 1px solid #f5f5f5;
  .btnloukong {
    height: 72rpx;
    border: 2rpx solid #005ef4;
    margin: 0;
    background: transparent;
    font-size: 28rpx;
    line-height: 72rpx;
    color: #0268fa;
  }
  .item {
    height: 108rpx;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    .label {
      margin-right: 30rpx;
      text {
        color: $error-color;
      }
    }
    .picker {
      .placeholder {
        color: $sec-font;
      }
      .iconfont {
        margin-left: 12rpx;
        color: $sec-font;
      }
    }
    ::v-deep .u-radio-group {
      flex: unset;
      .u-radio {
        margin-left: 50rpx;
      }
    }
  }
}
</style>