Skip to content

Chatopera OpenSource / ferry_web

Go to a project
Commit 22650f2a by YuleiLan
Options

完善子表单。

parent c3037dfc
Inline Side-by-side
Showing with 298 additions and 246 deletions
src/components/VueFormMaking/components/WidgetConfig.vue
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
<el-form-item <el-form-item
v-if="Object.keys(data.options).indexOf('labelWidth')>=0 && v-if="Object.keys(data.options).indexOf('labelWidth')>=0 &&
data.type!=='grid' && data.type!=='grid' &&
data.type!=='subform' &&
data.type !== 'divider'" data.type !== 'divider'"
:label="$t('fm.config.widget.labelWidth')" :label="$t('fm.config.widget.labelWidth')"
> >
......
src/components/VueFormMaking/components/WidgetForm.vue
...@@ -68,9 +68,9 @@ ...@@ -68,9 +68,9 @@
v-if="element && element.key" v-if="element && element.key"
:key="element.key" :key="element.key"
class="widget-col widget-view" 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}" :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)" @click.native="handleSelectWidget(index)"
> >
<div <div
...@@ -79,33 +79,42 @@ ...@@ -79,33 +79,42 @@
:gutter="element.options.gutter ? element.options.gutter : 0" :gutter="element.options.gutter ? element.options.gutter : 0"
:justify="element.options.justify" :justify="element.options.justify"
:align="element.options.align" :align="element.options.align"
@click.native="handleSelectWidget(index)"
> >
<draggable <draggable
v-model="element.columns.list" v-model="element.columns.list"
class="widget-col widget-view"
:no-transition-on-drag="true" :no-transition-on-drag="true"
v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}" v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
@end="handleMoveEnd" @end="handleMoveEnd"
@add="handleSubformWidgetColAdd($event, element)" @add="handleSubformWidgetAdd($event, element)"
> >
<transition-group name="fade" tag="div" class="widget-col-list" style="min-height: 100px"> <transition-group
name="fade"
tag="div"
class="widget-col-list"
style="min-height: 131px;overflow-x: auto; white-space: nowrap;"
>
<template v-for="(el, i) in element.columns.list"> <template v-for="(el, i) in element.columns.list">
<widget-form-item <div
v-if="el.key" v-if="el && el.key"
:key="el.key" :key="el.key"
:element="el" :style="{minWidth: el.width ? `${el.width}px`: '33.3%', width: el.width ? `${el.width}px`: '33.3%', 'display': 'inline-block', 'vertical-align': 'top'}"
:select.sync="selectWidget" @click.native="handleSelectWidget(i)"
:index="i" >
:data="element.columns" <widget-form-item
:data-config="data" :element="el"
/> :select.sync="selectWidget"
:index="i"
:data="element.columns"
:data-config="data"
:is-label="true"
:is-table="true"
/>
</div>
</template> </template>
</transition-group> </transition-group>
</draggable> </draggable>
<div v-if="selectWidget.key == element.key" class="widget-view-action widget-col-action"> <div v-if="selectWidget.key == element.key" class="widget-view-action widget-col-action">
<i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)" /> <i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)" />
...@@ -214,9 +223,19 @@ export default { ...@@ -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] this.selectWidget = this.data.list[newIndex]
}, },
handleSubformWidgetColAdd($event, row) { handleSubformWidgetAdd($event, row) {
const newIndex = $event.newIndex const newIndex = $event.newIndex
const oldIndex = $event.oldIndex const oldIndex = $event.oldIndex
const item = $event.item 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> <template>
<el-form-item <el-form-item
v-if="element && element.key" 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="widget-view "
:class="{active: selectWidget.key === element.key, 'is_req': element.options.required}" :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)" @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'"> <div v-if="isTable">
<el-input <el-table
v-model="element.options.defaultValue" :data="[element]"
type="textarea" border
: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-table-column
</el-select> :label="element.name"
</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 }} <WidgetFormFields :element="element" />
</span> </el-table-column>
</el-divider> </el-table>
</template> </div>
<div v-else>
<WidgetFormFields :element="element" />
</div>
<div v-if="selectWidget.key == element.key" class="widget-view-action"> <div v-if="selectWidget.key == element.key" class="widget-view-action">
<i class="iconfont icon-icon_clone" @click.stop="handleWidgetClone(index)" /> <i class="iconfont icon-icon_clone" @click.stop="handleWidgetClone(index)" />
...@@ -230,13 +37,13 @@ ...@@ -230,13 +37,13 @@
</template> </template>
<script> <script>
import FmUpload from './Upload' import WidgetFormFields from './WidgetFormFields'
export default { export default {
components: { components: {
FmUpload WidgetFormFields
}, },
/* eslint-disable */ /* eslint-disable */
props: ['element', 'select', 'index', 'data', 'dataConfig'], props: ['element', 'select', 'index', 'data', 'dataConfig', 'isLabel', 'isTable'],
data() { data() {
return { return {
elementLabelWidth: '', elementLabelWidth: '',
......
src/components/VueFormMaking/components/componentsConfig.js
...@@ -12,7 +12,7 @@ export const basicComponents = [ ...@@ -12,7 +12,7 @@ export const basicComponents = [
disabled: false, disabled: false,
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: true
} }
}, },
{ {
...@@ -27,7 +27,7 @@ export const basicComponents = [ ...@@ -27,7 +27,7 @@ export const basicComponents = [
placeholder: '', placeholder: '',
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: true
} }
}, },
{ {
...@@ -44,7 +44,7 @@ export const basicComponents = [ ...@@ -44,7 +44,7 @@ export const basicComponents = [
controlsPosition: '', controlsPosition: '',
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: true
} }
}, },
{ {
...@@ -80,7 +80,7 @@ export const basicComponents = [ ...@@ -80,7 +80,7 @@ export const basicComponents = [
disabled: false, disabled: false,
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: true
} }
}, },
{ {
...@@ -113,7 +113,7 @@ export const basicComponents = [ ...@@ -113,7 +113,7 @@ export const basicComponents = [
disabled: false, disabled: false,
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: true
} }
}, },
{ {
...@@ -135,7 +135,7 @@ export const basicComponents = [ ...@@ -135,7 +135,7 @@ export const basicComponents = [
width: '', width: '',
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: true
} }
}, },
{ {
...@@ -157,7 +157,7 @@ export const basicComponents = [ ...@@ -157,7 +157,7 @@ export const basicComponents = [
width: '', width: '',
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: true
} }
}, },
{ {
...@@ -171,7 +171,7 @@ export const basicComponents = [ ...@@ -171,7 +171,7 @@ export const basicComponents = [
required: false, required: false,
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: true
} }
}, },
{ {
...@@ -184,7 +184,7 @@ export const basicComponents = [ ...@@ -184,7 +184,7 @@ export const basicComponents = [
required: false, required: false,
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: true
} }
}, },
{ {
...@@ -219,7 +219,7 @@ export const basicComponents = [ ...@@ -219,7 +219,7 @@ export const basicComponents = [
remoteFunc: '', remoteFunc: '',
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: true
} }
}, },
{ {
...@@ -231,7 +231,7 @@ export const basicComponents = [ ...@@ -231,7 +231,7 @@ export const basicComponents = [
disabled: false, disabled: false,
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: true
} }
}, },
{ {
...@@ -249,7 +249,7 @@ export const basicComponents = [ ...@@ -249,7 +249,7 @@ export const basicComponents = [
width: '', width: '',
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: true
} }
}, },
{ {
...@@ -261,7 +261,7 @@ export const basicComponents = [ ...@@ -261,7 +261,7 @@ export const basicComponents = [
font_weight: '500', // 粗体 font_weight: '500', // 粗体
font_family: '', // 字体属性 font_family: '', // 字体属性
defaultValue: '这是一句话', defaultValue: '这是一句话',
labelWidthStatus: false, labelWidthStatus: true,
customClass: '', customClass: '',
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false labelWidthDisabled: false
...@@ -277,7 +277,7 @@ export const advanceComponents = [ ...@@ -277,7 +277,7 @@ export const advanceComponents = [
defaultType: 'String', defaultType: 'String',
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: true
} }
}, },
{ {
...@@ -303,7 +303,7 @@ export const advanceComponents = [ ...@@ -303,7 +303,7 @@ export const advanceComponents = [
action: 'https://jsonplaceholder.typicode.com/photos/', action: 'https://jsonplaceholder.typicode.com/photos/',
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: true
} }
}, },
{ {
...@@ -314,7 +314,7 @@ export const advanceComponents = [ ...@@ -314,7 +314,7 @@ export const advanceComponents = [
width: '', width: '',
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: true
} }
}, },
{ {
...@@ -336,7 +336,7 @@ export const advanceComponents = [ ...@@ -336,7 +336,7 @@ export const advanceComponents = [
remoteFunc: '', remoteFunc: '',
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: true
} }
}, },
{ {
...@@ -352,7 +352,7 @@ export const advanceComponents = [ ...@@ -352,7 +352,7 @@ export const advanceComponents = [
align: 'top', align: 'top',
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, 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