github
/
variant-form
mirror of https://github.com/vform666/variant-form
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

修复表格容器增加行增加列报错的问题。

master
vdpAdmin 2021-12-13 16:40:58 +08:00
parent 14b82776d3
commit dd158f05b1
17 changed files with 199 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
index_template/vform_demo.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 MiB

4
src/components/form-designer/form-widget/container-widget/container-wrapper.vue
View File

@ -20,9 +20,9 @@
<i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
@click.stop="moveDownWidget()"></i>
<i v-if="widget.type === 'table'" class="iconfont icon-insertrow" :title="i18nt('designer.hint.insertRow')"
@click.stop="insertTableRow(widget)"></i>
@click.stop="appendTableRow(widget)"></i>
<i v-if="widget.type === 'table'" class="iconfont icon-insertcolumn" :title="i18nt('designer.hint.insertColumn')"
@click.stop="insertTableCol(widget)"></i>
@click.stop="appendTableCol(widget)"></i>
<i class="el-icon-copy-document" v-if="(widget.type === 'grid') || (widget.type === 'table')"
:title="i18nt('designer.hint.cloneWidget')" @click.stop="cloneContainer(widget)"></i>
<i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeWidget"></i>

2
src/components/form-designer/form-widget/container-widget/grid-col-widget.vue
View File

@ -1,5 +1,5 @@
<template>
<el-col v-else-if="widget.type === 'grid-col'" class="grid-cell" v-bind="layoutProps"
<el-col v-if="widget.type === 'grid-col'" class="grid-cell" v-bind="layoutProps"
:class="[selected ? 'selected' : '', customClass]" :style="colHeightStyle"
:key="widget.id" @click.native.stop="selectWidget(widget)">
<draggable :list="widget.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"

102
src/components/form-designer/form-widget/field-widget/slot-widget.vue Normal file
View File

@ -0,0 +1,102 @@
<template>
<static-content-wrapper :designer="designer" :field="field" :design-state="designState"
:parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
:sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
<div :class="[!!designState ? 'slot-wrapper-design' : 'slot-wrapper-render']">
<!-- -->
<slot :name="field.options.name" v-bind:formModel="formModel"></slot>
<!-- -->
<!-- slot :name="field.options.name"></slot -->
<div v-if="!!designState" class="slot-title">{{field.options.label}}</div>
</div>
</static-content-wrapper>
</template>
<script>
import StaticContentWrapper from './static-content-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
export default {
name: "slot-widget",
componentName: 'FieldWidget', //必须固定为FieldWidget，用于接收父级组件的broadcast事件
mixins: [emitter, fieldMixin, i18n],
props: {
field: Object,
parentWidget: Object,
parentList: Array,
indexOfParentList: Number,
designer: Object,
designState: {
type: Boolean,
default: false
},
subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
type: Number,
default: -1
},
subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
type: Number,
default: -1
},
subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
type: String,
default: ''
},
},
components: {
StaticContentWrapper,
},
computed: {
},
beforeCreate() {
/* 这里不能访问方法和属性！！ */
},
created() {
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
需要在父组件created中初始化！！ */
this.registerToRefList()
this.initEventHandler()
this.handleOnCreated()
},
mounted() {
this.handleOnMounted()
},
beforeDestroy() {
this.unregisterFromRefList()
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.slot-wrapper-design {
width: 100%;
min-height: 26px;
background: linear-gradient(45deg, #ccc 25%, #eee 0, #eee 50%, #ccc 0, #ccc 75%, #eee 0);
background-size: 20px 20px;
text-align: center;
.slot-title {
font-size: 13px;
}
}
.slot-wrapper-render {
}
</style>

6
src/components/form-designer/toolbar-panel/index.vue
View File

@ -47,7 +47,11 @@
<VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
:option-data="testOptionData"
@appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
@formChange="handleFormChange"></VFormRender>
@formChange="handleFormChange">
<!--
<div slot="testSlot">aaaa</div>
-->
</VFormRender>
</div>
</div>
<code-editor v-model="testFunc" style="display: none"></code-editor>

61
src/components/form-designer/widget-panel/widgetsConfig.js
View File

@ -107,45 +107,6 @@ export const containers = [
}
},
/*
{
type: 'data-table',
category: 'container',
icon: 'data-table',
options: {
name: '',
label: '',
hidden: false,
columns: {},
checkboxColumn: {
width: 45,
},
operationColumn: {
buttons: [
{label: 'Edit', name: '', type: '', plain: false, round: true, circle: false, disabled: false, hidden: false},
{label: 'View', name: '', type: '', plain: false, round: true, circle: false, disabled: false, hidden: false},
{label: 'Delete', name: '', type: '', plain: false, round: true, circle: false, disabled: false, hidden: false},
{label: 'More...', name: '', type: '', plain: false, round: true, circle: false, disabled: false, hidden: false},
]
},
size: 'medium',
height: '100%',
maxHeight: '1200px',
stripe: false,
border: false,
fit: true,
highlightCurrentRow: false,
emptyText: 'no data',
showHeader: true,
showCheckBox: true,
showPager: false,
pagerPosition: 'center',
pagerSmall: false,
pagerBackground: false,
pagerCount: 7,
}
}
*/
]
@ -932,20 +893,20 @@ export const advancedFields = [
},
},
// {
// type: 'slot',
// icon: 'slot-field',
// formItemFlag: false,
// options: {
// name: '',
// label: '',
// customClass: '', //自定义css类名
// }
// },
]
export const customFields = [
/*
{
type: 'custom',
icon: 'custom-component',
},
{
type: 'slot',
icon: 'slot-component',
},
*/
]

