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

自定义表单新增内容

master
于肖磊 2025-06-26 15:54:32 +08:00
parent d59aac6590
commit c80f5219b4
5 changed files with 511 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
pages/form-input/components/form-input/checkbox.vue
View File

@ -2,12 +2,14 @@
<view class="flex-col gap-5">
<checkbox-group :value="form_value" @change="data_change" class="flex-row gap-10 flex-wrap">
<label v-for="item in option_list" :key="item.value">
<checkbox :value="item.value" :checked="!isEmpty(form_value) && form_value.includes(item.value)"><view :style="option_style(item)">{{ item.name }}</view></checkbox>
<checkbox :value="item.value" :checked="!isEmpty(form_value) && form_value.includes(item.value)">
<view :style="is_multicolour == '1' ? 'background:' + item.color + ';color:' + (item.is_other == '1' ? '#141E31' : '#fff') + ';border-radius:8rpx;' + color_style : color_style + 'padding-left:0rpx;padding-right:0rpx;'">{{ item.name }}</view>
</checkbox>
</label>
</checkbox-group>
<view class="add-option flex-row gap-10 align-c" @tap="add_option">
<view v-if="com_data.is_add_option == '1'" class="add-option flex-row gap-10 align-c" @tap="add_option">
<iconfont name="icon-xzdz-tianjiabiaoq" size="14" color="#2a94ff"/>
<view class="size-14 cr-primary">添加选项</view>
<view class="size-14 cr-blue">添加选项</view>
</view>
<!-- 选项弹出框 -->
<uni-popup ref="inputDialog" type="dialog">
@ -48,6 +50,7 @@
option_list: [],
form_value: [],
com_data: {},
color_style: '',
is_multicolour: '0',
dialog_value: '',
custom_option_list: [],
@ -59,17 +62,6 @@
this.init();
},
},
computed: {
option_style() {
return (item) => {
if (this.is_multicolour == '1') {
return `background:${ item.color };color:${ item.is_other == '1' ? '#141E31' : '#fff'};border-radius:8rpx;${ this.get_color_style }`;
} else {
return `${ this.get_color_style }padding-left:0rpx;padding-right:0rpx;`;
}
}
}
},
mounted() {
this.init();
},
@ -80,7 +72,7 @@
this.setData({
com_data: com_data,
is_multicolour: com_data.is_multicolour,
get_color_style: get_color_style(this.propMobile),
color_style: get_color_style(this.propMobile),
custom_option_list: com_data?.custom_option_list || [],
option_list: com_data?.option_list.concat(com_data?.custom_option_list || []) || [],
form_value: com_data?.form_value || [],
@ -125,7 +117,7 @@
form_value: e.detail.value,
});
this.$emit('dataChange', { value: e.detail.value, index: this.propDataIndex });
}
},
}
}
</script>

36
pages/form-input/components/form-input/form-input.vue
View File

