大屏

src/views/bigScreenReport/components/addReportPage.vue

@@ -1,17 +1,17 @@
 <template>
-    <el-dialog title="新增大屏" :visible.sync="dialogVisible" width="30%" @close="close">
+    <el-dialog :title="FormTitle" :visible.sync="dialogVisible" width="30%" @close="close">
         <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="form">
             <el-row :gutter="20" style="margin-top: 40px;margin-bottom: 60px;">
-                <el-col :span="24" style="margin-bottom: 40px;">
+                <el-col :span="24" style="margin-top: 40px;">
                     <el-form-item label="大屏名称" prop="reportName">
                         <el-input v-model="ruleForm.reportName" placeholder="请输入大屏名称" />
                     </el-form-item>
                 </el-col>
-                <el-col :span="24">
+                <!-- <el-col :span="24">
                     <el-form-item label="大屏编码" prop="reportCode">
                         <el-input v-model="ruleForm.reportCode" placeholder="请输入唯一编码" />
                     </el-form-item>
-                </el-col>
+                </el-col> -->
             </el-row>
         </el-form>
         <span slot="footer" class="dialog-footer">
@@ -22,9 +22,24 @@
 </template>
 
 <script>
-import { addReport } from "@/api/report";
+import { addReport, editReport } from "@/api/report";
 export default {
     name: 'addReportPage',
+    props: {
+        item: {
+            type: Object,
+            default: () => {
+                return {}
+            }
+        }
+    },
+    mounted() {
+       if(this.item.reportCode == undefined || this.item.reportCode == ''){
+           this.FormTitle = '新增大屏'
+       }else{
+           this.FormTitle = '修改大屏'
+       }
+    },
     data() {
         return {
             newProductName: '',
@@ -36,13 +51,14 @@ export default {
                 protocolName: '',
                 remark: ''
             },
+            FormTitle: '',
             rules: {
                 reportName: [
                     { required: true, message: '请输入大屏名称', trigger: 'blur' }
                 ],
-                reportCode: [
+                // reportCode: [
-                    { required: true, message: '请输入大屏编码', trigger: 'blur' }
+                //     { required: true, message: '请输入大屏编码', trigger: 'blur' }
-                ]
+                // ]
             }
         }
     },
@@ -54,14 +70,16 @@ export default {
         // 提交表单
         submitForm() {
             this.$refs['ruleForm'].validate(valid => {
+                console.log(this.item.reportCode)
                 if (valid) {
+                    if (this.item.reportCode == undefined || this.item.reportCode == '') {
                         let obj = {
-                        reportCode: this.ruleForm.reportCode,
+                            reportCode: Math.random().toString(36).substr(2, 9) + Date.now(),
                             reportGroup: "default",
                             reportName: this.ruleForm.reportName,
                             reportType: "report_screen"
                         }
-                    console.log(obj)
+                        console.log(1, obj)
                         addReport(obj).then(res => {
                             if (res.code == 200) {
                                 this.$notify({
@@ -73,6 +91,22 @@ export default {
                             }
                         })
                     }
+                    else {
+                        console.log(this.item.reportCode)
+                        this.item.reportName = this.ruleForm.reportName
+                        console.log(2, this.item)
+                        editReport(this.item).then(res => {
+                            if (res.code == 200) {
+                                this.$notify({
+                                    title: '成功',
+                                    message: '修改成功!',
+                                    type: 'success'
+                                })
+                                this.close()
+                            }
+                        })
+                    }
+                }
             })
         }
     }
@@ -96,4 +130,3 @@ export default {
     padding-top: 10px;
 }
 </style>
-  

src/views/bigScreenReport/index.vue

@@ -15,11 +15,6 @@
             <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>
@@ -27,6 +22,7 @@
         </el-col>
       </el-row>
     </el-form>
+
     <div class="center">
       <el-row :gutter="20">
         <el-col v-for="item in list" :key="item.id" :span="6">
@@ -36,12 +32,18 @@
           : item.reportImage
           " alt="" />
             <div class="content">
-              <header>{{ item.reportName }}</header>
+              <header>
+                {{ item.reportName }}
+              </header>
+              <div style="text-align: center;">
+                <el-button icon="el-icon-edit-outline" @click="addReport(item)" style="font-size: 15px;color:white;"
+                  type="text">修改</el-button>
+              </div>
               <footer>
                 <div class="operation">
-                  <el-button icon="el-icon-delete" class="delete" type="text" @click="deleteReport(item)" />
+                  <el-button icon="el-icon-delete" class="delete" type="text" @click="deleteReport(item)">删除</el-button>
-                  <el-button icon="el-icon-view" class="view" type="text" @click="viewDesign(item)" />
+                  <el-button icon="el-icon-view" class="view" type="text" @click="viewDesign(item)">查看</el-button>
-                  <el-button icon="el-icon-edit" class="edit" type="text" @click="openDesign(item)" />
+                  <el-button icon="el-icon-edit" class="edit" type="text" @click="openDesign(item)">编辑</el-button>
                 </div>
               </footer>
             </div>
@@ -54,7 +56,7 @@
           @size-change="handleSizeChange" @current-change="handleCurrentChange" />
       </div>
     </div>
-    <addReportPage v-if="addVisible" @close="reportClose" />
+    <addReportPage v-if="addVisible" :item="currentItem" @close="reportClose" />
   </div>
 </template>
 
@@ -83,6 +85,7 @@ export default {
         sort: "update_time"
       },
       addVisible: false,
+      currentItem: null, // 用于保存当前的item数据
     };
   },
   created() {
@@ -102,7 +105,8 @@ export default {
       });
     },
     // 新增
-    addReport() {
+    addReport(item) {
+      this.currentItem = item; // 保存当前的item数据
       this.addVisible = true;
     },
     // 关闭表单的回调
@@ -238,17 +242,17 @@ export default {
   header {
     font-size: 32px;
     text-align: center;
-    line-height: 80px;
+    margin-top: 40px;
   }
 
   .center {
-    margin-top: 20px;
+    margin-top: 10px;
     min-height: 400px;
     height: 100%;
 
     .bg {
       width: 100%;
-      height: 300px;
+      height: 250px;
       position: relative;
       overflow: hidden;
       margin: 10px 0;
@@ -259,6 +263,7 @@ export default {
       position: absolute;
       width: 100%;
       height: 100%;
+      background-size: cover;
       filter: blur(6px);
       z-index: 2;
     }