//钢材统计报表
<template>
  <div class="purchasFuelNewMonitor">
    <div class="tableTop">
      <el-form :inline="true" style="margin-top :5px">
        <el-form-item>
          <el-select
            v-model="screen"
            placeholder="请选择需筛选的内容"
            clearable
            @change="changeScreen"
            style="width:150px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            style="width:200px"
            v-model="input"
            placeholder="请输入查询条件"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;"
            >订单时间：</label
          >
          <el-date-picker
            v-model="startTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width:200px"
          >
          </el-date-picker>
          <span>至</span>
          <el-date-picker
            v-model="endTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width:200px"
          >
          </el-date-picker>
          <el-button type="primary" class="btn" @click="onclick">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="exportAllReportToExcel"
            ><i class="el-icon-download"></i>Excel</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="refresh">
            <i class="el-icon-refresh"></i>
          </el-button>
        </el-form-item>
        <el-form-item>
          <span style="margin-left: 1rem">合计车数：</span>
          <el-input
            v-model="totalCapacity"
            :disabled="true"
            style="width: 100px;"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <span style="margin-left: 1rem">合计件数：</span>
          <el-input
            v-model="totalNumber"
            :disabled="true"
            style="width: 100px;"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        ref="tableRef"
        border
        stripe
        style="width: 100%; margin-top: 20px"
        max-height="700px"
        :row-style="{ height: '30px' }"
        :cell-style="{ fontWeight: '700' }"
      >
        <el-table-column
          width="50"
          label="序号"
          align="center"
          fixed="left"
          :resizable="false"
        >
          <template slot-scope="scope">{{ scope.row.group + 1 }}</template>
        </el-table-column>
        <el-table-column
          prop="consigneeName"
          label="下单客户"
          width="160px"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="carrierName"
          label="承运商"
          align="center"
          width="120px"
        >
        </el-table-column>
        <el-table-column
          prop="capacityNo"
          column-key="capacityNo"
          label="车牌号"
          align="center"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          prop="materialName"
          label="物资名称"
          align="center"
          width="150px"
        >
        </el-table-column>
        <el-table-column prop="materialSpe" label="物资规格" align="center">
        </el-table-column>
        <el-table-column
          prop="materialNum"
          label="物资件数"
          align="center"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          prop="addressPlace"
          label="收货地址"
          width="250px"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="orderStatus" label="运单状态" align="center">
        </el-table-column>
        <el-table-column prop="grossWeight" label="毛重"> </el-table-column>
        <el-table-column prop="grossWeightTime" label="毛重时间" width="130px">
        </el-table-column>
        <el-table-column prop="tareWeight" label="皮重"> </el-table-column>
        <el-table-column prop="tareWeightTime" label="皮重时间" width="130px">
        </el-table-column>
        <el-table-column prop="netWeight" label="净重"> </el-table-column>
        <el-table-column prop="entryGateTime" label="进厂时间" width="130px">
        </el-table-column>
        <el-table-column prop="loadTime" label="装货时间" width="130px">
        </el-table-column>
        <el-table-column prop="outGateTime" label="出厂时间" width="130px">
        </el-table-column>
        <el-table-column
          prop="arrivalAddress"
          label="抵达地址"
          width="300px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="receiptAddress"
          label="签收地址"
          width="300px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="orderNo"
          label="运输订单号"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="capacityTel"
          label="司机电话"
          width="250px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shipperName"
          label="发货单位"
          width="170px"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="truckNo" label="车序号"> </el-table-column>
        <el-table-column prop="consigneeTel" label="收货客户电话" width="120px">
        </el-table-column>
        <el-table-column prop="isSelfMention" label="是否自提" align="center">
        </el-table-column>
        <el-table-column
          prop="saleOrderNo"
          label="销售订单号"
          width="200px"
          align="center"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { sjTime, isVehicleNumber } from "@/utils/sharedJsFile";
import { getCookie } from "@/utils/util.js";

