增加拖拽效果
This commit is contained in:
BianLzhaoMin
parent
937e9e23b4
commit
6b7a9803f4
|
|
@ -59,54 +59,85 @@
|
|||
<el-button @click="handleAddAccount" icon="el-icon-plus" type="text">添加步骤</el-button>
|
||||
</h3>
|
||||
|
||||
<el-form
|
||||
:key="item.id"
|
||||
:model="item"
|
||||
label-width="120px"
|
||||
class="account-form"
|
||||
:rules="accountFormRules"
|
||||
:ref="`accountFormRef${index}`"
|
||||
v-for="(item, index) in accountForm"
|
||||
<draggable
|
||||
v-model="accountForm"
|
||||
animation="300"
|
||||
direction="vertical"
|
||||
@end="onDragEnd"
|
||||
class="draggable-container"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="操作元素" prop="loginAccount">
|
||||
<el-input v-model="item.loginAccount" clearable placeholder="请输入操作元素" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="text"
|
||||
style="color: red"
|
||||
icon="el-icon-delete"
|
||||
v-if="index > 0"
|
||||
@click="handleDeleteAccount(index)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="元素值" prop="loginPassword">
|
||||
<el-input v-model="item.loginPassword" clearable placeholder="请输入元素值" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="交互方式" prop="accountRole">
|
||||
<el-input v-model="item.accountRole" clearable placeholder="请输入交互方式" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div v-for="(item, index) in accountForm" :key="item.id" class="draggable-item">
|
||||
<el-form
|
||||
:model="item"
|
||||
label-width="120px"
|
||||
class="account-form"
|
||||
:rules="accountFormRules"
|
||||
:ref="`accountFormRef${index}`"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="操作元素" prop="loginAccount">
|
||||
<el-input v-model="item.loginAccount" clearable placeholder="请输入操作元素" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<div class="action-buttons">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-arrow-up"
|
||||
:disabled="index === 0"
|
||||
@click="moveUp(index)"
|
||||
title="上移"
|
||||
>
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-arrow-down"
|
||||
:disabled="index === accountForm.length - 1"
|
||||
@click="moveDown(index)"
|
||||
title="下移"
|
||||
>
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
style="color: red"
|
||||
icon="el-icon-delete"
|
||||
v-if="index > 0"
|
||||
@click="handleDeleteAccount(index)"
|
||||
title="删除"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="元素值" prop="loginPassword">
|
||||
<el-input v-model="item.loginPassword" clearable placeholder="请输入元素值" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="交互方式" prop="accountRole">
|
||||
<el-input v-model="item.accountRole" clearable placeholder="请输入交互方式" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
export default {
|
||||
name: 'AddAndEditForm',
|
||||
components: {
|
||||
draggable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
basicInfoForm: {
|
||||
|
|
@ -163,6 +194,25 @@ export default {
|
|||
this.accountForm.splice(index, 1)
|
||||
},
|
||||
|
||||
// 拖拽结束事件
|
||||
onDragEnd(evt) {},
|
||||
|
||||
// 上移步骤
|
||||
moveUp(index) {
|
||||
if (index > 0) {
|
||||
const item = this.accountForm.splice(index, 1)[0]
|
||||
this.accountForm.splice(index - 1, 0, item)
|
||||
}
|
||||
},
|
||||
|
||||
// 下移步骤
|
||||
moveDown(index) {
|
||||
if (index < this.accountForm.length - 1) {
|
||||
const item = this.accountForm.splice(index, 1)[0]
|
||||
this.accountForm.splice(index + 1, 0, item)
|
||||
}
|
||||
},
|
||||
|
||||
async submitForm() {
|
||||
try {
|
||||
await this.$refs.basicInfoFormRef.validate()
|
||||
|
|
@ -177,11 +227,98 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.account-form {
|
||||
.draggable-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.draggable-item {
|
||||
margin-bottom: 15px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.account-form {
|
||||
border: 1px solid #dfe6ec;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background: #fff;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
cursor: move;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
padding: 10px 5px;
|
||||
border: 1px dashed #dcdfe6;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
||||
background: #f5f7fa;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
border-color: #409eff;
|
||||
background: #ecf5ff;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
.el-button {
|
||||
padding: 5px 8px;
|
||||
min-height: auto;
|
||||
|
||||
&:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
color: #c0c4cc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 拖拽时的样式
|
||||
.sortable-ghost {
|
||||
opacity: 0.5;
|
||||
background: #f0f9ff;
|
||||
border: 2px dashed #409eff;
|
||||
}
|
||||
|
||||
.sortable-chosen {
|
||||
background: #ecf5ff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.sortable-drag {
|
||||
transform: rotate(5deg);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue