mirror of
https://github.com/vform666/variant-form3-vite.git
synced 2025-09-19 04:33:03 +08:00
Vue 3版本初次提交，继续测试中。
This commit is contained in:
vdpAdmin
@ -0,0 +1,87 @@
|
||||
<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">
|
||||
<el-button ref="fieldEditor" :type="field.options.type" :size="field.options.size"
|
||||
:plain="field.options.plain" :round="field.options.round"
|
||||
:circle="field.options.circle" :icon="field.options.icon"
|
||||
:disabled="field.options.disabled"
|
||||
@click="handleButtonWidgetClick">
|
||||
{{field.options.label}}</el-button>
|
||||
</static-content-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StaticContentWrapper from './static-content-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "button-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()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; //* static-content-wrapper已引入，还需要重复引入吗？ *//
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<el-cascader ref="fieldEditor" :options="field.options.optionItems" v-model="fieldModel" class="full-width-input"
|
||||
:disabled="field.options.disabled"
|
||||
:size="field.options.size"
|
||||
:clearable="field.options.clearable"
|
||||
:filterable="field.options.filterable"
|
||||
:placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
|
||||
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
|
||||
@change="handleChangeEvent">
|
||||
</el-cascader>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "cascader-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initOptionItems()
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
.full-width-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<el-checkbox-group ref="fieldEditor" v-model="fieldModel"
|
||||
:disabled="field.options.disabled" :size="field.options.size"
|
||||
@change="handleChangeEvent">
|
||||
<template v-if="!!field.options.buttonStyle">
|
||||
<el-checkbox-button v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value"
|
||||
:disabled="item.disabled" :border="field.options.border"
|
||||
:style="{display: field.options.displayStyle}">{{item.label}}</el-checkbox-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-checkbox v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value"
|
||||
:disabled="item.disabled" :border="field.options.border"
|
||||
:style="{display: field.options.displayStyle}">{{item.label}}</el-checkbox>
|
||||
</template>
|
||||
</el-checkbox-group>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "checkbox-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initOptionItems()
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<el-color-picker ref="fieldEditor" v-model="fieldModel"
|
||||
:size="field.options.size"
|
||||
:disabled="field.options.disabled"
|
||||
@change="handleChangeEvent">
|
||||
</el-color-picker>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "color-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
.full-width-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel" class="full-width-input"
|
||||
:disabled="field.options.disabled" :readonly="field.options.readonly"
|
||||
:size="field.options.size"
|
||||
:clearable="field.options.clearable" :editable="field.options.editable"
|
||||
:format="field.options.format" :value-format="field.options.valueFormat"
|
||||
:start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startDatePlaceholder')"
|
||||
:end-placeholder="field.options.endPlaceholder || i18nt('render.hint.endDatePlaceholder')"
|
||||
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
|
||||
@change="handleChangeEvent">
|
||||
</el-date-picker>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "date-range-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
.full-width-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel" class="full-width-input"
|
||||
:readonly="field.options.readonly" :disabled="field.options.disabled"
|
||||
:size="field.options.size"
|
||||
:clearable="field.options.clearable" :editable="field.options.editable"
|
||||
:format="field.options.format" :value-format="field.options.valueFormat"
|
||||
:placeholder="field.options.placeholder || i18nt('render.hint.datePlaceholder')"
|
||||
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
|
||||
@change="handleChangeEvent">
|
||||
</el-date-picker>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "date-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
.full-width-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,83 @@
|
||||
<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">
|
||||
<el-divider ref="fieldEditor" direction="horizontal" :content-position="field.options.contentPosition">
|
||||
{{field.options.label}}</el-divider>
|
||||
</static-content-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StaticContentWrapper from './static-content-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "divider-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()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; //* static-content-wrapper已引入，还需要重复引入吗？ *//
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,546 @@
|
||||
import {deepClone} from "@/utils/util"
|
||||
import FormValidators from '@/utils/validators'
|
||||
import eventBus from "@/utils/event-bus"
|
||||
|
||||
export default {
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel', 'getOptionData'],
|
||||
|
||||
computed: {
|
||||
subFormName() {
|
||||
return !!this.parentWidget ? this.parentWidget.options.name : ''
|
||||
},
|
||||
|
||||
subFormItemFlag() {
|
||||
return !!this.parentWidget ? this.parentWidget.type === 'sub-form' : false
|
||||
},
|
||||
|
||||
formModel: {
|
||||
cache: false,
|
||||
get() {
|
||||
return this.globalModel.formModel
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
//--------------------- 组件内部方法 begin ------------------//
|
||||
|
||||
initFieldModel() {
|
||||
if (!this.field.formItemFlag) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!!this.subFormItemFlag && !this.designState) { //SubForm子表单组件需要特殊处理！！
|
||||
let subFormData = this.formModel[this.subFormName]
|
||||
if (((subFormData === undefined) || (subFormData[this.subFormRowIndex] === undefined) ||
|
||||
(subFormData[this.subFormRowIndex][this.field.options.name] === undefined)) &&
|
||||
(this.field.options.defaultValue !== undefined)) {
|
||||
this.fieldModel = this.field.options.defaultValue
|
||||
subFormData[this.subFormRowIndex][this.field.options.name] = this.field.options.defaultValue
|
||||
} else if (subFormData[this.subFormRowIndex][this.field.options.name] === undefined) {
|
||||
this.fieldModel = null
|
||||
subFormData[this.subFormRowIndex][this.field.options.name] = null
|
||||
} else {
|
||||
this.fieldModel = subFormData[this.subFormRowIndex][this.field.options.name]
|
||||
}
|
||||
|
||||
/* 主动触发子表单内field-widget的onChange事件！！ */
|
||||
setTimeout(() => { //延时触发onChange事件, 便于更新计算字段！！
|
||||
this.handleOnChangeForSubForm(this.fieldModel, this.oldFieldValue, subFormData, this.subFormRowId)
|
||||
}, 800)
|
||||
this.oldFieldValue = deepClone(this.fieldModel)
|
||||
|
||||
this.initFileList() //处理图片上传、文件上传字段
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if ((this.formModel[this.field.options.name] === undefined) &&
|
||||
(this.field.options.defaultValue !== undefined)) {
|
||||
this.fieldModel = this.field.options.defaultValue
|
||||
} else if (this.formModel[this.field.options.name] === undefined) { //如果formModel为空对象，则初始化字段值为null!!
|
||||
this.formModel[this.field.options.name] = null
|
||||
} else {
|
||||
this.fieldModel = this.formModel[this.field.options.name]
|
||||
}
|
||||
this.oldFieldValue = deepClone(this.fieldModel)
|
||||
this.initFileList() //处理图片上传、文件上传字段
|
||||
},
|
||||
|
||||
initFileList() { //初始化上传组件的已上传文件列表
|
||||
if ( ((this.field.type !== 'picture-upload') && (this.field.type !== 'file-upload')) || (this.designState === true) ) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!!this.fieldModel) {
|
||||
if (Array.isArray(this.fieldModel)) {
|
||||
this.fileList = deepClone(this.fieldModel)
|
||||
} else {
|
||||
this.fileList.splice(0, 0, deepClone(this.fieldModel))
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
initEventHandler() {
|
||||
eventBus.$on('setFormData', function (newFormData) {
|
||||
console.log('formModel of globalModel----------', this.globalModel.formModel)
|
||||
if (!this.subFormItemFlag) {
|
||||
this.setValue(newFormData[this.field.options.name])
|
||||
}
|
||||
})
|
||||
|
||||
eventBus.$on('field-value-changed', function (values) {
|
||||
if (!!this.subFormItemFlag) {
|
||||
let subFormData = this.formModel[this.subFormName]
|
||||
this.handleOnChangeForSubForm(values[0], values[1], subFormData, this.subFormRowId)
|
||||
} else {
|
||||
this.handleOnChange(values[0], values[1])
|
||||
}
|
||||
})
|
||||
|
||||
/* 监听重新加载选项事件 */
|
||||
eventBus.$on('reloadOptionItems', function (widgetNames) {
|
||||
if ((widgetNames.length === 0) || (widgetNames.indexOf(this.field.options.name) > -1)) {
|
||||
this.initOptionItems(true)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
handleOnCreated() {
|
||||
if (!!this.field.options.onCreated) {
|
||||
let customFunc = new Function(this.field.options.onCreated)
|
||||
customFunc.call(this)
|
||||
}
|
||||
},
|
||||
|
||||
handleOnMounted() {
|
||||
if (!!this.field.options.onMounted) {
|
||||
let mountFunc = new Function(this.field.options.onMounted)
|
||||
mountFunc.call(this)
|
||||
}
|
||||
},
|
||||
|
||||
registerToRefList(oldRefName) {
|
||||
if ((this.refList !== null) && !!this.field.options.name) {
|
||||
if (this.subFormItemFlag && !this.designState) { //处理子表单元素（且非设计状态）
|
||||
if (!!oldRefName) {
|
||||
delete this.refList[oldRefName + '@row' + this.subFormRowId]
|
||||
}
|
||||
this.refList[this.field.options.name + '@row' + this.subFormRowId] = this
|
||||
} else {
|
||||
if (!!oldRefName) {
|
||||
delete this.refList[oldRefName]
|
||||
}
|
||||
this.refList[this.field.options.name] = this
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
unregisterFromRefList() { //销毁组件时注销组件ref
|
||||
if ((this.refList !== null) && !!this.field.options.name) {
|
||||
let oldRefName = this.field.options.name
|
||||
if (this.subFormItemFlag && !this.designState) { //处理子表单元素（且非设计状态）
|
||||
delete this.refList[oldRefName + '@row' + this.subFormRowId]
|
||||
} else {
|
||||
delete this.refList[oldRefName]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
initOptionItems(keepSelected) {
|
||||
if (this.designState) {
|
||||
return
|
||||
}
|
||||
|
||||
if ((this.field.type === 'radio') || (this.field.type === 'checkbox')
|
||||
|| (this.field.type === 'select') || (this.field.type === 'cascader')) {
|
||||
if (!!this.globalOptionData && this.globalOptionData.hasOwnProperty(this.field.options.name)) {
|
||||
if (!!keepSelected) {
|
||||
//this.reloadOptions(this.globalOptionData[this.field.options.name]) /* 异步更新option-data之后不能获取到最新值，
|
||||
// 以下改用provide的getOptionData()方法 */
|
||||
const newOptionItems = this.getOptionData()
|
||||
this.reloadOptions(newOptionItems[this.field.options.name])
|
||||
} else {
|
||||
this.loadOptions( this.globalOptionData[this.field.options.name] )
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
refreshDefaultValue() {
|
||||
if ((this.designState === true) && (this.field.options.defaultValue !== undefined)) {
|
||||
this.fieldModel = this.field.options.defaultValue
|
||||
}
|
||||
},
|
||||
|
||||
clearFieldRules() {
|
||||
if (!this.field.formItemFlag) {
|
||||
return
|
||||
}
|
||||
|
||||
this.rules.splice(0, this.rules.length) //清空已有
|
||||
},
|
||||
|
||||
buildFieldRules() {
|
||||
if (!this.field.formItemFlag) {
|
||||
return
|
||||
}
|
||||
|
||||
this.rules.splice(0, this.rules.length) //清空已有
|
||||
if (!!this.field.options.required) {
|
||||
this.rules.push({
|
||||
required: true,
|
||||
//trigger: ['blur', 'change'],
|
||||
trigger: ['blur'], /* 去掉change事件触发校验，change事件触发时formModel数据尚未更新，导致radio/checkbox必填校验出错！！ */
|
||||
message: this.i18nt('render.hint.fieldRequired'),
|
||||
})
|
||||
}
|
||||
|
||||
if (!!this.field.options.validation) {
|
||||
let vldName = this.field.options.validation
|
||||
if (!!FormValidators[vldName]) {
|
||||
this.rules.push({
|
||||
validator: FormValidators[vldName],
|
||||
trigger: ['blur', 'change'],
|
||||
label: this.field.options.label,
|
||||
errorMsg: this.field.options.validationHint
|
||||
})
|
||||
} else {
|
||||
this.rules.push({
|
||||
validator: FormValidators['regExp'],
|
||||
trigger: ['blur', 'change'],
|
||||
regExp: vldName,
|
||||
label: this.field.options.label,
|
||||
errorMsg: this.field.options.validationHint
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (!!this.field.options.onValidate) {
|
||||
let customFn = new Function('rule', 'value', 'callback', this.field.options.onValidate)
|
||||
this.rules.push({
|
||||
validator: customFn,
|
||||
trigger: ['blur', 'change'],
|
||||
label: this.field.options.label
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 禁用字段值变动触发表单校验
|
||||
*/
|
||||
disableChangeValidate() {
|
||||
if (!this.rules) {
|
||||
return
|
||||
}
|
||||
|
||||
this.rules.forEach(rule => {
|
||||
if (!!rule.trigger) {
|
||||
rule.trigger.splice(0, rule.trigger.length)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 启用字段值变动触发表单校验
|
||||
*/
|
||||
enableChangeValidate() {
|
||||
if (!this.rules) {
|
||||
return
|
||||
}
|
||||
|
||||
this.rules.forEach(rule => {
|
||||
if (!!rule.trigger) {
|
||||
rule.trigger.push('blur')
|
||||
rule.trigger.push('change')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
disableOptionOfList(optionList, optionValue) {
|
||||
if (!!optionList && (optionList.length > 0)) {
|
||||
optionList.forEach(opt => {
|
||||
if (opt.value === optionValue) {
|
||||
opt.disabled = true
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
enableOptionOfList(optionList, optionValue) {
|
||||
if (!!optionList && (optionList.length > 0)) {
|
||||
optionList.forEach(opt => {
|
||||
if (opt.value === optionValue) {
|
||||
opt.disabled = false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------- 组件内部方法 end ------------------//
|
||||
|
||||
//--------------------- 事件处理 begin ------------------//
|
||||
|
||||
emitFieldDataChange(newValue, oldValue) {
|
||||
this.$emit('field-value-changed', [newValue, oldValue])
|
||||
|
||||
/* 必须用dispatch向指定父组件派发消息！！ */
|
||||
this.dispatch('VFormRender', 'fieldChange',
|
||||
[this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex])
|
||||
},
|
||||
|
||||
syncUpdateFormModel(value) {
|
||||
if (!!this.designState) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!!this.subFormItemFlag) {
|
||||
let subFormData = this.formModel[this.subFormName] || [{}]
|
||||
let subFormDataRow = subFormData[this.subFormRowIndex]
|
||||
subFormDataRow[this.field.options.name] = value
|
||||
} else {
|
||||
this.formModel[this.field.options.name] = value
|
||||
}
|
||||
},
|
||||
|
||||
handleChangeEvent(value) {
|
||||
this.syncUpdateFormModel(value)
|
||||
this.emitFieldDataChange(value, this.oldFieldValue)
|
||||
|
||||
//number组件一般不会触发focus事件，故此处需要手工赋值oldFieldValue！！
|
||||
this.oldFieldValue = deepClone(value) /* oldFieldValue需要在initFieldModel()方法中赋初值!! */
|
||||
|
||||
/* 主动触发表单的单个字段校验，用于清除字段可能存在的校验错误提示 */
|
||||
this.dispatch('VFormRender', 'fieldValidation', [this.field.options.name])
|
||||
},
|
||||
|
||||
handleFocusCustomEvent(event) {
|
||||
this.oldFieldValue = deepClone(this.fieldModel) //保存修改change之前的值
|
||||
|
||||
if (!!this.field.options.onFocus) {
|
||||
let customFn = new Function('event', this.field.options.onFocus)
|
||||
customFn.call(this, event)
|
||||
}
|
||||
},
|
||||
|
||||
handleBlurCustomEvent(event) {
|
||||
if (!!this.field.options.onBlur) {
|
||||
let customFn = new Function('event', this.field.options.onBlur)
|
||||
customFn.call(this, event)
|
||||
}
|
||||
},
|
||||
|
||||
handleInputCustomEvent(value) {
|
||||
this.syncUpdateFormModel(value)
|
||||
|
||||
if (!!this.field.options.onInput) {
|
||||
let customFn = new Function('value', this.field.options.onInput)
|
||||
customFn.call(this, value)
|
||||
}
|
||||
},
|
||||
|
||||
emitAppendButtonClick() {
|
||||
/* 必须调用mixins中的dispatch方法逐级向父组件发送消息！！ */
|
||||
this.dispatch('VFormRender', 'appendButtonClick', [this]);
|
||||
},
|
||||
|
||||
handleOnChange(val, oldVal) { //自定义onChange事件
|
||||
if (!!this.field.options.onChange) {
|
||||
let changeFn = new Function('value', 'oldValue', this.field.options.onChange)
|
||||
changeFn.call(this, val, oldVal)
|
||||
}
|
||||
},
|
||||
|
||||
handleOnChangeForSubForm(val, oldVal, subFormData, rowId) { //子表单自定义onChange事件
|
||||
if (!!this.field.options.onChange) {
|
||||
let changeFn = new Function('value', 'oldValue', 'subFormData', 'rowId', this.field.options.onChange)
|
||||
changeFn.call(this, val, oldVal, subFormData, rowId)
|
||||
}
|
||||
},
|
||||
|
||||
handleButtonWidgetClick() {
|
||||
if (!!this.designState) { //设计状态不触发点击事件
|
||||
return
|
||||
}
|
||||
|
||||
if (!!this.field.options.onClick) {
|
||||
let changeFn = new Function(this.field.options.onClick)
|
||||
changeFn.call(this)
|
||||
} else {
|
||||
this.dispatch('VFormRender', 'buttonClick', [this]);
|
||||
}
|
||||
},
|
||||
|
||||
remoteQuery(keyword) {
|
||||
if (!!this.field.options.onRemoteQuery) {
|
||||
let remoteFn = new Function('keyword', this.field.options.onRemoteQuery)
|
||||
remoteFn.call(this, keyword)
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------- 事件处理 end ------------------//
|
||||
|
||||
//--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
|
||||
/* 提示：用户可自行扩充这些方法！！！ */
|
||||
|
||||
getFormRef() { /* 获取VFrom引用，必须在VForm组件created之后方可调用 */
|
||||
return this.refList['v_form_ref']
|
||||
},
|
||||
|
||||
getWidgetRef(widgetName, showError) {
|
||||
let foundRef = this.refList[widgetName]
|
||||
if (!foundRef && !!showError) {
|
||||
this.$message.error(this.i18nt('render.hint.refNotFound') + widgetName)
|
||||
}
|
||||
return foundRef
|
||||
},
|
||||
|
||||
getFieldEditor() { //获取内置的el表单组件
|
||||
return this.$refs['fieldEditor']
|
||||
},
|
||||
|
||||
/*
|
||||
注意：VFormRender的setFormData方法不会触发子表单内field-widget的setValue方法，
|
||||
因为setFormData方法调用后，子表单内所有field-widget组件已被清空，接收不到setFormData事件！！
|
||||
* */
|
||||
setValue(newValue) {
|
||||
/* if ((this.field.type === 'picture-upload') || (this.field.type === 'file-upload')) {
|
||||
this.fileList = newValue
|
||||
} else */ if (!!this.field.formItemFlag) {
|
||||
let oldValue = deepClone(this.fieldModel)
|
||||
this.fieldModel = newValue
|
||||
this.initFileList()
|
||||
|
||||
this.syncUpdateFormModel(newValue)
|
||||
this.emitFieldDataChange(newValue, oldValue)
|
||||
}
|
||||
},
|
||||
|
||||
getValue() {
|
||||
/* if ((this.field.type === 'picture-upload') || (this.field.type === 'file-upload')) {
|
||||
return this.fileList
|
||||
} else */ {
|
||||
return this.fieldModel
|
||||
}
|
||||
},
|
||||
|
||||
resetField() {
|
||||
let defaultValue = this.field.options.defaultValue
|
||||
this.setValue(defaultValue)
|
||||
this.$nextTick(() => {
|
||||
//
|
||||
})
|
||||
|
||||
//清空上传组件文件列表
|
||||
if ((this.field.type === 'picture-upload') || (this.field.type === 'file-upload')) {
|
||||
this.$refs['fieldEditor'].clearFiles()
|
||||
this.fileList.splice(0, this.fileList.length)
|
||||
}
|
||||
},
|
||||
|
||||
setWidgetOption(optionName, optionValue) { //通用组件选项修改API
|
||||
if (this.field.options.hasOwnProperty(optionName)) {
|
||||
this.field.options[optionName] = optionValue
|
||||
//TODO: 是否重新构建组件？？有些属性修改后必须重新构建组件才能生效，比如字段校验规则。
|
||||
}
|
||||
},
|
||||
|
||||
setReadonly(flag) {
|
||||
this.field.options.readonly = flag
|
||||
},
|
||||
|
||||
setDisabled(flag) {
|
||||
this.field.options.disabled = flag
|
||||
},
|
||||
|
||||
setAppendButtonVisible(flag) {
|
||||
this.field.options.appendButton = flag
|
||||
},
|
||||
|
||||
setAppendButtonDisabled(flag) {
|
||||
this.field.options.appendButtonDisabled = flag
|
||||
},
|
||||
|
||||
setHidden(flag) {
|
||||
this.field.options.hidden = flag
|
||||
|
||||
if (!!flag) { //清除组件校验规则
|
||||
this.clearFieldRules()
|
||||
} else { //重建组件校验规则
|
||||
this.buildFieldRules()
|
||||
}
|
||||
},
|
||||
|
||||
setRequired(flag) {
|
||||
this.field.options.required = flag
|
||||
this.buildFieldRules()
|
||||
},
|
||||
|
||||
setLabel(newLabel) {
|
||||
this.field.options.label = newLabel
|
||||
},
|
||||
|
||||
focus() {
|
||||
if (!!this.getFieldEditor() && !!this.getFieldEditor().focus) {
|
||||
this.getFieldEditor().focus()
|
||||
}
|
||||
},
|
||||
|
||||
clearSelectedOptions() { //清空已选选项
|
||||
if ((this.field.type !== 'checkbox') && (this.field.type !== 'radio') && (this.field.type !== 'select')) {
|
||||
return
|
||||
}
|
||||
|
||||
if ((this.field.type === 'checkbox') ||
|
||||
((this.field.type === 'select') && this.field.options.multiple)) {
|
||||
this.fieldModel = []
|
||||
} else {
|
||||
this.fieldModel = ''
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载选项，并清空字段值
|
||||
* @param options
|
||||
*/
|
||||
loadOptions(options) {
|
||||
this.field.options.optionItems = deepClone(options)
|
||||
//this.clearSelectedOptions() //清空已选选项
|
||||
},
|
||||
|
||||
/**
|
||||
* 重新加载选项，不清空字段值
|
||||
* @param options
|
||||
*/
|
||||
reloadOptions(options) {
|
||||
this.field.options.optionItems = deepClone(options)
|
||||
},
|
||||
|
||||
disableOption(optionValue) {
|
||||
this.disableOptionOfList(this.field.options.optionItems, optionValue)
|
||||
},
|
||||
|
||||
enableOption(optionValue) {
|
||||
this.enableOptionOfList(this.field.options.optionItems, optionValue)
|
||||
},
|
||||
|
||||
setUploadHeader(name, value) {
|
||||
//this.$set(this.uploadHeaders, name, value)
|
||||
this.uploadHeaders[name] = value
|
||||
},
|
||||
|
||||
setUploadData(name, value) {
|
||||
//this.$set(this.uploadData, name, value)
|
||||
this.uploadData[name] = value
|
||||
},
|
||||
|
||||
setToolbar(customToolbar) {
|
||||
this.customToolbar = customToolbar
|
||||
},
|
||||
|
||||
//--------------------- 以上为组件支持外部调用的API方法 end ------------------//
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<!-- el-upload增加:name="field.options.name"后，会导致又拍云上传失败！故删除之！！ -->
|
||||
<el-upload ref="fieldEditor" :disabled="field.options.disabled"
|
||||
:style="styleVariables" class="dynamicPseudoAfter"
|
||||
:action="field.options.uploadURL" :headers="uploadHeaders" :data="uploadData"
|
||||
:with-credentials="field.options.withCredentials"
|
||||
:multiple="field.options.multipleSelect" :file-list="fileList"
|
||||
:show-file-list="field.options.showFileList" :class="{'hideUploadDiv': uploadBtnHidden}"
|
||||
:limit="field.options.limit" :on-exceed="handleFileExceed" :before-upload="beforeFileUpload"
|
||||
:on-success="handleFileUpload" :on-error="handelUploadError" :on-remove="handleFileRemove">
|
||||
<template #tip>
|
||||
<div class="el-upload__tip"
|
||||
v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<i class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</template>
|
||||
<template #file="{ file }">
|
||||
<div class="upload-file-list">
|
||||
<span class="upload-file-name" :title="file.name">{{file.name}}</span>
|
||||
<a :href="file.url" download="">
|
||||
<i class="el-icon-download file-action" title="i18nt('render.hint.downloadFile')"></i></a>
|
||||
<i class="el-icon-delete file-action" title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
|
||||
@click="removeUploadFile(file.name)"></i>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import {deepClone} from "@/utils/util";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
let selectFileText = "'" + translate('render.hint.selectFile') + "'"
|
||||
|
||||
export default {
|
||||
name: "file-upload-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
|
||||
uploadHeaders: {},
|
||||
uploadData: {
|
||||
key: '', //七牛云上传文件名
|
||||
//token: '', //七牛云上传token
|
||||
|
||||
//policy: '', //又拍云上传policy
|
||||
//authorization: '', //又拍云上传签名
|
||||
},
|
||||
fileList: [], //上传文件列表
|
||||
uploadBtnHidden: false,
|
||||
|
||||
styleVariables: {
|
||||
'--select-file-action': selectFileText,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleFileExceed() {
|
||||
let uploadLimit = this.field.options.limit /* 此行不能注释，下一行ES6模板字符串需要用到！！ */
|
||||
this.$message.warning(eval('`' + this.i18nt('render.hint.uploadExceed') + '`'));
|
||||
},
|
||||
|
||||
updateUploadFieldModelAndEmitDataChange(fileList) {
|
||||
let oldValue = deepClone(this.fieldModel)
|
||||
this.fieldModel = deepClone(fileList)
|
||||
this.syncUpdateFormModel(this.fieldModel)
|
||||
this.emitFieldDataChange(this.fieldModel, oldValue)
|
||||
},
|
||||
|
||||
beforeFileUpload(file) {
|
||||
let fileTypeCheckResult = false
|
||||
let extFileName = file.name.substring(file.name.lastIndexOf('.') + 1)
|
||||
if (!!this.field.options && !!this.field.options.fileTypes) {
|
||||
let uploadFileTypes = this.field.options.fileTypes
|
||||
if (uploadFileTypes.length > 0) {
|
||||
fileTypeCheckResult = uploadFileTypes.some( (ft) => {
|
||||
return extFileName.toLowerCase() === ft.toLowerCase()
|
||||
})
|
||||
}
|
||||
}
|
||||
if (!fileTypeCheckResult) {
|
||||
this.$message.error(this.i18nt('render.hint.unsupportedFileType') + extFileName)
|
||||
return false;
|
||||
}
|
||||
|
||||
let fileSizeCheckResult = false
|
||||
let uploadFileMaxSize = 5 //5MB
|
||||
if (!!this.field.options && !!this.field.options.fileMaxSize) {
|
||||
uploadFileMaxSize = this.field.options.fileMaxSize
|
||||
}
|
||||
fileSizeCheckResult = file.size / 1024 / 1024 <= uploadFileMaxSize
|
||||
if (!fileSizeCheckResult) {
|
||||
this.$message.error(this.i18nt('render.hint.fileSizeExceed') + uploadFileMaxSize + 'MB')
|
||||
return false;
|
||||
}
|
||||
|
||||
this.uploadData.key = file.name
|
||||
return this.handleOnBeforeUpload(file)
|
||||
},
|
||||
|
||||
handleOnBeforeUpload(file) {
|
||||
if (!!this.field.options.onBeforeUpload) {
|
||||
let bfFunc = new Function('file', this.field.options.onBeforeUpload)
|
||||
let result = bfFunc.call(this, file)
|
||||
if (typeof result === 'boolean') {
|
||||
return result
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
|
||||
handleFileUpload(res, file, fileList) {
|
||||
if (!!this.field.options.onUploadSuccess) {
|
||||
let mountFunc = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
|
||||
mountFunc.call(this, res, file, fileList)
|
||||
} else {
|
||||
if (file.status === 'success') {
|
||||
//this.fileList.push(file) /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
|
||||
this.updateUploadFieldModelAndEmitDataChange(fileList)
|
||||
this.fileList = deepClone(fileList)
|
||||
|
||||
this.uploadBtnHidden = fileList.length >= this.field.options.limit
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
handleFileRemove(file, fileList) {
|
||||
this.fileList = deepClone(fileList) //this.fileList = fileList
|
||||
this.updateUploadFieldModelAndEmitDataChange(fileList)
|
||||
|
||||
this.uploadBtnHidden = fileList.length >= this.field.options.limit
|
||||
},
|
||||
|
||||
removeUploadFile(fileName) {
|
||||
let foundIdx = -1
|
||||
this.fileList.forEach((file,idx) => {
|
||||
if (file.name === fileName) {
|
||||
foundIdx = idx
|
||||
}
|
||||
})
|
||||
|
||||
if (foundIdx >= 0) {
|
||||
this.fileList.splice(foundIdx, 1)
|
||||
this.updateUploadFieldModelAndEmitDataChange(this.fileList)
|
||||
|
||||
this.uploadBtnHidden = this.fileList.length >= this.field.options.limit
|
||||
}
|
||||
},
|
||||
|
||||
handelUploadError(err, file, fileList) {
|
||||
if (!!this.field.options.onUploadError) {
|
||||
let customFn = new Function('error', 'file', 'fileList', this.field.options.onUploadError)
|
||||
customFn.call(this, err, file, fileList)
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.i18nt('render.hint.uploadError') + err,
|
||||
duration: 3000,
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
.full-width-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.dynamicPseudoAfter :deep(.el-upload.el-upload--text) {
|
||||
color: $--color-primary;
|
||||
font-size: 12px;
|
||||
.el-icon-plus:after {
|
||||
content: var(--select-file-action);
|
||||
}
|
||||
}
|
||||
|
||||
.hideUploadDiv {
|
||||
:deep(div.el-upload--picture-card) { /* 隐藏最后的图片上传按钮 */
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(div.el-upload--text) { /* 隐藏最后的文件上传按钮 */
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(div.el-upload__tip) { /* 隐藏最后的文件上传按钮 */
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-file-list {
|
||||
font-size: 12px;
|
||||
|
||||
.file-action {
|
||||
color: $--color-primary;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,333 @@
|
||||
<!--
|
||||
/**
|
||||
* author: vformAdmin
|
||||
* email: vdpadmin@163.com
|
||||
* website: https://www.vform666.com
|
||||
* date: 2021.08.18
|
||||
* remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
|
||||
*/
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.designer}">
|
||||
<el-form-item v-if="!!field.formItemFlag" :label="label" :label-width="labelWidth + 'px'"
|
||||
:title="field.options.labelTooltip"
|
||||
v-show="!field.options.hidden || (designState === true)"
|
||||
:rules="rules" :prop="getPropName()"
|
||||
:class="[selected ? 'selected' : '', labelAlign, customClass, field.options.required ? 'required' : '']"
|
||||
@click.stop="selectField(field)">
|
||||
|
||||
<template #label>
|
||||
<span v-if="!!field.options.labelIconClass" class="custom-label">
|
||||
<template v-if="field.options.labelIconPosition === 'front'">
|
||||
<template v-if="!!field.options.labelTooltip">
|
||||
<el-tooltip :content="field.options.labelTooltip" effect="light">
|
||||
<i :class="field.options.labelIconClass"></i></el-tooltip>{{label}}</template>
|
||||
<template v-else>
|
||||
<i :class="field.options.labelIconClass"></i>{{label}}</template>
|
||||
</template>
|
||||
<template v-else-if="field.options.labelIconPosition === 'rear'">
|
||||
<template v-if="!!field.options.labelTooltip">
|
||||
{{label}}<el-tooltip :content="field.options.labelTooltip" effect="light">
|
||||
<i :class="field.options.labelIconClass"></i></el-tooltip></template>
|
||||
<template v-else>
|
||||
{{label}}<i :class="field.options.labelIconClass"></i></template>
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
<slot></slot>
|
||||
</el-form-item>
|
||||
|
||||
<template v-if="!!this.designer">
|
||||
<div class="field-action" v-if="designer.selectedId === field.id">
|
||||
<i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')" @click.stop="selectParentWidget(field)"></i>
|
||||
<i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
|
||||
@click.stop="moveUpWidget(field)"></i>
|
||||
<i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
|
||||
@click.stop="moveDownWidget(field)"></i>
|
||||
<i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeFieldWidget"></i>
|
||||
</div>
|
||||
|
||||
<div class="drag-handler background-opacity" v-if="designer.selectedId === field.id">
|
||||
<i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
|
||||
<i>{{i18n2t(`designer.widgetLabel.${field.type}`, `extension.widgetLabel.${field.type}`)}}</i>
|
||||
<i v-if="field.options.hidden === true" class="iconfont icon-hide"></i>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n";
|
||||
|
||||
export default {
|
||||
name: "form-item-wrapper",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
field: Object,
|
||||
designer: Object,
|
||||
parentWidget: Object,
|
||||
parentList: Array,
|
||||
indexOfParentList: Number,
|
||||
|
||||
designState: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
rules: Array,
|
||||
},
|
||||
inject: ['formConfig'],
|
||||
computed: {
|
||||
selected() {
|
||||
return !!this.designer && this.field.id === this.designer.selectedId
|
||||
},
|
||||
|
||||
label() {
|
||||
if (!!this.field.options.labelHidden) {
|
||||
return ''
|
||||
}
|
||||
|
||||
return this.field.options.label
|
||||
},
|
||||
|
||||
labelWidth() {
|
||||
if (!!this.field.options.labelHidden) {
|
||||
return 0
|
||||
}
|
||||
|
||||
if (!!this.field.options.labelWidth) {
|
||||
return this.field.options.labelWidth
|
||||
}
|
||||
|
||||
if (!!this.designer) {
|
||||
return this.designer.formConfig.labelWidth
|
||||
} else {
|
||||
return this.formConfig.labelWidth
|
||||
}
|
||||
},
|
||||
|
||||
labelAlign() {
|
||||
if (!!this.field.options.labelAlign) {
|
||||
return this.field.options.labelAlign
|
||||
}
|
||||
|
||||
if (!!this.designer) {
|
||||
return this.designer.formConfig.labelAlign || 'label-left-align'
|
||||
} else {
|
||||
return this.formConfig.labelAlign || 'label-left-align'
|
||||
}
|
||||
},
|
||||
|
||||
customClass() {
|
||||
return !!this.field.options.customClass ? this.field.options.customClass.join(' ') : ''
|
||||
},
|
||||
|
||||
subFormName() {
|
||||
return !!this.parentWidget ? this.parentWidget.options.name : ''
|
||||
},
|
||||
|
||||
subFormItemFlag() {
|
||||
return !!this.parentWidget ? this.parentWidget.type === 'sub-form' : false
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
//
|
||||
},
|
||||
methods: {
|
||||
|
||||
selectField(field) {
|
||||
if (!!this.designer) {
|
||||
this.designer.setSelected(field)
|
||||
this.designer.emitEvent('field-selected', this.parentWidget) //发送选中组件的父组件对象
|
||||
}
|
||||
},
|
||||
|
||||
selectParentWidget() {
|
||||
if (this.parentWidget) {
|
||||
this.designer.setSelected(this.parentWidget)
|
||||
} else {
|
||||
this.designer.clearSelected()
|
||||
}
|
||||
},
|
||||
|
||||
moveUpWidget() {
|
||||
this.designer.moveUpWidget(this.parentList, this.indexOfParentList)
|
||||
this.designer.emitHistoryChange()
|
||||
},
|
||||
|
||||
moveDownWidget() {
|
||||
this.designer.moveDownWidget(this.parentList, this.indexOfParentList)
|
||||
this.designer.emitHistoryChange()
|
||||
},
|
||||
|
||||
removeFieldWidget() {
|
||||
if (!!this.parentList) {
|
||||
let nextSelected = null
|
||||
if (this.parentList.length === 1) {
|
||||
if (!!this.parentWidget) {
|
||||
nextSelected = this.parentWidget
|
||||
}
|
||||
} else if (this.parentList.length === (1 + this.indexOfParentList)) {
|
||||
nextSelected = this.parentList[this.indexOfParentList - 1]
|
||||
} else {
|
||||
nextSelected = this.parentList[this.indexOfParentList + 1]
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.parentList.splice(this.indexOfParentList, 1)
|
||||
//if (!!nextSelected) {
|
||||
this.designer.setSelected(nextSelected)
|
||||
//}
|
||||
|
||||
this.designer.emitHistoryChange()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
getPropName() {
|
||||
if (this.subFormItemFlag && !this.designState) {
|
||||
return this.subFormName + "." + this.subFormRowIndex + "." + this.field.options.name + ""
|
||||
} else {
|
||||
return this.field.options.name
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss";
|
||||
|
||||
.design-time-bottom-margin {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.field-wrapper {
|
||||
position: relative;
|
||||
|
||||
.field-action{
|
||||
position: absolute;
|
||||
//bottom: -24px;
|
||||
bottom: 0;
|
||||
right: -2px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
background: $--color-primary;
|
||||
z-index: 9;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-handler {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
//bottom: -22px; /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
|
||||
left: -1px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
//background: $--color-primary;
|
||||
z-index: 9;
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
color: #fff;
|
||||
margin: 4px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
//opacity: 1;
|
||||
background: $--color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
//margin-bottom: 0 !important;
|
||||
//margin-bottom: 6px;
|
||||
|
||||
//margin-top: 2px;
|
||||
position: relative;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__content) {
|
||||
//position: unset; /* TODO: 忘了这个样式设置是为了解决什么问题？？ */
|
||||
}
|
||||
|
||||
span.custom-label i {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
/* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
|
||||
:deep(.hide-spin-button) input::-webkit-outer-spin-button,
|
||||
:deep(.hide-spin-button) input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none !important;
|
||||
}
|
||||
|
||||
/* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
|
||||
:deep(.hide-spin-button) input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
}
|
||||
|
||||
.required :deep(.el-form-item__label)::before {
|
||||
content: '*';
|
||||
color: #F56C6C;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.static-content-item {
|
||||
min-height: 20px;
|
||||
display: flex; /* 垂直居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
|
||||
:deep(.el-divider--horizontal) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item.selected, .static-content-item.selected {
|
||||
outline: 2px solid $--color-primary;
|
||||
}
|
||||
|
||||
:deep(.label-left-align) .el-form-item__label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:deep(.label-center-align) .el-form-item__label {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.label-right-align) .el-form-item__label {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,82 @@
|
||||
<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 ref="fieldEditor" v-html="field.options.htmlContent"></div>
|
||||
</static-content-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StaticContentWrapper from './static-content-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "html-text-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()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; //* static-content-wrapper已引入，还需要重复引入吗？ *//
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
let comps = {}
|
||||
|
||||
const modules = import.meta.globEager('./*.vue')
|
||||
for (const path in modules) {
|
||||
let cname = modules[path].default.name
|
||||
comps[cname] = modules[path].default
|
||||
}
|
||||
|
||||
export default comps
|
||||
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<el-input ref="fieldEditor" v-model="fieldModel"
|
||||
:disabled="field.options.disabled" :readonly="field.options.readonly"
|
||||
:size="field.options.size" class="hide-spin-button"
|
||||
:type="inputType"
|
||||
:show-password="field.options.showPassword"
|
||||
:placeholder="field.options.placeholder"
|
||||
:clearable="field.options.clearable"
|
||||
:minlength="field.options.minLength" :maxlength="field.options.maxLength"
|
||||
:show-word-limit="field.options.showWordLimit"
|
||||
:prefix-icon="field.options.prefixIcon" :suffix-icon="field.options.suffixIcon"
|
||||
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent" @input="handleInputCustomEvent"
|
||||
@change="handleChangeEvent">
|
||||
<template #append>
|
||||
<el-button v-if="field.options.appendButton" :disabled="field.options.disabled || field.options.appendButtonDisabled"
|
||||
:class="field.options.buttonIcon" @click="emitAppendButtonClick"></el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "input-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inputType() {
|
||||
if (this.field.options.type === 'number') {
|
||||
return 'text' //当input的type设置为number时，如果输入非数字字符，则v-model拿到的值为空字符串，无法实现输入校验！故屏蔽之！！
|
||||
}
|
||||
|
||||
return this.field.options.type
|
||||
},
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<el-input-number ref="fieldEditor" v-model="fieldModel" class="full-width-input"
|
||||
:disabled="field.options.disabled"
|
||||
:size="field.options.size" :controls-position="field.options.controlsPosition"
|
||||
:placeholder="field.options.placeholder"
|
||||
:min="field.options.min" :max="field.options.max"
|
||||
:precision="field.options.precision" :step="field.options.step"
|
||||
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
|
||||
@change="handleChangeEvent">
|
||||
</el-input-number>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "number-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
.full-width-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<!-- el-upload增加:name="field.options.name"后，会导致又拍云上传失败！故删除之！！ -->
|
||||
<el-upload ref="fieldEditor" :disabled="field.options.disabled"
|
||||
:action="field.options.uploadURL" :headers="uploadHeaders" :data="uploadData"
|
||||
:with-credentials="field.options.withCredentials"
|
||||
:multiple="field.options.multipleSelect" :file-list="fileList" :show-file-list="field.options.showFileList"
|
||||
list-type="picture-card" :class="{'hideUploadDiv': uploadBtnHidden}"
|
||||
:limit="field.options.limit" :on-exceed="handlePictureExceed"
|
||||
:before-upload="beforePictureUpload"
|
||||
:on-success="handlePictureUpload" :on-error="handelUploadError" :on-remove="handlePictureRemove">
|
||||
<template #tip>
|
||||
<div class="el-upload__tip"
|
||||
v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
|
||||
</template>
|
||||
<i class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import {deepClone} from "@/utils/util";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "picture-upload-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
|
||||
uploadHeaders: {},
|
||||
uploadData: {
|
||||
key: '', //七牛云上传文件名
|
||||
//token: '', //七牛云上传token
|
||||
|
||||
//policy: '', //又拍云上传policy
|
||||
//authorization: '', //又拍云上传签名
|
||||
},
|
||||
fileList: [], //上传文件列表
|
||||
uploadBtnHidden: false,
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePictureExceed() {
|
||||
let uploadLimit = this.field.options.limit /* 此行不能注释，下一行ES6模板字符串需要用到！！ */
|
||||
this.$message.warning(eval('`' + this.i18nt('render.hint.uploadExceed') + '`'));
|
||||
},
|
||||
|
||||
updateUploadFieldModelAndEmitDataChange(fileList) {
|
||||
let oldValue = deepClone(this.fieldModel)
|
||||
this.fieldModel = deepClone(fileList)
|
||||
this.syncUpdateFormModel(this.fieldModel)
|
||||
this.emitFieldDataChange(this.fieldModel, oldValue)
|
||||
},
|
||||
|
||||
beforePictureUpload(file) {
|
||||
let fileTypeCheckResult = false
|
||||
if (!!this.field.options && !!this.field.options.fileTypes) {
|
||||
let uploadFileTypes = this.field.options.fileTypes
|
||||
if (uploadFileTypes.length > 0) {
|
||||
fileTypeCheckResult = uploadFileTypes.some( (ft) => {
|
||||
return file.type === 'image/' + ft
|
||||
})
|
||||
}
|
||||
}
|
||||
if (!fileTypeCheckResult) {
|
||||
this.$message.error(this.i18nt('render.hint.unsupportedFileType') + file.type)
|
||||
return false;
|
||||
}
|
||||
|
||||
let fileSizeCheckResult = false
|
||||
let uploadFileMaxSize = 5 //5MB
|
||||
if (!!this.field.options && !!this.field.options.fileMaxSize) {
|
||||
uploadFileMaxSize = this.field.options.fileMaxSize
|
||||
}
|
||||
fileSizeCheckResult = file.size / 1024 / 1024 <= uploadFileMaxSize
|
||||
if (!fileSizeCheckResult) {
|
||||
this.$message.error(this.$('render.hint.fileSizeExceed') + uploadFileMaxSize + 'MB')
|
||||
return false;
|
||||
}
|
||||
|
||||
this.uploadData.key = file.name
|
||||
return this.handleOnBeforeUpload(file)
|
||||
},
|
||||
|
||||
handleOnBeforeUpload(file) {
|
||||
if (!!this.field.options.onBeforeUpload) {
|
||||
let bfFunc = new Function('file', this.field.options.onBeforeUpload)
|
||||
let result = bfFunc.call(this, file)
|
||||
if (typeof result === 'boolean') {
|
||||
return result
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
|
||||
handlePictureUpload(res, file, fileList) {
|
||||
if (!!this.field.options.onUploadSuccess) {
|
||||
let customFn = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
|
||||
customFn.call(this, res, file, fileList)
|
||||
} else {
|
||||
if (file.status === 'success') {
|
||||
//this.fileList.push(file) /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
|
||||
this.updateUploadFieldModelAndEmitDataChange(fileList)
|
||||
|
||||
this.uploadBtnHidden = fileList.length >= this.field.options.limit
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
handlePictureRemove(file, fileList) {
|
||||
this.fileList = deepClone(fileList) //this.fileList = fileList
|
||||
this.updateUploadFieldModelAndEmitDataChange(fileList)
|
||||
|
||||
this.uploadBtnHidden = fileList.length >= this.field.options.limit
|
||||
},
|
||||
|
||||
handelUploadError(err, file, fileList) {
|
||||
if (!!this.field.options.onUploadError) {
|
||||
let customFn = new Function('error', 'file', 'fileList', this.field.options.onUploadError)
|
||||
customFn.call(this, err, file, fileList)
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.i18nt('render.hint.uploadError') + err,
|
||||
duration: 3000,
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
.full-width-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.hideUploadDiv {
|
||||
:deep(div.el-upload--picture-card) { /* 隐藏最后的图片上传按钮 */
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(div.el-upload--text) { /* 隐藏最后的文件上传按钮 */
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(div.el-upload__tip) { /* 隐藏最后的文件上传按钮提示 */
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<el-radio-group ref="fieldEditor" v-model="fieldModel"
|
||||
:disabled="field.options.disabled" :size="field.options.size"
|
||||
@change="handleChangeEvent">
|
||||
<template v-if="!!field.options.buttonStyle">
|
||||
<el-radio-button v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value"
|
||||
:disabled="item.disabled" :border="field.options.border"
|
||||
:style="{display: field.options.displayStyle}">{{item.label}}</el-radio-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-radio v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value"
|
||||
:disabled="item.disabled" :border="field.options.border"
|
||||
:style="{display: field.options.displayStyle}">{{item.label}}</el-radio>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "radio-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initOptionItems()
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<el-rate ref="fieldEditor" v-model="fieldModel"
|
||||
:disabled="field.options.disabled"
|
||||
:max="field.options.max"
|
||||
:low-threshold="field.options.lowThreshold" :high-threshold="field.options.highThreshold"
|
||||
:allow-half="field.options.allowHalf"
|
||||
:show-text="field.options.showText" :show-score="field.options.showScore"
|
||||
@change="handleChangeEvent">
|
||||
</el-rate>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "rate-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
.full-width-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<!--
|
||||
<vue-editor ref="fieldEditor" v-model="fieldModel" :editor-toolbar="customToolbar"
|
||||
:disabled="field.options.disabled" :placeholder="field.options.placeholder"
|
||||
@text-change="handleRichEditorChangeEvent"
|
||||
@focus="handleRichEditorFocusEvent" @blur="handleRichEditorBlurEvent">
|
||||
</vue-editor>
|
||||
-->
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import {deepClone} from "@/utils/util";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "rich-editor-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: {
|
||||
FormItemWrapper,
|
||||
|
||||
// VueEditor: resolve => { //懒加载！！
|
||||
// require(['vue2-editor'], ({VueEditor}) => resolve(VueEditor))
|
||||
// }
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
|
||||
customToolbar: [], //富文本编辑器自定义工具栏
|
||||
valueChangedFlag: false, //vue2-editor数据值是否改变标志
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleRichEditorChangeEvent() {
|
||||
this.valueChangedFlag = true
|
||||
this.syncUpdateFormModel(this.fieldModel)
|
||||
},
|
||||
|
||||
handleRichEditorFocusEvent() {
|
||||
this.oldFieldValue = deepClone(this.fieldModel)
|
||||
},
|
||||
|
||||
handleRichEditorBlurEvent() {
|
||||
if (this.valueChangedFlag) {
|
||||
this.emitFieldDataChange(this.fieldModel, this.oldFieldValue)
|
||||
this.valueChangedFlag = false
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
.full-width-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<el-select ref="fieldEditor" v-model="fieldModel" class="full-width-input"
|
||||
:disabled="field.options.disabled"
|
||||
:size="field.options.size"
|
||||
:clearable="field.options.clearable"
|
||||
:filterable="field.options.filterable"
|
||||
:allow-create="field.options.allowCreate"
|
||||
:default-first-option="allowDefaultFirstOption"
|
||||
:automatic-dropdown="field.options.automaticDropdown"
|
||||
:multiple="field.options.multiple" :multiple-limit="field.options.multipleLimit"
|
||||
:placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
|
||||
:remote="this.field.options.remote" :remote-method="remoteQuery"
|
||||
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
|
||||
@change="handleChangeEvent">
|
||||
<el-option v-for="item in field.options.optionItems" :key="item.value" :label="item.label"
|
||||
:value="item.value" :disabled="item.disabled">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "select-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
allowDefaultFirstOption() {
|
||||
return (!!this.field.options.filterable && !!this.field.options.allowCreate)
|
||||
},
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initOptionItems()
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
.full-width-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<el-slider ref="fieldEditor" v-model="fieldModel"
|
||||
:disabled="field.options.disabled" :show-stops="field.options.showStops"
|
||||
:min="field.options.min" :max="field.options.max" :step="field.options.step"
|
||||
:range="field.options.range" :vertical="field.options.vertical"
|
||||
@change="handleChangeEvent">
|
||||
</el-slider>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "slider-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
.full-width-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -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 '@/utils/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()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
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>
|
||||
@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.designer}">
|
||||
<div class="static-content-item" v-show="!field.options.hidden || (designState === true)"
|
||||
:class="[selected ? 'selected' : '', customClass]" @click.stop="selectField(field)">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<template v-if="!!this.designer">
|
||||
<div class="field-action" v-if="designer.selectedId === field.id">
|
||||
<i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')" @click.stop="selectParentWidget(field)"></i>
|
||||
<i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
|
||||
@click.stop="moveUpWidget(field)"></i>
|
||||
<i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
|
||||
@click.stop="moveDownWidget(field)"></i>
|
||||
<i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeFieldWidget"></i>
|
||||
</div>
|
||||
|
||||
<div class="drag-handler background-opacity" v-if="designer.selectedId === field.id">
|
||||
<i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
|
||||
<i>{{i18n2t(`designer.widgetLabel.${field.type}`, `extension.widgetLabel.${field.type}`)}}</i>
|
||||
<i v-if="field.options.hidden === true" class="iconfont icon-hide"></i>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n";
|
||||
|
||||
export default {
|
||||
name: "static-content-wrapper",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
field: Object,
|
||||
designer: Object,
|
||||
parentWidget: Object,
|
||||
parentList: Array,
|
||||
indexOfParentList: Number,
|
||||
|
||||
designState: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
selected() {
|
||||
return !!this.designer && this.field.id === this.designer.selectedId
|
||||
},
|
||||
|
||||
customClass() {
|
||||
return !!this.field.options.customClass ? this.field.options.customClass.join(' ') : ''
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
selectField(field) {
|
||||
if (!!this.designer) {
|
||||
this.designer.setSelected(field)
|
||||
this.designer.emitEvent('field-selected', this.parentWidget) //发送选中组件的父组件对象
|
||||
}
|
||||
},
|
||||
|
||||
selectParentWidget() {
|
||||
if (this.parentWidget) {
|
||||
this.designer.setSelected(this.parentWidget)
|
||||
} else {
|
||||
this.designer.clearSelected()
|
||||
}
|
||||
},
|
||||
|
||||
moveUpWidget() {
|
||||
this.designer.moveUpWidget(this.parentList, this.indexOfParentList)
|
||||
this.designer.emitHistoryChange()
|
||||
},
|
||||
|
||||
moveDownWidget() {
|
||||
this.designer.moveDownWidget(this.parentList, this.indexOfParentList)
|
||||
this.designer.emitHistoryChange()
|
||||
},
|
||||
|
||||
removeFieldWidget() {
|
||||
if (!!this.parentList) {
|
||||
let nextSelected = null
|
||||
if (this.parentList.length === 1) {
|
||||
if (!!this.parentWidget) {
|
||||
nextSelected = this.parentWidget
|
||||
}
|
||||
} else if (this.parentList.length === (1 + this.indexOfParentList)) {
|
||||
nextSelected = this.parentList[this.indexOfParentList - 1]
|
||||
} else {
|
||||
nextSelected = this.parentList[this.indexOfParentList + 1]
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.parentList.splice(this.indexOfParentList, 1)
|
||||
//if (!!nextSelected) {
|
||||
this.designer.setSelected(nextSelected)
|
||||
//}
|
||||
|
||||
this.designer.emitHistoryChange()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss";
|
||||
|
||||
.design-time-bottom-margin {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.field-wrapper {
|
||||
position: relative;
|
||||
|
||||
.field-action{
|
||||
position: absolute;
|
||||
//bottom: -24px;
|
||||
bottom: 0;
|
||||
right: -2px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
background: $--color-primary;
|
||||
z-index: 9;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-handler {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
//bottom: -22px; /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
|
||||
left: -1px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
//background: $--color-primary;
|
||||
z-index: 9;
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
color: #fff;
|
||||
margin: 4px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
//opacity: 1;
|
||||
background: $--color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.static-content-item {
|
||||
min-height: 20px;
|
||||
display: flex; /* 垂直居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
|
||||
:deep(.el-divider--horizontal) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item.selected, .static-content-item.selected {
|
||||
outline: 2px solid $--color-primary;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,82 @@
|
||||
<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 ref="fieldEditor">{{field.options.textContent}}</div>
|
||||
</static-content-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StaticContentWrapper from './static-content-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "static-text-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()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; //* static-content-wrapper已引入，还需要重复引入吗？ *//
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<el-switch ref="fieldEditor" v-model="fieldModel"
|
||||
:disabled="field.options.disabled"
|
||||
:active-text="field.options.activeText" :inactive-text="field.options.inactiveText"
|
||||
:active-color="field.options.activeColor" :inactive-color="field.options.inactiveColor"
|
||||
:width="field.options.switchWidth"
|
||||
@change="handleChangeEvent">
|
||||
</el-switch>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "switch-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
.full-width-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<el-input type="textarea" ref="fieldEditor" v-model="fieldModel"
|
||||
:disabled="field.options.disabled" :readonly="field.options.readonly"
|
||||
:size="field.options.size"
|
||||
:placeholder="field.options.placeholder" :rows="field.options.rows"
|
||||
:minlength="field.options.minLength" :maxlength="field.options.maxLength"
|
||||
:show-word-limit="field.options.showWordLimit"
|
||||
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent" @input="handleInputCustomEvent"
|
||||
@change="handleChangeEvent">
|
||||
</el-input>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "textarea-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<el-time-picker ref="fieldEditor" is-range v-model="fieldModel" class="full-width-input"
|
||||
:disabled="field.options.disabled" :readonly="field.options.readonly"
|
||||
:size="field.options.size"
|
||||
:clearable="field.options.clearable" :editable="field.options.editable"
|
||||
:format="field.options.format" value-format="HH:mm:ss"
|
||||
:start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startTimePlaceholder')"
|
||||
:end-placeholder="field.options.endPlaceholder || i18nt('render.hint.endTimePlaceholder')"
|
||||
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
|
||||
@change="handleChangeEvent">
|
||||
</el-time-picker>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "time-range-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
.full-width-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :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">
|
||||
<el-time-picker ref="fieldEditor" v-model="fieldModel" class="full-width-input"
|
||||
:disabled="field.options.disabled" :readonly="field.options.readonly"
|
||||
:size="field.options.size"
|
||||
:clearable="field.options.clearable" :editable="field.options.editable"
|
||||
:format="field.options.format" value-format="HH:mm:ss"
|
||||
:placeholder="field.options.placeholder || i18nt('render.hint.timePlaceholder')"
|
||||
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
|
||||
@change="handleChangeEvent">
|
||||
</el-time-picker>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormItemWrapper from './form-item-wrapper'
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n, {translate} from "@/utils/i18n";
|
||||
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
|
||||
|
||||
export default {
|
||||
name: "time-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: {
|
||||
FormItemWrapper,
|
||||
},
|
||||
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
oldFieldValue: null, //field组件change之前的值
|
||||
fieldModel: null,
|
||||
rules: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeCreate() {
|
||||
/* 这里不能访问方法和属性！！ */
|
||||
},
|
||||
|
||||
created() {
|
||||
/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
|
||||
需要在父组件created中初始化！！ */
|
||||
this.initFieldModel()
|
||||
this.registerToRefList()
|
||||
this.initEventHandler()
|
||||
this.buildFieldRules()
|
||||
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.handleOnMounted()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
|
||||
|
||||
.full-width-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user