|
@@ -1,7 +1,7 @@
|
|
<template>
|
|
<template>
|
|
<div :style="{ width: item.width ? item.width + 'px' : '100%' }">
|
|
<div :style="{ width: item.width ? item.width + 'px' : '100%' }">
|
|
- <div class="d-flex">
|
|
|
|
- <VueDatePicker
|
|
|
|
|
|
+ <div class="d-flex align-center">
|
|
|
|
+ <!-- <VueDatePicker
|
|
v-model="value"
|
|
v-model="value"
|
|
ref="datepicker"
|
|
ref="datepicker"
|
|
:options="item.options || {}"
|
|
:options="item.options || {}"
|
|
@@ -59,16 +59,43 @@
|
|
@blur="inputBlur"
|
|
@blur="inputBlur"
|
|
></v-text-field>
|
|
></v-text-field>
|
|
</template>
|
|
</template>
|
|
- </VueDatePicker>
|
|
|
|
|
|
+ </VueDatePicker> -->
|
|
|
|
+
|
|
|
|
+ <div class="form-label" :style="{'width': item.labelWidth + 'px'}">{{ item.label }}</div>
|
|
|
|
+ <el-config-provider :locale="zhCn">
|
|
|
|
+ <el-date-picker
|
|
|
|
+ style="flex: 1;"
|
|
|
|
+ v-model="value"
|
|
|
|
+ size="large"
|
|
|
|
+ :type="item.mode || 'date'"
|
|
|
|
+ :placeholder="item.placeholder || '请选择'"
|
|
|
|
+ :start-placeholder="item.startPlaceholder || '开始日期'"
|
|
|
|
+ :end-placeholder="item.endPlaceholder || '结束日期'"
|
|
|
|
+ :format="item.format"
|
|
|
|
+ :value-format="item.valueFormat || 'x'"
|
|
|
|
+ :disabled="item.disabled"
|
|
|
|
+ :disabled-date="disabledDates"
|
|
|
|
+ :date-format="item.dateFormat"
|
|
|
|
+ :time-format="item.timeFormat"
|
|
|
|
+ :default-value="item.defaultValue"
|
|
|
|
+ @change="modelValueUpDate"
|
|
|
|
+ @clear="handleClear"
|
|
|
|
+ @blur="handleOpen"
|
|
|
|
+ >
|
|
|
|
+ </el-date-picker>
|
|
|
|
+ </el-config-provider>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
+
|
|
<script setup>
|
|
<script setup>
|
|
|
|
+defineOptions({ name:'FormUI-v-text-field'})
|
|
import { timesTampChange } from '@/utils/date'
|
|
import { timesTampChange } from '@/utils/date'
|
|
import { computed, ref, watch } from 'vue'
|
|
import { computed, ref, watch } from 'vue'
|
|
-defineOptions({ name:'FormUI-v-text-field'})
|
|
|
|
|
|
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
|
|
|
+// import { ElDatePicker } from 'element-plus'
|
|
|
|
|
|
-const props = defineProps({item: Object, modelValue: [String, Number, Boolean], changeFn: Function})
|
|
|
|
|
|
+const props = defineProps({item: Object, modelValue: [String, Number, Boolean, Array], changeFn: Function})
|
|
const emit = defineEmits(['update:modelValue', 'change'])
|
|
const emit = defineEmits(['update:modelValue', 'change'])
|
|
const item = props.item
|
|
const item = props.item
|
|
|
|
|
|
@@ -85,11 +112,12 @@ watch(() => props.modelValue,
|
|
// 过去的日期不可选
|
|
// 过去的日期不可选
|
|
const disabledDates = (date) => {
|
|
const disabledDates = (date) => {
|
|
const currentDate = new Date()
|
|
const currentDate = new Date()
|
|
|
|
+ if (!props.item.disabledDate) return false
|
|
currentDate.setDate(currentDate.getDate() - 1)
|
|
currentDate.setDate(currentDate.getDate() - 1)
|
|
return date.getTime() < currentDate.getTime()
|
|
return date.getTime() < currentDate.getTime()
|
|
}
|
|
}
|
|
|
|
|
|
-const timestamp = 'timestamp' // 固定不能变
|
|
|
|
|
|
+// const timestamp = 'timestamp' // 固定不能变
|
|
const formatText = ref('')
|
|
const formatText = ref('')
|
|
|
|
|
|
const modelValueUpDate = (val) => {
|
|
const modelValueUpDate = (val) => {
|
|
@@ -121,22 +149,22 @@ watch(() => item.rules,
|
|
const handleOpen = () => {
|
|
const handleOpen = () => {
|
|
rules.value = []
|
|
rules.value = []
|
|
}
|
|
}
|
|
-const handleClosed = () => {
|
|
|
|
- rules.value = item.rules
|
|
|
|
-}
|
|
|
|
|
|
+// const handleClosed = () => {
|
|
|
|
+// rules.value = item.rules
|
|
|
|
+// }
|
|
|
|
|
|
-const hideDetails = ref(item.hideDetails || false)
|
|
|
|
-const detailMargin = ref(false)
|
|
|
|
-const inputClick = () => {
|
|
|
|
- if (item.hideDetails) return
|
|
|
|
- hideDetails.value = true
|
|
|
|
- detailMargin.value = true
|
|
|
|
-}
|
|
|
|
-const inputBlur = () => {
|
|
|
|
- if (item.hideDetails) return
|
|
|
|
- hideDetails.value = item.hideDetails || false
|
|
|
|
- detailMargin.value = false
|
|
|
|
-}
|
|
|
|
|
|
+// const hideDetails = ref(item.hideDetails || false)
|
|
|
|
+// const detailMargin = ref(false)
|
|
|
|
+// const inputClick = () => {
|
|
|
|
+// if (item.hideDetails) return
|
|
|
|
+// hideDetails.value = true
|
|
|
|
+// detailMargin.value = true
|
|
|
|
+// }
|
|
|
|
+// const inputBlur = () => {
|
|
|
|
+// if (item.hideDetails) return
|
|
|
|
+// hideDetails.value = item.hideDetails || false
|
|
|
|
+// detailMargin.value = false
|
|
|
|
+// }
|
|
|
|
|
|
// dateType: 默认 date, 即年月日
|
|
// dateType: 默认 date, 即年月日
|
|
const year = computed(() => {
|
|
const year = computed(() => {
|
|
@@ -153,6 +181,7 @@ if (!item.format) item.format = year.value ? 'Y' : month.value ? 'Y-M' : time.va
|
|
if (item.value) value.value = item.value; getFormatText()
|
|
if (item.value) value.value = item.value; getFormatText()
|
|
|
|
|
|
</script>
|
|
</script>
|
|
|
|
+
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
// .removeDetailHeight {}
|
|
// .removeDetailHeight {}
|
|
:deep(.dp--menu-wrapper) {
|
|
:deep(.dp--menu-wrapper) {
|