Skip to content

Chatopera OpenSource / ferry_web

Go to a project
Commit 22650f2a by YuleiLan
Options

完善子表单。

parent c3037dfc
Inline Side-by-side
Showing with 292 additions and 240 deletions
src/components/VueFormMaking/components/WidgetConfig.vue
......@@ -19,6 +19,7 @@
<el-form-item
v-if="Object.keys(data.options).indexOf('labelWidth')>=0 &&
data.type!=='grid' &&
data.type!=='subform' &&
data.type !== 'divider'"
:label="$t('fm.config.widget.labelWidth')"
>
......
src/components/VueFormMaking/components/WidgetForm.vue
......@@ -68,9 +68,9 @@
v-if="element && element.key"
:key="element.key"
class="widget-col widget-view"
:label-width="!element.options.labelWidthStatus?data.config.labelWidth + 'px': '0px'"
:label-width="element.options.labelWidthStatus?data.config.labelWidth + 'px': '0px'"
:class="{active: selectWidget.key === element.key, 'is_req': element.options.required}"
:label="element.type==='divider' || element.options.labelWidthStatus?'':element.name"
:label="element.options.labelWidthStatus?element.name:''"
@click.native="handleSelectWidget(index)"
>
<div
......@@ -79,33 +79,42 @@
:gutter="element.options.gutter ? element.options.gutter : 0"
:justify="element.options.justify"
:align="element.options.align"
@click.native="handleSelectWidget(index)"
>
<draggable
v-model="element.columns.list"
class="widget-col widget-view"
:no-transition-on-drag="true"
v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
@end="handleMoveEnd"
@add="handleSubformWidgetColAdd($event, element)"
@add="handleSubformWidgetAdd($event, element)"
>
<transition-group
name="fade"
tag="div"
class="widget-col-list"
style="min-height: 131px;overflow-x: auto; white-space: nowrap;"
>
<transition-group name="fade" tag="div" class="widget-col-list" style="min-height: 100px">
<template v-for="(el, i) in element.columns.list">
<widget-form-item
v-if="el.key"
<div
v-if="el && el.key"
:key="el.key"
:style="{minWidth: el.width ? `${el.width}px`: '33.3%', width: el.width ? `${el.width}px`: '33.3%', 'display': 'inline-block', 'vertical-align': 'top'}"
@click.native="handleSelectWidget(i)"
>
<widget-form-item
:element="el"
:select.sync="selectWidget"
:index="i"
:data="element.columns"
:data-config="data"
:is-label="true"
:is-table="true"
/>
</div>
</template>
</transition-group>
</draggable>
<div v-if="selectWidget.key == element.key" class="widget-view-action widget-col-action">
<i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)" />
......@@ -214,9 +223,19 @@ export default {
})
}
if (this.data.list[newIndex].type === 'subform') {
this.$set(this.data.list, newIndex, {
...this.data.list[newIndex],
columns: this.data.list[newIndex].columns = {
span: 24,
list: []
}
})
}
this.selectWidget = this.data.list[newIndex]
},
handleSubformWidgetColAdd($event, row) {
handleSubformWidgetAdd($event, row) {
const newIndex = $event.newIndex
const oldIndex = $event.oldIndex
const item = $event.item
......
src/components/VueFormMaking/components/WidgetFormFields.vue 0 → 100644
<template>
<div>
<template v-if="element.type == 'input'">
<el-input
v-model="element.options.defaultValue"
:style="{width: element.options.width}"
:placeholder="element.options.placeholder"
:disabled="element.options.disabled"
/>
</template>
<template v-if="element.type == 'textarea'">
<el-input
v-model="element.options.defaultValue"
type="textarea"
:rows="5"
:style="{width: element.options.width}"
:disabled="element.options.disabled"
:placeholder="element.options.placeholder"
/>
</template>
<template v-if="element.type == 'number'">
<el-input-number
v-model="element.options.defaultValue"
:disabled="element.options.disabled"
:controls-position="element.options.controlsPosition"
:style="{width: element.options.width}"
/>
</template>
<template v-if="element.type == 'radio'">
<el-radio-group
v-model="element.options.defaultValue"
:style="{width: element.options.width}"
:disabled="element.options.disabled"
>
<el-radio
v-for="(item, index2) in element.options.options"
:key="item.value + index2"
:style="{display: element.options.inline ? 'inline-block' : 'block'}"
:label="item.value"
>
{{ element.options.showLabel ? item.label : item.value }}
</el-radio>
</el-radio-group>
</template>
<template v-if="element.type == 'checkbox'">
<el-checkbox-group
v-model="element.options.defaultValue"
:style="{width: element.options.width}"
:disabled="element.options.disabled"
>
<el-checkbox
v-for="(item, index1) in element.options.options"
:key="item.value + index1"
:style="{display: element.options.inline ? 'inline-block' : 'block'}"
:label="item.value"
>
{{ element.options.showLabel ? item.label : item.value }}
</el-checkbox>
</el-checkbox-group>
</template>
<template v-if="element.type == 'time'">
<el-time-picker
v-model="element.options.defaultValue"
:is-range="element.options.isRange"
:placeholder="element.options.placeholder"
:start-placeholder="element.options.startPlaceholder"
:end-placeholder="element.options.endPlaceholder"
:readonly="element.options.readonly"
:disabled="element.options.disabled"
:editable="element.options.editable"
:clearable="element.options.clearable"
:arrow-control="element.options.arrowControl"
:style="{width: element.options.width}"
/>
</template>
<template v-if="element.type == 'date'">
<el-date-picker
v-model="element.options.defaultValue"
:type="element.options.type"
:is-range="element.options.isRange"
:placeholder="element.options.placeholder"
:start-placeholder="element.options.startPlaceholder"
:end-placeholder="element.options.endPlaceholder"
:readonly="element.options.readonly"
:disabled="element.options.disabled"
:editable="element.options.editable"
:clearable="element.options.clearable"
:style="{width: element.options.width}"
/>
</template>
<template v-if="element.type == 'rate'">
<el-rate
v-model="element.options.defaultValue"
:max="element.options.max"
:disabled="element.options.disabled"
:allow-half="element.options.allowHalf"
/>
</template>
<template v-if="element.type == 'color'">
<el-color-picker
v-model="element.options.defaultValue"
:disabled="element.options.disabled"
:show-alpha="element.options.showAlpha"
/>
</template>
<template v-if="element.type == 'select'">
<el-select
v-model="element.options.defaultValue"
:disabled="element.options.disabled"
:multiple="element.options.multiple"
:clearable="element.options.clearable"
:placeholder="element.options.placeholder"
:style="{width: element.options.width}"
>
<el-option v-for="item in element.options.options" :key="item.value" :value="item.value" :label="element.options.showLabel?item.label:item.value" />
</el-select>
</template>
<template v-if="element.type=='switch'">
<el-switch
v-model="element.options.defaultValue"
:disabled="element.options.disabled"
/>
</template>
<template v-if="element.type=='slider'">
<el-slider
v-model="element.options.defaultValue"
:min="element.options.min"
:max="element.options.max"
:disabled="element.options.disabled"
:step="element.options.step"
:show-input="element.options.showInput"
:range="element.options.range"
:style="{width: element.options.width}"
/>
</template>
<template v-if="element.type=='imgupload'">
<fm-upload
v-model="element.options.defaultValue"
:disabled="element.options.disabled"
:style="{'width': element.options.width}"
:width="element.options.size.width"
:height="element.options.size.height"
token="xxx"
domain="xxx"
/>
</template>
<template v-if="element.type == 'cascader'">
<el-cascader
v-model="element.options.defaultValue"
:disabled="element.options.disabled"
:clearable="element.options.clearable"
:placeholder="element.options.placeholder"
:style="{width: element.options.width}"
:options="element.options.remoteOptions"
/>
</template>
<template v-if="element.type == 'editor'">
<vue-editor
v-model="element.options.defaultValue"
:style="{width: element.options.width}"
/>
</template>
<template v-if="element.type=='blank'">
<div style="height: 50px;color: #999;background: #eee;line-height:50px;text-align:center;">{{ $t('fm.components.fields.blank') }}</div>
</template>
<template v-if="element.type === 'text'">
<span
:style="{
'font-size': element.options.font_size,
'font-family': element.options.font_family,
'font-weight': element.options.font_weight,
'color': element.options.font_color
}"
>
{{ element.options.defaultValue }}
</span>
</template>
<template v-if="element.type === 'divider'">
<el-divider
:direction="element.options.direction"
:content-position="element.options.content_position"
>
<span
:style="{
'font-size': element.options.font_size,
'font-family': element.options.font_family,
'font-weight': element.options.font_weight,
'color': element.options.font_color
}"
>
{{ element.options.defaultValue }}
</span>
</el-divider>
</template>
</div>
</template>
<script>
import FmUpload from './Upload'
export default {
name: 'WidgetFormFields',
/* eslint-disable */
props: ['element'],
components: {
FmUpload
},
}
</script>
src/components/VueFormMaking/components/WidgetFormItem.vue
<template>
<el-form-item
v-if="element && element.key"
:label-width="!element.options.labelWidthStatus?elementLabelWidth + 'px': '0px'"
:label-width="isLabel || !element.options.labelWidthStatus?'0px': elementLabelWidth + 'px'"
class="widget-view "
:class="{active: selectWidget.key === element.key, 'is_req': element.options.required}"
:label="element.type==='divider' || element.options.labelWidthStatus?'':element.name"
:label="isLabel || element.type==='divider' || !element.options.labelWidthStatus?'':element.name"
@click.native.stop="handleSelectWidget(index)"
>
<template v-if="element.type == 'input'">
<el-input
v-model="element.options.defaultValue"
:style="{width: element.options.width}"
:placeholder="element.options.placeholder"
:disabled="element.options.disabled"
/>
</template>
<template v-if="element.type == 'textarea'">
<el-input
v-model="element.options.defaultValue"
type="textarea"
:rows="5"
:style="{width: element.options.width}"
:disabled="element.options.disabled"
:placeholder="element.options.placeholder"
/>
</template>
<template v-if="element.type == 'number'">
<el-input-number
v-model="element.options.defaultValue"
:disabled="element.options.disabled"
:controls-position="element.options.controlsPosition"
:style="{width: element.options.width}"
/>
</template>
<template v-if="element.type == 'radio'">
<el-radio-group
v-model="element.options.defaultValue"
:style="{width: element.options.width}"
:disabled="element.options.disabled"
>
<el-radio
v-for="(item, index2) in element.options.options"
:key="item.value + index2"
:style="{display: element.options.inline ? 'inline-block' : 'block'}"
:label="item.value"
>
{{ element.options.showLabel ? item.label : item.value }}
</el-radio>
</el-radio-group>
</template>
<template v-if="element.type == 'checkbox'">
<el-checkbox-group
v-model="element.options.defaultValue"
:style="{width: element.options.width}"
:disabled="element.options.disabled"
>
<el-checkbox
v-for="(item, index1) in element.options.options"
:key="item.value + index1"
:style="{display: element.options.inline ? 'inline-block' : 'block'}"
:label="item.value"
>
{{ element.options.showLabel ? item.label : item.value }}
</el-checkbox>
</el-checkbox-group>
</template>
<template v-if="element.type == 'time'">
<el-time-picker
v-model="element.options.defaultValue"
:is-range="element.options.isRange"
:placeholder="element.options.placeholder"
:start-placeholder="element.options.startPlaceholder"
:end-placeholder="element.options.endPlaceholder"
:readonly="element.options.readonly"
:disabled="element.options.disabled"
:editable="element.options.editable"
:clearable="element.options.clearable"
:arrow-control="element.options.arrowControl"
:style="{width: element.options.width}"
/>
</template>
<template v-if="element.type == 'date'">
<el-date-picker
v-model="element.options.defaultValue"
:type="element.options.type"
:is-range="element.options.isRange"
:placeholder="element.options.placeholder"
:start-placeholder="element.options.startPlaceholder"
:end-placeholder="element.options.endPlaceholder"
:readonly="element.options.readonly"
:disabled="element.options.disabled"
:editable="element.options.editable"
:clearable="element.options.clearable"
:style="{width: element.options.width}"
/>
</template>
<template v-if="element.type == 'rate'">
<el-rate
v-model="element.options.defaultValue"
:max="element.options.max"
:disabled="element.options.disabled"
:allow-half="element.options.allowHalf"
/>
</template>
<template v-if="element.type == 'color'">
<el-color-picker
v-model="element.options.defaultValue"
:disabled="element.options.disabled"
:show-alpha="element.options.showAlpha"
/>
</template>
<template v-if="element.type == 'select'">
<el-select
v-model="element.options.defaultValue"
:disabled="element.options.disabled"
:multiple="element.options.multiple"
:clearable="element.options.clearable"
:placeholder="element.options.placeholder"
:style="{width: element.options.width}"
<div v-if="isTable">
<el-table
:data="[element]"
border
>
<el-option v-for="item in element.options.options" :key="item.value" :value="item.value" :label="element.options.showLabel?item.label:item.value" />
</el-select>
</template>
<template v-if="element.type=='switch'">
<el-switch
v-model="element.options.defaultValue"
:disabled="element.options.disabled"
/>
</template>
<template v-if="element.type=='slider'">
<el-slider
v-model="element.options.defaultValue"
:min="element.options.min"
:max="element.options.max"
:disabled="element.options.disabled"
:step="element.options.step"
:show-input="element.options.showInput"
:range="element.options.range"
:style="{width: element.options.width}"
/>
</template>
<template v-if="element.type=='imgupload'">
<fm-upload
v-model="element.options.defaultValue"
:disabled="element.options.disabled"
:style="{'width': element.options.width}"
:width="element.options.size.width"
:height="element.options.size.height"
token="xxx"
domain="xxx"
/>
</template>
<template v-if="element.type == 'cascader'">
<el-cascader
v-model="element.options.defaultValue"
:disabled="element.options.disabled"
:clearable="element.options.clearable"
:placeholder="element.options.placeholder"
:style="{width: element.options.width}"
:options="element.options.remoteOptions"
/>
</template>
<template v-if="element.type == 'editor'">
<vue-editor
v-model="element.options.defaultValue"
:style="{width: element.options.width}"
/>
</template>
<template v-if="element.type=='blank'">
<div style="height: 50px;color: #999;background: #eee;line-height:50px;text-align:center;">{{ $t('fm.components.fields.blank') }}</div>
</template>
<template v-if="element.type === 'text'">
<span
:style="{
'font-size': element.options.font_size,
'font-family': element.options.font_family,
'font-weight': element.options.font_weight,
'color': element.options.font_color
}"
>
{{ element.options.defaultValue }}
</span>
</template>
<template v-if="element.type === 'divider'">
<el-divider
:direction="element.options.direction"
:content-position="element.options.content_position"
<el-table-column
:label="element.name"
>
<span
:style="{
'font-size': element.options.font_size,
'font-family': element.options.font_family,
'font-weight': element.options.font_weight,
'color': element.options.font_color
}"
>
{{ element.options.defaultValue }}
</span>
</el-divider>
</template>
<WidgetFormFields :element="element" />
</el-table-column>
</el-table>
</div>
<div v-else>
<WidgetFormFields :element="element" />
</div>
<div v-if="selectWidget.key == element.key" class="widget-view-action">
<i class="iconfont icon-icon_clone" @click.stop="handleWidgetClone(index)" />
......@@ -230,13 +37,13 @@
</template>
<script>
import FmUpload from './Upload'
import WidgetFormFields from './WidgetFormFields'
export default {
components: {
FmUpload
WidgetFormFields
},
/* eslint-disable */
props: ['element', 'select', 'index', 'data', 'dataConfig'],
props: ['element', 'select', 'index', 'data', 'dataConfig', 'isLabel', 'isTable'],
data() {
return {
elementLabelWidth: '',
......
src/components/VueFormMaking/components/componentsConfig.js
......@@ -12,7 +12,7 @@ export const basicComponents = [
disabled: false,
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
},
{
......@@ -27,7 +27,7 @@ export const basicComponents = [
placeholder: '',
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
},
{
......@@ -44,7 +44,7 @@ export const basicComponents = [
controlsPosition: '',
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
},
{
......@@ -80,7 +80,7 @@ export const basicComponents = [
disabled: false,
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
},
{
......@@ -113,7 +113,7 @@ export const basicComponents = [
disabled: false,
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
},
{
......@@ -135,7 +135,7 @@ export const basicComponents = [
width: '',
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
},
{
......@@ -157,7 +157,7 @@ export const basicComponents = [
width: '',
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
},
{
......@@ -171,7 +171,7 @@ export const basicComponents = [
required: false,
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
},
{
......@@ -184,7 +184,7 @@ export const basicComponents = [
required: false,
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
},
{
......@@ -219,7 +219,7 @@ export const basicComponents = [
remoteFunc: '',
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
},
{
......@@ -231,7 +231,7 @@ export const basicComponents = [
disabled: false,
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
},
{
......@@ -249,7 +249,7 @@ export const basicComponents = [
width: '',
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
},
{
......@@ -261,7 +261,7 @@ export const basicComponents = [
font_weight: '500', // 粗体
font_family: '', // 字体属性
defaultValue: '这是一句话',
labelWidthStatus: false,
labelWidthStatus: true,
customClass: '',
labelWidth: 100,
labelWidthDisabled: false
......@@ -277,7 +277,7 @@ export const advanceComponents = [
defaultType: 'String',
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
},
{
......@@ -303,7 +303,7 @@ export const advanceComponents = [
action: 'https://jsonplaceholder.typicode.com/photos/',
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
},
{
......@@ -314,7 +314,7 @@ export const advanceComponents = [
width: '',
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
},
{
......@@ -336,7 +336,7 @@ export const advanceComponents = [
remoteFunc: '',
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
},
{
......@@ -352,7 +352,7 @@ export const advanceComponents = [
align: 'top',
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
labelWidthStatus: true
}
}
]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment