/**
|
* CCheckBox
|
* 复选框组件，用于在表单中提供多选或单选功能
|
* 支持两种显示模式：直接显示模式和弹窗选择模式
|
* 支持两种选择类型：多选和单选
|
* @author Tevin
|
*/
|
|
<template>
|
<view
|
class="c-check-box"
|
:class="displayType==='dialog'?'c-check-box-dialog':''"
|
>
|
<AtInput
|
ref="input"
|
:name="itemRes.name"
|
:title="itemRes.label"
|
: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,
|
AtModal,
|
AtModalHeader,
|
AtModalContent,
|
AtModalAction,
|
} from 'taro-ui-vue';
|
import { Tools } from '@components/common/Tools';
|
import './cCheckBox.scss';
|
|
export default {
|
name: 'CCheckBox',
|
components: {
|
AtInput,
|
AtCheckbox,
|
AtModal,
|
AtModalHeader,
|
AtModalContent,
|
AtModalAction,
|
},
|
props: {
|
// 表单数据资源（表单组件内部机制专用）
|
itemRes: Object,
|
// 选项列表，单项为 {label,value}
|
options: {
|
type: Array,
|
default: () => [],
|
},
|
// 勾选类型
|
boxType: {
|
type: String,
|
default: 'checkbox', // checkbox 多选、radio 单选
|
},
|
// 显示模式
|
displayType: {
|
type: String,
|
default: 'plane', // plane 直接显示、dialog 弹窗
|
},
|
// 占位提示
|
placeholder: String,
|
},
|
data() {
|
return {
|
isDialogOpened: false,
|
};
|
},
|
computed: {
|
selectedList() {
|
const value = this.itemRes.formData[this.itemRes.name];
|
if (Tools.isArray(value)) {
|
return value;
|
} else {
|
return [value];
|
}
|
},
|
selectedStr() {
|
return (this.selectedList || [])
|
.map(selected => {
|
const option = this.options.find(opt => opt.value === selected);
|
return option ? option.label || '' : '';
|
})
|
.join(',');
|
},
|
},
|
methods: {
|
handleChange(evt) {
|
// 多选
|
if (this.boxType === 'checkbox') {
|
const next = [];
|
evt.forEach(item => {
|
if (typeof item === 'undefined') {
|
return;
|
}
|
const selectedIndex = this.options.findIndex(
|
opt => opt.value === item,
|
);
|
if (selectedIndex < 0) {
|
return;
|
}
|
next.push(item);
|
});
|
this.itemRes.onChange(next);
|
}
|
// 单选
|
else if (this.boxType === 'radio') {
|
const next = evt[evt.length - 1];
|
const selectedIndex = this.options.findIndex(opt => opt.value === next);
|
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')
|
.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);
|
}
|
}
|
},
|
};
|
</script>
|
