Skip to content

Commit

Permalink
style: 调整用例详情页基础布局
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaoxiaolulu
xiaoxiaolulu committed Sep 27, 2024
1 parent 0c91752 commit 7a6573b
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 128 deletions.
33 changes: 13 additions & 20 deletions unit-backend/.idea/workspace.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

245 changes: 137 additions & 108 deletions web/src/views/https/case/components/detail.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,129 +18,154 @@
<el-row :gutter="12">
<el-col :span="18">
<el-card style="height:100%;min-height: 600px;overflow:scroll;">
<template #header>
<div>
<span style="font-size: 18px; color: #7a8b9a">用例步骤</span>
</div>
</template>
<div>
<div style="margin-top: 15px">
<el-table
:data="tableData"
:header-cell-style="{ background: '#F2F3F8', color: '#1D2129' }"
style="width: 100%"
ref="dragTable"
row-key="id"
:show-header="false"
>
<el-table-column width="30">
<template #default>
<el-tabs v-model="SettingActiveName" style="overflow-y: auto">
<el-tab-pane name='TestConfiguration'>
<template #label>
<strong>测试步骤</strong>
</template>
<div>
<div style="margin-top: 15px">
<el-table
:data="tableData"
:header-cell-style="{ background: '#F2F3F8', color: '#1D2129' }"
style="width: 100%"
ref="dragTable"
row-key="id"
:show-header="false"
>
<el-table-column width="30">
<template #default>
<span
:class="getStepTypeInfo('api','icon')" class="fab-icons move"
:style="{color:getStepTypeInfo('api','color')}"
></span>
</template>
</el-table-column>
<el-table-column width="80">
<template #default="scope">
<div>
<div>
</template>
</el-table-column>
<el-table-column width="80">
<template #default="scope">
<div>
<div>
<span :class="`opblock-${scope.row.method.toLowerCase()}`">
{{ scope.row.method }}
</span>

</div>
</div>
</template>
</el-table-column>
<el-table-column>
<template #default="scope">
<div>
</div>
</div>
</template>
</el-table-column>
<el-table-column>
<template #default="scope">
<div>
<span class="opblock-summary-description">
{{ scope.row.name }}
</span>
</div>
</template>
</el-table-column>
</el-table>
<el-dropdown :hide-on-click="false" style="width: 100%">
<el-button size="small" style="width: 100%">
<el-icon style="margin-right: 4px">
<plus/>
</el-icon>
添加步骤
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="(value, key) in state.optTypes"
:key="key"
style="margin: 5px 0"
:style="{ color: getStepTypeInfo(key,'color')}"
@click="handleAddData(key)">

<i :class="getStepTypeInfo(key,'icon')" class="fab-icons"
:style="{color:getStepTypeInfo(key,'color')}"></i>
{{ value }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<step
ref="stepControllerRef"
use_type="case"
style="margin-bottom: 10px"
v-model="state.form.step_data"
@change="changeAction"
>
</step>
</div>
</template>
</el-table-column>
</el-table>
<el-dropdown :hide-on-click="false" style="width: 100%">
<el-button size="small" style="width: 100%">
<el-icon style="margin-right: 4px">
<plus/>
</el-icon>
添加步骤
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="(value, key) in state.optTypes"
:key="key"
style="margin: 5px 0"
:style="{ color: getStepTypeInfo(key,'color')}"
@click="handleAddData(key)">

<i :class="getStepTypeInfo(key,'icon')" class="fab-icons"
:style="{color:getStepTypeInfo(key,'color')}"></i>
{{ value }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<step
ref="stepControllerRef"
use_type="case"
style="margin-bottom: 10px"
v-model="state.form.step_data"
@change="changeAction"
>
</step>
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
<el-col :span="6">
<el-card style="height:100%;min-height: 600px;overflow:scroll;">
<template #header>
<div>
<span style="margin-right:8px;color: #7a8b9a"><el-icon><component :is="Odometer"/></el-icon></span>
<span style="font-size: 18px; color: #7a8b9a">用例配置</span>
</div>
</template>
<div>
<el-form
autoComplete="on"
:model="state.form"
:rules="rules"
ref="ruleFormRef"
label-position="right"
label-width="auto"
size="small"
>
<el-form-item label="用例名称：" prop="name" :required="true">
<el-input v-model.trim="state.form.name"
style="width: 100%;"
size="small"
placeholder="请输入用例名称"></el-input>
</el-form-item>
<el-form-item label="优先级：" prop="priority" :required="true">
<el-select v-model="state.form.priority" filterable placeholder="请选择接口优先级" size="small">
<el-option
v-for="item in priority"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="用例描述：" prop="">
<el-input v-model.trim="state.form.remarks"
style="width: 100%;"
size="small"
placeholder="请输入用例描述"></el-input>
</el-form-item>
</el-form>
<el-button type="success" @click="debug(ruleFormRef)" size="small" :loading="loading">调试</el-button>
<el-button type="primary" @click="onSureClick(ruleFormRef)" size="small">保存</el-button>
</div>
<el-tabs v-model="TestActiveName" style="overflow-y: auto">
<el-tab-pane name='FunctionalTests'>
<template #label>
<strong>功能测试</strong>
</template>
<div>
<el-form
autoComplete="on"
:model="state.form"
:rules="rules"
ref="ruleFormRef"
label-position="right"
label-width="auto"
size="small"
>
<el-form-item label="用例名称：" prop="name" :required="true">
<el-input v-model.trim="state.form.name"
style="width: 100%;"
size="small"
placeholder="请输入用例名称"></el-input>
</el-form-item>
<el-form-item label="优先级：" prop="priority" :required="true">
<el-select v-model="state.form.priority" filterable placeholder="请选择接口优先级" size="small">
<el-option
v-for="item in priority"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="用例描述：" prop="">
<el-input v-model.trim="state.form.remarks"
style="width: 100%;"
size="small"
placeholder="请输入用例描述"></el-input>
</el-form-item>
<el-form-item
style="width: 100%;"
>
<el-button
style="width: 100%;"
round
type="success"
@click="debug(ruleFormRef)"
size="small"
:loading="loading"
>调试
</el-button>
</el-form-item>
<el-form-item
style="width: 100%;"
>
<el-button
style="width: 100%;"
round type="primary"
@click="onSureClick(ruleFormRef)"
size="small">
保存
</el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
Expand Down Expand Up @@ -168,6 +193,10 @@ const ruleFormRef = ref<FormInstance>()
const tableData = reactive([
])
const TestActiveName = ref('FunctionalTests')
const SettingActiveName = ref('TestConfiguration')
const loading = ref(false)
const createForm = () => {
Expand Down

0 comments on commit 7a6573b

Please sign in to comment.