Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
435f8243 1 parent b436aff3

✨ feat(单选/多选控件): 新增补充信息属性控制

Inline Side-by-side
Showing 3 changed files with 47 additions and 9 deletions
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-02-01 00:26:07 4 + * @LastEditTime: 2023-02-01 10:32:38
5 * @FilePath: /data-table/src/components/CheckboxField/index.vue 5 * @FilePath: /data-table/src/components/CheckboxField/index.vue
6 * @Description: 多项选择控件 6 * @Description: 多项选择控件
7 --> 7 -->
...@@ -34,11 +34,13 @@ ...@@ -34,11 +34,13 @@
34 >{{ x.title }}</van-checkbox 34 >{{ x.title }}</van-checkbox
35 > 35 >
36 <van-field 36 <van-field
37 - v-if="checkbox_value.includes(x.value)" 37 + v-if="checkbox_value.includes(x.value) && x.is_input"
38 @blur="onBlur(x)" 38 @blur="onBlur(x)"
39 v-model="x.affix" 39 v-model="x.affix"
40 label="" 40 label=""
41 - placeholder="请输入补充信息" 41 + :placeholder="x.input_placeholder"
42 + :rules="x.input_required ? rules : ''"
43 + :required="x.input_required"
42 style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-bottom: 0.25rem;" 44 style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-bottom: 0.25rem;"
43 /> 45 />
44 </template> 46 </template>
...@@ -67,6 +69,23 @@ const HideShow = computed(() => { ...@@ -67,6 +69,23 @@ const HideShow = computed(() => {
67 return !props.item.component_props.disabled 69 return !props.item.component_props.disabled
68 }) 70 })
69 71
72 +// TODO: 等待数据结构更新，看看怎么判断必填
73 +// 校验函数返回 true 表示校验通过，false 表示不通过
74 +const validator = (val) => {
75 + if (!val) {
76 + return false;
77 + } else {
78 + return true;
79 + }
80 +};
81 +// 错误提示文案
82 +const validatorMessage = (val, rule) => {
83 + if (!val) {
84 + return "补充信息不能为空";
85 + }
86 +};
87 +const rules = [{ validator, message: validatorMessage }];
88 +
70 const emit = defineEmits(["active"]); 89 const emit = defineEmits(["active"]);
71 const checkbox_value = ref(props.item.component_props.default); 90 const checkbox_value = ref(props.item.component_props.default);
72 const affix_value = ref({}); 91 const affix_value = ref({});
...@@ -81,7 +100,7 @@ const onBlur = (item) => { ...@@ -81,7 +100,7 @@ const onBlur = (item) => {
81 const handleEmit = (item) => { 100 const handleEmit = (item) => {
82 // 选中状态添加属性 101 // 选中状态添加属性
83 if (item.checked) { 102 if (item.checked) {
84 - affix_value.value[item.value] = item.affix 103 + affix_value.value[item.value] = `${item.title}: ${item.affix}`;
85 } else { 104 } else {
86 // 为选中删除属性 105 // 为选中删除属性
87 delete affix_value.value[item.value] 106 delete affix_value.value[item.value]
......
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-02-01 00:25:55 4 + * @LastEditTime: 2023-02-01 10:32:14
5 * @FilePath: /data-table/src/components/RadioField/index.vue 5 * @FilePath: /data-table/src/components/RadioField/index.vue
6 * @Description: 单项选择控件 6 * @Description: 单项选择控件
7 --> 7 -->
...@@ -29,11 +29,13 @@ ...@@ -29,11 +29,13 @@
29 >{{ x.title }}</van-radio 29 >{{ x.title }}</van-radio
30 > 30 >
31 <van-field 31 <van-field
32 - v-if="radio_value === x.value" 32 + v-if="radio_value === x.value && x.is_input"
33 @blur="onBlur(x)" 33 @blur="onBlur(x)"
34 v-model="x.affix" 34 v-model="x.affix"
35 label="" 35 label=""
36 - placeholder="请输入补充信息" 36 + :placeholder="x.input_placeholder"
37 + :rules="x.input_required ? rules : ''"
38 + :required="x.input_required"
37 style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-bottom: 0.25rem;" 39 style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-bottom: 0.25rem;"
38 /> 40 />
39 </template> 41 </template>
...@@ -59,6 +61,23 @@ const HideShow = computed(() => { ...@@ -59,6 +61,23 @@ const HideShow = computed(() => {
59 return !props.item.component_props.disabled 61 return !props.item.component_props.disabled
60 }) 62 })
61 63
64 +// TODO: 等待数据结构更新，看看怎么判断必填
65 +// 校验函数返回 true 表示校验通过，false 表示不通过
66 +const validator = (val) => {
67 + if (!val) {
68 + return false;
69 + } else {
70 + return true;
71 + }
72 +};
73 +// 错误提示文案
74 +const validatorMessage = (val, rule) => {
75 + if (!val) {
76 + return "补充信息不能为空";
77 + }
78 +};
79 +const rules = [{ validator, message: validatorMessage }];
80 +
62 const emit = defineEmits(["active"]); 81 const emit = defineEmits(["active"]);
63 const radio_value = ref(props.item.component_props.default); 82 const radio_value = ref(props.item.component_props.default);
64 const affix_value = ref(''); 83 const affix_value = ref('');
...@@ -68,7 +87,7 @@ const onChange = (item) => { ...@@ -68,7 +87,7 @@ const onChange = (item) => {
68 } 87 }
69 const onBlur = (item) => { 88 const onBlur = (item) => {
70 clearAffix() 89 clearAffix()
71 - affix_value.value = item.affix 90 + affix_value.value = `${item.title}: ${item.affix}`
72 // 发送自定义数据结构 91 // 发送自定义数据结构
73 props.item.value = { key: props.item.key, value: radio_value.value, affix: affix_value.value, type: "radio" }; 92 props.item.value = { key: props.item.key, value: radio_value.value, affix: affix_value.value, type: "radio" };
74 emit("active", props.item.value); 93 emit("active", props.item.value);
......
1 <!-- 1 <!--
2 * @Date: 2022-08-29 14:31:20 2 * @Date: 2022-08-29 14:31:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-12-29 11:13:58 4 + * @LastEditTime: 2023-02-01 10:08:34
5 * @FilePath: /data-table/src/components/TextField/index.vue 5 * @FilePath: /data-table/src/components/TextField/index.vue
6 * @Description: 单行文本输入框 6 * @Description: 单行文本输入框
7 --> 7 -->
......