修改

src/components/exam/questionbank-form.vue

@@ -15,7 +15,7 @@
         </div>
         <div class="page-content">
           <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
-            class="sticky-column-table sticky-header-column-table" style="max-height: 550px" separator="none" :data="dataList" :columns="columns"
+            class="sticky-column-table sticky-header-column-table" style="max-height: 440px" separator="none" :data="dataList" :columns="columns"
             row-key="BankId" selection="multiple" :selected.sync="selectedQuestionBank">
             <template v-slot:top="props">
               <div class="col-2 q-table__title">题库列表</div>
@@ -47,6 +47,12 @@
     queryQuestionBankPage,
   } from '../../api/question/question';
   export default {
+    props: {
+      CheckedArray: {
+        type: Array,
+        default: null
+      },
+    },
     data() {
       return {
         persistent: true,
@@ -83,6 +89,9 @@
       }
     },
     mounted() {
+      if(this.CheckedArray&&this.CheckedArray.length>0){
+        this.selectedQuestionBank = this.CheckedArray;
+      }
       this.getQuestionBankPage();
     },
     methods: {
@@ -115,10 +124,7 @@
         var tempArray = [];
         if (this.selectedQuestionBank && this.selectedQuestionBank.length > 0) {
           this.selectedQuestionBank.forEach(item => {
-            tempArray.push({
-              BankId: item.BankId,
-              BankName: item.BankName,
-            })
+            tempArray.push(item);
           })
         }
         this.$emit('success', tempArray);

src/pages/exam/paperCreate.vue

@@ -2,18 +2,25 @@
 <style>
   .examCreat_Top {
     width: 100%;
-    height: 30px;
-    line-height: 30px;
+    height: 40px;
+    line-height: 35px;
     padding: 0 10px;
     margin-bottom: 20px;
     border-bottom: 1px solid #ddd;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size:20px;
   }
 
   .examTi_List {
     border: 1px solid #ddd;
     margin-bottom: 20px;
   }
-
+  .examCreat_Top i{
+    color: var(--q-color-negative);
+    font-size: 20px;
+  }
   .examCreat_Top i:hover {
     color: red;
     cursor: pointer;
@@ -24,7 +31,7 @@
     padding-top: 12px;
     border-radius: 4px;
     padding: 12px 4px 0 4px;
-    margin: 20px 0 10px 68px;
+    margin: 20px 0 10px 60px;
   }
 
   .setpaperCreat span {
@@ -40,19 +47,39 @@
     font-size: 12px;
   }
 
+  .paperCreate .EmpLine_title {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    margin-bottom: 20px;
+  }
+
+  .paperCreate .Emp_Line {
+    width: 3px;
+    height: 10px;
+    background-color: #3FC4FF;
+    margin-right: 10px;
+  }
 </style>
 <template>
-  <div class="page-body">
-    <div>
-      组卷题库
-      <q-btn color="accent" size="sm" @click="showQuestionBank" class="q-mr-md" label="选择题库"  /><br />
+  <div class="page-body paperCreate">
+    <div style="display:flex;justify-content:space-between;">
+      <div>
+        组卷题库
+        <q-btn color="accent" size="sm" @click="showQuestionBank" class="q-mr-md" label="选择题库"  />
+      </div>
+      <div>
+        <q-btn color="accent" size="sm" @click="showExamTemplate" label="选择模板" />
+      </div>
     </div>
     <div class="setpaperCreat" v-if="QuestionArray.length>0">
       <span v-for="(item,index) in QuestionArray" :key="index">{{item.BankName}}</span>
     </div>
-    <q-btn color="accent" size="sm" style="margin-top:20px;"  @click="showExamTemplate"  class="q-mr-md"  label="选择模板"
-        /><br />
     <br />
+    <div class="EmpLine_title">
+      <div class="Emp_Line"></div>
+      <div>基本信息</div>
+    </div>
     <div class="row">
       <q-input filled stack-label maxlength="100" :dense="false" v-model="templateMsg.TemplateName"
         class="col-6 q-pb-lg q-pr-lg" label="试卷标题" />
@@ -61,32 +88,36 @@
     </div>
     <div class="row">
       <q-input filled stack-label maxlength="5" :dense="false" ref="TemplateNum" v-model="templateMsg.TemplateNum"
-        class="col-6 q-pb-lg q-pr-lg" label="随机组卷数量" @keyup.native="checkInteger(templateMsg,'TemplateNum')"
-        :rules="[val => !!val || '请填写随机组卷数量']" />
+        class="col-6 q-pb-lg q-pr-lg" label="随机组卷数量" @keyup.native="checkInteger(templateMsg,'TemplateNum')" />
       <q-select filled option-value="Id" option-label="Name" :options="questionDifficultyTypeList" emit-value
         map-options label="难易程度" class="col-6" use-input clearable v-model="templateMsg.TemplateDifficultyType" />
     </div>
+    <div class="EmpLine_title">
+      <div class="Emp_Line"></div>
+      <div>试卷配置</div>
+    </div>
     <!-- 分割线<br /> -->
     <template v-if="templateMsg&&templateMsg.TemplateData&&templateMsg.TemplateData.length>0">
       <div v-for="(item,index) in templateMsg.TemplateData" :key="index" class="examTi_List">
         <div class="examCreat_Top">
-          <span>{{item.QuestionTypeName}}</span> &nbsp;&nbsp;<i @click="delQuestion(templateMsg.TemplateData,index)"
-            class="iconfont icon-img_delete_small"></i>
+          <div>{{item.QuestionTypeName}}</div>
+          <div><i @click="delQuestion(templateMsg.TemplateData,index)"
+            class="iconfont icon-img_delete_small"></i></div>
         </div>
         <div style="padding:0 20px 10px 20px;">
           <div class="row">
             <q-input filled stack-label maxlength="5" :dense="false" v-model="item.QuestionScore"
               class="col-6 q-pb-lg q-pr-lg" label="总分" @keyup.native="checkInteger(item,'QuestionScore')" />
             <q-input filled stack-label maxlength="100" :dense="false" v-model="item.QuestionDesc" class="col-6 q-pb-lg"
-              label="题型说明" />
+              label="题干信息" />
           </div>
           <span>
             <q-radio v-model="item.ChooseType" :val="1" label="从题库选题" />
             <template v-if="item.ChooseType==1">
               <span style="position:relative;top:2px;">共 {{item.QuestionTypeNum}} 道 抽
-                <el-input style="width:100px;" size="small" :disabled="templateMsg.TemplateBankIds!=''&&item.QuestionTypeNum<=0"
-                  @input="getMaxInput(item)" v-model="item.ChooseNum" @keyup.native="checkInteger(item,'ChooseNum')"
-                  maxlength="5"></el-input>
+                <el-input style="width:100px;" size="small"
+                  :disabled="templateMsg.TemplateBankIds!=''&&item.QuestionTypeNum<=0" @input="getMaxInput(item)"
+                  v-model="item.ChooseNum" @keyup.native="checkInteger(item,'ChooseNum')" maxlength="5"></el-input>
                 &nbsp;&nbsp;道</span>
             </template>
           </span>
@@ -97,7 +128,8 @@
               <div style="margin:0 0 20px 40px;" v-for="(subItem,subIndex) in item.ChooseList" :key="subIndex">
                 {{subItem.DifficultyTypeName}} （共
                 {{subItem.DifficultyTypeCount}} 道） 抽
-                <el-input style="width:100px;" size="small" :disabled="templateMsg.TemplateBankIds!=''&&subItem.DifficultyTypeCount<=0"
+                <el-input style="width:100px;" size="small"
+                  :disabled="templateMsg.TemplateBankIds!=''&&subItem.DifficultyTypeCount<=0"
                   @input="getMaxMiniInput(subItem)" @keyup.native="checkInteger(subItem,'ChooseNum')"
                   v-model="subItem.ChooseNum" maxlength="5"></el-input>
                 &nbsp;&nbsp;道
@@ -107,25 +139,36 @@
         </div>
       </div>
     </template>
-
     <div class="row">
-      <q-select filled option-value="QId" option-label="Name" :options="questionTypeList" emit-value map-options
-        label="更多题型" class="col-6 q-pr-lg" use-input clearable v-model="MoreQuestionTypeId" @input="changeQuestion" />
-      <div class="row col-6" style="align-items:center;">
-        <div class="col-6">
-          <q-radio v-model="templateMsg.IsOpen" :val="1" label="私有" />
-          <q-radio v-model="templateMsg.IsOpen" :val="2" label="公开" />
-        </div>
-        <div class="col-6">
-          <q-checkbox v-model="templateMsg.IsSaveTemplate" label="同时保存为组卷模板" />
-        </div>
+      <div class="col-6">
+        <q-btn-dropdown color="primary" label="添加题型">
+          <q-list>
+            <q-item clickable v-close-popup @click="onItemClick(item)" v-for="(item,index) in questionTypeList"
+              :key="index">
+              <q-item-section>
+                <q-item-label>{{item.Name}}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-btn-dropdown>
+      </div>
+    </div>
+    <div class="row q-mt-lg">
+      <div class="col-6">
+        <span>开放状态</span>
+        <q-radio v-model="templateMsg.IsOpen" :val="1" label="私有" />
+        <q-radio v-model="templateMsg.IsOpen" :val="2" label="公开" />
+      </div>
+      <div class="col-6">
+        <q-checkbox v-model="templateMsg.IsSaveTemplate" label="同时保存为组卷模板" />
       </div>
     </div>
     <br />
     <div class="row">
-      <q-btn color="accent" size="sm" @click="setPaperTemplate" class="q-mr-md" label="保存" :loading="saveLoading" />
+      <q-btn color="accent" @click="setPaperTemplate" class="q-mr-md" label="保存" :loading="saveLoading" />
     </div>
-    <questionbankForm v-if="isShowQuestionBank"  @close="closeExamForm"  @success="getBankData">
+    <questionbankForm v-if="isShowQuestionBank"  @close="closeExamForm" :CheckedArray="QuestionArray"
+       @success="getBankData">
     </questionbankForm>
     <examtemplateForm v-if="isShowExamTemplate"  @close="closeExamForm"  @success="getTemplateData">
     </examtemplateForm>
@@ -171,7 +214,6 @@
         },
         ShowBankName: "", //显示题库名称
         BankList: [],
-        MoreQuestionTypeId: "", //更多题型
         questionTypeList: [], //问题列表
         saveLoading: false,
         QuestionArray: []
@@ -192,12 +234,12 @@
     methods: {
       //设置最大值
       getMaxInput(item) {
-        if (templateMsg.TemplateBankIds!=''&& item.ChooseNum > item.QuestionTypeNum) {
+        if (templateMsg.TemplateBankIds != '' && item.ChooseNum > item.QuestionTypeNum) {
           item.ChooseNum = '';
         }
       },
       getMaxMiniInput(item) {
-        if (templateMsg.TemplateBankIds!=''&&item.ChooseNum > item.DifficultyTypeCount) {
+        if (templateMsg.TemplateBankIds != '' && item.ChooseNum > item.DifficultyTypeCount) {
           item.ChooseNum = '';
         }
       },
@@ -209,40 +251,54 @@
           }
         });
       },
