fe-manage/src/views/research/ResearchAdd.vue

<!-- 评估管理-创建评估页面 -->
<template>
  <div class="researchadd">
    <div class="header">
      <span class="title">创建评估</span>
      <router-link to="/researchmanage" class="goback">
        <span class="return"></span>
        <router-link class="returntext" to="/researchmanage">返回</router-link>
      </router-link>
    </div>
    <div class="addtype">
      <div class="addtypen">创建评估类型</div>
      <div class="types" @click="addSingleItem">单选题</div>
      <div class="types" @click="addMultipleItem">多选题</div>
      <div class="types" @click="addEssayQuestionItem">问答题</div>
      <div class="types" @click="addScoringQuestionItem">评分题</div>
    </div>
    <div v-if="orderList.length">
      <div  v-for="(item, index) in orderList" :key="index + new Date().getTime()">
        <ResearchAddSingle v-if="item.questionType == 1" :index="item.orderNumber-1" :item="item" :list="data.singleStemVoList"/>
        <ResearchAddMulti v-else-if="item.questionType == 2" :index="item.orderNumber-1" :item="item" :list="data.multipleStemVoList"/>
        <ResearchAddAsk v-else-if="item.questionType == 3" :index="item.orderNumber-1" :item="item" :list="data.essayQuestionVoList"/>
        <ResearchAddPin v-else-if="item.questionType == 4" :index="item.orderNumber-1" :item="item" :list="data.scoringQuestionVoList"/>
      </div>
    </div>
    <div class="footer">
      <div class="btn">
        <a-button
          type="primary"
          style="
            width: 100px;
            height: 40px;
            border-radius: 8px;
            background-color: #4ea6ff;
          "
          :loading="loading"
          :disabled="!canSubmit"
          @click="handleSave"
        >保存
        </a-button>
        <a-button
          type="primary"
          ghost
          style="
            width: 100px;
            height: 40px;
            margin-left: 14px;
            border-radius: 8px;
            color:#fff;
            background-color: #4ea6ff;
          "
          @click="handleAllCancel"
        >取消
        </a-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, ref, watch, watchEffect} from "vue";
import ResearchAddSingle from "./components/ResearchAddSingle.vue";
import ResearchAddMulti from "./components/ResearchAddMulti.vue";
import ResearchAddAsk from "./components/ResearchAddAsk.vue";
import ResearchAddPin from "./components/ResearchAddPin.vue";
import {editResearchMessage,} from "@/api/indexResearch";
import {useRoute, useRouter} from "vue-router";
import {message} from "ant-design-vue";
import {ASSESSMENT_DETAIL} from "@/api/apis";
import {request} from "@/api/request";

const router = useRouter();
const loading = ref(false);
const { params: { id }, query: { name:assessmentName } } = useRoute();
const data = ref({
  assessmentName,
  singleStemVoList: [],
  multipleStemVoList: [],
  essayQuestionVoList: [],
  scoringQuestionVoList: []
});
const canSubmit = computed(()=>data.value.singleStemVoList.length || data.value.multipleStemVoList.length || data.value.essayQuestionVoList.length || data.value.scoringQuestionVoList.length)
const orderList = computed(()=>[...data.value.singleStemVoList.filter(t=>!t.deleted),...data.value.multipleStemVoList.filter(t=>!t.deleted),...data.value.essayQuestionVoList.filter(t=>!t.deleted),...data.value.scoringQuestionVoList.filter(t=>!t.deleted)].sort((a,b)=>a.orderNumber-b.orderNumber))
watch(()=>orderList.value.length,()=> orderList.value.forEach((t,i)=>t.orderNumber = i + 1))
watchEffect(() => id && request(ASSESSMENT_DETAIL(id), {}).then((res) => data.value = res.data));
const handleSave = () => {
  console.log(data);
  loading.value = true;
  // 校验
  if (!checkVal()) {
    loading.value = false;
    return false;
  }
  editResearchMessage({
    id,
    assessmentName: data.value.assessmentName,
    assessmentSingleChoiceDtoList:  data.value.singleStemVoList.flatMap(t=>t.assessmentSingleChoiceVoList.map(s=>({...s,deleted:(t.deleted || s.deleted),orderNumber:t.orderNumber,singleStemName:t.singleStemName}))),
    assessmentMultipleChoiceDtoList: data.value.multipleStemVoList.flatMap(t=>t.multipleChoiceVoList.map(s=>({...s,deleted:(t.deleted || s.deleted),orderNumber:t.orderNumber,multipleStemName:t.multipleStemName}))),
    assessmentEssayQuestionDtoList: data.value.essayQuestionVoList,
    assessmentScoringQuestionDtoList: data.value.scoringQuestionVoList
  }).then(() => {
    loading.value = false;
    message.success("编辑成功");
    router.push({ path: "/researchmanage"});
  });
};
const handleAllCancel = () => router.push({ path: "/researchmanage" });
function addSingleItem() {
  data.value.singleStemVoList.push({
    questionType: 1,
    singleStemName: "",
    orderNumber: orderList.value?.length + 1,
    assessmentSingleChoiceVoList: [
      {
        questionType: 1,
        singleOptionName: "",
        singleOptionPictureAddress: "",
        singleStemName: "",
        deleted: false,
        orderNumber: (data.value?.singleStemVoList?.length || 0) + 1,
        optionOrderNum: 1
      },
      {
        questionType: 1,
        singleOptionName: "",
        singleOptionPictureAddress: "",
        singleStemName: "",
        deleted: false,
        orderNumber: (data.value?.singleStemVoList?.length || 0) + 1,
        optionOrderNum: 2
      }
    ],
    deleted: false,
  });
  console.log(data.value);
}

