|
@@ -0,0 +1,253 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="Big-Book-Single" v-if="curQue">
|
|
|
+ <div
|
|
|
+ class="Big-Book-Single-content"
|
|
|
+ style="margin-left: 20px; margin-top: 20px"
|
|
|
+ >
|
|
|
+ <div class="adult-book-input-item">
|
|
|
+ <span class="adult-book-lable">标题:</span>
|
|
|
+ <el-input
|
|
|
+ class="adult-book-input"
|
|
|
+ :autosize="{ minRows: 2 }"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入标题"
|
|
|
+ v-model="curQue.title"
|
|
|
+ @blur="curQue.title = curQue.title.trim()"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="Big-Book-main"
|
|
|
+ v-for="(item, index) in curQue.option"
|
|
|
+ :key="item + index"
|
|
|
+ style="border-bottom: 1px #ccc solid; margin-bottom: 20px"
|
|
|
+ >
|
|
|
+ <div class="NPC-sentence-Segword" style="position: relative">
|
|
|
+ <SentenceSegwordChs :curQue="item.detail" />
|
|
|
+ <img
|
|
|
+ style="position: absolute; right: 330px; top: 37px"
|
|
|
+ @click="deleteOption(index)"
|
|
|
+ class="close"
|
|
|
+ src="../../../assets/adult/del-close.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-if="item.detail">
|
|
|
+ <div
|
|
|
+ v-for="(fc, fcIndex) in item.detail.wordsList"
|
|
|
+ :key="'fc' + fcIndex"
|
|
|
+ >
|
|
|
+ <div class="fccontent">
|
|
|
+ <template v-if="item.detail.pyPosition == 'top'">
|
|
|
+ <div>
|
|
|
+ <p>{{ fc.pinyin }}</p>
|
|
|
+ <p>{{ fc.chs }}</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div>
|
|
|
+ <p>{{ fc.chs }}</p>
|
|
|
+ <p>{{ fc.pinyin }}</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex">
|
|
|
+ <div class="up" @click="upMove(index, fcIndex)">向上移</div>
|
|
|
+ <div class="down" @click="downMove(index, fcIndex)">向下移</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="addoption" @click="addOption">添加一题</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Upload from "../common/Upload.vue";
|
|
|
+import SentenceSegwordChs from "../common/SentenceSegwordChs/index.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "Single",
|
|
|
+ props: ["curQue", "fn_data", "changeCurQue", "type"],
|
|
|
+ components: {
|
|
|
+ Upload,
|
|
|
+ SentenceSegwordChs,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ stem: {
|
|
|
+ con: "",
|
|
|
+ pinyin: "",
|
|
|
+ english: "",
|
|
|
+ highlight: "",
|
|
|
+ underline: "",
|
|
|
+ img_url: [],
|
|
|
+ mp3_url: [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ imgNumber: 1,
|
|
|
+ mp3Number: 1,
|
|
|
+ data_structure: {
|
|
|
+ type: "sort_chs",
|
|
|
+ name: "排序",
|
|
|
+ title: "",
|
|
|
+ option: [
|
|
|
+ {
|
|
|
+ detail: {
|
|
|
+ pyPosition: "top", //top 拼音在上面;bottom 拼音在下面
|
|
|
+ sentence: "", //句子
|
|
|
+ segList: [], //分词结果
|
|
|
+ seg_words: "",
|
|
|
+ wordsList: [],
|
|
|
+ },
|
|
|
+ correctWordsList: [], //正确的list
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ // 向上移动
|
|
|
+ upMove(opIndex, index) {
|
|
|
+ if (this.curQue.option[opIndex].correctWordsList.length < 1) {
|
|
|
+ this.curQue.option[opIndex].correctWordsList =
|
|
|
+ this.curQue.option[opIndex].detail.wordsList;
|
|
|
+ }
|
|
|
+ if (index > 0) {
|
|
|
+ let obj = this.curQue.option[opIndex].detail.wordsList[index - 1];
|
|
|
+ this.curQue.option[opIndex].detail.wordsList[index - 1] =
|
|
|
+ this.curQue.option[opIndex].detail.wordsList[index];
|
|
|
+ this.curQue.option[opIndex].detail.wordsList[index] = obj;
|
|
|
+ this.$forceUpdate();
|
|
|
+ } else {
|
|
|
+ this.$message.warning("当前已经是第一个");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 向下移动
|
|
|
+ downMove(opIndex, index) {
|
|
|
+ if (this.curQue.option[opIndex].correctWordsList.length < 1) {
|
|
|
+ this.curQue.option[opIndex].correctWordsList =
|
|
|
+ this.curQue.option[opIndex].detail.wordsList;
|
|
|
+ }
|
|
|
+ if (index + 1 >= this.curQue.option[opIndex].detail.wordsList.length) {
|
|
|
+ this.$message.warning("当前已经是最后一个");
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ let obj = this.curQue.option[opIndex].detail.wordsList[index + 1];
|
|
|
+ this.curQue.option[opIndex].detail.wordsList[index + 1] =
|
|
|
+ this.curQue.option[opIndex].detail.wordsList[index];
|
|
|
+ this.curQue.option[opIndex].detail.wordsList[index] = obj;
|
|
|
+ this.$forceUpdate();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除其中一个选项
|
|
|
+ deleteOption(index) {
|
|
|
+ if (this.curQue.option.length <= 1) {
|
|
|
+ this.$message.warning("至少要保留1个问题");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.curQue.option.splice(index, 1);
|
|
|
+ },
|
|
|
+ //添加一个选项
|
|
|
+ addOption(index) {
|
|
|
+ let obj = JSON.parse(JSON.stringify(this.data_structure.option[0]));
|
|
|
+ this.curQue.option.push(obj);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成(可以访问当前this实例)
|
|
|
+ created() {
|
|
|
+ if (!this.curQue) {
|
|
|
+ this.changeCurQue(this.data_structure);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss' scope>
|
|
|
+//@import url(); 引入公共css类
|
|
|
+.Big-Book-Single {
|
|
|
+ &-content {
|
|
|
+ &.m {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .Big-Book-title {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #000;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ .Big-Book-main {
|
|
|
+ > div {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ &.Big-Book-pinyin {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .addoption {
|
|
|
+ width: 565px;
|
|
|
+ height: 40px;
|
|
|
+ left: 40px;
|
|
|
+ top: 304px;
|
|
|
+ background: #f3f3f3;
|
|
|
+ border: 1px dashed rgba(0, 0, 0, 0.15);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .close {
|
|
|
+ width: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .down,
|
|
|
+ .up {
|
|
|
+ margin-left: 15px;
|
|
|
+ width: 150px;
|
|
|
+ height: 40px;
|
|
|
+ background: #f3f3f3;
|
|
|
+ border: 1px dashed rgba(0, 0, 0, 0.15);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .fccontent {
|
|
|
+ margin: 15px 0;
|
|
|
+ width: 82px;
|
|
|
+ height: 70px;
|
|
|
+ background: #e6e6e6;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+</style>
|