From f0c33529e76441bd851b8ec92f0e9b0a1e4c1367 Mon Sep 17 00:00:00 2001
From: qianlishi <1432731663@qq.com>
Date: Mon, 2 Aug 2021 15:52:54 +0800
Subject: [PATCH] update table

---
 report-ui/src/assets/styles/anji.scss         |  28 ++
 .../src/views/report/bigscreen/index.vue      |   9 +-
 report-ui/src/views/report/report/index.vue   | 352 ++++++++++++------
 .../src/views/report/resultset/index.vue      |  30 +-
 4 files changed, 276 insertions(+), 143 deletions(-)

diff --git a/report-ui/src/assets/styles/anji.scss b/report-ui/src/assets/styles/anji.scss
index 0ca3d157..143ad3f0 100644
--- a/report-ui/src/assets/styles/anji.scss
+++ b/report-ui/src/assets/styles/anji.scss
@@ -38,3 +38,31 @@
     zoom: 1;
   }
 }
+
+.el-form-item .el-form-item__label {
+  line-height: 28px;
+}
+.el-form-item__content {
+  line-height: 28px;
+}
+.el-input__icon {
+  line-height: 28px;
+}
+
+.el-input--suffix .el-input__inner {
+  height: 28px;
+  line-height: 28px;
+}
+.el-input .el-input__inner {
+  height: 28px;
+  line-height: 28px;
+}
+.el-button {
+  padding: 7px 15px;
+  font-size: 12px;
+  border-radius: 3px;
+}
+
+.el-table td {
+  padding: 6px 0;
+}
diff --git a/report-ui/src/views/report/bigscreen/index.vue b/report-ui/src/views/report/bigscreen/index.vue
index f287f367..2afc90e4 100644
--- a/report-ui/src/views/report/bigscreen/index.vue
+++ b/report-ui/src/views/report/bigscreen/index.vue
@@ -31,14 +31,7 @@
             />
           </el-form-item>
         </el-col>
-        <el-col
-          :xs="24"
-          :sm="20"
-          :md="4"
-          :lg="4"
-          :xl="4"
-          style="margin-top: 5px"
-        >
+        <el-col :xs="24" :sm="20" :md="4" :lg="4" :xl="4">
           <el-button type="primary" size="mini" @click="search('form')"
             >查询</el-button
           >
diff --git a/report-ui/src/views/report/report/index.vue b/report-ui/src/views/report/report/index.vue
index c559c1ad..e5ee9777 100644
--- a/report-ui/src/views/report/report/index.vue
+++ b/report-ui/src/views/report/report/index.vue
@@ -6,17 +6,35 @@
  !-->
 <template>
   <div class="app-container">
-    <el-form ref="form" :model="params" :rules="rules" label-width="120px" v-permission="'reportManage:query'">
+    <el-form
+      ref="form"
+      :model="params"
+      :rules="rules"
+      label-width="120px"
+      v-permission="'reportManage:query'"
+    >
       <!-- 搜索 -->
       <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-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-input
+              v-model="params.reportCode"
+              size="mini"
+              clearable
+              placeholder="报表编码"
+              class="filter-item"
+            />
           </el-form-item>
         </el-col>
         <!-- <el-col :xs="24"
@@ -32,16 +50,39 @@
           </el-form-item>
         </el-col> -->
         <el-col :xs="24" :sm="20" :md="4" :lg="4" :xl="4" class="query">
-          <el-button type="primary" size="mini" @click="search('form')">查询</el-button>
-          <el-button type="danger" size="mini" @click="reset('form')">重置</el-button>
+          <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-button type="primary" size="mini" icon="el-icon-plus" @click="showAddReportModel()" v-permission="'reportManage:insert'">新增</el-button>
+    <el-button
+      type="primary"
+      size="mini"
+      icon="el-icon-plus"
+      @click="showAddReportModel()"
+      v-permission="'reportManage:insert'"
+      >新增</el-button
+    >
 
     <!--表格渲染-->
-    <el-table v-loading="listLoading" border :data="list" element-loading-text="Loading" class="mt10" style="width: 100%">
-      <el-table-column align="center" label="序号" type="index" min-width="40" />
+    <el-table
+      v-loading="listLoading"
+      border
+      :data="list"
+      element-loading-text="Loading"
+      class="mt10"
+      style="width: 100%"
+    >
+      <el-table-column
+        align="center"
+        label="序号"
+        type="index"
+        min-width="40"
+      />
       <!-- <el-table-column label="报表类型">
         <template slot-scope="scope">
           {{scope.row.reportType | reportTableType}}
