用例管理

src/router/index.js

@@ -103,15 +103,15 @@ export const constantRoutes = [
             hidden: true,
             component: () => import('@/views/Platform/useCase/createUse'),
             meta: { title: '用例新增' }
+          },
+          {
+            path: 'queryUse',
+            name: '用例查看',
+            hidden: true,
+            component: () => import('@/views/Platform/useCase/queryUse'),
+            meta: { title: '用例查看' }
           }
           // {
-          //   path: 'bugQuery',
-          //   name: '查看Bug',
-          //   hidden: true,
-          //   component: () => import('@/views/Platform/bugManage/bugQuery'),
-          //   meta: { title: '查看Bug' }
-          // },
-          // {
           //   path: 'bugUpdate',
           //   name: '更新Bug',
           //   hidden: true,

src/views/Platform/useCase/createUse.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="window-judge" style="background:#F2F3F6;">
+  <div id="window-judge" style="background:#F2F3F6;min-height:95vh;">
     <el-container>
       <el-header style="background:#ffffff;height:auto; width:94%;margin:3%; font-size:14px;border-radius:8px;">
         <el-form ref="caseData" :model="caseData" label-width="90pt" style="margin:1%;" :rules="createFormData">
@@ -25,50 +25,94 @@
         </el-form>
       </el-header>
       <el-main style="background:#ffffff;height:auto; width:94%;margin: 0 3% 3% 3%; font-size:14px;border-radius:8px;">
-        <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
-          <el-form ref="caseData" :model="caseData" label-width="90pt" :rules="createFormData">
-            <el-row>
-              <el-col :span="20" style="margin:2% 0 0 0; white-space:nowrap;">
-                <el-form-item label="执行步骤" prop="casePriority">
-                  <el-input v-model="textarea" type="textarea" :rows="4" placeholder="请输入内容" />
-                  <el-button size="mini" type="primary" icon="el-icon-plus" style="margin-bottom: 6%;" @click="addform" />
-                  <el-button size="mini" icon="el-icon-minus" />
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-col :span="22">
-                <el-form-item label="预期结果" prop="casePriority">
-                  <el-input v-model="textarea" placeholder="请输入内容" />
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <div style="display:flex;">
-              <el-row style="flex:1;">
-                <el-col :span="22">
-                  <el-form-item label="附件" prop="casePriority">
-                    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
-                      <i class="el-icon-upload" />
-                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
-                    </el-upload>
+        <!-- <div ref="div1">
+          <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); margin-bottom:2%;">
+            <el-form ref="caseData" :model="caseData" label-width="90pt" :rules="createFormData">
+              <el-row>
+                <el-col :span="20" style="margin:2% 0 0 0; white-space:nowrap;">
+                  <el-form-item label="执行步骤">
+                    <el-input v-model="textarea" type="textarea" :rows="4" placeholder="请输入内容" />
+                    <el-button size="mini" type="primary" icon="el-icon-plus" style="margin-bottom: 6%;" @click="addform" />
+                    <el-button size="mini" icon="el-icon-minus" @click="deleteData" />
                   </el-form-item>
                 </el-col>
               </el-row>
-              <el-row style="flex:1;">
-                <el-col :span="20">
-                  <el-form-item label="备注" prop="casePriority">
-                    <el-input v-model="textarea" type="textarea" :rows="8" placeholder="请输入内容" />
+              <el-row>
+                <el-col :span="22">
+                  <el-form-item label="预期结果">
+                    <el-input v-model="textarea" placeholder="请输入内容" />
                   </el-form-item>
                 </el-col>
               </el-row>
+              <div style="display:flex;">
+                <el-row style="flex:1;">
+                  <el-col :span="22">
+                    <el-form-item label="附件">
+                      <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
+                        <i class="el-icon-plus avatar-uploader-icon"> 添加图片 </i>
+                      </el-upload>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row style="flex:1;">
+                  <el-col :span="20">
+                    <el-form-item label="备注">
+                      <el-input v-model="textarea" type="textarea" :rows="8" placeholder="请输入内容" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-form>
+          </div>
+        </div> -->
+        <div v-for="(item, key) in arr" ref="for" :key="key">
+          <div ref="div1">
+            <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); margin-bottom:2%;">
+              <el-form ref="caseData" :model="caseData" label-width="90pt" :rules="createFormData">
+                <el-row>
+                  <el-col :span="20" style="margin:2% 0 0 0; white-space:nowrap;">
+                    <el-form-item label="执行步骤">
+                      <el-input v-model="textarea" type="textarea" :rows="4" placeholder="请输入内容" />
+                      <el-button size="mini" type="primary" icon="el-icon-plus" style="margin-bottom: 6%;" @click="addform" />
+                      <el-button size="mini" icon="el-icon-minus" @click="deleteData" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row>
+                  <el-col :span="22">
+                    <el-form-item label="预期结果">
+                      <el-input v-model="textarea" placeholder="请输入内容" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <div style="display:flex;">
+                  <el-row style="flex:1;">
+                    <el-col :span="22">
+                      <el-form-item label="附件">
+                        <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
+                          <i class="el-icon-plus avatar-uploader-icon"> 添加图片 </i>
+                        </el-upload>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                  <el-row style="flex:1;">
+                    <el-col :span="20">
+                      <el-form-item label="备注">
+                        <el-input v-model="textarea" type="textarea" :rows="8" placeholder="请输入内容" />
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </div>
+              </el-form>
             </div>
