update

src/components/components/choseWorksDetailDialog.vue

@@ -983,7 +983,7 @@ export default {
     },
     StudentWork(item){
 
-      this.$refs.studentWorkPreviewDialogRef.open({work:item,tool:this.toolType});
+      this.$refs.studentWorkPreviewDialogRef.open({work:item,testData:this.testData,testJson:this.testJson,tool:this.toolType});
       // if (this.toolType == 41) {
       //   this.testJsonCopy=val.works.split(',')
       // }else if(this.toolType == 52 ) {

src/components/components/studentWorkPreviewDialog.vue

@@ -10,8 +10,142 @@
       :show-close="false"
     >
       <div class="s_body">
-        <h1>测试</h1>
-        <h2>{{ studentWork }}</h2>
+        <div class="s_b_main">
+          <div class="s_b_m_top">
+            <div>学生作业预览</div>
+            <span @click="close()">退出</span>
+          </div>
+          <div
+            class="s_b_m_content"
+            v-if="[45, 48, 52, 15, 41].includes(tool)"
+          >
+            <div class="s_b_m_tool45" v-if="[45].includes(tool)">
+              <div class="s_b_m_toolItem" v-for="(item, index) in testJson">
+                <div class="s_b_m_ti_title">
+                  <span>{{ index + 1 }}</span>
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M15.3536 8.35355C15.5488 8.15829 15.5488 7.84171 15.3536 7.64645L12.1716 4.46447C11.9763 4.2692 11.6597 4.2692 11.4645 4.46447C11.2692 4.65973 11.2692 4.97631 11.4645 5.17157L14.2929 8L11.4645 10.8284C11.2692 11.0237 11.2692 11.3403 11.4645 11.5355C11.6597 11.7308 11.9763 11.7308 12.1716 11.5355L15.3536 8.35355ZM1 8.5H15V7.5H1V8.5Z"
+                      fill="#3681FC"
+                    />
+                  </svg>
+
+                  <span
+                    >{{ item.type == 1 ? "单选题：" : "多选题："
+                    }}{{ item.teststitle }}</span
+                  >
+                </div>
+                <div
+                  class="s_b_m_ti_option"
+                  v-for="(item2, index2) in item.checkList"
+                  :class="{
+                    s_b_m_ti_o_choice:
+                      item.type == '1'
+                        ? userAnswer[index] == index2
+                        : userAnswer[index].includes(index2)
+                  }"
+                >
+                  <!-- :class="{
+                           s_b_m_ti_o_choice:
+                          item2.type == 1
+                          ? item2.answer == index2
+                          : item2.answer[index].includes(index2)
+                    }" -->
+                  <div class="s_b_m_ti_o_btn">
+                    <span class="s_b_m_ti_o_btn1" v-if="item.type == 1">
+                      <!-- {{testJson}} -->
+                      <span v-if="userAnswer[index] == index2"></span>
+                      <!-- v-if="testJson.anwer[index] == index2" -->
+                    </span>
+                    <span class="s_b_m_ti_o_btn2" v-else>
+                      <span v-if="userAnswer[index].includes(index2)">
+                        <!-- <svg
+                              width="8"
+                              height="6"
+                              viewBox="0 0 8 6"
+                              fill="none"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M7.44194 0.558058C7.68602 0.802136 7.68602 1.19786 7.44194 1.44194L3.44194 5.44194C3.19786 5.68602 2.80214 5.68602 2.55806 5.44194L0.558058 3.44194C0.313981 3.19786 0.313981 2.80214 0.558058 2.55806C0.802136 2.31398 1.19786 2.31398 1.44194 2.55806L3 4.11612L6.55806 0.558058C6.80214 0.313981 7.19786 0.313981 7.44194 0.558058Z"
+                                fill="white"
+                              />
+                            </svg> -->
+                      </span>
+                    </span>
+                  </div>
+                  <span>
+                    <img
+                      v-if="item2.imgType && item2.imgType === 1"
+                      :src="item2.src"
+                      alt=""
+                      @click="$hevueImgPreview(item2.src)"
+                    />
+                    <span v-else>{{ item2 }}</span>
+                  </span>
+                </div>
+                <div></div>
+              </div>
+            </div>
+
+            <div class="s_b_m_tool48" v-if="[48, 52].includes(tool)">
+              <div v-html="userAnswer"></div>
+            </div>
+
+            <div class="s_b_m_tool15" v-if="[15].includes(tool)">
+              <div class="s_b_m_ti_title">
+                <div>提问：{{ testData.answerQ }}</div>
+              </div>
+
+              <div class="s_b_m_ti_answer">{{ userAnswer }}</div>
+            </div>
+
+            <div class="s_b_m_tool41" v-if="[41].includes(tool)">
+              <div class="s_b_m_t_image">
+                <img :src="testData.selectJson.url" alt="题目图片" />
+              </div>
+              <div class="s_b_m_t_select">
+                <div
+                  class="s_b_m_t_selectItem"
+                  v-for="(item, index) in testData.selectJson.answer"
+                >
+                  <el-select v-model="userAnswer[index]" placeholder="请选择">
+                    <el-option
+                      v-for="(item2, index2) in testData.selectJson.select"
+                      :disabled="true"
+                      :key="index2"
+                      :label="item2"
+                      :value="index2"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
+              </div>
+            </div>
+
+            <div class="s_b_m_tool47" v-if="[47].includes(tool)">
+              <div class="s_b_m_sortItem" v-for="(item, index) in testData.sentenceList">
+                <div class="s_b_m_ti_title">
+                  <span></span>
+                  <span>第{{ index + 1 }}题</span>
+                </div>
+
+                <div class="s_b_m_s_answer">
+                  <span v-for="(item2,index2) in userAnswer[index]">{{ item2 }}</span>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </el-dialog>
   </div>
