缺陷主页面封装

src/views/projectManage/bugList/bugindex.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-container class="bgColor">
-      <el-header v-if="type === 'page'" style="height: auto; margin-top: 1%; padding: 0 1%;">
+      <el-header style="height: auto; margin-top: 10px; padding: 0 10px;">
         <el-row class="headerBg">
           <div class="Layout_space_between">
             <div class="public_themeName">缺陷</div>
@@ -77,96 +77,15 @@
                   <div style="margin: 1.5% 0;" class="flex_start">
                     <div class="Layout">
                       <div class="queryName">提报人</div>
-                      <el-select
-                        v-model="formInline.creator"
-                        filterable
-                        clearable
-                        remote
-                        :remote-method="remoteMethod"
-                        :loading="loading"
-                        size="small"
-                        placeholder="请输入姓名或邮箱前缀"
-                        @change="changeSelect()"
-                      >
-                        <el-option
-                          v-for="item in options"
-                          :key="item.idap"
-                          :label="item.name"
-                          :value="test2(item, 0)"
-                        >
-                          <div style="display: flex;justify-content: start;">
-                            <div
-                              style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden"
-                            >{{ item.deptName }}</div>
-                            <div style="min-width:80px">{{ item.name }}</div>
-                            <div
-                              style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden"
-                            >{{ item.idap }}</div>
-                          </div>
-                        </el-option>
-                      </el-select>
+                      <searchPeople :value.sync="formInline.creator" />
                     </div>
                     <div class="Layout marginLeft">
                       <div class="queryName">责任人</div>
-                      <el-select
-                        v-model="formInline.assigner"
-                        filterable
-                        clearable
-                        remote
-                        :remote-method="remoteMethod"
-                        :loading="loading"
-                        size="small"
-                        placeholder="请输入姓名或邮箱前缀"
-                        @change="changeSelect()"
-                      >
-                        <el-option
-                          v-for="item in options"
-                          :key="item.idap"
-                          :label="item.name"
-                          :value="test2(item, 0)"
-                        >
-                          <div style="display: flex;justify-content: start;">
-                            <div
-                              style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden"
-                            >{{ item.deptName }}</div>
-                            <div style="min-width:80px">{{ item.name }}</div>
-                            <div
-                              style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden"
-                            >{{ item.idap }}</div>
-                          </div>
-                        </el-option>
-                      </el-select>
+                      <searchPeople :value.sync="formInline.assigner" />
                     </div>
                     <div class="Layout marginLeft">
                       <div class="queryName">修复人</div>
-                      <el-select
-                        v-model="formInline.currentHandler"
-                        filterable
-                        clearable
-                        remote
-                        :remote-method="remoteMethod"
-                        :loading="loading"
-                        size="small"
-                        placeholder="请输入姓名或邮箱前缀"
-                        @change="changeSelect()"
-                      >
-                        <el-option
-                          v-for="item in options"
-                          :key="item.idap"
-                          :label="item.name"
-                          :value="test2(item, 0)"
-                        >
-                          <div style="display: flex;justify-content: start;">
-                            <div
-                              style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden"
-                            >{{ item.deptName }}</div>
-                            <div style="min-width:80px">{{ item.name }}</div>
-                            <div
-                              style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden"
-                            >{{ item.idap }}</div>
-                          </div>
-                        </el-option>
-                      </el-select>
+                      <searchPeople :value.sync="formInline.currentHandler" />
                     </div>
                   </div>
                   <div style="margin: 1.5% 0;" class="flex_start">
@@ -346,141 +265,15 @@
           </el-row>
         </el-row>
       </el-header>
-      <el-main :style="type === 'page'?{padding: '1%'}:{padding: '0'}">
+      <el-main style="padding: 10px">
         <el-row class="headerBg table_v" style=" padding-top: 0px;">
