Hooke / custom_form

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9e0b8cbd 1 parent 1be32f01

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

Inline Side-by-side
Showing 3 changed files with 100 additions and 91 deletions
<!--
* @Date: 2022-08-31 11:45:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-02-10 10:11:05
* @FilePath: /data-table/src/components/TimePickerField/index.vue
* @LastEditTime: 2023-04-07 16:41:40
* @FilePath: /custom_form/src/components/TimePickerField/index.vue
* @Description: 时间选择组件
-->
<template>
<div v-if="HideShow" class="time-picker-field">
<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-time-picker
<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="currentTime"
title="请选择时间"
:columns-type="columns_type"
title="时间选择"
:type="columns_type"
@confirm="onConfirm"
@cancel="showPicker = false"
/>
</van-popup>
:is-show-chinese="true"
>
</nut-date-picker>
</nut-popup>
</div>
</template>
<script setup>
import { ref, computed, watch, onMounted, reactive } from "vue";
import dayjs from "dayjs";
const props = defineProps({
......@@ -45,8 +43,12 @@ const props = defineProps({
const HideShow = computed(() => {
return !props.item.component_props.disabled
})
const emit = defineEmits(["active"]);
const showPicker = ref(false);
const currentTime = ref([]);
const popupDesc = ref('');
const currentTime = ref('');
const readonly = props.item.component_props.readonly;
const onTap = () => {
......@@ -55,94 +57,81 @@ const onTap = () => {
}
const onConfirm = ({ selectedValues, selectedOptions }) => {
props.item.value = selectedValues.join(":");
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;
validTime()
};
const columns_type = ref([]);
const date_format = props.item.component_props.data_dateformat; // HH:mm=时分，HH:mm:ss=时分秒
const columns_type = ref('time');
// const date_format = props.item.component_props.data_dateformat; // HH:mm=时分，HH:mm:ss=时分秒
onMounted(() => {
// 根据默认值时间调整显示
currentTime.value = props.item.component_props.default ? props.item.component_props.default.split(":") : props.item.value.split(":");
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];
}
switch (date_format) {
case "HH:mm":
columns_type.value = ['hour', 'minute'];
// 设置默认值
currentTime.value = [Hour, Minute];
break;
case "HH:mm:ss":
columns_type.value = ['hour', 'minute', 'second'];
// 设置默认值
currentTime.value = [Hour, Minute, Second];
break;
}
popupDesc.value = props.item.component_props.default ? props.item.component_props.default : '请选择';
const default_time = props.item.component_props.default ? props.item.component_props.default.split(":") : [0 , 0];
currentTime.value = new Date(2023, 1, 1, +default_time[0], +default_time[1])
});
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 validTime = () => {
// 必填项
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({ validTime, id: props.item.key });
</script>
<style lang="less" scoped>
<style lang="less">
.time-picker-field {
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>
......
......@@ -6,7 +6,7 @@ import CheckboxField from '@/components/CheckboxField/index.vue'
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 TimePickerField from '@/components/TimePickerField/index.vue'
// import DateTimePickerField from '@/components/DateTimePickerField/index.vue'
// import ImageUploaderField from '@/components/ImageUploaderField/index.vue'
// import FileUploaderField from '@/components/FileUploaderField/index.vue'
......@@ -99,9 +99,9 @@ export function createComponentType(data) {
if (item.component_props.tag === 'date') {
item.component = DatePickerField
}
// if (item.component_props.tag === 'time') {
// item.component = TimePickerField
// }
if (item.component_props.tag === 'time') {
item.component = TimePickerField
}
// if (item.component_props.tag === 'datetime') {
// item.component = DateTimePickerField
// }
......
<!--
* @Date: 2023-03-24 09:19:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-04-07 14:30:33
* @LastEditTime: 2023-04-07 16:12:27
* @FilePath: /custom_form/src/pages/table/index.vue
* @Description: 文件描述
-->
......@@ -137,6 +137,7 @@ const phone = ref([]);
const email = ref([]);
const address = ref([]);
const date = ref([]);
const time = ref([]);
const area_picker = ref([]);
const image_uploader = ref([]);
const file_uploader = ref([]);
......@@ -178,6 +179,9 @@ const setRefMap = (el, item) => {
if (item.component_props.tag === "date") {
date.value.push(el);
}
if (item.component_props.tag === "time") {
time.value.push(el);
}
if (item.component_props.tag === "area_picker") {
area_picker.value.push(el);
}
......@@ -452,6 +456,9 @@ const onActive = (item) => {
if (item.key === "date") {
postData.value[item.filed_name] = item.value;
}
if (item.key === "time") {
postData.value[item.filed_name] = item.value;
}
if (item.key === "image_uploader") {
postData.value[item.filed_name] = item.value;
}
......@@ -621,6 +628,19 @@ const validOther = () => {
}
});
}
if (time.value) {
// 日期选择器
time.value.forEach((item, index) => {
if (!time.value[index].validTime()) {
valid = {
status: time.value[index].validTime(),
key: "time",
id: time.value[index]?.id
};
return false;
}
});
}
if (area_picker.value) {
// 省市区地址
area_picker.value.forEach((item, index) => {
......