@@ -19,19 +153,115 @@
 
 <script>
 export default {
-	components:{
-
-	},
+  components: {},
   data() {
     return {
-      show:false,
-      studentWork:null
-    }
+      show: false,
+      toolList: [
+        {
+          label: "选择题",
+          value: 45,
+          img: require("../../assets/icon/thirdToolList/choose.png")
+        },
+        {
+          label: "表格",
+          value: 48,
+          img: require("../../assets/icon/fourthToolList/table.png")
+        },
+        {
+          label: "文档",
+          value: 52,
+          img: require("../../assets/icon/fourthToolList/text.png")
+        },
+        {
+          label: "学生分组",
+          value: 49,
+          img: require("../../assets/icon/fourthToolList/group.png")
+        },
+        {
+          label: "电子白板",
+          value: 1,
+          img: require("../../assets/icon/secondToolList/whiteBoard.png")
+        },
+        {
+          label: "问答题",
+          value: 15,
+          img: require("../../assets/icon/thirdToolList/answer.png")
+        },
+        {
+          label: "选择匹配",
+          value: 41,
+          img: require("../../assets/icon/thirdToolList/select.png")
+        },
+        {
+          label: "排序",
+          value: 47,
+          img: require("../../assets/icon/fourthToolList/conSentences.png")
+        },
+        {
+          label: "个人评价",
+          value: 40,
+          img: require("../../assets/icon/secondToolList/eval.png")
+        },
+        {
+          label: "思维网格",
+          value: 7,
+          img: require("../../assets/icon/secondToolList/mindNetwork.png")
+        }
+      ],
+      studentWork: null,
+      testData: null,
+      testJson: null,
+      tool: null
+    };
   },
   methods: {
-    open({work,tool}){
-      this.show = true
-      this.studentWork = work
+    open({ work, testData, testJson, tool }) {
+      this.studentWork = work;
+      (this.testData = testData),
+        (this.testJson = testJson),
+        (this.tool = tool);
+      this.show = true;
+    },
+    close() {
+      this.show = false;
+      (this.studentWork = null),
+        (this.testData = null),
+        (this.testJson = null),
+        (this.tool = null);
+    },
+    init() {
+      this.studentWork = null;
+    }
+  },
+  computed: {
+    userAnswer() {
+      let _result = [];
+
+      if (this.studentWork && this.tool) {
+        let _studentWorks = [41].includes(this.tool)
+          ? this.studentWork.works
+          : JSON.parse(this.studentWork.works);
+        if ([45].includes(this.tool)) {
+          let _answer = _studentWorks[0].anwer;
+          _result = _answer;
+        } else if ([48, 52].includes(this.tool)) {
+          let _answer = _studentWorks.text;
+          _result = _answer;
+        } else if ([15].includes(this.tool)) {
+          let _answer = _studentWorks[0].answer;
+          _result = _answer;
+        } else if ([41].includes(this.tool)) {
+          let _answer = _studentWorks.split(",");
+          _answer.forEach((item, index) => (_answer[index] = parseInt(item)));
+          _result = _answer;
+        } else if ([47].includes(this.tool)) {
+          let _answer = _studentWorks.map(i => i.chooseSenList);
+          _result = _answer;
+        }
+      }
+
+      return _result;
     }
   }
 };
