新增连词成句

src/components/pages/addCourse.vue

@@ -1457,6 +1457,33 @@
                                 />
                               </div>
                             </div>
+                            <div class="tool">
+                              <div
+                                class="whiteBIcon"
+                                @click="openTools(itemTaskIndex, 47, toolIndex)"
+                              >
+                                <img
+                                  src="../../assets/icon/fourthToolList/conSentences.png"
+                                  alt
+                                />
+                                <div style="margin: 5px 0">连词成句</div>
+                              </div>
+                              <div
+                                class="check"
+                                @click="addTools(47, itemTaskIndex, toolIndex)"
+                              >
+                                <img
+                                  src="../../assets/icon/checkNo.png"
+                                  alt
+                                  v-if="itemTool.tool.indexOf(47) == -1"
+                                />
+                                <img
+                                  src="../../assets/icon/checkedIs.png"
+                                  alt
+                                  v-else
+                                />
+                              </div>
+                            </div>
                             <!-- <div class="tool">
                               <div
                                 class="whiteBIcon"
@@ -3142,6 +3169,78 @@
         <el-button type="primary" @click="addRateAnswer">确 定</el-button>
       </span>
     </el-dialog>
+    <el-dialog
+      title="连词成句设置"
+      :visible.sync="dialogVisibleSentence"
+      :append-to-body="true"
+      width="1000px"
+      :before-close="handleClose"
+      class="dialog_diy dialog_diy3"
+    >
+      <div>
+        <div class="sentenBox">
+          <div class="addSen" @click="addSt">添加题目</div>
+          <div
+            v-for="(st, stIndex) in sentenceList"
+            :key="stIndex"
+            style="padding-bottom: 20px"
+          >
+            <div class="sentenTop">
+              <div>题目设置</div>
+              <div>
+                <el-input
+                  placeholder="请输入卡片内容"
+                  v-model="st.sentenceTitle"
+                ></el-input>
+              </div>
+              <div @click="addSen(stIndex)">添加</div>
+            </div>
+            <div class="cardList">
+              <div v-if="st.addSentence.length > 0" class="cardBox">
+                <div
+                  class="isCard"
+                  v-for="(s, sIndex) in st.addSentence"
+                  :key="sIndex"
+                  @click="setRightAnswer(s, stIndex, sIndex)"
+                >
+                  <div>{{ s }}</div>
+                </div>
+              </div>
+              <div class="card">
+                <img src="../../assets/icon/conSentences/noTitle.png" alt="" />
+              </div>
+            </div>
+            <div class="rightCardBox">
+              <div>正确顺序</div>
+              <div class="rightCardList">
+                <div v-if="st.rightAnswer.length > 0" class="cardBox">
+                  <div
+                    v-for="(r, rIndex) in st.rightAnswer"
+                    :key="rIndex"
+                    class="cardCss"
+                  >
+                    <div class="isCard" @click="returnCard(r, stIndex, rIndex)">
+                      <div>{{ r }}</div>
+                    </div>
+                    <div>{{ rIndex + 1 }}</div>
+                  </div>
+                </div>
+                <div class="card" v-if="st.rightAnswer.length == 0">
+                  <img
+                    src="../../assets/icon/conSentences/noAnswer.png"
+                    alt=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisibleSentence = false">取 消</el-button>
+        <el-button type="primary" @click="addSentenceTool">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -3173,6 +3272,8 @@ export default {
       ],
       line: "",
       sysPic: [],
+      sentenceList: [{ sentenceTitle: "", addSentence: [], rightAnswer: [] }],
+      isPushTitleList: [],
       lineCount: 0,
       lineType: 0,
       chapCount: 0,
@@ -3201,6 +3302,7 @@ export default {
       dialogVisibleMember: false,
       dialogVisibleMp3: false,
       dialogVisibleSelect: false,
+      dialogVisibleSentence: false,
       dialogVisibleRate: false,
       dialogVisibleChoice: false,
       publicTool: 0,
@@ -3263,6 +3365,9 @@ export default {
                       askCount: 1,
                       askTitle: "",
                       askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
+                      sentenceList: [
+                        { sentenceTitle: "", addSentence: [], rightAnswer: [] },
+                      ],
                     },
                   ],
                   isShowTools: false,
@@ -4197,6 +4302,7 @@ export default {
         askCount: 1,
         askTitle: "",
         askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
+        sentenceList: [{ sentenceTitle: "", addSentence: [], rightAnswer: [] }],
       });
     },
     addTaskBorder() {
@@ -4213,6 +4319,9 @@ export default {
             askCount: 1,
             askTitle: "",
             askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
+            sentenceList: [
+              { sentenceTitle: "", addSentence: [], rightAnswer: [] },
+            ],
           },
         ],
         isShowTools: false,
