cargoControlDetail.vue

<template>
  <div class="app-container" v-if="detail">
    <div class="page-title">{{ $t("控货订单") }}</div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('订单号')">
            {{ detail.orderNo }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('总控货数')">
            {{ detail.sumNum }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('体积')"> {{ detail.sumVolume }} m³ </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('重量')"> {{ detail.sumWeight }} kg </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('可放货箱数')">
            {{ detail.sumNum - detail.releaseNum }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('已放货箱数')">
            {{ detail.releaseNum }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="page-title">{{ $t("放货详情") }}</div>
    <el-table :data="detail.cargoControlPickBackVOList || []" border>
      <el-table-column :label="$t('序号')" width="50px">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column :label="$t('收货人')" prop="consigneeName" />
      <el-table-column :label="$t('收货人电话')" prop="consigneePhone">
        <template slot-scope="{ row }"> +{{ row.consigneeCountryCode }} {{ row.consigneePhone }} </template>
      </el-table-column>
      <el-table-column :label="$t('控货箱数')" prop="controlNum"></el-table-column>
      <el-table-column :label="$t('放货箱数')" prop="pickNum"></el-table-column>
      <el-table-column :label="$t('体积') + '(m³)'" prop="pickVolume"></el-table-column>
      <el-table-column :label="$t('提单号')" prop="tidanNo"></el-table-column>
      <el-table-column :label="$t('备注')" prop="remarks"></el-table-column>
      <el-table-column :label="$t('操作人')" prop="operator"></el-table-column>
      <el-table-column :label="$t('放货日期')" prop="createTime">
        <template slot-scope="{ row }">
          {{ row.createTime | parseTime }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('复核日期')" prop="createTime">
        <template slot-scope="{ row }">
          {{ row.checkTime | parseTime }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('状态')" prop="status">
        <template slot-scope="{ row }">
          <dict-tag :type="DICT_TYPE.ECW_RELEASE_STATUS" :value="row.status" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" width="300px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status == 1" type="primary" size="mini" @click="editIndex = scope.$index">{{ $t("修改") }}</el-button>
          <el-button v-if="scope.row.status == 1" type="danger" size="mini" @click="cancelCargoPickId = scope.row.id">{{ $t("取消") }}</el-button>
          <el-button v-if="scope.row.status == 1" type="success" size="mini" @click="review(scope.row.id)">{{ $t("放货复核") }}</el-button>
          <el-button v-if="scope.row.status == 3" type="danger" size="mini" @click="fallbackIndex = scope.$index">{{ $t("反复核") }}</el-button>
          <el-button v-if="scope.row.status == 3" type="success" size="mini" @click="cargoControlPickId = scope.row.id">{{ $t("调货") }}</el-button>

          <el-button v-if="[2, 4, 5, 6].indexOf(scope.row.status) > -1" type="primary" size="mini" @click="showApprovalDetail(scope.row.formId)">{{ $t("审核详情") }}</el-button>
          <el-button v-if="[2, 4, 5, 6].indexOf(scope.row.status) > -1" type="danger" size="mini" @click="cancelApproval(scope.row.id)">{{ $t("取消审核") }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- <div class="page-title">{{ $t('历史放货记录') }}</div>
        <el-table :data="[1]" border>
            <el-table-column :label="$t('序号')" width="50px">

            </el-table-column>
            <el-table-column :label="$t('操作')">
                <el-input v-model="formData.field110" :placeholder="$t('请输入收货人邮箱')" clearable></el-input>
            </el-table-column>
            <el-table-column :label="$t('申请原因')">
                <el-input v-model="formData.field110" :placeholder="$t('请输入收货人邮箱')" clearable></el-input>
            </el-table-column>
            <el-table-column :label="$t('附件')">
                <el-input v-model="formData.field110" :placeholder="$t('请输入收货人邮箱')" clearable></el-input>
            </el-table-column>
            <el-table-column :label="$t('申请时间')">
                <el-input v-model="formData.field110" :placeholder="$t('请输入收货人邮箱')" clearable></el-input>
            </el-table-column>
            <el-table-column :label="$t('申请人')">
                <el-input v-model="formData.field110" :placeholder="$t('请输入收货人邮箱')" clearable></el-input>
            </el-table-column>
            <el-table-column :label="$t('审批时间')">
                <el-input v-model="formData.field110" :placeholder="$t('请输入收货人邮箱')" clearable></el-input>
            </el-table-column>
            <el-table-column :label="$t('审批人')">
                <el-input v-model="formData.field110" :placeholder="$t('请输入收货人邮箱')" clearable></el-input>
            </el-table-column>
            <el-table-column :label="$t('备注')">
                <el-input v-model="formData.field110" :placeholder="$t('请输入收货人邮箱')" clearable></el-input>
            </el-table-column>
        </el-table> -->
    <fallback v-if="fallbackIndex !== null" :order="detail" :index="fallbackIndex" @close="fallbackIndex = null" @success="onFallbackSuccess" />
    <edit v-if="editIndex !== null" @close="editIndex = null" :order="detail" :index="editIndex" @success="onEditSuccess" />
    <transfer-cargo v-if="cargoControlPickId !== null" :order-id="detail.orderId" :cargo-control-pick-id="cargoControlPickId" @close="cargoControlPickId = null" @success="onTransferCargoSuccess" />
    <cancel-cargo v-if="!!cancelCargoPickId" :order="detail" :cargo-control-pick-id="cancelCargoPickId" @close="cancelCargoPickId = null" @success="onCancelCargoSuccess" />
  </div>
</template>
<script>
import edit from "./components/CargoControlEdit.vue"
import { createPick, getPickRleaseInfo, review, cancel, cancelApproval } from "@/api/ecw/orderCargoControl"
import { parseTime } from "@/utils/ruoyi"
import Fallback from "./components/Fallback"
import TransferCargo from "@/views/ecw/order/components/TransferCargo"
import CancelCargo from "./components/CancelCargo.vue"

export default {
  filters: { parseTime },
  components: { edit, Fallback, TransferCargo, CancelCargo, CancelCargo },
  data() {
    return {
      detail: null,
      formData: {},
      rules: {},
      editIndex: null, // 修改索引
      fallbackIndex: null, // 反复核索引
      cargoControlPickId: null, // 调货ID
      cancelCargoPickId: null // 取消返货ID
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      console.log("loadData")
      getPickRleaseInfo(this.$route.query.id).then((res) => (this.detail = res.data))
    },
    review(id) {
      this.$confirm(this.$t("已核实放货信息，确认放货？"))
        .then((res) => {
          return review(id)
        })
        .then((res) => {
          this.$message.success(this.$t("操作成功"))
          this.loadData()
        })
    },
    unReview() {},
    cancel(id) {
      this.$confirm(this.$t("确定取消这条放货么？"))
        .then((res) => {
          return cancel(id)
        })
        .then((res) => {
          this.$message.success(this.$t("操作成功"))
          this.loadData()
        })
    },
    onEditSuccess() {
      console.log("onEditSuccess")
      this.loadData()
      this.editIndex = null
    },
    onFallbackSuccess() {
      this.fallbackIndex = null
      this.loadData()
    },
    // 查看审核详情
    showApprovalDetail(formId) {
      this.$router.push("/bpm/process-instance/detail?id=" + formId)
    },
    // 取消审核
    cancelApproval(id) {
      this.$confirm(this.$t("确定取消此申请么？"))
        .then((res) => {
          let approvalId = this.getApproval(id)
          return cancelApproval(approvalId, { reason: this.$t("无") })
        })
        .then((res) => {
          this.$message.success(this.$t("操作成功"))
          this.loadData()
        })
    },
    // 根据id查找审核id
    getApproval(id, field = "orderApprovalId") {
      if (!this.detail.orderApprovalBackVOList || !this.detail.orderApprovalBackVOList.length) {
        this.$message.error(this.$t("未找到审批ID"))
        Promise.reject(this.$t("未找到审批ID"))
      }
      let item = this.detail.orderApprovalBackVOList.find((item) => {
        let details = JSON.parse(item.details)
        return details.cargoControlPickId == id && details.applyStatus == 1
      })
      console.log({ item })
      return item[field]
    },
    onTransferCargoSuccess() {
      this.cargoControlPickId = null
      this.loadData()
    },
    onCancelCargoSuccess() {
      this.cancelCargoPickId = null
      this.loadData()
    }
  }
}
</script>