多选框内嵌套单选框
<template>
<Dialog
width="50%"
:title="newInquiriesData.diagnoseName"
:visible="visible"
@confirm="handleConfirm"
@close="handleClose"
@open="open"
class="inquiries-main"
>
<div class="inquiries-container" v-loading="loadingStatus">
<div class="question-tips">
<i class="el-icon-warning"></i>
<span
>请勾选下方的进一步问诊资源,点击【确定】后系统可将结果自动会写至门诊病例</span
>
</div>
<div class="main">
<div class="wapper" v-for="(item, index) in templateData" :key="index">
<div class="title">{
{ item.keys }}</div>
<div class="muti-select">
<el-checkbox-group class="group" v-model="item.checked">
<el-checkbox
class="group-item"
v-for="(data, i) in item.value"
:key="i + 'only'"
:label="data.key"
@change="handleChangeBox($event, data, item)"
>
<div>
<span> {
{ data.key }}</span>
<span v-if="data.children" class="group-item-radio">
<el-radio-group v-model="data.checked">
<el-radio
@change="handleChangeRadio($event, data, item)"
v-for="(dataItem, dataIndex) in data.children"
:key="dataIndex + 'only'"
:label="dataItem"
>{
{ dataItem }}</el-radio
>
</el-radio-group>
</span>
</div>
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
</div>
</Dialog>
</template>
<script>
import {
Dialog } from '@components/index';
import {
computed, ref } from '@vue/composition-api';
import {
deepClone } from '@js/utils';
import {
useLoadingStatus } from '@hooks/index';
export default {
props: {
visible: {
type: Boolean,
default: false
},
inquiriesData: {
type: Object,
default: () => {
}
}
},
components: {
Dialog
},
setup(props, {
emit }) {
const {
loadingStatus, changeLoadingStatus } = useLoadingStatus();
const newInquiriesData = computed(() => {
return deepClone(props.inquiriesData);
});
function handleClose() {
emit('handleClose');
}
const templateData = ref([]);
function handleChangeBox(item, data, items) {
console.log(item, data, items);
if (item && data.children) {
data.checked = data.children[0];
}
if (!item) {
if (data.children) {
data.checked = '';
}
}
}
function handleChangeRadio(item, data, items) {
console.log(items.checked.indexOf(data.key) != -1);
if (!items.checked.indexOf(data.key) != -1) {
items.checked.push(data.key);
items.checked = [...new Set(items.checked)];
}
}
function open() {
changeLoadingStatus(true);
setTimeout(() => {
templateData.value = [
{
keys: '症状',
value: [
{
key: '发热' },
{
key: '高热',
children: ['高热1', '高热2', '高热3'],
checked: ''
},
{
key: '低热' }
],
checked: []
},
{
keys: '体征',
value: [
{
key: '体征1' },
{
key: '体征2' },
{
key: '体征3' },
{
key: '体征4' }
],
checked: []
},
{
keys: '流行病学史',
value: [
{
key: '新冠疫区旅行史' },
{
key: '境外居旅行史' },
{
key: '聚集性活动史' },
{
key: '新冠肺炎患者接触史' }
],
checked: []
}
];
changeLoadingStatus(false);
}, 400);
console.log(newInquiriesData.value);
}
function handleConfirm() {
console.log(templateData.value);
}
return {
handleClose,
open,
newInquiriesData,
loadingStatus,
changeLoadingStatus,
templateData,
handleConfirm,
handleChangeBox,
handleChangeRadio
};
}
};
</script>
<style scoped lang="scss">
.inquiries-container {
max-height: 450px;
overflow: auto;
.question-tips {
height: 30px;
background-color: #eaf5fd;
margin-bottom: 10px;
border-radius: 8px;
border: 1px solid #d9e6f0;
display: flex;
align-items: center;
padding: 0 10px;
color: #50a0f4;
i {
font-size: 16px;
margin-right: 16px;
}
}
.main {
overflow-x: hidden;
.wapper {
margin-bottom: 10px;
.title {
width: 100%;
height: 40px;
border-radius: 8px;
background-color: #f2f2f2;
line-height: 40px;
padding-left: 10px;
font-size: 16px;
font-weight: 500;
}
.muti-select {
margin-left: 10px;
margin-top: 20px;
.group {
display: flex;
flex-direction: column;
.group-item {
margin-bottom: 10px;
.group-item-radio {
margin-left: 20px;
}
}
}
}
}
}
}
</style>