14
src/components/form-render/container-item/grid-col-item.vue
View File

@ -5,11 +5,21 @@
<template v-for="(subWidget, swIdx) in widget.widgetList">
<template v-if="'container' === subWidget.category">
<component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
:index-of-parent-list="swIdx" :parent-widget="widget"></component>
:index-of-parent-list="swIdx" :parent-widget="widget">
<!-- 递归传递插槽！！！ -->
<template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"/>
</template>
</component>
</template>
<template v-else>
<component :is="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx" :parent-list="widget.widgetList"
:index-of-parent-list="swIdx" :parent-widget="widget"></component>
:index-of-parent-list="swIdx" :parent-widget="widget">
<!-- 递归传递插槽！！！ -->
<template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"/>
</template>
</component>
</template>
</template>
</template>

7
src/components/form-render/container-item/grid-item.vue
View File

@ -7,7 +7,12 @@
<template v-for="(colWidget, colIdx) in widget.cols">
<grid-col-item :widget="colWidget" :key="colIdx" :parent-list="widget.cols"
:index-of-parent-list="colIdx" :parent-widget="widget"
:col-height="widget.options.colHeight"></grid-col-item>
:col-height="widget.options.colHeight">
<!-- 递归传递插槽！！！ -->
<template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"/>
</template>
</grid-col-item>
</template>
</el-row>

4
src/components/form-render/container-item/sub-form-item.vue
View File

@ -52,7 +52,9 @@
:key="fieldSchemaData[sfrIdx][swIdx].id" :parent-list="widget.widgetList"
:index-of-parent-list="swIdx" :parent-widget="widget"
:sub-form-row-id="subFormRowId"
:sub-form-row-index="sfrIdx" :sub-form-col-index="swIdx"></component>
:sub-form-row-index="sfrIdx" :sub-form-col-index="swIdx">
<!-- 子表单暂不支持插槽！！！ -->
</component>
</div>
</template>
</el-row>

14
src/components/form-render/container-item/tab-item.vue
View File

@ -9,11 +9,21 @@
<template v-for="(subWidget, swIdx) in tab.widgetList">
<template v-if="'container' === subWidget.category">
<component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="tab.widgetList"
:index-of-parent-list="swIdx" :parent-widget="widget"></component>
:index-of-parent-list="swIdx" :parent-widget="widget">
<!-- 递归传递插槽！！！ -->
<template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"/>
</template>
</component>
</template>
<template v-else>
<component :is="subWidget.type + '-widget'" :field="subWidget" :key="swIdx" :parent-list="tab.widgetList"
:index-of-parent-list="swIdx" :parent-widget="widget"></component>
:index-of-parent-list="swIdx" :parent-widget="widget">
<!-- 递归传递插槽！！！ -->
<template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"/>
</template>
</component>
</template>
</template>
</el-tab-pane>

14
src/components/form-render/container-item/table-cell-item.vue
View File

@ -5,11 +5,21 @@
<template v-for="(subWidget, swIdx) in widget.widgetList">
<template v-if="'container' === subWidget.category">
<component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
:index-of-parent-list="swIdx" :parent-widget="widget"></component>
:index-of-parent-list="swIdx" :parent-widget="widget">
<!-- 递归传递插槽！！！ -->
<template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"/>
</template>
</component>
</template>
<template v-else>
<component :is="subWidget.type + '-widget'" :field="subWidget" :key="swIdx" :parent-list="widget.widgetList"
:index-of-parent-list="swIdx" :parent-widget="widget"></component>
:index-of-parent-list="swIdx" :parent-widget="widget">
<!-- 递归传递插槽！！！ -->
<template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"/>
</template>
</component>
</template>
</template>
</td>

