多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

148 lines
3.7 KiB

<script setup lang="ts">
import dayjs from 'dayjs'
import { computed, ref } from '#imports'
import useProject from '~/composables/useProject'
interface Props {
modelValue?: string
}
const { modelValue } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
const { isMysql } = useProject()
const showMessage = ref(false)
const localState = computed({
get() {
if (!modelValue) {
return modelValue
}
const d = /^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue)
if (d.isValid()) {
showMessage.value = false
return d.format('YYYY-MM-DD HH:mm')
} else {
showMessage.value = true
}
},
set(value?: string) {
if (isMysql) {
emit('update:modelValue', value && dayjs(value).format('YYYY-MM-DD HH:mm:ss'))
} else {
emit('update:modelValue', value && dayjs(value).format('YYYY-MM-DD HH:mm:ssZ'))
}
},
})
/* import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
dayjs.extend(utc)
export default {
name: 'DateTimePickerCell',
props: {
value: [String, Date, Number],
ignoreFocus: Boolean,
},
data: () => ({
showMessage: false,
}),
computed: {
isMysql() {
return ['mysql', 'mysql2'].indexOf(this.$store.getters['project/GtrClientType'])
},
localState: {
get() {
if (!this.value) {
return this.value
}
const d = /^\d+$/.test(this.value) ? dayjs(+this.value) : dayjs(this.value)
if (d.isValid()) {
this.showMessage = false
return d.format('YYYY-MM-DD HH:mm')
} else {
this.showMessage = true
}
},
set(value) {
if (this.isMysql) {
this.$emit('input', value && dayjs(value).format('YYYY-MM-DD HH:mm:ss'))
} else {
this.$emit('input', value && dayjs(value).format('YYYY-MM-DD HH:mm:ssZ'))
}
},
},
parentListeners() {
const $listeners = {}
if (this.$listeners.blur) {
// $listeners.blur = this.$listeners.blur
}
if (this.$listeners.focus) {
$listeners.focus = this.$listeners.focus
}
return $listeners
},
},
mounted() {
// listen dialog click:outside event and save on close
if (this.$refs.picker && this.$refs.picker.$children && this.$refs.picker.$children[0]) {
this.$refs.picker.$children[0].$on('click:outside', () => {
this.$refs.picker.okHandler()
})
}
if (!this.ignoreFocus) {
this.$refs.picker.display = true
}
},
} */
</script>
<template>
<input v-model="localState" type="datetime-local" />
<!-- <div> -->
<!-- <div v-show="!showMessage"> -->
<!-- <v-datetime-picker -->
<!-- ref="picker" -->
<!-- v-model="localState" -->
<!-- class="caption xc-date-time-picker" -->
<!-- :text-field-props="{ -->
<!-- class: 'caption mt-0 pt-0', -->
<!-- flat: true, -->
<!-- solo: true, -->
<!-- dense: true, -->
<!-- hideDetails: true, -->
<!-- }" -->
<!-- :time-picker-props="{ -->
<!-- format: '24hr', -->
<!-- }" -->
<!-- v-on="parentListeners" -->
<!-- /> -->
<!-- </div> -->
<!-- <div v-show="showMessage" class="edit-warning" @dblclick="$refs.picker.display = true"> -->
<!-- &lt;!&ndash; TODO: i18n &ndash;&gt; -->
<!-- ERR: Couldn't parse {{ value }} -->
<!-- </div> -->
<!-- </div> -->
</template>
<style scoped>
/*:deep(.v-input),*/
/*:deep(.v-text-field) {*/
/* margin-top: 0 !important;*/
/* padding-top: 0 !important;*/
/* font-size: inherit !important;*/
/*}*/
/*.edit-warning {*/
/* padding: 10px;*/
/* text-align: left;*/
/* color: #e65100;*/
/*}*/
</style>