-          <el-col :span="24" style="min-height: 47vh;">
-            <div v-if="type !== 'page'" style="position: relative;top: 5px;right: 10px">
-              <el-divider />
-            </div>
-            <el-table
-              :key="Math.random()"
-              size="small"
-              :data="tableData"
-              style="width: 100%; font-size: 14px; color:rgba(102,102,102,1);"
-              show-overflow-tooltip="true"
-              :header-cell-style="{ color: '#4A4A4A', fontSize: '14px', fontWeight: '500' }"
-            >
-              <el-table-column label="优先级" prop="priorityCode" min-width="100" sortable align="center">
-                <template slot-scope="scope" style="text-align: center;">
-                  <span class="div_priority" :class="[{'high': scope.row.priorityLevel === 'High'},{'medium': scope.row.priorityLevel === 'Medium'},{'low': scope.row.priorityLevel === 'Low'}]">
-                    {{ scope.row.priorityLevel | oneA }}
-                  </span>
-                </template>
-              </el-table-column>
-              <el-table-column
-                prop="bugName"
-                label="缺陷标题"
-                min-width="360"
-                align="left"
-                show-overflow-tooltip
-              >
-                <template slot-scope="scope">
-                  <span style=" color: #A7AEBC; font-size: 10px;">{{ 'BUG-' + scope.row.id }}</span>
-                  <br>
-                  <span
-                    class="bugNameSty"
-                    @click.stop="click_bugName(scope.row.id)"
-                  >{{ scope.row.bugName }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="priorityName" label="缺陷等级" align="center" />
-              <el-table-column prop="bugStatusName" label="状态" min-width="110" align="center">
-                <template slot-scope="scope">
-                  <el-select
-                    v-model="scope.row.status"
-                    :class="{
-                      'status_color': scope.row.status === 0,
-                      'status_color2': scope.row.status === 3,
-                      'status_color5': scope.row.status === 2,
-                      'status_color1': scope.row.status === 4,
-                      'status_color3': scope.row.status === 5
-                    }"
-                    class="btns"
-                    size="mini"
-                    @change="blurEvent(scope.row, scope.row.status)"
-                  >
-                    <el-option v-for="item in bugStatusList(scope.row.status)" :key="item.code" :label="item.name" :value="item.code" />
-                  </el-select>
-                </template>
-              </el-table-column>
-              <el-table-column prop="taskName" label="所属任务" align="center" min-width="250" show-overflow-tooltip />
-              <el-table-column prop="creatorList" label="提报人" align="center" />
-              <el-table-column prop="assignerList" label="责任人" min-width="150" align="center" show-overflow-tooltip />
-              <el-table-column prop="currentHandlerList" label="修复人" min-width="150" align="center" show-overflow-tooltip />
-              <el-table-column prop="gmtCreate" label="创建日期" min-width="120" align="center">
-                <template slot-scope="scope">{{ scope.row.gmtCreate | naspOut }}</template>
-              </el-table-column>
-            </el-table>
-          </el-col>
-          <el-col :span="24">
-            <el-button v-if="type !== 'list'" type="primary" size="mini" class="download" @click="download">导出</el-button>
-            <div align="right">
-              <el-pagination
-                :page-sizes="[15, 30, 45, total]"
-                :current-page="curIndex"
-                :page-size="pageSize"
-                background
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="total"
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-              />
-            </div>
-          </el-col>
+          <!-- bug表 -->
+          <bugTableDialog ref="bugTableDialog" @curIndexs="curIndexs" />
+          <el-button type="primary" size="mini" class="download" @click="download">导出</el-button>
         </el-row>
       </el-main>
     </el-container>
     <createdBug v-show="modalShow" ref="createdBug" :get-bug-list="getBugList" />
-    <el-drawer :visible.sync="drawerShow" :modal="false" :with-header="false" size="50%" class="bug_manage_drawer" @click.stop>
-      <div @click.stop>
-        <bug-details
-          :id="bugQuery.id+''"
-          ref="bugDetails"
-          :type="'drawer'"
-          :drawer-show="drawerShow"
-          @close="drawerShow = false"
-          @delete="drawerShow = false;type === 'page'?getBugList():getBugSelfList()"
-          @update="type === 'page'?getBugList():getBugSelfList()"
-        />
-      </div>
-    </el-drawer>
-    <el-dialog
-      v-if="statusDialogVisible"
-      :visible.sync="statusDialogVisible"
-      width="30%"
-      :title="statusDialogTitle"
-      class="public_task"
-      :append-to-body="true"
-      :close-on-click-modal="false"
-      @close="modalClose"
-    >
-      <div class="blueStripe" />
-      <el-form ref="statusDialogForm" label-width="110px" label-position="left" :model="statusDialogForm" :rules="rules">
-        <el-form-item v-if="statusDialogTitle === '待测试' || statusDialogTitle === '已完成'" label="修复结果" prop="repairResult" class="bug_manage_dialog">
-          <el-select v-model="statusDialogForm.repairResult" style="width: 100%" @change="modifyResult(statusDialogForm.repairResult)">
-            <el-option v-for="item in repairResultEnumList" :key="item.code" :label="item.name" :value="item.code" />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="statusDialogTitle === '待测试' || statusDialogTitle === '已完成'" label="缺陷原因" prop="bugReason" class="bug_manage_dialog">
-          <el-select v-model="statusDialogForm.bugReason" style="width: 100%">
-            <el-option v-for="item in bugReasonEnumList" :key="item.code" :label="item.name" :value="item.code" />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="statusDialogTitle === '待测试'" label="修复方式" class="bug_manage_dialog bug_manage_dialog_fixMethod">
-          <el-input v-model="statusDialogForm.reasonOrDesc" type="textarea" placeholder="请输入具体原因，得出结论的过程，具体修复过程或方式" maxlength="300" show-word-limit rows="4" />
-        </el-form-item>
-        <el-form-item v-if="statusDialogTitle === 'Reopen'" label="Reopen原因" prop="reasonOrDesc" class="bug_manage_dialog">
-          <el-input v-model="statusDialogForm.reasonOrDesc" type="textarea" placeholder="请输入Reopen" maxlength="300" show-word-limit rows="4" />
-        </el-form-item>
-        <el-form-item v-if="statusDialogTitle === 'Hold'" label="Hold原因" prop="reasonOrDesc" class="bug_manage_dialog">
-          <el-input v-model="statusDialogForm.reasonOrDesc" type="textarea" maxlength="300" show-word-limit rows="4" />
-        </el-form-item>
-      </el-form>
-      <template v-slot:footer>
-        <el-button size="small" @click="getBugList(),statusDialogVisible = false">取 消</el-button>
-        <el-button size="small" type="primary" @click="statusDialogConfirm">确 定</el-button>
-      </template>
-    </el-dialog>
     <normal-dialog :show-dialog="showSaveSearch" :title="'保存筛选项'" :width="'35%'" @confirm="saveSearch('searchForm')" @cancel="showSaveSearch=false">
       <div v-if="showSaveSearch" class="file-dialog">
         <el-form ref="searchForm" :model="searchForm" :rules="searchFormRules" label-width="100px">
