From 627f3fff60919eba80372a7b18a69bc537c6d65b Mon Sep 17 00:00:00 2001
From: LH_PC <2604481917@qq.com>
Date: Thu, 22 Aug 2024 09:09:43 +0800
Subject: [PATCH] fix:前端知识点组件代码

---
 src/assets/images/example-backup.jpg                        | Bin 0 -> 530978 bytes
 src/assets/images/example.png                               | Bin 0 -> 37446 bytes
 src/components/knowledgePoints.vue                          | 247 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/preview.vue                                  |  58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/basic/askTestQuestion/components/testScoreSet.vue | 416 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 721 insertions(+), 0 deletions(-)
 create mode 100644 src/assets/images/example-backup.jpg
 create mode 100644 src/assets/images/example.png
 create mode 100644 src/components/knowledgePoints.vue
 create mode 100644 src/components/preview.vue
 create mode 100644 src/views/basic/askTestQuestion/components/testScoreSet.vue

diff --git a/src/assets/images/example-backup.jpg b/src/assets/images/example-backup.jpg
new file mode 100644
index 0000000..996cf9e
Binary files /dev/null and b/src/assets/images/example-backup.jpg differ
diff --git a/src/assets/images/example.png b/src/assets/images/example.png
new file mode 100644
index 0000000..3291039
Binary files /dev/null and b/src/assets/images/example.png differ
diff --git a/src/components/knowledgePoints.vue b/src/components/knowledgePoints.vue
new file mode 100644
index 0000000..bddbc9e
--- /dev/null
+++ b/src/components/knowledgePoints.vue
@@ -0,0 +1,247 @@
+<template>
+    <el-container class="default-knowledge-body" v-loading="loading">
+        <el-main class="knowledge-main">
+            <div>
+                <el-row :gutter="20" class="knowledge-row" v-if="false">
+                    <el-col :span="8" style="float: right;">
+                        <div class="grid-content bg-purple">
+                            <el-input placeholder="搜索知识点" v-model="knowledgKeyword">
+                                <el-button slot="append" @click="_knowledgSerach" icon="el-icon-search" />
+                            </el-input>
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20" class="knowledge-row">
+                    <el-col>
+                        <label class="input-tags-label">已设置知识点：</label>
+                        <div class="input-tags">
+                            <el-tag class="knowledgTag" v-for="(knowledg, knowledgIndex) in knowledgValues"
+                                :key="knowledgIndex" closable @close="_knowledgRemove(knowledgIndex)">
+                                {{ knowledg[knowledg.length - 1] }}
+                            </el-tag>
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20" class="knowledge-row" style="margin:0px !important;">
+                    <el-cascader-panel :value="knowledgValues" ref="knowledgeCascader" @change="_knowledgeChange"
+                        @expand-change="_knowledgeExpandChange" :props="knowledgeOptions" :options="knowledgeList"
+                        :default-expanded-keys="[]" placeholder="请选择知识点" :filterable="true" />
+                </el-row>
+            </div>
+        </el-main>
+        <el-footer class="knowledge-footer">
+            <el-button @click="_opration('cancel')">取 消</el-button>
+            <el-button type="primary" @click="_opration('confirm')">确 定</el-button>
+        </el-footer>
+    </el-container>
+</template>
+<script>
+export default {
+    props: {
+        knowledges: "",
+        ///学段
+        sectionName: "",
+        ///学科
+        subjectName: "",
+    },
+    data() {
+        return {
+            loading: false,
+            ///级联选择框参数
+            knowledgeOptions: {
+                //多选
+                multiple: true,
+                //父子节点不关联
+                checkStrictly: true
+            },
+            knowledgMaxLength: 5,
+            knowledgeData: [],
+            knowledgeList: [],
+            knowledgKeyword: "",
+            knowledgValues: [],
+        }
+    },
+    methods: {
+        _opration(opration) {
+            var outKnowledges = this.knowledgValues.map(mo => {
+                return '#' + mo.join('#');
+            });
+            this.$emit('opration', {
+                opration: opration,
+                knowledges: outKnowledges
+            });
+        },
+        _knowledgeChange(values) {
+
+            if (values.length > this.knowledgMaxLength) {
+                this.$message.error(`最多只能选择 ${this.knowledgMaxLength} 项`);
+                this.$nextTick(() => {
+                    this.$refs.knowledgeCascader.checkedValue = this.knowledgValues;
+                    this.$refs.knowledgeCascader.checkedNodePaths = this.$refs.knowledgeCascader.checkedNodePaths.splice(5, 1)
+                    this.$refs.knowledgeCascader.syncMultiCheckState();
+                    this.$refs.knowledgeCascader.syncActivePath();
+
+                })
+                this._clearNotChecked();
+                return;
+            }
+            this._clearNotChecked();
+            this.knowledgValues = values;
+        },
+        _knowledgeExpandChange(values) {
+            this._clearNotChecked();
+        },
+        _knowledgRemove(knowledgIndex) {
+            this.knowledgValues.splice(knowledgIndex, 1);
+            this.$refs.knowledgeCascader.checkedValue = this.knowledgValues;
+            this.$refs.knowledgeCascader.syncMultiCheckState();
+        },
+        _knowledgSerach() {
+
+        },
+        _knowledgFilter(data, query) {
+            return data
+                .map((item) => {
+                    const children = item.children ? this._knowledgFilter(item.children, query) : [];
+                    if (children.length || item.value.toLowerCase().indexOf(query) >= 0) {
+                        return {
+                            ...item,
+                            children: children.length ? children : undefined,
+                        };
+                    }
+                    return null;
+                })
+                .filter((item) => item);
+        },
+        async _knowledgInit() {
+
+            var { data, info, status } = await this.$request.gKnowledge(this.$props.sectionName, this.$props.subjectName);
+
+            if (status != 0) {
+
+                this.$message.error(info);
+
+                return;
+            }
+
+            this.knowledgeData = [...data];
+
+            this.knowledgeList = [...this.knowledgeData]
+
+            if (this.$props.knowledges && this.$props.knowledges.length >= 1) {
+
+                var propsKnowledges = this.$props.knowledges?.split(',').map(item => item?.split('#').filter(fdl => fdl?.length >= 1));
+
+                this.knowledgValues = propsKnowledges;
+            }
+        },
+        _clearNotChecked() {
+            this.$nextTick(() => {
+                if (!this.$refs.knowledgeCascader.$el) return;
+                var checkedPath = this.$refs.knowledgeCascader.$el.querySelectorAll('.in-checked-path');
+
+                for (var ofi = 0; ofi < checkedPath.length; ofi++) {
+                    var checkPath = checkedPath[ofi];
+                    var checkPathIsChecked = checkPath.querySelectorAll('.is-checked');
+                    if (checkPathIsChecked.length < 1) {
+                        checkPath.classList.remove('in-checked-path');
+                    }
+                }
+
+            });
+        }
+    },
+    mounted() {
+
+    },
+    async created() {
+
+        this.loading = true;
+
+        await this._knowledgInit();
+
+        this.loading = false;
+
+        this.$nextTick(() => {
+            if (!this.$refs.knowledgeCascader.menus) return;
+            this.$refs.knowledgeCascader.menus = [this.$refs.knowledgeCascader.menus[0]]
+        })
+
+        this._clearNotChecked();
+    }
+}
+</script>
+<style lang="scss">
+.default-knowledge-body {
+
+
+    padding: 0px !important;
+
+    .knowledge-footer {
+        text-align: right;
+        padding: 10px;
+    }
+
+    .el-main {
+        padding: 0px !important;
+    }
+
+    .knowledge-main {
+        width: 100%;
+        padding: 0px 10px !important;
+
+        .el-cascader-node.in-active-path {
+            background: #cddbe8 !important;
+        }
+
+        .el-cascader-node.in-active-path:not(.in-checked-path) {
+            color: #606266 !important;
+        }
+
+        .el-cascader-node.is-selectable.in-active-path {
+            background: #ecf5ff;
+        }
+
+        .el-cascader-panel {
+            width: 100% !important;
+        }
+
+        .input-tags-label {
+            float: left;
+            line-height: 40px;
+            margin-right: 12px;
+        }
+
+        .input-tags {
+            border: 1px solid #DCDFE6;
+            min-height: 40px;
+            margin-left: 130px;
+            border-radius: 5px;
+            padding: 5px 5px 0px 5px;
+        }
+
+        .knowledge-row {
+            .knowledgTag {
+                margin-right: 5px;
+                margin-bottom: 5px;
+            }
+
+            margin-bottom: 10px;
+
+            .el-input-group__append {
+                background-color: transparent !important;
+                border-left: none !important;
+                padding-right: 10px !important;
+
+                .el-icon-search {
+                    font-size: 20px;
+                }
+            }
+
+            .el-input__inner {
+                border-right: none !important;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/preview.vue b/src/components/preview.vue
new file mode 100644
index 0000000..19143c2
--- /dev/null
+++ b/src/components/preview.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="preview">
+        <iframe v-if="type == 'html'" ref="iframe" :src="$props.src" style="width: 100%; height: 500px;" />
+        <el-image v-if="type == 'image'" ref="iframe" :src="$props.src" style="width: 100%; height: 500px;" />
+    </div>
+</template>
+<script>
+export default {
+    name: "PreView",
+    props: {
+        src: "",
+    },
+    watch: {
+        $props: {
+            handler: function (val) {
+                console.log('change', val)
+            },
+            deep: false,
+        }
+    },
+    data() {
+        return {
+            type: ""
+        }
+    },
+    watch: {
+        '$props.src'() {
+            this._isCheckType();
+        }
+    },
+    methods: {
+        _isImagePath(path) {
+            return /\.(jpg|jpeg|png|gif|bmp|svg|webp)$/i.test(path);
+        },
+        _isCheckType() {
+            if (this._isImagePath(this.$props.src)) {
+                this.type = 'image'
+            } else {
+                this.type = 'html'
+            }
+        }
+    },
+    created() {
+        this._isCheckType();
+    }
+}
+</script>
+<style scoped lang="scss">
+.preview {
+
+    iframe,
+    .el-image__inner {
+        height: calc(100%-10px) !important;
+        width: calc(100%-10px) !important;
+        z-index: -1;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/basic/askTestQuestion/components/testScoreSet.vue b/src/views/basic/askTestQuestion/components/testScoreSet.vue
new file mode 100644
index 0000000..aa24fe7
--- /dev/null
+++ b/src/views/basic/askTestQuestion/components/testScoreSet.vue
@@ -0,0 +1,416 @@
+<template>
+    <div class="set-container" ref="scoreSet" v-loading="loading">
+      <div class="back">
+        <div class="back-l" @click="closeScoreSet">
+          <i class="fa fa-mail-reply-all"></i>
+          <span>答卷录分</span>
+        </div>
+      </div>
+      <div class="set-content">
+        <div class="test-title">
+          <el-button class="import-btn" round @click="diaUp = true"
+            >从excel文件导入</el-button
+          >
+          <el-button
+            class="save-btn"
+            type="primary"
+            round
+            :loading="loadingSave"
+            @click="_SubmitScore"
+            >保存</el-button
+          >
+          <p class="p1">{{ title }}</p>
+          <p class="p2">卷面总分：{{ examScore }}分</p>
+        </div>
+        <el-table
+          :data="tableData"
+          border
+          style="width: 100%"
+          :max-height="tableMaxHeight"
+        >
+          <el-table-column
+            prop="studentCode"
+            label="学号"
+            align="center"
+            fixed
+          ></el-table-column>
+          <el-table-column
+            prop="studentName"
+            label="学号"
+            align="center"
+            fixed
+          ></el-table-column>
+          <el-table-column prop="score" label="总得分" align="center" fixed
+            ><template slot-scope="scoped">
+              <el-input
+                v-if="showAllSetScore"
+                type="number"
+                :min="0"
+                v-model="scoped.row.all"
+              ></el-input>
+              <template v-else>{{ scoped.row.all }}</template>
+            </template></el-table-column
+          >
+          <el-table-column prop="objectiveScore" label="客观题分" align="center"
+            ><template slot-scope="scoped">
+              <!-- <el-input
+                v-if="scoped.row.showSetScore"
+                type="number"
+                :min="0"
+                v-model="scoped.row.object"
+                @input="setOtherScore($event, scoped.row)"
+              ></el-input> -->
+              <template>{{ scoped.row.object }}</template>
+            </template></el-table-column
+          >
+          <el-table-column prop="subjectiveScore" label="主观题分" align="center">
+            <template slot-scope="scoped">
+              <!-- <el-input
+                v-if="scoped.row.showSetScore"
+                type="number"
+                :min="0"
+                v-model="scoped.row.subject"
+                @input="setOtherScore($event, scoped.row)"
+              ></el-input> -->
+              <template>{{ scoped.row.subject }}</template>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column v-for="(item, index) in questionList" :key="index" :label="'第' + cNum[index] + '大题'" -->
+          <el-table-column
+            v-for="(question, index) in questionList"
+            :key="index"
+            :label="'Q' + question.questionId"
+            align="center"
+          >
+            <template slot-scope="scoped">
+              <el-input
+                v-if="showSetScore"
+                type="number"
+                :min="0"
+                :max="question.questionScore"
+                @input="
+                  setScore(
+                    $event,
+                    question.questionScore,
+                    scoped.row.scoreMap,
+                    question.questionId,
+                    scoped.row
+                  )
+                "
+                v-model="scoped.row.scoreMap[question.questionId]"
+              ></el-input>
+              <template v-else>{{
+                scoped.row.scoreMap[question.questionId]
+              }}</template>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+  
+      <el-dialog
+        :close-on-click-modal="false"
+        :append-to-body="true"
+        title="答卷录分"
+        :visible.sync="diaUp"
+        width="600px"
+        top="120px"
+      >
+        <upload
+          :url="url"
+          :examId="id"
+          @upSuccess="upSuccess"
+          fileName="主观题分数"
+          v-loading="loadingDown"
+        >
+          <template slot="down">
+            <p class="down-txt">
+              第一步：<el-link type="danger" @click="downExcel">下载模板</el-link
+              >，并编辑完成学生分数。
+            </p>
+            <p class="down-txt">第二步：上传完成编辑的模板文件并导入。</p>
+          </template>
+        </upload>
+        <div class="dialog-footer" slot="footer">
+          <el-button @click="diaUp = false">取 消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </template>
+  <script>
+  import { downloadFile, cNum } from "utils";
+  export default {
+    name: "testScoreSet",
+    props: {
+      title: String,
+      id: String,
+      role: String,
+      examScore: {
+        type: Number,
+        default: 0,
+      },
+      diaScoreSet: false,
+      showAllSetScore: false,
+      showSetScore: false,
+    },
+    data() {
+      return {
+        diaUp: false,
+        loading: false,
+        loadingDown: false,
+        loadingSave: false,
+        url: "/api_html/teaching/importScore",
+        tableData: [],
+        questionList: [],
+        cNum: cNum,
+        tableMaxHeight: 300,
+      };
+    },
+    watch: {
+      diaScoreSet: {
+        handler: function (nVal) {
+          if (nVal) {
+            this._QueryData();
+          }
+        },
+      },
+    },
+    methods: {
+      //设置小题分
+      setScore(val, max, obj, questionId, rowData) {
+        if (max && Number(val) > Number(max)) {
+          obj[questionId] = max;
+        }
+        let { score, object, subject } = this.getScore(rowData);
+        rowData.all = score;
+        rowData.object = object;
+        rowData.subject = subject;
+      },
+      //计算总分
+      setAllScore(obj) {
+        let { score } = this.getScore(obj);
+        return score;
+      },
+      //计算客观总分
+      setObjectScore(obj) {
+        let { object } = this.getScore(obj);
+        return object;
+      },
+      //计算主观总分
+      setSubjectScore(obj) {
+        let { subject } = this.getScore(obj);
+        return subject;
+      },
+      getScore(obj) {
+        let score = 0;
+        let subject = 0;
+        let object = 0;
+        this.questionList.map((question) => {
+          let keys = question.questionId;
+          if (!obj.scoreMap[keys]) {
+            if (obj.scoreMap[keys] == 0) {
+              obj.scoreMap[keys] = 0;
+            } else {
+              obj.scoreMap[keys] = "";
+            }
+          } else {
+            let num = Number(obj.scoreMap[keys]);
+            obj.scoreMap[keys] = num;
+            score += num;
+            if (question.questionType == 5) {
+              subject += num;
+            } else {
+              object += num;
+            }
+          }
+        });
+        return { score, subject, object };
+      },
+      closeScoreSet() {
+        this.$emit("closeScoreSet");
+      },
+      setTableHeight() {
+        this.tableMaxHeight = this.$refs.scoreSet.offsetHeight - 135;
+      },
+      async _QueryData() {
+        this.loading = true;
+        const { data, status, info } =
+          await this.$request.listStudentsAndQuestions({
+            examId: this.id,
+          });
+        this.loading = false;
+        if (status === 0) {
+          let studentList = data.students || [];
+          this.questionList = data?.questionList || [];
+          if (this.questionList.length == 0) {
+            this.questionList = Object.keys(studentList[0].scoreMap).map(
+              (item) => {
+                return {
+                  questionId: item.split('=')[0],
+                  questionIndex: item.split('=')[1],
+                  questionScore: 20,
+                };
+              }
+            );
+          }
+          this.tableData =  
+            studentList.map((item) => {
+              item.all = item.all || 0; //总分
+              item.object = item.object || 0; //客观题分数
+              item.subject = item.subject || 0; //主观题分数
+              if (!item.scoreMap) item.scoreMap = {};
+              this.questionList.map((question) => {
+                let keys = question.questionId;
+                if (!item.scoreMap[keys]) {
+                  if (item.scoreMap[keys] == 0) {
+                    item.scoreMap[keys] = 0;
+                  } else {
+                    item.scoreMap[keys] = "";
+                  }
+                } else {
+                  let num = Number(item.scoreMap[keys]);
+                  item.scoreMap[keys] = num;
+                }
+              });
+  
+              return item;
+            }) || [];
+          this.setTableHeight();
+        } else {
+          this.$message.error(info);
+        }
+      },
+      async _SubmitScore() {
+        this.loadingSave = true;
+        let list = this.tableData.map((item) => {
+          let scoreMap = {};
+          for (let keys in item.scoreMap) {
+            if (item.scoreMap[keys] !== "") {
+              scoreMap[keys] = item.scoreMap[keys] + "";
+            }
+          }
+          scoreMap.all = item.all + "";
+          scoreMap.object = item.object + "";
+          scoreMap.subject = item.subject + "";
+          return {
+            studentCode: item.studentCode,
+            scores: scoreMap,
+          };
+        });
+        const { data, status, info } = await this.$request.submitScore({
+          examId: this.id,
+          list,
+        });
+        this.loadingSave = false;
+        if (status === 0) {
+          this.$message.success(info);
+          this.closeScoreSet();
+          this.$emit("SuccessScoreSet");
+        } else {
+          this.$message.error(info);
+        }
+      },
+  
+      //导入成功
+      upSuccess(res) {
+        this.$message.success("导入成功");
+        this.diaUp = false;
+        // this.closeScoreSet();
+        this.$emit("SuccessScoreSet");
+      },
+      async downExcel() {
+        //模板下载
+        this.loadingDown = true;
+        let data = await this.$request.scoreTemplate({
+          examId: this.id,
+        });
+        this.loadingDown = false;
+        if (data && !data.code) {
+          let blob = new Blob([data], {
+            type: "application/vnd.ms-excel;charset=utf-8",
+          });
+          downloadFile(`答卷录分模版.xlsx`, blob);
+        } else {
+          this.$message.error(data.info);
+        }
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .set-container {
+    position: fixed;
+    left: 200px;
+    top: 50px;
+    width: calc(100% - 200px);
+    height: calc(100% - 70px);
+    background: #fff;
+    z-index: 2000;
+    overflow-y: auto;
+  }
+  
+  .back {
+    width: 100%;
+    height: 56px;
+    border-bottom: 1px solid #e2e2e2;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    box-sizing: border-box;
+  
+    .back-l {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      flex-shrink: 0;
+      font-size: 18px;
+      font-weight: 500;
+    }
+  
+    .back-r {
+      flex: 1;
+      display: flex;
+      justify-content: flex-end;
+    }
+  
+    .fa-mail-reply-all {
+      font-size: 28px;
+      color: #b3b3b3;
+      margin-right: 12px;
+    }
+  }
+  
+  .set-content {
+    padding: 0 20px;
+  
+    .test-title {
+      width: 100%;
+      text-align: center;
+      position: relative;
+      padding: 10px 0;
+  
+      .import-btn {
+        position: absolute;
+        right: 100px;
+        top: 15px;
+      }
+  
+      .save-btn {
+        position: absolute;
+        right: 0;
+        top: 15px;
+      }
+  
+      .p1 {
+        font-size: 18px;
+        font-weight: 700;
+      }
+    }
+  }
+  
+  .btn-box {
+    padding-top: 12px;
+    text-align: right;
+  }
+  </style>
\ No newline at end of file
--
libgit2 0.21.4