mirror of
https://github.com/vform666/variant-form3-vite.git
synced 2026-10-04 17:16:25 +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>
|