stockingList.vue

<!--空运备货列表-->
<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item :label="$t('编号')" prop="orderNo">
        <el-input
          v-model="queryParams.numberKey"
          :placeholder="$t('请输入订单号、唛头、提单号')"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item :label="$t('发货人')" prop="consignorKey">
        <el-input
          v-model="queryParams.consignorKey"
          :placeholder="$t('发货人')"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item :label="$t('收货人')" prop="consigneeKey">
        <el-input
          v-model="queryParams.consigneeKey"
          :placeholder="$t('收货人')"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="">
        <dict-selector
          :type="DICT_TYPE.ECW_BEGINTIME_TYPE_ENDTIME"
          :filter="(item) => item.value != 'PickTime'"
          v-model="dateFilterType"
          defaultable
          style="width: 150px; margin-right: 5px"
        />
        <el-date-picker
          v-model="dateFilter"
          type="datetimerange"
          range-separator="-"
          :start-placeholder="$t('开始日期')"
          :end-placeholder="$t('结束日期')"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="handleQuery"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item :label="$t('始发仓')" prop="startWarehouseId">
        <el-select
          v-model="queryParams.startWarehouseId"
          :placeholder="$t('请选择始发仓')"
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="item in exportWarehouseList"
            :label="$l(item, 'title')"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('目的仓')" prop="destWarehouseId">
        <el-select
          v-model="queryParams.destWarehouseId"
          :placeholder="$t('请选择目的仓')"
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="item in importWarehouseList"
            :label="$l(item, 'title')"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <!--<el-form-item :label="$t('运输方式')" prop="transportId">
        <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model.number="queryParams.transportId" clearable @change="handleQuery"/>
      </el-form-item>-->

      <el-form-item :label="$t('商品')" prop="tidanNo">
        <el-input
          v-model="queryParams.prodKey"
          :placeholder="$t('请输入商品类型、品名或品牌')"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item :label="$t('控货')" prop="isCargoControl">
        <dict-selector
          v-model="queryParams.isCargoControl"
          :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
          fomatter="bool"
          clearable
        />
      </el-form-item>
      <el-form-item :label="$t('入仓类型')" prop="warehouseType">
        <dict-selector
          :type="DICT_TYPE.ECW_WAREHOUSING_TYPE"
          v-model="queryParams.warehouseType"
          clearable
        />
      </el-form-item>
      <el-form-item :label="$t('客户经理')">
        <user-selector
          manage
          v-model="queryParams.salesmanId"
          clearable
          @change="handleQuery"
          :prepend="{ id: 0, nickname: $t('未分配客户经理') }"
        />
      </el-form-item>
      <el-form-item :label="$t('订单状态')" prop="status">
        <dict-selector
          :type="DICT_TYPE.ORDER_STATUS"
          v-model="queryParams.status"
          @keyup.enter.native="handleQuery"
          clearable
        />
      </el-form-item>
      <el-form-item :label="$t('报关方式')" prop="customsType">
        <dict-selector
          :type="DICT_TYPE.ECW_CUSTOMS_TYPE"
          v-model="queryParams.customsType"
          clearable
          @change="handleQuery"
        />
      </el-form-item>
      <el-form-item :label="$t('是否齐货')">
        <!--// 字段存疑-->
        <dict-selector
          v-model="queryParams.isNeat"
          :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
          fomatter="bool"
          clearable
          @change="handleQuery"
        />
      </el-form-item>

      <el-form-item :label="$t('备案属性')" prop="productRecord">
        <dict-selector
          :type="DICT_TYPE.PRODUCT_RECORD_ATTRIBUTE"
          v-model="queryParams.productRecord"
          clearable
          @change="handleQuery"
        />
      </el-form-item>
      <el-form-item :label="$t('快递单号')" prop="number">
        <el-input
          v-model="queryParams.number"
          :placeholder="$t('快递单号')"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item :label="$t('外部仓')" prop="number">
        <el-select
          v-model="queryParams.isExternalWarehouse"
          :placeholder="$t('请选择')"
          clearable
          @change="handleQuery"
        >
          <el-option :label="$t('外部仓')" :value="1"></el-option>
          <el-option :label="$t('自有仓')" :value="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('异常状态')" prop="status">
        <dict-selector
          :type="DICT_TYPE.ORDER_ABNORMAL_STATE"
          v-model="queryParams.abnormalState"
          @keyup.enter.native="handleQuery"
          clearable
        />
      </el-form-item>
      <el-form-item :label="$t('审核状态')" prop="status">
        <dict-selector
          :type="DICT_TYPE.ECW_ORDER_APPROVAL_TYPE"
          v-model="queryParams.auditType"
          @keyup.enter.native="handleQuery"
          clearable
        />
      </el-form-item>
      <el-form-item :label="$t('订单类型')" prop="number">
        <el-select
          v-model="queryParams.type"
          :placeholder="$t('请选择')"
          clearable
        >
          <el-option :label="$t('普通订单')" :value="0"></el-option>
          <el-option :label="$t('集运服务')" :value="1"></el-option>
          <el-option :label="$t('海外仓')" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('出货渠道')" prop="number">
        <selector
          :options="channelList"
          :label-field="$l('name')"
          value-field="channelId"
          v-model="queryParams.channelId"
        ></selector>
      </el-form-item>
      <el-form-item :label="$t('特需')" prop="packageType">
        <el-select
          v-model="queryParams.packageTypeArr"
          multiple
          :placeholder="$t('请选择')"
          clearable
        >
          <template v-for="item in getDictDatas(DICT_TYPE.ORDER_SPECIAL_NEEDS)">
            <el-option
              :label="$l(item, 'label')"
              :value="item.value"
            ></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{
          $t("搜索")
        }}</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">{{
          $t("重置")
        }}</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          :disabled="!multipleSelection.length"
          type="primary"
          :loading="exporting"
          plain
          size="mini"
          @click="exportXls(ids)"
          v-hasPermi="['ecw:order:stockingList:export_selected']"
          >{{ $t("导出所选") }}</el-button
        >
        <el-button
          type="primary"
          :loading="exporting"
          plain
          size="mini"
          @click="exportXls(queryParams)"
          v-hasPermi="['ecw:order:stockingList:export_search']"
          >{{ $t("导出搜索") }}</el-button
        >
      </el-col>
    </el-row>

    <!-- 列表 -->
    <el-table
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column
        :label="$t('订单编号')"
        width="120px"
        align="center"
        prop="orderNo"
      >
        <template slot-scope="scope">
          <router-link
            :to="{
              path: '/order/detail',
              query: { orderId: scope.row.orderId },
            }"
            class="link-type"
          >
            <span>{{ scope.row.orderNo }}</span>
          </router-link>
          <div
            style="display: flex; flex-wrap: wrap"
            v-if="scope.row.advanceType"
          >
            <el-button
              @click="deleteSpecial(item.value, scope.row.orderId)"
              size="mini"
              style="margin-left: 20px"
              type="danger"
              circle
              v-for="(item, index) in specialRendering(scope.row.advanceType)"
              :key="index"
              >{{ item.label[0] }}</el-button
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('唛头')" align="center" prop="marks" />
      <el-table-column
        :label="$t('总箱数/入仓箱数')"
        align="center"
        prop="sumNum"
      >
        <template slot-scope="{ row }">
          <div :style="{ color: row.customsType != 1 ? 'red' : null }">
            {{ row.totalNum }}{{ $t("箱") }}/{{ row.sumNum }}{{ $t("箱") }}
          </div>
          <dict-tag
            v-if="row.customsType != 1"
            style="color: red"
            :type="DICT_TYPE.ECW_CUSTOMS_TYPE"
            :value="row.customsType"
          ></dict-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('体积/重量')" align="center" prop="sumWeight">
        <template slot-scope="{ row }">
          <!--入仓前是填单数据，入仓后是入仓数据，装柜审核通过等状态inwarehouseState会变成0，所以只能通过sumNum来判断-->
          <component
            :is="row.orderType > 1 ? 'el-tooltip' : 'div'"
            class="item"
            :style="{
              color: row.orderType > 1 ? 'red' : null,
            }"
            effect="dark"
            :content="
              row.orderType === 2
                ? (row.wvolume || 0) + 'm³'
                : (row.vweight || 0) + 'kg'
            "
            placement="bottom"
          >
            <div v-if="row.sumNum > 0">
              {{ row.sumVolume }}m³ /{{ row.sumWeight }}Kg
            </div>
            <div v-else>
              {{ row.costVO.totalVolume }}m³ /{{ row.costVO.totalWeight }}Kg
            </div>
          </component>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('始发仓')"
        align="center"
        prop="startWarehouseName"
      >
        <template slot-scope="{ row }">
          {{ row.startWarehouseName }}
          <span style="color: red" v-if="row.isExternalWarehouse"
            >({{ $t("外部仓") }})</span
          >
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('运输方式/目的地')"
        align="center"
        prop="transportId"
      >
        <template slot-scope="{ row }">
          <dict-tag
            :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
            :value="row.transportId"
          />
          / {{ row.dstWarehouseName }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('控货')" align="center" prop="isCargoControl">
        <template slot-scope="{ row }">
          <dict-tag
            :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
            :value="row.isCargoControl"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('订单状态')" align="center" prop="status">
        <template slot-scope="scope">
          <!-- <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status" /> -->
          {{ scope.row.statusMsg }}
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('操作')"
        align="center"
        class-name="small-padding fixed-width actions"
        width="150px"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="setCanNotShipment(scope.row)"
            v-hasPermi="['ecw:order:setCanNotShipment']"
            >{{ $t("不可出") }}</el-button
          >
          <el-button
            type="text"
            @click="$router.push('stocking?id=' + scope.row.orderId)"
            v-hasPermi="['ecw:order:stockingList:stocking']"
            >{{ $t("备货") }}</el-button
          >
          <el-button
            type="text"
            @click="printTagOrderId = scope.row.orderId"
            v-hasPermi="['ecw:order:stockingList:print_tag']"
            >{{ $t("打印标签") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.rows"
      @pagination="getList"
    />

    <print-tag
      v-if="printTagOrderId !== null"
      :order-id="printTagOrderId"
      @close="printTagOrderId = null"
    />
  </div>
</template>

<script>
import Selector from "@/components/Selector";
import ProductSelector from "@/components/ProductSelector";
import { getProductAttrList } from "@/api/ecw/productAttr";
import CustomerSelector from "@/components/CustomerSelector";
import specialNeeds from "@/views/ecw/order/components/specialNeeds";

import {
  canReadyStockShipmentPage,
  exportReadyStock,
  canShipmentPage,
  orderSpecialNeed,
  exportCanShipment,
  setNotCanShipment,
  setCanNotShipment,
} from "@/api/ecw/order";
import PrintTag from "./components/PrintTag";
import PrintWarehouseReceipt from "./components/PrintWarehouseReceipt";
import PrintLadingBill from "./components/PrintLadingBill";
import BatchPickup from "./components/BatchPickup";
import withdrawal from "@/views/ecw/order/withdrawal";
import UserSelector from "@/components/UserSelector";
import BatchSingleApplication from "@/views/ecw/order/batchSingleApplication";
import FeeApplication from "@/views/ecw/order/feeApplication";
import MergeLog from "@/views/ecw/order/components/MergeLog";
import PickupLog from "./components/PickupLog";
import { getWarehouseList } from "@/api/ecw/warehouse";
import { getCurrencyPage } from "@/api/ecw/currency";
import SplitRevoke from "@/views/ecw/order/components/SplitRevoke";
import { getChannelList } from "@/api/ecw/channel";
import Template from "@/views/cms/template/index.vue";
export default {
  name: "EcwOrderStockinglist",
  components: {
    Template,
    UserSelector,
    FeeApplication,
    BatchSingleApplication,
    MergeLog,
    PickupLog,
    SplitRevoke,
    CustomerSelector,
    ProductSelector,
    Selector,
    specialNeeds,
    PrintTag,
    PrintWarehouseReceipt,
    PrintLadingBill,
    BatchPickup,
    withdrawal,
  },
  data() {
    return {
      // 导出中状态
      exporting: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 订单列表
      list: [],

      // 查询参数
      queryParams: {
        page: 1,
        rows: 10,
      },
      warehouseList: [],
      productAttrList: [], // 商品属性
      molecule: "", //重货比分子
      denominator: "", //重货比分母
      dateFilterType: "", //日期筛选类别
      dateFilter: [], //筛选日期

      printTagOrderId: null, // 显示打印标签的订单ID
      isShow: false, //特殊显示
      multipleSelection: [],
      params: {
        page: 1,
        rows: 20,
      },
      currencyList: [],
      channelList: [],
    };
  },
  watch: {
    isChinese() {
      this.getList();
    },
  },
  computed: {
    isChinese() {
      return this.$i18n.locale === "zh_CN";
    },
    exportWarehouseList() {
      /* tradeType 1 进口，2出口，3进出口 */
      return this.warehouseList.filter(
        (item) => item.tradeType == 2 || item.tradeType == 3
      );
    },
    importWarehouseList() {
      return this.warehouseList.filter(
        (item) => item.tradeType == 1 || item.tradeType == 3
      );
    },
    combinedQueryParams() {
      let timeParams = {};
      if (this.dateFilterType && this.dateFilter) {
        timeParams["begin" + this.dateFilterType] = this.dateFilter[0];
        timeParams["end" + this.dateFilterType] = this.dateFilter[1];
      }
      let queryParams = Object.assign({}, this.queryParams, timeParams);
      return queryParams;
    },
  },
  activated() {
    this.getList();
  },
  created() {
    this.getList();
    getProductAttrList().then((res) => (this.productAttrList = res.data));
    getWarehouseList().then((res) => (this.warehouseList = res.data));

    getCurrencyPage(this.params).then(
      (res) => (this.currencyList = res.data.list)
    );
    getChannelList().then((res) => (this.channelList = res.data));
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      const query = { ...this.combinedQueryParams };
      if (query.packageTypeArr && query.packageTypeArr.length) {
        query.packageType = query.packageTypeArr.join(",");
      }
      // 执行查询
      canShipmentPage(query).then((response) => {
        // 部分情况下，订单后面的操作下拉菜单会显示按钮，但是下来没有选项，在elTable组件更新的时候会导致渲染错误，所以要在更新渲染前清空一次list让table彻底重新渲染，避免部分更新导致异常
        this.list = [];
        this.$nextTick(() => {
          this.list = response.data.list;
        });
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.$nextTick(this.getList);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        page: 1,
        rows: 10,
      };
      this.dateFilter = [];
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push("create");
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$router.push("edit?id=" + row.orderId);
    },
    // 表格多选
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
      this.ids = selection.map((item) => item.orderId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 导出
    exportXls(params) {
      this.exporting = true;
      const exportParams = Array.isArray(params)
        ? { orderIdList: params }
        : { ...params };
      exportCanShipment(exportParams)
        .then((res) => {
          // this.$download.excel(res, this.$t('备货订单') + '.xls');
          this.$message.success(
            this.$t("已加入导出队列，请稍后在下载日志中下载")
          );
        })
        .finally(() => {
          this.exporting = false;
        });
    },
    // 特需标识处理
    specialRendering(val) {
      console.log("val", val);
      if (val !== undefined) {
        let i = val.split(",");
        return this.getDictDatas(this.DICT_TYPE.ORDER_SPECIAL_NEEDS)
          .filter((e) => {
            return i.indexOf(e.value) > -1;
          })
          .map((item) => {
            // 打字开头的用最后一个字，否则取第一个字
            item.symbol =
              item.label[0] == "打"
                ? item.label[item.label.length - 1]
                : item.label[0];
            return item;
          });
      }
    },
    // 删除特需
    deleteSpecial(id, orderId) {
      this.$confirm(this.$t("确定删除此特需么?"))
        .then(() => {
          return orderSpecialNeed({ orderId: orderId, advanceType: id });
        })
        .then(() => {
          this.getList();
        });
    },
    // 设置空运订单不可出
    async setCanNotShipment(order) {
      await this.$confirm(
        this.$t("确定设置订单{orderNo}不可出么？", { orderNo: order.orderNo })
      );
      setCanNotShipment(order.orderId).then((res) => {
        this.$message(this.$t("操作成功"));
        this.getList();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .actions {
  .el-dropdown {
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>