index.vue

<template>
  <el-row class="shipping-ladingBill">
    <el-row class="oper-button">
      <el-button type="primary" @click="clickZipDownload">打包下载</el-button>
      <el-button type="primary">应收汇总单</el-button>
      <el-button type="primary">下载已装单</el-button>
    </el-row>

    <el-row style="margin-top:15px">
      <el-table :data="billData.list" border max-height="500px">
        <el-table-column label="序号" type="index" align="center" width="50" />
        <el-table-column label="订单号" align="center" prop="orderNo" />
        <el-table-column label="货物信息" align="center" prop="">
          <template slot-scope="scope">
            <section class="table-goodList">
              <div v-for="(item, index) in scope.row.orderItemList" :key="index" class="goodList-div">
                <p>品名：{{item.prodTitleZh}}</p>
                <p>品牌：【
                  <dict-tag :type="DICT_TYPE.PRODUCT_RECORD_ATTRIBUTE" :value="item.productRecord" />
                  】
                </p>
                <p>其他：{{getTotlContent(item)}}</p>
              </div>
            </section>
          </template>
        </el-table-column>
        <el-table-column label="控货" align="center" prop="">
          <template slot-scope="scope">
            {{scope.row.isCargoControl}}
          </template>
        </el-table-column>
        <el-table-column label="计划箱数" align="center" prop="loadNum">
          <template slot-scope="scope">
            {{ scope.row.loadNum }}箱
          </template>
        </el-table-column>
        <el-table-column label="实装箱数" align="center" prop="num">
          <template slot-scope="scope">
            {{ scope.row.num }}箱
          </template>
        </el-table-column>
        <el-table-column label="提货点" align="center" prop="destWarehouse" />
        <el-table-column label="体积" align="center" prop="loadVolume">
          <template slot-scope="scope">
            {{ scope.row.loadVolume }}m³
          </template>
        </el-table-column>
        <el-table-column label="重量" align="center" prop="loadWeight">
          <template slot-scope="scope">
            {{ scope.row.loadWeight }}kg
          </template>
        </el-table-column>
        <el-table-column label="跟进客服" align="center" prop="" />
        <el-table-column label="制作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <!-- 0 （未制作提货单）  1（审核中） 2（审核通过） 3（审核拒绝） -->
            <el-button v-if="scope.row.status === 0" type="text" size="small" @click="handleCommand('makeBill',scope.row)">提单制作</el-button>
            <el-button v-if="scope.row.status === 1" type="text" size="small" @click="handleCommand('queryBill',scope.row)">审核中</el-button>
            <template v-if="scope.row.status === 2">
              <el-button type="text" size="small" @click="handleCommand('previewBill',scope.row)" style="color:green">已审核通过</el-button>
              <el-button type="text" size="small" @click="handleCommand('queryBill',scope.row)">重新制作</el-button>
              <el-button type="text" size="small" @click="handleCommand('resetBill',scope.row)" style="color:#333333">重置</el-button>
            </template>
            <template v-if="scope.row.status === 3">
              审核拒绝
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-row>
      <el-col class="totle-info">
        <div>总计：{{getSumData}}</div>
        <div>容量：{{calcCapacity}}</div>
      </el-col>
    </el-row>

    <el-dialog :title="dialogCfg.title" :visible.sync="dialogCfg.visible" :width="dialogCfg.width" :fullscreen="dialogCfg.fullscreen" append-to-body class="shippingSea-dialog">
      <makeLadingBill v-if="['makeBill','queryBill','resetBill'].includes(dialogCfg.type)" :currData="currData" :currRow="currRow" :dialogCfg="dialogCfg" @closeDialog="closeDialog" />
      <previewBill v-if="dialogCfg.type === 'previewBill'" :contentHtml="currData.billContent" :currRow="currRow" :type="dialogCfg.type" />
    </el-dialog>
  </el-row>
</template>