-      //选择添加题型
-      changeQuestion() {
-        if (this.MoreQuestionTypeId && this.MoreQuestionTypeId != '') {
-          //获取问题类型
-          var qTypeObj = this.questionTypeList.find((item) => {
-            return item.QId === this.MoreQuestionTypeId;
-          });
-          var newObj = this.createdTempObj();
-          if (qTypeObj) {
-            newObj.QuestionTypeId = qTypeObj.QId;
-            newObj.QuestionTypeKey = qTypeObj.Key;
-            newObj.QuestionTypeName = qTypeObj.Name;
-          }
-          //获取题库中的题型
-          var chooseQuestion = this.BankList.find((item) => {
-            return item.QuestionTypeId === this.MoreQuestionTypeId;
-          });
-          //题库中有此题型
-          if (chooseQuestion) {
-            newObj.QuestionTypeNum = chooseQuestion.QuestionTypeNum;
-            newObj.ChooseList = chooseQuestion.ChooseList;
-          }
-          if (newObj && newObj.QuestionTypeId > 0) {
-            if (!this.checkExists(newObj.QuestionTypeId)) {
-              this.templateMsg.TemplateData.push(newObj);
-            } else {
-              this.$q.notify({
-                type: 'negative',
-                position: "top",
-                message: `已存在此题型,请勿重复选择!`
-              })
-            }
+      //点击添加题型
+      onItemClick(myObj) {
+        //获取问题类型
+        var qTypeObj = this.questionTypeList.find((item) => {
+          return item.QId === myObj.QId;
+        });
+        var newObj = this.createdTempObj();
+        if (qTypeObj) {
+          newObj.QuestionTypeId = qTypeObj.QId;
+          newObj.QuestionTypeKey = qTypeObj.Key;
+          newObj.QuestionTypeName = qTypeObj.Name;
+        }
+        //获取题库中的题型
+        var chooseQuestion = this.BankList.find((item) => {
+          return item.QuestionTypeId === myObj.QId;
+        });
+        //题库中有此题型
+        if (chooseQuestion) {
+          newObj.QuestionTypeNum = chooseQuestion.QuestionTypeNum;
+          newObj.ChooseList = chooseQuestion.ChooseList;
+        }
+        if (newObj && newObj.QuestionTypeId > 0) {
+          if (!this.checkExists(newObj.QuestionTypeId)) {
+            this.templateMsg.TemplateData.push(newObj);
+          } else {
+            this.$q.notify({
+              type: 'negative',
+              position: "top",
+              message: `已存在此题型,请勿重复选择!`
+            })
           }
         }
+        this.filterChecked();
+      },
+      //过滤已经选中
+      filterChecked(){
+        var NewData = JSON.parse(JSON.stringify(this.questionTypeList));
+        let newArray = [];
+        if((this.templateMsg.TemplateData&&this.templateMsg.TemplateData.length>0)&&(NewData&&NewData.length>0)){
+          this.templateMsg.TemplateData.forEach(x=>{
+            NewData.forEach((y,index)=>{
+              if(x.QuestionTypeId==y.QId){
+                NewData.splice(index,1);
+              } 
+            })
+          })
+        }
+        this.questionTypeList = NewData;
       },
       //创建模板对象
       createdTempObj() {
@@ -395,58 +451,64 @@
                 newObj.ChooseList = chooseQuestion.ChooseList;
               }
               this.templateMsg.TemplateData.push(newObj);
+              this.filterChecked();
             });
           }
         }
       },
       //根据模板生成试卷
       setPaperTemplate() {
-        this.$refs.TemplateNum.validate()
-        if (!this.$refs.TemplateNum.hasError) {
-          let TotalNum = 0;
-          for (let i = 0; i < this.templateMsg.TemplateData.length; i++) {
-            if (this.templateMsg.TemplateData[i].ChooseType == 1 && this.templateMsg.TemplateData[i].ChooseNum === '') {
-              this.$q.notify({
-                type: 'negative',
-                position: "top",
-                message: `请填写第${i+1}题的抽取数`
-              })
-              return
-            }
-            TotalNum += parseInt(this.templateMsg.TemplateData[i].QuestionScore);
-          }
-          if (TotalNum > this.templateMsg.TemplateScore) {
+        if (this.templateMsg.TemplateNum == '') {
+          this.$q.notify({
+            type: 'negative',
+            position: "top",
+            message: `请填写随机组卷数量`
+          })
+          return
+        }
+        let TotalNum = 0;
+        for (let i = 0; i < this.templateMsg.TemplateData.length; i++) {
+          if (this.templateMsg.TemplateData[i].ChooseType == 1 && this.templateMsg.TemplateData[i].ChooseNum === '') {
             this.$q.notify({
               type: 'negative',
               position: "top",
-              message: `题目总分之和大于满分`
+              message: `请填写第${i+1}题的抽取数`
             })
             return
           }
-          this.saveLoading = true;
-          savePaperTemplate(this.templateMsg).then(res => {
-            this.saveLoading = false;
-            if (res.Code == 1) {
-              this.$q.notify({
-                icon: 'iconfont icon-chenggong',
-                color: 'accent',
-                timeout: 2000,
-                message: '创建试卷成功!',
-                position: 'top'
-              })
-              this.$router.push({
-                path: '/exam/examPaper',
-                query: {}
-              });
-            } else {
-              this.$q.notify({
-                type: 'negative',
-                position: "top",
-                message: `操作失败!`
-              })
-            }
-          });
+          TotalNum += parseInt(this.templateMsg.TemplateData[i].QuestionScore);
+        }
+        if (TotalNum > this.templateMsg.TemplateScore) {
+          this.$q.notify({
+            type: 'negative',
+            position: "top",
+            message: `题目总分之和大于满分`
+          })
+          return
         }
+        this.saveLoading = true;
+        savePaperTemplate(this.templateMsg).then(res => {
+          this.saveLoading = false;
+          if (res.Code == 1) {
+            this.$q.notify({
+              icon: 'iconfont icon-chenggong',
+              color: 'accent',
+              timeout: 2000,
+              message: '创建试卷成功!',
+              position: 'top'
+            })
+            this.$router.push({
+              path: '/exam/examPaper',
+              query: {}
+            });
+          } else {
+            this.$q.notify({
+              type: 'negative',
+              position: "top",
+              message: `操作失败!`
+            })
+          }
+        });
       },
       //删除
       delQuestion(item, index) {