From c80f5219b41eac77e24473ebcc5cb60523609f96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 26 Jun 2025 15:54:32 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/form-input/checkbox.vue        |  24 +-
 .../components/form-input/form-input.vue      |  36 +-
 .../components/form-input/radio.vue           |  20 +-
 .../components/form-input/select-multi.vue    | 318 ++++++++++++++++++
 .../components/form-input/select.vue          | 168 ++++++++-
 5 files changed, 511 insertions(+), 55 deletions(-)
 create mode 100644 pages/form-input/components/form-input/select-multi.vue

diff --git a/pages/form-input/components/form-input/checkbox.vue b/pages/form-input/components/form-input/checkbox.vue
index bbf9546a..bc2de08e 100644
--- a/pages/form-input/components/form-input/checkbox.vue
+++ b/pages/form-input/components/form-input/checkbox.vue
@@ -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>
diff --git a/pages/form-input/components/form-input/form-input.vue b/pages/form-input/components/form-input/form-input.vue
index 03b55dde..42fd1268 100644
--- a/pages/form-input/components/form-input/form-input.vue
+++ b/pages/form-input/components/form-input/form-input.vue
@@ -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;
diff --git a/pages/form-input/components/form-input/radio.vue b/pages/form-input/components/form-input/radio.vue
index ffce0c1a..b90ba5ec 100644
--- a/pages/form-input/components/form-input/radio.vue
+++ b/pages/form-input/components/form-input/radio.vue
@@ -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>
diff --git a/pages/form-input/components/form-input/select-multi.vue b/pages/form-input/components/form-input/select-multi.vue
new file mode 100644
index 00000000..3b2150ab
--- /dev/null
+++ b/pages/form-input/components/form-input/select-multi.vue
@@ -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>
\ No newline at end of file
diff --git a/pages/form-input/components/form-input/select.vue b/pages/form-input/components/form-input/select.vue
index d668d78c..db217664 100644
--- a/pages/form-input/components/form-input/select.vue
+++ b/pages/form-input/components/form-input/select.vue
@@ -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>
\ No newline at end of file