//站台库存信息一览表
<template>
  <div class="kucunListClass">
    <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:180px"
          >
          </el-date-picker>
          <span>至</span>
          <el-date-picker
            v-model="endTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width:180px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="screen"
            placeholder="请选择需筛选的内容"
            clearable
            style="width:120px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            style="width:170px"
            v-model="input"
            placeholder="请输入查询条件"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="screen1"
            placeholder="请选择需筛选的内容"
            clearable
            style="width:120px"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            style="width:170px"
            v-model="input1"
            placeholder="请输入查询条件"
            clearable
          ></el-input>
        </el-form-item>
        <el-button type="primary" class="btn" @click="onclick">
          <i class="el-icon-search"></i>
        </el-button>
        <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="batchOperate"
            >批量保存</el-button
          >
        </el-form-item>
        <!-- <el-form-item>
          <el-autocomplete
            class="inline-input"
            v-model="receiveName"
            :fetch-suggestions="querySearchConsignee"
            placeholder="请输入收货单位名称"
            @select="handleSelectionChange()"
          >
          </el-autocomplete>
        </el-form-item> -->
        <el-form-item>
          <el-select
            size="mini"
            v-model="sendStationId"
            @change="handleMulSendChange()"
            placeholder="请选择发站"
            clearable
          >
            <el-option
              v-for="item in sendStationList"
              :key="item.sendStationId"
              :label="item.sendStation"
              :value="item.sendStationId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="num">
      <span class="titleTxt">总计划数:</span>
      <span class="titleTxt">{{ totalPlanNum }}</span>

      <span class="titleTxt">当前勾选计划数:</span>
      <span class="titleTxt">{{ togglePlanNum }}</span>

      <span class="titleTxt">达州站计划数:</span>
      <span class="titleTxt">{{ dazhouPlannNum }}</span>

      <span class="titleTxt">专线计划数:</span>
      <span class="titleTxt">{{ zhuanxianPlanNum }}</span>
    </div>
    <div class="main">
      <el-table
        :data="tableData"
        ref="tableRef"
        border
        style="width: 100%; margin-top: 20px"
        :max-height="maxHeight"
        :height="maxHeight"
        @row-click="rowClick"
        :row-class-name="tableRowClassName"
        :row-style="{ height: '30px' }"
        :cell-style="{ fontWeight: '700' }"
        :key="saleSteelKey"
        id="salesLogisticsStat_saleSteelReports_table"
        individual-panel
        :span-method="objectSpanMethod"
        @selection-change="
          handleSelectionChange()
          handleMulSendChange()
        "
      >
        <el-table-column
          prop="group"
          width="50"
          label="序号"
          align="center"
          column-key="group"
          key="group"
          :resizable="false"
        >
          <template slot-scope="scope">{{ scope.row.group + 1 }}</template>
        </el-table-column>
        <el-table-column type="selection" width="40" align="center">
        </el-table-column>
        <el-table-column type="index" width="40" label="行号" align="center">
        </el-table-column>
        <el-table-column
          prop="saleOrderStatus"
          label="订单状态"
          align="center"
          width="80px"
          :filters="[
            { text: '正常', value: '正常' },
            { text: '关闭', value: '关闭' }
          ]"
          :filter-method="filterSaleOrderStatus"
        >
        </el-table-column>
        <el-table-column
          prop="saleRemark"
          label="摘要"
          width="120px"
          align="center"
          column-key="saleRemark"
          key="saleRemark"
        >
        </el-table-column>
        <el-table-column
          prop="toTheStation"
          label="到站"
          width="120px"
          align="center"
          column-key="toTheStation"
          :filters="filterToStationList"
          :filter-method="filterToStation"
        >
        </el-table-column>
        <el-table-column
          prop="receiveName"
          label="收货单位"
          width="300px"
          align="center"
          :filters="filterConsigneeList"
          :filter-method="filterConsignee"
        >
          <template slot-scope="scope">
            <el-autocomplete
              class="inline-input"
              v-model="scope.row.receiveName"
              :fetch-suggestions="querySearchConsignee"
              placeholder="请输入收货单位名称"
              @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="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"
              @change="changesendStation(scope.row)"
            >
              <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="materialName"
          label="物资名称"
          align="center"
          width="150px"
          :filters="filtermaterialNameList"
          :filter-method="filterMaterialName"
        >
        </el-table-column>
        <el-table-column
          prop="materialSpa"
          label="规格"
          align="center"
          width="150px"
          :filters="filtermaterialSpaList"
          :filter-method="filterMaterialSpa"
        >
        </el-table-column>
        <el-table-column
          prop="materialNum"
          label="件数"
          align="center"
          width="80px"
        >
        </el-table-column>
        <el-table-column
          prop="materialWeight"
          label="重量"
          align="center"
          width="80px"
        >
        </el-table-column>
        <el-table-column
          prop="netWeightStatus"
          label="出库状态"
          align="center"
          width="80px"
          :filters="[
            { text: '已出库', value: '已出库' },
            { text: '未出库', value: '未出库' }
          ]"
          :filter-method="filterNetWeightStatus"
        >
        </el-table-column>
        <el-table-column
          prop="flId"
          label="分录ID"
          align="center"
          width="150px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="saleNo"
          label="单据编号"
          width="200px"
          align="center"
        >
        </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="sendStationOptionName"
          label="发站修改人"
          align="center"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          prop="consigneeOptionName"
          label="收货单位修改人"
          align="center"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          prop="operate"
          label="操作"
          align="center"
          width="120px"
        >
          <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: '收货单位'
        },
        {
          value: '调入部门',
          lable: '调入部门'
        },
        {
          value: '物资名称',
          lable: '物资名称'
        },
        {
          value: '规格型号',
          lable: '规格型号'
        }
      ],
      options1: [
        {
          value: '到站',
          lable: '到站'
        },
        {
          value: '发站',
          lable: '发站'
        },
        {
          value: '收货单位',
          lable: '收货单位'
        },
        {
          value: '调入部门',
          lable: '调入部门'
        },
        {
          value: '物资名称',
          lable: '物资名称'
        },
        {
          value: '规格型号',
          lable: '规格型号'
        }
      ],
      input: null,
      input1: null,
      tableData: [],
      saleSteelKey: false,
      screen: null,
      screen1: null,
      maxHeight: 650,
      //需要合并的列集合
      mergeList: [
        'saleNo',
        'saleRemark',
        'receiveName',
        // 'index',
        'operate',
        'transInDep',
        'transOutDep',
        'group'
      ],
      spanArr: [],
      pos: null,
      sendStationList: [],
      //收货客户列表
      consigneeList: [],
      receiveName: null,
      sendStationId: null,
      totalPlanNum: 0,
      dazhouPlannNum: 0,
      zhuanxianPlanNum: 0,
      togglePlanNum: 0,
      tableRowIndex: '',
      isRowClick: 0,
      filterConsigneeList: [],
      filtermaterialSpaList: [],
      filtermaterialNameList: [],
      filterToStationList: []
    }
  },
  created() {
    this.getRequestUrl()
  },
  watch: {
    tableData: {
      handler(oldVal, newVal) {
        this.tableRowIndex = ''
        this.totalPlanNum = this.tableData.length
        this.dazhouPlannNum = this.tableData.filter(item => {
          return item.sendStation == '达州站'
        }).length
        this.zhuanxianPlanNum = this.tableData.filter(item => {
          return item.sendStation == '专用线'
        }).length
        if (this.tableData.length > 0) {
          this.filtermaterialSpaList = this.tableData[0].filtermaterialSpaList
          this.filtermaterialNameList = this.tableData[0].filtermaterialNameList
          this.filterToStationList = this.tableData[0].filterToStationList
          this.filterConsigneeList = this.tableData[0].filterConsigneeList
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.information()
    this.$nextTick(() => {
      window.onresize = () => {
        return (() => {
          this.maxHeight =
            window.innerHeight -
            document.querySelector('.head').offsetHeight -
            40
        })()
      }
    })
  },
  activated() {
    this.maxHeight =
      window.innerHeight - document.querySelector('.head').offsetHeight - 40
  },
  methods: {
    //筛选收货单位
    filterConsignee(value, row, column) {
      return row.receiveName == value
    },
    //筛选到站
    filterToStation(value, row, column) {
      return row.toTheStation == value
    },
    //筛选物资
    filterMaterialName(value, row, column) {
      return row.materialName == value
    },
    //筛选规格
    filterMaterialSpa(value, row, column) {
      return row.materialSpa == value
    },
    filterNetWeightStatus(value, row, column) {
      return row.netWeightStatus == value
    },
    filterSaleOrderStatus(value, row, column) {
      return row.saleOrderStatus == value
    },
    rowClick(row, column, event) {
      console.log(row)
      this.tableRowIndex = row.saleMaterialId
      this.isRowClick = 1
    },
    tableRowClassName({ row, rowIndex }) {
      if (
        row.saleMaterialId == this.tableRowIndex &&
        this.tableRowIndex !== ''
      ) {
        return 'warning-row'
      }
    },
    batchOperate() {
      console.log(this.$refs.tableRef.data)
      this.axios
        .post(
          '/api/v1/ams/batchUpdateInwardConsignee',
          this.$refs.tableRef.data
        )
        .then(res => {
          if (res.data.code == '200') {
            this.$message.success('批量保存成功')
            this.getRequestUrl()
          }
        })
    },
    handleSelectionChange() {
      //批量绑定收货客户
      let selection = this.$refs.tableRef.selection
      this.togglePlanNum = this.$refs.tableRef.selection.length
      console.log('selection:', selection)
      if (!selection) return
      this.consigneeList.forEach(e => {
        if (e.consigneeCompanyName == this.receiveName) {
          selection.forEach(row => {
            row.receiveName = e.consigneeCompanyName
            row.consigneeId = e.consigneeId
          })
        }
      })
    },
    handleMulSendChange() {
      //批量绑定发站
      let selection = this.$refs.tableRef.selection
      this.togglePlanNum = this.$refs.tableRef.selection.length
      console.log('selection:', selection)
      if (!selection || !this.sendStationId) return
      selection.forEach(row => {
        row.sendStationId = this.sendStationId
        this.changesendStation(row)
      })
    },
    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 && 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)
            }
          })
      } else {
        //历史收货客户
        this.axios.post('/api/v1/uc/getConsigneeHistory').then(res => {
          if (res.data.code == '200') {
            console.log(res)
            this.consigneeList = res.data.data
            cb(this.consigneeList)
          }
        })
      }
    },
    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
        }
      }
    },
    //修改发站
    changesendStation(row) {
      row.userName = getCookie('loginName')
      // this.axios.post('/api/v1/ams/updateInwardConsignee', row).then(res => {
      //   if (res.data.code == '200') {
      //     this.$message.success('保存成功')
      //   }
      // })
    },
    operate(row) {
      row.userName = getCookie('loginName')
      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 obj = {}
      let startTime = null
      let endTime = null
      let totheStation = null
      let consigneeName = null
      let transferIndep = null
      let remark = null
      let materialSpa = null
      let materialName = null
      let sendStation = 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 if (this.screen == '物资名称') {
        materialName = this.input
        obj.materialName = materialName
      } else if (this.screen == '规格型号') {
        materialSpa = this.input
        obj.materialSpa = materialSpa
      } else if (this.screen == '发站') {
        sendStation = this.input
        obj.sendStation = sendStation
      } 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 if (this.screen1 == '物资名称') {
        materialName = this.input1
        obj.materialName = materialName
      } else if (this.screen1 == '规格型号') {
        materialSpa = this.input1
        obj.materialSpa = materialSpa
      } else if (this.screen1 == '发站') {
        sendStation = this.input1
        obj.sendStation = sendStation
      } else {
        remark = this.input1
      }

      this.axios
        .post(
          '/api/v1/ams/getKucunList?startTime=' +
            startTime +
            '&endTime=' +
            endTime +
            '&totheStation=' +
            totheStation +
            '&consigneeName=' +
            consigneeName +
            '&transferIndep=' +
            transferIndep +
            '&remark=' +
            remark,
          obj
        )
        .then(res => {
          this.tableData = res.data.data
          this.getSpanArr(this.tableData)
          this.maxHeight =
            window.innerHeight -
            document.querySelector('.head').offsetHeight -
            40
        })
    },
    //获取后台数据
    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)
          this.maxHeight =
            window.innerHeight -
            document.querySelector('.head').offsetHeight -
            40
        })
    },
    //刷新
    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.$children)
      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" scoped>
.kucunListClass {
  .head {
    margin-top: 20px;
    margin-left: 20px;
  }
  .num {
    margin-top: 10px;
    margin-left: 20px;
    .titleTxt {
      margin-left: 5px;
      font-size: 18px;
      font-weight: 600;
    }
  }
  .main {
    margin-top: 20px;
    margin-left: 20px;
    /deep/ .el-table__body {
      overflow-y: auto;
      position: absolute !important;
      tr:hover > td {
        background-color: #fff;
      }
    }
    ::-webkit-scrollbar {
      width: 20px;
      height: 20px;
      background-color: transparent;
    }
  }
}
</style>
