Hooke / custom_form

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
0fb558f0 1 parent d7860693

✨ feat(日期时间控件): 样式和功能调整

Inline Side-by-side
Showing 3 changed files with 147 additions and 144 deletions
<!--
* @Date: 2022-09-08 15:02:45
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-02-07 16:46:30
* @FilePath: /data-table/src/components/DateTimePickerField/index.vue
* @LastEditTime: 2023-04-07 17:31:50
* @FilePath: /custom_form/src/components/DateTimePickerField/index.vue
* @Description: 日期时间选择器
-->
<template>
<div v-if="HideShow" class="datetime-picker">
<div class="label">
<span v-if="item.component_props.required">&nbsp;*</span>
<text v-if="item.component_props.required">&nbsp;*</text>
{{ item.component_props.label }}
</div>
<van-field
v-model="item.value"
is-link
readonly
:name="item.key"
:required="item.component_props.required"
:disabled="item.component_props.readonly"
:placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择日期时间'"
:rules="rules"
@click="onTap"
:border="false"
/>
<van-popup v-model:show="showPicker" position="bottom">
<van-picker-group
title="请选择日期时间"
:tabs="['选择日期', '选择时间']"
<nut-cell desc-text-align="left" :desc="popupDesc" @click="onTap" is-link style="border: 1px solid #eaeaea; border-radius: 0.25rem; padding: 0.25rem 0.5rem;"></nut-cell>
<div
v-if="show_error"
style="padding: 5px; color: red; font-size: 12px;"
>
{{ error_msg }}
</div>
<nut-popup position="bottom" v-model:visible="showPicker">
<nut-date-picker
v-model="currentDate"
title="日期时间选择"
:type="columns_type"
:min-date="minDate"
:max-date="maxDate"
@confirm="onConfirm"
@cancel="onCancel"
@cancel="showPicker = false"
:is-show-chinese="true"
>
<van-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" :columns-type="columns_date_type" />
<van-time-picker v-model="currentTime" :columns-type="columns_time_type" />
</van-picker-group>
</van-popup>
</nut-date-picker>
</nut-popup>
</div>
</template>
<script setup>
import { showToast } from "vant";
import dayjs from "dayjs";
import { ref, computed, watch, onMounted, reactive } from "vue";
const props = defineProps({
item: Object,
});
const emit = defineEmits(["active"]);
// 隐藏显示
const HideShow = computed(() => {
return !props.item.component_props.disabled
})
const showPicker = ref(false);
const popupDesc = ref('');
let minDate = new Date(2020, 0, 1);
let maxDate = new Date(2035, 10, 1);
const currentDate = ref('');
const readonly = props.item.component_props.readonly;
const onTap = () => {
if (readonly) return false; // 如果为只读，不能设置
showPicker.value = true
}
const currentDate = ref([]);
const currentTime = ref([]);
const onConfirm = () => {
props.item.value = `${currentDate.value.join("-")} ${currentTime.value.join(":")}`;
const onConfirm = ({ selectedValue, selectedOptions }) => {
if (columns_type.value === 'datetime') {
const date = selectedValue.slice(0, 3).join('-');
const time = selectedValue.slice(3).join(':');
popupDesc.value = date + ' ' + time;
props.item.value = {
key: "datetime",
filed_name: props.item.key,
value: date + ' ' + time,
};
} else {
popupDesc.value = selectedOptions.map((val) => val.value).join('-');
props.item.value = {
key: "date",
filed_name: props.item.key,
value: selectedOptions.map((val) => val.value).join('-'),
};
}
emit("active", props.item.value);
showPicker.value = false;
validDateTime()
};
const onCancel = () => {
showPicker.value = false;
};
const columns_date_type = ref([]);
const columns_time_type = ref([]);
const columns_type = ref('datetime');
const date_format = props.item.component_props.data_dateformat;
// 数字前面补位
const formatZero = (num, len) => {
if (String(num).length > len) {
return num;
}
return (Array(len).join(0) + num).slice(-len)
}
const minDate = ref()
const maxDate = ref()
// // 数字前面补位
// const formatZero = (num, len) => {
// if (String(num).length > len) {
// return num;
// }
// return (Array(len).join(0) + num).slice(-len)
// }
onMounted(() => {
// 根据默认值时间调整显示
const datetime = props.item.component_props.default ? props.item.component_props.default.split(" ") : props.item.value.split(" ");
currentDate.value = datetime[0]?.split("-");
currentTime.value = datetime[1]?.split(":");
// YYYY=年，YYYY-MM=年月，YYYY-MM-DD=年月日，YYYY-MM-DD HH=年月日时，YYYY-MM-DD HH:mm=年月日时分，YYYY-MM-DD HH:mm:ss=年月日时分秒
let Year = '';
let Month = '';
let Day = '';
if (!props.item.component_props.default) {
Year = String(dayjs().year());
Month = formatZero(dayjs().month(), 2);
Day = formatZero(dayjs().date(), 2);
} else {
Year = currentDate.value[0];
Month = formatZero(currentDate.value[1], 2);
Day = formatZero(currentDate.value[2], 2);
}
let Hour = ''
let Minute = ''
let Second = ''
if (!props.item.component_props.default) {
Hour = String(dayjs().hour());
Minute = String(dayjs().minute());
Second = String(dayjs().second());
} else {
Hour = currentTime.value[0];
Minute = currentTime.value[1];
Second = currentTime.value[2];
}
popupDesc.value = props.item.component_props.default ? props.item.component_props.default : '请选择';
currentDate.value = new Date(props.item.component_props.default);
switch (date_format) {
case "YYYY":
columns_date_type.value = ['year']
// 设置默认值
currentDate.value = [Year];
break;
// case "YYYY":
// columns_date_type.value = ['year']
// // 设置默认值
// currentDate.value = [Year];
// break;
case "YYYY-MM":
columns_date_type.value = ['year', 'month']
// 设置默认值
currentDate.value = [Year, Month];
columns_type.value = 'year-month'
break;
case "YYYY-MM-DD":
columns_date_type.value = ['year', 'month', 'day']
// 设置默认值
currentDate.value = [Year, Month, Day];
break;
case "YYYY-MM-DD HH":
columns_date_type.value = ['year', 'month', 'day']
columns_time_type.value = ['hour']
// 设置默认值
currentDate.value = [Year, Month, Day];
currentTime.value = [Hour];
break;
case "YYYY-MM-DD HH:mm":
columns_date_type.value = ['year', 'month', 'day']
columns_time_type.value = ['hour', 'minute']
// 设置默认值
currentDate.value = [Year, Month, Day];
currentTime.value = [Hour, Minute];
columns_type.value = 'date'
break;
// case "YYYY-MM-DD HH":
// columns_date_type.value = ['year', 'month', 'day']
// columns_time_type.value = ['hour']
// // 设置默认值
// currentDate.value = [Year, Month, Day];
// currentTime.value = [Hour];
// break;
// case "YYYY-MM-DD HH:mm":
// columns_date_type.value = ['year', 'month', 'day']
// columns_time_type.value = ['hour', 'minute']
// // 设置默认值
// currentDate.value = [Year, Month, Day];
// currentTime.value = [Hour, Minute];
// break;
case "YYYY-MM-DD HH:mm:ss":
columns_date_type.value = ['year', 'month', 'day']
columns_time_type.value = ['hour', 'minute', 'second']
// 设置默认值
currentDate.value = [Year, Month, Day];
currentTime.value = [Hour, Minute, Second];
columns_type.value = 'datetime'
break;
}
// 设置默认最大最小日期
if (data_minvalue.split(" ")[0].length) {
if (data_minvalue.split(" ")[0]) {
const min = data_minvalue.split(" ")[0].split("-")
minDate.value = new Date(+min[0], +min[1] - 1, +min[2])
minDate = new Date(+min[0], +min[1] - 1, +min[2])
}
if (data_maxvalue.split(" ")[0].length) {
if (data_maxvalue.split(" ")[0]) {
const max = data_maxvalue.split(" ")[0].split("-")
maxDate.value = new Date(+max[0], +max[1] - 1, +max[2])
maxDate = new Date(+max[0], +max[1] - 1, +max[2])
}
});
const required = props.item.component_props.required;
const data_minvalue = props.item.component_props.data_minvalue;
const data_maxvalue = props.item.component_props.data_maxvalue;
const validator = (val) => {
if (required && !val) {
return false;
} else if (val && data_minvalue && val < data_minvalue) {
return false;
} else if (val && data_maxvalue && val > data_maxvalue) {
return false;
// 错误提示
const show_error = ref(false);
const error_msg = ref('');
// 校验模块
const validDateTime = () => {
// 必填项
if (required && popupDesc.value === '请选择') {
show_error.value = true;
error_msg.value = '必填项不能为空'
} else if (required && popupDesc.value && data_minvalue && popupDesc.value < data_minvalue) {
show_error.value = true;
error_msg.value = "最小可选：" + data_minvalue;
} else if (required && popupDesc.value && data_maxvalue && popupDesc.value > data_maxvalue) {
show_error.value = true;
error_msg.value = "最大可选：" + data_maxvalue;
} else {
return true;
show_error.value = false;
error_msg.value = ''
}
return !show_error.value;
};
// 错误提示文案
const validatorMessage = (val, rule) => {
if (required && !val) {
return "必填项不能为空";
} else if (val && data_minvalue && val < data_minvalue) {
return "最小可选：" + data_minvalue;
} else if (val && data_maxvalue && val > data_maxvalue) {
return "最大可选：" + data_maxvalue;
}
};
const rules = [{ validator, message: validatorMessage }];
defineExpose({ validDateTime, id: props.item.key });
</script>
<style lang="less" scoped>
.datetime-picker {
margin: 1rem;
.label {
// padding: 1rem 1rem 0 1rem;
font-size: 0.9rem;
padding-bottom: 20px;
font-size: 26px;
font-weight: bold;
span {
text {
color: red;
}
}
:deep(.van-icon) { // 处理正式服务器上箭头上下位移问题
font-size: var(--van-cell-icon-size);
line-height: var(--van-cell-line-height);
}
// :deep(.van-icon) { // 处理正式服务器上箭头上下位移问题
// font-size: var(--van-cell-icon-size);
// line-height: var(--van-cell-line-height);
// }
}
:deep(.van-cell--clickable) {
border: 1px solid #eaeaea;
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
margin-top: 0.5rem;
input {
color: #323233;
}
}
// :deep(.van-cell--clickable) {
// border: 1px solid #eaeaea;
// border-radius: 0.25rem;
// padding: 0.25rem 0.5rem;
// margin-top: 0.5rem;
// input {
// color: #323233;
// }
// }
</style>
......
......@@ -7,7 +7,7 @@ import PickerField from '@/components/PickerField/index.vue'
import AreaPickerField from '@/components/AreaPickerField/index.vue'
import DatePickerField from '@/components/DatePickerField/index.vue'
import TimePickerField from '@/components/TimePickerField/index.vue'
// import DateTimePickerField from '@/components/DateTimePickerField/index.vue'
import DateTimePickerField from '@/components/DateTimePickerField/index.vue'
// import ImageUploaderField from '@/components/ImageUploaderField/index.vue'
// import FileUploaderField from '@/components/FileUploaderField/index.vue'
import PhoneField from '@/components/PhoneField/index.vue'
......@@ -102,9 +102,9 @@ export function createComponentType(data) {
if (item.component_props.tag === 'time') {
item.component = TimePickerField
}
// if (item.component_props.tag === 'datetime') {
// item.component = DateTimePickerField
// }
if (item.component_props.tag === 'datetime') {
item.component = DateTimePickerField
}
// if (item.component_props.tag === 'image_uploader') {
// item.component = ImageUploaderField
// }
......
<!--
* @Date: 2023-03-24 09:19:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-04-07 16:12:27
* @LastEditTime: 2023-04-07 17:26:07
* @FilePath: /custom_form/src/pages/table/index.vue
* @Description: 文件描述
-->
......@@ -138,6 +138,7 @@ const email = ref([]);
const address = ref([]);
const date = ref([]);
const time = ref([]);
const datetime = ref([]);
const area_picker = ref([]);
const image_uploader = ref([]);
const file_uploader = ref([]);
......@@ -182,6 +183,9 @@ const setRefMap = (el, item) => {
if (item.component_props.tag === "time") {
time.value.push(el);
}
if (item.component_props.tag === "datetime") {
datetime.value.push(el);
}
if (item.component_props.tag === "area_picker") {
area_picker.value.push(el);
}
......@@ -459,6 +463,9 @@ const onActive = (item) => {
if (item.key === "time") {
postData.value[item.filed_name] = item.value;
}
if (item.key === "datetime") {
postData.value[item.filed_name] = item.value;
}
if (item.key === "image_uploader") {
postData.value[item.filed_name] = item.value;
}
......@@ -641,6 +648,19 @@ const validOther = () => {
}
});
}
if (datetime.value) {
// 日期时间选择器
datetime.value.forEach((item, index) => {
if (!datetime.value[index].validDateTime()) {
valid = {
status: datetime.value[index].validDateTime(),
key: "datetime",
id: datetime.value[index]?.id
};
return false;
}
});
}
if (area_picker.value) {
// 省市区地址
area_picker.value.forEach((item, index) => {
......