-            <div slot="footer" class="dialog-footer" style="margin-bottom:30%;">
-              <el-button type="primary" @click="dialogFormVisibleUpdate = false">关 闭</el-button>
-              <el-button type="primary" @click="caseCreateCase(caseData, titleName)">确 定</el-button>
-            </div>
-          </el-form>
+          </div>
         </div>
+        <el-row>
+          <el-col :span="22" style="text-align:right; ">
+            <el-button type="primary" @click="caseCreateCase(caseData, titleName)">保 存</el-button>
+            <el-button style="margin:9% 0 0 4%;" @click="dialogFormVisibleUpdate = false">取 消</el-button>
+          </el-col>
+        </el-row>
       </el-main>
     </el-container>
 
@@ -85,21 +129,17 @@ export default {
       dialogFormVisibleUpdate: false,
       caseData: {},
       createFormData: {
-        caseName: [{ required: true, message: '用例名不能为空', trigger: 'change' }],
-        description: [{ required: true, message: '用例描述不能为空', trigger: 'change' }],
-        expectedResult: [{ required: true, message: '期望结果不能为空', trigger: 'change' }],
         api: [{ required: true, message: '对应接口不能为空', trigger: 'change' }],
-        projectType: [{ required: true, message: '项目类型不能为空', trigger: 'change' }],
-        taskType: [{ required: true, message: '任务类型不能为空', trigger: 'change' }],
         casePriority: [{ required: true, message: '用例优先级不能为空', trigger: 'change' }]
       },
-      textarea: ''
+      textarea: '',
+      arr: [`<div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); margin-bottom:2%;"><el-form ref="caseData" :model="caseData" label-width="90pt" :rules="createFormData"><el-row><el-col :span="20" style="margin:2% 0 0 0; white-space:nowrap;"><el-form-item label="执行步骤"><el-input v-model="textarea" type="textarea" :rows="4" placeholder="请输入内容" /><el-button id="addData" size="mini" type="primary" icon="el-icon-plus" style="margin-bottom: 6%;" @click="addform" /><el-button id="deleteData" size="mini" icon="el-icon-minus" @click="deleteData" /></el-form-item></el-col></el-row><el-row><el-col :span="22"><el-form-item label="预期结果"><el-input v-model="textarea" placeholder="请输入内容" /></el-form-item></el-col></el-row><div style="display:flex;"><el-row style="flex:1;"><el-col :span="22"><el-form-item label="附件"><el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple><i class="el-icon-plus avatar-uploader-icon"> 添加图片 </i></el-upload></el-form-item></el-col></el-row><el-row style="flex:1;"><el-col :span="20"><el-form-item label="备注"><el-input v-model="textarea" type="textarea" :rows="8" placeholder="请输入内容" /></el-form-item></el-col></el-row></div></el-form></div>`]
     }
   },
   created() {
     this.getCreateUseData()
   },
