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

<template>
  <div class="">

    <!-- <div>

      <ImagePreview height="50px" v-for="pic in (scope.row.picUrl||'').split(',')" :key="pic" :src="pic" ></ImagePreview>

    </div> -->
    <xd-table v-loading="loading"
           border stripe
           size="mini"
           height="300px"
           :data="dataList"
           :queryParams="queryParams"
           :total="total"
           @queryTable="getList"
           :showRightButton="false"
           :showPagination="false"
           :showOperateButton="false"
           >
      <el-table-column label="序号" align="center" min-width="60">
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)"> </span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('录入时间')" align="center" prop="registerDate" min-width="170" >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.registerDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('图片')" align="center" prop="picUrl" min-width="100">
        <template slot-scope="scope">
          <ImagePreview height="50px" v-for="pic in (scope.row.picUrl||'').split(',')" :key="pic" :src="pic" ></ImagePreview>
        </template>
      </el-table-column>
      <!-- <el-table-column :label="$t('运单号')" align="center" prop="billCode" min-width="170" />
      <el-table-column :label="$t('签收状态')" align="center" prop="status" min-width="100">
        {{ $t("已签收") }}
      </el-table-column>/> -->
      <!-- <el-table-column :label="$t('签收地址')" align="center" prop="signAddress" min-width="100" /> -->
      <!-- <el-table-column :label="$t('签收人')" align="center" prop="signMan" min-width="100" />
      <el-table-column :label="$t('签收时间')" align="center" prop="signDate" min-width="170" >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.scanDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('派件员')" align="center" prop="dispatchOrSendMan" min-width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.waybillDetail.dispatchManName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('寄件日期')" align="center" prop="sendDate" min-width="170" >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.waybillDetail.sendDate) }}</span>
          </template>
      </el-table-column>
      <el-table-column :label="$t('预计到达时间')" align="center" prop="estimateDate" min-width="150" >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.waybillDetail.estimateDate) }}</span>
          </template>
      </el-table-column>
      <el-table-column :label="$t('线路')" align="center" prop="" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.waybillDetail.transLineTypeName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('产品类型')" align="center" prop="" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.waybillDetail.productTypeName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('时效')" align="center" prop="timeType" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.waybillDetail.timeType }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('录入人')" align="center" prop="registerManName" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.waybillDetail.registerManName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('录入网点')" align="center" prop="recordSiteCode" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.waybillDetail.registerSiteName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('录入时间')" align="center" prop="waybillDetail.registerDate" min-width="170" >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.waybillDetail.registerDate) }}</span>
          </template>
      </el-table-column> -->
      <!-- <el-table-column :label="$t('签收网点')" align="center" prop="signSite" min-width="100" />
      <el-table-column :label="$t('客户名称')" align="center" prop="customerName" min-width="150">
        <template slot-scope="scope">
            <span class="ellipsis">{{ scope.row.waybillDetail.customerName }}</span>
          </template>
      </el-table-column>
      <el-table-column :label="$t('数据产生来源')" align="center" prop="waybillDetail.dataFrom" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.waybillDetail.dataFrom }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('签收信息备注')" align="center" prop="remark" min-width="150">
        <template slot-scope="scope">
          <span class="ellipsis">{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('收件国家')" align="center" prop="waybillDetail.receiveCountryName" min-width="150">
        <template slot-scope="scope">
          <span class="ellipsis">{{ scope.row.waybillDetail.receiveCountryName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('收件省份')" align="center" prop="waybillDetail.receiveProvinceName" min-width="150">
        <template slot-scope="scope">
          <span class="ellipsis">{{ scope.row.waybillDetail.receiveProvinceName }}</span>
        </template>
      </el-table-column> -->



    </xd-table>
  </div>
</template>

<script>
import { listEmisTmsScanRecord } from "@/api/emis/emisTmsScanRecord";

export default {
  name: "TraceInfoView",
   props:{
    billCode:{
      type: String,
    }
  },
  dicts: ['emis_scan_type'],
  data() {
    return {
      reverse: false,
      loading: true,
      dataList: [],
      total:0,
      queryParams:{

      }
    };
  },
  created() {
    this.getList();
  },
  watch: {
      "billCode": {
      handler (newValue, oldValue) {
        this.getList();
      },
      deep: true
    }
  },
  methods: {
    getList() {
         this.loading = true;
         this.queryParams={
            pageNum:1,
            pageSize:1000,
            billCode:this.billCode
         }
         listEmisTmsScanRecord(this.queryParams).then(response => {
          this.dataList = response.rows;
          this.total=response.total;
          this.loading = false;
        });

    },

    getIndex($index) {
          return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
    },

  }
};
</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;
  }
}

.siteOrManHighlight {
  color: #00BFFF;
  font-weight: bold;
}
</style>