feat(数据集): 数据导出-后台导出

core/frontend/src/icons/svg/icon_file-excel_colorful.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 2.5C4 1.94772 4.44772 1.5 5 1.5H14.7929C14.9255 1.5 15.0527 1.55268 15.1464 1.64645L19.8536 6.35355C19.9473 6.44732 20 6.5745 20 6.70711V21.5C20 22.0523 19.5523 22.5 19 22.5H5C4.44772 22.5 4 22.0523 4 21.5V2.5Z" fill="#34C724"/>
+<path d="M15 1.54492C15.054 1.56949 15.1037 1.6037 15.1464 1.64646L19.8536 6.35357C19.8963 6.39632 19.9305 6.44602 19.9551 6.50001H16C15.4477 6.50001 15 6.0523 15 5.50001V1.54492Z" fill="#2CA91F"/>
+<path d="M11.308 13.5956L8.33203 17.9996H9.60403L11.98 14.4596L14.284 17.9996H15.676L12.664 13.5956L15.496 9.43164H14.224L11.992 12.7796L9.85603 9.43164H8.48803L11.308 13.5956Z" fill="white"/>
+</svg>

core/frontend/src/layout/components/Topbar.vue

@@ -45,6 +45,12 @@
       class="right-menu"
       style="color: var(--TopTextColor)"
     >
+      <div class="download-export">
+        <svg-icon
+          @click="downloadClick"
+          icon-class="icon_download_outlined"
+        />
+      </div>
       <notification class="right-menu-item hover-effect" />
       <lang-select class="right-menu-item hover-effect" />
       <div
@@ -105,6 +111,7 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
+    <ExportExcel ref="ExportExcelRef"></ExportExcel>
 
     <!--模板市场全屏显示框-->
     <el-dialog
@@ -126,6 +133,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import ExportExcel from '@/views/dataset/exportExcel/index.vue'
 import AppLink from './Sidebar/Link'
 import variables from '@/styles/variables.scss'
 import { isExternal } from '@/utils/validate'
