新增插件

src/components/question/question-form.vue

@@ -7,33 +7,56 @@
       <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
         <div class="text-caption q-mb-lg q-px-md text-grey-6">问题信息</div>
         <div class="row wrap">
-          <span v-if="objOption.QuestionId==0">题型
+          <div class="col-12" v-if="objOption.QuestionId==0">
+            题型
             <template v-for="(fItem,fIndex) in firstTypeList">
-              <q-btn :key="fIndex" color="primary" :label="fItem.Name" style="margin-left:5px;" @click="onItemClick(fItem)" />
+              <q-btn :key="fIndex" color="primary" :label="fItem.Name" style="margin-left:5px;"
+                @click="onItemClick(fItem)" />
             </template>
             <q-btn-dropdown color="primary" label="更多" style="margin-left:5px;">
               <q-list>
-                <q-item v-for="(fItem,fIndex) in secondTypeList" @click="onItemClick(fItem)" clickable v-close-popup :key="fIndex">
+                <q-item v-for="(fItem,fIndex) in secondTypeList" @click="onItemClick(fItem)" clickable v-close-popup
+                  :key="fIndex">
                   <q-item-section>
                     <q-item-label>{{fItem.Name}}</q-item-label>
                   </q-item-section>
                 </q-item>
               </q-list>
             </q-btn-dropdown>
-          </span>
-          <span>
-            {{questionObj.Name}}
-          </span>
-          <span>
+          </div>
+          <div class="col-12" style="color:blue;font-weight:800;">
+            {{questionName}}
+          </div>
+          <br />
+          <div class="col-12">
             <UeEditor v-model="objOption.Title" :config="config" ref="UE_Title"></UeEditor>
-          </span>
+          </div>
+          <br />
+          <!--单选题-->
+          <single v-if="questionObj.Key=='single'" :questionData="AnswerList" @getChild="getChildData"></single>
+          <!--多选题-->
+          <multiple v-if="questionObj.Key=='multiple'" :questionData="AnswerList" @getChild="getChildData"></multiple>
+          <br />
+          <div class="col-12">
+            答案解析<UeEditor v-model="objOption.AnswerParse" :config="config" ref="AnswerParse"></UeEditor>
+          </div>
+          <br />
+          <div class="col-12">
+            <br />
+            <q-select filled stack-label option-value="Id" option-label="Name" v-model="objOption.DifficultyType"
+              ref="DifficultyType" :options="questionDifficultyTypeList" label="难易程度" :dense="false"
+              class="col-6 q-pr-lg q-pb-lg" emit-value map-options />
+          </div>
+          <div class="col-12">
+            知识点:
+          </div>
         </div>
       </q-card-section>
       <q-separator />
       <q-card-actions align="right" class="bg-white">
         <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeCourseForm" />
         <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveCourseLoading"
-          @click="saveCourse" />
+          @click="setQuestion" />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -48,13 +71,16 @@
   } from '../../api/question/question'
 
   import UeEditor from '../editor/UeEditor'
-
+  import single from '../questiontype/single'
+  import multiple from '../questiontype/multiple'
   export default {
     components: {
       UeEditor,
+      single, //单选题
+      multiple, //多选题
     },
     props: {
-      saveObj: {
+      setingObj: {
         type: Object,
         default: null
       },
@@ -84,6 +110,7 @@
           Answer: "", //问题JSON
           Score: 0, //分数
         },
+        AnswerList: [],
         optionTitle: "",
         questionObj: {}, //题目类型对象
         firstTypeList: [], //前5个数组
@@ -92,6 +119,23 @@
         saveCourseLoading: false,
       }
     },
