feat(测试用例): 查看测试用例页面添加评论组件

This commit is contained in:
shiziyuan9527 2020-12-21 11:13:07 +08:00
parent c7da0346ab
commit 0540e15e86
3 changed files with 154 additions and 145 deletions

View File

@ -47,9 +47,7 @@
}, },
methods: { methods: {
handleSelect(index) { handleSelect(index) {
console.log(index)
this.activeIndex = index this.activeIndex = index
}, },
active() { active() {
if (this.activeIndex === '/api') { if (this.activeIndex === '/api') {

View File

@ -1,163 +1,174 @@
<template> <template>
<el-form :model="form" ref="caseFrom" v-loading="result.loading"> <el-row :gutter="10">
<el-col :span="16">
<el-card>
<el-form :model="form" ref="caseFrom" v-loading="result.loading">
<el-row> <el-row>
<el-col :span="10" :offset="1"> <el-col :span="10" :offset="1">
<el-form-item <el-form-item
:placeholder="$t('test_track.case.input_name')" :placeholder="$t('test_track.case.input_name')"
:label="$t('test_track.case.name')" :label="$t('test_track.case.name')"
:label-width="formLabelWidth" :label-width="formLabelWidth"
prop="name"> prop="name">
<el-input class="case-name" :disabled="readOnly" v-model="testCase.name"></el-input> <el-input class="case-name" :disabled="readOnly" v-model="testCase.name"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item :label="$t('test_track.case.module')" :label-width="formLabelWidth" prop="module"> <el-form-item :label="$t('test_track.case.module')" :label-width="formLabelWidth" prop="module">
<el-input class="case-name" :disabled="readOnly" v-model="testCase.nodePath"></el-input> <el-input class="case-name" :disabled="readOnly" v-model="testCase.nodePath"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="10" :offset="1"> <el-col :span="10" :offset="1">
<el-form-item :label="$t('test_track.case.maintainer')" :label-width="formLabelWidth" prop="maintainer"> <el-form-item :label="$t('test_track.case.maintainer')" :label-width="formLabelWidth" prop="maintainer">
<el-select :disabled="readOnly" v-model="testCase.maintainer" <el-select :disabled="readOnly" v-model="testCase.maintainer"
:placeholder="$t('test_track.case.input_maintainer')" filterable> :placeholder="$t('test_track.case.input_maintainer')" filterable>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item :label="$t('test_track.case.priority')" :label-width="formLabelWidth" prop="priority"> <el-form-item :label="$t('test_track.case.priority')" :label-width="formLabelWidth" prop="priority">
<el-select :disabled="readOnly" v-model="testCase.priority" clearable <el-select :disabled="readOnly" v-model="testCase.priority" clearable
:placeholder="$t('test_track.case.input_priority')"> :placeholder="$t('test_track.case.input_priority')">
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="10" :offset="1"> <el-col :span="10" :offset="1">
<el-form-item :label="$t('test_track.case.type')" :label-width="formLabelWidth" prop="type"> <el-form-item :label="$t('test_track.case.type')" :label-width="formLabelWidth" prop="type">
<el-select :disabled="readOnly" v-model="testCase.type" <el-select :disabled="readOnly" v-model="testCase.type"
:placeholder="$t('test_track.case.input_type')"> :placeholder="$t('test_track.case.input_type')">
<el-option :label="$t('commons.functional')" value="functional"></el-option> <el-option :label="$t('commons.functional')" value="functional"></el-option>
<el-option :label="$t('commons.performance')" value="performance"></el-option> <el-option :label="$t('commons.performance')" value="performance"></el-option>
<el-option :label="$t('commons.api')" value="api"></el-option> <el-option :label="$t('commons.api')" value="api"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item :label="$t('test_track.case.method')" :label-width="formLabelWidth" prop="method"> <el-form-item :label="$t('test_track.case.method')" :label-width="formLabelWidth" prop="method">
<el-select :disabled="readOnly" v-model="testCase.method" :placeholder="$t('test_track.case.input_method')"> <el-select :disabled="readOnly" v-model="testCase.method" :placeholder="$t('test_track.case.input_method')">
<el-option :label="$t('test_track.case.auto')" value="auto"></el-option> <el-option :label="$t('test_track.case.auto')" value="auto"></el-option>
<el-option :label="$t('test_track.case.manual')" value="manual"></el-option> <el-option :label="$t('test_track.case.manual')" value="manual"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row v-if="testCase.method && testCase.method == 'auto'"> <el-row v-if="testCase.method && testCase.method == 'auto'">
<el-col :span="10" :offset="1"> <el-col :span="10" :offset="1">
<el-form-item :label="$t('test_track.case.relate_test')" :label-width="formLabelWidth" prop="testId"> <el-form-item :label="$t('test_track.case.relate_test')" :label-width="formLabelWidth" prop="testId">
<el-select filterable :disabled="readOnly" v-model="testCase.testId" <el-select filterable :disabled="readOnly" v-model="testCase.testId"
:placeholder="$t('test_track.case.input_type')"> :placeholder="$t('test_track.case.input_type')">
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" v-if="testCase.testId=='other'"> <el-col :span="12" v-if="testCase.testId=='other'">
<el-form-item :label="$t('test_track.case.test_name')" :label-width="formLabelWidth" prop="testId"> <el-form-item :label="$t('test_track.case.test_name')" :label-width="formLabelWidth" prop="testId">
<el-input v-model="testCase.otherTestName" :placeholder="$t('test_track.case.input_test_case')" <el-input v-model="testCase.otherTestName" :placeholder="$t('test_track.case.input_test_case')"
:disabled="readOnly"></el-input> :disabled="readOnly"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row style="margin-top: 15px;"> <el-row style="margin-top: 15px;">
<el-col :offset="1">{{ $t('test_track.case.prerequisite') }}:</el-col> <el-col :offset="1">{{ $t('test_track.case.prerequisite') }}:</el-col>
</el-row> </el-row>
<el-row type="flex" justify="center" style="margin-top: 10px;"> <el-row type="flex" justify="center" style="margin-top: 10px;">
<el-col :span="22"> <el-col :span="22">
<el-form-item prop="prerequisite"> <el-form-item prop="prerequisite">
<el-input :disabled="readOnly" v-model="testCase.prerequisite" <el-input :disabled="readOnly" v-model="testCase.prerequisite"
type="textarea" type="textarea"
:autosize="{ minRows: 2, maxRows: 4}" :autosize="{ minRows: 2, maxRows: 4}"
:rows="2" :rows="2"
:placeholder="$t('test_track.case.input_prerequisite')"></el-input> :placeholder="$t('test_track.case.input_prerequisite')"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row v-if="testCase.method && testCase.method != 'auto'" style="margin-bottom: 10px"> <el-row v-if="testCase.method && testCase.method != 'auto'" style="margin-bottom: 10px">
<el-col :offset="1">{{ $t('test_track.case.steps') }}:</el-col> <el-col :offset="1">{{ $t('test_track.case.steps') }}:</el-col>
</el-row> </el-row>
<el-row v-if="testCase.method && testCase.method != 'auto'" type="flex" justify="center"> <el-row v-if="testCase.method && testCase.method != 'auto'" type="flex" justify="center">
<el-col :span="22"> <el-col :span="22">
<el-table <el-table
v-if="isStepTableAlive" v-if="isStepTableAlive"
:data="JSON.parse(testCase.steps)" :data="JSON.parse(testCase.steps)"
class="tb-edit" class="tb-edit"
border border
size="mini"
:default-sort="{prop: 'num', order: 'ascending'}"
highlight-current-row>
<el-table-column :label="$t('test_track.case.number')" prop="num" min-width="15%"></el-table-column>
<el-table-column :label="$t('test_track.case.step_desc')" prop="desc" min-width="35%">
<template v-slot:default="scope">
<el-input
class="table-edit-input"
size="mini" size="mini"
:disabled="readOnly" :default-sort="{prop: 'num', order: 'ascending'}"
type="textarea" highlight-current-row>
:autosize="{ minRows: 1, maxRows: 6}" <el-table-column :label="$t('test_track.case.number')" prop="num" min-width="15%"></el-table-column>
:rows="2" <el-table-column :label="$t('test_track.case.step_desc')" prop="desc" min-width="35%">
v-model="scope.row.desc" <template v-slot:default="scope">
:placeholder="$t('commons.input_content')" <el-input
clearable/> class="table-edit-input"
</template> size="mini"
</el-table-column> :disabled="readOnly"
<el-table-column :label="$t('test_track.case.expected_results')" prop="result" min-width="35%"> type="textarea"
<template v-slot:default="scope"> :autosize="{ minRows: 1, maxRows: 6}"
<el-input :rows="2"
class="table-edit-input" v-model="scope.row.desc"
size="mini" :placeholder="$t('commons.input_content')"
:disabled="readOnly" clearable/>
type="textarea" </template>
:autosize="{ minRows: 1, maxRows: 6}" </el-table-column>
:rows="2" <el-table-column :label="$t('test_track.case.expected_results')" prop="result" min-width="35%">
v-model="scope.row.result" <template v-slot:default="scope">
:placeholder="$t('commons.input_content')" <el-input
clearable/> class="table-edit-input"
</template> size="mini"
</el-table-column> :disabled="readOnly"
</el-table> type="textarea"
</el-col> :autosize="{ minRows: 1, maxRows: 6}"
</el-row> :rows="2"
v-model="scope.row.result"
:placeholder="$t('commons.input_content')"
clearable/>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<el-row style="margin-top: 15px;margin-bottom: 10px"> <el-row style="margin-top: 15px;margin-bottom: 10px">
<el-col :offset="1">{{ $t('commons.remark') }}:</el-col> <el-col :offset="1">{{ $t('commons.remark') }}:</el-col>
</el-row> </el-row>
<el-row type="flex" justify="center"> <el-row type="flex" justify="center">
<el-col :span="22"> <el-col :span="22">
<el-form-item prop="remark"> <el-form-item prop="remark">
<el-input v-model="testCase.remark" <el-input v-model="testCase.remark"
:autosize="{ minRows: 2, maxRows: 4}" :autosize="{ minRows: 2, maxRows: 4}"
type="textarea" type="textarea"
:disabled="readOnly" :disabled="readOnly"
:rows="2" :rows="2"
:placeholder="$t('commons.input_content')"></el-input> :placeholder="$t('commons.input_content')"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-card>
</el-col>
<el-col :span="8">
<case-comment :case-id="testCaseId"/>
</el-col>
</el-row>
</template> </template>
<script> <script>
import CaseComment from "@/business/components/track/case/components/CaseComment";
export default { export default {
name: "TestCaseDetail", name: "TestCaseDetail",
components: {CaseComment},
data() { data() {
return { return {
result: {}, result: {},

View File

@ -62,7 +62,7 @@
<el-popover <el-popover
placement="right-end" placement="right-end"
:title="$t('test_track.case.view_case')" :title="$t('test_track.case.view_case')"
width="60%" width="70%"
trigger="hover" trigger="hover"
> >
<test-case-detail v-if="currentCaseId === scope.row.id" :test-case-id="currentCaseId"/> <test-case-detail v-if="currentCaseId === scope.row.id" :test-case-id="currentCaseId"/>