sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改其他参数的传递逻辑

master
于肖磊 2025-07-31 15:55:10 +08:00
parent da3dde4130
commit 6f7c104f20
3 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
pages/form-input/components/form-input/form-input-base.vue
View File

@ -23,11 +23,11 @@
</view>
<!-- 单选按钮组 -->
<view v-else-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'radio-btns' && flex_direction !== 'row'">
<component-radio :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change" @dataOuterChange="data_outer_change" @dataOuterCheck="data_outer_check"></component-radio>
<component-radio :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="mobile" :propStyle="component_style + item.com_data.common_style" @dataCheck="data_check" @dataChange="data_change" @dataOtherChange="data_other_change" @dataOtherCheck="data_other_check"></component-radio>
</view>
<!-- 下拉框 -->
<view v-else-if="(['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'select') || (['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'radio-btns' && flex_direction == 'row')" :style="item.com_data.common_style">
<component-select :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="mobile" :propDirection="flex_direction" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change" @zIndexChange="z_index_change" @dataOuterChange="data_outer_change" @dataOuterCheck="data_outer_check"></component-select>
<view v-else-if="(['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'select') || (['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'radio-btns' && flex_direction == 'row')">
<component-select :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="mobile" :propDirection="flex_direction" :propStyle="component_style" :propCommonStyle="item.com_data.common_style" @dataCheck="data_check" @dataChange="data_change" @zIndexChange="z_index_change" @dataOtherChange="data_other_change" @dataOtherCheck="data_other_check"></component-select>
</view>
<!-- 下拉复选框 -->
<view v-else-if="(['select-multi', 'checkbox'].includes(item.key) && item.com_data.type == 'select-multi') || (['select-multi', 'checkbox'].includes(item.key) && item.com_data.type == 'checkbox' && flex_direction == 'row')" :style="item.com_data.common_style">
@ -368,7 +368,7 @@ export default {
com_data.form_value = this.propData[name] || '';
com_data.form_value_code = this.propData[`${ name }_verify`] || '';
} else if (item.key ==='date-group') {
com_data.form_value = [ this.propData[`${ name }`].start || '' , this.propData[`${ name }`].end || ''] || [];
com_data.form_value = [ this.propData[`${ name }_start`] || '' , this.propData[`${ name }_end`] || ''] || [];
} else if (item.key == 'address') {
com_data.province_id = this.propData[`${ name }_province_id`] || '';
com_data.city_id = this.propData[`${ name }_city_id`] || '';
@ -444,13 +444,13 @@ export default {
/*
* 其他的备注信息修改
*/
data_outer_change(e) {
data_other_change(e) {
const { value, id } = e;
// 改变对应id的数据
const data = [...this.data_list];
data.forEach(item => {
if (item.id == id && item.com_data) {
item.com_data.outer_value = value;
item.com_data.other_value = value;
}
});
this.setData({ data_list: data });
@ -478,13 +478,13 @@ export default {
/*
* 其他的值修改后校验的数据更新
*/
data_outer_check(e) {
data_other_check(e) {
const { is_error, error_text, value, id } = e;
// 改变对应id的数据
const data = [...this.data_list];
data.forEach(item => {
if (item.id == id && item.com_data && item.com_data.common_config) {
item.com_data.outer_value = value
item.com_data.other_value = value
item.com_data.common_config.is_error = is_error;
item.com_data.common_config.error_text = error_text;
}
@ -647,7 +647,8 @@ export default {
submit_data[`${ name }_verify`] = com_data?.form_value_code || '';
}
} else if (item.key ==='date-group') {
submit_data[`${ name }`] = { 'start': value[0] || '' , 'end': value[1] || '' } || {};
submit_data[`${ name }_start`] = value[0] || '';
submit_data[`${ name }_end`] = value[1] || '';
} else if (item.key == 'address') {
submit_data[`${ name }_province_id`] = value[0] || '';
submit_data[`${ name }_city_id`] = value[1] || '';
@ -699,9 +700,9 @@ export default {
}
// 其他字段的格式验证
else if (this.fieldCheckMap[item.key]) {
let field_data = this.fieldCheckMap[data_item.key];
if (['single-text', 'select', 'radio-btns'].includes(data_item.com_data.type)) {
field_data = this.fieldCheckMap[data_item.com_data.type];
let field_data = this.fieldCheckMap[item.key];
if (['single-text', 'select', 'radio-btns'].includes(item.com_data.type)) {
field_data = this.fieldCheckMap[item.com_data.type];
}
const { is_format, type } = field_data;
const { is_error = '0', error_text = '' } = get_format_checks(com_data, com_data.form_value, is_format, type);
@ -791,7 +792,8 @@ export default {
submit_data[`${ subform_name }_city_name`] = subform_com_data.city_name || ''
submit_data[`${ subform_name }_county_name`] = subform_com_data.county_name || ''
} else if (item.key ==='date-group') {
submit_data[`${ subform_name }`] = { 'start': value[0] || '' , 'end': value[1] || '' } || {};
submit_data[`${ subform_name }_start`] = subform_value[0] || '';
submit_data[`${ subform_name }_end`] = subform_value[1] || '';
} else if (['checkbox', 'select-multi'].includes(item.key)) {
submit_data[subform_name] = subform_value;
if (subform_com_data.is_add_option == '1') {

18
pages/form-input/components/form-input/radio.vue
View File

@ -9,7 +9,7 @@
</label>
</radio-group>
<template v-if="!isEmpty(option_value) && form_value == option_value">
<input :value="outer_value" class="uni-input flex-1" :style="propStyle" type="text" placeholder="请输入其他内容" placeholder-style="color: gray;" @blur="data_outer_check" @input="input_outer_value_event" />
<input :value="other_value" class="uni-input" :style="propStyle" type="text" placeholder="请输入其他内容" placeholder-style="color: gray;" @blur="data_other_check" @input="input_other_value_event" />
</template>
</view>
</template>
@ -49,7 +49,7 @@
is_multicolour: '0',
dialog_value: '',
option_value: '',
outer_value: '',
other_value: '',
};
},
watch: {
@ -83,22 +83,22 @@
color_style: get_color_style(this.propMobile),
option_list: com_data?.option_list || [],
form_value: com_data?.form_value || [],
outer_value: com_data?.outer_value || '',
other_value: com_data?.other_value || '',
option_value: option_value,
});
},
input_outer_value_event(e) {
input_other_value_event(e) {
this.setData({
outer_value: e.detail.value,
other_value: e.detail.value,
});
// 执行校验逻辑
this.data_outer_check({ detail: { value: this.outer_value } });
this.data_other_check({ detail: { value: this.other_value } });
// 传递参数给父级
this.$emit('dataOuterChange', { value: e.detail.value, id: this.propDataId });
this.$emit('dataOtherChange', { value: e.detail.value, id: this.propDataId });
},
data_outer_check(e) {
data_other_check(e) {
const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, e.detail.value, false, '');
this.$emit('dataOuterCheck', { is_error, error_text, value: e.detail.value, id: this.propDataId });
this.$emit('dataOtherCheck', { is_error, error_text, value: e.detail.value, id: this.propDataId });
},
// 校验逻辑
data_check(e) {

48
pages/form-input/components/form-input/select.vue
View File

@ -1,24 +1,26 @@
<template>
<view class="wh-auto">
<view class="flex-col gap-10">
<view class="flex-row align-c wh-auto" :style="propStyle" @tap="data_value_event">
<view class="flex-1">
<template v-if="isEmpty(form_value)"><view class="placeholder cr-gray text-line-1">{{ placeholder }}</view></template>
<view :style="propCommonStyle" @tap="data_value_event">
<view class="flex-row align-c wh-auto" :style="propStyle">
<view class="flex-1">
<template v-if="isEmpty(form_value)"><view class="placeholder cr-gray text-line-1">{{ placeholder }}</view></template>
<template v-else>
<view class="flex-row align-c">
<view :style="is_multicolour == '1' ? 'background:' + form_value_data.color + ';color:' + (form_value_data.is_other == '1' ? '#141E31' : '#fff') + ';border-radius:8rpx;' + color_style : color_style + 'padding-left:0rpx;padding-right:0rpx;'">{{ form_value_data.name || form_value }}</view>
</view>
</template>
</view>
<template v-if="propDirection == 'row'">
<iconfont name="icon-arrow-right" size="24rpx" color="#666" propContainerDisplay="flex"></iconfont>
</template>
<template v-else>
<view class="flex-row align-c">
<view :style="is_multicolour == '1' ? 'background:' + form_value_data.color + ';color:' + (form_value_data.is_other == '1' ? '#141E31' : '#fff') + ';border-radius:8rpx;' + color_style : color_style + 'padding-left:0rpx;padding-right:0rpx;'">{{ form_value_data.name || form_value }}</view>
</view>
<iconfont name="icon-arrow-bottom" size="24rpx" color="#666" propContainerDisplay="flex" ></iconfont>
</template>
</view>
<template v-if="propDirection == 'row'">
<iconfont name="icon-arrow-right" size="24rpx" color="#666" propContainerDisplay="flex"></iconfont>
</template>
<template v-else>
<iconfont name="icon-arrow-bottom" size="24rpx" color="#666" propContainerDisplay="flex" ></iconfont>
</template>
</view>
<template v-if="!isEmpty(option_value) && form_value == option_value">
<input :value="outer_value" class="uni-input flex-1" :style="propStyle" type="text" placeholder="请输入其他内容" placeholder-style="color: gray;" @blur="data_outer_check" @input="input_outer_value_event" />
<input :value="other_value" class="uni-input" :style="propStyle + propCommonStyle" type="text" placeholder="请输入其他内容" placeholder-style="color: gray;" @blur="data_other_check" @input="input_other_value_event" />
</template>
</view>
<!-- 弹窗 -->
@ -77,6 +79,10 @@
type: String,
default: '',
},
propCommonStyle: {
type: String,
default: '',
},
propMobile: {
type: Object,
default: () => ({}),
@ -98,7 +104,7 @@
color_style: '',
form_value_data: {},
option_value: '',
outer_value: '',
other_value: '',
};
},
watch: {
@ -150,7 +156,7 @@
color_style: get_color_style(this.propMobile),
form_value: com_data?.form_value || '',
form_value_data: form_value_data,
outer_value: com_data?.outer_value || '',
other_value: com_data?.other_value || '',
option_value: option_value,
});
},
@ -206,19 +212,19 @@
this.$emit('dataChange', { value: e.detail.value, id: this.propDataId });
},
// 其他参数内容修改
input_outer_value_event(e) {
input_other_value_event(e) {
this.setData({
outer_value: e.detail.value,
other_value: e.detail.value,
});
// 执行校验逻辑
this.data_outer_check({ detail: { value: this.outer_value } });
this.data_other_check({ detail: { value: this.other_value } });
// 传递参数给父级
this.$emit('dataOuterChange', { value: e.detail.value, id: this.propDataId });
this.$emit('dataOtherChange', { value: e.detail.value, id: this.propDataId });
},
// 其他参数改变
data_outer_check(e) {
data_other_check(e) {
const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, e.detail.value, false, '');
this.$emit('dataOuterCheck', { is_error, error_text, value: e.detail.value, id: this.propDataId });
this.$emit('dataOtherCheck', { is_error, error_text, value: e.detail.value, id: this.propDataId });
},
/**
* 有值的时候就是将当前组件的层级调到最高，没有值的时候就是将当前组件的层级调回原样，避免弹出框出来的时候被其他组件盖住或悬浮在弹出框外部