Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a6daac25 1 parent eb95734e

单选多选控件新增补充选项功能完善

Inline Side-by-side
Showing 4 changed files with 112 additions and 49 deletions
<!--
* @Date: 2022-08-30 11:34:19
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-01-30 14:23:30
* @LastEditTime: 2023-02-01 00:19:34
* @FilePath: /data-table/src/components/CheckboxField/index.vue
* @Description: 多项选择控件
-->
......@@ -15,26 +15,33 @@
</span>
</div>
<div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
<van-field :name="item.key" :rules="item.rules" :border="false">
<van-field :rules="item.rules" :border="false">
<template #input>
<van-checkbox-group
v-model="item.value"
@change="onChange(item)"
v-model="checkbox_value"
:direction="item.component_props.direction"
:max="item.component_props.max"
style="width: 100%"
>
<template v-for="x in item.component_props.options" :key="x.title">
<van-checkbox
v-for="x in item.component_props.options"
:key="x.value"
:name="x.value"
@click="onClick(x)"
:name="x.title"
icon-size="1rem"
shape="square"
:checked-color="themeVars.radioColor"
style="margin-bottom: 0.25rem"
>{{ x.title }}</van-checkbox
>
<van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem;" />
<van-field
v-if="checkbox_value.includes(x.value)"
@blur="onBlur(x)"
v-model="x.affix"
label=""
placeholder="请输入补充信息"
style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem;"
/>
</template>
</van-checkbox-group>
</template>
</van-field>
......@@ -59,17 +66,34 @@ onMounted(() => {
const HideShow = computed(() => {
return !props.item.component_props.disabled
})
// TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。
// 绑定值发生变化时回调，处理选项为其他时的输入项录入
const has_add_info = ref(true); // TODO: 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
const add_info = ref('');
const add_info_name = ref(props.item.key + '#');
const add_info_key = ref('其他'); // TODO: 以后动态获取
const onChange = (item) => {
console.warn(item);
const emit = defineEmits(["active"]);
const checkbox_value = ref(props.item.component_props.default);
const affix_value = ref({});
const onClick = (item) => {
item.checked = !item.checked;
handleEmit(item)
}
const onBlur = (item) => {
handleEmit(item)
}
const handleEmit = (item) => {
// 选中状态添加属性
if (item.checked) {
affix_value.value[item.value] = item.affix
} else {
// 为选中删除属性
delete affix_value.value[item.value]
}
// 发送自定义数据结构
props.item.value = { key: props.item.key, value: checkbox_value.value, affix: affix_value.value, type: "checkbox" };
emit("active", props.item.value);
}
onMounted(() => {
add_info_name.value = `${props.item.key}#${add_info_key.value}`
// 发送自定义数据结构
props.item.value = { key: props.item.key, value: checkbox_value.value, affix: affix_value.value, type: "checkbox" };
emit("active", props.item.value);
})
</script>
......
<!--
* @Date: 2022-08-30 11:34:19
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-01-30 14:22:57
* @LastEditTime: 2023-01-31 23:22:38
* @FilePath: /data-table/src/components/RadioField/index.vue
* @Description: 单项选择控件
-->
......@@ -12,24 +12,31 @@
}}<span v-if="item.component_props.required">&nbsp;*</span>
</div>
<div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
<van-field :name="item.key" :rules="item.rules">
<van-field :rules="item.rules">
<template #input>
<van-radio-group
@change="onChange(item)"
v-model="item.value"
v-model="radio_value"
:direction="item.component_props.direction"
style="width: 100%"
>
<template v-for="x in item.component_props.options" :key="x.value">
<van-radio
v-for="x in item.component_props.options"
:key="x.value"
:name="x.value"
icon-size="1rem"
:checked-color="themeVars.radioColor"
style="margin-bottom: 0.25rem"
>{{ x.title }}</van-radio
>
<van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem;" />
<van-field
v-if="radio_value === x.value"
@blur="onBlur(x)"
v-model="x.affix"
label=""
placeholder="请输入补充信息"
style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem;"
/>
</template>
</van-radio-group>
</template>
</van-field>
......@@ -51,17 +58,34 @@ const themeVars = {
const HideShow = computed(() => {
return !props.item.component_props.disabled
})
// TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。
// 绑定值发生变化时回调，处理选项为其他时的输入项录入
const has_add_info = ref(true); // TODO: 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
const add_info = ref('');
const add_info_name = ref(props.item.key + '#');
const add_info_key = ref('其他'); // TODO: 以后动态获取
const emit = defineEmits(["active"]);
const radio_value = ref(props.item.component_props.default);
const affix_value = ref('');
const onChange = (item) => {
console.warn(item);
clearAffix()
}
const onBlur = (item) => {
clearAffix()
affix_value.value = item.affix
// 发送自定义数据结构
props.item.value = { key: props.item.key, value: radio_value.value, affix: affix_value.value, type: "radio" };
emit("active", props.item.value);
}
const clearAffix = () => {
const options = props.item.component_props.options;
// 为选中项目的补充清空
options.forEach(element => {
if (element.value !== radio_value.value) {
element.affix = ''
}
});
}
onMounted(() => {
add_info_name.value = `${props.item.key}#${add_info_key.value}`
// 发送自定义数据结构
props.item.value = { key: props.item.key, value: radio_value.value, affix: affix_value.value, type: "radio" };
emit("active", props.item.value);
})
</script>
......
<!--
* @Date: 2022-09-08 15:47:54
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-12-28 18:51:11
* @LastEditTime: 2023-01-31 22:57:40
* @FilePath: /data-table/src/components/RatePickerField/index.vue
* @Description: 评分选择控件
-->
......
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-01-30 12:39:07
* @LastEditTime: 2023-02-01 00:19:00
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
......@@ -287,6 +287,20 @@ const onActive = (item) => {
if (item.type === "rate") {
postData.value = _.assign(postData.value, { [item.key]: item.value });
}
if (item.type === "radio") {
postData.value = _.assign(postData.value, { [item.key]: item.affix ? item.affix : item.value });
}
if (item.type === "checkbox") {
const checkbox_value = _.cloneDeep(item.value)
checkbox_value.forEach((element, index) => {
for (const key in item.affix) {
if (item.affix[key] && element === key) {
checkbox_value[index] = item.affix[key]
}
}
});
postData.value = _.assign(postData.value, { [item.key]: checkbox_value });
}
};
// 检验没有绑定name的输入项
......@@ -363,22 +377,23 @@ const preValidData = (values) => {
// 过滤掉标识为 ignore，undefined 的字段数据
let { ignore, undefined, ...rest_data } = values;
// TAG: 处理其他补充消息输入框内容
for (const key in rest_data) {
if (key.includes('#')) { // #号为自定义标识
const [input_key, input_value] = key.split('#'); // 原始key值标记
if (typeof rest_data[input_key] === 'object') { // 多选框值为数组
rest_data[input_key].forEach((element, index)=> {
if (element === input_value) { // 标签名等于选择的值
rest_data[input_key][index] = rest_data[key];
}
});
} else { // 单选框值为字符串
if (rest_data[input_key] === input_value) { // 标签名等于选择的值
rest_data[input_key] = rest_data[key];
}
}
}
}
// for (const key in rest_data) {
// if (key.includes('#')) { // #号为自定义标识
// const [input_key, input_value] = key.split('#'); // 原始key值标记
// if (typeof rest_data[input_key] === 'object') { // 多选框值为数组
// rest_data[input_key].forEach((element, index)=> {
// if (element === input_value) { // 标签名等于选择的值
// // rest_data[input_key][index] = rest_data[key] ? rest_data[key] : input_value;
// rest_data[input_key][index] = rest_data[key];
// }
// });
// } else { // 单选框值为字符串
// if (rest_data[input_key] === input_value) { // 标签名等于选择的值
// rest_data[input_key] = rest_data[key] ? rest_data[key] : input_value;
// }
// }
// }
// }
// console.warn(postData.value);
// 合并自定义字段到提交表单字段
return _.assign(postData.value, rest_data);
......