@@ -62,20 +103,67 @@
       <el-table-column prop="updateTime" label="更新时间" />
       <el-table-column label="操作" width="200px" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="share(scope.row)" v-permission="'bigScreenManage:share'">分享</el-button>
-          <el-button type="text" @click="preview(scope.row)" v-permission="'bigScreenManage:view'">预览</el-button>
-          <el-button type="text" @click="design(scope.row)" v-permission="'bigScreenManage:design'">设计</el-button>
-          <el-button type="text" @click="showAddReportModel(scope.row)" v-permission="'reportManage:update'">编辑</el-button>
-          <el-button type="text" @click="del(scope.row)" v-permission="'reportManage:delete'">删除</el-button>
+          <el-button
+            type="text"
+            @click="share(scope.row)"
+            v-permission="'bigScreenManage:share'"
+            >分享</el-button
+          >
+          <el-button
+            type="text"
+            @click="preview(scope.row)"
+            v-permission="'bigScreenManage:view'"
+            >预览</el-button
+          >
+          <el-button
+            type="text"
+            @click="design(scope.row)"
+            v-permission="'bigScreenManage:design'"
+            >设计</el-button
+          >
+          <el-button
+            type="text"
+            @click="showAddReportModel(scope.row)"
+            v-permission="'reportManage:update'"
+            >编辑</el-button
+          >
+          <el-button
+            type="text"
+            @click="del(scope.row)"
+            v-permission="'reportManage:delete'"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
     <div class="block">
-      <el-pagination :total="totalCount" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" :current-page="params.pageNumber" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+      <el-pagination
+        :total="totalCount"
+        :page-sizes="[10, 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>
     <!--表单组件-->
-    <el-dialog title="项目基础配置" width="50%" :close-on-click-modal="false" center :visible.sync="basicDialog" @close="closeDialog">
-      <el-form ref="userForm" :model="dialogForm" :rules="rules" size="small" style="min-height:200px" label-width="100px">
+    <el-dialog
+      title="项目基础配置"
+      width="50%"
+      :close-on-click-modal="false"
+      center
+      :visible.sync="basicDialog"
+      @close="closeDialog"
+    >
+      <el-form
+        ref="userForm"
+        :model="dialogForm"
+        :rules="rules"
+        size="small"
+        style="min-height:200px"
+        label-width="100px"
+      >
         <el-row :gutter="10">
           <!-- <el-col :xs="24"
                   :sm="20"
@@ -100,7 +188,10 @@
           </el-col>
           <el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
             <el-form-item label="报表编码" prop="reportCode">
-              <el-input :disabled="reportCodeDisable" v-model="dialogForm.reportCode" />
+              <el-input
+                :disabled="reportCodeDisable"
+                v-model="dialogForm.reportCode"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -124,17 +215,33 @@
         </el-row> -->
         <el-col :span="24">
           <el-form-item label="备注">
-            <el-input v-model="dialogForm.reportDesc" type="textarea" placeholder="请输入内容" show-word-limit />
+            <el-input
+              v-model="dialogForm.reportDesc"
+              type="textarea"
+              placeholder="请输入内容"
+              show-word-limit
+            />
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label="缩略图">
-            <el-upload class="avatar-uploader" :action="requestUrl" :headers="headers" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
-              <img v-if="dialogForm.reportImage" :src="
+            <el-upload
+              class="avatar-uploader"
+              :action="requestUrl"
+              :headers="headers"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload"
+            >
+              <img
+                v-if="dialogForm.reportImage"
+                :src="
                   dialogForm.reportImage == null
                     ? require('../../../assets/images/charts.jpg')
                     : dialogForm.reportImage
-                " class="avatar" />
+                "
+                class="avatar"
+              />
               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
             </el-upload>
           </el-form-item>
@@ -145,54 +252,58 @@
         <el-button type="primary" @click="UserConfirm">保存</el-button>
       </div>
     </el-dialog>
-    <Share :visib="visibleForShareDialog" :reportCode="reportCodeForShareDialog" @handleClose="visibleForShareDialog = false" />
+    <Share
+      :visib="visibleForShareDialog"
+      :reportCode="reportCodeForShareDialog"
+      @handleClose="visibleForShareDialog = false"
+    />
   </div>
 </template>
 
 <script>
