|
@@ -7,36 +7,33 @@ defineProps({
|
|
|
type: String
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
+import draggable from 'vuedraggable'
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<el-tab-pane class="form-design-wrap" :label="label" :name="name">
|
|
|
- <el-container>
|
|
|
+<!-- <el-container>
|
|
|
<el-aside width="400px">
|
|
|
- <div effect="dark" style="background-color: white;margin-top: 0px;padding-top: 20px">
|
|
|
+ <div effect="dark" style="background-color: white; margin-top: 0px; padding-top: 20px">
|
|
|
<h4 style="text-align: center">组件库</h4>
|
|
|
- <template v-for="(item,index) in oriFormList">
|
|
|
+ <template v-for="(item, index) in oriFormList">
|
|
|
<h5 style="padding-left: 60px">{{ item.name }}</h5>
|
|
|
<draggable
|
|
|
v-model="item.formList"
|
|
|
- ghost-class="ghost" :force-fallback="true"
|
|
|
+ ghost-class="ghost"
|
|
|
+ :force-fallback="true"
|
|
|
item-key="index"
|
|
|
:sort="false"
|
|
|
- @end="dragEnd"
|
|
|
- @start="drag=true"
|
|
|
class="leftItem"
|
|
|
:animation="300"
|
|
|
:group="{ name: 'dragFormList', pull: 'clone', put: false }"
|
|
|
-
|
|
|
- :clone='cloneFunc'
|
|
|
+ :clone="cloneFunc"
|
|
|
+ @end="dragEnd"
|
|
|
+ @start="drag = true"
|
|
|
>
|
|
|
-
|
|
|
<template #item="{ element }">
|
|
|
<div class="zj">
|
|
|
- <el-button size="large" style="width: 100%" :icon="$icon[element.icon]"
|
|
|
- >{{ element.name }}
|
|
|
- </el-button>
|
|
|
+ <el-button size="large" style="width: 100%" :icon="$icon[element.icon]">{{ element.name }} </el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</draggable>
|
|
@@ -44,21 +41,15 @@ defineProps({
|
|
|
</div>
|
|
|
</el-aside>
|
|
|
<el-main>
|
|
|
- <div style="display: flex;flex-direction: row">
|
|
|
-
|
|
|
+ <div style="display: flex; flex-direction: row">
|
|
|
<div class="f11">
|
|
|
- <div
|
|
|
- class="drag-content"
|
|
|
-
|
|
|
- >
|
|
|
- <div style="text-align: center;font-size: 15px;font-weight: bold;margin-bottom: 20px">{{ flowName }}</div>
|
|
|
+ <div class="drag-content">
|
|
|
+ <div style="text-align: center; font-size: 15px; font-weight: bold; margin-bottom: 20px">{{ flowName }}</div>
|
|
|
<div class="drag-content-inner">
|
|
|
-
|
|
|
-
|
|
|
<el-form label-position="top">
|
|
|
<draggable
|
|
|
v-model="targetList"
|
|
|
- style="min-height: 600px;background-color: var(--el-bg-color-page)"
|
|
|
+ style="min-height: 600px; background-color: var(--el-bg-color-page)"
|
|
|
item-key="index"
|
|
|
:sort="true"
|
|
|
effect="dark"
|
|
@@ -66,36 +57,32 @@ defineProps({
|
|
|
>
|
|
|
<template #item="{ element, index }">
|
|
|
<div
|
|
|
- class="okcomponent border line " effect="dark"
|
|
|
- :class="{'active-component':isCurrentForm(element.id)}"
|
|
|
+ class="okcomponent border line"
|
|
|
+ effect="dark"
|
|
|
+ :class="{ 'active-component': isCurrentForm(element.id) }"
|
|
|
@click.stop="showCurrentPageConfigPanel(element.id)"
|
|
|
>
|
|
|
-
|
|
|
-
|
|
|
- <el-icon v-if="element.type!='Empty'" class="deleteIcon" @click.stop="deleteForm(element.id)">
|
|
|
- <Delete/>
|
|
|
+ <el-icon v-if="element.type != 'Empty'" class="deleteIcon" @click.stop="deleteForm(element.id)">
|
|
|
+ <Delete />
|
|
|
</el-icon>
|
|
|
- <el-form-item :label="step2Object[element.id]?.name"
|
|
|
- :required="step2Object[element.id]?.required">
|
|
|
-
|
|
|
- <component style="width: 100%"
|
|
|
- @showPanel="showPanel"
|
|
|
- :index="index"
|
|
|
- :is="getFormWidget(element.type)"
|
|
|
- :id="element.id"
|
|
|
- v-model:form="step2Object[element.id]"
|
|
|
+ <el-form-item :label="step2Object[element.id]?.name" :required="step2Object[element.id]?.required">
|
|
|
+ <component
|
|
|
+ :is="getFormWidget(element.type)"
|
|
|
+ :id="element.id"
|
|
|
+ v-model:form="step2Object[element.id]"
|
|
|
+ style="width: 100%"
|
|
|
+ :index="index"
|
|
|
+ @showPanel="showPanel"
|
|
|
></component>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
</draggable>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
- <div class="f22" v-if="currentForm">
|
|
|
+ <div v-if="currentForm" class="f22">
|
|
|
<el-card class="box-card">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
@@ -104,38 +91,28 @@ defineProps({
|
|
|
</template>
|
|
|
<el-form label-width="120px" label-position="top">
|
|
|
<el-form-item required label="标题">
|
|
|
- <el-input v-model="currentForm.name" maxlength="10"/>
|
|
|
+ <el-input v-model="currentForm.name" maxlength="10" />
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="提示" :required="currentForm.type==='Description'">
|
|
|
- <el-input v-model="currentForm.placeholder" maxlength="50"/>
|
|
|
+ <el-form-item label="提示" :required="currentForm.type === 'Description'">
|
|
|
+ <el-input v-model="currentForm.placeholder" maxlength="50" />
|
|
|
</el-form-item>
|
|
|
|
|
|
- <component
|
|
|
- :is="getFormConfigWidget(currentForm.type)"
|
|
|
- :id="currentForm.id"
|
|
|
- ref="currentFormConfigRef"
|
|
|
- ></component>
|
|
|
+ <component :is="getFormConfigWidget(currentForm.type)" :id="currentForm.id" ref="currentFormConfigRef"></component>
|
|
|
<el-form-item label="其他">
|
|
|
- <el-checkbox v-model="currentForm.required" label="必填"/>
|
|
|
+ <el-checkbox v-model="currentForm.required" label="必填" />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
-
|
|
|
</el-card>
|
|
|
-
|
|
|
-
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
-
|
|
|
</el-main>
|
|
|
- </el-container>
|
|
|
+ </el-container>-->
|
|
|
</el-tab-pane>
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.form-design-wrap {
|
|
|
-
|
|
|
}
|
|
|
.leftItem {
|
|
|
padding-left: 50px;
|
|
@@ -173,7 +150,6 @@ $center_width: 360px;
|
|
|
|
|
|
.f22 {
|
|
|
width: $f22_width;
|
|
|
-
|
|
|
}
|
|
|
|
|
|
.okcomponent {
|
|
@@ -182,8 +158,6 @@ $center_width: 360px;
|
|
|
margin-bottom: 10px;
|
|
|
background-color: white;
|
|
|
border: 1px solid white;
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
|
|
|
.active-component {
|