emis-frontend/src/views/emis/emisWaybill/statpanel/ScanDtlAllListPanel.vue

<template>
  <XdPageContainer >
    <SearchForm  slot="pageHeader"  :model="queryParams" ref="queryForm"   size="mini" :maxShow="8"  label-width="100px"
    v-show="showSearch"
    @search="handleQuery"
    @reset="resetQuery">
      <el-form-item label="运单号" prop="params.billCode">
                  <XdTextareaInput
                    v-model="queryParams.params.billCode"
                    :placeholder="$t('多个流水号逗号或换行隔开')"
                    clearable
                    :rows="2"
                  />
      </el-form-item>
      <el-form-item label="录单日期" prop="dateTimeRange">
        <elDateAdvPicker clearable v-model="dateTimeRange"  ></elDateAdvPicker>
      </el-form-item>
      <el-form-item label="寄件财务中心" prop="params.sendCenterCode">
        <EmisSiteSimplePicker1  v-model="queryParams.params.sendCenterCode" :siteType="2" ></EmisSiteSimplePicker1>
      </el-form-item>
      <el-form-item label="寄件网点" prop="params.sendSiteCode">
        <EmisSiteSimplePicker2  v-model="queryParams.params.sendSiteCode"  ></EmisSiteSimplePicker2>
      </el-form-item>

      <el-form-item label="目的财务中心" prop="params.destinationCenterCode">
        <EmisSiteSimplePicker3  v-model="queryParams.params.destinationCenterCode" :siteType="2"  ></EmisSiteSimplePicker3>
      </el-form-item>

      <el-form-item label="目的网点" prop="params.dispatchUnderlingSiteCode">
        <EmisSiteSimplePicker4  v-model="queryParams.params.dispatchUnderlingSiteCode"  ></EmisSiteSimplePicker4>
      </el-form-item>

    </SearchForm>
    <xdTable

          slot="pageContent"
          slot-scope="slotProps"
          :height="(slotProps.contentHeight-60)+'px'"

            v-loading="loading"
            border
            size="mini"

            storageName="ScanDtlAllListPanel_main_240702"

            :data="scanStatDtlList"
            :showSearch.sync="showSearch"
            :queryParams="queryParams"
            :total="total"
            @queryTable="getScanDtlList"
            @selection-change="handleSelectionChange"
            @sort-change="handleSortChange"
            >

            <el-table-column type="selection" width="55" align="center" />

            <el-table-column :label="$t('运单号')" align="center" prop="billCode" min-width="130" :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('寄件日期')" align="center" prop="waybillDetail.sendDate" min-width="170" :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('寄件网点')" align="center" prop="waybillDetail.sendSiteName" min-width="150" :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('寄件财务中心')" align="center" prop="waybillDetail.sendCenterName" min-width="120" :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('目的财务中心')" align="center" prop="waybillDetail.destinationCenterName" min-width="120" :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('目的网点')" align="center" prop="waybillDetail.dispatchUnderlingSiteName" min-width="150" :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('录单人')" align="center" prop="waybillDetail.registerManName" min-width="80" :show-overflow-tooltip="true" />
            <el-table-column :label="$t('取件员')"  align="center" prop="waybillDetail.takePieceEmployeeName" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('件数')" align="center" prop="waybillDetail.parcelQty" min-width="80" />
            <el-table-column :label="$t('实际重量')" align="center" prop="waybillDetail.billWeight" min-width="80" />
            <el-table-column :label="$t('体积')" align="center" prop="waybillDetail.totalVolume" min-width="80" />
            <el-table-column :label="$t('结算重量')" align="center" prop="waybillDetail.settlementWeight" min-width="80" />
            <el-table-column :label="$t('收件扫描次数')" align="center" prop="gotCount" min-width="150" :sortable="true"/>
            <el-table-column :label="$t('发件扫描次数')" align="center" prop="sendCount" min-width="150" :sortable="true"/>
            <el-table-column :label="$t('到件扫描次数')" align="center" prop="arrivalCount" min-width="150" :sortable="true"/>
            <el-table-column :label="$t('派件扫描次数')" align="center" prop="sentCount" min-width="150" :sortable="true"/>
            <el-table-column :label="$t('转件扫描次数')" align="center" prop="transferCount" min-width="150" :sortable="true"/>
            <el-table-column :label="$t('问题件扫描次数')" align="center" prop="issueCount" min-width="150" :sortable="true"/>
            <el-table-column :label="$t('留仓扫描次数')" align="center" prop="holdCount" min-width="150" :sortable="true"/>
            <el-table-column :label="$t('签收状态')" align="center" prop="waybillDetail.blSign" width="120" :sortable="true">
              <template slot-scope="scope">
                  <el-tag v-if="scope.row.waybillDetail.blSign=='1'" type="success">已签收</el-tag>
                  <el-tag v-else type="danger">未签收</el-tag>
              </template>
            </el-table-column>

      </xdTable>

  </XdPageContainer>
