|
|
@@ -0,0 +1,176 @@
|
|
|
+<template>
|
|
|
+ <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
|
|
|
+ <div class="d-flex">
|
|
|
+ <VueDatePicker
|
|
|
+ v-model="value"
|
|
|
+ ref="datepicker"
|
|
|
+ :options="item.options || {}"
|
|
|
+ locale="zh-CN"
|
|
|
+ :disabled="soFar || item.disabled || false"
|
|
|
+ :range="item.range || false"
|
|
|
+ :model-type="timestamp"
|
|
|
+ :month-picker="month"
|
|
|
+ :time-picker="time"
|
|
|
+ :year-picker="year"
|
|
|
+ auto-apply
|
|
|
+ text-input
|
|
|
+ :show-now-button="item.showToday"
|
|
|
+ now-button-label="今天"
|
|
|
+ :enable-time-picker="item.enableTimePicker ?? false"
|
|
|
+ :clearable="item.clearable ?? true"
|
|
|
+ :day-names="['一', '二', '三', '四', '五', '六', '七']"
|
|
|
+ v-bind="$attrs"
|
|
|
+ :class="{'detailMargin': detailMargin}"
|
|
|
+ style="flex: 1"
|
|
|
+ @open="handleOpen"
|
|
|
+ @closed="handleClosed"
|
|
|
+ @update:modelValue="modelValueUpDate"
|
|
|
+ >
|
|
|
+ <template #trigger>
|
|
|
+ <v-text-field
|
|
|
+ v-model="formatText"
|
|
|
+ variant="outlined"
|
|
|
+ :density="item.dense || 'compact'"
|
|
|
+ type="text"
|
|
|
+ :rules="soFar ? [] : rules"
|
|
|
+ :disabled="soFar || item.disabled"
|
|
|
+ :style="{width: item.width}"
|
|
|
+ :color="item.color || 'primary'"
|
|
|
+ :label="item.label"
|
|
|
+ :placeholder="item.placeholder || item.label"
|
|
|
+ :autofocus="item.autofocus"
|
|
|
+ :required="item.required"
|
|
|
+ :suffix="item.suffix"
|
|
|
+ :append-icon="item.appendIcon"
|
|
|
+ :append-inner-icon="item.appendInnerIcon"
|
|
|
+ :clearable="item.clearable"
|
|
|
+ :readonly="true"
|
|
|
+ :counter="item.counter"
|
|
|
+ :prepend-inner-icon="item.prependInnerIcon"
|
|
|
+ hide-spin-buttons
|
|
|
+ :class="item.class"
|
|
|
+ :hide-details="hideDetails || false"
|
|
|
+ @click:clear="handleClear"
|
|
|
+ @click="inputClick"
|
|
|
+ @blur="inputBlur"
|
|
|
+ ></v-text-field>
|
|
|
+ </template>
|
|
|
+ </VueDatePicker>
|
|
|
+ <div>
|
|
|
+ <v-checkbox-btn
|
|
|
+ v-if="item.showSoFar"
|
|
|
+ v-model="soFar"
|
|
|
+ color="primary"
|
|
|
+ :label="$t('sys.soFar')"
|
|
|
+ class="ml-2"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ :style="`line-height: ${item.dense === 'default' ? 56 : item.dense === 'comfortable' ? 48 : 40 }px;`"
|
|
|
+ hide-details
|
|
|
+ @update:modelValue="handleCheckboxChange"
|
|
|
+ ></v-checkbox-btn>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { timesTampChange } from '@/utils/date'
|
|
|
+import { computed, ref } from 'vue'
|
|
|
+defineOptions({ name:'FormUI-v-text-field'})
|
|
|
+
|
|
|
+const props = defineProps({item: Object, modelValue: [String, Number, Boolean], changeFn: Function})
|
|
|
+const emit = defineEmits(['update:modelValue', 'change'])
|
|
|
+const item = props.item
|
|
|
+
|
|
|
+const value = ref(props.modelValue === true ? null : props.modelValue)
|
|
|
+const soFar = ref(false)
|
|
|
+
|
|
|
+// watch(
|
|
|
+// () => props.modelValue,
|
|
|
+// (newVal) => {
|
|
|
+// if (newVal === true) {
|
|
|
+// value.value = ''
|
|
|
+// soFar.value = !newVal
|
|
|
+// }
|
|
|
+// },
|
|
|
+// { immediate: true },
|
|
|
+// { deep: true }
|
|
|
+// )
|
|
|
+
|
|
|
+const timestamp = 'timestamp' // 固定不能变
|
|
|
+const formatText = ref('')
|
|
|
+
|
|
|
+const modelValueUpDate = (val) => {
|
|
|
+ value.value = val
|
|
|
+ getFormatText()
|
|
|
+ emit('update:modelValue', value.value)
|
|
|
+ emit('change', value.value)
|
|
|
+}
|
|
|
+
|
|
|
+const getFormatText = () => {
|
|
|
+ const format = item.format || 'Y-M-D'
|
|
|
+ formatText.value = timesTampChange(value.value, format)
|
|
|
+}
|
|
|
+
|
|
|
+const handleClear = () => {
|
|
|
+ value.value = null
|
|
|
+ emit('change', value.value)
|
|
|
+}
|
|
|
+
|
|
|
+const rules = ref(item.rules)
|
|
|
+const handleOpen = () => {
|
|
|
+ rules.value = []
|
|
|
+}
|
|
|
+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
|
|
|
+}
|
|
|
+
|
|
|
+// dateType: 默认 date, 即年月日
|
|
|
+const year = computed(() => {
|
|
|
+ return item.dateType === 'year'
|
|
|
+})
|
|
|
+const month = computed(() => {
|
|
|
+ return item.dateType === 'month'
|
|
|
+})
|
|
|
+const time = computed(() => {
|
|
|
+ return item.dateType === 'time'
|
|
|
+})
|
|
|
+
|
|
|
+if (!item.format) item.format = year.value ? 'Y' : month.value ? 'Y-M' : time.value ? 'Y-M-D h:m:s' : 'Y-M-D'
|
|
|
+if (item.value) value.value = item.value; getFormatText()
|
|
|
+
|
|
|
+
|
|
|
+// 《至今》复选框事件
|
|
|
+const handleCheckboxChange = (val) => {
|
|
|
+ rules.value = val ? [] : item.rules
|
|
|
+ if (val) {
|
|
|
+ modelValueUpDate(null)
|
|
|
+ } else {
|
|
|
+ modelValueUpDate(null)
|
|
|
+ }
|
|
|
+}
|
|
|
+// if (soFar.value) handleCheckboxChange(soFar.value)
|
|
|
+
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+// .removeDetailHeight {}
|
|
|
+:deep(.dp--menu-wrapper) {
|
|
|
+ // top: 50px !important;
|
|
|
+ left: 0 !important;
|
|
|
+}
|
|
|
+.detailMargin {
|
|
|
+ margin-bottom: 22px;
|
|
|
+}
|
|
|
+</style>
|
