165 lines
3.5 KiB
Vue
165 lines
3.5 KiB
Vue
<template>
|
|
<el-aside class="panel">
|
|
<el-scrollbar>
|
|
<div class="title">
|
|
<el-text>
|
|
<el-icon>
|
|
<component :is="'pi-icon-zu-jian'"/>
|
|
</el-icon>
|
|
输入组件
|
|
</el-text>
|
|
</div>
|
|
<draggable v-model="inputComps" animation="200" item-key="name" class="draggroup" :group="group"
|
|
:sort="false"
|
|
:clone="cloneField">
|
|
<template #item="{ element }">
|
|
<div class="item" @click="handleClick(element)">
|
|
<div class="tips">松开鼠标组件将添加到此处</div>
|
|
<div class="comp">
|
|
<el-icon size="20">
|
|
<component :is="element.icon"/>
|
|
</el-icon>
|
|
{{ element.title }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</draggable>
|
|
<div class="title">
|
|
<el-text>
|
|
<el-icon>
|
|
<component :is="'pi-icon-zu-jian'"/>
|
|
</el-icon>
|
|
选择组件
|
|
</el-text>
|
|
</div>
|
|
<draggable v-model="choiceComps" animation="200" item-key="name" class="draggroup" :group="group"
|
|
:sort="false"
|
|
:clone="cloneField">
|
|
<template #item="{ element }">
|
|
<div class="item" @click="handleClick(element)">
|
|
<div class="tips">松开鼠标组件将添加到此处</div>
|
|
<div class="comp">
|
|
<el-icon size="20">
|
|
<component :is="element.icon"/>
|
|
</el-icon>
|
|
{{ element.title }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</draggable>
|
|
<div class="title">
|
|
<el-text>
|
|
<el-icon>
|
|
<component :is="'pi-icon-zu-jian'"/>
|
|
</el-icon>
|
|
布局组件
|
|
</el-text>
|
|
</div>
|
|
<draggable v-model="layoutComps" animation="200" item-key="name" class="draggroup" :group="group"
|
|
:sort="false"
|
|
:clone="cloneField">
|
|
<template #item="{ element }">
|
|
<div class="item" @click="handleClick(element)">
|
|
<div class="tips">松开鼠标组件将添加到此处</div>
|
|
<div class="comp">
|
|
<el-icon size="20">
|
|
<component :is="element.icon"/>
|
|
</el-icon>
|
|
{{ element.title }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</draggable>
|
|
</el-scrollbar>
|
|
</el-aside>
|
|
</template>
|
|
|
|
<script setup>
|
|
import draggable from 'vuedraggable'
|
|
import FormBuild from "./formBuild"
|
|
import {inputComps, choiceComps, layoutComps} from "./config"
|
|
|
|
const props = defineProps({
|
|
data: {type: FormBuild, default: {}}
|
|
})
|
|
const group = {name: 'base', pull: 'clone', put: false}
|
|
|
|
function cloneField(e) {
|
|
const field = JSON.parse(JSON.stringify(e));
|
|
field.field_name = field.name + "_" + props.data.config.counter;
|
|
field.id = field.name + props.data.config.counter
|
|
props.data.config.counter++
|
|
return field
|
|
}
|
|
|
|
function handleClick(e) {
|
|
let field = cloneField(e)
|
|
props.data.fields.push(field)
|
|
props.data.setActiveField(field)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.panel {
|
|
width: 260px;
|
|
padding: 10px;
|
|
|
|
.title {
|
|
margin-bottom: 10px;
|
|
|
|
i {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.el-scrollbar__bar) {
|
|
display: none !important;
|
|
}
|
|
|
|
:deep(.el-scrollbar__wrap) {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
:deep(.el-scrollbar__wrap::-webkit-scrollbar) {
|
|
display: none !important;
|
|
}
|
|
|
|
.draggroup {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 10px;
|
|
|
|
.item {
|
|
width: 115px;
|
|
font-size: 12px;
|
|
cursor: move;
|
|
background: #f6f7ff;
|
|
border: 1px dashed #f6f7ff;
|
|
border-radius: 3px;
|
|
margin-bottom: 10px;
|
|
|
|
.comp {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 32px;
|
|
padding: 0 10px;
|
|
|
|
i {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.tips {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.item:hover {
|
|
border: 1px dashed #787be8;
|
|
color: #787be8;
|
|
}
|
|
}
|
|
</style>
|