@@ -143,8 +151,8 @@ export default {
     TemplateMarket,
     AppLink,
     Notification,
-    LangSelect
-
+    LangSelect,
+    ExportExcel
   },
   props: {
     showTips: {
@@ -278,6 +286,10 @@ export default {
     beforeunloadHandler() {
       this.beforeUnload_time = new Date().getTime()
     },
+    downloadClick() {
+      console.log('this.$refs.ExportExcelRef', this.$refs.ExportExcelRef)
+      this.$refs.ExportExcelRef.init()
+    },
     unloadHandler(e) {
       this.gap_time = new Date().getTime() - this.beforeUnload_time
       if (this.gap_time <= 5) {
@@ -431,6 +443,20 @@ export default {
 
 </script>
 <style lang="scss" scoped>
+.download-export {
+  font-size: 20px;
+  cursor: pointer;
+  padding: 4px;
+  color: #646A73;
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  display: flex;
+
+  &:hover {
+    background: #1F23291A;
+  }
+}
 .el-dropdown-link {
   cursor: pointer;
   color: #1e212a;

core/frontend/src/styles/index.scss

@@ -916,6 +916,59 @@ div:focus {
   }
 }
 
+.de-message-export {
+  min-width: 20px !important;
+  padding: 16px 20px !important;
+  display: flex;
+  align-items: center;
+  box-shadow: 0px 4px 8px 0px #1f23291a;
+
+  & > p {
+    font-family: AlibabaPuHuiTi;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: left;
+    color: #1f2329;
+  }
+
+  .btn-text {
+    padding: 2px 4px;
+    &:hover {
+      background: var(--primary10, #3370FF1A);
+    }
+  }
+
+  .el-message__closeBtn {
+    margin-left: 28px;
+    height: 16px;
+    width: 16px;
+    position: relative;
+    margin-right: 0;
+    top: 0;
+    right: 0;
+    transform: translateY(0);
+    color: #646A73;
+  }
+
+  .el-icon-success,
+  .el-icon-error,
+  .el-icon-loading {
+    height: 16px;
+    width: 16px;
+    margin-right: 8px;
+  }
+}
+
+.de-message-loading {
+  border: 1px solid var(--primary, #3370FF) !important;
+  background: #F0F4FF !important;
+  .el-icon-loading {
+    color: var(--primary, #3370FF);
+  }
+}
+
 .de-message-error {
   border: 1px solid var(--deDanger, #f54a45) !important;
   background: var(--deWhitemsgDeDanger, #fef1f1) !important;

core/frontend/src/views/dataset/exportExcel/index.vue

@@ -0,0 +1,220 @@
+<template>
+  <el-drawer
+    custom-class="de-user-drawer de-export-excel"
+    title="数据导出中心"
+    :visible.sync="drawer"
+    direction="rtl"
+    size="1000px"
+    append-to-body
+    :before-close="handleClose"
+  >
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane
+        v-for="tab in tabList"
+        :key="tab.name"
+        :label="tab.label"
+        :name="tab.name"
+      ></el-tab-pane>
+    </el-tabs>
+    <de-btn secondary icon="el-icon-delete" @click="delAll"
+      >{{ $t("全部删除") }}
+    </de-btn>
+    <div class="table-container" :class="!tableData.length && 'hidden-bottom'">
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        @selection-change="handleSelectionChange"
+        style="width: 100%"
+      >
+        <el-table-column type="selection" width="50"> </el-table-column>
+        <el-table-column prop="name" label="文件名" width="320">
+          <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.name }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="object" label="导出对象" width="200">
+        </el-table-column>
+        <el-table-column prop="origin" width="120" label="导出来源">
+        </el-table-column>
+        <el-table-column prop="time" width="180" label="导出时间">
+        </el-table-column>
+        <el-table-column prop="operate" width="80" label="操作">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" @click="deleteField(scope.row)"
+              >{{ $t("dataset.delete") }}
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-empty
+          slot="empty"
+          v-if="!tableData.length"
+          style="padding-top: 80px"
+          :image-size="125"
+          :image="errImg"
+          :description="description"
+        />
+      </el-table>
+    </div>
+  </el-drawer>
+</template>
+<script>
+import msgCfm from "@/components/msgCfm/index";
+import { Button } from "element-ui";
+export default {
+  mixins: [msgCfm],
+  data() {
+    return {
+      activeName: "all",
+      multipleSelection: [],
+      errImg: require("@/assets/none-data.png"),
+      tableData: [{ name: "附件名称" }],
+      drawer: false,
+      description: this.$t("暂无任务"),
+      tabList: [
+        {
+          label: "导出中(3)",
+          name: "ing",
+        },
+        {
+          label: "成功(3)",
+          name: "success",
+        },
+        {
+          label: "失败(3)",
+          name: "fail",
+        },
+        {
+          label: "全部(3)",
+          name: "all",
+        },
+      ],
+    };
+  },
+  methods: {
+    init() {
+      this.drawer = true;
+    },
+    handleClick() {},
+    deleteField() {
+      this.tableData = [];
+      this.openMessageSuccess("commons.delete_success");
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    confirmDelete() {
+      const options = {
+        title: "确定删除该任务吗？",
+        type: "primary",
+        cb: this.deleteField,
+      };
+      this.handlerConfirm(options);
+    },
+    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,
+      });
+    },
+    delAll() {
+      this.openMessageLoading(this.handleClick);
+      this.openMessageSuccess( '第二个文件名称 导出失败，前往', 'error',this.handleClick);
+      this.openMessageSuccess( '第二个文件名称 导出成功，前往', 'success',this.handleClick);
+    },
+    handleClose() {
+      this.drawer = false;
+    },
+  },
+};
+</script>
+<style lang="less">
+.de-export-excel {
+  .el-drawer__header {
+    border-bottom: none;
+  }
+  .el-tabs {
+    margin-top: -25px;
+    .el-tabs__header {
+      margin-bottom: 24px;
+    }
+  }
+
+  .table-container {
+    margin-top: 16px;
+    &.hidden-bottom {
+      .el-table::before {
+        display: none;
+      }
+    }
+
+    .name-excel {
+      display: flex;
+      align-items: center;
+    }
+
+    .el-table__header {
+      border-top: 1px solid #1f232926;
+    }
+
+    th.el-table__cell.is-leaf {
+      border-color: #1f232926;
+    }
+  }
+}
+</style>