-import { dataDictionary } from '@/api/common'
-import { getToken } from '@/utils/auth'
-import { reportPageList, addReport, editReport, delReport } from '@/api/report'
-import Dictionary from '@/components/Dictionary/index'
-import Share from '@/views/report/report/components/share'
-var typeData
+import { dataDictionary } from "@/api/common";
+import { getToken } from "@/utils/auth";
+import { reportPageList, addReport, editReport, delReport } from "@/api/report";
+import Dictionary from "@/components/Dictionary/index";
+import Share from "@/views/report/report/components/share";
+var typeData;
 export default {
-  name: 'Report',
+  name: "Report",
   components: { Dictionary, Share },
   filters: {
     filterPushType(val) {
       for (var i = 0; i < typeData.dictionaryGroupOptions.length; i++) {
         if (typeData.dictionaryGroupOptions[i].id == val) {
-          return typeData.dictionaryGroupOptions[i].text
+          return typeData.dictionaryGroupOptions[i].text;
         }
       }
     },
     reportTableType(val) {
       for (var i = 0; i < typeData.dictionaryTypeOptions.length; i++) {
         if (typeData.dictionaryTypeOptions[i].id == val) {
-          return typeData.dictionaryTypeOptions[i].text
+          return typeData.dictionaryTypeOptions[i].text;
         }
       }
-    },
+    }
   },
   data() {
     return {
       params: {
-        reportCode: '',
-        reportName: '',
+        reportCode: "",
+        reportName: "",
         // reportType: '',
         pageNumber: 1,
         pageSize: 10,
-        order: 'DESC',
-        sort: 'update_time',
+        order: "DESC",
+        sort: "update_time"
       },
       dialogForm: {
-        reportName: '',
-        reportCode: '',
+        reportName: "",
+        reportCode: "",
         // reportType: '',
         // reportGroup: '',
-        reportDesc: '',
-        reportImage: '',
+        reportDesc: "",
+        reportImage: ""
       },
       basicDialog: false,
       listLoading: true,
@@ -203,163 +314,163 @@ export default {
       dictionaryGroupOptions: [], // 报表分组
       rules: {},
       reportCodeDisable: false,
-      requestUrl: process.env.BASE_API + '/file/upload',
+      requestUrl: process.env.BASE_API + "/file/upload",
       headers: {
-        Authorization: getToken(),
+        Authorization: getToken()
       },
 
       // 分享
       visibleForShareDialog: false,
-      reportCodeForShareDialog: '',
-    }
+      reportCodeForShareDialog: ""
+    };
   },
 
   mounted() {},
   // 在生命周期 beforeCreate里面改变this指向