@@ -4265,7 +4374,10 @@ export default {
     },
     getTeacher() {
       let params = {
-        oid: this.org && this.org != "undefined" && this.org != "null" ? this.org : this.oid,
+        oid:
+          this.org && this.org != "undefined" && this.org != "null"
+            ? this.org
+            : this.oid,
         cu: "",
         cn: this.searchTN,
       };
@@ -4756,6 +4868,13 @@ export default {
                           askJson: [
                             { askstitle: "", askItem: 1, checkList: [] },
                           ],
+                          sentenceList: [
+                            {
+                              sentenceTitle: "",
+                              addSentence: [],
+                              rightAnswer: [],
+                            },
+                          ],
                         },
                       ],
                       isShowTools: false,
@@ -4978,6 +5097,18 @@ export default {
           : { url: "", select: [], answer: [] };
         this.selectSteps = 1;
         this.dialogVisibleSelect = true;
+      } else if (i == 47) {
+        this.sentenceList = this.unitJson[this.unitIndex].chapterInfo[0]
+          .taskJson[itemTaskIndex].toolChoose[toolIndex].sentenceList
+          ? JSON.parse(
+              JSON.stringify(
+                this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
+                  itemTaskIndex
+                ].toolChoose[toolIndex].sentenceList
+              )
+            )
+          : [{ sentenceTitle: "", addSentence: [], rightAnswer: [] }];
+        this.dialogVisibleSentence = true;
       }
     },
     chapAddTools(i) {
@@ -5169,6 +5300,15 @@ export default {
         ].toolChoose[toolIndex].tool.push(i);
       }
 
+      if (i == 47) {
+        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
+            itemTaskIndex
+          ].toolChoose[toolIndex].tool = [];
+          this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
+            itemTaskIndex
+          ].toolChoose[toolIndex].tool.push(i);
+      }
+
       this.$forceUpdate();
     },
     addAskList() {
@@ -5960,6 +6100,38 @@ export default {
     addRateList() {
       this.rateJson.push({ detail: "", score: 5, value: "" });
     },
+    addSt() {
+      this.sentenceList.push({
+        sentenceTitle: "",
+        addSentence: [],
+        rightAnswer: [],
+      });
+    },
+    // sentenceList: [{ addSentence: [], rightAnswer: [] }],
+    addSen(i) {
+      this.sentenceList[i].addSentence.push(this.sentenceList[i].sentenceTitle);
+      // this.isPushTitleList.push(this.sentenceTitle);
+      this.sentenceList[i].sentenceTitle = "";
+    },
+    setRightAnswer(s, i, j) {
+      this.sentenceList[i].rightAnswer.push(s);
+      // this.sentenceList[0].addSentence.splice(i, 1);
+    },
+    returnCard(r, i, j) {
+      this.sentenceList[i].rightAnswer.splice(j, 1);
+      // for (var j = 0; j < this.isPushTitleList.length; j++) {
+      //   if (this.isPushTitleList[j] == r) {
+      //     this.sentenceList[0].addSentence.splice(j, 0, r);
+      //   }
+      // }
+    },
+    addSentenceTool() {
+      this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
+        this.taskCount
+      ].toolChoose[this.toolIndex].sentenceList = this.sentenceList;
+      this.sentenceList = [{ sentenceTitle: "", addSentence: [], rightAnswer: [] }];
+      this.dialogVisibleSentence = false;
+    },
   },
   beforeDestroy() {
     clearTimeout(this.timer);
@@ -8233,4 +8405,107 @@ ol {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.sentenBox {
+  background: #fff;
+  height: 600px;
+  overflow: auto;
+  background-image: url(/static/img/csBg.86b5321.png);
+  background-position: 102%;
+  background-repeat: no-repeat;
+  background-size: 60%;
+}
+.addSen {
+  background: #409efe;
+  width: 90px;
+  color: #fff;
+  height: 35px;
+  text-align: center;
+  line-height: 35px;
+  border-radius: 5px;
+  float: right;
+  margin: 10px 20px 0 0;
+  cursor: pointer;
+}
+.sentenTop {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding: 55px 0 0 20px;
+  box-sizing: border-box;
+}
+.sentenTop > div:nth-child(2) {
+  width: 300px;
+  margin: 0 15px;
+}
+.sentenTop > div:nth-child(3) {
+  background: #409efe;
+  color: #fff;
+  width: 65px;
+  height: 35px;
+  text-align: center;
+  line-height: 35px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.cardList {
+  padding: 30px 0 20px 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  box-sizing: border-box;
+  border-bottom: 1px solid #f4f4f4;
+  width: 98%;
+  margin: 0 auto;
+}
+.cardBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  align-content: center;
+}
+.isCard {
+  width: 130px;
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  font-size: 20px;
+  cursor: pointer;
+  background-image: url(/static/img/titleBorder.453cad3.png);
+  background-size: cover;
+}
+.card {
+  width: 130px;
+  height: 60px;
+}
+.card > img {
+  width: 100%;
+  height: 100%;
+}
+.rightCardBox {
+  margin: 10px 0 0 10px;
+}
+.rightCardBox > div:nth-child(1) {
+  margin-bottom: 10px;
+}
+.cardCss {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  border-bottom: 3px solid #b4c3d3;
+  padding: 0 0 5px 0;
+  margin-right: 10px;
+}
+.cardCss > div:nth-child(2) {
+  background: #5b7b9d;
+  color: #fff;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 20px;
+}
 </style>