<script setup>
import {onMounted, onBeforeMount, ref} from "vue";
import axios from "../http/axios";
import {ElMessage} from "element-plus";
import {useStore} from "vuex";
import defaultLogo from '../assets/logo.png'
const img = import.meta.globEager("./../assets/img/*")
const props = defineProps({
projectId: Number,
platform: Number,
caseId: Number
})
const store = useStore()
const testCase = ref({
id: null,
name: "",
platform: props.platform,
projectId: props.projectId,
module: "",
version: "",
designer: "",
des: ""
})
const moduleList = ref([])
const versionList = ref([])
const moduleValue = ref([])
const getImg = (name) => {
let result;
if (name === 'meizu') {
name = 'Meizu'
}
if (name === 'LENOVO') {
name = 'Lenovo'
}
try {
result = img['./../assets/img/' + name + '.jpg'].default
} catch {
result = img['./../assets/img/unName.jpg'].default
}
return result;
}
const platformList = [{name: "安卓", value: 1, img: "ANDROID"}
, {name: "iOS", value: 2, img: "IOS"}]
const caseStatusList = [{name: "制作中", value: 1}, {name: "完成制作", value: 2}, {name: "验证通过", value: 3}, {name: "验证失败", value: 4}, {name: "用例失效", value: 5}]
const emit = defineEmits(['flush']);
const caseForm = ref(null);
const summit = () => {
caseForm['value'].validate((valid) => {
if (valid) {
debugger
axios.put("/controller/testCases", testCase.value).then(resp => {
if (resp['code'] === 2000) {
ElMessage.success({
message: resp['message'],
});
emit("flush");
}
})
}
})
}
const getCaseInfo = (id) => {
debugger
axios.get("/controller/testCases", {params: {id}}).then(resp => {
if (resp['code'] === 2000) {
testCase.value = resp.data
}
})
}
const getModuleList = (e) => {
if (e) {
axios.get("/controller/modules/allList", {params: {projectId: props.projectId}}).then(resp => {
if (resp['code'] === 2000) {
moduleList.value = resp.data
}
})
// axios.get("/controller/modules/list/detail", {params: {projectId: props.projectId}}).then(resp => {
// if (resp['code'] === 2000) {
// moduleList.value = resp.data
// }
// })
}
}
const getVersionList = (e) => {
if (e) {
axios.get("/controller/versions/list", {params: {projectId: props.projectId}}).then(resp => {
if (resp['code'] === 2000) {
versionList.value = resp.data
}
})
}
}
/**
* 获取选择的模块类型数据,父子节点以数组方式传递
* 将获取到的数据赋值给测试用例的module属性
* @param value
*/
const getModuleChoose = (value) => {
if (value.length > 1){
testCase.value.module = value[0] + "," + value[1]
}else {
ElMessage.error({
message: "Illegal Data, please Contact administrator...",
})
}
}
/**
* 组件挂载到节点上之前执行
*/
onBeforeMount (() => {
getCaseInfoModule(props.caseId)
})
const getCaseInfoModule = (id) => {
axios.get("/controller/testCases", {params: {id}}).then(resp => {
if (resp['code'] === 2000) {
let mValueArray = resp.data.module.split(",")
moduleValue.value = [mValueArray[0],mValueArray[1]]
alert("getCaseInfoModule----->"+moduleValue.value)
}
})
}
/**
* 组件挂载完成后执行
*/
onMounted(() => {
if (props.caseId !== 0) {
getCaseInfo(props.caseId)
getModuleList(props.projectId)
}
})
</script>
<template>
<el-form
label-position="left"
class="demo-table-expand"
label-width="90px"
ref="caseForm"
:model="testCase"
size="small"
>
<el-form-item
prop="name"
label="用例名称"
:rules="{
required: true,
message: '请填写用例名称',
trigger: 'blur',
}"
>
<el-input v-model="testCase.name" size="mini" placeholder="输入用例名称"/>
</el-form-item>
<el-form-item
prop="projectId"
label="所属项目"
:rules="{
required: true,
message: '请选择项目',
trigger: 'change',
}"
>
<el-select
v-model="testCase.projectId"
placeholder="请选择项目"
>
<el-option
v-for="item in store.state.projectList"
:key="item.id"
:value="item.id"
:label="item['projectName']"
>
<div style=" display: flex;align-items: center;">
<el-avatar
style="margin-right: 10px"
:size="32"
:src="item['projectImg'].length>0?item['projectImg']:defaultLogo"
shape="square"
></el-avatar
>
{{ item['projectName'] }}
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item
prop="platform"
label="平台"
:rules="{
required: true,
message: '请选择平台',
trigger: 'change',
}"
>
<el-select
v-model="testCase.platform"
placeholder="请选择平台"
>
<el-option
v-for="item in platformList"
:key="item.name"
:value="item.value"
:label="item.name"
:disabled="item.disabled"
>
<div style="display: flex;align-items: center;justify-content: center">
<el-avatar
style="margin-right: 10px"
:size="32"
:src="getImg(item.img)"
shape="square"
></el-avatar
>
{{ item.name }}
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item
prop="testCaseStatus"
label="用例状态"
:rules="{
required: true,
message: '请选择测试用例状态',
trigger: 'change',
}"
>
<el-select
v-model="testCase.testCaseStatus"
placeholder="请选择用例状态"
>
<el-option
v-for="item in caseStatusList"
:key="item.name"
:value="item.value"
:label="item.name"
:disabled="item.disabled"
>
<div style="display: flex;align-items: center;justify-content: center">
{{ item.name }}
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="模块"
>
<!-- 留着备用-->
<el-cascader :options="moduleList"
v-model="moduleValue"
@visible-change="getModuleList"
:props="{ checkStrictly: false , label: 'label', value: 'value', children: 'children'}"
placeholder="请选择模快"
@change="getModuleChoose"
:show-all-levels="false">
</el-cascader>
<!-- <el-select-->
<!-- v-model="testCase.module"-->
<!-- placeholder="请选择模块"-->
<!-- @visible-change="getModuleList"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="item in moduleList"-->
<!-- :key="item.name"-->
<!-- :value="item.name"-->
<!-- :label="item.name"-->
<!-- >-->
<!-- </el-option>-->
<!-- </el-select>-->
</el-form-item>
<el-form-item
label="版本"
>
<el-select
v-model="testCase.version"
placeholder="请选择版本"
@visible-change="getVersionList"
>
<el-option
v-for="item in versionList"
:key="item['versionName']"
:value="item['versionName']"
:label="item['versionName']"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label="用例描述"
>
<el-input v-model="testCase.des"
:autosize="{ minRows: 3, maxRows: 7 }"
:maxlength="240"
show-word-limit
type="textarea" size="mini" placeholder="输入用例描述"/>
</el-form-item>
</el-form>
<div style="text-align: center;margin-top: 20px">
<el-button @click="summit" size="small" type="primary">提交</el-button>
</div>
</template>
一个页面,展示二级菜单
最新推荐文章于 2024-08-20 11:29:48 发布