Merge branch 'temp'

Tevin

2023-07-15 446276295e2185963d228f8c7c13a41303b3a681

Merge branch 'temp'

 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,7 +15,35 @@
            :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"
@@ -20,13 +51,30 @@
            :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,11 +155,26 @@
            // 单选
            else if (this.boxType === 'radio') {
                const next = evt[evt.length - 1];
                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 (this.displayType === 'plane') {
        if (process.env.TARO_ENV === 'h5') {
            $(this.$refs.input.$el)
                .find('.at-input__container')
@@ -93,6 +184,7 @@
                .find('.at-input__container')
                .append(this.$refs.check.$el);
        }
        }
    },
};
</script>

 forms/checkbox/cCheckBox.scss

@@ -6,6 +6,53 @@
@import "../../common/sassMixin";

.c-check-box {
    &.c-check-box-dialog {
        .at-input {
            padding-bottom: 24px;
            .at-input__title {
                width: 162px;
            }
        }
        .at-input__container {
            &.at-input--disabled {
                opacity: 1;
            }
            .at-input__input,
            .weui-input,
            input {
                display: inline-block;
            }
        }
        .at-input__children {
            padding-right: 20px;
            &::after {
                display: none;
            }
            .at-icon-chevron-right {
                padding: 0;
                font-size: 48px;
                color: #ccc;
            }
        }
        .at-modal__container {
            width: 620rpx;
            .at-modal__content {
                padding-top: 0;
                padding-bottom: 0;
            }
            .scrollor {
                height: 100%;
                max-height: 840px;
            }
            .at-checkbox {
                padding-left: 0;
            }
        }
        .m-text-ignore {
            padding: 60px 0;
            text-align: center;
        }
    }
    .at-input {
        padding-bottom: 0;
    }
@@ -17,6 +64,11 @@
        .at-input__input,
        .weui-input,
        input {
            display: none;
        }

    }
    .at-input__icon {
            display: none;
        }
        .at-checkbox {
@@ -46,9 +98,5 @@
            .at-checkbox__title {
                max-width: calc(100% - 80px);
            }
        }
    }
    .at-input__icon {
        display: none;
    }
}