Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9e7806de 1 parent c4e263d8

时间相关控件属性联调控制

Inline Side-by-side
Showing 5 changed files with 151 additions and 33 deletions
<!--
* @Date: 2022-08-31 11:45:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-11-21 14:43:16
* @LastEditTime: 2022-12-22 18:43:29
* @FilePath: /data-table/src/components/DatePickerField/index.vue
* @Description: 日期选择组件
-->
......@@ -17,17 +17,15 @@
readonly
:name="item.key"
:required="item.component_props.required"
:placeholder="item.component_props.placeholder"
:rules="item.rules"
:placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择日期'"
:rules="rules"
@click="showPicker = true"
/>
<van-popup v-model:show="showPicker" position="bottom">
<van-date-picker
v-model="currentDate"
:title="item.component_props.title"
:min-date="item.component_props.min_date"
:max-date="item.component_props.max_date"
:columns-type="item.component_props.columns_type"
title="日期选择"
:columns-type="columns_type"
@confirm="onConfirm"
@cancel="showPicker = false"
/>
......@@ -46,13 +44,49 @@ const showPicker = ref(false);
const currentDate = ref([]);
const onConfirm = ({ selectedValues, selectedOptions }) => {
props.item.value = selectedValues[0] + "-" + selectedValues[1];
props.item.value = selectedValues.join("-");
showPicker.value = false;
};
const columns_type = ref([]);
const date_format = props.item.component_props.data_dateformat; // YYYY-MM=年月，YYYY-MM-DD=年月日
onMounted(() => {
currentDate.value = props.item.value.split("-");
switch (date_format) {
case "YYYY-MM":
columns_type.value = ['year', 'month']
break;
case "YYYY-MM-DD":
columns_type.value = ['year', 'month', 'day']
break;
}
});
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;
} else {
return true;
}
};
// 错误提示文案
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 }];
</script>
<style lang="less" scoped>
......
<!--
* @Date: 2022-09-08 15:02:45
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-11-21 14:47:52
* @LastEditTime: 2022-12-22 18:36:44
* @FilePath: /data-table/src/components/DateTimePickerField/index.vue
* @Description: 日期时间选择器
-->
......@@ -17,22 +17,19 @@
readonly
:name="item.key"
:required="item.component_props.required"
:placeholder="item.component_props.placeholder"
:rules="item.rules"
:placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择日期时间'"
:rules="rules"
@click="showPicker = true"
/>
<van-popup v-model:show="showPicker" position="bottom">
<van-picker-group
:title="item.component_props.title"
title="请选择日期时间"
:tabs="['选择日期', '选择时间']"
@confirm="onConfirm"
@cancel="onCancel"
>
<van-date-picker
v-model="currentDate"
:min-date="item.component_props.min_date"
/>
<van-time-picker v-model="currentTime" />
<van-date-picker v-model="currentDate" :columns-type="columns_date_type" />
<van-time-picker v-model="currentTime" :columns-type="columns_time_type" />
</van-picker-group>
</van-popup>
</div>
......@@ -58,12 +55,65 @@ const onCancel = () => {
showPicker.value = false;
};
const columns_date_type = ref([]);
const columns_time_type = ref([]);
const date_format = props.item.component_props.data_dateformat;
onMounted(() => {
// 获取值定位显示
const datetime = 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=年月日时分秒
switch (date_format) {
case "YYYY":
columns_date_type.value = ['year']
break;
case "YYYY-MM":
columns_date_type.value = ['year', 'month']
break;
case "YYYY-MM-DD":
columns_date_type.value = ['year', 'month', 'day']
break;
case "YYYY-MM-DD HH":
columns_date_type.value = ['year', 'month', 'day']
columns_time_type.value = ['hour']
break;
case "YYYY-MM-DD HH:mm":
columns_date_type.value = ['year', 'month', 'day']
columns_time_type.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']
break;
}
});
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;
} else {
return true;
}
};
// 错误提示文案
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 }];
</script>
<style lang="less" scoped>
......
<!--
* @Date: 2022-08-31 11:45:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-11-21 15:21:56
* @LastEditTime: 2022-12-22 18:43:52
* @FilePath: /data-table/src/components/TimePickerField/index.vue
* @Description: 时间选择组件
-->
......@@ -17,15 +17,15 @@
readonly
:name="item.key"
:required="item.component_props.required"
:placeholder="item.component_props.placeholder"
:rules="item.rules"
:placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择时间'"
:rules="rules"
@click="showPicker = true"
/>
<van-popup v-model:show="showPicker" position="bottom">
<van-time-picker
v-model="currentTime"
:title="item.component_props.title"
:columns-type="item.component_props.columns_type"
title="请选择时间"
:columns-type="columns_type"
@confirm="onConfirm"
@cancel="showPicker = false"
/>
......@@ -44,13 +44,49 @@ const showPicker = ref(false);
const currentTime = ref([]);
const onConfirm = ({ selectedValues, selectedOptions }) => {
props.item.value = selectedValues[0] + ":" + selectedValues[1];
props.item.value = selectedValues.join(":");
showPicker.value = false;
};
const columns_type = ref([]);
const date_format = props.item.component_props.data_dateformat; // HH:mm=时分，HH:mm:ss=时分秒
onMounted(() => {
currentTime.value = props.item.value.split(":");
switch (date_format) {
case "HH:mm":
columns_type.value = ['hour', 'minute']
break;
case "HH:mm:ss":
columns_type.value = ['hour', 'minute', 'second']
break;
}
});
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;
} else {
return true;
}
};
// 错误提示文案
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 }];
</script>
<style lang="less" scoped>
......
......@@ -88,13 +88,13 @@ export function createComponentType(data) {
if (item.component_props.tag === 'area_picker') {
item.component = AreaPickerField;
}
if (item.component_props.tag === 'date_picker') {
if (item.component_props.tag === 'date') {
item.component = DatePickerField;
}
if (item.component_props.tag === 'time_picker') {
if (item.component_props.tag === 'time') {
item.component = TimePickerField;
}
if (item.component_props.tag === 'datetime_picker') {
if (item.component_props.tag === 'datetime') {
item.component = DateTimePickerField;
}
if (item.component_props.tag === 'image_uploader') {
......
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-12-21 18:35:04
* @LastEditTime: 2022-12-22 18:38:44
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
......@@ -218,13 +218,11 @@ onMounted(async () => {
value: "",
component: "",
component_props: {
name: "number",
tag: "number",
label: "数字",
name: "datetime",
tag: "datetime",
label: "时间日期",
data_dateformat: "YYYY-MM-DD HH:mm:ss",
required: true,
max_fraction_count: null,
min: 30,
max: 100
},
},
];
......