fix export

src/api/params/index.js

@@ -38,10 +38,10 @@ export default {
   },
 
   /**
-   * 搜索
-   * @param params
-   * @returns {Promise<unknown>}
-   */
+     * 搜索
+     * @param params
+     * @returns {Promise<unknown>}
+     */
   paramsList (params) {
     return fetch('/wutong-parse-file/excel-dict/v1/front-parent-list', {
       clientId: 'project_web',
@@ -49,11 +49,19 @@ export default {
     }, 'post', 'json')
   },
   /**
-   * 保存配置
-   * @param params
-   * @returns {Promise<unknown>}
-   */
+     * 保存配置
+     * @param params
+     * @returns {Promise<unknown>}
+     */
   saveConfigParams (params) {
     return fetch('/wutong-parse-file/export-dict/v1/submit', params, 'post', 'json')
+  },
+  /**
+     * 导出预览
+     * @param params
+     * @returns {Promise | Promise<unknown>}
+     */
+  preview (params) {
+    return fetch('/blade-project-manage-v2/project/v2/preview', params, 'post', 'json')
   }
 }

src/views/home/component/dash.vue

@@ -527,37 +527,16 @@ export default {
       this.diaType = -1
     },
     exportExcel (res) {
-      const data = Object.assign({ ...this.queryData }, { columnName: res, projectIds: this.selectList.join(',') })
-      this.$api.params.exportResult(data).then(res => {
-        if (res.hasOwnProperty('code')) {
-          this.$message.error(res.msg)
-          return
-        }
-        this.download(res)
+      const data = Object.assign({ ...this.queryData }, {
+        columnName: res,
+        projectIds: this.selectList.join(','),
+        previewType: 1
       })
+      this.$router.push({ query: data, path: '/home/excel' })
     },
     exportExcelTotal (item) {
-      const dataIds = { ...this.queryData, projectIds: this.selectList.join(',') }
-      this.$api.params.summaryExport(Object.assign(item, dataIds)).then(res => {
-        if (res.hasOwnProperty('code')) {
-          this.$message.error(res.msg)
-          return
-        }
-        this.download(res)
-      })
-    },
-    download (res) {
-      const url = window.URL.createObjectURL(new Blob([res], { type: 'application/vnd.ms-excel' }))
-      const link = document.createElement('a')
-      link.style.display = 'none'
-      link.href = url
-      const excelName = new Date().getTime() + '.xlsx'
-      link.setAttribute('download', excelName)
-      document.body.appendChild(link)
-      link.click()
-      link.remove()
-      this.diaType = -1
-      this.$message.success('导出成功')
+      const dataIds = { ...this.queryData, ...item, projectIds: this.selectList.join(','), previewType: 2 }
+      this.$router.push({ query: dataIds, path: '/home/excel' })
     }
   }
 }

src/views/home/excel.vue

@@ -1,15 +1,151 @@
 <template>
-  <div>
-    <el-button>导出</el-button>
-  </div>
+  <el-container>
+    <basic-container class='mt-10 content'>
+       <div class='full-width white-bg' style='width: 100vw'>
+         <div class='flex flex-center flex-justify-start'>
+           <el-button type='primary' plain @click='back'>返回</el-button>
+           <el-button type='primary' @click='exportExcel'>导出表格</el-button>
+         </div>
+         <span class='red full-width text-left  flex flex-justify-start mt-10'>注：左右滑动，查看更多内容</span>
+       </div>
+      <div class='content mt-10'>
+        <div class='header  flex flex-center flex-justify-start full-width'>
+          <div class='flex flex-center' style='background-color: #5ACAFA' v-for='(item,index) in header' :key='item.id'>
+            <div class='item flex flex-center ' :class='index === 0 ? "item":"sub" '>
+              {{ item }}
+            </div>
+          </div>
+        </div>
+
+        <div class='flex flex-center flex-justify-start flex-col' >
+          <div class='flex flex-center full-width ' v-for='item in list' :key='item.id'>
+            <div class='flex flex-center flex-justify-start full-width'>
+              <div class='flex flex-center'>
+                <div v-for='(sub,index) in item' :key='sub.id' class='item flex flex-center overflow-hide'
+                     :class='index === 0 ? "item":"sub" '>
+                  <el-tooltip :content='sub' placement="top">
+                    {{ sub }}
+                  </el-tooltip>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </basic-container>
+  </el-container>
 </template>
 
+<route>
+{
+name: '导出预览'
+}
+</route>
+
 <script>
+import BasicContainer from '@/components/basic-container/main.vue'
+
 export default {
-  name: 'excel'
+  name: 'excel',
+  components: { BasicContainer },
+  data () {
+    return {
+      header: [],
+      list: [],
+      query: null
+    }
+  },
+  created () {
+    this.query = this.$route.query
+    console.log(this.query)
+    this.getList()
+  },
+  methods: {
+    back () {
+      this.$router.back()
+    },
+    getList () {
+      this.$api.params.preview(this.query).then(res => {
+        if (res.code === 200) {
+          this.header = res.data.header
+          this.list = res.data.list
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+
+    exportExcel () {
+      if (this.query.previewType === '1') {
+        this.$api.params.exportResult(this.query).then(res => {
+          if (res.hasOwnProperty('code')) {
+            this.$message.error(res.msg)
+            return
+          }
+          this.download(res)
+        })
+      } else {
+        this.$api.params.summaryExport(this.query).then(res => {
+          if (res.hasOwnProperty('code')) {
+            this.$message.error(res.msg)
+            return
+          }
+          this.download(res)
+        })
+      }
+    },
+    download (res) {
+      const url = window.URL.createObjectURL(new Blob([res], { type: 'application/vnd.ms-excel' }))
+      const link = document.createElement('a')
+      link.style.display = 'none'
+      link.href = url
+      const excelName = new Date().getTime() + '.xlsx'
+      link.setAttribute('download', excelName)
+      document.body.appendChild(link)
+      link.click()
+      link.remove()
+      this.diaType = -1
+      this.$message.success('导出成功')
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang='scss' scoped>
+.content {
+  white-space: nowrap;
+  overflow-x: scroll;
+}
+
+.header {
+  background-color: #5ACAFA;
+  border-top: #1a1a1a solid 1px;
+}
+
+.item {
+  width: 400px;
+  text-wrap: normal;
+  height: 50px;
+  border-collapse: collapse;
+  border: #1a1a1a solid 1px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 5px;
+  white-space: pre-wrap;
+
+}
+
+.top {
+  position: static;
+  top: 0;
+  z-index: 3;
+  left: 0;
+}
+
+.sub {
+  width: 300px;
+  height: 50px;
+  text-wrap: normal;
+}
 
 </style>