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
1 <!-- 1 <!--
2 * @Date: 2022-08-31 11:45:30 2 * @Date: 2022-08-31 11:45:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-11-21 14:43:16 4 + * @LastEditTime: 2022-12-22 18:43:29
5 * @FilePath: /data-table/src/components/DatePickerField/index.vue 5 * @FilePath: /data-table/src/components/DatePickerField/index.vue
6 * @Description: 日期选择组件 6 * @Description: 日期选择组件
7 --> 7 -->
...@@ -17,17 +17,15 @@ ...@@ -17,17 +17,15 @@
17 readonly 17 readonly
18 :name="item.key" 18 :name="item.key"
19 :required="item.component_props.required" 19 :required="item.component_props.required"
20 - :placeholder="item.component_props.placeholder" 20 + :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择日期'"
21 - :rules="item.rules" 21 + :rules="rules"
22 @click="showPicker = true" 22 @click="showPicker = true"
23 /> 23 />
24 <van-popup v-model:show="showPicker" position="bottom"> 24 <van-popup v-model:show="showPicker" position="bottom">
25 <van-date-picker 25 <van-date-picker
26 v-model="currentDate" 26 v-model="currentDate"
27 - :title="item.component_props.title" 27 + title="日期选择"
28 - :min-date="item.component_props.min_date" 28 + :columns-type="columns_type"
29 - :max-date="item.component_props.max_date"
30 - :columns-type="item.component_props.columns_type"
31 @confirm="onConfirm" 29 @confirm="onConfirm"
32 @cancel="showPicker = false" 30 @cancel="showPicker = false"
33 /> 31 />
...@@ -46,13 +44,49 @@ const showPicker = ref(false); ...@@ -46,13 +44,49 @@ const showPicker = ref(false);
46 const currentDate = ref([]); 44 const currentDate = ref([]);
47 45
48 const onConfirm = ({ selectedValues, selectedOptions }) => { 46 const onConfirm = ({ selectedValues, selectedOptions }) => {
49 - props.item.value = selectedValues[0] + "-" + selectedValues[1]; 47 + props.item.value = selectedValues.join("-");
50 showPicker.value = false; 48 showPicker.value = false;
51 }; 49 };
52 50
51 +const columns_type = ref([]);
52 +const date_format = props.item.component_props.data_dateformat; // YYYY-MM=年月，YYYY-MM-DD=年月日
53 onMounted(() => { 53 onMounted(() => {
54 currentDate.value = props.item.value.split("-"); 54 currentDate.value = props.item.value.split("-");
55 + switch (date_format) {
56 + case "YYYY-MM":
57 + columns_type.value = ['year', 'month']
58 + break;
59 + case "YYYY-MM-DD":
60 + columns_type.value = ['year', 'month', 'day']
61 + break;
62 + }
55 }); 63 });
64 +
65 +const required = props.item.component_props.required;
66 +const data_minvalue = props.item.component_props.data_minvalue;
67 +const data_maxvalue = props.item.component_props.data_maxvalue;
68 +const validator = (val) => {
69 + if (required && !val) {
70 + return false;
71 + } else if (val && data_minvalue && val < data_minvalue) {
72 + return false;
73 + } else if (val && data_maxvalue && val > data_maxvalue) {
74 + return false;
75 + } else {
76 + return true;
77 + }
78 +};
79 +// 错误提示文案
80 +const validatorMessage = (val, rule) => {
81 + if (required && !val) {
82 + return "必填项不能为空";
83 + } else if (val && data_minvalue && val < data_minvalue) {
84 + return "最小可选：" + data_minvalue;
85 + } else if (val && data_maxvalue && val > data_maxvalue) {
86 + return "最大可选：" + data_maxvalue;
87 + }
88 +};
89 +const rules = [{ validator, message: validatorMessage }];
56 </script> 90 </script>
57 91
58 <style lang="less" scoped> 92 <style lang="less" scoped>
......
1 <!-- 1 <!--
2 * @Date: 2022-09-08 15:02:45 2 * @Date: 2022-09-08 15:02:45
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-11-21 14:47:52 4 + * @LastEditTime: 2022-12-22 18:36:44
5 * @FilePath: /data-table/src/components/DateTimePickerField/index.vue 5 * @FilePath: /data-table/src/components/DateTimePickerField/index.vue
6 * @Description: 日期时间选择器 6 * @Description: 日期时间选择器
7 --> 7 -->
...@@ -17,22 +17,19 @@ ...@@ -17,22 +17,19 @@
17 readonly 17 readonly
18 :name="item.key" 18 :name="item.key"
19 :required="item.component_props.required" 19 :required="item.component_props.required"
20 - :placeholder="item.component_props.placeholder" 20 + :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择日期时间'"
21 - :rules="item.rules" 21 + :rules="rules"
22 @click="showPicker = true" 22 @click="showPicker = true"
23 /> 23 />
24 <van-popup v-model:show="showPicker" position="bottom"> 24 <van-popup v-model:show="showPicker" position="bottom">
25 <van-picker-group 25 <van-picker-group
26 - :title="item.component_props.title" 26 + title="请选择日期时间"
27 :tabs="['选择日期', '选择时间']" 27 :tabs="['选择日期', '选择时间']"
28 @confirm="onConfirm" 28 @confirm="onConfirm"
29 @cancel="onCancel" 29 @cancel="onCancel"
30 > 30 >
31 - <van-date-picker 31 + <van-date-picker v-model="currentDate" :columns-type="columns_date_type" />
32 - v-model="currentDate" 32 + <van-time-picker v-model="currentTime" :columns-type="columns_time_type" />
33 - :min-date="item.component_props.min_date"
34 - />
35 - <van-time-picker v-model="currentTime" />
36 </van-picker-group> 33 </van-picker-group>
37 </van-popup> 34 </van-popup>
38 </div> 35 </div>
...@@ -58,12 +55,65 @@ const onCancel = () => { ...@@ -58,12 +55,65 @@ const onCancel = () => {
58 showPicker.value = false; 55 showPicker.value = false;
59 }; 56 };
60 57
58 +const columns_date_type = ref([]);
59 +const columns_time_type = ref([]);
60 +const date_format = props.item.component_props.data_dateformat;
61 onMounted(() => { 61 onMounted(() => {
62 // 获取值定位显示 62 // 获取值定位显示
63 const datetime = props.item.value.split(" "); 63 const datetime = props.item.value.split(" ");
64 currentDate.value = datetime[0]?.split("-"); 64 currentDate.value = datetime[0]?.split("-");
65 currentTime.value = datetime[1]?.split(":"); 65 currentTime.value = datetime[1]?.split(":");
66 + // YYYY=年，YYYY-MM=年月，YYYY-MM-DD=年月日，YYYY-MM-DD HH=年月日时，YYYY-MM-DD HH:mm=年月日时分，YYYY-MM-DD HH:mm:ss=年月日时分秒
67 + switch (date_format) {
68 + case "YYYY":
69 + columns_date_type.value = ['year']
70 + break;
71 + case "YYYY-MM":
72 + columns_date_type.value = ['year', 'month']
73 + break;
74 + case "YYYY-MM-DD":
75 + columns_date_type.value = ['year', 'month', 'day']
76 + break;
77 + case "YYYY-MM-DD HH":
78 + columns_date_type.value = ['year', 'month', 'day']
79 + columns_time_type.value = ['hour']
80 + break;
81 + case "YYYY-MM-DD HH:mm":
82 + columns_date_type.value = ['year', 'month', 'day']
83 + columns_time_type.value = ['hour', 'minute']
84 + break;
85 + case "YYYY-MM-DD HH:mm:ss":
86 + columns_date_type.value = ['year', 'month', 'day']
87 + columns_time_type.value = ['hour', 'minute', 'second']
88 + break;
89 + }
66 }); 90 });
91 +
92 +const required = props.item.component_props.required;
93 +const data_minvalue = props.item.component_props.data_minvalue;
94 +const data_maxvalue = props.item.component_props.data_maxvalue;
95 +const validator = (val) => {
96 + if (required && !val) {
97 + return false;
98 + } else if (val && data_minvalue && val < data_minvalue) {
99 + return false;
100 + } else if (val && data_maxvalue && val > data_maxvalue) {
101 + return false;
102 + } else {
103 + return true;
104 + }
105 +};
106 +// 错误提示文案
107 +const validatorMessage = (val, rule) => {
108 + if (required && !val) {
109 + return "必填项不能为空";
110 + } else if (val && data_minvalue && val < data_minvalue) {
111 + return "最小可选：" + data_minvalue;
112 + } else if (val && data_maxvalue && val > data_maxvalue) {
113 + return "最大可选：" + data_maxvalue;
114 + }
115 +};
116 +const rules = [{ validator, message: validatorMessage }];
67 </script> 117 </script>
68 118
69 <style lang="less" scoped> 119 <style lang="less" scoped>
......
1 <!-- 1 <!--
2 * @Date: 2022-08-31 11:45:30 2 * @Date: 2022-08-31 11:45:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-11-21 15:21:56 4 + * @LastEditTime: 2022-12-22 18:43:52
5 * @FilePath: /data-table/src/components/TimePickerField/index.vue 5 * @FilePath: /data-table/src/components/TimePickerField/index.vue
6 * @Description: 时间选择组件 6 * @Description: 时间选择组件
7 --> 7 -->
...@@ -17,15 +17,15 @@ ...@@ -17,15 +17,15 @@
17 readonly 17 readonly
18 :name="item.key" 18 :name="item.key"
19 :required="item.component_props.required" 19 :required="item.component_props.required"
20 - :placeholder="item.component_props.placeholder" 20 + :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择时间'"
21 - :rules="item.rules" 21 + :rules="rules"
22 @click="showPicker = true" 22 @click="showPicker = true"
23 /> 23 />
24 <van-popup v-model:show="showPicker" position="bottom"> 24 <van-popup v-model:show="showPicker" position="bottom">
25 <van-time-picker 25 <van-time-picker
26 v-model="currentTime" 26 v-model="currentTime"
27 - :title="item.component_props.title" 27 + title="请选择时间"
28 - :columns-type="item.component_props.columns_type" 28 + :columns-type="columns_type"
29 @confirm="onConfirm" 29 @confirm="onConfirm"
30 @cancel="showPicker = false" 30 @cancel="showPicker = false"
31 /> 31 />
...@@ -44,13 +44,49 @@ const showPicker = ref(false); ...@@ -44,13 +44,49 @@ const showPicker = ref(false);
44 const currentTime = ref([]); 44 const currentTime = ref([]);
45 45
46 const onConfirm = ({ selectedValues, selectedOptions }) => { 46 const onConfirm = ({ selectedValues, selectedOptions }) => {
47 - props.item.value = selectedValues[0] + ":" + selectedValues[1]; 47 + props.item.value = selectedValues.join(":");
48 showPicker.value = false; 48 showPicker.value = false;
49 }; 49 };
50 50
51 +const columns_type = ref([]);
52 +const date_format = props.item.component_props.data_dateformat; // HH:mm=时分，HH:mm:ss=时分秒
51 onMounted(() => { 53 onMounted(() => {
52 currentTime.value = props.item.value.split(":"); 54 currentTime.value = props.item.value.split(":");
55 + switch (date_format) {
56 + case "HH:mm":
57 + columns_type.value = ['hour', 'minute']
58 + break;
59 + case "HH:mm:ss":
60 + columns_type.value = ['hour', 'minute', 'second']
61 + break;
62 + }
53 }); 63 });
64 +
65 +const required = props.item.component_props.required;
66 +const data_minvalue = props.item.component_props.data_minvalue;
67 +const data_maxvalue = props.item.component_props.data_maxvalue;
68 +const validator = (val) => {
69 + if (required && !val) {
70 + return false;
71 + } else if (val && data_minvalue && val < data_minvalue) {
72 + return false;
73 + } else if (val && data_maxvalue && val > data_maxvalue) {
74 + return false;
75 + } else {
76 + return true;
77 + }
78 +};
79 +// 错误提示文案
80 +const validatorMessage = (val, rule) => {
81 + if (required && !val) {
82 + return "必填项不能为空";
83 + } else if (val && data_minvalue && val < data_minvalue) {
84 + return "最小可选：" + data_minvalue;
85 + } else if (val && data_maxvalue && val > data_maxvalue) {
86 + return "最大可选：" + data_maxvalue;
87 + }
88 +};
89 +const rules = [{ validator, message: validatorMessage }];
54 </script> 90 </script>
55 91
56 <style lang="less" scoped> 92 <style lang="less" scoped>
......
...@@ -88,13 +88,13 @@ export function createComponentType(data) { ...@@ -88,13 +88,13 @@ export function createComponentType(data) {
88 if (item.component_props.tag === 'area_picker') { 88 if (item.component_props.tag === 'area_picker') {
89 item.component = AreaPickerField; 89 item.component = AreaPickerField;
90 } 90 }
91 - if (item.component_props.tag === 'date_picker') { 91 + if (item.component_props.tag === 'date') {
92 item.component = DatePickerField; 92 item.component = DatePickerField;
93 } 93 }
94 - if (item.component_props.tag === 'time_picker') { 94 + if (item.component_props.tag === 'time') {
95 item.component = TimePickerField; 95 item.component = TimePickerField;
96 } 96 }
97 - if (item.component_props.tag === 'datetime_picker') { 97 + if (item.component_props.tag === 'datetime') {
98 item.component = DateTimePickerField; 98 item.component = DateTimePickerField;
99 } 99 }
100 if (item.component_props.tag === 'image_uploader') { 100 if (item.component_props.tag === 'image_uploader') {
......
1 <!-- 1 <!--
2 * @Date: 2022-07-18 10:22:22 2 * @Date: 2022-07-18 10:22:22
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-12-21 18:35:04 4 + * @LastEditTime: 2022-12-22 18:38:44
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -218,13 +218,11 @@ onMounted(async () => { ...@@ -218,13 +218,11 @@ onMounted(async () => {
218 value: "", 218 value: "",
219 component: "", 219 component: "",
220 component_props: { 220 component_props: {
221 - name: "number", 221 + name: "datetime",
222 - tag: "number", 222 + tag: "datetime",
223 - label: "数字", 223 + label: "时间日期",
224 + data_dateformat: "YYYY-MM-DD HH:mm:ss",
224 required: true, 225 required: true,
225 - max_fraction_count: null,
226 - min: 30,
227 - max: 100
228 }, 226 },
229 }, 227 },
230 ]; 228 ];
......