-  beforeCreate: function () {
-    typeData = this
+  beforeCreate: function() {
+    typeData = this;
   },
   created() {
-    this.queryByPage()
+    this.queryByPage();
   },
   methods: {
     // 查询
     search() {
-      this.params.pageNumber = 1
-      this.queryByPage()
+      this.params.pageNumber = 1;
+      this.queryByPage();
     },
     // 重置
     reset(formName) {
-      this.$refs[formName].resetFields()
-      this.params.reportName = ''
-      this.params.reportCode = ''
+      this.$refs[formName].resetFields();
+      this.params.reportName = "";
+      this.params.reportCode = "";
       // this.params.reportType = ''
-      this.params.pageNumber = 1
-      this.queryByPage()
+      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
+      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;
     },
 
     handleAvatarSuccess(res) {
-      this.dialogForm.reportImage = res.data.urlPath
+      this.dialogForm.reportImage = res.data.urlPath;
     },
     beforeAvatarUpload(file) {
-      const isJPG = file.type === 'image/jpeg'
-      const isLt2M = file.size / 1024 / 1024 < 2
-      return true
+      const isJPG = file.type === "image/jpeg";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      return true;
     },
 
     // 打开模态框
     showAddReportModel(val) {
-      this.basicDialog = true
+      this.basicDialog = true;
       if (val === undefined) {
-        this.reportCodeDisable = false
+        this.reportCodeDisable = false;
         this.dialogForm = {
-          reportName: '',
-          reportCode: '',
+          reportName: "",
+          reportCode: "",
           // reportType: '',
-          reportDesc: '',
-          reportImage: '',
-        }
+          reportDesc: "",
+          reportImage: ""
+        };
       } else {
-        this.dialogForm = val
-        this.reportCodeDisable = true
+        this.dialogForm = val;
+        this.reportCodeDisable = true;
       }
     },
     // 分享
     share(val) {
-      this.reportCodeForShareDialog = val.reportCode
-      this.visibleForShareDialog = true
+      this.reportCodeForShareDialog = val.reportCode;
+      this.visibleForShareDialog = true;
     },
     // 预览
     preview(val) {
       var routeUrl = this.$router.resolve({
-        path: '/bigscreen/viewer',
-        query: { reportCode: val.reportCode },
-      })
-      window.open(routeUrl.href, '_blank')
+        path: "/bigscreen/viewer",
+        query: { reportCode: val.reportCode }
+      });
+      window.open(routeUrl.href, "_blank");
       // }
     },
     // 设计
     design(val) {
       var routeUrl = this.$router.resolve({
-        path: '/bigscreen/designer',
+        path: "/bigscreen/designer",
         query: {
           reportCode: val.reportCode,
           reportId: val.id,
-          accessKey: val.accessKey,
-        },
-      })
-      window.open(routeUrl.href, '_blank')
+          accessKey: val.accessKey
+        }
+      });
+      window.open(routeUrl.href, "_blank");
       // }
     },
     // 删除
     async delReport(val) {
-      const { code } = await delReport(val)
-      if (code != '200') return
-      this.queryByPage()
+      const { code } = await delReport(val);
+      if (code != "200") return;
+      this.queryByPage();
     },
     del(val) {
-      this.$confirm('确定删除此条数据, 是否继续?', '删除', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
+      this.$confirm("确定删除此条数据, 是否继续?", "删除", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
       })
         .then(() => {
-          this.delReport(val)
+          this.delReport(val);
         })
         .catch(() => {
           this.$message({
-            type: 'info',
-            message: '取消删除',
-          })
-        })
+            type: "info",
+            message: "取消删除"
+          });
+        });
     },
     // 关闭模态框
     closeDialog(bool) {
-      bool && this.search('form') // 点确定关闭弹窗的时候才会刷新列表
-      this.$refs['userForm'].resetFields()
-      this.basicDialog = false
+      bool && this.search("form"); // 点确定关闭弹窗的时候才会刷新列表
+      this.$refs["userForm"].resetFields();
+      this.basicDialog = false;
     },
     handleSizeChange(val) {
-      this.params.pageSize = val
-      this.queryByPage()
+      this.params.pageSize = val;
+      this.queryByPage();
     },
     handleCurrentChange(val) {
-      this.params.pageNumber = val
-      this.queryByPage()
+      this.params.pageNumber = val;
+      this.queryByPage();
     },
     // 提交
     UserConfirm() {
-      debugger
+      debugger;
       this.$refs.form.validate(async (valid, obj) => {
         if (valid) {
           if (this.dialogForm.id == undefined) {
-            const { code } = await addReport(this.dialogForm)
-            if (code != '200') return
+            const { code } = await addReport(this.dialogForm);
+            if (code != "200") return;
           } else {
-            const { code } = await editReport(this.dialogForm)
-            if (code != '200') return
+            const { code } = await editReport(this.dialogForm);
+            if (code != "200") return;
           }
-          this.closeDialog(true)
+          this.closeDialog(true);
         } else {
-          return
+          return;
         }
-      })
-    },
-  },
-}
+      });
+    }
+  }
+};
 </script>
 
 <style>
@@ -386,7 +497,4 @@ export default {
   height: 30%;
   display: block;
 }
-.query {
-  margin-top: 5px;
-}
 </style>
diff --git a/report-ui/src/views/report/resultset/index.vue b/report-ui/src/views/report/resultset/index.vue
index c7376ca4..3a4d9b64 100644
--- a/report-ui/src/views/report/resultset/index.vue
+++ b/report-ui/src/views/report/resultset/index.vue
@@ -256,15 +256,22 @@
                         </el-button>
                       </template>
                     </el-table-column>
-                     <el-table-column label="操作"
-                                     width="200">
+                    <el-table-column label="操作" width="200">
                       <template slot-scope="scope">
-                        <el-button type="text"
-                                   size="small"
-                                   @click.native.prevent="cutOutRow(scope.$index, tableData)">删除</el-button>
-                        <el-button type="text"
-                                   size="small"
-                                   @click="addRow(scope.row)">追加</el-button>
+                        <el-button
+                          type="text"
+                          size="small"
+                          @click.native.prevent="
+                            cutOutRow(scope.$index, tableData)
+                          "
+                          >删除</el-button
+                        >
+                        <el-button
+                          type="text"
+                          size="small"
+                          @click="addRow(scope.row)"
+                          >追加</el-button
+                        >
                       </template>
                     </el-table-column>
                   </el-table>
@@ -661,9 +668,9 @@ export default {
         order: "DESC",
         pageNumber: this.params.pageNumber,
         pageSize: this.params.pageSize,
-        setCode:this.query.setCode,
+        setCode: this.query.setCode,
         setName: this.query.setName
-      }
+      };
       const res = await dataSetPageList(params);
       if (res.code != "200") return;
       this.listLoading = true;
@@ -1176,7 +1183,4 @@ export default {
   overflow-y: auto;
   padding: 10px;
 }
-.query {
-  margin-top: 5px;
-}
 </style>