修改代码

src/views/demoData/demoData1.vue

 <template>
   <div class="app-container">
     <el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
-      <el-form-item label="" prop="aaa">
+      <el-form-item label="aaa" prop="aaa">
         <el-select
           v-model="queryParams.aaa"
           placeholder="请选择aaa"
@@ -18,7 +18,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="" prop="ccc">
+      <el-form-item label="ccc" prop="ccc">
         <el-select
           v-model="queryParams.ccc"
           placeholder="请选择ccc"
@@ -35,7 +35,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="" prop="eee">
+      <el-form-item label="eee" prop="eee">
         <el-select
           v-model="queryParams.eee"
           placeholder="请选择eee"
@@ -52,7 +52,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="" prop="cccc">
+      <el-form-item label="cccc" prop="cccc">
         <el-select
           v-model="queryParams.cccc"
           placeholder="请选择cccc"
@@ -69,22 +69,83 @@
           />
         </el-select>
       </el-form-item>
-
-      <el-form-item>
-        <el-button
-          :class="commonField.queryClass"
-          :type="commonField.typePrimary"
-          :icon="commonField.queryIcon"
-          :size="commonField.smallSize"
-          @click="handleQuery"
-        >查询</el-button>
-        <el-button
-          :class="commonField.resetClass"
-          :icon="commonField.resetIcon"
-          :size="commonField.smallSize"
-          @click="resetQuery"
-        >重置</el-button>
+      <el-form-item label="高级搜索" style="float: right">
+        <el-switch
+          v-model="openSearch"
+          active-color="#46bcf3"
+          inactive-color="#dcdfe6"
+        />
       </el-form-item>
+      <div v-if="openSearch">
+        <!-- 显示的搜索框 -->
+        <el-form-item label="aaa">
+          <el-select
+            v-model="queryParams.aaa"
+            placeholder="请选择aaa"
+            filterable
+            clearable
+            size="small"
+            style="width: 150px"
+          >
+            <el-option
+              v-for="(item,index) in aaaList"
+              :key="index"
+              :label="item.month"
+              :value="item.month"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="aaa">
+          <el-select
+            v-model="queryParams.aaa"
+            placeholder="请选择aaa"
+            filterable
+            clearable
+            size="small"
+            style="width: 150px"
+          >
+            <el-option
+              v-for="(item,index) in aaaList"
+              :key="index"
+              :label="item.month"
+              :value="item.month"
+            />
+          </el-select>
+        </el-form-item>
+      </div>
+      <div>
+        <el-form-item>
+          <el-checkbox v-model="queryParams.hhh" label="hhh" border />
+          <el-checkbox v-model="queryParams.iii" label="iii" border />
+          <el-checkbox v-model="queryParams.kkk" label="kkk" border />
+        </el-form-item>
+        <el-form-item style="margin-left: 18.5%">
+          <el-button
+            :class="commonField.queryClass"
+            :type="commonField.typePrimary"
+            :icon="commonField.queryIcon"
+            :size="commonField.smallSize"
+            @click="handleQuery"
+          >查询</el-button>
+          <el-button
+            :class="commonField.resetClass"
+            :icon="commonField.resetIcon"
+            :size="commonField.smallSize"
+            @click="resetQuery"
+          >重置</el-button>
+        </el-form-item>
+        <div style="float: right">
+          <el-form-item>
+            <el-button
+              :class="commonField.exportClass"
+              :type="commonField.typeSuccess"
+              :icon="commonField.exportIcon"
+              :size="commonField.smallSize"
+              @click="handleExport"
+            >导出</el-button>
+          </el-form-item>
+        </div>
+      </div>
     </el-form>
     <div class="placeholder" />
     <div style="padding:5px 10px">
@@ -101,7 +162,7 @@
         <template v-for="month in dynamicColumns">
           <el-table-column :key="month" :label="month" prop="aaa" :show-overflow-tooltip="true" width="150">
             <template slot-scope="scope">
-              {{ scope.row[month] || '-' }}
+              <span @click="dialogVisible=true">{{ scope.row[month] || '-' }}</span>
             </template>
           </el-table-column>
         </template>
@@ -114,6 +175,21 @@
       :limit.sync="queryParams.rows"
       @pagination="getList"
     />
+    <el-dialog :visible="dialogVisible" @close="dialogVisible = false">
+      <!-- 对话框内容 -->
+      <el-form>
+        <el-form-item />
+      </el-form>
+      <div style="float: right">
+        <el-button
+          :class="commonField.exportClass"
+          :type="commonField.typeSuccess"
+          :icon="commonField.exportIcon"
+          :size="commonField.smallSize"
+          @click="handleExport"
+        >导出</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -123,6 +199,7 @@ import {
 } from '@/api/demoData1'
 import commonField from '@/utils/commonField'
 import pagination1 from '@/components/Pagination/Pagination1.vue'
+import { exportIncomeWmsBox } from '@/api/incomeWmsBox'
 export default {
   name: 'DemoData1',
   components: {
@@ -134,6 +211,7 @@ export default {
       loading: true,
       // 总条数
       total: 0,
+      openSearch: false,
       // 表格数据
       demoData1List: [],
       dynamicColumns: [], // 用于动态生成列的数组
@@ -141,6 +219,7 @@ export default {
       cccList: [],
       ccccList: [],
       eeeList: [],
+      dialogVisible: false, // 对话框可见性
       // 弹出层标题
       title: '',
       // 是否显示弹出层
@@ -308,6 +387,27 @@ export default {
         hhh: undefined
       }
       this.handleQuery()
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams
+      this.$confirm('是否确认操作?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        return exportIncomeWmsBox(queryParams).then(response => {
+          const blob = new Blob([response])
+          const downloadElement = document.createElement('a')
+          const href = window.URL.createObjectURL(blob)// 创建下载的链接
+          downloadElement.href = href
+          downloadElement.download = '库存管理信息' + '.xls' // 下载后文件名
+          document.body.appendChild(downloadElement)
+          downloadElement.click()// 点击下载
+          document.body.removeChild(downloadElement)// 下载完成移除元素
+          window.URL.revokeObjectURL(href)// 释放掉blob对象
+        })
+      })
     }
   }
 }