//站台库存信息一览表
<template>
  <div id="platformStockInfo">
    <div class="head">
      <!-- //需要一个日期查询框 -->
      <el-form :inline="true">
        <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-form-item>
        <el-form-item>
          <el-select
            v-model="screen"
            placeholder="请选择需筛选的内容"
            clearable
            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>
          <el-select
            v-model="screen1"
            placeholder="请选择需筛选的内容"
            clearable
            style="width:150px"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            style="width:200px"
            v-model="input1"
            placeholder="请输入查询条件"
            clearable
          ></el-input>
        </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-button type="primary" class="btn" @click="onclick">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main">
      <el-table
        :data="tableData"
        ref="tableRef"
        border
        stripe
        style="width: 100%; margin-top: 20px"
        max-height="800px"
        :row-style="{ height: '30px' }"
        :cell-style="{ fontWeight: '700' }"
        class="table"
        :span-method="objectSpanMethod"
      >
        <el-table-column
          prop="index"
          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="saleNo"
          label="单据编号"
          width="200px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="saleRemark"
          label="摘要"
          width="120px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="toTheStation"
          label="到站"
          width="120px"
          align="center"
          column-key="toTheStation"
        >
        </el-table-column>
        <el-table-column
          prop="receiveName"
          label="收货单位"
          width="300px"
          align="center"
        >
          <template slot-scope="scope">
            <el-autocomplete
              class="inline-input"
              v-model="scope.row.receiveName"
              :fetch-suggestions="querySearchConsignee"
              placeholder="请输入收货单位名称"
              :trigger-on-focus="false"
              @select="handleSelectConsignee(scope.row, scope.$index)"
            >
              <template slot-scope="{ item }">
                <div class="name">{{ item.consigneeCompanyName }}</div>
              </template>
            </el-autocomplete>
          </template>
        </el-table-column>
        <el-table-column
          prop="transInDep"
          label="调入部门"
          width="120px"
          align="center"
          column-key="transInDep"
        >
        </el-table-column>
        <el-table-column
          prop="transOutDep"
          label="调出部门"
          width="120px"
          align="center"
          column-key="transOutDep"
        >
        </el-table-column>
        <el-table-column
          prop="transInWarehouse"
          label="调入仓库"
          width="120px"
          align="center"
          column-key="transInWarehouse"
        >
        </el-table-column>
        <el-table-column
          prop="materialName"
          label="物资名称"
          align="center"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          prop="materialSpa"
          label="规格"
          align="center"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          prop="materialNum"
          label="件数"
          align="center"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          prop="materialWeight"
          label="重量"
          align="center"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          prop="sendStation"
          label="发站"
          width="120px"
          align="center"
          column-key="sendStation"
          :filters="[
            { text: '专用线', value: '专用线' },
            { text: '达州站', value: '达州站' }
          ]"
          :filter-method="filterSend"
        >
          <template slot-scope="scope">
            <el-select size="mini" v-model="scope.row.sendStationId">
              <el-option
                v-for="item in sendStationList"
                :key="item.sendStationId"
                :label="item.sendStation"
                :value="item.sendStationId"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="operate"
          label="操作"
          align="center"
          width="150px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="operate(scope.row)">保存</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
