feat(devops): 重构流水线任务构建器界面布局并添加参数配置功能
- 将界面改为左右两列布局，左侧显示节点演示和选项预览，右侧显示参数设置 - 添加 CutePage 组件包装各个功能区域 - 重构按钮组配置，区分链接和执行服务两种类型的执行动作配置 - 添加节点参数表格配置功能 - 更新请求URL模板，使用管道实例节点ID作为参数 - 添加默认参数列表配置示例
This commit is contained in:
@@ -1,162 +1,197 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<el-row>
|
||||||
<el-divider content-position="left">节点演示</el-divider>
|
<el-col :span="12">
|
||||||
<div style="padding-left: 15px">
|
<CutePage>
|
||||||
<pipe-task
|
<el-divider content-position="left">节点演示</el-divider>
|
||||||
:name="`${name}(Pending状态)`"
|
<div style="padding-left: 15px">
|
||||||
:code="code"
|
<pipe-task
|
||||||
:click="click"
|
:name="`${name}(Pending状态)`"
|
||||||
:retry="retry"
|
:code="code"
|
||||||
:detail-type="detailType"
|
:click="click"
|
||||||
:button-list="buttonList"
|
:retry="retry"
|
||||||
status="pending"
|
:detail-type="detailType"
|
||||||
status-desc="待执行"
|
:button-list="buttonList"
|
||||||
desc="待执行"
|
status="pending"
|
||||||
:duration-millis="0"
|
status-desc="待执行"
|
||||||
/>
|
desc="待执行"
|
||||||
<pipe-task
|
:duration-millis="0"
|
||||||
:name="`${name}(Running状态)`"
|
/>
|
||||||
:code="code"
|
<pipe-task
|
||||||
:click="click"
|
:name="`${name}(Running状态)`"
|
||||||
:retry="retry"
|
:code="code"
|
||||||
:detail-type="detailType"
|
:click="click"
|
||||||
:button-list="buttonList"
|
:retry="retry"
|
||||||
status="running"
|
:detail-type="detailType"
|
||||||
status-desc="执行中"
|
:button-list="buttonList"
|
||||||
desc="执行中"
|
status="running"
|
||||||
:start-time-millis="1767237071000"
|
status-desc="执行中"
|
||||||
/>
|
desc="执行中"
|
||||||
<pipe-task
|
:start-time-millis="1767237071000"
|
||||||
:name="`${name}(Success状态)`"
|
/>
|
||||||
:code="code"
|
<pipe-task
|
||||||
:click="click"
|
:name="`${name}(Success状态)`"
|
||||||
:retry="retry"
|
:code="code"
|
||||||
:detail-type="detailType"
|
:click="click"
|
||||||
:button-list="buttonList"
|
:retry="retry"
|
||||||
status="success"
|
:detail-type="detailType"
|
||||||
status-desc="执行成功"
|
:button-list="buttonList"
|
||||||
desc="执行成功"
|
status="success"
|
||||||
:duration-millis="1767237071"
|
status-desc="执行成功"
|
||||||
/>
|
desc="执行成功"
|
||||||
<pipe-task
|
:duration-millis="1767237071"
|
||||||
:name="`${name}(Failed状态)`"
|
/>
|
||||||
:code="code"
|
<pipe-task
|
||||||
:click="click"
|
:name="`${name}(Failed状态)`"
|
||||||
:retry="retry"
|
:code="code"
|
||||||
:detail-type="detailType"
|
:click="click"
|
||||||
:button-list="buttonList"
|
:retry="retry"
|
||||||
status="failed"
|
:detail-type="detailType"
|
||||||
status-desc="执行失败"
|
:button-list="buttonList"
|
||||||
desc="执行失败"
|
status="failed"
|
||||||
:duration-millis="1767237071"
|
status-desc="执行失败"
|
||||||
/>
|
desc="执行失败"
|
||||||
</div>
|
:duration-millis="1767237071"
|
||||||
<el-divider content-position="left">节点选项(预览)</el-divider>
|
/>
|
||||||
<el-form ref="form" :model="parameters" label-width="160px">
|
</div>
|
||||||
<el-form-item
|
</CutePage>
|
||||||
v-for="(paramCode, index) in Object.keys(parameters)"
|
<CutePage>
|
||||||
:key="`paramKey_${index}`"
|
<el-divider content-position="left">节点选项(预览)</el-divider>
|
||||||
:label="`${parameters[paramCode].name}(${paramCode})`"
|
<el-form ref="form" :model="parameters" label-width="160px">
|
||||||
>
|
<el-form-item
|
||||||
<el-select
|
v-for="(paramCode, index) in Object.keys(parameters)"
|
||||||
v-model="parameters[paramCode].value"
|
:key="`paramKey_${index}`"
|
||||||
:placeholder="`请选择${parameters[paramCode].name}`"
|
:label="`${parameters[paramCode].name}(${paramCode})`"
|
||||||
clearable
|
>
|
||||||
filterable
|
<el-select
|
||||||
>
|
v-model="parameters[paramCode].value"
|
||||||
<el-option v-for="(item, index2) in parameters[paramCode].dataSource" :key="`item_${index2}`" :label="item.label" :value="item.value" />
|
:placeholder="`请选择${parameters[paramCode].name}`"
|
||||||
</el-select>
|
clearable
|
||||||
</el-form-item>
|
filterable
|
||||||
</el-form>
|
>
|
||||||
<el-divider content-position="left">节点参数设置</el-divider>
|
<el-option v-for="(item, index2) in parameters[paramCode].dataSource" :key="`item_${index2}`" :label="item.label" :value="item.value" />
|
||||||
<el-form label-width="140px">
|
</el-select>
|
||||||
<el-form-item label="节点名称">
|
</el-form-item>
|
||||||
<el-input v-model="name" />
|
</el-form>
|
||||||
</el-form-item>
|
</CutePage>
|
||||||
<el-form-item label="节点编码">
|
</el-col>
|
||||||
<el-input v-model="code" />
|
<el-col :span="12">
|
||||||
</el-form-item>
|
<CutePage>
|
||||||
<el-form-item label="是否支持点击">
|
<el-divider content-position="left">节点参数设置</el-divider>
|
||||||
<el-switch v-model="click" />
|
<el-form label-width="140px">
|
||||||
</el-form-item>
|
<el-form-item label="节点名称">
|
||||||
<el-form-item v-if="click" label="点击明细类型">
|
<el-input v-model="name" />
|
||||||
<el-select
|
</el-form-item>
|
||||||
v-model="detailType"
|
<el-form-item label="节点编码">
|
||||||
placeholder="请选择明细类型"
|
<el-input v-model="code" />
|
||||||
clearable
|
</el-form-item>
|
||||||
allow-create
|
<el-form-item label="是否支持点击">
|
||||||
filterable
|
<el-switch v-model="click" />
|
||||||
>
|
</el-form-item>
|
||||||
<el-option label="Gitlab" value="gitlab" />
|
<el-form-item v-if="click" label="点击明细类型">
|
||||||
<el-option label="Jenkins" value="jenkins" />
|
<el-select
|
||||||
</el-select>
|
v-model="detailType"
|
||||||
</el-form-item>
|
placeholder="请选择明细类型"
|
||||||
<el-form-item label="是否支持重试">
|
clearable
|
||||||
<el-switch v-model="retry" />
|
allow-create
|
||||||
</el-form-item>
|
filterable
|
||||||
<el-form-item label="是否可交互(运行态)">
|
>
|
||||||
<el-switch v-model="hasButtonList" />
|
<el-option label="Gitlab" value="gitlab" />
|
||||||
</el-form-item>
|
<el-option label="Jenkins" value="jenkins" />
|
||||||
<el-form-item label="按钮组">
|
</el-select>
|
||||||
<el-table :data="buttonList">
|
</el-form-item>
|
||||||
<el-table-column prop="text" label="按钮名称" width="180">
|
<el-form-item label="是否支持重试">
|
||||||
<template v-slot="scope">
|
<el-switch v-model="retry" />
|
||||||
<el-input v-model="scope.row.text" />
|
</el-form-item>
|
||||||
</template>
|
<el-form-item label="是否可交互(运行态)">
|
||||||
</el-table-column>
|
<el-switch v-model="hasButtonList" />
|
||||||
<el-table-column prop="type" label="按钮类型" width="150">
|
</el-form-item>
|
||||||
<template v-slot="scope">
|
<el-form-item label="按钮组">
|
||||||
<el-select
|
<el-table :data="buttonList">
|
||||||
v-model="scope.row.type"
|
<el-table-column prop="text" label="按钮名称" width="180">
|
||||||
placeholder="请选择按钮类型"
|
<template v-slot="scope">
|
||||||
clearable
|
<el-input v-model="scope.row.text" />
|
||||||
>
|
</template>
|
||||||
<el-option label="执行Service" value="execute" />
|
</el-table-column>
|
||||||
<el-option label="打开链接" value="link" />
|
<el-table-column prop="type" label="按钮类型" width="150">
|
||||||
</el-select>
|
<template v-slot="scope">
|
||||||
</template>
|
<el-select
|
||||||
</el-table-column>
|
v-model="scope.row.type"
|
||||||
<el-table-column prop="blank" label="是否新开窗口" width="100">
|
placeholder="请选择按钮类型"
|
||||||
<template v-slot="scope">
|
clearable
|
||||||
<el-switch v-model="scope.row.blank" :disabled="scope.row.type === 'execute'" />
|
>
|
||||||
</template>
|
<el-option label="执行Service" value="execute" />
|
||||||
</el-table-column>
|
<el-option label="打开链接" value="link" />
|
||||||
<el-table-column prop="linkUrl" label="打开链接">
|
</el-select>
|
||||||
<template v-slot="scope">
|
</template>
|
||||||
<el-input v-model="scope.row.linkUrl" :disabled="scope.row.type === 'execute'" />
|
</el-table-column>
|
||||||
</template>
|
<el-table-column label="执行动作">
|
||||||
</el-table-column>
|
<template v-slot="scope">
|
||||||
<el-table-column prop="method" label="请求类型" width="100">
|
<el-table v-if="scope.row.type === 'link'" :data="buttonList">
|
||||||
<template v-slot="scope">
|
<el-table-column prop="blank" label="是否新开窗口" width="100">
|
||||||
<el-select
|
<template v-slot="innerScope">
|
||||||
v-model="scope.row.method"
|
<el-switch v-model="innerScope.row.blank" />
|
||||||
placeholder="请选择请求类型"
|
</template>
|
||||||
clearable
|
</el-table-column>
|
||||||
:disabled="scope.row.type === 'link'"
|
<el-table-column prop="linkUrl" label="打开链接">
|
||||||
>
|
<template v-slot="innerScope">
|
||||||
<el-option label="Get" value="get" />
|
<el-input v-model="innerScope.row.linkUrl" />
|
||||||
<el-option label="Post" value="post" />
|
</template>
|
||||||
</el-select>
|
</el-table-column>
|
||||||
</template>
|
</el-table>
|
||||||
</el-table-column>
|
<el-table v-if="scope.row.type === 'execute'" :data="buttonList">
|
||||||
<el-table-column prop="requestUrl" label="请求地址">
|
<el-table-column prop="method" label="请求类型" width="120">
|
||||||
<template v-slot="scope">
|
<template v-slot="innerScope">
|
||||||
<el-input v-model="scope.row.requestUrl" :disabled="scope.row.type === 'link'" />
|
<el-select
|
||||||
</template>
|
v-model="innerScope.row.method"
|
||||||
</el-table-column>
|
placeholder="请选择请求类型"
|
||||||
</el-table>
|
clearable
|
||||||
</el-form-item>
|
>
|
||||||
</el-form>
|
<el-option label="Get" value="get" />
|
||||||
</div>
|
<el-option label="Post" value="post" />
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="requestUrl" label="请求地址">
|
||||||
|
<template v-slot="innerScope">
|
||||||
|
<el-input v-model="innerScope.row.requestUrl" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="节点参数">
|
||||||
|
<el-table :data="parameterList">
|
||||||
|
<el-table-column prop="name" label="参数名称">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-input v-model="scope.row.name" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="code" label="参数编码">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-input v-model="scope.row.code" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="dataSource" label="参数可选项">
|
||||||
|
<template v-slot="scope" />
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</CutePage>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import PipeTask from '@/views/components/devops/pipeline/PipeTask.vue'
|
import PipeTask from '@/views/components/devops/pipeline/PipeTask.vue'
|
||||||
|
import CutePage from '@/views/components/dev/CutePage.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PipeTaskBuilder',
|
name: 'PipeTaskBuilder',
|
||||||
components: { PipeTask },
|
components: { CutePage, PipeTask },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
name: '环境准备',
|
name: '环境准备',
|
||||||
@@ -168,7 +203,7 @@ export default {
|
|||||||
{
|
{
|
||||||
condition: 'running',
|
condition: 'running',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
requestUrl: 'api/devops/ci/doCheck?id=60012',
|
requestUrl: `api/devops/ci/doCheck?id=#pipelineInstanceNodeId`,
|
||||||
text: '确认合并',
|
text: '确认合并',
|
||||||
type: 'execute'
|
type: 'execute'
|
||||||
}
|
}
|
||||||
@@ -183,7 +218,18 @@ export default {
|
|||||||
{ label: 'jdk21', value: 'jdk21' }
|
{ label: 'jdk21', value: 'jdk21' }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
parameterList: [
|
||||||
|
{
|
||||||
|
name: 'Jdk版本',
|
||||||
|
code: 'jdkVersion',
|
||||||
|
dataSource: [
|
||||||
|
{ label: 'jdk8', value: 'jdk8' },
|
||||||
|
{ label: 'jdk11', value: 'jdk11' },
|
||||||
|
{ label: 'jdk21', value: 'jdk21' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
|
|||||||
Reference in New Issue
Block a user