index.vue

<template>
  <div class="app-container">
    <h2>{{ title }}-{{ order.orderNo }}</h2>

    <order-base-info :order="order"></order-base-info>

    <div style="margin-top: 20px;display: none">
      <span>{{$t('储位')}}：{{ ($refs.area ? $refs.area.selected : []).join(',') }}</span>
      <el-button type="primary" size="mini" @click="areaVisible = true" style="margin-left: 15px">{{$t('选择')}}</el-button>
    </div>

    <h2>{{$t('货物信息')}}</h2>
    <el-table
      :data="order.orderItemVOList || []"
      style="width: 100%">
      <el-table-column
        type="index"
        width="50"
        :label="$t('序号')">
      </el-table-column>
      <el-table-column
        prop="prodTitleZh"
        :label="$t('品名')">
        <template v-slot="{row}">
          {{ row.prodTitleZh }}<br>
          {{ row.prodTitleEn }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('填单货物属性')">
        <template v-slot="{row}">
          <span v-if="row.isWarehouseInAdd">{{$t('非填单货物信息')}}</span>
          <template v-else>
            {{$t('品牌')}}：{{ [$t('无牌'), $t('有牌'), $t('中性')][row.brandType] }}<br>
            {{$t('箱数')}}：{{ row.num }}<br>
            {{$t('体积')}}：{{ row.volume }}m³<br>
            {{$t('重量')}}：{{ row.weight }}Kg
          </template>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('入库货物属性')">
        <template v-slot="{row}">
          <template v-if="row.warehouseInInfoVO">
            {{$t('品牌')}}：{{ [$t('无牌'), $t('有牌'), $t('中性')][row.feeType] }}<br>
            {{$t('箱数')}}：{{ row.warehouseInInfoVO.cartonsNum }}<br>
            {{$t('体积')}}：{{ row.warehouseInInfoVO.volume }}m³<br>
            {{$t('重量')}}：{{ row.warehouseInInfoVO.weight }}Kg
          </template>
          <span v-else>{{$t('暂无入仓信息')}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="expressNo"
        v-slot="{row}"
        :label="$t('快递单号')">
        {{ row.warehouseInInfoVO ? row.warehouseInInfoVO.expressNo : '' }}
      </el-table-column>
      <el-table-column
        prop="createTime"
        :label="$t('最后操作时间')">
        <template v-slot="{row}">
          {{ parseTime(row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="diffType"
        v-slot="{row}"
        :label="$t('状态')">
        <dict-tag
          v-if="row.warehouseInInfoVO && row.warehouseInInfoVO.diffType"
          :type="DICT_TYPE.ORDER_WAREHOUSE_IN_STATUS"
          :value="row.warehouseInInfoVO.diffType"
          class="red"
          :class="{green: row.warehouseInInfoVO.diffType === 4}"
        />
        <span :class="{red: row.itemStatus === 3}" v-else>{{ row.itemStatus === 3 ? ($t('少了') + row.num + $t('箱')) : $t('待入仓') }}</span>
        <span class="red" v-if="row.warehouseInInfoVO && row.warehouseInInfoVO.cartonsNumDiff">{{ row.warehouseInInfoVO.cartonsNumDiff }}{{$t('箱')}}</span>
      </el-table-column>
      <el-table-column
        prop="address"
        :label="$t('操作')">
        <template v-slot="{ row, column, $index }">
          <warehouse v-if="isEdit" :warehousing="{...order.orderItemVOList[$index], ...orderItemList[$index]}" :title="$t('修改')" :order="order" @close="getList"></warehouse>
<!--          <el-button v-if="isEdit" size="mini" type="text" @click="handleWarehousing(row)">{{$t('修改')}}</el-button>-->
          <template v-else-if="wareItem(row.orderItemId) && wareItem(row.orderItemId).orderWarehouseInBackItemDoList && wareItem(row.orderItemId).orderWarehouseInBackItemDoList.length > 0">
<!--            <template v-if="!order.parentOrderId">-->
            <warehouse :warehousing="{...order.orderItemVOList[$index], ...orderItemList[$index]}" :title="$t('追加')" :order="order" @close="getList"></warehouse>
<!--            <el-button size="mini" type="text" @click="handleWarehousing(row)">{{$t('追加')}}</el-button>-->
              <el-button size="mini" type="text" @click="handleWarehousingReturn(row)">{{$t('退仓')}}</el-button>
<!--            </template>-->
          </template>
          <warehouse v-else :warehousing="{...order.orderItemVOList[$index], ...orderItemList[$index]}" :title="$t('入仓')" :order="order" @close="getList"></warehouse>
<!--          <el-button v-else size="mini" type="text" @click="handleWarehousing(row)">{{$t('入仓')}}</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <el-card v-if="order.parentOrderId" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span style="font-size: 18px">{{$t('标签箱号')}}</span>
      </div>

      <div v-for="(item, index) in label.orderLabelDtoList" :key="index" style="margin-bottom: 10px">
        <el-input-number v-model="item.start" controls-position="right"></el-input-number> -
        <el-input-number v-model="item.end" controls-position="right"></el-input-number>
        <el-button icon="el-icon-minus" circle v-show="index !== 0" @click="label.orderLabelDtoList.splice(index, 1)" style="margin-left: 10px"></el-button>
        <el-button icon="el-icon-plus" circle @click="handleLabelAdd(index)"></el-button>
      </div>
      <div style="text-align: center">
        <el-button type="primary" @click="handleLabelSubmit">{{$t('修改箱号')}}</el-button>
      </div>
    </el-card>

    <h2 v-if="orderSpecialNeeds.length > 0">{{$t('特殊需求')}}</h2>
    <el-form ref="form" :model="form" label-width="200px">
      <el-form-item :label="$i18n.locale === 'en_US' ? item.labelEn : item.label" v-for="(item, index) in orderSpecialNeeds" :key="item.value" style="width: 600px">
        <el-input v-model="form.orderSpecialNeedReceivableReqVoList[index].receivableMoney" :placeholder="$t('请输入') + ($i18n.locale === 'en_US' ? item.labelEn : item.label)">
          <el-select v-model="form.orderSpecialNeedReceivableReqVoList[index].receivableMoneyCurrency" :placeholder="$t('请选择')" slot="append" style="width: 100px">
            <el-option
              v-for="item in currencyList"
              :key="item.id"
              :label="$i18n.locale === 'en_US' ? item.titleEn : item.titleZh"
              :value="item.id">
            </el-option>
          </el-select>
        </el-input>
      </el-form-item>

      <h2>{{$t('订单数据')}}</h2>
      <el-form-item :label="$t('总方数')" style="width: 380px">
        <el-input v-model="form.sumVolume" :placeholder="$t('请输入总方数')" readonly>
          <span slot="append">m³</span>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('总重量')" style="width: 380px">
        <el-input v-model="form.sumWeight" :placeholder="$t('请输入总重量')" readonly>
          <span slot="append">kg</span>
        </el-input>
      </el-form-item>

      <el-card style="margin-top: 15px;">
        <div slot="header" class="clearfix">
          <span style="font-size: 18px">{{$t('入仓影像')}}</span>
        </div>
        <div>
          <image-and-video-upload :fileSize="50" :isShowTip="true" v-model="form.urls" ></image-and-video-upload>
        </div>
      </el-card>
      <div style="text-align: center;margin-top: 15px" v-if="!isEdit">
        <el-button @click="escapeBol = true;" type="primary">{{$t('转异')}}</el-button>
        <el-button type="primary" @click="finishVisible = true">{{$t('完成入仓')}}</el-button>
      </div>
    </el-form>

    <warehouse-area-dialog ref="area" :visible.sync="areaVisible" v-model="form.orderLocationCreateReqVOList"
                           :order-id="orderId" :warehouse-id="warehouseId" :is-editing="isEdit"></warehouse-area-dialog>

    <edit-dialog :order="order" :title="title" :order-id="order.orderId" :visible.sync="warehousingVisible" :warehousing="warehousing" :edit="isEdit" :is-jiyun="order.type === 1 || order.type === '1'"></edit-dialog>

<!--  完成入仓  -->
    <el-dialog
      :title="$t('确认入仓')"
      :visible.sync="finishVisible"
      width="300px">
      <div style="text-align: center">{{$t('在完成入仓前，您还可以')}}</div>
      <div style="text-align: center;padding: 15px 0">
        <el-button type="info" @click="areaVisible = true">{{$t('选择储位')}}</el-button>
        <el-button type="info" @click="isShowPrintTag = true">{{$t('打印标签')}}</el-button>
      </div>
      <div style="text-align: center">
        <el-button type="primary" @click="handleSubmit()">{{$t('确 定')}}</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="order.orderNo + $t('订单转异')" center :visible.sync="escapeBol">
      <el-form label-position="top" label-width="200">
        <el-form-item :label="$t('原因类型')">
          <dict-selector v-model="form.manualExceptionType" form-type="checkbox" :type="DICT_TYPE.MANUAL_EXCEPTION_TYPE" multiple ></dict-selector>
        </el-form-item>
        <el-form-item :label="$t('附件')">
          <image-upload v-model="form.exceptionUrls"></image-upload>
        </el-form-item>
        <el-form-item :label="$t('详细信息')">
          <el-input v-model="form.descZh" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="handleSubmit">{{$t('确认并完成入仓')}}</el-button>
        <el-button @click="escapeBol = false">{{$t('取消')}}</el-button>
      </span>
    </el-dialog>

    <print-tag v-if="isShowPrintTag" :order-id="orderId" @close="isShowPrintTag = false"></print-tag>

    <print-warehouse-receipt v-if="isShowPrint" :order-id="orderId" @close="isShowPrint = false" />
  </div>
</template>

<script>
import {getCurrencyList} from "@/api/ecw/currency"
import {
  getLabelByOrder, getLabelWaitInByOrder,
  getOrder,
  getOrderWarehouseIn,
  getSpecialListByOrderId, listByOrderId,
  orderWarehouseInFinish, orderWarehouseInUpdateLabel,
  rollbackDelete, warehousePictureList
} from '@/api/ecw/order'
import orderBaseInfo from "@/components/OrderBaseInfo"
import WarehouseAreaDialog from '@/components/WarehouseAreaDialog'
import editDialog from '@/views/ecw/order/warehousing/components/editDialog'
import {DICT_TYPE} from "@/utils/dict"
import PrintTag from "@/views/ecw/order/components/PrintTag"
import PrintWarehouseReceipt from "@/views/ecw/order/components/PrintWarehouseReceipt"
import imageUpload from "@/components/ImageUpload";
import {parseTime} from "@/utils/ruoyi"
import ImageAndVideoUpload from '@/components/ImageAndVideoUpload'
import Warehouse from "@/views/ecw/order/warehousing/components/Warehouse"
export default {
  name: "Warehousing",

  components: {
    orderBaseInfo,
    WarehouseAreaDialog,
    editDialog,
    PrintTag,
    PrintWarehouseReceipt,
    imageUpload,
    ImageAndVideoUpload,
    Warehouse
  },

  mounted() {
    if(this.$route.query.id){
      this.orderId = parseInt(this.$route.query.id || undefined)
      getOrderWarehouseIn(this.orderId).then(r => this.orderItemList = r.data)
      getSpecialListByOrderId(this.orderId).then(r => this.specialList = r.data)

      Promise.all([
        this.getOrder(),
        listByOrderId({ orderId: this.orderId }).then(r => {
          this.form.orderLocationCreateReqVOList = r.data
        })
      ]).then(() => {
        // 等待仓库id和已选的储位后初始化储位信息
        this.$nextTick(() => {
          this.$refs.area.updateArea()
        })
      })
    }
    getCurrencyList().then(res => this.currencyList = res.data)
  },

  data() {
    return {
      parseTime,
      DICT_TYPE,
      areaVisible: false,
      finishVisible: false,
      warehousingVisible: false,
      form: {
        orderSpecialNeedReceivableReqVoList: [],
        orderLocationCreateReqVOList: [],
        exceptionUrls:[],
        descZh:'',
        manualExceptionType:'',
        urls: [],
        sumVolume: '',
        sumWeight: '',
      },
      currencyList:[],
      order: {},
      orderId: undefined,
      orderItemList: [],
      specialList: [],
      warehousing: undefined,
      isShowPrintTag: false,
      isShowPrint: false,
      escapeBol:false,

      label: {
        "orderId": 0,
        "orderLabelDtoList": [
          {
            "end": 0,
            "start": 0
          }
        ]
      }
    }
  },

  methods: {
    getList(){
      this.getOrder()
      getOrderWarehouseIn(this.orderId).then(r => this.orderItemList = r.data)
    },
    getWarehousePictureList(){
      return warehousePictureList({
        bizId: this.order.orderId,
        type: 1
      }).then(r =>{
        this.form.urls = r.data.map(i =>i.url)
      })
    },
    include(){
      return (state, arr) => {
        return arr.indexOf(state) > -1
      }
    },
    exclude(){
      return (state, arr) => {
        return arr.indexOf(state) == -1
      }
    },
    handleLabelSubmit(){
      orderWarehouseInUpdateLabel({
        ...this.label,
        orderId: this.orderId
      }).then(r => {
        if (r.code === 0){
          this.$message.success(r.msg || this.$t('修改标签箱号成功'))
        }
      })
    },

    // 箱号标签回显
    getLabelByOrder(){
      getLabelByOrder(this.orderId).then(r => {
        if (r.code === 0 && !! r.data && r.data.length > 0) {
          this.label.orderLabelDtoList = r.data
        } else {
          // 没有历史数据，查默认值
          getLabelWaitInByOrder(this.orderId).then(r => {
            console.log(r)
            if (r.code === 0 && !! r.data) {
              this.label.orderLabelDtoList = [r.data]
            }
          })
        }
      })
    },
    handleLabelAdd(index){
      this.label.orderLabelDtoList.splice(index + 1, 0, {
        "end": '',
        "start": ''
      })
    },
    getTowSum(){
      // let sumVolume = 0
      // let sumWeight = 0
      // this.order.orderItemVOList.forEach(e => {
      //   if (e?.warehouseInInfoVO?.volume) sumVolume += e.warehouseInInfoVO.volume
      //   if (e?.warehouseInInfoVO?.weight) sumWeight += e.warehouseInInfoVO.weight
      // })
      this.form.sumVolume = this.order.sumVolume// || sumVolume
      this.form.sumWeight = this.order.sumWeight// || sumWeight
    },
    getOrder(){
      return getOrder(this.orderId).then(r => {
        this.order = r.data
        this.getTowSum()
      }).then(() => {
        this.getLabelByOrder()
        this.getWarehousePictureList()
      })
    },
    specialHas0(){
      let result = false
      this.form.orderSpecialNeedReceivableReqVoList.forEach(e => {
        if (e.receivableMoney === '0' || e.receivableMoney === ''){
          result = true
        }
      })
      return result
    },
    async handleSubmit() {
      if (this.specialHas0()) {
        const confirm = await this.$confirm(this.$t('有特需费用为0或未填写，请问是否继续？'), this.$t('注意'), {
          confirmButtonText: this.$t('继续'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        })
        if (confirm !== 'confirm'){
          return
        }
      }
      let form = {
        orderSpecialNeedReceivableReqVoList: this.form.orderSpecialNeedReceivableReqVoList,
        "orderLocationCreateReqVOList": this.form.orderLocationCreateReqVOList,
        "orderId": this.order.orderId,
        urls: this.form.urls,
        sumVolume: this.form.sumVolume,
        sumWeight: this.form.sumWeight,
        isAppend: this.isAdd
      }

      // 标签箱号
      if (this.order.parentOrderId) {
        form.labelList = this.label.orderLabelDtoList || []
      }

      if (this.escapeBol) {
        form.exceptionUrls = this.form.exceptionUrls.length !== 0 ? this.form.exceptionUrls?.split(',') : []
        form.descZh = this.form.descZh;
        form.manualExceptionType = this.form.manualExceptionType.join(',')
      }
      orderWarehouseInFinish(form).then(r => {
        if (r.code === 0) {
          this.escapeBol = false;
          this.finishVisible = false
          const message = !r.data ? this.$t('该订单已成功入仓，是否打印？') : `<h3>${this.$t('货物已入仓，存在异常')}</h3>${this.$t('该订单已成功入仓，是否打印？')}`
          this.$confirm(
            message,
            this.$t('货物已入仓'),
            {
              confirmButtonText: this.$t('是'),
              cancelButtonText: this.$t('否'),
              dangerouslyUseHTMLString: true
            }
          ).then(() => {
            this.isShowPrint = true
          }).catch(() => {
            // this.$store.dispatch('tagsView/delVisitedView')
            this.$message.success(this.$t('入仓成功'))
            this.$tab.closePage()
          })
        }
      })
    },
    handleWarehousing(row) {
      let wareItem = this.orderItemList.find(item => item.orderItemId == row.orderItemId) || {}
      this.warehousing = {...row, ...wareItem}
      this.warehousingVisible = true
    },
    handleWarehousingReturn(item){
      this.$confirm(item.prodTitleZh + this.$t('退仓后不可恢复，是否确认退仓？'), this.$t('确定要退仓？'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        rollbackDelete({
          "orderId": item.orderId,
          "orderItemId": item.orderItemId
        }).then(() => {
          this.$message({
            type: 'success',
            message: this.$t('货物退仓成功!')
          });

          getOrderWarehouseIn(this.orderId).then(r => this.orderItemList = r.data)
          this.getOrder()
        })

      }).catch(e => {
      });
    }
  },

  watch: {
    warehousingVisible(val) {
      if (!val){
        this.getOrder()
        getOrderWarehouseIn(this.orderId).then(r => this.orderItemList = r.data)
      }
    },
    orderSpecialNeeds(val){
      val.forEach(e => {
        this.form.orderSpecialNeedReceivableReqVoList.push({
          "id": e.id,
          "receivableMoney": e.transFee || '',
          "receivableMoneyCurrency": e.transCurrency || 3
        })
      })
    }
  },

  computed: {
    // 根据orderItemId获取入仓item
    wareItem(){
      return orderItemId => {
        return this.orderItemList.find(item => item.orderItemId == orderItemId)
      }
    },
    isAdd() {
      return this.$route.path === "/order/warehousing-add"
    },
    isEdit() {
      return this.$route.path === "/order/warehousing-update"
    },
    title() {
      return this.$i18n.locale === 'en_US' ? this.$route.meta.titleEn : this.$route.name
    },
    orderSpecialNeedsDict() {
      return this.$store.state.dict.dictDatas.order_special_needs
    },
    orderSpecialNeeds(){
      const result = []
      this.specialList.forEach(e => {
        const t = this.orderSpecialNeedsDict.find(f => f.value === e.advanceType)
        if(t) {
          result.push({...e, label: t.label, labelEn: t.labelEn})
        }
      })
      return result
    },
    warehouseId(){
      return this.order?.logisticsInfoDto?.startWarehouseId
    }
  }
}
</script>

<style scoped lang="scss">
@import "src/assets/styles/element-variables";
.red{
  color: $--color-danger;
}
.green{
  color: $--color-success;
}
</style>