@ -1,6 +1,6 @@
<template>
<view class="re oh wh-auto ht-auto">
<scroll-view :scroll-y="true" class="scroll-box" lower-threshold="60" scroll-with-animation="true">
<scroll-view :scroll-y="true" class="scroll-box" scroll-with-animation="true">
<view class="abs w h" :style="content_style">
<template v-if="!isEmpty(img_url)">
<image :src="img_url" mode="aspectFit" />
@ -19,22 +19,25 @@
</view>
</view>
<view class="flex-1 wh-auto flex-col gap-5">
<view v-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'single-text'" class="wh-auto" :style="get_form_border_style(item.com_data.common_config, flex_direction)">
<view v-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'single-text'" class="wh-auto" :style="item.com_data.common_style">
<componentInput :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentInput>
</view>
<view v-if="item.key == 'multi-text'" class="wh-auto" :style="get_form_border_style(item.com_data.common_config, flex_direction) + 'padding: 18rpx 8rpx;'">
<view v-else-if="item.key == 'multi-text'" class="wh-auto" :style="item.com_data.common_style + 'padding: 18rpx 8rpx;'">
<componentTextarea :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentTextarea>
</view>
<view v-if="item.key == 'checkbox'" class="wh-auto">
<view v-else-if="['select-multi', 'checkbox'].includes(item.key) && item.com_data.type == 'checkbox'" class="wh-auto">
<componentCheckbox :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change" @data_option_change="data_option_change"></componentCheckbox>
</view>
<view v-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'radio-btns'" class="wh-auto">
<view v-else-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'radio-btns'" class="wh-auto">
<componentRadio :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentRadio>
</view>
<view v-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'select'" class="wh-auto">
<componentSelect :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentSelect>
<view v-else-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'select'" class="wh-auto" :style="item.com_data.common_style">
<componentSelect :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propDirection="flex_direction" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentSelect>
</view>
<view v-if="item.key == 'number'" class="wh-auto" :style="get_form_border_style(item.com_data.common_config, flex_direction) + 'padding: 18rpx 8rpx;'">
<view v-else-if="['select-multi', 'checkbox'].includes(item.key) && item.com_data.type == 'select-multi'" class="wh-auto" :style="item.com_data.common_style">
<componentSelectMulti :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propDirection="flex_direction" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change" @data_option_change="data_option_change"></componentSelectMulti>
</view>
<view v-else-if="item.key == 'number'" class="wh-auto" :style="item.com_data.common_style">
<componentNumber :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentNumber>
</view>
<view v-if="!isEmpty(item.com_data.common_config.error_text)" class="field-invalid-info">{{ item.com_data.common_config.error_text }}</view>
@ -71,6 +74,7 @@ import componentCheckbox from '@/pages/form-input/components/form-input/checkbox
import componentRadio from '@/pages/form-input/components/form-input/radio.vue';
import componentSelect from '@/pages/form-input/components/form-input/select.vue';
import componentNumber from '@/pages/form-input/components/form-input/number.vue';
import componentSelectMulti from '@/pages/form-input/components/form-input/select-multi.vue';
export default {
name: 'diy',
components: {
@ -80,6 +84,7 @@ export default {
componentRadio,
componentNumber,
componentSelect,
componentSelectMulti,
},
props: {
propValue: {
@ -121,14 +126,6 @@ export default {
this.init();
},
},
computed: {
// 获取表单数据
get_form_border_style() {
return (item, flex_direction) => {
return flex_direction == 'row' ? '' : common_form_styles_computer(item) + 'padding: 0px 8rpx;';
};
},
},
mounted() {
this.init();
},
@ -140,6 +137,10 @@ export default {
// 公共配置信息
const overall_config = data.config?.overall_config || {};
const mobile = overall_config?.style_settings?.mobile || {};
data.config.diy_data.forEach(item => {
// 边框样式处理
item.com_data.common_style = this.get_form_border_style(item.com_data.common_config, mobile.flex_direction || 'row');
});
this.setData({
data_list: data.config.diy_data,
form_name: data.name,
@ -157,6 +158,9 @@ export default {
field_label_style: `${ mobile.flex_direction == 'column'? 'justify-content:flex-start;' : `width:${ mobile.filed_title_width * 2 }rpx;justify-content: ${ mobile.filed_title_justification };` }`,
});
},
get_form_border_style(item, flex_direction) {
return flex_direction == 'row' ? '' : common_form_styles_computer(item) + 'padding: 0px 8rpx;';
},
data_check(e) {
const { is_error, error_text, value, index } = e;
const data = this.data_list;

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

@ -1,7 +1,9 @@
<template>
<radio-group :value="form_value" @change="data_change" class="flex-row gap-10 flex-wrap">
<label v-for="item in option_list" :key="item.value">
<radio :value="item.value" :checked="!isEmpty(form_value) && form_value.includes(item.value)"><view :style="option_style(item)">{{ item.name }}</view></radio>
<radio :value="item.value" :checked="!isEmpty(form_value) && form_value.includes(item.value)">
<view :style="is_multicolour == '1' ? 'background:' + item.color + ';color:' + (item.is_other == '1' ? '#141E31' : '#fff') + ';border-radius:8rpx;' + color_style : color_style + 'padding-left:0rpx;padding-right:0rpx;'">{{ item.name }}</view>
</radio>
</label>
</radio-group>
</template>
@ -34,6 +36,7 @@
option_list: [],
form_value: [],
com_data: {},
color_style: '',
is_multicolour: '0',
dialog_value: '',
};
@ -44,17 +47,6 @@
this.init();
},
},
computed: {
option_style() {
return (item) => {
if (this.is_multicolour == '1') {
return `background:${ item.color };color:${ item.is_other == '1' ? '#141E31' : '#fff'};border-radius:8rpx;${ this.get_color_style }`;
} else {
return `${ this.get_color_style }padding-left:0rpx;padding-right:0rpx;`;
}
}
}
},
mounted() {
this.init();
},
@ -65,7 +57,7 @@
this.setData({
com_data: com_data,
is_multicolour: com_data.is_multicolour,
get_color_style: get_color_style(this.propMobile),
color_style: get_color_style(this.propMobile),
option_list: com_data?.option_list || [],
form_value: com_data?.form_value || [],
});
@ -80,7 +72,7 @@
form_value: e.detail.value,
});
this.$emit('dataChange', { value: e.detail.value, index: this.propDataIndex });
}
},
}
}
</script>

