过滤添加编辑

src/api/defectManage.js

@@ -150,6 +150,15 @@ export function getFilterList(data) {
   })
 }
 
+// 更新过滤器
+export function updateFilter(data) {
+  return request({
+    url: TeamManagement + '/bug/updateFilter',
+    method: 'post',
+    data
+  })
+}
+
 // 获取过滤器
 export function getFilterItem(id) {
   return request({

src/views/projectManage/bugList/bugindex.vue

@@ -374,7 +374,7 @@
           </el-col>
           <el-row type="flex" justify="space-between" class="filter">
             <el-col :span="12" class="mine-filter">
-              <span>我的过滤器：</span>
+              <span v-if="filterList.length && filterList.length>0">我的过滤器：</span>
               <span v-for="item in filterList" :key="item.id" class="filter-item" @click="getFilterItem(item.id)">
                 <el-tooltip class="item" effect="dark" :content="item.name" placement="bottom">
                   <span>{{ item.name }}</span>

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

@@ -3,13 +3,32 @@
     <el-table
       :data="filterList"
       style="width: 100%"
+      height="288"
       :header-cell-style="{background:'#EBEEF5'}"
     >
       <el-table-column
         fixed
         prop="name"
         label="过滤器名称"
-      />
+      >
+        <template slot-scope="scope">
+          <el-row>
+            <el-col v-if="scope.row.showEdit" :span="8">
+              <el-input
+                v-model="filterList[scope.row.index].name"
+                size="mini"
+                placeholder="请输入过滤器名称"
+                @keyup.enter.native="updateFilter(scope.row)"
+              />
+            </el-col>
+            <el-col v-if="scope.row.showEdit" :span="2"><i class="el-icon-edit" @click.stop="cancel(scope.row)" /></el-col>
+            <el-col v-if="!scope.row.showEdit" :span="8">
+              <span>{{ scope.row.name }}</span>
+              <i class="el-icon-edit" @click.stop="editFilter(scope.row)" />
+            </el-col>
+          </el-row>
+        </template>
+      </el-table-column>
       <el-table-column
         fixed="right"
         align="center"
@@ -40,15 +59,20 @@
 <script>
 import {
   getFilterList,
-  deleteFilter
+  deleteFilter,
+  updateFilter
 } from '@/api/defectManage'
+import { deepClone } from '@/utils/global'
 export default {
   data() {
     return {
       filterList: [],
+      copyFilterList: [],
       total: 0,
       curIndex: 1,
-      pageSize: 5
+      pageSize: 5,
+      showEdit: false,
+      filterName: '' // 当前修改的过滤器名称
     }
   },
   created() {
@@ -63,9 +87,21 @@ export default {
       const res = await getFilterList(params)
       if (res.code === 200) {
         this.total = res.total
-        this.filterList = res.data
+        this.filterList = res.data.map((item, key) => {
+          item.showEdit = false
+          item.index = key
+          return item
+        })
+        this.copyFilterList = deepClone(this.filterList)
       }
     },
+    editFilter(e) {
+      this.$set(this.filterList[e.index], 'showEdit', true)
+    },
+    cancel(e) {
+      this.$set(this.filterList[e.index], 'showEdit', false)
+      this.$set(this.filterList[e.index], 'name', this.copyFilterList[e.index].name)
+    },
     async deleteFilter(item) {
       this.$confirm(`是否删除${item.name}?`, '提示', {
         confirmButtonText: '确定',
@@ -83,6 +119,25 @@ export default {
       }
       this.getFilterList()
     },
+    async updateFilter(e) {
+      if (e.name === null || e.name.replace(/\s+/g, '') === '') {
+        this.$message({
+          showClose: true,
+          message: '请填写名称',
+          type: 'error'
+        })
+        return false
+      }
+      const res = await updateFilter({ id: e.id, name: e.name })
+      if (res.code === 200) {
+        this.$message({
+          showClose: true,
+          message: '名称成功',
+          type: 'success'
+        })
+      }
+      this.$set(this.filterList[e.index], 'showEdit', false)
+    },
     handleSizeChange(e) {
       this.pageSize = e
     },
@@ -94,7 +149,7 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.el-icon-delete {
-  color: #F56C6C
+.el-icon-edit {
+  margin-left: 10px;
 }
 </style>

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

@@ -1282,11 +1282,6 @@ export default {
     },
     async confirmUpload() {
       if (this.imageName.name === null || this.imageName.name.replace(/\s+/g, '') === '') {
-        this.$message({
-          showClose: true,
-          message: '请输入图片名称',
-          type: 'error'
-        })
         return false
       }
       const isExist = this.fileList.some(item => {
@@ -1548,6 +1543,7 @@ export default {
     border:1px solid #409EFF;
     border-radius: 4px;
     .image-center {
+      padding: 1%;
       position: absolute;
       top: 0;
       left: 0;

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

@@ -175,7 +175,7 @@
     <normal-dialog
       :show-dialog="showCopyFile"
       :title="'上传截图'"
-      :width="'50%'"
+      :width="'40%'"
       :submit-button="'上传'"
       :top="'5vh'"
       @confirm="confirmUpload()"
@@ -536,11 +536,6 @@ export default {
     },
     async confirmUpload() {
       if (this.imageName.name === null || this.imageName.name.replace(/\s+/g, '') === '') {
-        this.$message({
-          showClose: true,
-          message: '请输入图片名称',
-          type: 'error'
-        })
         return false
       }
       const isExist = this.fileList.some(item => {
@@ -610,6 +605,7 @@ export default {
     border:1px solid #409EFF;
     border-radius: 4px;
     .image-center {
+      padding: 1%;
       position: absolute;
       top: 0;
       left: 0;