更细提测文档

src/api/TestDesciption.js

@@ -14,3 +14,35 @@ export function addTestDescription(data) {
     data
   })
 }
+// 编辑提测文档接口
+export function editTestDescription(data) {
+  return holmesRequest({
+    url: '/quality/testInstruction/update',
+    method: 'post',
+    data
+  })
+}
+// 删除提测文档接口
+export function delTestDescription(data) {
+  return holmesRequest({
+    url: '/quality/testInstruction/delete',
+    method: 'post',
+    data
+  })
+}
+// 提测文档详情接口
+export function detailTestDescription(queryInfo) {
+  return holmesRequest({
+    url: '/quality/testInstruction/detail',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 根据jira项目关键字获取项目列表接口
+export function getTestProjectNameList(queryInfo) {
+  return holmesRequest({
+    url: '/quality/testInstruction/getProjectNameList',
+    method: 'get',
+    params: queryInfo
+  })
+}

src/router/index.js

@@ -59,6 +59,9 @@ import DataList from '../views/confluence/DataList'
 import BindAddress from '../views/yxm/BindAddress'
 // 新添加提测说明功能页面(2021-10-29)
 import TestDescription from '../views/qa/TestDescription'
+// 新添加提测说明详情页面(2021-11-10)
+import DetailTestDescription from '../views/qa/DetailTestDescription'
+
 const originalPush = Router.prototype.push
 Router.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
@@ -310,6 +313,12 @@ const router = new Router({
           path: '/qa/testDescription',
           name: '提测说明',
           component: TestDescription
+        },
+        // 提测文档详情页面(2021-11-10)
+        {
+          path: '/qa/detailTestDescription',
+          name: DetailTestDescription,
+          component: DetailTestDescription
         }
       ]
     }

src/views/auto/ModelList.vue

@@ -190,7 +190,6 @@ export default {
           // 添加模块
           addModul(this.addModelForm)
             .then((resp) => {
-              console.log('保存信息', this.modelForm)
               if (resp.data.data === true) {
                 this.DialogVisible = false
                 this.$message.success('新增成功！')

src/views/qa/Description.vue

+<template>
+  <div class="description_text">
+    <div v-if="title" class="title">{{title}}</div>
+    <el-row :gutter="gutter">
+      <el-col :key="key" :span="+col" v-for="(item, key) in dataSource">
+        <div class="term">{ { item.term}}</div>
+        <div class="detail">{ { item.detail}}</div>Î
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+const handleArrayObj = (data) => {
+  return data
+    .filter((item) => item.tag === 'Description')
+    .map((item) => ({
+      tag: item.tag,
+      term: (item.data && item.data.attrs.term) || '暂无',
+      detail: (item.children && item.children[0].text) || '暂无'
+    }))
+}
+export default {
+  name: 'Description',
+  props: {
+    title: String,
+    content: [Object, Array],
+    gutter: {
+      type: [Number, String],
+      default: 20
+    },
+    col: {
+      type: [Number, String],
+      default: 8
+    }
+  },
+  data() {
+    return {
+      dataSource: handleArrayObj(this.$slots.default || [])
+    }
+  },
+  watch: {
+    content() {
+      this.dataSource = handleArrayObj(this.$slots.default || [])
+    } // 监听重渲染
+  }
+}
+</script>
+<style lang="less" scoped>
+.description_text {
+  .title {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 1.5;
+    margin-bottom: 20px;
+    color: rgba(0, 0, 0, 0.85);
+  }
+  .term {
+    color: rgba(0, 0, 0, 0.85);
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    padding-bottom: 16px;
+    margin-right: 8px;
+    white-space: nowrap;
+    display: table-cell;
+    &:after {
+      content: ':';
+      margin: 0 8px 0 2px;
+      position: relative;
+      top: -0.5px;
+    }
+  }
+  .detail {
+    font-size: 14px;
+    line-height: 1.5;
+    width: 100%;
+    padding-bottom: 16px;
+    color: rgba(0, 0, 0, 0.65);
+    display: table-cell;
+  }
+}
+</style>

src/views/qa/DetailTestDescription.vue

+<template>
+  <div>
+    <el-card>
+      <div style="font-size:18px;color:303133">提测说明详情</div>
+      <el-row>
+        <el-col :span="4">
+          <div style="margin-top:40px;margin-left:40px">jira项目名称:</div>
+        </el-col>
+        <el-col :span="6">
+          <div class="col2-style"> {{jiraProjectName}}</div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="4">
+          <div class="col-style">项目名称:</div>
+        </el-col>
+        <el-col :span="6">
+          <div class="col2-style">
+            {{projectName}}
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="4">
+          <div class="col-style">服务及分支:</div>
+        </el-col>
+        <el-col :span="18">
+          <el-table :data="serviceAndBranch" border style="width:90%;margin-top:20px;margin-left:-50px">
+            <el-table-column label="服务名称" prop="serviceName" width="300"></el-table-column>
+            <el-table-column label="服务分支" prop="branch" width="300"></el-table-column>
+            <el-table-column label="开发负责人" prop="developer" width="170"></el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="4">
+          <div class="col-style">apollo变更:</div>
+        </el-col>
+        <el-col :span="18">
+          <el-table :data="apollo" border style="width:90%;margin-top:20px;margin-left:-50px">
+            <el-table-column label="项目名称" prop="projectName" width="300"></el-table-column>
+            <el-table-column label="apollo Key" prop="key" width="300"></el-table-column>
+            <el-table-column label="apollo value" prop="value" width="170"></el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="4">
+          <div class="col-style">数据库变更:</div>
+        </el-col>
+        <el-col :span="18">
+          <el-table :data="database" border style="width:90%;margin-top:20px;margin-left:-50px">
+            <el-table-column label="数据库名称" prop="db" width="300"></el-table-column>
+            <el-table-column label="sql" prop="sql" width="470"></el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="4">
+          <div class="col-style">需求地址:</div>
+        </el-col>
+        <el-col :span="6">
+          <div class="col2-style">{{requirement}}</div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="4">
+          <div class="col-style">接口地址:</div>
+        </el-col>
+        <el-col :span="6">
+          <div class="col2-style">{{api}}</div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="4">
+          <div class="col-style">其 它:</div>
+        </el-col>
+        <el-col :span="6">
+          <div class="col2-style">{{scope}}</div>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+<script>
+import { detailTestDescription } from '@/api/TestDesciption'
+import bus from '@/utils/bus'
+export default {
+  data() {
+    return {
+      projectName: '',
+      jiraProjectName: '',
+      requirement: '',
+      api: '',
+      scope: '',
+      apollo: [],
+      database: [],
+      serviceAndBranch: []
+    }
+  },
+  created() {
+    bus.$on('msg', (row) => {
+      detailTestDescription({
+        projectName: row.projectName,
+        jiraProjectKey: row.jiraProjectKey
+      }).then((resp) => {
+        var data = resp.data.data
+        this.projectName = data.projectName
+        this.jiraProjectName = data.jiraProjectName
+        this.requirement = data.requirement
+        this.api = data.api
+        this.scope = data.scope
+        this.serviceAndBranch = JSON.parse(data.serviceAndBranch)
+        this.apollo = JSON.parse(data.apollo)
+        this.database = JSON.parse(data.database)
+      })
+    })
+  },
+
+  methods: {}
+}
+</script>
+<style lang="sss" scoped>
+.col-style {
+  margin-top: 20px;
+  margin-left: 40px;
+}
+.col2-style {
+  margin-top: 20px;
+  margin-left: -50px;
+}
+</style>

src/views/qa/TestDescription.vue

@@ -9,35 +9,50 @@
         <el-input v-model="queryModuleInfo.projectName" clearable placeholder="请输入项目名称" style="width: 300px;">
         </el-input>
         <el-button type="primary" style="margin-left:10px" icon="el-icon-search" @click="queryData">查询</el-button>
-        <el-button type="primary" icon="el-icon-circle-plus" @click="addTestDesc">新增</el-button>
+        <el-button type="primary" icon="el-icon-circle-plus" @click="addTestDesc"
+          v-permission="('qa:testDescription:add')">新增</el-button>
       </div>
       <el-table :data="testDescriptionList" border style="width: 100%;margin-top:20px">
-        <el-table-column type='index' width="50px">
+        <el-table-column type='index' width="40px">
           <template slot-scope="scope">
             <span>{{(queryModuleInfo.pageNum -1 ) * queryModuleInfo.pageSize + scope.$index + 1}}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="projectName" label="项目名" width="200px"></el-table-column>
-        <el-table-column label="服务->分支->负责人" width="250px">
+        <el-table-column prop="jiraProjectName" label="Jira项目" width="110px"></el-table-column>
+        <el-table-column prop="projectName" label="项目名" width="150px"></el-table-column>
+        <el-table-column label="服务->分支->负责人" width="230px">
           <template slot-scope="scope">
-            <div v-for="item in JSON.stringify(scope.row.serviceAndBranch) " :key="item.serviceName">
+            <div v-for="item in JSON.parse(scope.row.serviceAndBranch)" :key="item.serviceName">
               <b>{{ item.serviceName }}</b> ->
-              {{ item.branch }}<b>{{ item.developer }}</b> -></div>
+              {{ item.branch }}<b> ->{{ item.developer }};</b>
+            </div>
           </template>
         </el-table-column>
-
-        <!-- <el-table-column prop="serviceAndBranch" label="服务->分支->负责人" width="250px">{{typeof(serviceAndBranch)}}</el-table-column> -->
-        <el-table-column prop="apollo" label="Apollo变更" width="250px"></el-table-column>
-        <el-table-column prop="database" label="数据库变更" width="300px"></el-table-column>
-        <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
+        <el-table-column label="apollo变更" width="200px">
+          <template slot-scope="scope">
+            <div v-for="item in JSON.parse(scope.row.apollo)" :key="item.projectName">
+              <b>{{ item.projectName }}</b> ->
+              {{ item.key }}<b> ->{{ item.value }};</b>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="数据库变更" width="150px">
+          <template slot-scope="scope">
+            <div v-for="item in JSON.parse(scope.row.database)" :key="item.db">
+              <el-popover placement="top-start" title="相关sql" width="250" trigger="hover" :content="item.sql">
+                <div slot="reference" style="color:#409EFF">{{item.db}};</div>
+              </el-popover>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="155px"></el-table-column>
         <el-table-column label="操作">
           <slot slot-scope="scope">
-            <el-button type="warning" icon="el-icon-edit" @click="openPreviewDialog(scope.row)"
-              v-permission="('auto:project:edit')">预览</el-button>
+            <el-button type="primary" icon="el-icon-view" @click="openPreviewDialog(scope.row)">预览</el-button>
             <el-button type="warning" icon="el-icon-edit" @click="openEditDialog(scope.row)"
-              v-permission="('auto:project:edit')">编辑</el-button>
+              v-permission="('qa:testDescription:edit')">编辑</el-button>
             <el-button type="danger" icon="el-icon-delete" @click="delTestDescription(scope.row)"
-              v-permission="('auto:project:del')">删除</el-button>
+              v-permission="('qa:testDescription:del')">删除</el-button>
           </slot>
         </el-table-column>
       </el-table>
@@ -51,7 +66,7 @@
     <el-dialog title="新增提测文档" :visible.sync="DialogAddVisible" width="70%">
       <el-form ref="addTestDescriptionRef" :rules="rules" :model="addTestDescriptionForm" label-width="90px">
         <el-form-item label="jira项目:">
-          <el-select v-model="addTestDescriptionForm.jiraProjectKey" placeholder="请选择Jira项目">
+          <el-select v-model="addTestDescriptionForm.jiraProjectKey" placeholder="请选择Jira项目" filterable clearable>
             <el-option v-for="item in jiraProjectList" :key="item.key" :label="item.name" :value="item.key">
             </el-option>
           </el-select>
@@ -60,64 +75,63 @@
           <el-input v-model="addTestDescriptionForm.projectName"></el-input>
         </el-form-item>
         <!-- 服务及分支 -->
-        <el-form-item label="服务及分支:" style="width:920px">
+        <el-form-item label="服务及分支:" style="width:95%">
           <el-row>
-            <el-col :span="6">
-              <div style="text-align: center">
+            <el-col :span="8">
+              <div style="margin-left:100px">
                 服务
               </div>
             </el-col>
-            <el-col :span="6">
-              <div style="text-align: center">
+            <el-col :span="8">
+              <div style="margin-left:100px">
                 分支
               </div>
             </el-col>
-            <el-col :span="6">
-              <div style="text-align: center">
+            <el-col :span="4">
+              <div style="margin-left:50px">
                 开发负责人
               </div>
             </el-col>
-            <el-col :span="6">
-              <div style="margin-left:20px">
+            <el-col :span="4">
+              <div style="margin-left:60px">
                 操作
               </div>
             </el-col>
           </el-row>
           <!-- 操作数据 -->
-          <el-row v-for="(item, index) in serviceAndBranchList" :key="index">
-            <el-col :span="6">
-              <div style="text-align: center;margin-top:5px">
+          <el-row v-for="(item, index) in serviceAndBranchList" :key="index" :gutter="20">
+            <el-col :span="8">
+              <div>
                 <el-select v-model="item.serviceName" filterable placeholder="请选择服务"
-                  @change="selectServiceModel(item.serviceName)" clearable>
+                  @change="selectServiceModel(item.serviceName)" clearable style="width:270px">
                   <el-option v-for="item2 in serviceList" :key="item2.name" :label="item2.name" :value="item2.name">
                   </el-option>
                 </el-select>
               </div>
             </el-col>
-            <el-col :span="6">
-              <div style="text-align: center;margin-top:5px">
+            <el-col :span="8">
+              <div>
                 <el-select v-model="item.branch" filterable placeholder="请选择分支" clearable
-                  @focus="focusevent(item.serviceName)">
+                  @focus="focusevent(item.serviceName)" style="width:270px">
                   <el-option v-for="item2 in serviceBranchList" :key="item2.name" :label="item2.name"
                     :value="item2.name"></el-option>
                 </el-select>
               </div>
             </el-col>
-            <el-col :span="6">
-              <div style="text-align: center;margin-top:5px">
-                <el-input v-model="item.developer"></el-input>
+            <el-col :span="4">
+              <div>
+                <el-input v-model="item.developer" style="width:150px"></el-input>
               </div>
             </el-col>
-            <el-col :span="6">
-              <div style="margin-left:10px;margin-top:5px">
+            <el-col :span="4">
+              <div style="margin-left:20px">
                 <el-button size="small" icon="el-icon-delete" @click="serviceAndBranchDelete(index)">删除</el-button>
               </div>
             </el-col>
           </el-row>
-          <el-row>
-            <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline" @click="addServiceAndBranchRow()"
-              class="btn-style">添加</el-button>
-          </el-row>
+          <el-button type="primary" size="mini" plain icon="el-icon-circle-plus-outline"
+            @click="addServiceAndBranchRow()" class="btn-style">添加</el-button>
+
         </el-form-item>
         <!-- apollo变更 -->
         <el-form-item label="apollo变更:">
@@ -202,9 +216,12 @@ import {
 } from '@/api/jira'
 import {
   getTestDescriptionList,
-  addTestDescription
+  addTestDescription,
+  delTestDescription,
+  editTestDescription
 } from '@/api/TestDesciption'
 import { getDataBaseList } from '@/api/effect'
+import bus from '@/utils/bus'
 export default {
   data() {
     return {
@@ -219,6 +236,7 @@ export default {
       testDescriptionList: [],
       jiraProjectList: [],
       addTestDescriptionForm: {
+        id: '',
         jiraProjectKey: '',
         projectName: '',
         serviceAndBranch: '',
@@ -268,12 +286,13 @@ export default {
     getTestDescriptionList() {
       getTestDescriptionList(this.queryModuleInfo).then((resp) => {
         this.testDescriptionList = resp.data.data.list
-        console.log('wee', this.testDescriptionList)
         this.totalNum = resp.data.data.total
       })
     },
-
-    queryData() {},
+    // 查询按钮
+    queryData() {
+      this.getTestDescriptionList()
+    },
     handleSizeChange(newSize) {
       this.queryModuleInfo.pageSize = newSize
       this.getProjectList()
@@ -344,37 +363,109 @@ export default {
     addTestDesc() {
       this.DialogAddVisible = true
       this.getDataBaseList()
+      this.addTestDescriptionForm.jiraProjectKey = ''
+      this.addTestDescriptionForm.projectName = ''
+      this.addTestDescriptionForm.requirement = ''
+      this.addTestDescriptionForm.api = ''
+      this.addTestDescriptionForm.scope = ''
+      this.serviceAndBranchList = []
+      this.serviceAndBranchList.push({
+        serviceName: '',
+        branch: '',
+        developer: ''
+      })
+      this.apolloList = []
+      this.databaseList = []
     },
     // 保存数据按钮
     addTestDescriptionFrom() {
+      // 将数组对象转化为Json字符串
       this.addTestDescriptionForm.serviceAndBranch = JSON.stringify(
         this.serviceAndBranchList
       )
       this.addTestDescriptionForm.apollo = JSON.stringify(this.apolloList)
       this.addTestDescriptionForm.database = JSON.stringify(this.databaseList)
-      console.log('555', this.addTestDescriptionForm)
-      addTestDescription(this.addTestDescriptionForm).then((resp) => {
-        if (resp.data.businessCode === '0000') {
-          this.$message.success(resp.data.msg)
-          this.DialogAddVisible = false
-          this.getTestDescriptionList()
-        } else {
-          this.$message.error(resp.data.msg)
-        }
-      })
+      // 编辑测试文档
+      if (this.addTestDescriptionForm.id) {
+        editTestDescription(this.addTestDescriptionForm).then((resp) => {
+          if (resp.data.businessCode === '0000') {
+            this.$message.success(resp.data.msg)
+            this.DialogAddVisible = false
+            this.getTestDescriptionList()
+          } else {
+            this.$message.error(resp.data.msg)
+          }
+        })
+      } else {
+        // 添加测试文档
+        addTestDescription(this.addTestDescriptionForm).then((resp) => {
+          if (resp.data.businessCode === '0000') {
+            this.$message.success(resp.data.msg)
+            this.DialogAddVisible = false
+            this.getTestDescriptionList()
+          } else {
+            this.$message.error(resp.data.msg)
+          }
+        })
+      }
     },
-    // 预览对话框
-    openPreviewDialog() {},
     // 编辑对话框
-    openEditDialog() {},
+    openEditDialog(row) {
+      this.DialogAddVisible = true
+      this.getDataBaseList()
+      this.addTestDescriptionForm.id = row.id
+      this.addTestDescriptionForm.projectName = row.projectName
+      this.addTestDescriptionForm.jiraProjectKey = row.jiraProjectKey
+      this.addTestDescriptionForm.requirement = row.requirement
+      this.addTestDescriptionForm.api = row.api
+      this.addTestDescriptionForm.scope = row.scope
+      this.serviceAndBranchList = JSON.parse(row.serviceAndBranch)
+      this.apolloList = JSON.parse(row.apollo)
+      this.databaseList = JSON.parse(row.database)
+    },
+    // 对话框方法
+    openMessage(message, confirmText, doit) {
+      this.$messageBox
+        .confirm(message, '确定', {
+          cancelButtonText: '取消',
+          confirmButtonText: confirmText,
+          type: 'warning'
+        })
+        .then(() => {
+          doit()
+        })
+        .catch(() => {})
+    },
     // 删除信息
-    delTestDescription() {}
+    delTestDescription(row) {
+      this.openMessage('您确定要删除吗？', '删除', () => {
+        delTestDescription(row)
+          .then((resp) => {
+            if (resp.data.businessCode === '0000') {
+              this.$message.success(resp.data.msg)
+              this.getTestDescriptionList()
+            } else {
+              this.$message.error(resp.data.msg)
+            }
+          })
+          .catch((error) => {
+            this.$message({ type: 'error', message: error })
+          })
+      })
+    },
+    // 详情按钮
+    openPreviewDialog(row) {
+      this.$router.push('/qa/detailTestDescription')
+      this.$nextTick(function () {
+        // DOM 现在更新了
+        bus.$emit('msg', row)
+      })
+    }
   }
 }
 </script>
 <style lang="less" scoped>
 .btn-style {
   margin-top: 10px;
-  margin-left: 8px;
 }
 </style>