icore-pass/src/views/SIDEWMS/components/oYeOutbound.vue

<template>
  <div class="oYeOutbound">
    <div class="search">
      <el-form :inline="true">
        <el-form-item v-if="Object.keys(queryMap).length > 0">
          <span style="color: #409EFF;font-size: 18px;font-weight: 700;"
            >出库明细</span
          >
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="startTime"
            type="datetime"
            placeholder="出库时间"
            style="width: 180px;"
            value-format="timestamp"
          >
          </el-date-picker>
          <span>至</span>
          <el-date-picker
            v-model="endTime"
            type="datetime"
            placeholder="出库时间"
            style="width: 180px;"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="screen"
            placeholder="选择条件"
            style="width:180px"
            clearable
          >
            <el-option
              v-for="(item, index) in selectOptions"
              :label="item.label"
              :key="index"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input v-model="con" style="width:200px" clearable> </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="screen1"
            placeholder="选择条件"
            style="width:180px"
            clearable
          >
            <el-option
              v-for="(item, index) in selectOptions"
              :label="item.label"
              :key="index"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input v-model="con1" style="width:200px" clearable></el-input>
        </el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="exportExcel">导出</el-button>

        <el-button
          type="primary"
          @click="back"
          v-if="Object.keys(queryMap).length > 0"
          >返回</el-button
        >
        <el-form-item></el-form-item>
      </el-form>
    </div>
    <div class="table">
      <dilTable
        v-bind.sync="options"
        :showSummaryList="showSummaryList"
        :isshowSummary="true"
        :showIndex="false"
        :row-style="{ height: '35px' }"
        :cell-style="returnClassName"
        @func="func"
      ></dilTable>
    </div>
  </div>
</template>
<script>
import { getCookie, formatDate } from '@/utils/util.js'
export default {
  data() {
    const generateStartDate = _ => {
      let startDate = new Date()
      let startDateStr = formatDate(startDate, 'yyyy-MM-dd')
      let startTimeStr = startDateStr + ' 00:00:00'
      let startTime = new Date(startTimeStr)
      return startTime.getTime()
    }
    const generateEndDate = _ => {
      let endDate = new Date()
      let endDateStr = formatDate(endDate, 'yyyy-MM-dd')
      let endTimeStr = endDateStr + ' 23:59:59'
      let endTime = new Date(endTimeStr)
      return endTime.getTime()
    }
    return {
      options: {
        requestUrl: '',
        requestQuery: {}
      },
      selectOptions: [
        {
          value: 'consigneeName',
          label: '客户'
        },
        {
          value: 'saleArea',
          label: '片区'
        },
        {
          value: 'inboundArea',
          label: '仓库大类'
        },
        {
          value: 'inboundWarehouse',
          label: '具体仓库'
        },
        {
          value: 'materialName',
          label: '物资名称'
        },
        {
          value: 'materialSpe',
          label: '规格'
        }
      ],
      con: '',
      con1: '',
      screen: '',
      screen1: '',
      startTime: generateStartDate(),
      endTime: generateEndDate(),
      apiId: '530',
      orgCode: null,
      loginName: null,
      showSummaryList: ['materialNumber', 'netWeight', 'theoryWeight'],
      queryMap: {},
      tableData: [],
      tableTop: []
    }
  },
  created() {
    if (Object.keys(this.$route.query).length > 0) {
      this.queryMap = this.$route.query
      this.startTime = this.queryMap.startTime
      this.endTime = this.queryMap.endTime
    }
    this.getInfo()
    this.getRequestUrl()
  },
  methods: {
    func(res) {
      console.log(res, 'res')
      this.tableTop = res.columnData
    },
    exportExcel() {
      //创建工作簿对象
      let wb = XLSX.utils.book_new()
      let data = []
      let queryMap = {}
      queryMap[this.screen] = this.con
      queryMap[this.screen1] = this.con1
      if (this.loginName != null) {
        queryMap['consigneeName'] = this.loginName
      }
      if (this.orgCode == 'xiaoshouyewuyuan') {
        queryMap['saler'] = getCookie('loginName')
      }
      queryMap.isExcel = 1
      queryMap.inboundAreaSide = '厂外库'
      this.axios
        .post(
          '/api/v1/wms/getOyeOutboundResult' +
            '?startTime=' +
            this.startTime +
            '&endTime=' +
            this.endTime,
          queryMap
        )
        .then(res => {
          this.tableData = res.data.data
          this.tableData.forEach((item, index) => {
            let temp = {}
            this.tableTop.forEach(col => {
              temp[col.label] = item[col.prop]
            })
            data.push(temp)
          })
          //将json数组转换成sheet
          let table_sheet = XLSX.utils.json_to_sheet(data)
          //为工作簿添加sheet
          XLSX.utils.book_append_sheet(wb, table_sheet, '厂外库出库实绩')
          //导出
          XLSX.writeFile(wb, '厂外库出库实绩' + '.xlsx')
        })
    },
    back() {
      this.$router.go(-1)
    },
    returnClassName({ row, column, rowIndex, columnIndex }) {
      return {
        fontWeight: '500 !important',
        fontSize: '14px !important'
        // backgroundColor: '#FFFF01'
      }
    },
    getInfo() {
      this.orgCode = getCookie('orgCode')
      if (this.orgCode == 'shouhuokehu' || this.orgCode == 'chengyunshang') {
        this.apiId = 536
        this.loginName = getCookie('loginName')
      } else if (this.orgCode == 'ouyechangwaiku') {
        this.apiId = 530
        this.loginName = null
        this.inboundWarehouse = getCookie('loginName')
      } else {
        this.apiId = 530
        this.loginName = null
      }
    },
    getRequestUrl() {
      this.options.requestUrl =
        '/api/v1/wms/getOyeOutboundResult?apiId=' +
        this.apiId +
        '&con=' +
        this.con +
        '&i=' +
        new Date() +
        '&startTime=' +
        this.startTime +
        '&endTime=' +
        this.endTime
      let queryMap = {}
      queryMap[this.screen] = this.con
      queryMap[this.screen1] = this.con1
      if (this.loginName != null) {
        queryMap['consigneeName'] = this.loginName
      }
      if (this.orgCode == 'xiaoshouyewuyuan') {
        queryMap['saler'] = getCookie('loginName')
      }
      if (Object.keys(this.queryMap).length > 0) {
        queryMap = { ...queryMap, ...this.queryMap }
      }
      if (this.orgCode == 'ouyechangwaiku') {
        queryMap['inboundWarehouse'] = this.inboundWarehouse
      }
      queryMap.inboundAreaSide = '厂外库'
      this.options.requestQuery = JSON.parse(JSON.stringify(queryMap))
    },
    search() {
      this.getRequestUrl()
    }
  }
}
</script>
<style lang="scss" scoped>
.oYeOutbound {
  .search {
    margin-left: 10px;
    margin-top: 10px;
  }
  .table {
    margin-left: 10px;
    margin-top: 10px;
  }
  /deep/ .el-table__footer-wrapper {
    font-weight: 700 !important;
    font-size: 16px !important;
  }
}
</style>