7
src/components/form-render/container-item/table-item.vue
View File

@ -8,7 +8,12 @@
<tr v-for="(row, rowIdx) in widget.rows" :key="row.id">
<template v-for="(colWidget, colIdx) in row.cols">
<table-cell-item v-if="!colWidget.merged" :widget="colWidget" :key="colIdx" :parent-list="widget.cols"
:row-index="rowIdx" :col-index="colIdx" :parent-widget="widget"></table-cell-item>
:row-index="rowIdx" :col-index="colIdx" :parent-widget="widget">
<!-- 递归传递插槽！！！ -->
<template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"/>
</template>
</table-cell-item>
</template>
</tr>
</tbody>

14
src/components/form-render/index.vue
View File

@ -16,11 +16,21 @@
<template v-for="(widget, index) in widgetList">
<template v-if="'container' === widget.category">
<component :is="getContainerWidgetName(widget)" :widget="widget" :key="widget.id" :parent-list="widgetList"
:index-of-parent-list="index" :parent-widget="null"></component>
:index-of-parent-list="index" :parent-widget="null">
<!-- 递归传递插槽！！！ -->
<template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"/>
</template>
</component>
</template>
<template v-else>
<component :is="getWidgetName(widget)" :field="widget" :form-model="formDataModel" :designer="null" :key="widget.id" :parent-list="widgetList"
:index-of-parent-list="index" :parent-widget="null"></component>
:index-of-parent-list="index" :parent-widget="null">
<!-- 递归传递插槽！！！ -->
<template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"/>
</template>
</component>
</template>
</template>
</el-form>

14
src/extension/samples/card/card-item.vue
View File

@ -12,11 +12,21 @@
<template v-for="(subWidget, swIdx) in widget.widgetList">
<template v-if="'container' === subWidget.category">
<component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
:index-of-parent-list="swIdx" :parent-widget="widget"></component>
:index-of-parent-list="swIdx" :parent-widget="widget">
<!-- 递归传递插槽！！！ -->
<template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"/>
</template>
</component>
</template>
<template v-else>
<component :is="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx" :parent-list="widget.widgetList"
:index-of-parent-list="swIdx" :parent-widget="widget"></component>
:index-of-parent-list="swIdx" :parent-widget="widget">
<!-- 递归传递插槽！！！ -->
<template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"/>
</template>
</component>
</template>
</template>
</template>

1
src/icons/svg/slot-field.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1639198371252" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2851" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M475.937391 244.869565m18.031305 0l36.285217 0q18.031304 0 18.031304 18.031305l0 217.266087q0 18.031304-18.031304 18.031304l-36.285217 0q-18.031304 0-18.031305-18.031304l0-217.266087q0-18.031304 18.031305-18.031305Z" p-id="2852"></path><path d="M305.41913 525.801739m18.031305 0l36.285217 0q18.031304 0 18.031305 18.031304l0 217.266087q0 18.031304-18.031305 18.031305l-36.285217 0q-18.031304 0-18.031305-18.031305l0-217.266087q0-18.031304 18.031305-18.031304Z" p-id="2853"></path><path d="M646.233043 525.801739m18.031305 0l36.285217 0q18.031304 0 18.031305 18.031304l0 217.266087q0 18.031304-18.031305 18.031305l-36.285217 0q-18.031304 0-18.031305-18.031305l0-217.266087q0-18.031304 18.031305-18.031304Z" p-id="2854"></path><path d="M827.436522 122.212174H196.563478a74.573913 74.573913 0 0 0-74.351304 74.351304v630.873044a74.573913 74.573913 0 0 0 74.351304 74.351304h630.873044a74.573913 74.573913 0 0 0 74.351304-74.351304V196.563478a74.573913 74.573913 0 0 0-74.351304-74.351304z m52.090435 705.224348a52.090435 52.090435 0 0 1-52.090435 52.090435H196.563478a52.090435 52.090435 0 0 1-52.090435-52.090435V196.563478a52.090435 52.090435 0 0 1 52.090435-52.090435h630.873044a52.090435 52.090435 0 0 1 52.090435 52.090435z" p-id="2855"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

2
src/lang/en-US.js
View File

@ -56,9 +56,9 @@ export default {
'file-upload': 'File',
'rich-editor': 'Rich Editor',
cascader: 'Cascader',
slot: 'Slot',
custom: 'Custom Component',
slot: 'Slot'
},
hint: {

2
src/lang/zh-CN.js
View File

@ -56,9 +56,9 @@ export default {
'file-upload': '文件',
'rich-editor': '富文本',
cascader: '级联选择',
slot: '插槽',
custom: 'Custom Component',
slot: 'Slot'
},
hint: {