Files
effekt-interface-frontend/src/components/TestPlatform/Case/CaseEditor.vue

117 lines
3.9 KiB
Vue

<template>
<div class="page-wrap">
<page-section :title="form.id ? '编辑用例' : '新建用例'">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" size="small">
<el-form-item label="项目ID">
<el-input v-model="projectId" style="width: 200px;"></el-input>
</el-form-item>
<el-form-item label="标题" prop="title">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="前置条件">
<el-input v-model="form.preconditions" type="textarea" :rows="3"></el-input>
</el-form-item>
<el-form-item label="步骤(JSON)" prop="steps">
<el-input v-model="stepsText" type="textarea" :rows="10"></el-input>
</el-form-item>
<el-form-item label="优先级">
<el-select v-model="form.priority">
<el-option label="P0" :value="0"></el-option>
<el-option label="P1" :value="1"></el-option>
<el-option label="P2" :value="2"></el-option>
<el-option label="P3" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="form.case_type">
<el-option label="功能" :value="1"></el-option>
<el-option label="性能" :value="2"></el-option>
<el-option label="安全" :value="3"></el-option>
<el-option label="接口" :value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item label="标签">
<el-input v-model="tagsText" placeholder="多个标签用逗号分隔"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="saving" @click="submitForm">保存</el-button>
<el-button @click="$router.push('/test-platform/cases')">返回</el-button>
</el-form-item>
</el-form>
</page-section>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { createCase, getCaseDetail, updateCase } from '@/api/caseApi'
export default {
name: 'CaseEditor',
components: { PageSection },
data() {
return {
saving: false,
projectId: this.$route.query.projectId || 1,
form: {
id: '',
title: '',
preconditions: '',
steps: [],
priority: 2,
case_type: 1,
tags: []
},
stepsText: '[]',
tagsText: '',
rules: {
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
steps: [{ required: true, message: '请输入步骤', trigger: 'change' }]
}
}
},
methods: {
fetchDetail() {
const caseId = this.$route.query.caseId
if (!caseId) {
return
}
getCaseDetail(this.projectId, caseId).then(res => {
const data = (res && res.data) || res || {}
this.form = Object.assign({}, this.form, data)
this.stepsText = JSON.stringify(data.steps || [], null, 2)
this.tagsText = (data.tags || []).join(',')
})
},
submitForm() {
try {
this.form.steps = JSON.parse(this.stepsText || '[]')
} catch (e) {
this.$message({ type: 'error', message: '步骤 JSON 格式错误' })
return
}
this.form.tags = this.tagsText ? this.tagsText.split(',').map(item => item.trim()).filter(Boolean) : []
this.saving = true
const request = this.form.id || this.$route.query.caseId
? updateCase(this.projectId, this.form.id || this.$route.query.caseId, this.form)
: createCase(this.projectId, this.form)
request.then(() => {
this.$message({ type: 'success', message: '保存成功' })
this.$router.push({ path: '/test-platform/cases', query: { projectId: this.projectId } })
}).finally(() => {
this.saving = false
})
}
},
created() {
this.fetchDetail()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>