github
/
certd
mirror of https://github.com/certd/certd
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

perf: 阶段、任务、步骤全面支持拖动排序

pull/189/head
xiaojunnuo 2024-09-05 10:47:03 +08:00
parent 1e9b5638aa
commit bd73a163cd
3 changed files with 320 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/ui/certd-client/src/style/common.less
View File

@ -30,7 +30,6 @@ h1, h2, h3, h4, h5, h6 {
} }
.ant-btn-link { .ant-btn-link {
height: 24px; height: 24px;
} }
@ -54,6 +53,7 @@ h1, h2, h3, h4, h5, h6 {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.flex-o { .flex-o {
display: flex !important; display: flex !important;
align-items: center; align-items: center;
@ -71,15 +71,19 @@ h1, h2, h3, h4, h5, h6 {
.mb-2 { .mb-2 {
margin-bottom: 2px; margin-bottom: 2px;
} }
.ml-5 { .ml-5 {
margin-left: 5px; margin-left: 5px;
} }
.ml-10 { .ml-10 {
margin-left: 10px; margin-left: 10px;
} }
.ml-20 { .ml-20 {
margin-left: 20px; margin-left: 20px;
} }
.ml-15 { .ml-15 {
margin-left: 15px; margin-left: 15px;
} }
@ -87,24 +91,31 @@ h1, h2, h3, h4, h5, h6 {
.mr-5 { .mr-5 {
margin-right: 5px; margin-right: 5px;
} }
.mr-10 { .mr-10 {
margin-right: 10px; margin-right: 10px;
} }
.mr-20 { .mr-20 {
margin-right: 20px; margin-right: 20px;
} }
.mr-15 { .mr-15 {
margin-right: 15px; margin-right: 15px;
} }
.mt-5 { .mt-5 {
margin-top: 5px; margin-top: 5px;
} }
.mt-10 { .mt-10 {
margin-top: 10px; margin-top: 10px;
} }
.mb-10 { .mb-10 {
margin-bottom: 10px; margin-bottom: 10px;
} }
.m-10 { .m-10 {
margin: 10px; margin: 10px;
} }
@ -112,6 +123,7 @@ h1, h2, h3, h4, h5, h6 {
.p-5 { .p-5 {
padding: 5px; padding: 5px;
} }
.p-10 { .p-10 {
padding: 10px; padding: 10px;
} }
@ -137,3 +149,16 @@ h1, h2, h3, h4, h5, h6 {
.color-blue { .color-blue {
color: #1890ff; color: #1890ff;
} }
.icon-box {
display: inline-flex;
align-items: center;
justify-content: center;
.fs-icon {
display: flex;
align-items: center;
justify-content: center;
}
}

2
packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/task-form/index.vue
View File

@ -43,7 +43,7 @@
<a-button type="primary" @click="stepAdd(currentTask)">添加步骤</a-button> <a-button type="primary" @click="stepAdd(currentTask)">添加步骤</a-button>
</template> </template>
</a-descriptions> </a-descriptions>
<v-draggable v-model="currentTask.steps" class="step-list" handle=".handle"> <v-draggable v-model="currentTask.steps" class="step-list" handle=".handle" item-key="id">
<template #item="{ element, index }"> <template #item="{ element, index }">
<div class="step-row"> <div class="step-row">
<div class="text"> <div class="text">

169
packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue
View File

@ -20,14 +20,15 @@
<div class="layout-left"> <div class="layout-left">
<div class="pipeline-container"> <div class="pipeline-container">
<div class="pipeline"> <div class="pipeline">
<div class="stages"> <v-draggable v-model="pipeline.stages" class="stages" item-key="id" handle=".stage-move-handle">
<template #header>
<div class="stage first-stage"> <div class="stage first-stage">
<div class="title"> <div class="title stage-move-handle">
<pi-editable model-value="触发源" :disabled="true" /> <pi-editable model-value="触发源" :disabled="true" />
</div> </div>
<div class="tasks"> <div class="tasks">
<div class="task-container first-task"> <div class="task-container first-task">
<div class="line"> <div class="line line-right">
<div class="flow-line"></div> <div class="flow-line"></div>
</div> </div>
<div class="task"> <div class="task">
@ -38,7 +39,7 @@
</div> </div>
</div> </div>
<div v-for="(trigger, index) of pipeline.triggers" :key="trigger.id" class="task-container"> <div v-for="(trigger, index) of pipeline.triggers" :key="trigger.id" class="task-container">
<div class="line"> <div class="line line-right">
<div class="flow-line"></div> <div class="flow-line"></div>
</div> </div>
<div class="task"> <div class="task">
@ -50,7 +51,7 @@
</div> </div>
<div v-if="editMode" class="task-container is-add"> <div v-if="editMode" class="task-container is-add">
<div class="line"> <div class="line line-right">
<div class="flow-line"></div> <div class="flow-line"></div>
</div> </div>
<div class="task"> <div class="task">
@ -62,12 +63,17 @@
</div> </div>
</div> </div>
</div> </div>
</template>
<div v-for="(stage, index) of pipeline.stages" :key="stage.id" class="stage" :class="{ 'last-stage': isLastStage(index) }"> <template #item="{ element: stage, index }">
<div :key="stage.id" class="stage" :class="{ 'last-stage': isLastStage(index) }">
<div class="title"> <div class="title">
<pi-editable v-model="stage.title" :disabled="!editMode"></pi-editable> <pi-editable v-model="stage.title" :disabled="!editMode"></pi-editable>
<div class="icon-box stage-move-handle">
<fs-icon v-if="editMode" title="拖动排序" icon="ion:move-outline"></fs-icon>
</div> </div>
<v-draggable v-model="stage.tasks" item-key="id" class="tasks" handle=".handle"> </div>
<v-draggable v-model="stage.tasks" item-key="id" class="tasks" group="task" handle=".task-move-handle">
<template #item="{ element: task, index: taskIndex }"> <template #item="{ element: task, index: taskIndex }">
<div <div
class="task-container" class="task-container"
@ -75,10 +81,13 @@
'first-task': taskIndex === 0 'first-task': taskIndex === 0
}" }"
> >
<div class="line"> <div class="line line-left">
<div class="flow-line"></div> <div class="flow-line"></div>
<fs-icon v-if="editMode" class="add-stage-btn" title="添加新阶段" icon="ion:add-circle" @click="stageAdd(index)"></fs-icon> <fs-icon v-if="editMode" class="add-stage-btn" title="添加新阶段" icon="ion:add-circle" @click="stageAdd(index)"></fs-icon>
</div> </div>
<div class="line line-right">
<div class="flow-line"></div>
</div>
<div class="task"> <div class="task">
<a-button shape="round" @click="taskEdit(stage, index, task, taskIndex)"> <a-button shape="round" @click="taskEdit(stage, index, task, taskIndex)">
<a-popover title="步骤" :trigger="editMode ? 'none' : 'hover'"> <a-popover title="步骤" :trigger="editMode ? 'none' : 'hover'">
@ -102,20 +111,21 @@
</span> </span>
</a-popover> </a-popover>
</a-button> </a-button>
<fs-icon <div class="icon-box action copy">
v-if="editMode" <fs-icon v-if="editMode" title="复制" icon="ion:copy-outline" @click="taskCopy(stage, index, task)"></fs-icon>
class="action copy" </div>
title="复制" <div class="icon-box task-move-handle action drag">
icon="ion:copy-outline" <fs-icon v-if="editMode" title="拖动排序" icon="ion:move-outline"></fs-icon>
@click="taskCopy(stage, index, task)" </div>
></fs-icon>
<fs-icon v-if="editMode" class="handle action drag" title="拖动排序" icon="ion:move-outline"></fs-icon>
</div> </div>
</div> </div>
</template> </template>
<template #footer> <template #footer>
<div v-if="editMode" class="task-container is-add"> <div v-if="editMode" class="task-container is-add">
<div class="line"> <div class="line line-left">
<div class="flow-line"></div>
</div>
<div class="line line-right">
<div class="flow-line"></div> <div class="flow-line"></div>
</div> </div>
<div class="task"> <div class="task">
@ -130,14 +140,15 @@
</template> </template>
</v-draggable> </v-draggable>
</div> </div>
</template>
<template #footer>
<div v-if="editMode" class="stage last-stage"> <div v-if="editMode" class="stage last-stage">
<div class="title"> <div class="title">
<pi-editable model-value="新阶段" :disabled="true" /> <pi-editable model-value="新阶段" :disabled="true" />
</div> </div>
<div class="tasks"> <div class="tasks">
<div class="task-container first-task"> <div class="task-container first-task">
<div class="line"> <div class="line line-left">
<div class="flow-line"></div> <div class="flow-line"></div>
<fs-icon class="add-stage-btn" title="添加新阶段" icon="ion:add-circle" @click="stageAdd()"></fs-icon> <fs-icon class="add-stage-btn" title="添加新阶段" icon="ion:add-circle" @click="stageAdd()"></fs-icon>
</div> </div>
@ -149,7 +160,7 @@
</div> </div>
</div> </div>
<div class="task-container"> <div class="task-container">
<div class="line"> <div class="line line-left">
<div class="flow-line"></div> <div class="flow-line"></div>
</div> </div>
<div class="task"> <div class="task">
@ -161,7 +172,7 @@
</div> </div>
</div> </div>
<div v-for="(item, ii) of pipeline.notifications" :key="ii" class="task-container"> <div v-for="(item, ii) of pipeline.notifications" :key="ii" class="task-container">
<div class="line"> <div class="line line-left">
<div class="flow-line"></div> <div class="flow-line"></div>
</div> </div>
<div class="task"> <div class="task">
@ -179,7 +190,7 @@
</div> </div>
<div v-if="pipeline.notifications?.length > 0" class="tasks"> <div v-if="pipeline.notifications?.length > 0" class="tasks">
<div v-for="(item, index) of pipeline.notifications" :key="index" class="task-container" :class="{ 'first-task': index == 0 }"> <div v-for="(item, index) of pipeline.notifications" :key="index" class="task-container" :class="{ 'first-task': index == 0 }">
<div class="line"> <div class="line line-left">
<div class="flow-line"></div> <div class="flow-line"></div>
</div> </div>
<div class="task"> <div class="task">
@ -193,7 +204,7 @@
</div> </div>
<div v-else class="tasks"> <div v-else class="tasks">
<div class="task-container first-task"> <div class="task-container first-task">
<div class="line"> <div class="line line-left">
<div class="flow-line"></div> <div class="flow-line"></div>
</div> </div>
<div class="task"> <div class="task">
@ -205,7 +216,8 @@
</div> </div>
</div> </div>
</div> </div>
</div> </template>
</v-draggable>
</div> </div>
</div> </div>
</div> </div>
@ -715,39 +727,39 @@ export default defineComponent({
.title { .title {
padding: 20px; padding: 20px;
color: gray; color: gray;
} display: flex;
&.first-stage { .stage-move-handle {
.line { cursor: move;
width: 50% !important; margin-left: 4px;
.flow-line {
border-left: 0;
} }
} }
} //.sortable-ghost {
&.last-stage { // .line {
.line { // visibility: hidden;
width: 50% !important; // }
left: 0; //}
right: auto;
.flow-line {
border-right: 0;
}
.add-stage-btn {
visibility: hidden;
}
}
}
.line { .line {
height: 50px; height: 50px;
position: absolute; position: absolute;
top: -25px; top: -25px;
right: 0; width: 25px;
width: 100%;
&.line-left {
left: 25px;
.flow-line {
border-right: 0;
}
}
&.line-right {
right: 25px;
.flow-line {
border-left: 0;
}
}
.flow-line { .flow-line {
height: 100%; height: 100%;
margin-left: 28px;
margin-right: 28px;
border: 1px solid #c7c7c7; border: 1px solid #c7c7c7;
border-top: 0; border-top: 0;
} }
@ -766,6 +778,52 @@ export default defineComponent({
} }
} }
.task-container:first-child {
.line {
width: 50px;
&.line-left {
left: 0;
.flow-line {
border-right: 0;
border-left: 0;
}
}
&.line-right {
right: 0;
.flow-line {
border-left: 0;
border-right: 0;
}
}
.add-stage-btn {
visibility: visible;
}
}
}
&.first-stage {
.line {
.flow-line {
border-left: 0;
}
}
}
&.last-stage {
.line {
width: 50% !important;
right: auto;
.flow-line {
border-right: 0;
}
.add-stage-btn {
visibility: hidden;
}
}
}
.tasks { .tasks {
.task-container { .task-container {
width: 100%; width: 100%;
@ -775,18 +833,6 @@ export default defineComponent({
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; position: relative;
&.first-task {
.line {
.flow-line {
margin: 0;
border-left: 0;
border-right: 0;
}
.add-stage-btn {
visibility: visible;
}
}
}
.task { .task {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -816,6 +862,7 @@ export default defineComponent({
} }
&.drag { &.drag {
right: 60px; right: 60px;
cursor: move;
} }
} }