From a8aac3591be5a00cd450e6264f84ff7f5fe52c53 Mon Sep 17 00:00:00 2001
From: Raod <1130305001@qq.com>
Date: Sun, 26 Sep 2021 13:43:09 +0800
Subject: [PATCH] =?UTF-8?q?excel=E5=88=86=E4=BA=AB=E6=9A=82=E4=B8=8D?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/report/bigscreen/index.vue      |   2 +-
 .../src/views/report/excelreport/index.vue    | 294 +++++++++++++-----
 report-ui/src/views/report/report/index.vue   |  21 +-
 3 files changed, 236 insertions(+), 81 deletions(-)

diff --git a/report-ui/src/views/report/bigscreen/index.vue b/report-ui/src/views/report/bigscreen/index.vue
index 3bef1030..0fa6380c 100644
--- a/report-ui/src/views/report/bigscreen/index.vue
+++ b/report-ui/src/views/report/bigscreen/index.vue
@@ -120,7 +120,7 @@ export default {
       params: {
         reportCode: "",
         reportName: "",
-        // reportType: '',
+        reportType: 'report_screen',
         pageNumber: 1,
         pageSize: 8,
         order: "DESC",
diff --git a/report-ui/src/views/report/excelreport/index.vue b/report-ui/src/views/report/excelreport/index.vue
index 07444152..69c3fac7 100644
--- a/report-ui/src/views/report/excelreport/index.vue
+++ b/report-ui/src/views/report/excelreport/index.vue
@@ -6,101 +6,251 @@
  !-->
 <template>
   <div class="main-layout">
+    <el-form ref="form" :model="params" :rules="rules" label-width="120px">
+      <!-- 搜索 -->
+      <el-row :gutter="10">
+        <el-col :xs="24" :sm="20" :md="12" :lg="6" :xl="4">
+          <el-form-item label="名称">
+            <el-input
+              v-model="params.reportName"
+              size="mini"
+              clearable
+              placeholder="名称"
+              class="filter-item"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="20" :md="12" :lg="6" :xl="4">
+          <el-form-item label="报表编码">
+            <el-input
+              v-model="params.reportCode"
+              size="mini"
+              clearable
+              placeholder="报表编码"
+              class="filter-item"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="20" :md="4" :lg="4" :xl="4">
+          <el-button type="primary" size="mini" @click="search('form')"
+          >查询</el-button
+          >
+          <el-button type="danger" size="mini" @click="reset('form')"
+          >重置</el-button
+          >
+        </el-col>
+      </el-row>
+    </el-form>
     <el-row :gutter="20">
-      <el-col v-for="groupItem in reportGroups" :key="groupItem.groupId" :span="6">
-        <div class="list">
-          <header>{{ groupItem.groupName }}</header>
-          <div v-for="report in groupItem.reportList" :key="report.reportId">
-            <p @click="openDesign(report.reportId)">{{ report.reportName }}</p>
-            <!-- <el-button type="success" size="mini" icon="el-icon-setting" circle plain @click="openDesign(report.reportId)" />
-            <el-button type="primary" size="mini" icon="el-icon-view" circle plain /> -->
+      <el-col v-for="item in list" :key="item.id" :span="6">
+        <div class="bg">
+          <img
+            class="bg-img"
+            :src="
+              item.reportImage == null || item.reportImage == ''
+                ? require('../../../assets/images/charts.jpg')
+                : item.reportImage
+            "
+            alt=""
+          />
+          <div class="content">
+            <header>{{ item.reportName }}</header>
+            <footer>
+              {{ item.updateTime }}
+              <div class="operation">
+                <el-button
+                  icon="el-icon-share"
+                  class="view"
+                  type="text"
+                  @click="share(item)"
+                  v-permission="'bigScreenManage:share'"
+                />
+                <el-button
+                  icon="el-icon-view"
+                  class="view"
+                  type="text"
+                  @click="viewDesign(item)"
+                  v-permission="'bigScreenManage:view'"
+                />
+                <el-button
+                  icon="el-icon-edit"
+                  class="edit"
+                  type="text"
+                  @click="openDesign(item)"
+                  v-permission="'bigScreenManage:design'"
+                />
+              </div>
+            </footer>
           </div>
         </div>
       </el-col>
     </el-row>
+    <div class="block">
+      <el-pagination
+        :total="totalCount"
+        :page-sizes="[8, 20, 50, 100]"
+        :page-size="params.pageSize"
+        :current-page="params.pageNumber"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+    <Share
+      :visib="visibleForShareDialog"
+      :reportCode="reportCodeForShareDialog"
+      :reportName="reportNameForShareDialog"
+      @handleClose="visibleForShareDialog = false"
+    />
   </div>
 </template>
 
 <script>
+import Share from "@/views/report/report/components/share";
+import { reportPageList } from "@/api/report";
 export default {
-  name: 'Login',
-  components: {},
+  name: "Login",
+  components: { Share },
   data() {
     return {
-      reportGroups: [
-        {
-          groupId: 1,
-          groupName: '时效类',
-          reportList: [
-            {
-              reportId: 1,
-              reportName: 'excel报表1',
-            },
-            {
-              reportId: 2,
-              reportName: 'excel报表2',
-            },
-            {
-              reportId: 3,
-              reportName: 'excel报表3',
-            },
-          ],
-        },
-        {
-          groupId: 2,
-          groupName: '货物量',
-          reportList: [
-            {
-              reportId: 1,
-              reportName: 'excel报表1',
-            },
-            {
-              reportId: 2,
-              reportName: 'excel报表2',
-            },
-            {
-              reportId: 3,
-              reportName: 'excel报表3',
-            },
-          ],
-        },
-      ],
-    }
+      list: [],
+      rules: {},
+      totalCount: 0,
+      totalPage: 0,
+      params: {
+        reportCode: "",
+        reportName: "",
+        reportType: 'report_excel',
+        pageNumber: 1,
+        pageSize: 8,
+        order: "DESC",
+        sort: "update_time"
+      },
+      // 分享
+      visibleForShareDialog: false,
+      reportCodeForShareDialog: "",
+      reportNameForShareDialog: ""
+    };
   },
   mounted() {},
+  created() {
+    this.queryByPage();
+  },
   methods: {
-    openDesign(reportId) {
-      var routeUrl = this.$router.resolve({ path: '/excelreport/designer', query: { reportCode: reportId }})
-      window.open(routeUrl.href, '_blank')
+    // 查询
+    search() {
+      this.params.pageNumber = 1;
+      this.queryByPage();
     },
-  },
-}
+    // 重置
+    reset(formName) {
+      this.$refs[formName].resetFields();
+      this.params.reportName = "";
+      this.params.reportCode = "";
+      this.params.pageNumber = 1;
+      this.queryByPage();
+    },
+    async queryByPage() {
+      const res = await reportPageList(this.params);
+      if (res.code != "200") return;
+      this.listLoading = true;
+      this.list = res.data.records;
+      this.list.forEach(value => {
+        value["reportNameCode"] =
+          value.reportName + "[" + value.reportCode + "]";
+      });
+      this.totalCount = res.data.total;
+      this.totalPage = res.data.pages;
+      this.listLoading = false;
+    },
+    handleSizeChange(val) {
+      this.params.pageSize = val;
+      this.queryByPage();
+    },
+    handleCurrentChange(val) {
+      this.params.pageNumber = val;
+      this.queryByPage();
+    },
+    // 分享
+    share(val) {
+      //excel暂不支持
+      this.$message.warning("暂不支持excel报表分享");
+      return;
+
+      this.reportCodeForShareDialog = val.reportCode;
+      this.reportNameForShareDialog = val.reportName;
+      this.visibleForShareDialog = true;
+    },
+    openDesign(val) {
+      var routeUrl = this.$router.resolve({
+        path: "/excelreport/designer",
+        query: {
+          reportCode: val.reportCode,
+        }
+      });
+      window.open(routeUrl.href, "_blank");
+    },
+    viewDesign(val) {
+      var routeUrl = this.$router.resolve({
+        path: "/excelreport/viewer",
+        query: { reportCode: val.reportCode }
+      });
+      window.open(routeUrl.href, "_blank");
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">
 .main-layout {
+  padding: 20px;
   position: relative;
   height: auto;
-  padding: 0;
-  margin: 0;
-  .list {
-    background: #fff;
-    padding: 10px;
+  background: #fff;
+  header {
+    font-size: 24px;
+    text-align: center;
+    line-height: 80px;
+  }
+  .bg {
+    width: 100%;
+    height: 200px;
+    position: relative;
+    overflow: hidden;
     margin: 10px 0;
-    header {
-      text-align: center;
-      line-height: 40px;
-      border-bottom: 1px solid #eee;
-    }
-    p {
-      line-height: 30px;
-      text-align: center;
-      color: #666;
-      font-size: 14px;
-      cursor: pointer;
-      margin: 5px 0;
-      &:hover {
-        background: rgb(234, 237, 252);
+    border: 12px solid white;
+  }
+
+  .bg .bg-img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    filter: blur(6px);
+    z-index: 2;
+  }
+  .content {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    color: #fff;
+    left: 0;
+    top: 0;
+    z-index: 3;
+  }
+  footer {
+    width: 100%;
+    font-size: 14px;
+    padding: 16px;
+    line-height: 30px;
+    position: absolute;
+    z-index: 3;
+    bottom: 0;
+    .operation {
+      float: right;
+      .view,
+      .edit {
+        color: #fff;
+        font-size: 14px;
       }
     }
   }
diff --git a/report-ui/src/views/report/report/index.vue b/report-ui/src/views/report/report/index.vue
index 6775a6e7..1d5bb90d 100644
--- a/report-ui/src/views/report/report/index.vue
+++ b/report-ui/src/views/report/report/index.vue
@@ -66,6 +66,14 @@ export default {
         labelWidth: "120px",
         // 查询表单条件
         queryFormFields: [
+          {
+            inputType: 'anji-select', //form表单类型 input|input-number|anji-select(传递url或者dictCode)|anji-tree(左侧树)|date|datetime|datetimerange
+            anjiSelectOption: {
+              dictCode: "REPORT_TYPE"
+            },
+            label: '报表类型',
+            field: 'reportType'
+          },
           {
             inputType: "input",
             label: "报表名称",
@@ -76,14 +84,6 @@ export default {
             label: "报表编码",
             field: "reportCode"
           },
-          {
-            inputType: 'anji-select', //form表单类型 input|input-number|anji-select(传递url或者dictCode)|anji-tree(左侧树)|date|datetime|datetimerange
-            anjiSelectOption: {
-              dictCode: "REPORT_TYPE"
-            },
-            label: '报表类型',
-            field: 'reportType'
-          },
         ],
         // 操作按钮
         buttons: {
@@ -282,6 +282,11 @@ export default {
     },
     //分享
     shareReport(val){
+      if (val.reportType == 'report_excel') {
+        //excel暂不支持
+        this.$message.warning("暂不支持excel报表分享");
+        return;
+      }
       this.reportCodeForShareDialog = val.reportCode;
       this.reportNameForShareDialog = val.reportName;
       this.visibleForShareDialog = true;