Update index.vue

report-ui/src/views/report/report/index.vue

@@ -6,29 +6,17 @@
  !-->
 <template>
   <div class="app-container">
-    <el-form ref="form" :model="params" :rules="rules" label-width="120px">
+    <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"
@@ -44,38 +32,16 @@
           </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()"
-      >新增</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}}
@@ -96,43 +62,19 @@
       <el-table-column prop="updateTime" label="更新时间" />
       <el-table-column label="操作" width="200px" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="preview(scope.row)">预览</el-button>
-          <el-button type="text" @click="design(scope.row)">设计</el-button>
-          <el-button type="text" @click="showAddReportModel(scope.row)"
-            >编辑</el-button
-          >
-          <el-button type="text" @click="del(scope.row)">删除</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"
@@ -157,10 +99,7 @@
           </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>
@@ -184,33 +123,17 @@
         </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>
@@ -225,48 +148,48 @@
 </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";
-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'
+var typeData
 export default {
-  name: "Report",
+  name: 'Report',
   components: { Dictionary },
   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,
@@ -277,154 +200,154 @@ 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(),
+      },
+    }
   },
 
   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
       }
     },
     // 预览
     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>