-  motheds: {
+  methods: {
     getCreateUseData() {
       if (this.route.query.data) {
         createFolderData(this.formData).then(res => {
@@ -116,6 +156,17 @@ export default {
         })
       }
     },
+    forData(e) {
+      console.log('ss')
+    },
+
+    // 添加事件
+    addform(e) {
+      this.arr.push(this.$refs.div1.innerHTML)
+    },
+    deleteData(e) {
+      this.arr.splice(e, 1)
+    },
     caseCreateCase(vel, e) {
       if (e === '编辑') {
         updateCaseData(this.caseData).then(res => {
@@ -146,11 +197,6 @@ export default {
           }
         })
       }
-    },
-
-    // 添加事件
-    addform() {
-
     }
   }
 }
@@ -166,4 +212,12 @@ export default {
     justify-content: center;
     align-items: center;
   }
+  .avatar-uploader-icon {
+    font-size: 20px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
 </style>

src/views/Platform/useCase/queryUse.vue

@@ -0,0 +1,59 @@
+<template>
+  <div id="window-judge" style="background:#F2F3F6;min-height:95vh;">
+    <el-container>
+      <el-main style="background:#ffffff;height:auto; width:94%;margin:3%; font-size:14px;border-radius:8px;">
+        <el-form label-position="left" label-width="100px" :model="formLabelAlign">
+          <el-form-item label="用例优先级：">
+            {{ formLabelAlign.name }}
+          </el-form-item>
+          <el-form-item label="API：">
+            {{ formLabelAlign.region }}
+          </el-form-item>
+          <el-form-item label="前置条件:">
+            {{ formLabelAlign.type }}
+          </el-form-item>
+          <el-form-item label="预期结果:">
+            {{ formLabelAlign.type }}
+          </el-form-item>
+          <el-form-item label="附件:" />
+          <el-form-item label="备注:">
+            {{ formLabelAlign.type }}
+          </el-form-item>
+          <el-form-item label="创建人:">
+            {{ formLabelAlign.type }}
+          </el-form-item>
+          <el-form-item label="操作人:">
+            {{ formLabelAlign.type }}
+          </el-form-item>
+          <el-form-item label="创建时间:">
+            {{ formLabelAlign.type }}
+          </el-form-item>
+          <el-form-item label="修改时间:">
+            {{ formLabelAlign.type }}
+          </el-form-item>
+        </el-form>
+        <div align="center" style="margin: 5% 0;">
+          <el-button>返 回</el-button>
+        </div>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formLabelAlign: {
+        name: '你上课了',
+        region: '激动撒',
+        type: '大家阿克索德'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/Platform/useCasePage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="init-window" style="position:relative">
+  <div id="init-window" style="position:relative; min-height:95vh; background:#F2F3F6;">
     <router-view />
     <div style="position: absolute;width: 100%;">
       <div style="background:#F2F3F6;">
@@ -14,7 +14,7 @@
                 <el-button type="info" @click="createCase(formData)">新增</el-button>
               </span>
             </el-dialog>
-            <div v-show="createCaseCode" style="background: #E9EEF3; height:93vh; text-align:center; padding:50% 0;">
+            <div v-show="createCaseCode" style="background: #E9EEF3; height:88vh; text-align:center; padding:50% 0;">
               <p>请先创建任务，再继续·····</p>
               <el-button type="primary" @click="changeStartId">新 增</el-button>
             </div>
@@ -48,19 +48,23 @@
               </el-row>
               <el-row>
                 <el-col style="white-space:nowrap; display: flex; justify-content: center; align-items: center;margin:1.3% 0;">
-                  用例名<el-input v-model="createParticipation.folderName" placeholder="用例名" clearable style="width: 20%;margin: 0 2.5%;" class="filter-item" />
-                  优先级
-                  <el-select v-model="createParticipation.casePriority" style="width: 20%;margin: 0 2.5%;" clearable placeholder="优先级">
-                    <el-option v-for="item in priorityStrings" :key="item.value" :label="item.name" :value="item.value" />
-                  </el-select>
-                  api接口 <el-input v-model="createParticipation.api" placeholder="api接口" clearable style="width: 50%;margin-left:2.5%;" class="filter-item" />
+                  <div style="width:50%;white-space:nowrap; display: flex; justify-content: center; align-items: center;">
+                    序 列 号 &nbsp;<el-input v-model="createParticipation.folderName" placeholder="用例名" clearable style="width: 40%;margin: 0 2.5% 0 2%;" class="filter-item" />
+                    优先级
+                    <el-select v-model="createParticipation.casePriority" style="width: 40%;margin: 0 3% 0 3%;" clearable placeholder="优先级">
+                      <el-option v-for="item in priorityStrings" :key="item.value" :label="item.name" :value="item.value" />
+                    </el-select>
+                  </div>
+                  api接口<el-input v-model="createParticipation.api" placeholder="api接口" clearable style="width: 50%;margin-left:2.5%;" class="filter-item" />
                 </el-col>
               </el-row>
               <el-row>
                 <el-col style="white-space:nowrap; display: flex; justify-content: center; align-items: center;margin-bottom:1%;">
-                  创建时间
-                  <el-date-picker v-model="createParticipation.createTime" style="width:20%;margin: 0 3% 0 1%;" type="datetime" placeholder="开始日期" /> —
-                  <el-date-picker v-model="createParticipation.modifyTime" style="width:22.5%;margin: 0 3%;" type="datetime" placeholder="结束日期" />
+                  <div style="width:50%;white-space:nowrap; display: flex; justify-content: center; align-items: center;">
+                    创建时间
+                    <el-date-picker v-model="createParticipation.createTime" style="width:40%;margin: 0 4.5% 0 2%;" type="datetime" placeholder="开始日期" /><span style="margin: 0 1% 0 1% ;"> 一 </span>
+                    <el-date-picker v-model="createParticipation.modifyTime" style="width:40%;margin: 0 3.5% 0 4.5%;" type="datetime" placeholder="结束日期" />
+                  </div>
                   操作人 <el-input v-model="createParticipation.modifier" placeholder="创建人" clearable style="width: 50%;margin-left:2.5%;" class="filter-item" />
                   <input id="imFile" ref="imFile" type="file" style="display: none" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="importFile(this)">
                 </el-col>
@@ -428,6 +432,7 @@ export default {
       if (this.startId === '') {
         this.$notify({ title: '提示', message: '请选择目录', duration: 2000 })
       } else {
+        this.$router.push({ path: '/Platform/useCasePage/queryUse' })
         for (var vel of ele) {
           var obj = vel
         }
@@ -699,7 +704,4 @@ export default {
 </script>
 
 <style>
-.headerStyle {
-  margin:5px 0;
-  }
 </style>