//需要设计-发站、移库/直发的表格筛选传递给后端
//需要设计-件数,重量,理重,标重,计费吨位的合计
import { sjTime } from "@/utils/sharedJsFile";
import { getCookie } from "@/utils/util.js";
export default {
  data() {
    return {
      startTime: null,
      endTime: null,
      options: [
        {
          value: "到站",
          lable: "到站"
        },
        {
          value: "收货单位",
          lable: "收货单位"
        },
        {
          value: "调入部门",
          lable: "调入部门"
        }
      ],
      options1: [
        {
          value: "到站",
          lable: "到站"
        },
        {
          value: "收货单位",
          lable: "收货单位"
        },
        {
          value: "调入部门",
          lable: "调入部门"
        }
      ],
      input: null,
      input1: null,
      tableData: [],
      screen: null,
      screen1: null,
      //需要合并的列集合
      mergeList: [
        "saleNo",
        "saleRemark",
        "receiveName",
        "index",
        "operate",
        "transInDep",
        "transOutDep"
      ],
      spanArr: [],
      pos: null,
      sendStationList: [],
      //收货客户列表
      consigneeList: []
    };
  },
  created() {
    this.getRequestUrl();
  },
  mounted() {
    this.information();
  },
  methods: {
    handleSelectConsignee(row, index, item) {
      console.log(row);
      this.consigneeList.forEach(e => {
        if (e.consigneeCompanyName == row.receiveName) {
          row.consigneeId = e.consigneeId;
        }
      });
    },
    //以下是收货单位边输边查搜索
    querySearchConsignee(queryString, cb) {
      if (queryString.length > 3) {
        this.axios
          .post("/api/v1/uc/getConsigneeByLike?index=" + queryString)
          .then(res => {
            if (res.data.code == "200") {
              console.log(res);
              var restaurantsConsignee = res.data.data;
              this.consigneeList = res.data.data;
              var results = queryString
                ? restaurantsConsignee.filter(
                    this.createFilterConsignee(queryString)
                  )
                : restaurantsConsignee;
              // 调用 callback 返回建议列表的数据
              cb(results);
            }
          });
      }
    },
    createFilterConsignee(queryString) {
      return restaurantsConsignee => {
        return (
          restaurantsConsignee.value
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) > -1
        );
      };
    },
    //获取发站信息
    information() {
      this.axios.get("/api/v1/uc/getInwardSendStation").then(res => {
        console.log(res.data.data);
        this.sendStationList = res.data.data;
      });
    },
    //合并行
    //记录每一行的合并数
    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].saleOrderId === data[i - 1].saleOrderId) {
            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;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.mergeList.includes(column.property)) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    operate(row) {
      this.axios
        .post("/api/v1/ams/updateInwardConsignee", row)
        .then(res => {
          if (res.data.code == "200") {
            this.$message.success("保存成功");
            this.getRequestUrl();
          } else {
            this.$message.error(res.data.data);
            this.getRequestUrl();
          }
        })
        .catch(e => {
          this.$message.error(e);
          this.getRequestUrl();
        });
    },
    //查询事件
    onclick() {
      let startTime = null;
      let endTime = null;
      let totheStation = null;
      let consigneeName = null;
      let transferIndep = null;
      let remark = null;
      if (this.startTime && this.endTime) {
        startTime = sjTime(this.startTime);
        endTime = sjTime(this.endTime);
      }
      if (this.screen == "到站") {
        totheStation = this.input;
      } else if (this.screen == "收货单位") {
        consigneeName = this.input;
      } else if (this.screen == "调入部门") {
        transferIndep = this.input;
      } else {
        remark = this.input;
      }
      if (this.screen1 == "到站") {
        totheStation = this.input1;
      } else if (this.screen1 == "收货单位") {
        consigneeName = this.input1;
      } else if (this.screen1 == "调入部门") {
        transferIndep = this.input1;
      } else {
        remark = this.input1;
      }
      this.axios
        .post(
          "/api/v1/ams/getKucunList?startTime=" +
            startTime +
            "&endTime=" +
            endTime +
            "&totheStation=" +
            totheStation +
            "&consigneeName=" +
            consigneeName +
            "&transferIndep=" +
            transferIndep +
            "&remark=" +
            remark
        )
        .then(res => {
          this.tableData = res.data.data;
          this.getSpanArr(this.tableData);
        });
    },
    //获取后台数据
    getRequestUrl() {
      this.axios
        .post(
          "/api/v1/ams/getKucunList?startTime=null&endTime=null&i=" + new Date()
        )
        .then(res => {
          console.log(res.data.data);
          this.tableData = res.data.data;
          this.getSpanArr(this.tableData);
        });
    },
    //刷新
    refresh() {
      this.getRequestUrl();
    },
    //筛选发站
    filterSend(value, row, column) {
      return row.sendStation === value;
    },
    //导出Excel
    exportAllReportToExcel() {
      console.log(this.$refs.tableRef);
      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();
    }
  }
};
</script>
<style lang="scss">
#platformStockInfo {
  .head {
    margin-top: 20px;
    margin-left: 20px;
  }
  .main {
    margin-top: 20px;
    margin-left: 20px;
    ::-webkit-scrollbar {
      // width: 20px;
      height: 20px;
      background-color: transparent;
    }
  }
}
</style>
