emis-frontend/src/views/emis/customerService/waybillTracking.vue

<template>
  <XdPageContainer  class="dashboard-container" >
    <!-- class="app-container" -->
    <SearchForm style="background: white;    padding: 10px;"  class="queryForm" :model="queryParams" ref="queryForm"   size="mini" :maxShow="9" label-width="100px"    @search="handleQuery" @reset="resetQuery">
      <el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
        <el-col  :span="14">
          <el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
            <el-col :span="24">
                <el-form-item label="按运单号查询" prop="billCode">
                  <XdTextareaInput
                    v-model="queryParams.billCode"
                    :placeholder="$t('多个流水号逗号或换行隔开')"
                    clearable
                    :rows="4"
                  />
                </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="" prop="blSubBill">
                <el-checkbox style="font-size:400;margin-right:10px;" v-model="blSubBill" :true-label="1" :false-label="0">显示子单</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>

        </el-col>
        <el-col :span="10">

        </el-col>
      </el-row>

    </SearchForm>

    <div style="padding: 0px 10px 5px 0px;">

      <div style="display:inline-flex;width: 100%;border-bottom: 1px solid #d9d9d9;margin-bottom: 20px;">
        <div class="form-group-title"><span class="title">{{ $t('跟踪信息') }}</span></div>
      </div>
      <!-- <el-scrollbar style="height: 100%"> -->
        <!-- 如果显示子单勾选则循环显示子单 -->
        <div v-for="(item,index) in emisWaybillList" :key="resetRefreshId+'.'+index">
          <CardWithHeader :header="'运单号:'+item.billCode" >
              <template v-slot:body>
                <TraceWaybillDetailView :resetRefreshId="resetRefreshId" :scanBillCode="item.billCode" :billDetail="item.waybillDetail" :key="resetRefreshId+'.d.'+index" ></TraceWaybillDetailView>
              </template>
          </CardWithHeader>

          <div v-if="blSubBill==1"  >
            <CardWithHeader v-for="subSeqNum in item.waybillDetail.parcelQty" :key="subSeqNum" :header="'子单号:'+item.billCode+lpadZero(subSeqNum,4) +' - 主单:'+item.billCode" >
                <template v-slot:body>
                  <TraceWaybillDetailView2 :resetRefreshId="resetRefreshId"  :scanBillCode="item.billCode+lpadZero(subSeqNum,4)" :billDetail="item.waybillDetail" :key="resetRefreshId+'.d.'+index+'.'+subSeqNum" ></TraceWaybillDetailView2>
                </template>
            </CardWithHeader>
          </div>
        </div>

      <!-- </el-scrollbar> -->
    </div>

  </XdPageContainer>
</template>

<script>
// import 'element-ui/lib/theme-chalk/display.css';
import { queryScanWaybillList } from "@/api/emis/emisTmsScanRecord";

import { formatSearchStr,deepClone } from '@/utils/index'

import CardWithHeader from '@/components/CardWithHeader/index.vue';
import TraceWaybillDetailView from './traceWaybillDetailView.vue';
import TraceWaybillDetailView2 from './traceWaybillDetailView.vue';

export default {
  name: "WaybillTracking",

  components: {
    CardWithHeader,TraceWaybillDetailView,TraceWaybillDetailView2
  },
  dicts: [],
  data() {
    return {
      resetRefreshId:null,
      // 运单列表表格数据
      emisWaybillList: [],
      blSubBill:0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        billCode: null,

      },
    };
  },
  created() {

  },
  methods: {
    getUUID() {
        return Math.random().toString(36).substring(3,10);
    },
    lpadZero(val,len) {
      return (new Array(len + 1).join('0') + val).slice(-len);
    },
    /** 查询运单列表列表 */
    getList() {

      this.emisWaybillList=[];

      this.loading = true;

      if(!this.queryParams.billCode){
        return;
      }

      if(this.queryParams.billCode){
          this.queryParams.billCode=formatSearchStr(this.queryParams.billCode);
      }

      queryScanWaybillList(this.queryParams).then(response => {
        this.emisWaybillList = response.rows;
        this.resetRefreshId="tracing-"+Math.random().toString(36).substring(3,10);

        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },



  }
};
</script>

<style lang="scss" scoped>

:deep .el-form-item__label-wrap {
  margin-left: 0 !important;
  }
  .el-divider{
    margin-top: 0px;
    background: 0 0;
    border-top: 1px solid #E6EBF5;
  }
  .el-divider__text {
    color: #0955ee;
    cursor: pointer;
  }


   .query-label {
    .el-radio{
        display: block;
        line-height: 23px;
        white-space: normal;
        margin-right: 0;
    }
  }

  .queryForm .el-form-item {
    margin-bottom: 0px !important;
}

.tip :deep.is-success > .el-step__line > i {
    background-color: #67c23a;
}
.tip :deep.is-error > .el-step__line > i {
    background-color: #f56c6c;
}


</style>