function addMultipleItem() {
  data.value.multipleStemVoList.push({
    questionType: 2,
    multipleStemName: "",
    orderNumber: orderList.value?.length + 1,
    multipleChoiceVoList: [
      {
        questionType: 2,
        multipleOptionName: "",
        multipleOptionPictureAddress: "",
        multipleStemName: "",
        deleted: false,
        orderNumber: (data.value?.multipleStemVoList?.length || 0) + 1,
        optionOrderNum: 1
      },
      {
        questionType: 2,
        multipleOptionName: "",
        multipleOptionPictureAddress: "",
        multipleStemName: "",
        deleted: false,
        orderNumber: (data.value?.multipleStemVoList?.length || 0) + 1,
        optionOrderNum: 2
      }
    ],
    deleted: false,
  });
}
function addEssayQuestionItem() {
  data.value.essayQuestionVoList.push({
    questionType: 3,
    assessmentQaTitle: "",
    orderNumber: orderList.value?.length + 1,
    deleted: false,
  });
}
function addScoringQuestionItem() {
  data.value.scoringQuestionVoList.push({
    questionType: 4,
    assessmentScTitle: "",
    assessmentMaxScore: 10,
    assessmentMinScore: 1,
    weightScale: 100,
    orderNumber: orderList.value?.length + 1,
    deleted: false,
  });
}
const checkVal = () => {
  // 问答
  if (data.value.essayQuestionVoList.length && data.value.essayQuestionVoList?.some((item) => !item.deleted && (!item.assessmentQaTitle))) {
    message.error("问答题干为必填 请确认!");
    return false;
  }
  // 多选
  if (data.value.multipleStemVoList.length && data.value.multipleStemVoList.some(t => !t.deleted && t.multipleChoiceVoList.filter(s=>!s.deleted)?.length < 2)) {
    message.error("多选题最少添加两个选项!");
    return false;
  }
  if (data.value.multipleStemVoList.length && data.value.multipleStemVoList?.some((item) => !item.deleted && (!item.multipleStemName || item.multipleChoiceVoList?.some((t) => !t.deleted && !t.multipleOptionName)))) {
    message.error("多选题干或选项为必填 请确认!");
    return false;
  }
  // 评分
  if (data.value.scoringQuestionVoList.length && data.value.scoringQuestionVoList?.some((item) => !item.deleted && (!item.assessmentScTitle))) {
    message.error("评分题干为必填 请确认!");
    return false;
  }
  if (data.value.scoringQuestionVoList.length &&  data.value.scoringQuestionVoList.reduce((pre, cur) => pre + parseInt(cur.weightScale), 0) !== 100) {
    message.error("当前权重设置是百分制 请重新配置");
    return false;
  }
  // 单选
  if (data.value.singleStemVoList.length && data.value.singleStemVoList.some(t => !t.deleted && t.assessmentSingleChoiceVoList.filter(s=>!s.deleted)?.length < 2)) {
    message.error("单选题最少添加两个选项!");
    return false;
  }
  if (data.value.singleStemVoList.length && data.value.singleStemVoList?.some((item) => !item.deleted && (!item.singleStemName || item.assessmentSingleChoiceVoList.some(option=>!option.deleted && !option.singleOptionName)))) {
    message.error("单选题干或选项为必填 请确认!");
    return false;
  }
  return true;
};

