过滤器添加分页

src/api/defectManage.js

@@ -145,7 +145,7 @@ export function createFilter(data) {
 export function getFilterList(data) {
   return request({
     url: TeamManagement + '/bug/getFilterList',
-    method: 'get',
+    method: 'post',
     data
   })
 }

src/components/dialog/normalDialog.vue

@@ -11,8 +11,8 @@
     >
       <slot />
       <span v-show="showFooter" slot="footer" class="dialog-footer">
-        <el-button @click="cancel()">取 消</el-button>
-        <el-button type="primary" @click="confirm()">{{ submitButton }}</el-button>
+        <el-button size="mini" @click="cancel()">取 消</el-button>
+        <el-button type="primary" size="mini" @click="confirm()">{{ submitButton }}</el-button>
       </span>
     </el-dialog>
   </div>
@@ -75,15 +75,16 @@ export default {
 >>>.el-dialog__header {
   padding: 20px !important;
 }
-.el-dialog__title{
+>>>.el-dialog__title{
+  padding-left: 10px;
   position: relative;
 }
 >>>.el-dialog__title::before {
   content:" ";
   display: inline-block;
   position: absolute;
-  top: 22px;
-  left: 10px;
+  top: 2px;
+  left: 0;
   width: 5px;
   height: 20px;
   background-color: rgb(64, 158, 255);;

src/views/projectManage/bugList/bugindex.vue

@@ -908,7 +908,11 @@ export default {
       }
     },
     async getFilterList() { // 获取过滤器列表
-      const res = await getFilterList()
+      const params = {
+        pageSize: 10,
+        curIndex: 1
+      }
+      const res = await getFilterList(params)
       this.filterList = res.data
     },
     async getFilterItem(filterId) { // 获取单个过滤器

src/views/projectManage/bugList/details/filterList.vue

@@ -24,11 +24,11 @@
     <el-col :span="24">
       <div align="right">
         <el-pagination
-          :page-sizes="[15, 30, 45, total]"
-          :current-page="currentPage"
+          :page-sizes="[5, 10, 15, total]"
+          :current-page="curIndex"
           :page-size="pageSize"
           background
-          layout="total, sizes, prev, pager, next, jumper"
+          layout="total, prev, pager, next, jumper"
           :total="total"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
@@ -47,7 +47,7 @@ export default {
     return {
       filterList: [],
       total: 0,
-      currentPage: 1,
+      curIndex: 1,
       pageSize: 5
     }
   },
@@ -61,7 +61,10 @@ export default {
         curIndex: this.curIndex
       }
       const res = await getFilterList(params)
-      this.filterList = res.data
+      if (res.code === 200) {
+        this.total = res.total
+        this.filterList = res.data
+      }
     },
     async deleteFilter(item) {
       this.$confirm(`是否删除${item.name}?`, '提示', {

src/views/projectManage/bugList/details/index.vue

@@ -591,23 +591,25 @@
       <normal-dialog
         :show-dialog="showCopyFile"
         :title="'上传截图'"
-        :width="'50%'"
+        :width="'40%'"
         :submit-button="'上传'"
         :top="'5vh'"
         @confirm="confirmUpload()"
         @cancel="showCopyFile=false"
       >
         <div class="file-dialog">
-          <el-form ref="form" label-width="20%">
-            <el-form-item label="图片命名">
+          <el-form ref="imageForm" label-width="20%" :rules="imageRules" :model="imageName">
+            <el-form-item label="图片命名" prop="name">
               <el-col style="width: 75%">
-                <el-input v-model="imageName" />
+                <el-input v-model="imageName.name" placeholder="请输入图片名称" />
               </el-col>
               <el-col style="width: 10%">.png</el-col>
             </el-form-item>
           </el-form>
           <div class="image">
-            <img :src="imageUrl" class="image-url">
+            <div class="image-center">
+              <img :src="imageUrl" class="image-url">
+            </div>
           </div>
         </div>
       </normal-dialog>
@@ -750,9 +752,15 @@ export default {
         ]
       },
       showCopyFile: false, // 复制文件对话框
-      imageName: null,
+      imageName: { name: null },
       imageUrl: null,
-      uploadButton: this.drawerShow
+      uploadButton: this.drawerShow,
+      imageRules: {
+        name: [
+          { required: true, message: '请输入图片名称', trigger: 'blur' },
+          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
+        ]
+      }
     }
   },
   watch: {
@@ -1267,13 +1275,13 @@ export default {
           this.imageUrl = reader.result
           if (this.imageUrl.match(reg)) { // 判断是否是图片
             this.showCopyFile = true
-            this.imageName = this.generateMixed(10)
+            this.imageName.name = this.generateMixed(10)
           }
         }
       }
     },
     async confirmUpload() {
-      if (this.imageName === null || this.imageName.replace(/\s+/g, '') === '') {
+      if (this.imageName.name === null || this.imageName.name.replace(/\s+/g, '') === '') {
         this.$message({
           showClose: true,
           message: '请输入图片名称',
@@ -1282,7 +1290,7 @@ export default {
         return false
       }
       const isExist = this.fileList.some(item => {
-        return this.imageName === item.name
+        return this.imageName.name === item.name
       })
       if (isExist) {
         this.$message({
@@ -1296,7 +1304,7 @@ export default {
       const res = await this.updateFile(window.uploadFiles[0])
       const data = res.data
       const item = {
-        name: this.imageName || '',
+        name: this.imageName.name || '',
         status: 'success',
         url: 'http:' + data.url
       }
@@ -1309,7 +1317,7 @@ export default {
         type: 'success'
       })
       this.bugUpdate(this.bug, 'accessory')
-      this.imageName = null
+      this.imageName.name = null
       this.imageUrl = null
       window.uploadFiles = null
     },
@@ -1538,13 +1546,19 @@ export default {
     width: 61%;
     padding-top: 60%;
     border:1px solid #409EFF;
-    .image-url {
+    border-radius: 4px;
+    .image-center {
       position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%,-50%);
+      top: 0;
+      left: 0;
       width: 100%;
-      max-height: 100%;
+      height: 100%;
+      overflow-x: hidden;
+      display: flex;
+      justify-content: center;
+    }
+    .image-url {
+      height: 100%;
     }
   }
 }

src/views/projectManage/bugList/file/createdBug.vue

@@ -182,16 +182,18 @@
       @cancel="showCopyFile=false"
     >
       <div class="file-dialog">
-        <el-form ref="form" label-width="20%">
-          <el-form-item label="图片命名">
+        <el-form ref="imageForm" label-width="20%" :rules="imageRules" :model="imageName">
+          <el-form-item label="图片命名" prop="name">
             <el-col style="width: 75%">
-              <el-input v-model="imageName" />
+              <el-input v-model="imageName.name" placeholder="请输入图片名称" />
             </el-col>
             <el-col style="width: 10%">.png</el-col>
           </el-form-item>
         </el-form>
         <div class="image">
-          <img :src="imageUrl" class="image-url">
+          <div class="image-center">
+            <img :src="imageUrl" class="image-url">
+          </div>
         </div>
       </div>
     </normal-dialog>
@@ -287,11 +289,17 @@ export default {
       networkTypeEnumList: [], // 网络
       sysTypeEnumList: [], // 端类型
       showCopyFile: false, // 复制文件对话框
-      imageName: null,
+      imageName: { name: null },
       imageUrl: null,
       editr: false,
       formData: [],
-      formData1: []
+      formData1: [],
+      imageRules: {
+        name: [
+          { required: true, message: '请输入图片名称', trigger: 'blur' },
+          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
+        ]
+      }
     }
   },
   created() {
@@ -520,14 +528,14 @@ export default {
           this.imageUrl = reader.result
           if (this.imageUrl.match(reg)) { // 判断是否是图片
             this.showCopyFile = true
-            this.imageName = this.generateMixed(10)
+            this.imageName.name = this.generateMixed(10)
           }
         }
         this.showCopyFile = true
       }
     },
     async confirmUpload() {
-      if (this.imageName === null || this.imageName.replace(/\s+/g, '') === '') {
+      if (this.imageName.name === null || this.imageName.name.replace(/\s+/g, '') === '') {
         this.$message({
           showClose: true,
           message: '请输入图片名称',
@@ -536,7 +544,7 @@ export default {
         return false
       }
       const isExist = this.fileList.some(item => {
-        return this.imageName === item.name
+        return this.imageName.name === item.name
       })
       if (isExist) {
         this.$message({
@@ -550,7 +558,7 @@ export default {
       const res = await this.updateFile(window.uploadFiles[0])
       const data = res.data
       const item = {
-        name: this.imageName || '',
+        name: this.imageName.name || '',
         status: 'success',
         url: 'http:' + data.url
       }
@@ -562,7 +570,7 @@ export default {
         message: '文件上传成功',
         type: 'success'
       })
-      this.imageName = null
+      this.imageName.name = null
       this.imageUrl = null
       window.uploadFiles = null
     },
@@ -600,13 +608,19 @@ export default {
     width: 61%;
     padding-top: 60%;
     border:1px solid #409EFF;
-    .image-url {
+    border-radius: 4px;
+    .image-center {
       position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%,-50%);
+      top: 0;
+      left: 0;
       width: 100%;
-      max-height: 100%;
+      height: 100%;
+      overflow-x: hidden;
+      display: flex;
+      justify-content: center;
+    }
+    .image-url {
+      height: 100%;
     }
   }
 }