要素 ui の複数選択ボックス内のネストされたラジオ ボタン

複数選択ボックス内のネストされたラジオ ボタン

<template>
  <!-- 封装了dialog，el-dialog就可以 -->
  <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 }) {
    
    
  	//loading状态
    const {
    
     loadingStatus, changeLoadingStatus } = useLoadingStatus();
    // 特殊疾病数据，open时处理
    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>