Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
66dbb5bb 1 parent 8ad836f6

多选框补充输入测试

Inline Side-by-side
Showing 3 changed files with 36 additions and 10 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-01-18 16:21:13 4 + * @LastEditTime: 2023-01-30 12:40:36
5 * @FilePath: /data-table/src/components/CheckboxField/index.vue 5 * @FilePath: /data-table/src/components/CheckboxField/index.vue
6 * @Description: 多项选择控件 6 * @Description: 多项选择控件
7 --> 7 -->
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
19 <template #input> 19 <template #input>
20 <van-checkbox-group 20 <van-checkbox-group
21 v-model="item.value" 21 v-model="item.value"
22 + @change="onChange(item)"
22 :direction="item.component_props.direction" 23 :direction="item.component_props.direction"
23 :max="item.component_props.max" 24 :max="item.component_props.max"
24 style="width: 100%" 25 style="width: 100%"
...@@ -33,6 +34,7 @@ ...@@ -33,6 +34,7 @@
33 style="margin-bottom: 0.25rem" 34 style="margin-bottom: 0.25rem"
34 >{{ x.title }}</van-checkbox 35 >{{ x.title }}</van-checkbox
35 > 36 >
37 + <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" />
36 </van-checkbox-group> 38 </van-checkbox-group>
37 </template> 39 </template>
38 </van-field> 40 </van-field>
...@@ -57,6 +59,18 @@ onMounted(() => { ...@@ -57,6 +59,18 @@ onMounted(() => {
57 const HideShow = computed(() => { 59 const HideShow = computed(() => {
58 return !props.item.component_props.disabled 60 return !props.item.component_props.disabled
59 }) 61 })
62 +// TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。
63 +// 绑定值发生变化时回调，处理选项为其他时的输入项录入
64 +const has_add_info = ref(true); // 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
65 +const add_info = ref('');
66 +const add_info_name = ref(props.item.key + '#');
67 +const add_info_key = ref('其他'); // TODO: 以后动态获取
68 +const onChange = (item) => {
69 + console.warn(item);
70 +}
71 +onMounted(() => {
72 + add_info_name.value = `${props.item.key}#${add_info_key.value}`
73 +})
60 </script> 74 </script>
61 75
62 <style lang="less" scoped> 76 <style lang="less" scoped>
......
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-01-30 11:09:03 4 + * @LastEditTime: 2023-01-30 12:41:51
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,7 +29,7 @@ ...@@ -29,7 +29,7 @@
29 style="margin-bottom: 0.25rem" 29 style="margin-bottom: 0.25rem"
30 >{{ x.title }}</van-radio 30 >{{ x.title }}</van-radio
31 > 31 >
32 - <van-field v-if="has_add_info" :name="item.key + '#other_add_info'" v-model="add_info" label="" placeholder="请输入补充信息" /> 32 + <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" />
33 </van-radio-group> 33 </van-radio-group>
34 </template> 34 </template>
35 </van-field> 35 </van-field>
...@@ -53,13 +53,15 @@ const HideShow = computed(() => { ...@@ -53,13 +53,15 @@ const HideShow = computed(() => {
53 }) 53 })
54 // TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。 54 // TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。
55 // 绑定值发生变化时回调，处理选项为其他时的输入项录入 55 // 绑定值发生变化时回调，处理选项为其他时的输入项录入
56 -const has_add_info = ref(false); // 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断 56 +const has_add_info = ref(true); // 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
57 const add_info = ref(''); 57 const add_info = ref('');
58 +const add_info_name = ref(props.item.key + '#');
59 +const add_info_key = ref('其他'); // TODO: 以后动态获取
58 const onChange = (item) => { 60 const onChange = (item) => {
59 console.warn(item); 61 console.warn(item);
60 } 62 }
61 onMounted(() => { 63 onMounted(() => {
62 - // props.item.value = '120' 64 + add_info_name.value = `${props.item.key}#${add_info_key.value}`
63 }) 65 })
64 </script> 66 </script>
65 67
......
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: 2023-01-30 11:07:51 4 + * @LastEditTime: 2023-01-30 12:39:07
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -362,11 +362,21 @@ const validOther = () => { ...@@ -362,11 +362,21 @@ const validOther = () => {
362 const preValidData = (values) => { 362 const preValidData = (values) => {
363 // 过滤掉标识为 ignore，undefined 的字段数据 363 // 过滤掉标识为 ignore，undefined 的字段数据
364 let { ignore, undefined, ...rest_data } = values; 364 let { ignore, undefined, ...rest_data } = values;
365 - // TAG: 处理其他补充消息 365 + // TAG: 处理其他补充消息输入框内容
366 for (const key in rest_data) { 366 for (const key in rest_data) {
367 - if (key.includes('other_add_info')) { 367 + if (key.includes('#')) { // #号为自定义标识
368 - const name = key.split('#')[0]; 368 + const [input_key, input_value] = key.split('#'); // 原始key值标记
369 - rest_data[name] = rest_data[key] 369 + if (typeof rest_data[input_key] === 'object') { // 多选框值为数组
370 + rest_data[input_key].forEach((element, index)=> {
371 + if (element === input_value) { // 标签名等于选择的值
372 + rest_data[input_key][index] = rest_data[key];
373 + }
374 + });
375 + } else { // 单选框值为字符串
376 + if (rest_data[input_key] === input_value) { // 标签名等于选择的值
377 + rest_data[input_key] = rest_data[key];
378 + }
379 + }
370 } 380 }
371 } 381 }
372 // console.warn(postData.value); 382 // console.warn(postData.value);
......