初始化提交

Crunchy

2025-06-14 7e460156de73171f9660ce48f80703e79f8b478d

 src/components/TableSearch/index.vue

@@ -1,40 +1,139 @@
<template>
  <div class="table-search">
    <el-form
      v-model="queryParams"
      ref="queryForm"
      v-model="queryParams"
      size="small"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="日期：">
        <el-date-picker
          v-model="queryParams.date"
          value-format="yyyy-MM-dd HH:mm"
          format="yyyy-MM-dd HH:mm"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
        />
      </el-form-item>
      <el-form-item label="规格：">
        <el-select placeholder="规格型号" clearable style="width: 240px">
      <el-form-item v-show="show" :label="searchParams.hasOwnProperty('productModel')? '规格型号':'客户名称'">
        <el-select v-model="queryParams.type" :placeholder="searchParams.hasOwnProperty('productModel')? '请选择规格型号':'请选择客户名称'" clearable style="width: 240px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini">导出</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="search"
        >搜索</el-button>
        <el-button :style="{color:'#409EFF',border:' 1px solid #409EFF'}" icon="iconfont icon-wenjiandaochu" size="mini" @click="exportExcel">导出</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {

export default {
  props: [
    'searchData',
    'searchParams',
    'options',
    'getList',
    'file',
    'show',
    'excelName'
  ],
  data() {
    return {
      queryParams: {
        date: [],
        type: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  methods: {
    search() {
      // "查询条件："时间需要格式化成yyyy-mm-dd hh-mm-ss
      // console.log(this.queryParams)
      let { date, type } = this.queryParams
      date = date == null ? [] : date
      let params = { ...this.searchParams, startTime: date[0], endTime: date[1] }
      params = this.searchParams.hasOwnProperty('productModel') ? { ...params, productModel: type } : { ...params, customerName: type }
      const obj = {}
      const arr = Object.keys(params).filter(key => params[key])
      arr.forEach(item => obj[item] = params[item])
      console.log(obj)// 查看所有请求参数
      this.getList(obj).then(res => {
        this.searchData({ ...res.data, startTime: date[0], endTime: date[1] })
      })
    },
    exportExcel() {
      let { date, type } = this.queryParams
      date = date == null ? [] : date
      let params = { startTime: date[0], endTime: date[1] }
      params = this.searchParams.hasOwnProperty('productModel') ? { ...params, productModel: type } : { ...params, customerName: type }
      const obj = {}
      const arr = Object.keys(params).filter(key => params[key])
      arr.forEach(item => obj[item] = params[item])
      console.log(obj)// 查看所有请求参数
      this.file(obj).then(response => {
        const blob = new Blob([response.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = `${this.excelName}.xlsx` // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        this.loadingBtn = false
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
      }).catch(message => {
        this.$message.error({
          message: '抱歉下载错误！错误原因：' + message,
          type: 'error'
        })
      })
    }
  }
}
</script>