</template>

<script>

import elDateAdvPicker from '@/components/DatePickerAdv/elDateAdvPicker';

import EmisSiteSimplePicker1 from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
import EmisSiteSimplePicker2 from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
import EmisSiteSimplePicker3 from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
import EmisSiteSimplePicker4 from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
import {timeDiffTime,timeFormat} from '@/utils/dateUtils'


import {
  queryScanStatInfoDtlList,

 } from "@/api/emis/emisWaybill";

export default {
  name: "ScanDtlListPanel",
  props:{

  },
  components: {
    elDateAdvPicker,
    EmisSiteSimplePicker1,
    EmisSiteSimplePicker2,
    EmisSiteSimplePicker3,
    EmisSiteSimplePicker4,
  },
  dicts: ['emis_qujian_fangshi','emis_declare_mode','emis_customs_clear',
        'emis_tab_packing_type','emis_tab_dispatch_mode','emis_payment_type',
        'emis_calc_fee_type','emis_print_type','emis_payment_status','emis_waybill_status','emis_tab_dispatch_mode'
  ],
  data() {
    return {
      activeTab:'a1',

      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 创建时间搜索
      dateTimeRange:[],
      // 总条数
      total: 0,
      // 运单列表表格数据
      scanStatDtlList:[],

      // 弹出展示层
      id:null,
      titleView:"",
      openView: false,

      queryParams: {
        pageNum: 1,
        pageSize: 20,
        params:{
          billCode:null,
          sendSiteCode: null,
          sendCenterCode:null,
          dispatchUnderlingSiteCode: null,
          destinationCenterCode: null,
        }
      },
    };
  },
  watch: {
  },
  created() {

    const end = new Date()
    const start = new Date()
    start.setHours(0,0,0,0)
    end.setHours(23,59,59,0)
    this.dateTimeRange=[timeFormat(start), timeFormat(end)]


  },
  methods: {
    getScanDtlList() {
      // console.log("====>queryObj====>",this.queryObj);

      this.loading = true;
      this.queryParams=this.addDateRange(this.queryParams, this.dateTimeRange,"sendDate");
      // this.queryParams.params={
      //     "sendDay":this.queryObj.sendDate,
      //     "sendSiteCode":this.queryObj.sendSiteCode,
      //     "sendCenterCode":this.queryObj.sendCenterCode,
      //     "sendCenterCode":this.queryObj.sendCenterCode,
      // };


      queryScanStatInfoDtlList(this.queryParams).then(response => {
        this.scanStatDtlList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getScanDtlList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      if(selection!=null){
        this.billCode=selection[0].billCode;
      }
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    // 排序 查询字段是表格中字段名字 动态取值排序顺序
    getProperty(obj, str) {
      str = str.replace(/\[(\w+)\]/g, ".$1"); // 处理数组下标
      let arr = str.split(".");
      for (let i in arr) {
        obj = obj[arr[i]] || "";
      }
      return obj;
    },
   sortFun: function (attr, rev) {
      //第一个参数传入info里的prop表示排的是哪一列，第二个参数是升还是降排序
      if (rev == undefined||rev==null) {
          rev = 1;
      } else {
          rev = (rev) ? 1 : -1;
      }
      let that=this;
      return function (a, b) {
          a = that.getProperty(a,attr);
          b = that.getProperty(b,attr);
          if (a < b) {
              return rev * -1;
          }
          if (a > b) {
              return rev * 1;
          }
          return 0;
      }
    },
   // 排序 查询字段是表格中字段名字 动态取值排序顺序
   handleSortChange(column) {
      this.scanStatDtlList = this.scanStatDtlList.sort(
            this.sortFun(column.prop, column.order === 'ascending')
      );
   },
    handleFormChanged(){
        this.openForm = false;
        this.getList();
    },
    cancelForm(){
      this.openForm = false;
    },
    /** 列索引函数  */
    getIndex($index) {
          return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
    },
    /** 时间搜索响应函数 */
    dateTimeChange(value){
        this.dateTimeRange=value;
    },
  }
};
</script>

<style lang="scss" scoped>

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

</style>