mirror of
https://github.com/vform666/variant-form3-vite.git
synced 2025-03-13 14:14:35 +08:00
105 lines
3.2 KiB
Vue
105 lines
3.2 KiB
Vue
<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="[!!field.options.autoFullWidth ? 'auto-full-width' : '']"
|
||
: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>
|