From 6849e7ccae618cb0dc491b52eeb24a31fd9246b8 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Mon, 25 Mar 2024 15:31:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E9=9B=86):=20=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=AF=BC=E5=87=BA-=E5=90=8E=E5=8F=B0=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/frontend/src/assets/none-data.png        | Bin 0 -> 1788 bytes
 .../icons/svg/icon_file-excel_colorful.svg    |   5 +
 .../frontend/src/layout/components/Topbar.vue |  30 ++-
 core/frontend/src/styles/index.scss           |  53 +++++
 .../src/views/dataset/exportExcel/index.vue   | 220 ++++++++++++++++++
 5 files changed, 306 insertions(+), 2 deletions(-)
 create mode 100644 core/frontend/src/assets/none-data.png
 create mode 100644 core/frontend/src/icons/svg/icon_file-excel_colorful.svg
 create mode 100644 core/frontend/src/views/dataset/exportExcel/index.vue

diff --git a/core/frontend/src/assets/none-data.png b/core/frontend/src/assets/none-data.png
new file mode 100644
index 0000000000000000000000000000000000000000..dacec6a35210a75999b022faab4cd93405dec97f
GIT binary patch
literal 1788
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

literal 0
HcmV?d00001

diff --git a/core/frontend/src/icons/svg/icon_file-excel_colorful.svg b/core/frontend/src/icons/svg/icon_file-excel_colorful.svg
new file mode 100644
index 0000000000..22cb869537
--- /dev/null
+++ b/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>
diff --git a/core/frontend/src/layout/components/Topbar.vue b/core/frontend/src/layout/components/Topbar.vue
index 87df0f5bab..2533e1c051 100644
--- a/core/frontend/src/layout/components/Topbar.vue
+++ b/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;
diff --git a/core/frontend/src/styles/index.scss b/core/frontend/src/styles/index.scss
index 4ed359da40..9b85466e18 100644
--- a/core/frontend/src/styles/index.scss
+++ b/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;
diff --git a/core/frontend/src/views/dataset/exportExcel/index.vue b/core/frontend/src/views/dataset/exportExcel/index.vue
new file mode 100644
index 0000000000..3eb6142499
--- /dev/null
+++ b/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>