318
pages/form-input/components/form-input/select-multi.vue Normal file
View File

@ -0,0 +1,318 @@
<template>
<view class="wh-auto">
<view class="flex-row align-c wh-auto gap-10" :style="propStyle" @tap="data_value_event">
<view class="flex-1 oh">
<template v-if="isEmpty(form_value)"><view class="placeholder">{{ placeholder }}</view></template>
<template v-else>
<view :class="'flex-row align-c' + (is_multicolour == '1' ? ' gap-10' : '')">
<view class="text-size-sm nowrap" v-for="(item, index) in form_value_data" :style="is_multicolour == '1' ? 'background:' + item.color + ';color:' + (item.is_other == '1' ? '#141E31' : '#fff') + ';border-radius:8rpx;' + color_style : color_style + 'padding-left:0rpx;padding-right:0rpx;'">{{ item.name || item.value }}{{ index != form_value_data.length - 1 && is_multicolour !== '1' ? ',' : ''}}</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>
<iconfont name="icon-arrow-bottom" size="24rpx" color="#666" propContainerDisplay="flex" ></iconfont>
</template>
</view>
<!-- 弹窗 -->
<component-popup :propShow="popup_status" propPosition="bottom" @onclose="quick_close_event">
<view class="padding-horizontal-main padding-top-main bg-white popup-content flex-col">
<!-- 头部的样式 -->
<view class="flex-row jc-sb margin-bottom">
<view class="text-size-sm cr-blue" @tap="quick_close_event">取消</view>
<view class="text-size-sm cr-blue" @tap="data_change">确定</view>
</view>
<!-- 内容区域的样式 -->
<view class="flex-1 flex-col gap-10">
<view class="flex-row popup-search align-c gap-10">
<iconfont name="icon-search" size="32rpx" color="#666" propContainerDisplay="flex"></iconfont>
<input :value="popup_search_value" class="uni-input flex-1" type="text" placeholder="搜索(多个关键字用空格隔开)" @input="search_input" />
</view>
<template v-if="new_option_list.length > 0">
<view :class="'flex-col gap-10 mt-10' + ( com_data.is_add_option == '1' ? 'popup-add-list' : 'popup-list')">
<checkbox-group :value="select_value" @change="data_all_change" class="flex-col gap-10">
<label class="popup-checkbox">
<checkbox value="all" :checked="select_value == 'all'"><view :style="color_style + 'padding-left:0rpx;padding-right:0rpx;'">全选</view></checkbox>
</label>
</checkbox-group>
<checkbox-group :value="popup_list" @change="data_checkbox_change" class="flex-col gap-10">
<label v-for="item in new_option_list" class="popup-checkbox" :key="item.value">
<checkbox :value="item.value" :checked="!isEmpty(popup_list) && popup_list.includes(item.value)">
<view :style="is_multicolour == '1' ? 'background:' + item.color + ';color:' + (item.is_other == '1' ? '#141E31' : '#fff') + ';border-radius:8rpx;' + color_style : color_style + 'padding-left:0rpx;padding-right:0rpx;'">{{ item.name }}</view>
</checkbox>
</label>
</checkbox-group>
</view>
</template>
<template v-else>
<view class="flex-1 flex-row align-c jc-c">
<view class="text-size-sm cr-grey">暂无数据</view>
</view>
</template>
</view>
<view v-if="com_data.is_add_option == '1'" class="add-option flex-row gap-10 align-c" @tap="add_option">
<iconfont name="icon-xzdz-tianjiabiaoq" size="14" color="#2a94ff"/>
<view class="size-14 cr-blue">添加选项</view>
</view>
</view>
</component-popup>
<!-- 选项弹出框 -->
<uni-popup ref="inputDialog" type="dialog">
<uni-popup-dialog ref="inputClose" mode="input" title="输入内容" :value="dialog_value" before-close placeholder="请输入内容" @close="dialog_input_close" @confirm="dialog_input_confirm"></uni-popup-dialog>
</uni-popup>
<!-- 失败提示 -->
<uni-popup ref="message" type="message">
<uni-popup-message type="error" message="选项名称不能为空" :duration="2000"></uni-popup-message>
</uni-popup>
</view>
</template>
<script>
import { get_format_checks, isEmpty, get_color_style, color_change } from '@/common/js/common/common.js';
import componentPopup from '@/components/popup/popup';
export default {
name: 'diy',
components: {
componentPopup,
},
props: {
propValue: {
type: Object,
default: () => ({}),
},
propKey: {
type: [String, Number],
default: 0,
},
propDataIndex: {
type: Number,
default: 0,
},
propStyle: {
type: String,
default: '',
},
propMobile: {
type: Object,
default: () => ({}),
},
propDirection: {
type: String,
default: 'row',
}
},
data() {
return {
placeholder: '请输入内容...',
form_value: '',
com_data: {},
popup_status: false,
is_multicolour: '0',
option_list: [],
popup_search_value: '',
color_style: '',
select_value: '',
form_value_data: {},
popup_list: [],
dialog_value: '',
};
},
watch: {
propValue(val) {
// 初始化
this.init();
},
propKey(val) {
// 初始化
this.init();
},
},
computed: {
new_option_list() {
if (!isEmpty(this.popup_search_value)) {
const inputValue = this.popup_search_value.split(' ').filter(item => item !== '');
return this.option_list.filter((item) => inputValue.some(keyword => item.name.includes(keyword)));
} else {
return this.option_list;
}
},
},
mounted() {
this.init();
},
methods: {
isEmpty,
init() {
const com_data = this.propValue;
// 取出选择的中文名称和内容
const data = com_data?.option_list.filter(item => com_data?.form_value.includes(item.value));
let form_value_data = [];
if (!isEmpty(data)) {
form_value_data = data;
}
this.setData({
com_data: com_data,
is_multicolour: com_data.is_multicolour,
placeholder: com_data?.placeholder || '请输入内容...',
option_list: com_data?.option_list.concat(com_data?.custom_option_list || []) || [],
custom_option_list: com_data?.custom_option_list || [],
color_style: get_color_style(this.propMobile),
form_value: com_data?.form_value || '',
form_value_data: form_value_data,
});
},
data_check(e) {
const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, e.detail.value);
this.$emit('dataCheck', { is_error, error_text, value: e.detail.value, index: this.propDataIndex });
},
/**
* 下拉框选择事件
*/
data_value_event() {
const count = this.new_option_list.reduce((acc, item) => this.form_value.includes(item.value) ? acc + 1 : acc, 0);
this.setData({
select_value: count == this.new_option_list.length ? ['all'] : '',
popup_list: this.form_value,
popup_status: true,
});
},
add_option() {
this.setData({
dialog_value: '',
})
this.$refs.inputDialog.open();
},
dialog_input_confirm(val) {
if (!isEmpty(val)) {
const value = 'option' + get_math();
const data = {
name: val,
value: value,
color: color_change(this.option_list.length - 1),
};
this.setData({
option_list: [...this.option_list, data],
popup_list: [...this.popup_list, value],
custom_option_list: [...this.custom_option_list, data],
dialog_value: '',
});
this.$refs.inputDialog.close();
this.$emit('data_option_change', { list: custom_option_list, value: this.form_value, index: this.propDataIndex });
} else {
this.$refs.message.open();
}
},
dialog_input_close() {
this.$refs.inputDialog.close();
},
/**
* 快速关闭事件
*/
quick_close_event() {
this.setData({
popup_status: false,
});
},
/**
* 搜索事件
* @param {*} e
*/
search_input(e) {
let list = this.option_list;
if (!isEmpty(this.popup_search_value)) {
const inputValue = this.popup_search_value.split(' ').filter(item => item !== '');
list = this.option_list.filter((item) => inputValue.some(keyword => item.name.includes(keyword)));
}
const count = list.reduce((acc, item) => this.popup_list.includes(item.value) ? acc + 1 : acc, 0);
// 搜索
this.setData({
select_value: count == list.length ? ['all'] : '',
popup_search_value: e.detail.value,
});
},
data_all_change(e) {
const selectAll = e.detail.value.includes('all');
let val = selectAll ? this.option_list.map((item) => item.value) : [];
if (!isEmpty(this.popup_search_value)) {
// 判断有多少个符合筛选条件的数据
const option_list_value = this.new_option_list.map((item) => item.value);
val = selectAll ? this.popup_list.concat(option_list_value) : this.popup_list.filter((item) => !option_list_value.includes(item))
}
this.setData({
select_value: e.detail.value,
popup_list: val,
});
},
data_checkbox_change(e) {
// 取出当前搜索到的数据
const data = this.new_option_list.map(item => item.value);
// 历史选中的去除当前搜索出来的数据
const new_data = this.popup_list.filter(item => !data.includes(item));
// 然后将两个数据进行合并得到所有选中的值
const val = new_data.concat(e.detail.value);
const count = this.new_option_list.reduce((acc, item) => val.includes(item.value) ? acc + 1 : acc, 0);
this.setData({
select_value: count == this.new_option_list.length ? ['all'] : '',
popup_list: val,
});
},
/**
* 点击弹出框的确定事件
*/
data_change() {
// 取出选择的中文名称和内容
const data = this.option_list.filter(item => this.popup_list.includes(item.value));
let form_value_data = [];
if (!isEmpty(data)) {
form_value_data = data;
}
// 重新编辑一下历史数据
this.setData({
form_value: this.popup_list,
popup_status: false,
form_value_data: form_value_data,
});
this.$emit('dataChange', { value: this.popup_list, index: this.propDataIndex });
}
}
}
</script>
<style lang="scss" scoped>
.placeholder {
color: gray;
}
.popup-content {
height: 800rpx;
}
.popup-search {
background: #f5f6f8;
border-radius: 32rpx;
padding: 0 20rpx;
.uni-input {
height: 64rpx;
}
}
.popup-checkbox {
padding: 0 0 20rpx 0;
border-bottom: 2rpx solid #f5f6f8;
}
::v-deep .uni-radio-input {
transform: scale(0.7);
}
.add-option {
height: 80rpx;
}
.popup-add-list {
max-height: 580rpx;
overflow: hidden;
overflow-y: auto;
}
.popup-list {
max-height: 640rpx;
overflow: hidden;
overflow-y: auto;
}
</style>

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