<script>
import {
  getMakeBillList,
  makeBillService,
  getBillService,
  deleteBillService,
  zipDownload,
} from "@/api/ecw/box";
import { getTotlContent, getCapacity } from "../shippingSea/utils";
import makeLadingBill from "./makeLadingBill.vue";
import previewBill from "./previewBill.vue";
import FileSaver from "file-saver";

export default {
  name: "ladingBill",
  components: { makeLadingBill, previewBill },
  props: {
    shipmentObj: Object,
    getCabinetName: Function,
  },
  data() {
    return {
      billData: {
        list: [],
      },
      // 提货单数据
      currData: {},
      // 当前行
      currRow: {},
      // 弹出类型
      dialogCfg: {
        title: "",
        type: "",
        width: "80%",
        // 是否显示弹出层
        visible: false,
        fullscreen: false,
      },
      // 模板内容
      billContent: "",
    };
  },
  created() {
    this.getBillList();
    this.buildTitle();
  },
  methods: {
    getTotlContent,
    getBillList() {
      getMakeBillList({ shipmentId: this.shipmentObj.id }).then((res) => {
        this.billData = res.data;
      });
    },
    buildTitle() {
      const cabinetLabel = this.getCabinetName(this.shipmentObj.cabinetId);
      const title = `查看提单 ${this.shipmentObj.selfNo ?? ""} 柜号：${
        this.shipmentObj.cubNo ?? ""
      } 柜型：${cabinetLabel}`;
      this.$set(this.dialogCfg, "title", title);
    },
    closeDialog(type) {
      this.$set(this.dialogCfg, "visible", false);
      if (type === "query") {
        this.getBillList();
      }
    },
    handleCommand(type, row) {
      switch (type) {
        case "previewBill":
          this.getBill(row);
          break;
        case "makeBill":
          this.makeBill(row);
          break;
        case "queryBill":
          this.getBill(row);
          break;
        case "resetBill":
          // 先删除，在创建
          deleteBillService(row.id).then((res) => {
            const { code } = res;
            if (code === 0) {
              this.makeBill(row);
            }
          });
          break;
      }
      this.currRow = row;
      this.$set(this.dialogCfg, "type", type);
      this.$set(this.dialogCfg, "visible", true);
    },
    makeBill(row) {
      makeBillService({ orderId: row.orderId }).then((res) => {
        const { data } = res;
        const { titleZh = "", contentZh = "" } = data?.ladingTemplate ?? {};
        let billContent = `${titleZh}${contentZh}`,
          orderNo = data.orderInfo?.orderNo ?? "";
        this.currData = {
          billContent,
          orderNo,
        };
      });
    },
    getBill(row) {
      getBillService({ id: row.id }).then((res) => {
        const { data } = res;
        this.currData = {
          billContent: data?.billContent ?? "",
          orderNo: this.currRow.orderNo,
        };
      });
    },
    clickZipDownload() {
      zipDownload({ shipmentId: this.shipmentObj.id }).then((res) => {
        let blob = new Blob([res], { type: "application/zip" });
        FileSaver.saveAs(blob, "打包文件.zip");
      });
    },
  },
  computed: {
    /* 总计 */
    getSumData() {
      return `${this.billData.totalNum ?? 0}箱 ${
        this.billData.totalVolume ?? 0
      }m³ ${this.billData.totalVolume ?? 0}kg`;
    },
    /* 容量 */
    calcCapacity() {
      const { cabinet } = this.billData;
      return getCapacity(cabinet);
    },
  },
};
</script>

<style lang="scss" scoped>
.shipping-ladingBill {
  .oper-button {
    text-align: right;
  }
  .table-goodList {
    p {
      margin: 0;
    }
    .goodList-div {
      border-bottom: 1px solid #e6ebf5;
      > p {
        text-align: left;
      }
      > p:last-child {
        > span {
          margin-right: 5px;
        }
      }
    }
    > div:last-child {
      border-bottom: none;
    }
  }
  .totle-info {
    font-size: 20px;
    margin-top: 15px;
  }
}
</style>