Merge branch 'master' of ssh://dev.zhiheiot.com:29418/mob-components

Tevin

2025-03-06 8f5c0a4adea5ae1a8021fac185df94bc3702ddf6

 forms/checkbox/CCheckBox.vue

@@ -4,7 +4,10 @@
 */

<template>
    <view class="c-check-box">
    <view
        class="c-check-box"
        :class="displayType==='dialog'?'c-check-box-dialog':''"
    >
        <AtInput
            ref="input"
            :name="itemRes.name"
@@ -12,21 +15,66 @@
            :required="itemRes.required"
            :disabled="itemRes.disabled"
            :error="itemRes.error"
        />
            :editable="displayType!=='dialog'"
            :placeholder="placeholder"
            :value="selectedStr"
            :onClick="evt => handleOpen()"
        >
            <view
                v-if="displayType==='dialog'"
                class="at-icon at-icon-chevron-right"
            />
        </AtInput>
        <AtCheckbox
            ref="check"
            v-if="displayType==='plane'"
            :class="'c-check-box-' + boxType"
            :options="options"
            :selectedList="selectedList"
            :onChange="evt => handleChange(evt)"
        />
        <AtModal
            :isOpened="isDialogOpened"
            v-if="displayType==='dialog'"
            :onClose="evt => handleClose()"
        >
            <AtModalHeader>请选择{{itemRes.label}}</AtModalHeader>
            <AtModalContent>
                <scroll-view
                    class="scrollor"
                    :scrollY="true"
                >
                    <AtCheckbox
                        ref="check"
                        :class="'c-check-box-' + boxType"
                        :options="options"
                        :selectedList="selectedList"
                        :onChange="evt => handleChange(evt)"
                    />
                    <view
                        class="m-text-ignore"
                        v-show="options.length===0"
                    >（选项加载异常）</view>
                </scroll-view>
            </AtModalContent>
            <AtModalAction>
                <button @tap="evt => handleClose(evt)">确定</button>
            </AtModalAction>
        </AtModal>
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
import { AtInput, AtCheckbox } from 'taro-ui-vue';
import {
    AtInput,
    AtCheckbox,
    AtModal,
    AtModalHeader,
    AtModalContent,
    AtModalAction,
} from 'taro-ui-vue';
import { Tools } from '@components/common/Tools';
import './cCheckBox.scss';

@@ -35,6 +83,10 @@
    components: {
        AtInput,
        AtCheckbox,
        AtModal,
        AtModalHeader,
        AtModalContent,
        AtModalAction,
    },
    props: {
        // 表单数据资源（表单组件内部机制专用）
@@ -49,9 +101,18 @@
            type: String,
            default: 'checkbox', // checkbox 多选、radio 单选
        },
        // 显示模式
        displayType: {
            type: String,
            default: 'plane', // plane 直接显示、dialog 弹窗
        },
        // 占位提示
        placeholder: String,
    },
    data() {
        return {};
        return {
            isDialogOpened: false,
        };
    },
    computed: {
        selectedList() {
@@ -61,6 +122,14 @@
            } else {
                return [value];
            }
        },
        selectedStr() {
            return (this.selectedList || [])
                .map(selected => {
                    const option = this.options.find(opt => opt.value === selected);
                    return option ? option.label || '' : '';
                })
                .join(',');
        },
    },
    methods: {
@@ -72,6 +141,13 @@
                    if (typeof item === 'undefined') {
                        return;
                    }
                    const selectedIndex = this.options.findIndex(
                        opt => opt.value === item
                    );
                    console.log(item, selectedIndex);
                    if (selectedIndex < 0) {
                        return;
                    }
                    next.push(item);
                });
                this.itemRes.onChange(next);
@@ -79,17 +155,35 @@
            // 单选
            else if (this.boxType === 'radio') {
                const next = evt[evt.length - 1];
                this.itemRes.onChange(next);
                const selectedIndex = this.options.find(opt => opt.value === item);
                if (selectedIndex < 0) {
                    this.itemRes.onChange('');
                } else {
                    this.itemRes.onChange(next);
                }
            }
        },
        handleOpen() {
            if (this.displayType === 'plane') {
                return;
            }
            this.isDialogOpened = true;
        },
        handleClose() {
            this.isDialogOpened = false;
        },
    },
    mounted() {
        if (process.env.TARO_ENV === 'h5') {
            $(this.$refs.input.$el)
                .find('.at-input__container')
                .prepend(this.$refs.check.$el);
        } else if (process.env.TARO_ENV === 'weapp') {
            $(this.$refs.input.$el).find('.at-input__container').append(this.$refs.check);
        if (this.displayType === 'plane') {
            if (process.env.TARO_ENV === 'h5') {
                $(this.$refs.input.$el)
                    .find('.at-input__container')
                    .prepend(this.$refs.check.$el);
            } else if (process.env.TARO_ENV === 'weapp') {
                $(this.$refs.input.$el)
                    .find('.at-input__container')
                    .append(this.$refs.check.$el);
            }
        }
    },
};