@@ -497,17 +290,15 @@
 </template>
 
 <script>
-import BugDetails from './details/index'
+import bugTableDialog from '@/views/projectManage/bugList/details/bugTableDialog'
 import createdBug from '@/views/projectManage/bugList/file/createdBug'
 import normalDialog from '@/components/dialog/normalDialog'
 import filterList from '@/views/projectManage/bugList/details/filterList'
 import { deepClone } from '@/utils/global'
+import searchPeople from '@/components/select/searchPeople' // 人员select
 import '@/styles/PublicStyle/index.scss'
 import {
-  bugList,
-  bugSelfList,
   bugGetEnum,
-  bugUpdate,
   settingGetBizList,
   taskListCreate,
   releaseList,
@@ -517,32 +308,14 @@ import {
   getFilterList,
   getFilterItem
 } from '@/api/defectManage'
-import { memberQueryMemberInfoByIDAPorName } from '@/api/projectIndex'
 import '@/views/projectManage/bugList/css/index.css'
 export default {
   components: {
     createdBug,
-    BugDetails,
     normalDialog,
-    filterList
-  },
-  filters: {
-    oneA(value) {
-      if (!value) return ''
-      var da = value.substring(0, 1)
-      return da
-    },
-    naspOut(value) {
-      if (!value) return ''
-      var da = value.split(/\s+/)
-      return da[0]
-    }
-  },
-  props: {
-    type: {
-      type: String,
-      default: 'page'
-    }
+    filterList,
+    bugTableDialog,
+    searchPeople
   },
   data() {
     return {
@@ -573,20 +346,9 @@ export default {
           }
         }]
       },
-      rules: {
-        bugReason: [{ required: true, message: '请选择缺陷原因', trigger: ['blur', 'change'] }],
-        repairResult: [{ required: true, message: '请选择修复结果', trigger: ['blur', 'change'] }],
-        reasonOrDesc: [{ required: true, message: '请输入Reopen原因', trigger: ['blur', 'change'] }]
-      },
-      statusDialogForm: {
-        repairResult: 1
-      },
       bugListType: 2,
       props: { multiple: true },
       reopens: [{ code: 1, name: '是' }, { code: 0, name: '否' }],
-      userData: { id: '', ename: localStorage.getItem('username'), name: localStorage.getItem('realname') },
-      statusDialogTitle: '',
-      statusDialogVisible: false,
       DetailedScreening: false, // 高级筛选
       bugEnumList: [], // bug状态
       bugDevRepairTimeList: [], // 开发修复时长
@@ -601,31 +363,22 @@ export default {
       priorityLevelEnumList: [], // 优先级
       discoveryMethEnumList: [], // 发现方式
       bugStageEnumList: [], // 发现阶段
-      bugReasonEnumList: [], // 缺陷原因
       sysTypeEnumList: [], // 端类型
-      bugQuery: '', // bug详情
       business_platform_Modular: [], // 所属模块
       bugQueryModel: '',
       fileList: [], // 储存附件
       commentTxt: [],
       pageSize: 15,
       curIndex: 1,
-      total: 0,
       goodName: '更多筛选',
       modalShow: false, // 弹窗（新建）
-      drawerShow: false, // drawer展示
       taskIdStr: [],
       formInline: {}, // list
       stratAndEnd: [], // 创建日期
       tableData: [],
       dialogVisible: false,
-      loading: false,
-      options: [],
-      test: [], // 人员查询
       dialogImageUrl: '',
       isBugNameClick: false,
-      staData: {},
-      statusId: '',
       showSaveSearch: false, // 显示保存筛选项对话框
       showEditSearch: false, // 显示管理过滤器
       searchForm: { name: null }, // 筛选项obj
@@ -634,18 +387,8 @@ export default {
         { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
       ] },
       filterList: [], // 筛选器列表
-      filterDetail: null // 筛选器详情
-    }
-  },
-  computed: {
-    clickCount() {
-      return this.$store.state.app.clickCount
-    }
-  },
-  watch: {
-    clickCount(newVal, oldVal) {
-      this.drawerShow = false
-      // this.$store.state.data.bizId = false
+      filterDetail: null, // 筛选器详情
+      indexPage: {}
     }
   },
   created() {
@@ -655,14 +398,8 @@ export default {
     if (this.$route.query.filterId) {
       this.getFilterItem(this.$route.query.filterId)
     }
-    this.tableData = []
-    if (this.type === 'page') {
-      this.getBugList()
-    } else {
-      this.getBugSelfList(2, 10)
-    }
-    this.bugListSelect()
-    this.getFilterList()
+    this.bugListSelect() // 获取下拉option
+    this.getFilterList() // 筛选项保存
     this.$store.state.data.status = true
   },
   destroyed() {
@@ -679,7 +416,7 @@ export default {
         this.$router.push({ path: this.$route.path })
       }
     },
-    async getBugList() {
+    getBugList() { // 查询功能
       this.$forceUpdate()
       if (!this.stratAndEnd) {
         this.stratAndEnd = []
@@ -687,133 +424,14 @@ export default {
       this.formInline.createStartTime = this.stratAndEnd[0] || null
       this.formInline.createEndTime = this.stratAndEnd[1] || null
       this.indexPage = this.formInline
-      this.indexPage.bizId = Number(localStorage.getItem('bizId'))
-      this.indexPage.pageSize = this.pageSize
-      this.indexPage.curIndex = this.curIndex
-      const res = await bugList(this.indexPage)
-      if (res.code === 200) {
-        this.tableData = res.data.map(item => {
-          return { ...item, isSelected: false }
-        })
-        this.total = res.total
-      }
-    },
-    getBugSelfList(type, pageSize) {
-      if (type) {
-        this.bugListType = type
-      }
-      if (pageSize) {
-        this.pageSize = pageSize
-      }
-      bugSelfList({
-        type: this.bugListType,
-        pageSize: this.pageSize,
-        curIndex: this.curIndex
-      }).then(res => {
-        if (res.code === 200) {
-          this.tableData = res.data.map(item => {
-            return { ...item, isSelected: false }
-          })
-          this.total = res.total
-          this.tableData.map(item1 => {
-            this.priorityLevelEnumList.map(item => {
-              item1.priorityLevel !== null
-                ? item1.priorityLevel === item.name
-                  ? (item1.priorityCode = item.code)
-                  : ''
-                : ''
-            })
-          })
-        }
-      })
-    },
-    modalClose() {
-      this.getBugList()
-    },
-    blurEvent(row, status) {
-      this.staData = row
-      this.statusId = status
-      if (status === 0) {
-        row.status = status
-        const objData = { bugBaseInfo: row, user: this.userData }
-        bugUpdate(objData).then(res => {
-          row.isSelected = !row.isSelected
-          this.$message({ message: res.msg, type: res.msg })
-        })
-        return
-      }
-      let data = ''
-      this.bugEnumList.map(item => {
-        item.code === status ? data = item.name : ''
-      })
-      this.statusDialogTitle = data
-      this.statusDialogForm = {}
-      if (status === 2) {
-        this.$set(this.statusDialogForm, 'repairResult', 1)
-      }
-      if (status === 3) {
-        this.$set(this.statusDialogForm, 'repairResult', row.repairResult)
-        this.$set(this.statusDialogForm, 'bugReason', row.bugReason)
-      }
-      this.statusDialogVisible = true
-    },
-    modifyResult(val) { // 修复结果
-      switch (val) {
-        case 9:
-          this.$set(this.statusDialogForm, 'bugReason', 9)
-          break
-        case 11:
-          this.$set(this.statusDialogForm, 'bugReason', 11)
-          break
-        case 2:
-          this.$set(this.statusDialogForm, 'bugReason', 10)
-          break
-        case 3:
-          this.$set(this.statusDialogForm, 'bugReason', 12)
-          break
-        default: this.$set(this.statusDialogForm, 'bugReason', '')
-          break
-      }
-    },
-    statusDialogConfirm() { // 点击确定 验证 修改
-      this.$refs.statusDialogForm.validate((valid) => {
-        if (valid) {
-          this.staData.status = this.statusCode
-          this.staData.reasonOrDesc = this.statusDialogForm.reasonOrDesc
-          this.staData.repairResult = this.statusDialogForm.repairResult
-          this.staData.bugReason = this.statusDialogForm.bugReason
-          const objData = { bugBaseInfo: this.staData, user: this.userData }
-          alert()
-          bugUpdate(objData).then(res => {
-            if (res.code === 200) {
-              this.statusDialogVisible = false
-              this.statusDialogForm = {}
-            } else if (res.code !== 200) {
-              this.getBugList()
-            }
-            this.$message({ message: res.msg, type: res.msg })
-          })
-        }
-      })
+      this.$refs.bugTableDialog.bugGetTableList(this.formInline)
     },
-    postDialogForm() {
-      this.staData.status = this.statusId
-      this.staData.reasonOrDesc = this.statusDialogForm.reasonOrDesc
-      this.staData.repairResult = this.statusDialogForm.repairResult
-      this.staData.bugReason = this.statusDialogForm.bugReason
-      const objData = { bugBaseInfo: this.staData, user: this.userData }
-      bugUpdate(objData).then(res => {
-        if (res.code === 200) {
-          this.statusDialogVisible = false
-          this.statusDialogForm = {}
-          this.$message({ message: res.msg, type: res.msg })
-        } else if (res.code !== 200) {
-          this.$message({ message: res.msg, type: res.msg })
-          this.getBugList()
-        }
-      })
+    curIndexs(e) { // 返回查询和分页  导出功能使用
+      this.indexPage.bizId = e.bizId
+      this.indexPage.pageSize = e.pageSize
+      this.indexPage.curIndex = e.curIndex
     },
-    resetQuery() {
+    resetQuery() { // 重置
       this.$router.push({ path: this.$route.path })
       this.stratAndEnd = []
       let combination = {}
@@ -825,7 +443,7 @@ export default {
       this.curIndex = 1
       this.getBugList()
     },
-    getClient(e) {
+    getClient(e) { // 客户端点击展示版本
       this.$forceUpdate()
       this.$set(this.formInline, 'appVersion', '')
       const newArr = this.appClient.filter(
@@ -835,73 +453,20 @@ export default {
         this.Editionlist = newArr[0].childEnumInfos
       }
     },
-    test2(item, e) {
-      // 获取团队人员信息
-      if (typeof this.test[item.idap] === 'undefined') {
-        item.role = e
-        this.test[item.idap] = item
-      }
-      return item.idap
-    },
-    remoteMethod(query) {
-      // 人员查询
-      if (query !== '') {
-        this.loading = true
-        setTimeout(() => {
-          this.loading = false
-          memberQueryMemberInfoByIDAPorName({ memberIDAP: query }).then(res => {
-            const obj = {}
-            this.options = res.data.reduce((cur, next) => {
-              obj[next.idap] ? '' : (obj[next.idap] = true && cur.push(next))
-              return cur
-            }, [])
-          })
-        }, 100)
-      } else {
-        this.options = []
-      }
-    },
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url
       this.dialogVisible = true
     },
-    click_bugName(e) {
-      this.bugQuery = JSON.parse(
-        JSON.stringify(this.tableData.filter(value => value.id === e)[0])
-      )
-      this.drawerShow = true
-      // this.$store.state.data.bizId = true
-    },
     createdDefect() {
       this.modalShow = true
       this.$nextTick(() => {
         this.$refs.createdBug.init(1)
       })
     },
-    showSelect() {
+    showSelect() { // 筛选展开/隐藏
       this.bugDataGet()
-      this.DetailedScreening === false
-        ? (this.DetailedScreening = true)
-        : (this.DetailedScreening = false)
-      this.goodName === '更多筛选'
-        ? (this.goodName = '收起筛选')
-        : (this.goodName = '更多筛选')
-    },
-    handleSizeChange(val) {
-      this.pageSize = val
-      if (this.type === 'page') {
-        this.getBugList()
-      } else {
-        this.getBugSelfList()
-      }
-    },
-    handleCurrentChange(val) {
-      this.curIndex = val
-      if (this.type === 'page') {
-        this.getBugList()
-      } else {
-        this.getBugSelfList()
-      }
+      this.DetailedScreening === false ? (this.DetailedScreening = true) : (this.DetailedScreening = false)
+      this.goodName === '更多筛选' ? (this.goodName = '收起筛选') : (this.goodName = '更多筛选')
     },
     bugListSelect() {
       settingGetBizList({}).then(res => {
@@ -921,7 +486,6 @@ export default {
         this.repairResultEnumList = res.data.repairResultEnumList // 修复结果
         this.clientTypeEnumList = res.data.clientTypeEnumList // 版本
         this.sysTypeEnumList = res.data.sysTypeEnumList // 客户端
-        this.bugReasonEnumList = res.data.bugReasonEnumList
         this.bugDevRepairTimeList = res.data.bugDevRepairTimeList // 开发修复时长
       })
       releaseList().then(res => {
@@ -957,6 +521,7 @@ export default {
       )
     },
     async download() { // 下载导出Excel
+      console.log(this.indexPage)
       const res = await bugDownload(this.indexPage)
       const aLink = document.createElement('a')
       const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
@@ -1029,47 +594,11 @@ export default {
     deleteFilter() {
       this.$router.push({ path: this.$route.path })
       this.getFilterList()
-    },
-    bugStatusList(status) { // 不同状态返回不同的option
-      if (status === 0) {
-        return this.bugEnumList.filter(item => {
-          return item.code === 0 || item.code === 2 || item.code === 5
-        })
-      }
-      if (status === 2) {
-        return this.bugEnumList.filter(item => {
-          return item.code === 2 || item.code === 3 || item.code === 4
-        })
-      }
-      if (status === 3) {
-        return this.bugEnumList.filter(item => {
-          return item.code === 3
-        })
-      }
-      if (status === 4) {
-        return this.bugEnumList.filter(item => {
-          return item.code === 2 || item.code === 5 || item.code === 4
-        })
-      }
-      if (status === 5) {
-        return this.bugEnumList.filter(item => {
-          return item.code === 5 || item.code === 2
-        })
-      }
     }
   }
 }
 </script>
 <style scoped lang="scss">
-.high {
-  background-color: #F56C6C;
-}
-.medium {
-  background-color: #FF8952;
-}
-.low {
-  background-color: #7ED321;
-}
 .save-search {
   float: left;
 }
@@ -1092,12 +621,4 @@ export default {
     }
   }
 }
-
-</style>
-<style lang="scss">
-.btns .el-input--suffix .el-input__inner {
-  padding-right: 10px;
-  padding-left: 10px;
-  width: 73px;
-}
 </style>

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

@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <el-table size="small" :data="tableData" class="bug_tableHeader" show-overflow-tooltip="true" :header-cell-style="{ color: '#4A4A4A', fontSize: '14px', fontWeight: '500' }">
+      <el-table-column label="优先级" prop="priorityCode" min-width="100" sortable align="center">
+        <template slot-scope="scope" style="text-align: center;">
+          <span class="div_priority" :class="[{'priority_color': scope.row.priorityLevel === 'High'},{'priority_color1': scope.row.priorityLevel === 'Medium'},{'priority_color3': scope.row.priorityLevel === 'Low'}]">
+            {{ scope.row.priorityLevel.substring(0, 1) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="bugName" label="缺陷标题" min-width="360" align="left" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <span style=" color: #A7AEBC; font-size: 10px;">{{ 'BUG-' + scope.row.id }}</span>
+          <br>
+          <span class="bugNameSty" @click.stop="click_bugName(scope.row.id)">{{ scope.row.bugName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="priorityName" label="缺陷等级" align="center" />
+      <el-table-column prop="bugStatusName" label="状态" min-width="110" align="center">
+        <template slot-scope="scope">
+          <statusChange :status-code="Number(scope.row.status)" :bug-data="scope.row" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="taskName" label="所属任务" align="center" min-width="250" show-overflow-tooltip />
+      <el-table-column prop="creatorList" label="提报人" align="center" />
+      <el-table-column prop="assignerList" label="责任人" min-width="150" align="center" show-overflow-tooltip />
+      <el-table-column prop="currentHandlerList" label="修复人" min-width="150" align="center" show-overflow-tooltip />
+      <el-table-column prop="gmtCreate" label="创建日期" min-width="120" align="center">
+        <template slot-scope="scope">{{ scope.row.gmtCreate | naspOut }}</template>
+      </el-table-column>
+    </el-table>
+    <div align="right">
+      <el-pagination
+        :page-sizes="[15, 30, 45, total]"
+        :current-page="curIndex"
+        :page-size="pageSize"
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+
+    <el-drawer :visible.sync="drawerShow" :modal="false" :with-header="false" size="50%" class="bug_manage_drawer" @click.stop>
+      <div @click.stop>
+        <bug-details
+          :id="bugQuery.id+''"
+          ref="bugDetails"
+          :type="'drawer'"
+          :drawer-show="drawerShow"
+          @close="drawerShow = false"
+          @delete="drawerShow = false;type === 'page'?this.$emit('getBugList'):this.$emit('getBugSelfList')"
+          @update="type === 'page'?this.$emit('getBugList'):this.$emit('getBugSelfList')"
+        />
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import statusChange from '@/views/projectManage/bugList/details/statusChange'
+import { bugList } from '@/api/defectManage'
+import BugDetails from './index'
+import '@/styles/PublicStyle/index.scss'
+
+export default {
+  components: {
+    statusChange,
+    BugDetails
+  },
+  filters: {
+    naspOut(value) {
+      if (!value) return ''
+      var da = value.split(/\s+/)
+      return da[0]
+    }
+  },
+  data() {
+    return {
+      tableData: [], // tableData
+      pageSize: 15, // 分页
+      curIndex: 1, // 分页
+      total: 0, // 总数
+      bugQuery: '', // bug详情
+      drawerShow: false, // drawer展示
+      bizId: Number(localStorage.getItem('bizId')) // 业务线
+    }
+  },
+  computed: {
+    clickCount() {
+      return this.$store.state.app.clickCount
+    }
+  },
+  watch: {
+    clickCount(newVal, oldVal) {
+      this.drawerShow = false
+    }
+  },
+  created() {
+    this.bugGetTableList()
+  },
+  methods: {
+    bugGetTableList(e) {
+      let extend = {}
+      const data = {}
+      data.bizId = this.bizId
+      data.pageSize = this.pageSize
+      data.curIndex = this.curIndex
+      extend = data
+      e ? extend = Object.assign(data, e) : ''
+      console.log(extend, 'gialog')
+      bugList(extend).then(res => {
+        if (res.code === 200) {
+          this.tableData = res.data.map(item => { return { ...item, isSelected: false } })
+          this.total = res.total
+          this.$emit('curIndexs', data)
+        }
+      })
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+    },
+    handleCurrentChange(val) {
+      this.curIndex = val
+      this.bugGetTableList()
+    },
+    click_bugName(e) {
+      this.bugQuery = JSON.parse(
+        JSON.stringify(this.tableData.filter(value => value.id === e)[0])
+      )
+      this.drawerShow = true
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.bug_tableHeader {
+  width: 100%;
+  font-size: 14px;
+  color:rgba(102,102,102,1);
+}
+.div_priority {
+  text-align: center;
+  color: #ffffff;
+  padding: inherit;
+  border-radius: 4px;
+  margin-right: 14%;
+  width: 35px;
+  display: inline-block;
+}
+.bugNameSty:hover {
+  cursor: pointer;
+  color: #409EFF !important;
+}
+.bug_manage_drawer .el-drawer__header{
+  margin-bottom: 15px;
+}
+.bug_manage_drawer {
+  pointer-events: none;
+  margin-top: 55px;
+}
+.bug_manage_drawer .el-drawer{
+  pointer-events: auto;
+}
+</style>

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

@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <el-select
+      v-model="status"
+      :class="{
+        'status_color': status === 0,
+        'status_color2': status === 3,
+        'status_color5': status === 2,
+        'status_color1': status === 4,
+        'status_color3': status === 5
+      }"
+      class="btns"
+      size="mini"
+      @change="blurEvent(status)"
+    >
+      <el-option v-for="item in bugStatusList(status)" :key="item.code" :label="item.name" :value="item.code" />
+    </el-select>
+    <el-dialog
+      v-if="statusDialogVisible"
+      :visible.sync="statusDialogVisible"
+      width="30%"
+      :title="statusDialogTitle"
+      class="public_task"
+      :append-to-body="true"
+      :close-on-click-modal="false"
+      @close="modalClose"
+    >
+      <div class="blueStripe" />
+      <el-form ref="statusDialogForm" label-width="110px" label-position="left" :model="statusDialogForm" :rules="rules">
+        <el-form-item v-if="statusDialogTitle === '待测试' || statusDialogTitle === '已完成'" label="修复结果" prop="repairResult" class="bug_manage_dialog">
+          <el-select v-model="statusDialogForm.repairResult" style="width: 100%" @change="modifyResult(statusDialogForm.repairResult)">
+            <el-option v-for="item in repairResultEnumList" :key="item.code" :label="item.name" :value="item.code" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="statusDialogTitle === '待测试' || statusDialogTitle === '已完成'" label="缺陷原因" prop="bugReason" class="bug_manage_dialog">
+          <el-select v-model="statusDialogForm.bugReason" style="width: 100%">
+            <el-option v-for="item in bugReasonEnumList" :key="item.code" :label="item.name" :value="item.code" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="statusDialogTitle === '待测试'" label="修复方式" class="bug_manage_dialog bug_manage_dialog_fixMethod">
+          <el-input v-model="statusDialogForm.reasonOrDesc" type="textarea" placeholder="请输入具体原因，得出结论的过程，具体修复过程或方式" maxlength="300" show-word-limit rows="4" />
+        </el-form-item>
+        <el-form-item v-if="statusDialogTitle === 'Reopen'" label="Reopen原因" prop="reasonOrDesc" class="bug_manage_dialog">
+          <el-input v-model="statusDialogForm.reasonOrDesc" type="textarea" placeholder="请输入Reopen" maxlength="300" show-word-limit rows="4" />
+        </el-form-item>
+        <el-form-item v-if="statusDialogTitle === 'Hold'" label="Hold原因" prop="reasonOrDesc" class="bug_manage_dialog">
+          <el-input v-model="statusDialogForm.reasonOrDesc" type="textarea" maxlength="300" show-word-limit rows="4" />
+        </el-form-item>
+      </el-form>
+      <template v-slot:footer>
+        <el-button size="small" @click="modalClose()">取 消</el-button>
+        <el-button size="small" type="primary" @click="statusDialogConfirm">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import '@/styles/PublicStyle/index.scss'
+import { bugGetEnum, bugUpdate } from '@/api/defectManage'
+export default {
+  props: {
+    statusCode: { type: Number, default: null }, // 状态值
+    bugData: { type: Object, default: null } // 行数据
+  },
+  data() {
+    return {
+      status: this.statusCode, // 状态
+      bugEnumList: [], // 状态option
+      userData: { id: '', ename: localStorage.getItem('username'), name: localStorage.getItem('realname') }, // 用户信息
+      statusDialogForm: { // 修复结果
+        repairResult: 1 // 默认值
+      },
+      statusDialogVisible: false, // 状态dialog
+      statusDialogTitle: '', // 当前状态name值
+      repairResultEnumList: [], // 修复结果
+      bugReasonEnumList: [], // 缺陷原因
+      rules: { // 状态表单验证
+        bugReason: [{ required: true, message: '请选择缺陷原因', trigger: ['blur', 'change'] }],
+        repairResult: [{ required: true, message: '请选择修复结果', trigger: ['blur', 'change'] }],
+        reasonOrDesc: [{ required: true, message: '请输入Reopen原因', trigger: ['blur', 'change'] }]
+      }
+    }
+  },
+  mounted() {
+    this.getBugSelect() // 获取下拉菜单option
+  },
+  methods: {
+    getBugSelect() { //  获取下拉菜单option
+      bugGetEnum().then(res => {
+        this.bugEnumList = res.data.bugEnumList // status
+        this.repairResultEnumList = res.data.repairResultEnumList // 修复结果
+        this.bugReasonEnumList = res.data.bugReasonEnumList // 缺陷原因
+      })
+    },
+    statusDialogConfirm() { // 点击确定 验证 修改
+      this.$refs.statusDialogForm.validate((valid) => {
+        if (valid) {
+          this.bugData.status = this.status
+          this.bugData.reasonOrDesc = this.statusDialogForm.reasonOrDesc
+          this.bugData.repairResult = this.statusDialogForm.repairResult
+          this.bugData.bugReason = this.statusDialogForm.bugReason
+          const objData = { bugBaseInfo: this.bugData, user: this.userData }
+          bugUpdate(objData).then(res => {
+            if (res.code === 200) {
+              this.statusDialogVisible = false
+              this.statusDialogForm = {}
+              this.$message({ message: '成功修改状态为' + this.statusDialogTitle, type: 'success', center: true })
+            } else if (res.code !== 200) {
+              this.status = this.statusCode
+              // this.$message({ message: '修改失败' + res.msg, type: 'error', center: true })
+            }
+          })
+        }
+      })
+    },
+    modifyResult(val) { // 修复结果
+      switch (val) {
+        case 9:
+          this.$set(this.statusDialogForm, 'bugReason', 9)
+          break
+        case 11:
+          this.$set(this.statusDialogForm, 'bugReason', 11)
+          break
+        case 2:
+          this.$set(this.statusDialogForm, 'bugReason', 10)
+          break
+        case 3:
+          this.$set(this.statusDialogForm, 'bugReason', 12)
+          break
+        default: this.$set(this.statusDialogForm, 'bugReason', '')
+          break
+      }
+    },
+    blurEvent(status) {
+      if (status === 0) {
+        this.bugData.status = status
+        const objData = { bugBaseInfo: this.bugData, user: this.userData }
+        bugUpdate(objData).then(res => {
+          this.bugData.isSelected = !this.bugData.isSelected
+          this.$message({ message: res.msg, type: res.msg })
+        })
+        return
+      }
+      let data = ''
+      this.bugEnumList.map(item => {
+        item.code === status ? data = item.name : ''
+      })
+      this.statusDialogTitle = data
+      this.statusDialogForm = {}
+      if (status === 2) {
+        this.$set(this.statusDialogForm, 'repairResult', 1)
+      }
+      if (status === 3) {
+        this.$set(this.statusDialogForm, 'repairResult', this.bugData.repairResult)
+        this.$set(this.statusDialogForm, 'bugReason', this.bugData.bugReason)
+      }
+      this.statusDialogVisible = true
+    },
+    bugStatusList(status) { // 不同状态返回不同的option
+      if (status === 0) {
+        return this.bugEnumList.filter(item => {
+          return item.code === 0 || item.code === 2 || item.code === 5
+        })
+      }
+      if (status === 2) {
+        return this.bugEnumList.filter(item => {
+          return item.code === 2 || item.code === 3 || item.code === 4
+        })
+      }
+      if (status === 3) {
+        return this.bugEnumList.filter(item => {
+          return item.code === 3
+        })
+      }
+      if (status === 4) {
+        return this.bugEnumList.filter(item => {
+          return item.code === 2 || item.code === 5 || item.code === 4
+        })
+      }
+      if (status === 5) {
+        return this.bugEnumList.filter(item => {
+          return item.code === 5 || item.code === 2
+        })
+      }
+    },
+    modalClose() {
+      this.statusDialogVisible = false
+      this.status = this.statusCode
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.btns .el-input--suffix .el-input__inner {
+  padding-right: 10px;
+  padding-left: 10px;
+  width: 73px;
+}
+</style>

src/views/projectManage/taskList/dialog/taskDialog.vue

@@ -24,7 +24,7 @@
 
 <script>
 import '@/styles/PublicStyle/index.scss'
-import { taskUpdate } from '@/api/taskIndex' // 更新状态接口
+import { taskUpdate, taskGet } from '@/api/taskIndex' // 更新状态接口
 export default {
   name: 'TemplateDialog',
   props: {
@@ -39,6 +39,7 @@ export default {
       name: '',
       task_Id: this.taskId,
       codeName: '',
+      taskData: {},
       measurementTimeName: '实际提测时间',
       exitTimeName: '实际准出时间',
       onlineTimeName: '实际上线完成时间',
@@ -78,26 +79,32 @@ export default {
       }
     }
   },
+  created() {
+    this.getTaskData()
+  },
   methods: {
+    getTaskData() {
+      taskGet(this.task_Id).then(res => {
+        this.taskData = res.data
+      })
+    },
     OnClose() {
       this.$emit('update:show', false)
     },
     task_status_uptate(e) {
-      const taskInfoDO = {}
       if (this.statusName === '已提测') {
-        taskInfoDO.status = 2
-        taskInfoDO.launchTestRealTime = e
+        this.taskData.status = 2
+        this.taskData.launchTestRealTime = e
       }
       if (this.statusName === '已准出') {
-        taskInfoDO.status = 4
-        taskInfoDO.testFinishRealTime = e
+        this.taskData.status = 4
+        this.taskData.testFinishRealTime = e
       }
       if (this.statusName === '已上线') {
-        taskInfoDO.status = 5
-        taskInfoDO.onlineRealTime = e
+        this.taskData.status = 5
+        this.taskData.onlineRealTime = e
       }
-      taskInfoDO.id = this.task_Id
-      taskInfoDO.bizId = localStorage.getItem('bizId')
+      const taskInfoDO = this.taskData
       const user = this.userData
       taskUpdate({ taskInfoDO, user }).then(res => {
         if (res.code === 200) {