Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
79e5a458 1 parent 09a399dc

✨ feat(下拉控件): 自定义表单项钩子函数改造

Inline Side-by-side
Showing 3 changed files with 86 additions and 54 deletions
1 +<!--
2 + * @Date: 2023-03-29 14:55:46
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-03-29 15:05:01
5 + * @FilePath: /data-table/src/components/PickerField/MyComponent.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div style="width: 100%;">
10 + <van-field
11 + v-model="picker_value"
12 + is-link
13 + readonly
14 + :name="props.key"
15 + :required="props.component_props.required"
16 + :placeholder="props.component_props.placeholder"
17 + @click="showPicker = true"
18 + :border="false"
19 + />
20 + <!-- <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" :border="false" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-top: 0.25rem;" /> -->
21 + <van-popup v-model:show="showPicker" position="bottom">
22 + <van-picker
23 + :columns="props.component_props.options"
24 + @confirm="onConfirm"
25 + @cancel="showPicker = false"
26 + />
27 + </van-popup>
28 + </div>
29 +</template>
30 +
31 +<script setup>
32 +import { ref } from 'vue'
33 +import { useCustomFieldValue } from '@vant/use';
34 +
35 +// 获取父组件传值
36 +const props = inject('props');
37 +
38 +const showPicker = ref(false);
39 +const picker_value = ref(props.component_props.default);
40 +
41 +const onConfirm = ({ selectedOptions }) => {
42 + picker_value.value = selectedOptions[0]?.value;
43 + showPicker.value = false;
44 + // 触发点自定义监听事件，配合规则显示隐藏其他字段
45 + // props.item.value = { key: props.item.key, value: picker_value.value, type: "picker" };
46 + // emit("active", props.item.value);
47 + // if (add_info_key.value === props.item.value) {
48 + // has_add_info.value = true;
49 + // }
50 +};
51 +
52 +// 此处传入的值会替代 Field 组件内部的 value
53 +useCustomFieldValue(() => picker_value.value);
54 +
55 +// 绑定值发生变化时回调，处理选项为其他时的输入项录入
56 +// const has_add_info = ref(false); // TODO: 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
57 +// const add_info = ref('');
58 +// const add_info_name = ref(props.item.key + '#');
59 +// const add_info_key = ref('其他'); // TODO: 以后动态获取
60 +
61 +// onMounted(() => {
62 + // add_info_name.value = `${props.item.key}#${add_info_key.value}`
63 + // props.item.component_props.options = props.item.component_props.options.map((opt) => {
64 + // return {
65 + // text: opt,
66 + // value: opt,
67 + // };
68 + // });
69 +// });
70 +</script>
71 +
72 +<style lang="less" scoped>
73 +
74 +</style>
1 <!-- 1 <!--
2 * @Date: 2022-08-30 13:46:51 2 * @Date: 2022-08-30 13:46:51
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-03-27 16:55:35 4 + * @LastEditTime: 2023-03-29 15:07:12
5 * @FilePath: /data-table/src/components/PickerField/index.vue 5 * @FilePath: /data-table/src/components/PickerField/index.vue
6 * @Description: 单列选择器组件 6 * @Description: 单列选择器组件
7 --> 7 -->
...@@ -11,68 +11,29 @@ ...@@ -11,68 +11,29 @@
11 <span v-if="item.component_props.required">&nbsp;*</span> 11 <span v-if="item.component_props.required">&nbsp;*</span>
12 {{ item.component_props.label }} 12 {{ item.component_props.label }}
13 </div> 13 </div>
14 - <van-field 14 + <van-field :name="item.name" :rules="item.rules" style="padding: 0;">
15 - v-model="picker_value" 15 + <template #input>
16 - is-link 16 + <my-component />
17 - readonly 17 + </template>
18 - :name="item.key" 18 + </van-field>
19 - :required="item.component_props.required"
20 - :placeholder="item.component_props.placeholder"
21 - :rules="item.rules"
22 - @click="showPicker = true"
23 - :border="false"
24 - />
25 - <!-- <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" :border="false" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-top: 0.25rem;" /> -->
26 - <van-popup v-model:show="showPicker" position="bottom">
27 - <van-picker
28 - :columns="item.component_props.options"
29 - @confirm="onConfirm"
30 - @cancel="showPicker = false"
31 - />
32 - </van-popup>
33 </div> 19 </div>
34 </template> 20 </template>
35 21
36 <script setup> 22 <script setup>
23 +import MyComponent from './MyComponent.vue';
24 +
37 const props = defineProps({ 25 const props = defineProps({
38 item: Object, 26 item: Object,
39 }); 27 });
40 -const emit = defineEmits(["active"]);
41 -
42 -// 绑定值发生变化时回调，处理选项为其他时的输入项录入
43 -// const has_add_info = ref(false); // TODO: 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
44 -// const add_info = ref('');
45 -// const add_info_name = ref(props.item.key + '#');
46 -// const add_info_key = ref('其他'); // TODO: 以后动态获取
47 28
48 -onMounted(() => { 29 +// 注入子组件属性
49 - // add_info_name.value = `${props.item.key}#${add_info_key.value}` 30 +provide('props', props.item);
50 - // props.item.component_props.options = props.item.component_props.options.map((opt) => {
51 - // return {
52 - // text: opt,
53 - // value: opt,
54 - // };
55 - // });
56 -});
57 31
58 -const selectedValues = ref("");
59 -const showPicker = ref(false);
60 -const picker_value = ref(props.item.component_props.default);
61 -
62 -const onConfirm = ({ selectedOptions }) => {
63 - picker_value.value = selectedOptions[0]?.value;
64 - showPicker.value = false;
65 - // 触发点自定义监听事件，配合规则显示隐藏其他字段
66 - props.item.value = { key: props.item.key, value: picker_value.value, type: "picker" };
67 - emit("active", props.item.value);
68 - // if (add_info_key.value === props.item.value) {
69 - // has_add_info.value = true;
70 - // }
71 -};
72 // 隐藏显示 32 // 隐藏显示
73 const HideShow = computed(() => { 33 const HideShow = computed(() => {
74 return !props.item.component_props.disabled 34 return !props.item.component_props.disabled
75 }) 35 })
36 +
76 </script> 37 </script>
77 38
78 <style lang="less" scoped> 39 <style lang="less" scoped>
......
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-03-29 13:19:06 4 + * @LastEditTime: 2023-03-29 15:05:26
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -437,9 +437,6 @@ const onActive = (item) => { ...@@ -437,9 +437,6 @@ const onActive = (item) => {
437 if (item.key === "sign") { 437 if (item.key === "sign") {
438 postData.value[item.filed_name] = item.value; 438 postData.value[item.filed_name] = item.value;
439 } 439 }
440 - if (item.type === "picker") { // 下拉框控件
441 - postData.value = _.assign(postData.value, { [item.key]: item.value });
442 - }
443 if (item.type === "radio") { // 单选控件 440 if (item.type === "radio") { // 单选控件
444 postData.value = _.assign(postData.value, { [item.key]: item.affix ? item.affix : item.value }); 441 postData.value = _.assign(postData.value, { [item.key]: item.affix ? item.affix : item.value });
445 } 442 }
......