Merge pull request #9004 from dataease/pr@dev_export_data

fix(数据集): 修复点击数据导出中心无响应的问题
2024-04-09 11:51:42 +08:00 · 2024-04-09 11:51:42 +08:00 · 1a218658a8
commit 1a218658a8
parent 81b0a9f1d5 caad9454fc
6 changed files with 221 additions and 27 deletions
--- a/core/frontend/src/components/canvas/components/editor/EditBar.vue
+++ b/core/frontend/src/components/canvas/components/editor/EditBar.vue
@ -206,6 +206,7 @@ import { uploadFileResult } from '@/api/staticResource/staticResource'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { hasDataPermission } from '@/utils/permission'
 import { exportExcelDownload } from '@/components/canvas/utils/utils'
+import { Button } from "element-ui";

 export default {
  components: { Background, LinkJumpSet, FieldsList, SettingMenu, LinkageField, MapLayerController },
@ -469,8 +470,79 @@ export default {
    showViewDetails(openType = 'details') {
      this.$emit('showViewDetails', { openType: openType })
    },
+    exportDataCb(val) {
+      if (val && val.success) {
+        this.openMessageLoading(this.exportData)
+      }
+
+      if (val && val.success === false) {
+        this.openMessageSuccess( `${this.chart.title ? this.chart.title : this.chart.name} 导出失败，前往`, 'error',this.exportData);
+      }
+    },
+    exportData() {
+      bus.$emit('data-export-center')
+    },
+    openMessageLoading(cb) {
+      const h = this.$createElement;
+      const iconClass = `el-icon-loading`;
+      const customClass = `de-message-loading de-message-export`;
+      this.$message({
+        message: h("p", null, [
+          "后台导出中,可前往",
+          h(
+            Button,
+            {
+              props: {
+                type: "text",
+                size: "mini",
+              },
+              class: "btn-text",
+              on: {
+                click: () => {
+                  cb();
+                },
+              },
+            },
+            "数据导出中心",
+          ),
+          "查看进度,进行下载、暂停等操作",
+        ]),
+        iconClass,
+        showClose: true,
+        customClass,
+      });
+    },
+    openMessageSuccess(text, type, cb) {
+      const h = this.$createElement;
+      const iconClass = `el-icon-${type || "success"}`;
+      const customClass = `de-message-${type || "success"} de-message-export`;
+      this.$message({
+        message: h("p", null, [
+          h("span", null, text),
+          h(
+            Button,
+            {
+              props: {
+                type: "text",
+                size: "mini",
+              },
+              class: "btn-text",
+              on: {
+                click: () => {
+                  cb();
+                },
+              },
+            },
+            "数据导出中心",
+          ),
+        ]),
+        iconClass,
+        showClose: true,
+        customClass,
+      });
+    },
    exportExcelDownload() {
-      exportExcelDownload(this.chart)
+      exportExcelDownload(this.chart, null, null, null, null, this.exportDataCb)
    },
    auxiliaryMatrixChange() {
      if (this.curComponent.auxiliaryMatrix) {
--- a/core/frontend/src/components/canvas/customComponent/UserView.vue
+++ b/core/frontend/src/components/canvas/customComponent/UserView.vue
@ -239,6 +239,7 @@ import ChartComponent from '@/views/chart/components/ChartComponent.vue'
 import TableNormal from '@/views/chart/components/table/TableNormal'
 import LabelNormal from '../../../views/chart/components/normal/LabelNormal'
 import { uuid } from 'vue-uuid'
+import { Button } from "element-ui";
 import bus from '@/utils/bus'
 import { mapState } from 'vuex'
 import { isChange } from '@/utils/conditionUtil'
@ -755,9 +756,78 @@ export default {
        this.getData(this.element.propValue.viewId, false)
      }
    },
+    exportData() {
+      bus.$emit('data-export-center')
+    },
+    openMessageLoading(cb) {
+      const h = this.$createElement;
+      const iconClass = `el-icon-loading`;
+      const customClass = `de-message-loading de-message-export`;
+      this.$message({
+        message: h("p", null, [
+          "后台导出中,可前往",
+          h(
+            Button,
+            {
+              props: {
+                type: "text",
+                size: "mini",
+              },
+              class: "btn-text",
+              on: {
+                click: () => {
+                  cb();
+                },
+              },
+            },
+            "数据导出中心",
+          ),
+          "查看进度,进行下载、暂停等操作",
+        ]),
+        iconClass,
+        showClose: true,
+        customClass,
+      });
+    },
+    openMessageSuccess(text, type, cb) {
+      const h = this.$createElement;
+      const iconClass = `el-icon-${type || "success"}`;
+      const customClass = `de-message-${type || "success"} de-message-export`;
+      this.$message({
+        message: h("p", null, [
+          h("span", null, text),
+          h(
+            Button,
+            {
+              props: {
+                type: "text",
+                size: "mini",
+              },
+              class: "btn-text",
+              on: {
+                click: () => {
+                  cb();
+                },
+              },
+            },
+            "数据导出中心",
+          ),
+        ]),
+        iconClass,
+        showClose: true,
+        customClass,
+      });
+    },
    exportExcel() {
      this.dialogLoading = true
-      this.$refs['userViewDialog'].exportExcel(() => {
+      this.$refs['userViewDialog'].exportExcel((val) => {
+        if (val && val.success) {
+          this.openMessageLoading(this.exportData)
+        }
+
+        if (val && val.success === false) {
+          this.openMessageSuccess( `${this.chart.title ? this.chart.title : this.chart.name} 导出失败，前往`, 'error',this.exportData);
+        }
        this.dialogLoading = false
      })
    },
--- a/core/frontend/src/components/canvas/utils/utils.js
+++ b/core/frontend/src/components/canvas/utils/utils.js
@ -533,9 +533,9 @@ export function exportExcelDownload(chart, snapshot, width, height, loadingWrapp
  }
  method(request).then((res) => {
    loadingWrapper && (loadingWrapper.val = false)
-    callBack && callBack()
-  }).catch(() => {
+    callBack && callBack(res)
+  }).catch((error) => {
    loadingWrapper && (loadingWrapper.val = false)
-    callBack && callBack()
+    callBack && callBack(error)
  })
 }
--- a/core/frontend/src/layout/components/Topbar.vue
+++ b/core/frontend/src/layout/components/Topbar.vue
@ -275,6 +275,7 @@ export default {
    bus.$on('set-top-text-info', this.setTopTextInfo)
    bus.$on('set-top-text-active-info', this.setTopTextActiveInfo)
    bus.$on('sys-logout', this.logout)
+    bus.$on('data-export-center', this.dataExportCenter)
    this.showTips && this.$nextTick(() => {
      const drop = this.$refs['my-drop']
      drop && drop.show && drop.show()
@ -285,6 +286,7 @@ export default {
    window.removeEventListener('beforeunload', (e) => this.beforeunloadHandler(e))
    window.removeEventListener('unload', (e) => this.unloadHandler(e))

+    bus.$off('data-export-center', this.dataExportCenter)
    bus.$off('set-top-menu-info', this.setTopMenuInfo)
    bus.$off('set-top-menu-active-info', this.setTopMenuActiveInfo)
    bus.$off('set-top-text-info', this.setTopTextInfo)
@ -303,6 +305,9 @@ export default {
    })
  },
  methods: {
+    dataExportCenter() {
+      this.downloadClick()
+    },
    async initAiBase() {
      await findBaseParams().then(rsp => {
        const params = rsp.data
--- a/core/frontend/src/views/dataset/data/ViewTable.vue
+++ b/core/frontend/src/views/dataset/data/ViewTable.vue
@ -260,6 +260,7 @@ import PluginCom from '@/views/system/plugin/PluginCom'
 import UpdateRecords from './UpdateRecords'
 import rowAuth from './components/rowAuth.vue'
 import {Button} from "element-ui";
+import bus from '@/utils/bus'

 export default {
  name: 'ViewTable',
@ -490,13 +491,13 @@ export default {
    closeExport() {
      this.showExport = false
    },
-    openMessageSuccess(text, type, cb) {
+    openMessageLoading(cb) {
      const h = this.$createElement;
-      const iconClass = `el-icon-${type || "success"}`;
-      const customClass = `de-message-${type || "success"} de-message-export`;
+      const iconClass = `el-icon-loading`;
+      const customClass = `de-message-loading de-message-export`;
      this.$message({
        message: h("p", null, [
-          h("span", null, text),
+          "后台导出中,可前往",
          h(
            Button,
            {
@ -513,12 +514,16 @@ export default {
            },
            "数据导出中心",
          ),
+          "查看进度,进行下载、暂停等操作",
        ]),
        iconClass,
        showClose: true,
        customClass,
      });
    },
+    callbackExport() {
+      bus.$emit('data-export-center')
+    },
    exportDatasetRequest() {
      this.$refs['exportForm'].validate((valid) => {
        if (valid) {
@ -537,7 +542,7 @@ export default {
            this.table.expressionTree = JSON.stringify({ items, logic })
            this.exportDatasetLoading = true
            exportDataset(this.table).then((res) => {
-              this.openMessageSuccess('后台导出中，查看进度可前往', 'info')
+              this.openMessageLoading(this.callbackExport)
            }).finally(() => {
              this.exportDatasetLoading = false
              this.showExport = false
--- a/core/frontend/src/views/dataset/exportExcel/index.vue
+++ b/core/frontend/src/views/dataset/exportExcel/index.vue
@ -2,6 +2,7 @@
  <el-drawer
    custom-class="de-user-drawer de-export-excel"
    title="数据导出中心"
+    v-loading="drawerLoading"
    :visible.sync="drawer"
    direction="rtl"
    size="1000px"
@ -27,22 +28,19 @@
        style="width: 100%"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
-        <el-table-column prop="fileName" label="文件名" width="320">
+        <el-table-column prop="fileName" label="文件名" width="332">
          <template slot-scope="scope">
            <div class="name-excel">
              <svg-icon style="font-size: 24px;" icon-class="icon_file-excel_colorful"> </svg-icon>
-              <span style="margin-left: 8px">{{ scope.row.fileName }}</span>
+              <div class="name-content">
+                <div class="fileName">{{ scope.row.fileName }}</div>
+                <div class="failed" v-if="activeName==='FAILED'">导出失败</div>
+                <div class="sucess" v-if="scope.row.exportStatus==='SUCCESS'">{{scope.row.fileSize}}{{scope.row.fileSizeUnit}}</div>
+              </div>
            </div>
-            <div v-show="activeName==='FAILED'">
-              <span style="margin-left: 8px" :style="{ color: 'red' }">导出失败</span>
-              <hr class="red-line" />
-            </div>
-            <div v-show="scope.row.exportStatus==='SUCCESS'">
-              <span style="margin-left: 8px">{{scope.row.fileSize}}{{scope.row.fileSizeUnit}}</span>
-            </div>
-            <el-progress v-show="activeName==='IN_PROGRESS'" :percentage="scope.row.exportPogress"></el-progress>
+            <div v-if="activeName==='FAILED'" class="red-line" />
+            <el-progress v-if="activeName==='IN_PROGRESS'" :percentage="+scope.row.exportPogress"></el-progress>
          </template>
-
        </el-table-column>
        <el-table-column prop="exportFromName" label="导出对象" width="200">
        </el-table-column>
@ -57,7 +55,7 @@
            <span>{{ scope.row.exportTime | timestampFormatDate }}</span>
          </template>
        </el-table-column>
-        <el-table-column prop="operate" width="80" label="操作">
+        <el-table-column fixed="right" prop="operate" width="80" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.exportStatus === 'SUCCESS'" type="text" size="mini" @click="downloadClick(scope.row)">
              <div class="download-export">
@ -92,7 +90,6 @@
 </template>
 <script>
 import msgCfm from "@/components/msgCfm/index";
-import { Button } from "element-ui";
 import request from "@/utils/request";
 import {downloadFile, post} from '@/api/dataset/dataset'
 export default {
@ -104,6 +101,7 @@ export default {
      errImg: require("@/assets/none-data.png"),
      tableData: [{ name: "附件名称" }],
      drawer: false,
+      drawerLoading: false,
      description: this.$t("暂无任务"),
      tabList: [
        {
@ -175,8 +173,9 @@ export default {
    },
    handleClick() {
      this.tableData = []
+      this.drawerLoading = true
      post(
-        '/exportCenter/exportTasks/' + this.activeName,{}, true
+        '/exportCenter/exportTasks/' + this.activeName,{}, false
      ).then(
        (res) => {
          this.tabList.forEach( item => {
@ -203,7 +202,9 @@ export default {
          }
        },

-      )
+      ).finally(() => {
+        this.drawerLoading = false
+      })
    },
    downloadClick(item) {
      downloadFile(item.id).then((res) => {
@ -288,8 +289,18 @@ export default {
    }
  }

+  .download-export {
+    font-size: 16px;
+  }
+
  .table-container {
    margin-top: 16px;
+
+    .el-table .cell {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+
    &.hidden-bottom {
      .el-table::before {
        display: none;
@ -299,6 +310,33 @@ export default {
    .name-excel {
      display: flex;
      align-items: center;
+      .name-content {
+        max-width: 280px;
+        margin-left: 4px;
+        .fileName {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          width: 100%;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 22px;
+        }
+
+        .failed {
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 20px;
+          color: #F54A45;
+        }
+
+        .sucess {
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 20px;
+          color: #8F959E;
+        }
+      }
    }

    .el-table__header {
@ -310,8 +348,12 @@ export default {
    }

    .red-line {
-      border: 2px solid red;
-      margin: 10px 0;
+      width: 100%;
+      height: 4px;
+      background: #F54A45;
+      position: absolute;
+      left: 0;
+      bottom: 0;
    }
  }
 }