@ -1,11 +1,64 @@
<template>
<view class="flex-row align-c wh-auto" :style="propStyle"></view>
<view class="wh-auto">
<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">{{ placeholder }}</view></template>
<template v-else>
<view class="flex-row align-c">
<view class="text-size-sm" :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>
<iconfont name="icon-arrow-bottom" size="24rpx" color="#666" propContainerDisplay="flex" ></iconfont>
</template>
</view>
<!-- 弹窗 -->
<component-popup :propShow="popup_status" propPosition="bottom" @onclose="quick_close_event">
<view class="padding-horizontal-main padding-top-main bg-white popup-content flex-col gap-10">
<!-- 头部的样式 -->
<view class="flex-row jc-sb">
<view class="text-size-sm cr-blue" @tap="quick_close_event">取消</view>
</view>
<!-- 内容区域的样式 -->
<view class="flex-1 flex-col gap-10">
<view class="flex-row popup-search align-c gap-10">
<iconfont name="icon-search" size="32rpx" color="#666" propContainerDisplay="flex"></iconfont>
<input :value="popup_search_value" class="uni-input flex-1" type="text" placeholder="搜索(多个关键字用空格隔开)" @input="search_input" />
</view>
<template v-if="new_option_list.length > 0">
<view class="flex-col gap-10 mt-10 popup-list">
<radio-group :value="form_value" @change="data_change" class="flex-col gap-10">
<label v-for="item in new_option_list" class="popup-radio" :key="item.value">
<radio :value="item.value" :checked="!isEmpty(form_value) && form_value == item.value">
<view :style="is_multicolour == '1' ? 'background:' + item.color + ';color:' + (item.is_other == '1' ? '#141E31' : '#fff') + ';border-radius:8rpx;' + color_style : color_style + 'padding-left:0rpx;padding-right:0rpx;'">{{ item.name }}</view>
</radio>
</label>
</radio-group>
</view>
</template>
<template v-else>
<view class="flex-1 flex-row align-c jc-c">
<view class="text-size-sm cr-grey">暂无数据</view>
</view>
</template>
</view>
</view>
</component-popup>
</view>
</template>
<script>
import { get_format_checks, isEmpty } from '@/common/js/common/common.js';
import { get_format_checks, isEmpty, get_color_style } from '@/common/js/common/common.js';
import componentPopup from '@/components/popup/popup';
export default {
name: 'diy',
components: {
componentPopup,
},
props: {
propValue: {
type: Object,
@ -22,6 +75,14 @@
propStyle: {
type: String,
default: '',
},
propMobile: {
type: Object,
default: () => ({}),
},
propDirection: {
type: String,
default: 'row',
}
},
data() {
@ -29,15 +90,34 @@
placeholder: '请输入内容...',
form_value: '',
com_data: {},
max_length: '-1'
popup_status: false,
is_multicolour: '0',
option_list: [],
popup_search_value: '',
color_style: '',
form_value_data: {},
};
},
watch: {
propValue(val) {
// 初始化
this.init();
},
propKey(val) {
// 初始化
this.init();
},
},
computed: {
new_option_list() {
if (!isEmpty(this.popup_search_value)) {
const inputValue = this.popup_search_value.split(' ').filter(item => item !== '');
return this.option_list.filter((item) => inputValue.some(keyword => item.name.includes(keyword)));
} else {
return this.option_list;
}
},
},
mounted() {
this.init();
},
@ -45,21 +125,68 @@
isEmpty,
init() {
const com_data = this.propValue;
// 取出选择的中文名称和内容
const data = com_data?.option_list.find(item => item.value == com_data?.form_value);
let form_value_data = {};
if (!isEmpty(data)) {
form_value_data = data;
}
this.setData({
com_data: com_data,
max_length: com_data.is_limit_num == '1' && !isEmpty(com_data.max_num) ? com_data.max_num : '-1',
is_multicolour: com_data.is_multicolour,
placeholder: com_data?.placeholder || '请输入内容...',
form_value: com_data?.form_value || '',
option_list: com_data?.option_list || [],
color_style: get_color_style(this.propMobile),
form_value: com_data?.form_value || '',
form_value_data: form_value_data,
});
},
data_check(e) {
const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, e.detail.value);
this.$emit('dataCheck', { is_error, error_text, value: e.detail.value, index: this.propDataIndex });
},
input_value_event(e) {
/**
* 下拉框选择事件
*/
data_value_event() {
this.setData({
popup_status: true,
});
},
/**
* 快速关闭事件
*/
quick_close_event() {
this.setData({
popup_status: false,
});
},
/**
* 搜索事件
* @param {*} e
*/
search_input(e) {
// 搜索
this.setData({
popup_search_value: e.detail.value,
});
},
/**
* 输入事件
* @param {*} e
*/
data_change(e) {
// 取出选择的中文名称和内容
const data = this.new_option_list.find(item => item.value == e.detail.value);
let form_value_data = {};
if (!isEmpty(data)) {
form_value_data = data;
}
// 重新编辑一下历史数据
this.setData({
form_value: e.detail.value,
popup_status: false,
form_value_data: form_value_data,
});
this.$emit('dataChange', { value: e.detail.value, index: this.propDataIndex });
}
@ -68,7 +195,30 @@
</script>
<style lang="scss" scoped>
.input-limit-num {
margin-left: 20rpx;
}
.placeholder {
color: gray;
}
.popup-content {
height: 800rpx;
}
.popup-search {
background: #f5f6f8;
border-radius: 32rpx;
padding: 0 20rpx;
.uni-input {
height: 64rpx;
}
}
.popup-radio {
padding: 0 0 20rpx 0;
border-bottom: 2rpx solid #f5f6f8;
}
::v-deep .uni-radio-input {
transform: scale(0.7);
}
.popup-list {
max-height: 660rpx;
overflow: hidden;
overflow-y: auto;
}
</style>