You can listen to the click event of the child control, and call e.stopPropagation() to prevent the click event from continuing to pass, so that the outer folding panel parent control will not receive the click event
Code:
<template>
<div>
<a-collapse @change="handleCollapseChange($event, step, index)" draggable="true" @dragstart.native="dragStart($event, step, index)">
<a-collapse-panel key="1" :forceRender="true">
<span slot="header">
<!--编辑页面使用-->
<span v-if="(step.sceneStepType === 'HTTP用例') || (step.sceneStepType === 'RPC用例') || (step.sceneStepType === '场景用例')">Step{
{
index + 1}} {
{
step.sceneStepName}}</span>
<span v-if="step.sceneStepType === 'GET请求'">Step{
{
index + 1}}
<a-input style="width: 20%" v-model="step.sceneStepName" @click="handleGetRequestChange($event, step)"></a-input>
</span>
<span v-if="step.sceneStepType === '条件' && !step.hasOwnProperty('sceneCaseStepResult')">Step{
{
index + 1}} If
<a-input style="width: 10%" v-model="step.sceneFirstExpression" @click="handleFirstExpressionChange($event, step)"></a-input>
<a-select style="width: 10%" v-decorator="['sceneExpressionJudgeCondition',{ initialValue: step.sceneExpressionJudgeCondition, rules: [{message: 'Please select your gender!' }] },]" placeholder="Select a option and change input text above" @change="handleSelectChange($event, step)">
<a-select-option v-for="item in stepResultVerifyList" :value="item" :key="item">
{
{
item}}
</a-select-option>
</a-select>
<a-input style="width: 10%" v-model="step.sceneSecondExpression" @click="handleSecondExpressionChange($event, step)"></a-input>
</span>
<span style="float: right;"><a-icon type="delete" @click="deleteSceneCaseStepById"/></span>
<!--历史记录查看详情使用-->
<span v-if="step.hasOwnProperty('interfaceType')">
<span>Step{
{
index + 1}} {
{
step.testpoint}} <span style="float: right">运行结果：<a-icon v-if="step.result === 'T'" type="check" style="color: green"/><a-icon v-else type="close" style="color: red"/></span></span>
</span>
<span v-if="step.sceneStepType === '条件' && step.hasOwnProperty('sceneCaseStepResult')">Step{
{
index + 1}} If
<a-input style="width: 10%" v-model="step.sceneFirstExpression" @click="handleFirstExpressionChange($event, step)"></a-input>
<a-select style="width: 10%" v-decorator="['sceneExpressionJudgeCondition',{ initialValue: step.sceneExpressionJudgeCondition, rules: [{message: 'Please select your gender!' }] },]" placeholder="Select a option and change input text above" @change="handleSelectChange($event, step)">
<a-select-option v-for="item in stepResultVerifyList" :value="item" :key="item">
{
{
item}}
</a-select-option>
</a-select>
<a-input style="width: 10%" v-model="step.sceneSecondExpression" @click="handleSecondExpressionChange($event, step)"></a-input>
<span>(1 = 01)</span>
<span style="float: right">判断结果：<a-icon v-if="step.sceneCaseStepResult === 'T'" type="check" style="color: green"/><a-icon v-else type="close" style="color: red"/></span>
</span>
<span v-if="step.sceneStepType === '等待'">Step{
{
index + 1}} 等待 <a-input style="width: 10%" v-model="step.sceneStepWaitingtime" @click="handleWaitTimeChange($event, step)"></a-input> 毫秒</span>
</span>
<!--折叠面板内容-->
<!--编辑页面使用-->
<div v-if="step.sceneStepType === 'GET请求' && !step.hasOwnProperty('sceneCaseStepResult')">
<a-input v-model="step.sceneStepGetUrl" @click="handleGetUrlChange($event, step)"></a-input>
<br/>
<scene-case-step-get-request ref="sceneCaseStepGetRequestObj" @fromSceneCaseStepGetRequest="fromSceneCaseStepGetRequest(step, $event)"/>
</div>
<!--历史记录查看详情使用-->
<div v-if="step.hasOwnProperty('interfaceType')">
<interface-case-debug-common-details ref="interfaceCaseDebugCommonDetailsObj" :caseTotalData="step"/>
</div>
<div v-if="step.sceneStepType === 'GET请求' && step.hasOwnProperty('sceneCaseStepResult')">
<interface-case-debug-common-details ref="interfaceCaseDebugCommonDetailsObj" :caseTotalData="step"/>
</div>
</a-collapse-panel>
</a-collapse>
</div>
</template>
<script>
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import SceneCaseAddStep from './SceneCaseAddStep'
import SceneCaseStepGetRequest from './SceneCaseStepGetRequest'
import InterfaceCaseDebugCommonDetails from '../case_management_interface_case_debug_history/InterfaceCaseDebugCommonDetails'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import {
deleteSceneStepByStepId} from '../../../../utils/testcenter/api'
export default {
name: 'SceneCaseCommonStepsPage',
components: {
ATextarea, InterfaceCaseDebugCommonDetails, ARow, ACol, SceneCaseAddStep, SceneCaseStepGetRequest},
props: ['step', 'index'],
data () {
return {
stepResultVerifyList: ['等于', '不等于', '包含', '不包含', '大于', '小于']
}
},
mounted () {
console.log('进入 SceneCaseCommonStepsPage mounted方法')
},
methods: {
handleCollapseChange (e, step, index) {
if (step.sceneStepType === 'GET请求' && !step.hasOwnProperty('sceneCaseStepResult')) {
this.$nextTick(function () {
console.log('this.$refs.sceneCaseStepGetRequestObj:', this.$refs.sceneCaseStepGetRequestObj)
console.log('step.sceneStepGetParams: ' + step.sceneStepGetParams, 'step.sceneStepGetHeader: ' + step.sceneStepGetHeader)
if (step.sceneStepGetParams !== '[]' && step.sceneStepGetParams !== undefined) {
this.$refs.sceneCaseStepGetRequestObj.paramsData = JSON.parse(step.sceneStepGetParams)
}
if (step.sceneStepGetHeader !== '[]' && step.sceneStepGetParams !== undefined) {
this.$refs.sceneCaseStepGetRequestObj.headersData = JSON.parse(step.sceneStepGetHeader)
}
})
}
if (step.hasOwnProperty('interfaceType')) {
console.log('this.$refs.interfaceCaseDebugCommonDetailsObj:', this.$refs.interfaceCaseDebugCommonDetailsObj)
}
},
handleGetRequestChange (e, step) {
console.log('13', step.sceneStepName)
console.log('编辑Get请求类型步骤的步骤名：', e.target.value)
e.stopPropagation()
},
handleFirstExpressionChange (e, step) {
console.log('编辑条件类型的第一个表达式：', e.target.value)
e.stopPropagation()
},
handleSecondExpressionChange (e, step) {
console.log('编辑条件类型的第二个表达式：', e.target.value)
e.stopPropagation()
},
handleWaitTimeChange (e, step) {
console.log('编辑等待类型步骤的时间：', e.target.value)
e.stopPropagation()
},
handleGetUrlChange (e, step) {
console.log('编辑Get请求类型步骤的步骤名：', e.target.value)
e.stopPropagation()
},
fromSceneCaseStepGetRequest (step, data) {
console.log('获取到编辑之后的get请求参数和请求头信息' + JSON.stringify(data))
step.sceneStepGetParams = JSON.stringify(data.paramsData)
step.sceneStepGetHeader = JSON.stringify(data.headersData)
step.sceneStepGetExpectResponse = data.sceneStepGetExpectResponse
step.sceneStepExtractJsonPath = data.sceneStepExtractJsonPath
console.log('更新了url和请求头信息的step信息：' + JSON.stringify(step))
},
handleSelectChange (value, step) {
console.log(`selected ${
value}`)
step['sceneExpressionJudgeCondition'] = value
},
dragStart (e, step, index) {
console.log('dragStart e', e)
// e.dataTransfer.setData('my-info', 'hello')
// e.dataTransfer.setData('my-extra-info', 'world')
this.$emit('fromSceneCaseCommonStepsPage', step)
},
deleteSceneCaseStepById (sceneStepId) {
deleteSceneStepByStepId({
sceneStepId: sceneStepId}).then(res => {
if (res.data.result === 'success') {
this.$message.info('删除场景用例步骤成功')
} else {
this.$message.info('删除场景用例步骤失败')
}
})
}
}
}
</script>
<style scoped>
</style>