lesson-course-play/src/views/chooise-homework/classroom-detail/child-node.tsx

import { defineComponent } from 'vue';
import styles from './index.module.less';
import { Cell, Collapse, CollapseItem } from 'vant';
import iconNoCheck from './image/icon-nocheck.png';
import iconImm from './image/icon-imm.png';
import iconCheck from './image/icon-check.png';
import iconCheckDisabled from './image/icon-check-disabled.png';

export const onMenuChange = (item: any, status?: string) => {
  if (item.status === 'disabled') {
    return;
  }
  // 判断父级元素
  if (status) {
    item.status = status;
  } else {
    if (item.status === 'disabled') {
      return;
    }
    if (item.status === 'checked') {
      item.status = 'nochecked';
    } else {
      item.status = 'checked';
    }
  }
  if (Array.isArray(item.materialList)) {
    // console.log(item.status, 'item.status', status);
    item.materialList.forEach((material: any) => {
      if (material.status === 'disabled') {
        return;
      }
      if (item.status === 'nochecked') {
        material.status = 'nochecked';
      } else {
        material.status = 'checked';
      }
    });
  }
  if (Array.isArray(item.children)) {
    item.children.forEach((child: any) => {
      onMenuChange(child, item.status);
    });
  }
};

export const onParentChangeStatus = (parent: any, childName = 'children') => {
  let arrLength = 0;
  let checkedLength = 0;
  let indeterminateLength = 0;
  if (parent.materialList && parent.materialList.length > 0) {
    parent.materialList.forEach((item: any) => {
      if (item.status !== 'disabled') {
        arrLength += 1;
      }

      if (item.status === 'checked') {
        checkedLength += 1;
      }
    });
  }
  if (Array.isArray(parent[childName])) {
    parent[childName].forEach((item: any) => {
      if (item.status !== 'disabled') {
        arrLength += 1;
      }

      if (item.status === 'checked') {
        checkedLength += 1;
      }

      if (item.status === 'indeterminate') {
        indeterminateLength += 1;
      }
    });
  }

  if (checkedLength >= arrLength) {
    parent.status = 'checked';
  } else if (checkedLength > 0) {
    parent.status = 'indeterminate';
  } else {
    parent.status = 'nochecked';
  }
  // 只能目录才会大于0，素材是不会有
  if (indeterminateLength > 0) {
    parent.status = 'indeterminate';
  }
};

const ChildNode = defineComponent({
  name: 'child-node',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    collapse: {
      type: String,
      default: ''
    }
  },
  emits: ['update:collapse', 'menuChange', 'materialChange'],
  setup(props, { emit }) {
    return () => (
      <Collapse
        modelValue={props.collapse}
        onUpdate:modelValue={(val: any) => {
          emit('update:collapse', val);
        }}
        border={false}
        accordion>
        {props.list?.map((point: any) => (
          <CollapseItem
            clickable={false}
            center
            class={styles.collapseChild}
            name={point.id}>
            {{
              title: () => (
                <div
                  class={[
                    styles.itemTitle,
                    props.collapse === point.id ? styles.itemTitleActive : ''
                  ]}>
                  <i class={[styles.arrow]}></i>
                  {point.name}
                </div>
              ),
              default: () => (
                <>
                  {Array.isArray(point?.materialList) &&
                    point.materialList.map((n: any) => (
                      <Cell>
                        {{
                          title: () => n.name,
                          value: () => (
                            <img
                              src={
                                n.status === 'disabled'
                                  ? iconCheckDisabled
                                  : n.status === 'checked'
                                  ? iconCheck
                                  : iconNoCheck
                              }
                              class={[styles.radioBtn]}
                              onClick={(e: any) => {
                                e.stopPropagation();
                                if (n.status === 'disabled') {
                                  return;
                                }
                                if (n.status === 'checked') {
                                  n.status = 'nochecked';
                                } else {
                                  n.status = 'checked';
                                }

                                onParentChangeStatus(point);
                                emit('menuChange');
                              }}
                            />
                          )
                        }}
                      </Cell>
                    ))}
                  {Array.isArray(point?.children) && (
                    <ChildNode
                      list={point.children}
                      collapse={point.collapse}
                      onUpdate:collapse={val => {
                        point.collapse = val;
                      }}
                      onMenuChange={() => {
                        onParentChangeStatus(point);
                        emit('menuChange');
                      }}
                    />
                  )}
                </>
              ),
              'right-icon': () => (
                <img
                  src={
                    point.status === 'indeterminate'
                      ? iconImm
                      : point.status === 'disabled'
                      ? iconCheckDisabled
                      : point.status === 'checked'
                      ? iconCheck
                      : iconNoCheck
                  }
                  class={[styles.radioBtn]}
                  onClick={(e: any) => {
                    e.stopPropagation();
                    onMenuChange(point);

                    emit('menuChange');
                  }}
                />
              )
            }}
          </CollapseItem>
        ))}
      </Collapse>
    );
  }
});

export default ChildNode;