</script>
<style lang="scss">
.researchadd {
  width: 100%;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .title {
      color: #000000;
      font-size: 18px;
      //line-height: 36px;
      padding-top: 30px;
      padding-left: 37px;
      //font-weight: 500;
    }

    .goback {
      padding-right: 70px;
      //padding-top: 37px;
      position: relative;

      .return {
        display: inline-block;
        width: 42px;
        height: 42px;
        margin-top: 17px;
        margin-right: 10px;
        background-image: url("../../assets/images/projectadd/return.png");
      }

      .returntext {
        display: inline-block;
        position: absolute;
        top: 27px;
        color: #4ea6ff;
        font-size: 14px;
      }
    }
  }

  .addtype {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-right: 20px;
    align-items: center;
    margin-left: 41px;

    .addtypen {
      color: #6f6f6f;
      font-size: 14px;
    }

    .types {
      cursor: pointer;
      width: 80px;
      height: 40px;
      color: #fff;
      background: #4ea6ff;
      border: 1px solid #4ea6ff;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px 10px;
    }

    .typesCur {
      color: #fff;
      background: #4ea6ff;
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 70%;
    min-width: 690px;
    margin-left: 38px;
    margin-top: 20px;

    .tagbox {
      display: flex;
      justify-content: space-between;

      .tagname {
        width: 90px;
        height: 32px;
        margin-top: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 134px;
        background: rgba(78, 166, 255, 0.1);
        border-radius: 4px;
        color: rgba(64, 158, 255, 1);
        font-size: 16px;
      }

      .deleteop {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 40px;
        margin-top: 20px;
        margin-right: 30px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        cursor: pointer;

        .del_text {
          color: #4ea6ff;
          font-size: 14px;
          margin-left: 5px;
        }
      }
    }

    .scorebox {
      display: flex;
      align-items: center;
      margin-top: 20px;
      margin-left: 70px;

      .scoretext {
        font-size: 14px;
        color: #56a3f9;
      }

      .number {
        display: flex;
        border: 1px solid #d7e5fd;
        border-radius: 5px;
        margin: 0 10px;
        padding: 5px;

        .btn {
          width: 40px;
          height: 40px;
          border: 1px solid #56a3f9;
          border-radius: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 5px;
          font-size: 14px;
          font-weight: 400;
          color: #56a3f9;
          line-height: 24px;
          cursor: pointer;
        }

        .curBtn {
          background: #56a3f9;
          color: #fff;
        }
      }
    }

    .picture {
      width: 100px;
      display: flex;
      flex-direction: column;
      margin-top: 20px;
      margin-left: 133px;

      .pictureimg {
        width: 100px;
        height: 100px;
      }

      .picturename {
        color: #6f6f6f;
        font-size: 14px;
      }
    }

    .options {
      display: flex;
    }

    .delete {
      cursor: pointer;
      margin-top: 32px;
      margin-left: 20px;
      // float: right;
      color: #4ea6ff;
      font-size: 14px;
    }

    .name2 {
      display: flex;
      align-items: flex-start;
    }

    .name {
      width: 60%;
      // background-color: lightcoral;
      display: flex;
      margin-top: 20px;
      //align-items: center;
      //height: 40px;
      // border: 1px solid black;
      .namebox {
        width: 120px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;

        .nameimg {
          width: 10px;
          height: 10px;
        }
      }

      .inname {
        color: #6f6f6f;
        font-size: 14px;
        margin-left: 7px;
        font-weight: 700;
      }

      .in {
        margin-left: 14px;
        flex: 1;

        .assess {
          display: flex;
          width: 226px;
          height: 40px;
          border: 1px solid #56a3f9;
          //margin-bottom: 20px;
          .assesstype {
            width: 50%;
            background: #56a3f9;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .assesswhole {
            width: 50%;
            background: rgba(86, 163, 249, 0.1);
            font-size: 14px;
            color: #6f6f6f;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .ratio {
            position: absolute;
            right: 10px;
            top: 8px;
            color: #6f6f6f;
            font-size: 14px;
          }
        }

        .addimg {
          cursor: pointer;
          color: rgba(78, 166, 255, 1);
          font-size: 14px;
        }

        .text {
          color: rgba(109, 117, 132, 1);
          font-size: 14px;
          //line-height: 24px;
        }

        .ant-radio-wrapper {
        }

        .ant-input {
          border-radius: 5px;
          // height: 120%;
          width: 100%;
          height: 35px;
        }

        .ant-select-selector {
          border-radius: 5px;
          // height: 120%;
          width: 100%;
          height: 40px;
        }
      }

      .numberInp {
        width: 200px;

        .ant-input-number {
          width: 200px;
          height: 40px;
          border-radius: 8px;
        }

        // .ant-input-number-input-wrap {
        //   width: 200px;
        // }
      }
    }
  }

  .name2 {
    display: flex;
    align-items: flex-start;
  }

  .opinion {
    display: flex;
    margin-top: 30px;

    .namebox {
      width: 120px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-shrink: 0;
    }

    .in {
      margin-left: 14px;
      width: 500px;

      .ant-input-textarea-show-count {
        position: relative;
        height: 110px;
      }

      .ant-input-textarea-show-count::after {
        position: absolute;
        right: 10px;
        bottom: 0px;
      }

      .ant-input {
        border-radius: 8px;
      }
    }
  }

  .footer {
    width: 100%;
    margin-top: 31px;
    margin-bottom: 14px;

    .btn {
      display: flex;
      margin-bottom: 20px;
      justify-content: center;
      cursor: pointer;
    }
  }

  .uploadContent {
    display: block !important;

    .uploadBtn {
      margin-left: 120px !important;
    }
  }
}
</style>