emis-frontend/src/views/emis/emisTmsSiteBatch/packListView.vue

<template>
    <div slot="pageContent">
        <XdTable v-loading="loading"
            :height="(slotProps.contentHeight-200)+'px'"
            border
            ref="table"
            size="small"
            :data="emisTmsPackList"
            showSearch.sync="false"
            :queryParams="queryParams"
            :total="total"
            :showRightButton="false"
            @queryTable="getList"
            @selection-change="handleSelectionChange"
            @expand-change="expandChange"
            :row-class-name="disabledRow"
            :showCustomizeTpl="false"
        >
            <el-table-column v-if="showType=='pack'" type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column type="expand">
              <template slot-scope="scope">
                <XdTable v-loading="loadingDone"
                  height="200px"
                  style="margin-left: 5%;width:90%;"
                  border
                  size="small"
                  :data="emisTmsDonePackList"
                  showSearch.sync="false"
                  :queryParams="queryDoneParams"
                  :total="doneTotal"
                  :showRightButton="false"
                  @queryTable="handleQueryDone"
                  @selection-change="handleDoneSelectionChange"
                >
                  <el-table-column :label="$t('运单号')" align="center" prop="billCode" min-width="170" />
                  <el-table-column :label="$t('订单号')" align="center" prop="orderSn" min-width="170" />
                  <el-table-column :label="$t('进仓单号')" align="center" prop="intoWarehouseCode" min-width="100" />
                  <el-table-column :label="$t('扫描状态')" align="center" prop="waybillStatus" width="100" >
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.emis_waybill_status" :value="scope.row.waybillStatus"/>
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('当前网点')" align="center" prop="currentSiteName" min-width="100" />
                  <el-table-column :label="$t('下一网点')" align="center" prop="nextSiteName" min-width="100" />
                  <el-table-column :label="$t('寄件国家')" align="center" prop="sendCountryName" min-width="100">
                    <template slot-scope="scope">
                      <span class="ellipsis">{{ scope.row.sendCountryName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('目的国家')" align="center" prop="receiveCountryName" min-width="100">
                    <template slot-scope="scope">
                      <span class="ellipsis">{{ scope.row.receiveCountryName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('线路')" align="center" prop="transLineTypeName" min-width="100" />
                  <el-table-column :label="$t('产品类型')" align="center" prop="productTypeName" min-width="100" />
                  <el-table-column :label="$t('预计到达时间')" align="center" prop="estimateDate" min-width="170">
                    <template slot-scope="scope">
                      <span>{{ parseTime(scope.row.estimateDate, '{y}-{m}-{d}') }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('件数')" align="center" prop="parcelQty" min-width="100" />
                  <el-table-column :label="$t('实际重量')" align="center" prop="billWeight" min-width="100" />
                  <el-table-column :label="$t('总体积')" align="center" prop="totalVolume" min-width="100" />
                  <el-table-column :label="$t('体积重量')" align="center" prop="volumeWeight" min-width="100" />
                  <el-table-column :label="$t('结算重量')" align="center" prop="settlementWeight" min-width="100" />
                  <el-table-column :label="$t('收件人')" align="center" prop="receiveName" min-width="150">
                    <template slot-scope="scope">
                      <span class="ellipsis">{{ scope.row.receiveName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('收件公司')" align="center" prop="receiveCompany" min-width="100">
                    <template slot-scope="scope">
                      <span class="ellipsis">{{ scope.row.receiveCompany }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('取件员')" align="center" prop="takePieceEmployeeName" min-width="150" />
                  <el-table-column :label="$t('取件方式')" align="center" prop="pickupMethod" min-width="100">
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.emis_qujian_fangshi" :value="scope.row.pickupMethod"/>
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('付款方式')" align="center" prop="paymentType" min-width="100">
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.emis_payment_type" :value="scope.row.paymentType"/>
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('运费')" align="center" prop="freight" min-width="100" />
                  <el-table-column :label="$t('寄件人')" align="center" prop="sendName" min-width="150" />
                  <el-table-column :label="$t('寄件公司')" align="center" prop="sendCompany" min-width="100">
                    <template slot-scope="scope">
                      <span class="ellipsis">{{ scope.row.sendCompany }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('备注')" align="center" prop="remark" min-width="100">
                    <template slot-scope="scope">
                      <span class="ellipsis">{{ scope.row.remark }}</span>
                    </template>
                  </el-table-column>
                </XdTable>
              </template>
            </el-table-column>
            <el-table-column v-if="showType=='batch'" :label="$t('合包号')" align="center" prop="packNo" min-width="170" />
            <el-table-column v-if="showType=='batch'" :label="$t('合包状态')" align="center" prop="packStatus" min-width="100">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.emis_pack_status" :value="scope.row.packStatus"/>
              </template>
            </el-table-column>
            <el-table-column v-if="showType=='batch'" :label="$t('操作网点')" align="center" prop="createSiteName" min-width="100" />
            <el-table-column v-if="showType=='batch'" :label="$t('是否可拆')" align="center" prop="blUnpack" min-width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.blUnpack == "1" ? "是" : "否" }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="showType=='batch'" :label="$t('操作员')" align="center" prop="createByName" min-width="150" />
            <el-table-column v-if="showType=='batch'" :label="$t('票数')" align="center" prop="totalWaybillQty" min-width="100" />
            <el-table-column v-if="showType=='batch'" :label="$t('件数')" align="center" prop="totalParcelQty" min-width="100" />
            <el-table-column v-if="showType=='batch'" :label="$t('实际重量')" align="center" prop="totalWeight" min-width="100" />
            <el-table-column v-if="showType=='batch'" :label="$t('体积')" align="center" prop="totalVolume" min-width="100" />
            <el-table-column v-if="showType=='batch'" :label="$t('创建时间')" align="center" prop="packDate" min-width="170" />

            <el-table-column v-if="showType=='pack'" :label="$t('合包号')" align="center" prop="packNo" min-width="170" />
            <el-table-column v-if="showType=='pack'" :label="$t('合包状态')" align="center" prop="packStatus" min-width="100">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.emis_pack_status" :value="scope.row.packStatus"/>
              </template>
            </el-table-column>
            <el-table-column v-if="showType=='pack'" :label="$t('创建网点')" align="center" prop="createSiteName" min-width="100" />
            <el-table-column v-if="showType=='pack'" :label="$t('发出网点')" align="center" prop="sendStiteName" min-width="100" />
            <el-table-column v-if="showType=='pack'" :label="$t('下一网点')" align="center" prop="nextSiteName" min-width="100" />
            <el-table-column v-if="showType=='pack'" :label="$t('是否可拆')" align="center" prop="blUnpack" min-width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.blUnpack == "1" ? "是" : "否" }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="showType=='pack'" :label="$t('创建人')" align="center" prop="createByName" min-width="150" />
            <el-table-column v-if="showType=='pack'" :label="$t('件数')" align="center" prop="totalParcelQty" min-width="100" />
            <el-table-column v-if="showType=='pack'" :label="$t('合包重量')" align="center" prop="totalWeight" min-width="100" />
            <el-table-column v-if="showType=='pack'" :label="$t('创建时间')" align="center" prop="packDate" min-width="170" />
        </XdTable>
    </div>
</template>

<script>
import { listEmisTmsPack, getPackNo, getEmisTmsPack, delEmisTmsPack, addEmisTmsPack, updateEmisTmsPack } from "@/api/emis/emisTmsPack";
import { listEmisTmsPackDtl, delEmisTmsPackDtl, addEmisTmsPackDtl } from "@/api/emis/emisTmsPackDtl";
import { parseTime, dateToStr } from "@/utils/custom";
import { formatSearchStr } from '@/utils/index'
import { PageSizes } from "pdf-lib";

export default {
  name: "PackListView",
  props:{
    propParams: {},
    propType: "",
    slotProps: {}
  },
  dicts: [],
  data() {
    return {
      loading: false,
      loadingDone: false,
      total: 0,
      doneTotal: 0,

      // TMS合包表格数据
      emisTmsPackList: [],

      canSelectList: [],// 被选中的合包列表

      queryParams:{},

      selection:[],// 选中的合包

      showType: "pack",

      // 合包明细
      emisTmsDonePackList:{},

      currentExpandedRow: null,

      // 查询参数
      queryDoneParams: {
        pageNum: 1,
        pageSize: 20,
        packNo: null,
        params:{}
      },

    };
  },
  created() {
    // this.initData();
    this.queryParams = this.propParams || {};
    this.queryParams.params = this.queryParams.params || {};
    this.queryParams.params.isNeedPack = null;
    this.showType = this.propType;
  },
  watch: {
    "propParams": {
      handler (newValue, oldValue) {
        this.queryParams = newValue || {};
        this.queryParams.params = this.queryParams.params || {};
        this.queryParams.params.isNeedPack = null;
        // this.initData();
      },
      deep: true
    }
  },
  methods: {
    disabledRow({ row }) {
      if (row.blUnpack == "1") {
        return 'disabled-row';
      }
      return '';
    },
    // 选择表格数据
    handleSelectionChange(selection){
      // let destCountry = "";
      this.canSelectList = [];
      for(let i = 0; i < selection.length; i++){
        if(selection[i].blUnpack == "0"){
          // 去掉此逻辑，因为合包中的目的国家可能为空，从“去组批次”的逻辑里进行判断
          // if(!destCountry){
          //   destCountry = selection[i].destCountry;
          // }else if(destCountry != selection[i].destCountry){
          //   this.canSelectList = [];
          //   this.$message.error("选择数据中存在不同的目的国家");
          // }
          this.canSelectList.push(selection[i]);
        }
      }
    },
    async getPackBillList(){
      debugger;
      let billList = [];
      let destCountry = "";
      for(let i = 0; i < this.canSelectList.length; i++ ){
        let resList = await listEmisTmsPackDtl({packNo: this.canSelectList[i].packNo});
        if(!resList || resList.code != 200){
          return{
            code: -1,
            message: resList && resList.msg || "未知错误",
            list: []
          };
        }
        for(let p = 0; p < resList.rows.length;p++){
          if(resList.rows[p].mainBillCode){
            if(!destCountry){
              destCountry = resList.rows[p].destCountry;
            }else if(destCountry != resList.rows[p].destCountry){
              return {
                code: -1,
                message: "选择数据中存在不同的目的国家",
                list: []
              };
            }
            billList.push(resList.rows[p].waybillDetail);
          }
        }
      }
      return {
        code: 0,
        message:"",
        list: billList
      }
    },
    // 打开表格扩展
    expandChange(row, expandedRows){
      if(expandedRows.length==0){// 没有扩展的行
        this.currentExpandedRow = null;
        return;
      }
      if(this.currentExpandedRow && expandedRows.length == 1 && expandedRows[0].packNo == this.currentExpandedRow.packNo){// 已经查询过了
        return;
      }
      this.loading = true;
      this.currentExpandedRow = row;
      this.emisTmsDonePackList=[];
      listEmisTmsPackDtl({packNo: row.packNo}).then(resList => {
        if(!resList || resList.code != 200){
          this.$message.error(resList && resList.msg || "未知错误");
          return;
        }
        for(let p = 0; p < resList.rows.length;p++){
          this.emisTmsDonePackList.push(resList.rows[p].waybillDetail);
        }
        this.doneTotal = resList.total;
        this.loading = false;
      });
      if(expandedRows.length > 1){
        for(let i = 0; i < expandedRows.length; i++){
          if(row.packNo != expandedRows[i].packNo){
            this.$refs.table.$refs.table.$refs.elTable.toggleRowExpansion(expandedRows[i], false);
          }
        }
      }

    },
    // 查询合包明细表
    async handleQueryDone(){
      this.single = true;
      this.multiple = true;
      this.loadingDone = true;

      let resList = await listEmisTmsPackDtl(this.queryDoneParams);
      this.loadingDone = false;
      if(!resList || resList.code != 200){
        this.$message.error(resList && resList.msg || "未知错误");
        return;
      }
      //this.tempExistCoPackWayBillList = resList.rows;//临时存储，用于运单号校验
      this.doneTotal = resList.total;
      this.emisTmsDonePackList = [];
      for(let p = 0; p < resList.rows.length;p++){
        let obj = {...resList.rows[p].waybillDetail};
        obj.packNo = resList.rows[p].packNo;
        this.emisTmsDonePackList.push(obj);
      }
      this.doneTotal = resList.total;
    },
    handleDoneSelectionChange(){

    },
    /** 查询TMS合包列表 */
    getList() {
      this.loading = true;
      this.single = true;
      this.multiple = true;
      // this.queryParams.params = {};
      if(this.queryParams.packNo){
        let qBillCode=formatSearchStr(this.queryParams.packNo);
        let billArr = qBillCode.split(",");
        let newBillCodeStr="";
        billArr.forEach(item=>{
            if(item.startsWith("T")){
              let mainBillCode=item.substr(0,14);
              newBillCodeStr=newBillCodeStr+mainBillCode+",";
            }else if(item == ""){

            }else{
              newBillCodeStr=newBillCodeStr+item+",";
            }
        });
        if(this.queryParams.queryOrderType == "1"){
          this.queryParams.packNo=newBillCodeStr;
          this.queryParams.billCode=null;
        }else{
          // 处理子单号
          this.queryParams.billCode=newBillCodeStr;
          this.queryParams.packNo=null;
        }
      }

      this.emisTmsPackList = [];
      // if (null != this.dateTimeRange && '' != this.dateTimeRange) {
      //   this.queryParams.params["beginSendDate"] = dateToStr(new Date(this.dateTimeRange[0]));
      //   this.queryParams.params["endSendDate"] = dateToStr(new Date(this.dateTimeRange[1]));
      // }
      this.queryParams.params["beginSendDate"] = null;
      this.queryParams.params["endSendDate"] = null;
      this.queryParams.params["isNeedPack"] = null;
      this.queryParams.destCountry = this.queryParams.receiveCountry;
      listEmisTmsPack(this.queryParams).then(response => {
        this.emisTmsPackList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

  }
};
</script>


<style rel="stylesheet/scss" lang="scss">

.margin-top{
  margin-top: 20px;
}

.el-descriptions-item__label.is-bordered-label {
    min-width: 80px;
}

.printMeClass {
  font-family: SimHei;
  label {
    font-weight: normal;
  }
}
.ellipsis {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
  }
.el-table .disabled-row .cell .el-checkbox__inner {
  display: none; /* 隐藏checkbox */
}
.el-table .disabled-row .cell::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6); /* 添加一个遮盖层 */
}
</style>