queryAir.vue

<template>
  <div class="app-container shipping-detail">
    <el-row
      type="flex"
      style="margin-top: 15px; margin-bottom: 15px"
      justify="center"
    >
      <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="22">
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
          "
        >
          <h2>{{ $t("出货详情") }}</h2>
          <div>
            <!-- <el-button size="small" @click="handleCommand('edit')">{{$t('编辑')}}</el-button> -->
            <el-button
              size="small"
              v-hasPermi="['shipment:box:action:sea']"
              @click="handleCommand('router')"
              >{{ $t("操作") }}</el-button
            >
            <el-button
              type="primary"
              v-hasPermi="['shipment:box:action:error']"
              size="small"
              @click="handleCommand('error')"
              >{{ $t("异常登记") }}</el-button
            >
            <el-button
              type="primary"
              v-hasPermi="['shipment:box:action:cost']"
              size="small"
              @click="handleCommand('cost')"
              >{{ $t("费用登记") }}</el-button
            >
            <!-- <el-button type="danger" size="small" @click="handleCommand('delete')">{{$t('删除')}}</el-button> -->
          </div>
        </div>
        <el-card style="margin-top: 15px">
          <el-descriptions :column="4" border>
            <el-descriptions-item :label="$t('自编号')">
              {{ shipmentObj.selfNo }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('运输方式')">
              <dict-tag
                :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
                :value="shipmentObj.transportType"
              />
            </el-descriptions-item>
            <el-descriptions-item :label="$t('出货渠道')">
              {{ getShipChannelName(shipmentObj.shippingChannelId) }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('状态')">
              {{ shipmentObj.shipmentStatusText }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('总计')">
              {{ getBoxSum(shipmentObj.boxStatistics) }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('始发地')">
              {{ getCityName(shipmentObj.startWarehouseId) }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('目的地')">
              {{ getCityName(shipmentObj.destWarehouseId) }}
            </el-descriptions-item>
            <el-descriptions-item label="SO NO">
              {{ shipmentObj.bookSeaInfo ? shipmentObj.bookSeaInfo.sono : "" }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('目的港清关')">
              {{ getClearance(shipmentObj.destinationClearance) }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('发货方式')">
              {{ getdeliveryType(shipmentObj.deliveryType) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-tabs style="margin-top: 15px" type="border-card" value="detail">
          <el-tab-pane :label="$t('明细')" name="detail">
            <div class="detail-pane">
              <div>{{ $t("当前部分") }}：</div>
              <el-select
                :placeholder="$t('请选择')"
                v-model="sectionId"
                @change="sectionChange"
              >
                <el-option key="0" :label="$t('全部')" value="0"></el-option>
                <el-option
                  v-for="item in sectionList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
              <p class="box-weight">
                {{ getSectionInfo }}
              </p>
              <div class="document-status">
                <p>{{ $t("单证状态") }}：</p>
                <template
                  v-for="(item, index) in getDocStatus(
                    sectionObj.sectionOrderList
                  )"
                >
                  <dict-tag
                    :type="DICT_TYPE.ECW_CUSTOMS_TYPE"
                    :value="item"
                    :key="index"
                  />
                </template>
              </div>
            </div>
            <div style="margin: 20px 0 20px 0">
              <el-button
                type="primary"
                v-hasPermi="['shipment:box:order:select']"
                size="small"
                @click="() => updateStatus('selected')"
                >{{ $t("更新所选订单状态") }}</el-button
              >
              <el-button
                type="primary"
                v-hasPermi="['shipment:box:order:all']"
                size="small"
                @click="() => updateStatus('all')"
                >{{ $t("更新全部订单状态") }}</el-button
              >
              <el-button
                type="primary"
                v-if="
                  shipmentObj.sapStatus == 152 &&
                  shipmentObj.airArrivalInfo &&
                  shipmentObj.airArrivalInfo.arriveType == 1
                "
                v-hasPermi="['shipment:box:order:select']"
                size="small"
                @click="() => updateArrivalStatus('selected')"
                >{{ $t("更新所选订单到港状态") }}</el-button
              >
              <el-button
                type="primary"
                v-if="
                  shipmentObj.sapStatus == 152 &&
                  shipmentObj.airArrivalInfo &&
                  shipmentObj.airArrivalInfo.arriveType == 1
                "
                v-hasPermi="['shipment:box:order:all']"
                size="small"
                @click="() => updateArrivalStatus('all')"
                >{{ $t("更新全部订单到港状态") }}</el-button
              >
              <el-button
                type="primary"
                v-if="
                  shipmentObj.clStatus == 132 &&
                  shipmentObj.clearanceInfo &&
                  shipmentObj.clearanceInfo.clearanceType == 1
                "
                v-hasPermi="['shipment:box:order:select']"
                size="small"
                @click="() => updateClearStatus('selected')"
                >{{ $t("更新所选订单清关状态") }}</el-button
              >
              <el-button
                type="primary"
                v-if="
                  shipmentObj.clStatus == 132 &&
                  shipmentObj.clearanceInfo &&
                  shipmentObj.clearanceInfo.clearanceType == 1
                "
                v-hasPermi="['shipment:box:order:all']"
                size="small"
                @click="() => updateClearStatus('all')"
                >{{ $t("更新全部订单清关状态") }}</el-button
              >
            </div>
            <el-table
              :data="sectionObj.sectionOrderList"
              style="width: 100%"
              border
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="50"></el-table-column>>
              <el-table-column
                align="center"
                :label="$t('序号')"
                width="50"
                prop="tidanNum"
              />
              <el-table-column
                prop="orderNo"
                :label="$t('订单号')"
                align="center"
              >
                <template v-slot="scope">
                  <a
                    href="javascript:void(0)"
                    @click="jumpOrderDetail(scope.row)"
                    >{{ scope.row.orderNo }}</a
                  >
                </template>
              </el-table-column>
              <el-table-column
                prop="goodsList"
                :label="$t('货物信息')"
                width="230px"
                align="center"
              >
                <template v-slot="{ row }">
                  <section>
                    <div v-for="(item, index) in row.goodsList" :key="index">
                      {{ index + 1 }}：{{ item.prodTitleZh }}
                    </div>
                  </section>
                </template>
              </el-table-column>
              <el-table-column
                prop="num"
                :label="$t('计划箱数')"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="installNum"
                :label="$t('实装箱数')"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="unloadNum"
                :label="$t('卸柜箱数')"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="destWarehouseName"
                :label="$t('提货点')"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="volume"
                :label="$t('体积')"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="weight"
                :label="$t('重量')"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="totalWorth"
                :label="$t('货值')"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="customsType"
                :label="$t('报关方式')"
                align="center"
              >
                <template slot-scope="scope">
                  <div
                    :class="
                      scope.row.customsType !== 1 ? 'customsType-red' : ''
                    "
                  >
                    <dict-tag
                      :type="DICT_TYPE.ECW_CUSTOMS_TYPE"
                      :value="scope.row.customsType"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="customsFee"
                :label="$t('报关费用')"
                align="center"
              ></el-table-column>
              <!--
              <el-table-column
                prop=""
                :label="$t('异常操作')"
                align="center"
                width="120px"
              >
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click="() => updateStatus_2('single', scope.row)"
                    style="margin-top: 5px"
                    >{{ $t("异常登记") }}</el-button
                  >
                </template>
              </el-table-column>-->

              <el-table-column
                prop=""
                :label="$t('操作')"
                align="center"
                width="120px"
              >
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="small"
                    :disabled="scope.row.abnormalDealStatus === 1"
                    @click="() => updateStatus('single', scope.row)"
                    style="margin-top: 5px"
                    >{{ $t("更新状态") }}</el-button
                  >
                  <el-button
                    type="primary"
                    size="small"
                    style="margin-top: 5px"
                    :disabled="
                      shipmentObj.clStatus == 132 ||
                      shipmentObj.clearanceInfo == null ||
                      (shipmentObj.clearanceInfo &&
                        shipmentObj.clearanceInfo.clearanceOrderList.findIndex(
                          (ff) => ff.orderId == scope.row.orderId
                        ) == -1)
                    "
                    @click="() => cancleClear(scope.row)"
                    >{{ $t("撤销清关申请") }}</el-button
                  >

                  <!-- <el-button type="danger" style="margin-top: 5px;" size="small" @click="openError(scope.row)">{{$t('异常')}}</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane :label="$t('状态')" name="status">
            <div
              v-for="(item, index) in logList"
              :key="item.id"
              :class="`shipping-status ${index === 0 ? 'curr-status' : ''}`"
            >
              <div class="status-line"></div>
              <div class="status-number">{{ logList.length - index }}</div>
              <div class="status-info">
                <div>
                  {{ $l(item, "title") }}
                  <el-button
                    v-if="item.approvalId > 0"
                    type="text"
                    @click="handleApproval(item.bpmProcessId)"
                    >{{ $t("查看审批") }}</el-button
                  >
                </div>
                <div>
                  <p>{{ formatDate(item.createTime) }}</p>
                  <p>{{ item.operator }}</p>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="$t('费用')" name="fee">
            <el-table :data="costList" style="width: 100%" border>
              <el-table-column
                type="index"
                align="center"
                :label="$t('序号')"
                width="50"
              />
              <el-table-column
                prop="costType"
                :label="$t('费用类型')"
                align="center"
              >
                <template slot-scope="scope">
                  <dict-tag
                    :type="DICT_TYPE.FEE_TYPE"
                    :value="scope.row.costType"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="supplierId"
                :label="$t('供应商')"
                align="center"
              >
                <template slot-scope="scope">
                  {{ getSupplier(scope.row.supplierId) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="price"
                :label="$t('金额')"
                align="center"
              ></el-table-column>
              <!--lanbm 2024-05-16 修改-->
              <el-table-column
                prop="priceUnitName"
                :label="$t('币种')"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="payPrice"
                :label="$t('实付金额')"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="payPriceBz"
                :label="$t('实付币种')"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="payTime"
                :label="$t('实付日期')"
                align="center"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.payTime">{{
                    formatDate(scope.row.payTime)
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="payableNo"
                :label="$t('付款单号')"
                align="center"
              >
                <template slot-scope="scope">
                  <span
                    style="color: #1890ff"
                    @click="paymentDetail(scope.row)"
                    >{{ scope.row.payableNo }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column
                prop="creator"
                :label="$t('创建人')"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="createTime"
                :label="$t('创建日期')"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="updater"
                :label="$t('修改人')"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="updateTime"
                :label="$t('修改日期')"
                align="center"
              ></el-table-column>
              <!--添加备注信息列 lanbm 2024-05-16 add-->
              <el-table-column
                prop="remarks"
                :label="$t('备注')"
                align="center"
              ></el-table-column>
              <el-table-column :label="$t('操作')" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="primary" :disabled="scope.row.paymentId!='-1'"
                    size="small"
                    @click="editCostClick(scope.row)"
                    style="marginright: 10px"
                    v-hasPermi="['ecw:box-cost:update']"
                    >{{ $t("编辑") }}</el-button
                  >
                  <el-popconfirm
                    :title="$t('确定是否删除')"
                    @confirm="deleteCostClick(scope.row)"
                  >
                    <el-button
                      type="danger" :disabled="scope.row.paymentId!='-1'"
                      size="small"
                      slot="reference"
                      v-hasPermi="['ecw:box-cost:delete']"
                      >{{ $t("删除") }}</el-button
                    >
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane :label="$t('异常')" name="error">
            <el-table :data="errorList" style="width: 100%" border>
              <el-table-column
                type="index"
                align="center"
                :label="$t('序号')"
                width="50"
              />
              <el-table-column prop="opStep" :label="$t('操作')" align="center">
                <template slot-scope="scope">
                  <dict-tag
                    :type="DICT_TYPE.BOX_AIR_SHIPMENT_PROCESS"
                    :value="scope.row.opStep"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="billAbnId"
                :label="$t('异常')"
                align="center"
              >
                <template slot-scope="scope">
                  <dict-tag
                    :type="DICT_TYPE[getregprocess(scope.row.opStep)]"
                    :value="scope.row.billAbnId"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="abnDetail"
                :label="$t('异常描述')"
                align="center"
                width="300"
              ></el-table-column>
              <el-table-column
                prop="delayDays"
                :label="$t('异常延迟天数')"
                align="center"
              ></el-table-column>
              <el-table-column
                prop=""
                :label="$t('异常时间')"
                align="center"
                width="200"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.abnStartTime"
                    >{{ formatDate(scope.row.abnStartTime) }} -
                  </span>
                  <span v-if="scope.row.abnEndTime">{{
                    formatDate(scope.row.abnEndTime)
                  }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane :label="$t('表单')" name="download">
            <el-table :data="downloadList" style="width: 50%">
              <el-table-column
                prop="title"
                :label="$t('文件类型')"
              ></el-table-column>
              <el-table-column prop="" :label="$t('下载链接')">
                <template slot-scope="scope">
                  <a
                    v-if="scope.row.serviceName"
                    href="javascript:void(0)"
                    @click="downloadDetailFile(scope.row)"
                    v-hasPermi="[`${scope.row.hasPermi}`]"
                    >{{ $t("下载") }}</a
                  >
                  <div v-else>{{ $t("未完成") }}</div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <!-- 对话框(添加 / 修改) -->
    <el-dialog
      :title="dialogConfig.title"
      :visible.sync="dialogConfig.visible"
      :width="dialogConfig.width"
      append-to-body
      class="shippingSea-dialog"
    >
      <template v-if="dialogConfig.type === 'edit'">
        <editForm
          v-if="dialogConfig.visible"
          @closeDialog="closeDialog"
          :shipmentObj="shipmentObj"
          :warehouseList="warehouseList"
          :transportTypes="transportTypes"
          :cabinetList="cabinetList"
        />
      </template>
      <template v-if="dialogConfig.type === 'cost'">
        <costForm
          v-if="dialogConfig.visible"
          @closeDialog="closeDialog"
          :shipmentObj="shipmentObj"
          :costDetail="costDetail"
          flag="air"
        />
      </template>
      <template v-if="dialogConfig.type === 'error'">
        <regError
          v-if="dialogConfig.visible"
          @closeDialog="closeDialog"
          :shipmentObj="shipmentObj"
          :allUsers="allUsers"
          flag="air"
        />
      </template>
      <template v-if="dialogConfig.type === 'updateError'">
        <updateError
          v-if="dialogConfig.visible"
          @closeDialog="closeDialog"
          :shipmentObj="shipmentObj"
          :errorInfo="errorInfo"
        />
      </template>
      <template v-if="dialogConfig.type === 'updateArrival'">
        <updateArrival
          v-if="dialogConfig.visible"
          @closeDialog="closeDialog"
          :shipmentObj="shipmentObj"
          :arrivalInfo="arrivalInfo"
        />
      </template>
      <template v-if="dialogConfig.type === 'updateClear'">
        <updateClear
          v-if="dialogConfig.visible"
          @closeDialog="closeDialog"
          :shipmentObj="shipmentObj"
          :clearInfo="clearInfo"
        />
      </template>
      <template v-if="dialogConfig.type === 'cancelClear'">
        <cancelClear
          v-if="dialogConfig.visible"
          @closeDialog="closeDialog"
          :shipmentObj="shipmentObj"
          :cancelClearInfo="cancelClearInfo"
        />
      </template>

      <template v-if="dialogConfig.type === 'unloadingError'">
        <unloadingError
          v-if="dialogConfig.visible"
          @closeDialog="closeDialog"
          :shipmentObj="shipmentObj"
          :unloadingError="unloadingError"
        />
      </template>
    </el-dialog>

    <!-- 对话框 -->
    <el-dialog
      custom-class="shipping-dialog"
      :title="$t('异常')"
      :visible.sync="dialogVisible"
      width="600px"
      :modal-append-to-body="false"
      append-to-body
    >
      <unloadingError
        v-if="dialogVisible"
        @closeDialog="closeDialog1"
        v-bind="$attrs"
        :currRow="currRow"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  getbox,
  getLogList,
  getCostList,
  getAbnormalList,
  deleteCost,
  deletebox,
  getPaymentId,
} from "@/api/ecw/box";
import { getChannelList } from "@/api/ecw/channel";
import { getCabinetPage } from "@/api/ecw/cabinet";
import { getWarehouseList } from "@/api/ecw/warehouse";
import {
  getTotlContent,
  formatDate,
  serviceMsg,
  downloadFile,
  downloadFileByUrl,
} from "./shippingSea/utils";
import { getSectionList, boxGoodsDetail } from "@/api/ecw/boxSea";
import { getSupplierPage } from "@/api/ecw/supplier";
import costForm from "./costForm.vue";
import regError from "./regError.vue";
import editForm from "./editForm.vue";
import updateError from "./updateError.vue";
import updateArrival from "./updateArrival.vue";
import updateClear from "./updateClear.vue";
import cancelClear from "./cancelClear.vue";
import { listUser } from "@/api/system/user";
import unloadingError from "./shippingAir/nodePage/unloading/openError.vue";

export default {
  name: "EcwBoxQueryair",
  props: {
    shipmentId: String,
  },
  components: {
    costForm,
    regError,
    editForm,
    updateError,
    updateArrival,
    updateClear,
    cancelClear,
    unloadingError,
  },
  created() {
    this.transportTypes = this.getDictDatas(
      this.DICT_TYPE.ECW_TRANSPORT_TYPE
    ).filter((item) => item.value == "1" || item.value == "2");
    this.initData();
    this.queryAllData();
    // 用户
    listUser({ pageNo: "1", pageSize: "10000" }).then((res) => {
      const { data } = res;
      this.allUsers = data.list ?? [];
    });
  },
  data() {
    return {
      // 出货对象
      shipmentObj: {},
      // 渠道
      channelList: [],
      // 柜型
      cabinetList: [],
      // 仓库
      warehouseList: [],
      // 供应商
      allSupplier: [],
      allUsers: [],
      // 部分list
      sectionList: [],
      // 单证数组
      docStatus: [],
      // 操作日志
      logList: [],
      // 费用
      costList: [],
      // 异常
      errorList: [],
      // 部分订单商品
      sectionObj: {
        secStatistics: {},
        sectionOrderList: [],
        totalStatistics: {},
      },
      // 部分ID
      sectionId: "0",
      // 弹窗配置
      dialogConfig: {
        visible: false,
        title: "",
        width: "600px",
        type: "",
        dialogVisible: false,
        fullscreen: false,
      },

      // // 弹窗配置
      //  dialogConfig: {
      //     title: "",
      //     dialogVisible: false,
      //     width: "30%",
      //     type: "",
      //     fullscreen: false,
      //   },
      dialogVisible: false,

      // 运输方式
      transportTypes: [],
      // 费用详情
      costDetail: {},
      // 下载
      downloadList: [
        {
          title: this.$t("预装单"),
          serviceName: "downloadPreloadGoodsList",
          hasPermi: "shipment:air:download:downloadPreloadGoodsList",
        },
        // { title: this.$t("已装单"), serviceName: "downloadLoadGoodsList", hasPermi: "shipment:box:download:downloadLoadGoodsList" },
        {
          title: this.$t("应收汇总表"),
          serviceName: "downloadReceivableList",
          hasPermi: "shipment:air:download:downloadReceivableList",
        },
        {
          title: this.$t("提货单"),
          serviceName: "zipDownload",
          fileFormat: "zip",
          hasPermi: "shipment:air:download:zipDownload",
        },
        {
          title: "agent list",
          serviceName: "downloadAgentListFiles",
          type: "url",
          hasPermi: "shipment:air:download:downloadAgentListFiles",
        },
        {
          title: "soncap",
          serviceName: "downloadSoncapFiles",
          type: "url",
          hasPermi: "shipment:air:download:downloadSoncapFiles",
        },
        {
          title: this.$t("AWB文件"),
          serviceName: "cdAwbFile",
          type: "url",
          hasPermi: "shipment:air:download:cdAwbFile",
        },

        {
          title: this.$t("提单Copy"),
          serviceName: "downloadLadingCopy",
          type: "url",
          hasPermi: "shipment:air:download:downloadLadingCopy",
        },
        {
          title: this.$t("已装单"),
          serviceName: "downloadLoadGoods",
          type: "url",
          hasPermi: "shipment:air:download:downloadLoadGoods",
        },
      ],
      // 选中行
      selectedRows: [],
      // 修改异常
      errorInfo: {
        orderList: [],
        errorType: "",
        operate: "",
      },
      arrivalInfo: {
        orderList: [],
      },
      clearInfo: {
        orderList: [],
      },
      cancelClearInfo: {},
    };
  },
  methods: {
    paymentDetail(row) {
      //lanbm 2024-05-16跳转到付款单详情页面
      const id = row.payableId;
      getPaymentId(id).then((r) => {
        let sId = r.data;
        this.$router.push("/financial/paymentDetail?id=" + sId);
      });
    },
    getregprocess(val) {
      var data = "";
      switch (val) {
        case 10:
          data = "FLYING_TICKET_EXCEPTION";
          break;
        case 12:
          data = "ARRIVAL_TICKET_EXCEPTION";
          break;
        case 13:
          data = "CLEARANCE_TICKET_EXCEPTION";
          break;
        default:
          data = "BOX_SHIPPING_TICKET_EXCEPTION";
          break;
      }
      return data;
    },
    selectable(row, index) {
      if (row.abnormalDealStatus === 1) return false;
      return true;
    },

    /* 关闭弹窗 */
    closeDialog1(type) {
      this.dialogVisible = false;
      // if (type === "query") this.getLoadGoodsList();
    },

    /* 打开异常 */
    openError(row) {
      console.log(row);
      this.currRow = row;
      this.dialogVisible = true;
    },

    /* 全选 */
    handleSelectionChange(selected) {
      this.selectedRows = selected;
    },
    updateStatus_2(type, row) {
      //异常登记 lanbm 2024-05-23 add
      this.$set(this.dialogConfig, "visible", true);
      this.$set(this.dialogConfig, "title", this.$t("异常登记"));
      this.$set(this.dialogConfig, "type", "error");
    },
    /* 更新状态 */
    updateStatus(type, row) {
      let orders = [];
      if (type === "selected") {
        if (!this.selectedRows.length) {
          this.$message.error("请选择需要更新的订单");
          return;
        }
        orders = this.selectedRows;
      } else if (type === "all") {
        // 筛选未处理的订单
        orders = this.sectionObj.sectionOrderList.filter(
          (item) => item.abnormalDealStatus === 0
        );
        if (!orders.length) {
          this.$message.error("没有订单需要更新");
          return;
        }
      } else if (type === "single") {
        orders = [row];
      }
      console.log("getErrorType", type);
      this.getErrorType();
      this.$set(this.errorInfo, "orderList", orders);
      this.$set(this.errorInfo, "operate", type);
      // 判断异常类型
      this.handleCommand("updateError");
    },

    /* 更新到港状态 */
    updateArrivalStatus(type) {
      let orders = [];
      if (type === "selected") {
        if (!this.selectedRows.length) {
          this.$message.error("请选择需要更新的订单");
          return;
        }
        orders = this.selectedRows.map((item) => {
          return item.orderId;
        });
      }
      this.$set(this.arrivalInfo, "orderList", orders);
      this.$set(this.arrivalInfo, "type", type);
      this.handleCommand("updateArrival");
    },
    /* 更新清关状态 */
    updateClearStatus(type) {
      let orders = [];
      if (type === "selected") {
        if (!this.selectedRows.length) {
          this.$message.error("请选择需要更新的订单");
          return;
        }
        orders = this.selectedRows.map((item) => {
          return item.orderId;
        });
      }
      this.$set(this.clearInfo, "orderList", orders);
      this.$set(this.clearInfo, "type", type);
      this.handleCommand("updateClear");
    },
    /* 更新清关状态 */
    cancleClear(val) {
      this.cancelClearInfo = val;
      this.handleCommand("cancelClear");
    },
    getErrorType() {
      for (const [key, value] of Object.entries(this.shipmentObj)) {
        // 报关异常 customsHasAbnormal
        if (key === "customsHasAbnormal" && value) {
          this.$set(this.errorInfo, "errorType", "customs");
          this.$set(this.dialogConfig, "title", this.$t("更新报关异常状态"));
        }
        // 起运异常 shippingHasAbnormal
        if (key === "shippingHasAbnormal" && value) {
          this.$set(this.errorInfo, "errorType", "shipping");
          this.$set(this.dialogConfig, "title", this.$t("更新起运异常状态"));
        }
        // 到港异常 arrivalHasAbnormal
        if (key === "arrivalHasAbnormal" && value) {
          this.$set(this.errorInfo, "errorType", "arrival");
          this.$set(this.dialogConfig, "title", this.$t("更新到港异常状态"));
        }
        // 起飞异常
        if (key === "flyingHasAbnormal" && value) {
          this.$set(this.errorInfo, "errorType", "flight");
          this.$set(this.dialogConfig, "title", this.$t("更新起飞异常状态"));
        }
        console.log(key, value);
      }
    },
    // 初始化字典数据
    initData() {
      // 查询渠道
      getChannelList().then((res) => (this.channelList = res.data));
      // 查询柜型
      getCabinetPage(null).then(
        (response) => (this.cabinetList = response.data.list)
      );
      // 仓库
      getWarehouseList().then((r) => {
        this.warehouseList = r.data;
      });
      // 供应商
      getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
        const { data } = res;
        this.allSupplier = data.list;
      });
    },
    // 查询详情页所有数据
    queryAllData() {
      let param = { shipmentId: this.shipmentId };
      // 查询出货信息
      this.getBoxDetail();
      // 部分
      getSectionList(param).then((res) => {
        this.sectionList = res.data.map((item, index) => {
          return {
            ...item,
            title: this.$t("第{index}部分", { index: index + 1 }),
          };
        });
      });
      // 明细
      this.getBoxGoodsDetail();
      // 状态
      getLogList(param).then((res) => {
        this.logList = res.data;
      });
      // 费用
      this.getCost();
      // 异常
      getAbnormalList(param).then((res) => {
        this.errorList = res.data;
      });
      //表单
    },
    // 出货信息
    getBoxDetail() {
      getbox(this.shipmentId).then((res) => {
        const { data } = res;
        this.shipmentObj = data ?? {};
      });
    },
    // 获取费用
    getCost() {
      //空运费用 lanbm 2024-05-16
      getCostList({ shipmentId: this.shipmentId }).then((res) => {
        this.costList = res.data;
      });
    },
    // 部分切换
    sectionChange() {
      this.getBoxGoodsDetail();
    },
    // 获取部分详情以及物品
    getBoxGoodsDetail() {
      boxGoodsDetail({
        shipmentId: this.shipmentId,
        secId: this.sectionId,
      }).then((res) => {
        this.sectionObj = res.data;
      });
    },
    // 供应商
    getSupplier(id) {
      let arr = this.allSupplier.find((item) => item.id == id) ?? {};
      return this.$l(arr, "company");
    },
    editCostClick(row) {
      this.costDetail = row;
      this.handleCommand("cost");
    },
    deleteCostClick(row) {
      deleteCost(row.id).then((res) => {
        serviceMsg(res, this).then((res) => {
          this.getCost();
        });
      });
    },
    /* 跳转订单详情 */
    jumpOrderDetail(row) {
      this.$router.push({
        path: "/order/detail",
        query: { orderId: row.orderId },
      });
    },
    // 事件执行
    handleCommand(type) {
      switch (type) {
        case "edit":
          this.$set(this.dialogConfig, "visible", true);
          this.$set(this.dialogConfig, "title", this.$t("修改出货"));
          this.$set(this.dialogConfig, "type", "edit");
          break;

        case "router":
          this.$router.push("/boxAir/shippingAir/" + this.shipmentId);
          break;

        case "cost":
          this.$set(this.dialogConfig, "visible", true);
          this.$set(this.dialogConfig, "title", this.$t("费用登记"));
          this.$set(this.dialogConfig, "type", "cost");
          break;

        case "error":
          this.$set(this.dialogConfig, "visible", true);
          this.$set(this.dialogConfig, "title", this.$t("异常登记"));
          this.$set(this.dialogConfig, "type", "error");
          break;

        case "delete":
          this.$modal
            .confirm(
              this.$t("是否确认删除出货编号为 {no} 的数据项?", {
                no: this.shipmentObj.selfNo,
              })
            )
            .then(() => {
              return deletebox(this.shipmentId);
            })
            .then((res) => {
              serviceMsg(res, this).then((res) => {
                // 获取当前path
                const currPath = this.$router.currentRoute.path;
                // 根据path获取view
                const view = this.visitedViews.find(
                  (item) => item.path === currPath
                );
                if (view) {
                  this.$store.dispatch("tagsView/delView", view);
                  this.$router.push("/shipment/boxSea");
                }
              });
            })
            .catch(() => {});
          break;

        case "updateError":
          this.$set(this.dialogConfig, "visible", true);
          this.$set(this.dialogConfig, "type", "updateError");
          break;
        case "updateArrival":
          this.$set(this.dialogConfig, "visible", true);
          this.$set(this.dialogConfig, "type", "updateArrival");
          break;
        case "updateClear":
          this.$set(this.dialogConfig, "visible", true);
          this.$set(this.dialogConfig, "type", "updateClear");
          break;
        case "cancelClear":
          this.$set(this.dialogConfig, "visible", true);
          this.$set(this.dialogConfig, "type", "cancelClear");
          break;
      }
    },
    // 关闭弹框
    closeDialog(type) {
      this.$set(this.dialogConfig, "visible", false);
      if (type === "edit") {
        this.getBoxDetail();
      }
      if (type === "cost") {
        this.getCost();
      }
      if (type === "error") {
        getAbnormalList({ shipmentId: this.shipmentId }).then((res) => {
          this.errorList = res.data;
        });
      }
      if (type === "detail") {
        this.getBoxGoodsDetail();
      }
    },
    formatDate,
    downloadDetailFile(row) {
      if (row.serviceName == "downloadLoadGoods") {
        if (this.shipmentObj.tyStatus < 2112) {
          this.$message.error("请先完成理货后，再下载已装单");
          return;
        }
      }
      const { fileFormat, type } = row;
      if (type === "url") {
        downloadFileByUrl(row.serviceName, { shipmentId: this.shipmentId });
      } else {
        let fileName = `${row.title}(${this.shipmentObj.selfNo}).${
          fileFormat ?? "xlsx"
        }`;
        downloadFile(
          row.serviceName,
          { shipmentId: this.shipmentId },
          fileName,
          fileFormat ?? "xlsx"
        );
      }
      this.$message.success(this.$t("已加入导出队列，请稍后在下载日志中下载"));
    },
    handleApproval(id) {
      this.$router.push({
        path: "/bpm/process-instance/detail",
        query: { id: id },
      });
    },
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews;
    },
    // 单证状态
    getDocStatus() {
      return (list = []) => {
        // 获取类型
        let customsTypes = list.map((item) => item.customsType);
        // 去重
        return Array.from(new Set(customsTypes));
      };
    },
    /* 渠道 */
    getShipChannelName() {
      return (shippingChannelId) => {
        for (const channelItem of this.channelList) {
          if (channelItem.channelId == shippingChannelId) {
            return this.$l(channelItem, "name");
          }
        }
      };
    },
    /* 获取柜型 */
    getCabinetLabel() {
      return (cabinetId) => {
        for (const cabinetItem of this.cabinetList) {
          if (cabinetItem.id == cabinetId) {
            return cabinetItem.name;
          }
        }
      };
    },
    /* 总计 */
    getBoxSum() {
      return (boxStatistics) => {
        if (boxStatistics) {
          return this.$t("{num}箱 {volume}m³ {weight}kg", {
            num: boxStatistics.num ?? 0,
            volume: boxStatistics.volume ?? 0,
            weight: boxStatistics.weight ?? 0,
          });
        }
        return;
      };
    },
    /* 获取仓库 */
    getCityName() {
      return (id) => {
        let arr = this.warehouseList.filter((item) => item.id == id);
        return arr.length > 0 ? this.$l(arr[0], "title") : this.$t("无");
      };
    },
    // 部分信息
    getSectionInfo() {
      const { totalStatistics, secStatistics } = this.sectionObj;
      if (!this.sectionId) {
        return getTotlContent(totalStatistics);
      } else {
        return getTotlContent(secStatistics);
      }
    },
    getClearance() {
      return (id) => {
        let data = ["", "我司清关", "合作方清关", "客户"];
        return data[id];
      };
    },
    getdeliveryType() {
      return (id) => {
        let data = ["", "多票", "单票"];
        return data[id];
      };
    },
  },
};
</script>

<style lang="scss">
.shipping-detail {
  .detail-pane {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    .box-weight {
      margin-left: 10px;
    }
    .document-status {
      flex: 1;
      justify-content: flex-end;
      display: flex;
      align-items: center;
      > span {
        margin-right: 10px;
      }
    }
  }
  .el-table__body {
    .customsType-red {
      color: red;
    }
  }
  .shipping-status {
    position: relative;
    display: flex;
    .status-line {
      width: 1px;
      height: calc(100% - 35px);
      background-color: #e8eaec;
      position: absolute;
      left: 13px;
      top: 30px;
    }
    .status-number {
      width: 26px;
      height: 26px;
      border: 1px solid #ccc;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .status-info {
      color: #999;
      margin-left: 20px;
      > :first-child {
        font-size: 14px;
        font-weight: bolder;
        line-height: 26px;
      }
      > :last-child {
        line-height: 26px;
        display: flex;
        > p {
          margin: 0;
          margin-right: 10px;
        }
      }
    }

    &.curr-status {
      .status-number {
        color: #fff;
        background-color: #2d8cf0;
        border-color: #2d8cf0;
      }
      .status-info {
        color: #666;
      }
    }
  }
}
</style>