@truenewx/tnxvue3 2.6.0

package/src/element-plus/date-picker/DatePicker.vue

@@ -0,0 +1,206 @@
+<template>
+    <div class="tnxel-date-picker d-flex" v-if="permanentable">
+        <el-date-picker :type="type" v-model="model.value" :value-format="format" :editable="editable"
+            :placeholder="placeholderText" :clearable="empty" :default-value="defaultDate"
+            :disabled-date="disabledDate" :disabled="disabled || model.permanent"
+            :class="{'flex-grow-1': !pickerWidth}" :style="{width: pickerWidth}"
+            @change="emitModelValue"/>
+        <el-checkbox style="margin-left: 1rem; margin-right: 0.75rem;" v-model="model.permanent"
+            @change="onPermanentChange">{{ permanentText }}
+        </el-checkbox>
+    </div>
+    <el-date-picker class="tnxel-date-picker" :type="type" v-model="model.value" :value-format="format"
+        :editable="editable" :placeholder="placeholderText" :clearable="empty" :default-value="defaultDate"
+        :disabled-date="disabledDate" :disabled="disabled" :style="{width: pickerWidth}" v-else/>
+</template>
+
+<script>
+import $ from 'jquery';
+
+const util = window.tnx.util;
+
+export default {
+    name: 'TnxelDatePicker',
+    props: {
+        permanentable: Boolean,
+        modelValue: [Date, Number, String, Object], // 仅permanentable为true时传入Object
+        valueFormat: String,
+        type: {
+            type: String,
+            default: 'date',
+        },
+        placeholder: {
+            type: String,
+            default: '请选择',
+        },
+        disabled: Boolean,
+        empty: {
+            type: Boolean,
+            default: false,
+        },
+        defaultValue: [Date, Number, String],
+        earliest: [Date, Number, String],
+        latest: [Date, Number, String],
+        pickerWidth: String,
+        editable: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    emits: ['update:modelValue'],
+    data() {
+        let vm = this;
+        let model = {
+            value: null,
+            permanent: false,
+        }
+        Object.assign(model, this.getModel());
+        return {
+            permanentText: util.date.PERMANENT_DATE_TEXT,
+            model: model,
+            disabledDate(date) {
+                if (vm.earliest || vm.latest) {
+                    date = new Date(date);
+                    if (vm.earliest) {
+                        let earliest = new Date(vm.earliest);
+                        if (date.getTime() < earliest.getTime()) {
+                            return true;
+                        }
+                    }
+                    if (vm.latest) {
+                        let latest = new Date(vm.latest);
+                        if (date.getTime() > latest.getTime()) {
+                            return true;
+                        }
+                    }
+                }
+                return false;
+            },
+        };
+    },
+    computed: {
+        format() {
+            let format;
+            if (this.valueFormat) {
+                format = this.valueFormat;
+            } else {
+                format = this.type === 'datetime' ? util.date.patterns.dateTime : util.date.patterns.date;
+            }
+            return window.tnx.date.toDayJsDateFormat(format);
+        },
+        defaultDate() {
+            if (this.defaultValue) {
+                if (this.defaultValue instanceof Date) {
+                    return this.defaultValue;
+                }
+                return new Date(this.defaultValue);
+            }
+            return null;
+        },
+        defaultDateValue() {
+            let date = this.defaultDate;
+            return date ? date.formatDate() : null;
+        },
+        placeholderText() {
+            if (this.placeholder) {
+                return this.placeholder;
+            }
+            if (this.model.permanent) {
+                return '';
+            }
+            return this.editable ? '格式：' + this.format : '请选择';
+        },
+    },
+    watch: {
+        modelValue() {
+            let model = this.getModel();
+            Object.assign(this.model, model);
+        },
+        defaultValue() {
+            if (!this.empty && !this.model.value) {
+                this.model.value = this.defaultDateValue;
+            }
+        },
+    },
+    mounted() {
+        let vm = this;
+        this.$watch('model', function() {
+            vm.emitModelValue();
+        }, {
+            deep: true
+        });
+    },
+    methods: {
+        emitModelValue() {
+            if (this.permanentable) {
+                this.$emit('update:modelValue', this.model);
+            } else {
+                this.$emit('update:modelValue', this.model.value);
+            }
+            if (!this.empty) {
+                // 重新进行字段校验，以清除可能的字段校验错误消息
+                let formItem = this.$parent;
+                while (formItem && !formItem.elForm) {
+                    formItem = formItem.$parent;
+                }
+                if (formItem && formItem.elForm && formItem.prop) {
+                    formItem.elForm.validateField(formItem.prop);
+                } else { // 不隶属于表单栏目，则简单地移除错误框效果
+                    let $element = $(this.$el);
+                    if ($element.is('.el-input')) {
+                        $element.removeClass('is-error');
+                    } else {
+                        $('.el-input', $element).removeClass('is-error');
+                    }
+                }
+            }
+        },
+        onPermanentChange() {
+            // 如果不允许为空，需做特殊处理
+            if (!this.empty) {
+                if (!this.model.permanent && !this.model.value) { // 取消永久选项时日期值为空，则设置为默认值
+                    this.model.value = this.defaultDateValue;
+                }
+            }
+            this.emitModelValue();
+        },
+        getModel() {
+            let model = {
+                value: null,
+                permanent: false,
+            };
+            if (this.modelValue) {
+                if (this.permanentable) {
+                    if (typeof this.modelValue === 'object') {
+                        model.value = this.modelValue.value;
+                        model.permanent = this.modelValue.permanent;
+                    } else {
+                        model.value = this.modelValue;
+                    }
+                    if (model.permanent) {
+                        model.value = null;
+                    } else if (!this.empty && !model.value) {
+                        model.value = this.defaultDateValue;
+                    }
+                } else {
+                    if (this.modelValue instanceof Date) {
+                        model.value = this.modelValue.format(this.format);
+                    } else if (typeof this.modelValue === 'number') {
+                        model.value = new Date(this.modelValue).format(this.format);
+                    } else {
+                        model.value = this.modelValue;
+                    }
+                }
+            }
+            return model;
+        }
+    }
+}
+</script>
+
+<style>
+.tnxel-date-picker.el-date-editor.el-input,
+.tnxel-date-picker.el-date-editor.el-input__wrapper {
+    width: 150px;
+}
+</style>

package/src/element-plus/date-range/DateRange.vue

@@ -0,0 +1,78 @@
+<template>
+    <el-date-picker type="daterange" v-model="model" :editable="false" value-format="yyyy-MM-dd" :clearable="empty"
+        :range-separator="separator" :start-placeholder="beginPlaceholder" :end-placeholder="endPlaceholder"
+        :disabled="disabled"/>
+</template>
+
+<script>
+export default {
+    name: 'TnxelDateRange',
+    props: {
+        modelValue: Object,
+        separator: {
+            type: String,
+            default: '至',
+        },
+        beginPlaceholder: {
+            type: String,
+            default: '开始日期',
+        },
+        endPlaceholder: {
+            type: String,
+            default: '结束日期',
+        },
+        disabled: Boolean,
+        empty: {
+            type: Boolean,
+            default: false,
+        }
+    },
+    emits: ['update:modelValue'],
+    data() {
+        return {
+            model: this.getModel(),
+        };
+    },
+    watch: {
+        model(model) {
+            let value = {};
+            if (Array.isArray(model)) {
+                if (model.length > 0) {
+                    value.begin = model[0];
+                }
+                if (model.length > 1) {
+                    value.end = model[1];
+                }
+            }
+            this.$emit('update:modelValue', value);
+        },
+        modelValue() {
+            let model = this.getModel();
+            if (model) {
+                if (this.model === null) {
+                    this.model = [];
+                }
+                this.model[0] = model[0];
+                this.model[1] = model[1];
+            } else {
+                this.model = null;
+            }
+        }
+    },
+    methods: {
+        getModel() {
+            let model = null;
+            if (this.modelValue) {
+                let begin = this.modelValue.begin;
+                let end = this.modelValue.end;
+                if (begin && end) {
+                    model = [];
+                    model.push(begin instanceof Date ? begin.formatDate() : begin);
+                    model.push(end instanceof Date ? end.formatDate() : end);
+                }
+            }
+            return model;
+        }
+    }
+}
+</script>

package/src/element-plus/datetime-picker/DateTimePicker.vue

@@ -0,0 +1,129 @@
+<template>
+    <el-row class="tnxel-datetime-picker" :gutter="8">
+        <el-col :span="dateColSpan">
+            <el-date-picker ref="datePicker"
+                v-model="model"
+                :format="convertedDateFormat"
+                :default-value="defaultValue"
+                :placeholder="datePlaceholder"
+                :size="size"
+                :clearable="empty"
+                :disabled-date="isDisabledDate"
+                :disabled="disabled"/>
+        </el-col>
+        <el-col :span="timeColSpan">
+            <el-time-picker ref="timePicker"
+                v-model="model"
+                :format="timeFormat"
+                :default-value="defaultTimeValue"
+                :placeholder="timePlaceholder"
+                :size="size"
+                :clearable="empty"
+                :disabled="disabled || !model"/>
+        </el-col>
+    </el-row>
+</template>
+
+<script>
+export default {
+    name: 'TnxelDateTimePicker',
+    props: {
+        modelValue: [String, Number, Date],
+        dateFormat: {
+            type: String,
+            default: 'yyyy-MM-dd',
+        },
+        datePlaceholder: {
+            type: String,
+            default: '选择日期',
+        },
+        timeFormat: {
+            type: String,
+            default: 'HH:mm', // 默认精确到分钟
+        },
+        timePlaceholder: {
+            type: String,
+            default: '选择时间',
+        },
+        delimiter: {
+            type: String,
+            default: ' ', // 默认用空格分隔日期和时间
+        },
+        size: String,
+        empty: {
+            type: Boolean,
+            default: false,
+        },
+        defaultValue: [String, Number, Date],
+        valueFormat: String,
+        disabled: Boolean,
+        minDate: [String, Number, Date],
+        maxDate: [String, Number, Date],
+    },
+    emits: ['update:modelValue'],
+    data() {
+        return {
+            model: window.tnx.util.date.toDate(this.modelValue),
+        }
+    },
+    computed: {
+        dateColSpan() {
+            if (this.timeFormat.length > 5) {
+                return 13;
+            }
+            return 14;
+        },
+        timeColSpan() {
+            if (this.timeFormat.length > 5) {
+                return 11;
+            }
+            return 10;
+        },
+        convertedDateFormat() {
+            return window.tnx.date.toDayJsDateFormat(this.dateFormat);
+        },
+        defaultTimeValue() {
+            if (this.defaultValue) {
+                return window.tnx.util.date.toDate(this.defaultValue);
+            }
+            // 必须创建新的日期对象，以免改动影响原始modelValue
+            let time = this.modelValue ? new Date(this.modelValue) : new Date();
+            time.applyTime(0, 0, 0, 0);
+            return time;
+        },
+    },
+    watch: {
+        modelValue() {
+            this.model = window.tnx.util.date.toDate(this.modelValue);
+        },
+        model() {
+            this.$emit('update:modelValue', this.model);
+        },
+    },
+    methods: {
+        isDisabledDate(date) {
+            let minDate = window.tnx.util.date.toDate(this.minDate);
+            if (minDate) {
+                minDate.applyTime(0, 0, 0, 0);
+                if (minDate.getTime() > date.getTime()) {
+                    return true;
+                }
+            }
+            let maxDate = window.tnx.util.date.toDate(this.maxDate);
+            if (maxDate) {
+                maxDate.applyTime(0, 0, 0, 0);
+                if (maxDate.getTime() < date.getTime()) {
+                    return true;
+                }
+            }
+            return false;
+        },
+    },
+}
+</script>
+
+<style>
+.tnxel-datetime-picker .el-input {
+    width: 100%;
+}
+</style>

package/src/element-plus/detail-form/DetailForm.vue

@@ -0,0 +1,88 @@
+<template>
+    <el-form :label-position="vertical ? 'top' : 'right'" label-width="auto" ref="form" :model="model"
+        class="tnxel-detail-form" :class="formClass">
+        <slot></slot>
+        <el-form-item class="w-100 mb-0" :label="vertical ? undefined : '&nbsp;'" v-if="update || back !== false">
+            <el-button :type="theme || 'primary'" @click="toUpdate" v-if="update">{{ updateText }}</el-button>
+            <el-button type="default" @click="toBack" v-if="back !== false">{{ backText }}</el-button>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script>
+export default {
+    name: 'TnxelDetailForm',
+    props: {
+        model: {
+            type: Object,
+            default: () => {
+            },
+        },
+        theme: String,
+        update: {
+            type: Function,
+        },
+        updateText: {
+            type: String,
+            default: '修改',
+        },
+        back: {
+            type: [String, Function, Boolean],
+            default: true,
+        },
+        backText: {
+            type: String,
+            default: '返回',
+        },
+        vertical: {
+            type: Boolean,
+            default: false,
+        },
+        columns: {
+            type: Number,
+            default: 1,
+        }
+    },
+    data() {
+        return {};
+    },
+    computed: {
+        formClass() {
+            let formClass = '';
+            if (this.theme) {
+                formClass += ' theme-' + this.theme;
+            }
+            if (this.columns > 1 && this.columns < 5) {
+                formClass += ' form-columns-' + this.columns;
+            }
+            return formClass.trim();
+        }
+    },
+    methods: {
+        toUpdate() { // 为了避免传递事件参数，不直接使用update()
+            if (this.update) {
+                this.update();
+            }
+        },
+        toBack() {
+            if (typeof this.back === 'function') {
+                this.back();
+            } else if (typeof this.back === 'string') {
+                this.$router.back(this.back);
+            } else if (this.back !== false) {
+                this.$router.back();
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.tnxel-detail-form .el-form-item {
+    margin-bottom: 0.75rem;
+}
+
+.tnxel-detail-form .el-form-item__content {
+    align-items: normal;
+}
+</style>