export default {
  data() {
    return {
      drawer: false,
      clickIndex: null,
      input: null,
      screen: "",
      options: [
        {
          value: "下单客户",
          lable: "下单客户"
        },
        {
          value: "承运商",
          lable: "承运商"
        },
        {
          value: "车牌号",
          lable: "车牌号"
        }
      ],
      startTime: null,
      endTime: null,
      //合计净重
      totalNumber: 0,
      //合计车数
      totalCapacity: 0,
      tableTitle: "销售统计报表",
      capacityList: [],
      carrierList: [],
      tableData: [],
      spanArr: [],
      pos: 0,
      isCellClick: 0,
      columnIndexs: [
        0,
        1,
        2,
        3,
        7,
        8,
        14,
        16,
        17,
        18,
        19,
        20,
        21,
        22,
        23,
        24,
        25,
        26,
        27,
        29
      ],
      //钢材多拼车辆线路ID
      //索引从1-10为1-10拼路线ID
      lineSpelling: [
        0,
        110001,
        110002,
        110003,
        110004,
        110005,
        110006,
        110007,
        110008,
        110009,
        110010
      ],
      tableTitle: "销售钢材统计报表",
      //所有省
      provinceList: [],
      //选中的省
      province: "",
      //所有市
      cityList: [],
      //选中的市
      city: "",
      //所有的县(区)
      countyList: [],
      //选中的县
      county: "",
      //地址输入框的值
      addresText: "",
      //已选中省市县
      address: null,
      //具体地址
      place: null,
      //暂存具体地址
      place1: null,
      //省市县Id
      addressId: null,
      addressRow: {}
    };
  },
  created() {},
  mounted() {
    this.getSteelReport();
  },
  methods: {
    //销售钢材报表导出excel
    exportAllReportToExcel() {
      const loading = this.$loading({
        lock: true,
        text: "正在导出Excel",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      var title = this.tableTitle;
      let tHeader = [];
      let filterVal = [];
      console.log(this.$refs.tableRef);
      this.$refs.tableRef.$children.forEach(item => {
        if (item.label != undefined && item.prop != undefined) {
          if (tHeader.indexOf(item.label) === -1) {
            tHeader.push(item.label);
          }
          if (filterVal.indexOf(item.prop) === -1) {
            filterVal.push(item.prop);
          }
        }
      });
      this.downloadLoading = true;
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require("@/assets/excel/Export2Excel.js"); //这里必须使用绝对路径，使用@/+存放export2Excel的路径
        let data = this.tableData.map(v => filterVal.map(j => v[j])); //3.formatJson格式转换
        export_json_to_excel(tHeader, data, title); // (title)导出的表格名称
      });
      loading.close();
    },
    changeScreen() {
      console.log(this.screen);
    },
    //车牌号弹出层
    handleSelect(row, index) {
      this.capacityList.forEach(item => {
        if (item.capacityNumber === row.capacityNo) {
          row.newsCapacityId = item.capacityId;
        }
      });
    },
    //记录每一行的合并数
    getSpanArr(data) {
      //每次调用方法初始化
      this.spanArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          data[i].group = i;
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].saleOrderMaterialId === data[i - 1].saleOrderMaterialId) {
            this.spanArr[this.pos] += 1;
            data[i].group = data[i - 1].group;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
            data[i].group = data[i - 1].group + 1;
          }
        }
        this.totalCapacity = data[data.length - 1].group + 1;
        this.totalNumber = data.reduce(function(prev, item) {
          return prev + item.materialNum;
        }, 0);
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.columnIndexs.indexOf(columnIndex) != -1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    //查询，输入查询条件
    onclick() {
      let startTime = null;
      let endTime = null;
      let carrierSsoId = null;
      let carrierName = null;
      let consigneeName = null;
      let capacityNo = null;
      let remark = null;
      let saler = null;
      if (this.startTime && this.endTime) {
        startTime = sjTime(this.startTime);
        endTime = sjTime(this.endTime);
      }
      if (getCookie("orgCode") == "chengyunshang") {
        carrierSsoId = getCookie("userId");
      }
      if (getCookie("orgCode") == "xiaoshouyewuyuan") {
        saler = getCookie("loginName");
      }
      if (this.screen == "下单客户") {
        consigneeName = this.input;
      } else if (this.screen == "承运商") {
        carrierName = this.input;
      } else if (this.screen == "车牌号") {
        capacityNo = this.input;
      } else {
        remark = this.input;
      }
      this.axios
        .post(
          "/api/v1/tms/getSaleSteelReport?startTime=" +
            startTime +
            "&endTime=" +
            endTime +
            "&carrierSsoId=" +
            carrierSsoId +
            "&i=" +
            new Date() +
            "&remark=" +
            remark +
            "&consigneeName=" +
            consigneeName +
            "&carrierName=" +
            carrierName +
            "&capacityNo=" +
            capacityNo +
            "&saler=" +
            saler
        )
        .then(res => {
          this.tableData = res.data.data;
          this.getSpanArr(res.data.data);
        });
    },
    //重新获取表格数据
    refresh() {
      this.getSteelReport();
    },
    //获取钢材统计报表
    getSteelReport() {
      let carrierSsoId = null;
      let saler = null;
      if (getCookie("orgCode") == "chengyunshang") {
        carrierSsoId = getCookie("userId");
      }
      if (getCookie("orgCode") == "xiaoshouyewuyuan") {
        saler = getCookie("loginName");
      }
      this.axios
        .post(
          "/api/v1/tms/getSaleSteelReport?startTime=" +
            null +
            "&endTime=" +
            null +
            "&carrierSsoId=" +
            carrierSsoId +
            "&saler=" +
            saler +
            "&i=" +
            new Date()
        )
        .then(res => {
          this.tableData = res.data.data;
          this.getSpanArr(res.data.data);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.purchasFuelNewMonitor {
  .tableTop {
    margin-left: 20px;
    margin-top: 20px;
  }
  .table {
    margin-left: 20px;
    margin-top: 20px;
    ::-webkit-scrollbar {
      // width: 20px;
      height: 30px;
      background-color: transparent;
    }
  }
  .address {
    .button-box {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
