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

<template>
  <XdPageContainer  class="dashboard-container" >

    <!-- class="app-container" -->
    <SearchForm style="background: white;    padding: 10px;" slot="pageHeader" class="queryForm" :model="queryParams" ref="queryForm"   size="mini" :maxShow="9" label-width="100px"    @search="handleQuery" @reset="resetQuery">
      <!-- label-width="100px" -->
      <el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
        <!-- :span="6" -->
        <el-col  :span="6">
          <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="queryParams.blSubBill" :true-label="'1'" :false-label="'0'">显示子单</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>

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

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

    </SearchForm>

    <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>

    <div style="min-height: 100%;padding: 0px 10px 5px 0px;">
      <el-scrollbar style="height: 1000px">
        <CardWithHeader v-for="(item,index) in emisWaybillList" :key="resetRefreshId+'.'+index" :header="'运单号:'+item.billCode" >
            <template v-slot:body>
              <TraceWaybillDetailView :scanBillCode="item.billCode" :billDetail="item.waybillDetail" :key="resetRefreshId+'.d.'+index" ></TraceWaybillDetailView>
            </template>
        </CardWithHeader>
      </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';
export default {
  name: "WaybillTracking",

  components: {
    CardWithHeader,TraceWaybillDetailView
  },
  dicts: [],
  data() {
    return {
      resetRefreshId:null,
      // 运单列表表格数据
      emisWaybillList: [],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        billCode: null,
        blSubBill:0,
      },
    };
  },
  created() {

  },
  methods: {
    getUUID() {
        return Math.random().toString(36).substring(3,10);
    },
    /** 查询运单列表列表 */
    getList() {

      this.resetRefreshId="tracing-"+this.getUUID();
      this.loading = true;

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

      if(this.queryParams.billCode){
         // 处理子单号
        //  let qBillCode=formatSearchStr(this.queryParams.billCode);
          // let billArr = qBillCode.split(",");
          // let newBillCodeStr="";
          // billArr.forEach(item=>{
          //     if(item.startsWith("T")){
          //       let mainBillCode=item.substr(0,14);
          //       newBillCodeStr=newBillCodeStr+mainBillCode+",";
          //     }else{
          //       newBillCodeStr=newBillCodeStr+item+",";
          //     }
          // });
          this.queryParams.billCode=formatSearchStr(this.queryParams.billCode);
      }

      queryScanWaybillList(this.queryParams).then(response => {
        this.emisWaybillList = response.rows;
        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 ::v-deep.is-success > .el-step__line > i {
    background-color: #67c23a;
}
.tip ::v-deep.is-error > .el-step__line > i {
    background-color: #f56c6c;
}


</style>