@@ -63,4 +293,229 @@ export default {
   padding: 25px;
   background-color: #f3f7fd;
 }
+
+.s_b_main {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  background-color: #fff;
+}
+
+.s_b_m_top {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 30px;
+  font-size: 20px;
+}
+
+.s_b_m_top > span {
+  cursor: pointer;
+}
+
+.s_b_m_ti_title {
+  display: flex;
+  align-items: center;
+}
+
+.s_b_m_ti_title > span:nth-of-type(1) {
+  font-size: 30px;
+  font-weight: bold;
+  color: #3681fc;
+}
+
+.s_b_m_ti_title > svg {
+  width: 30px;
+  height: 30px;
+  margin: 0 20px 0 5px;
+}
+
+.s_b_m_ti_title > span:nth-of-type(2) {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.s_b_m_ti_title > div {
+  font-size: 30px;
+  font-weight: bold;
+}
+
+.s_b_m_content {
+  width: 100%;
+  overflow: auto;
+  height: calc(100% - 70px);
+  box-sizing: border-box;
+}
+
+.s_b_m_content > div {
+  width: 70%;
+  height: auto;
+  margin: 0 auto;
+  min-width: 1000px;
+  padding: 10px 0 30px 0px;
+}
+
+.s_b_m_toolItem {
+  width: 100%;
+  height: auto;
+  margin-bottom: 40px;
+}
+
+.s_b_m_ti_option {
+  width: 100%;
+  height: auto;
+  padding: 15px 15px 15px 15px;
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #f3f7fd;
+  border-radius: 30px;
+  margin: 10px 0 10px 0px;
+  box-sizing: border-box;
+}
+
+.s_b_m_ti_option > span > img {
+  max-height: 150px;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.s_b_m_ti_o_btn {
+  width: 20px;
+  height: 100%;
+  min-height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
+}
+
+.s_b_m_ti_o_btn > span {
+  width: 20px;
+  height: 20px;
+  display: block;
+  box-sizing: border-box;
+  border: solid 1px #3681fc;
+  overflow: hidden;
+}
+
+.s_b_m_ti_o_btn > span > span {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #3681fc;
+  position: relative;
+}
+
+.s_b_m_ti_o_btn1 {
+  border-radius: 50%;
+}
+
+.s_b_m_ti_o_btn1 > span::after {
+  content: "";
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  background-color: #fff;
+  border-radius: 50%;
+}
+
+.s_b_m_ti_o_btn2 {
+  border-radius: 2px;
+}
+/*
+.s_b_m_ti_o_btn2 > span > svg {
+  width: 12px;
+  height: 12px;
+} */
+
+.s_b_m_ti_o_btn2 > span::after {
+  content: "";
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  background-color: #fff;
+  /* border-radius: 50%; */
+}
+
+.s_b_m_ti_o_choice {
+  border: solid 1px #3681fc;
+}
+
+.s_b_m_tool48 >>> table {
+  border-top: solid 1px #ccc;
+  border-left: solid 1px #ccc;
+}
+
+.s_b_m_tool48 >>> table th {
+  border-bottom: 2px solid #ccc;
+  text-align: center;
+  height: 30px;
+  vertical-align: baseline;
+  border-right: 1px solid #ccc;
+  padding: 5px 10px;
+  max-width: 0;
+  box-sizing: border-box;
+  background-color: #f1f1f1;
+}
+
+.s_b_m_tool48 >>> table td {
+  border-bottom: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  padding: 5px 10px;
+  text-align: center;
+  height: 30px;
+  min-height: 30px;
+  vertical-align: baseline;
+  max-width: 0;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+
+.s_b_m_ti_answer {
+  margin-top: 20px;
+  font-size: 20px;
+  color: #4078dd;
+}
+
+.s_b_m_tool41 {
+  display: flex;
+}
+
+.s_b_m_t_image {
+  width: calc(100% - 350px);
+  height: auto;
+}
+
+.s_b_m_t_image > img {
+  width: 95%;
+  height: auto;
+  object-fit: cover;
+}
+
+.s_b_m_t_select {
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: auto;
+}
+
+.s_b_m_t_selectItem {
+  margin-bottom: 20px;
+}
+
+.s_b_m_sortItem{
+  margin-bottom: 30px;
+}
+
+.s_b_m_s_answer{
+  padding: 10px 20px;
+  border-radius: 8px;
+  border: solid 2px red;
+}
 </style>