batchSingleApplication.vue

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="()=>{
      $emit('update:dialogVisible',false)
    }">
    <div class="batch-single-application">
      <h1 class="title">调仓申请</h1>
      <el-table :data="list">
        <el-table-column label="订单编号" prop="orderNo"></el-table-column>
        <el-table-column label="唛头" prop="marks"></el-table-column>
        <el-table-column label="已到箱数/总箱数">
          <template v-slot={row}>
            {{ row.sumQuantity || 0 }}/{{ row.totalNum }}
          </template>
        </el-table-column>
        <el-table-column label="下单统计">
          <template v-slot="{row}">
            <div v-if="row.costVO">
              箱数：{{ row.costVO.totalNum }}
              {{ row.costVO.totalVolume }}m³
              {{ row.costVO.totalWeight }}kg
            </div>
          </template>
        </el-table-column>
        <el-table-column label="入仓统计" width="150">
          <template v-slot="{row}">
            <div>总箱数：{{ row.sumNum || 0 }}</div>
            <div>体积：{{ row.sumVolume || 0 }}CBM</div>
            <div>重量：{{ row.sumWeight || 0 }}KG</div>
          </template>
        </el-table-column>
        <el-table-column label="入仓时间">

        </el-table-column>
        <el-table-column label="运输方式">
          <template v-slot={row}>
            <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="row.transportId"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column label="出货渠道">

        </el-table-column>
        <!--      <el-table-column label="始发仓" prop="startWarehouseName"></el-table-column>-->
        <el-table-column label="目的地" prop="objectiveName"></el-table-column>
        <el-table-column label="发货人">
          <template v-slot="{row}">
            <div>
              <div>
                <p>
                  {{ row.consignorName }}
                </p>
                <p>
                </p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收货人">
          <template v-slot="{row}">
            <div>
              <p>
                {{ row.consigneeName }}
              </p>
              <p>
                {{ row.consigneePhone }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column>
          <template v-slot="{row}">
            <el-button @click="canceLtiaoCang(row)" type="text" v-if="row.inWarehouseState === 10">
              取消调仓
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content:center; margin-top: 20px">
        <div style="width: 200px; margin: 0 10px">
          {{ list[0] && list[0].startWarehouseName ? list[0].startWarehouseName : '' }}
        </div>
        <div style="width: 200px;">
          <el-select v-model="params.warehouseInId">
            <el-option v-for="(item ,index) in availableWarehouse" :value="item.id" :label="item.titleZh"
                       :key="index"></el-option>
          </el-select>
        </div>
      </div>
      <el-divider></el-divider>
      <h1 class="title">
        审批流程
      </h1>
      <div style="padding: 20px">
        <work-flow xmlkey="warehouse_transfer" v-model="params.copyUserId"/>
      </div>
      <div style="text-align: center">
        <el-button style="margin-right: 50px" v-if="adjustmentBol">审核中</el-button>
        <el-button v-else style="margin-right: 50px" @click="submit" :disabled="isSubmit">提交申请</el-button>
        <el-button @click="$emit('update:dialogVisible',false)">取消</el-button>
      </div>
      <!--    <warehouseDetails></warehouseDetails>-->
    </div>
  </el-dialog>
</template>

<script>
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import {
  adjustApplyStatus, cancelAdjustApply,
  ecwOrderList,
  orderWarehouseInAdjustApply,
  warehouseAdjustmentList,
} from "@/api/ecw/batchSingleApplication";
import {getProcessDefinitionBpmnXMLByKey} from "@/api/bpm/definition";
import warehouseDetails from "@/views/ecw/order/components/warehouseDetails";
import {getOrderPage} from "@/api/ecw/order";
import workFlow from "@/components/WorkFlow";
import Template from "@/views/cms/template";

export default {
  name: "batchSingleApplication",
  props: {
    orderList: [String, Number],
    dialogVisible: {
      type: Boolean,
      default: false,
    }
  },
  components: {
    Template,
    warehouseDetails,
    workFlow
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getOrderListFn()
      } else {
        this.params = {
          orderIds: undefined,
          warehouseInId: undefined,
          warehouseOutId: undefined,
          copyUserId: [],
        }
      }
    }
  },
  computed: {
    isSubmit() {
      let flag = true;
      if (this.list.length === 1 && this.list[0].status === 5) {
        flag = false
      } else {
        let l = this.list.map(e => e.startWarehouseId)
        if (this.list.every(e => e.status === 5) && [...new Set(l)].length === 1) flag = false
      }
      return flag;
    },
    adjustmentBol() {
      return this.list.some(e => e.inWarehouseState === 10)
    }
  },
  data() {
    return {
      list: [],
      selectedUsers: [],
      availableWarehouse: [],
      DICT_TYPE,
      departureWarehouse: undefined,
      adjustment: undefined,
      params: {
        orderIds: undefined,
        warehouseInId: undefined,
        warehouseOutId: undefined,
        copyUserId: [],
      },
    }
  },
  methods: {
    getOrderListFn() {
      getOrderPage({orderIdList: this.orderList}).then(r => {
        this.list = r.data.list
        warehouseAdjustmentList({id: this.list[0].startWarehouseId}).then(r => this.availableWarehouse = r.data)
      })
    },
    submit() {
      let p = this.list.map(e => e.orderId).join(',');
      this.params.orderIds = p;
      this.params.warehouseOutId = this.list[0].startWarehouseId;
      this.params.orderNo = this.list[0].orderNo
      orderWarehouseInAdjustApply(this.params).then(r => {
        if (r.code === 0) {
          this.$emit('update:dialogVisible', false)
          this.$message.success('调仓成功');
        }
      })
    },
    async canceLtiaoCang(row) {
      let res = await adjustApplyStatus({orderId: row.orderId})
      if (res.data.isBatch) {
        this.$message.warning('批量提提交请耐心等待')
      } else {
        this.$prompt('请问您是否要取消调仓？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then((val) => {
          cancelAdjustApply({orderId: row.orderId, reason: val.value}).then(r => {
            if (r.code === 0) {
              this.$message({
                type: 'success',
                message: '取消调仓成功!'
              });
              this.getOrderListFn()
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
    },
  }
}
</script>

<style scoped lang="scss">
.batch-single-application {
  padding: 20px;
  box-sizing: border-box;

  .title {
    font-weight: 600;
    text-align: left;
  }
}

.my-process-designer {
  height: calc(100vh - 200px);
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}
</style>