classroom-app/src/views/knowledge-library/model/drag-question/index.tsx

import { Tag, Image, Button } from 'vant';
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  PropType,
  reactive,
  watch
} from 'vue';
import { AnswerType, labelOptions, QuestionType } from '../../unit';
import Draggable from 'vuedraggable';
import styles from './index.module.less';
import AnserTitle from '../anser-title';
import AnswerAnalysis from '../answer-analysis';

// 单选和多选题
export default defineComponent({
  name: 'choice-question',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    index: {
      // 题目是第几道
      type: Number,
      default: 1
    },
    data: {
      type: Object,
      default: () => ({})
    },
    /* 只读 */
    readOnly: {
      type: Boolean,
      default: false
    },
    showRate: {
      // 是否显示答题的正确率
      type: Boolean,
      default: false
    },
    showAnalysis: {
      // 是否显示解析
      type: Boolean,
      default: false
    },
    analysis: {
      type: Object,
      default: () => ({
        message: '',
        topic: false, // 是否显示结果
        userResult: true // 用户答题对错
      })
    }
  },
  emits: ['update:value'],
  setup(props, { emit, slots }) {
    const state = reactive({
      domId: 'draggableContainer' + +new Date(),
      drag: false,
      sortable: null as any,
      list: [] as any,
      options: [] as any,
      alst: [] as any
    });

    // 返回选中的结果
    const onSelect = () => {
      const list = state.list || [];
      const result: any = [];

      list.forEach((item: any, index: number) => {
        // console.log(item, 'item')
        result.push({
          answerId: item.answerId,
          answer: item.answer,
          answerExtra: index + 1
        });
      });

      emit('update:value', result);
    };

    // 修改题目逻辑
    const onSelectAnswer = (item: any) => {
      // 判断是否已经选中了
      if (item.checked || props.readOnly) return;
      const result: any = [];
      // console.log(state.options, 'state.options')
      state.options.forEach((option: any, index: any) => {
        // console.log(option, '------')
        result.push({
          answerId: option.index,
          answer: option.leftValue,
          answerExtra: index + 1
        });
      });

      result.push({
        answerId: item.examinationQuestionAnswerId,
        answer: item.questionAnswer,
        answerExtra: state.list.length + 1
      });

      state.list.push({
        answerId: item.examinationQuestionAnswerId,
        answer: item.questionAnswer,
        answerExtra: state.list.length + 1
      });

      emit('update:value', result);

      nextTick(() => {
        initOptions();
      });
    };

    const answers = computed(() => {
      const list: any = props.data.answers || [];
      const value: any = props.value || [];
      // console.log(value, 'answer')
      list.forEach((item: any) => {
        const tempIndex = value.findIndex(
          (c: any) => c.answerId === item.examinationQuestionAnswerId
        );
        // if (tempIndex !== -1) {
        item.checked = tempIndex !== -1 ? true : false;
        // }
      });
      return list;
    });
    const initOptions = () => {
      const answers = props.data.answers || [];
      const userAnswer = props.data.userAnswer || []; // 用户填写的答案
      // console.log(answers, userAnswer)
      // state.options = []
      nextTick(() => {
        if (userAnswer.length > 0) {
          const tempList: any = [];
          userAnswer.forEach((answer: any, index: any) => {
            const rightOption = answers.find(
              (child: any) =>
                answer.answerId === child.examinationQuestionAnswerId
            );
            const rightValue = answers.find(
              (child: any) => answer.answerExtra == child.questionExtra
            );
            const tmp = {
              itemIndex: index,
              index: answer.answerId, // 左边的值
              leftValue: answer.answer, // 左边的值
              rightValue: answer.answerExtra, // 右边的值
              leftType: rightOption
                ? rightOption.questionAnswerTypeCode || 'TXT'
                : 'TXT', // 左边类型
              rightType: rightOption
                ? rightOption.questionExtraTypeCode || 'TXT'
                : 'TXT', // 右边类型
              rightIndex: rightValue
                ? rightValue.examinationQuestionAnswerId
                : ''
            };
            // state.options.push(tmp)
            tempList.push(tmp);
          });
          state.options = tempList;
        }

        // console.log(props.data, 'data');
      });
    };

    watch(
      () => state.options,
      () => {
        const list = state.options || [];
        const result: any = [];
        list.forEach((item: any, index: number) => {
          result.push({
            answerId: item.index,
            answer: item.leftValue,
            answerExtra: index + 1
          });
        });
        emit('update:value', result);
      }
    );

    onMounted(() => {
      initOptions();
    });

    return () => (
      <>
        <div class={styles.unitSubject}>
          {slots.title && slots.title()}
          {/* 标题 */}
          <AnserTitle
            index={props.index}
            name={props.data.name}
            showRate={props.showRate}
            score={props.data.totalScore}
            answerType={QuestionType.SORT}
            extra={{
              rightRate: props.data.rightRate,
              questionDetail: props.data.questionDetail,
              mediaUrls: props.data.mediaUrls
            }}
          />

          <div class={[styles.unitAnswers]}>
            {answers.value.map((item: any, index: number) => (
              <div
                class={[styles.unitAnswer, item.checked && styles.active]}
                onClick={() => onSelectAnswer(item)}>
                <div class={styles.answerContent}>
                  <span class={styles.option}>{labelOptions[index + 1]}.</span>
                  {item.questionAnswerTypeCode === AnswerType.IMAGE && (
                    <div class={styles.value}>
                      <Image src={item.questionAnswer} />
                    </div>
                  )}
                  {item.questionAnswerTypeCode === AnswerType.TXT && (
                    <div class={styles.value}>{item.questionAnswer}</div>
                  )}
                </div>
              </div>
            ))}
            <div class={[styles.sortReset, 'van-hairline--top']}>
              <span class={styles.tips}>我的回答（可拖拽调整顺序）</span>
              <Button
                type="primary"
                round
                disabled={props.readOnly}
                onClick={() => {
                  state.options = [];
                  state.list = [];
                  onSelect();
                  initOptions();
                }}>
                重置
              </Button>
            </div>

            {props.readOnly ? (
              state.options.map((item: any) => (
                <div class={styles.itemsContainer}>
                  {item.leftType === AnswerType.TXT && (
                    <Tag class={[styles.items]} data-id={item.itemIndex}>
                      {item.leftValue}
                    </Tag>
                  )}
                  {item.leftType === AnswerType.IMAGE && (
                    <Image
                      src={item.leftValue}
                      data-id={item.itemIndex}
                      class={[styles.imgs, 'van-hairline--surround']}
                      fit="cover"
                    />
                  )}
                </div>
              ))
            ) : (
              <Draggable
                v-model:modelValue={state.options}
                itemKey="itemIndex"
                componentData={{
                  itemKey: 'id',
                  tag: 'div',
                  animation: 200,
                  group: 'description'
                }}>
                {{
                  item: (element: any) => {
                    const item = element.element;
                    return (
                      <div class={styles.itemsContainer}>
                        {item.leftType === AnswerType.TXT && (
                          <Tag class={[styles.items]} data-id={item.itemIndex}>
                            {item.leftValue}
                          </Tag>
                        )}
                        {item.leftType === AnswerType.IMAGE && (
                          <Image
                            src={item.leftValue}
                            data-id={item.itemIndex}
                            class={[styles.imgs, 'van-hairline--surround']}
                            fit="cover"
                          />
                        )}
                      </div>
                    );
                  }
                }}
              </Draggable>
            )}
          </div>
        </div>
        {props.showAnalysis && (
          <AnswerAnalysis
            answerAnalysis={props.analysis.message}
            topic={props.analysis.topic}
            userResult={props.analysis.userResult}
          />
        )}
      </>
    );
  }
});