+    computed: {
+      questionName: {
+        get() {
+          var str = "";
+          var sumData = [];
+          sumData = sumData.concat(this.firstTypeList).concat(this.secondTypeList);
+          if (sumData && sumData.length > 0) {
+            sumData.forEach(item => {
+              if (item.Key == this.objOption.QuestionTypeKey) {
+                str = item.Name;
+              }
+            })
+          }
+          return str;
+        },
+      },
+    },
     created() {
       this.getQuestionType();
       this.getDifficultyType();
@@ -100,9 +144,59 @@
       this.initObj()
     },
     methods: {
+      //获取子组件内容
+      getChildData(obj) {
+        if (obj) {
+          this.objOption.Answer = JSON.stringify(obj);
+        }
+      },
       //题型点击
       onItemClick(item) {
         this.questionObj = item;
+        this.objOption.QuestionTypeId = item.QId;
+        this.objOption.QuestionTypeKey = item.Key;
+        switch (item.Key) {
+          //单选题
+          case "single":
+            this.AnswerList.push({
+              Name: "A",
+              Content: "",
+              IsAnswer: false
+            }, {
+              Name: "B",
+              Content: "",
+              IsAnswer: false
+            }, {
+              Name: "C",
+              Content: "",
+              IsAnswer: false
+            }, {
+              Name: "D",
+              Content: "",
+              IsAnswer: false
+            })
+            break;
+            //多选题
+          case "multiple":
+            this.AnswerList.push({
+              Name: "A",
+              Content: "",
+              IsAnswer: false
+            }, {
+              Name: "B",
+              Content: "",
+              IsAnswer: false
+            }, {
+              Name: "C",
+              Content: "",
+              IsAnswer: false
+            }, {
+              Name: "D",
+              Content: "",
+              IsAnswer: false
+            })
+            break;
+        }
       },
       //获取题型列表
       getQuestionType() {
@@ -134,9 +228,9 @@
       //初始化表单
       initObj() {
         this.objOption.CourseId = this.CourseId;
-        if (this.saveObj && this.saveObj.QuestionId > 0) {
+        if (this.setingObj && this.setingObj.QuestionId > 0) {
           queryQuestionInfo({
-            QuestionId: this.saveObj.QuestionId
+            QuestionId: this.setingObj.QuestionId
           }).then(res => {
             this.objOption.QuestionId = res.Data.QuestionId;
             this.objOption.Title = res.Data.Title;
@@ -149,6 +243,9 @@
             this.objOption.SortNum = res.Data.SortNum;
             this.objOption.Answer = res.Data.Answer;
             this.objOption.Score = res.Data.Score;
+            this.AnswerList = res.Data.AnswerObj;
+            this.questionObj.Key = res.Data.QuestionTypeKey;
+            this.questionObj.QId = res.Data.QuestionTypeId;
           })
           this.optionTitle = "修改问题信息"
         } else {
@@ -172,24 +269,23 @@
         this.persistent = false
       },
       //保存问题
-      saveCourse() {
+      setQuestion() {
         console.log(this.objOption);
-        //this.saveCourseLoading = true;
-        //this.objOption.Title=this.$refs.UE_Title.getUEContent();
-        // saveQuestion(this.objOption).then(res => {
-        //   this.saveCourseLoading = false
-        //   this.$q.notify({
-        //     icon: 'iconfont icon-chenggong',
-        //     color: 'accent',
-        //     timeout: 2000,
-        //     message: '数据保存成功！',
-        //     position: 'top'
-        //   })
-        //   this.$emit("success")
-        //   this.closeSaveForm()
-        // }).catch(() => {
-        //   this.saveCourseLoading = false
-        // })
+        this.saveCourseLoading = true;
+        saveQuestion(this.objOption).then(res => {
+          this.saveCourseLoading = false
+          this.$q.notify({
+            icon: 'iconfont icon-chenggong',
+            color: 'accent',
+            timeout: 2000,
+            message: '数据保存成功！',
+            position: 'top'
+          })
+          this.$emit("success")
+          this.closeSaveForm()
+        }).catch(() => {
+          this.saveCourseLoading = false
+        })
       }
     },
   }

src/components/questiontype/multiple.vue

+<!--多选题-->
+<style>
+
+</style>
+<template>
+  <div class="multipleQuestion">
+    <table v-if="data&&data.length>0">
+      <tr v-for="(item,index) in data">
+        <td>
+          <el-checkbox v-model="item.IsAnswer">{{item.Name}}</el-checkbox>
+        </td>
+        <td>
+          <UeEditor v-model="item.Content" :config="config"></UeEditor>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+<script>
+  import UeEditor from '../editor/UeEditor'
+  export default {
+    props: {
+      questionData: {
+        type: Array,
+      }
+    },
+    components: {
+      UeEditor
+    },
+    data() {
+      return {
+        choicImg: false,
+        data: this.questionData,
+        config: {
+          initialFrameWidth: null,
+          initialFrameHeight: 80,
+        },
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      //返回数据到父组件
+      returnDataToParent() {
+        this.$emit('getChild', this.data);
+      },
+
+    },
+    mounted() {
+
+    },
+    watch: {
+      data: {
+        handler(newValue) {
+          this.returnDataToParent();
+        },
+        deep: true
+      },
+    }
+  };
+
+</script>

src/components/questiontype/single.vue

+<!--单选题-->
+<style>
+
+</style>
+<template>
+  <div class="singleQuestion">
+    <table v-if="data&&data.length>0">
+      <tr v-for="(item,index) in data">
+        <td>
+          <el-checkbox v-model="item.IsAnswer"  @change="ChangeItem(item)"   >{{item.Name}}</el-checkbox>
+        </td>
+        <td>
+          <UeEditor v-model="item.Content" :config="config"></UeEditor>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+<script>
+  import UeEditor from '../editor/UeEditor'
+  export default {
+    props: {
+      questionData: {
+        type: Array,
+      }
+    },
+    components: {
+      UeEditor
+    },
+    data() {
+      return {
+        choicImg: false,
+        data: this.questionData,
+        config: {
+          initialFrameWidth: null,
+          initialFrameHeight: 80,
+        },
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      //返回数据到父组件
+      returnDataToParent() {
+        this.$emit('getChild', this.data);
+      },
+      ChangeItem(item) {
+        if (this.data && this.data.length > 0) {
+          this.data.forEach(item => {
+            item.IsAnswer = false;
+          })
+        }
+        item.IsAnswer = true;
+      },
+    },
+    mounted() {
+
+    },
+    watch: {
+      data: {
+        handler(newValue) {
+          this.returnDataToParent();
+        },
+        deep: true
+      },
+    }
+  };
+
+</script>

src/pages/course/question.vue

@@ -32,6 +32,10 @@
             <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增题目" @click="EditQuestion(null)" />
           </div>
         </template>
+        <template v-slot:body-cell-Title="props">
+          <span v-html="props.row.Title">
+          </span>
+        </template>
         <template v-slot:bottom>
           <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
             :input="true" @input="changePage" />