GCLS_Page_Book_Component_NPC/src/components/Adult/inputModules/ZiLine.vue

<!--  -->
<template>
  <div class="Big-Book-PurePreview" 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"
          type="textarea"
          :autosize="{ minRows: 2 }"
          placeholder="请输入标题"
          v-model="curQue.title"
          @blur="onBlur(curQue, 'title')"
        ></el-input>
      </div>
      <div class="adult-book-input-item">
        <span class="adult-book-lable">排列方式：</span>
        <el-radio-group v-model="curQue.arrangeWay" @change="changearrangeWay">
          <el-radio label="单列">单列</el-radio>
          <el-radio label="双列">双列</el-radio>
          <el-radio label="四列">四列</el-radio>
        </el-radio-group>
      </div>
      <div class="adult-book-input-item">
        <span class="adult-book-lable">配置：</span>
        <div class="xorl">
          <el-switch v-model="curQue.Isnumber" active-text="序号"> </el-switch>
          <el-switch v-model="curQue.IsRecord" active-text="录音"> </el-switch>
        </div>
      </div>
      <div class="main">
        <div
          class="row"
          v-for="(row, rowIndex) in curQue.option"
          :key="'row' + rowIndex"
        >
          <div
            :style="{
              width: `${
                curQue.arrangeWay == '单列'
                  ? '732px'
                  : curQue.arrangeWay == '双列'
                  ? '362px'
                  : '177px'
              }`,
            }"
            class="col"
            v-for="(col, colIndex) in row"
            :key="'col' + colIndex"
          >
            <div class="td">
              <span v-if="curQue.Isnumber">{{ col.number }}</span>
              <div class="content">
                <div
                  style="display: flex"
                  v-for="(item, i) in col.list"
                  :key="'cont' + i"
                >
                  <div
                    v-for="(text, txIndex) in item.conList"
                    :key="'text' + txIndex"
                    style="display: flex"
                  >
                    <div v-if="text != '_'">
                      {{ text }}
                    </div>
                    <span v-else>
                      {{ text }}
                    </span>
                  </div>
                  <img
                    v-if="curQue.IsRecord"
                    src="../../../assets/adult/mini.png"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <p>
              <span @click="edit(col, rowIndex, colIndex)"> 编辑 </span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <div class="Module" v-if="dialogData">
        <div class="adult-book-input-item">
          <el-radio-group v-model="dialogData.type">
            <el-radio label="英文">英文</el-radio>
            <el-radio label="拼音+中文">拼音+中文</el-radio>
          </el-radio-group>
        </div>
        <div class="Modulemain">
          <div>
            <div class="adult-book-input-item">
              <span class="adult-book-lable">内容：</span>
              <el-input
                class="adult-book-input"
                type="textarea"
                :autosize="{ minRows: 2 }"
                placeholder="请输入内容"
                v-model="dialogData.leftCon"
                @blur="onBlur(dialogData, 'leftCon')"
                @change="changecon(dialogData)"
              ></el-input>
            </div>
            <div
              class="adult-book-input-item"
              v-if="dialogData.type == '拼音+中文'"
            >
              <span class="adult-book-lable">拼音：</span>
              <el-input
                class="adult-book-input"
                type="textarea"
                :autosize="{ minRows: 2 }"
                placeholder="请输入拼音"
                v-model="dialogData.leftPinyin"
                @blur="onBlur(dialogData, 'leftPinyin')"
              ></el-input>
            </div>
          </div>
          <div>
            <div class="adult-book-input-item" v-if="curQue.Isnumber">
              <span class="adult-book-lable">序号：</span>
              <el-input
                class="adult-book-input"
                type="textarea"
                :autosize="{ minRows: 2 }"
                placeholder="请输入标题"
                v-model="dialogData.number"
                @blur="onBlur(dialogData, 'number')"
              ></el-input>
            </div>
            <div v-for="(item, index) in dialogData.list" :key="'h' + index">
              <div class="adult-book-input-item">
                <span class="adult-book-lable">内容：</span>
                <el-input
                  class="adult-book-input"
                  type="textarea"
                  :autosize="{ minRows: 2 }"
                  placeholder="请输入内容"
                  v-model="item.con"
                  @blur="onBlur(item, 'con')"
                  @change="changecon(item)"
                ></el-input>
                <img
                  @click="deleterow(index)"
                  class="close"
                  src="../../../assets/adult/del-close.png"
                  alt=""
                />
              </div>
              <div
                class="adult-book-input-item"
                v-if="dialogData.type == '拼音+中文'"
              >
                <span class="adult-book-lable">拼音：</span>
                <el-input
                  class="adult-book-input"
                  type="textarea"
                  :autosize="{ minRows: 2 }"
                  placeholder="请输入拼音"
                  v-model="item.pinyin"
                  @blur="onBlur(item, 'pinyin')"
                ></el-input>
              </div>
              <div
                class="adult-book-input-item"
                v-if="dialogData.type == '拼音+中文'"
              >
                <span class="adult-book-lable">拼音位置：</span>
                <el-radio-group v-model="item.pinyinSite">
                  <el-radio label="top">上</el-radio>
                  <el-radio label="bottom">下</el-radio>
                  <el-radio label="left">左</el-radio>
                  <el-radio label="right">右</el-radio>
                </el-radio-group>
              </div>
              <div
                class="adult-book-input-item"
                v-for="(answ, anIndex) in item.answer"
                :key="'anw' + anIndex"
              >
                <span class="adult-book-lable">答案：</span>
                <el-input
                  class="adult-book-input"
                  type="textarea"
                  :autosize="{ minRows: 2 }"
                  placeholder="请输入答案"
                  v-model="answ.con"
                  @blur="onBlur(answ, 'con')"
                ></el-input>
                <img
                  @click="deleteAnswer(index, anIndex)"
                  class="close"
                  src="../../../assets/adult/del-close.png"
                  alt=""
                />
              </div>
              <div class="addoption" @click="addAnswer(index)">增加答案</div>
            </div>
            <div class="addoption" @click="addrowCol">增加</div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Upload from "../common/Upload";
import SentenceSegwordChs from "../common/SentenceSegwordChs/index.vue";
export default {
  name: "PurePreview",
  props: ["curQue", "fn_data", "changeCurQue", "type"],
  components: {
    SentenceSegwordChs,
    Upload,
  },
  data() {
    return {
      checkList: [],
      mp3Number: 1,
      form: {
        stem: {
          con: "",
          pinyin: "",
          english: "",
          highlight: "",
          underline: "",
          img_url: [],
          mp3_url: [],
        },
      },
      data_structure: {
        type: "zi_transverse_line_chs",
        name: "字+横线",
        title: "",
        arrangeWay: "单列", //排列方式
        Isnumber: false, //需不需要 序号
        IsRecord: false, //需不需要录音
        option: [
          [
            {
              type: "英文", //英文还是拼音+中文
              number: "",
              list: [
                {
                  leftCon: "",
                  leftPinyin: "",
                  con: "",
                  pinyin: "",
                  pinyinSite: "", //拼音的位置
                  answer: [
                    {
                      con: "",
                    },
                  ],
                },
              ],
            },
          ],
        ],
        numberList: {
          type: "number",
          name: "每行几个",
          con: "2",
          arr: [
            {
              id: 1,
              value: 1,
            },
            {
              id: 2,
              value: 2,
            },
            {
              id: 3,
              value: 3,
            },
            {
              id: 4,
              value: 4,
            },
          ],
        },
      },
      dialogVisible: false,
      dialogData: null,
      rowIndex: null,
      colIndex: null,
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    changecon(value) {
      value.conList = value.con.split("");
    },
    //   增加答案
    addAnswer(index) {
      let obj = JSON.stringify(this.data_structure.option[0][0].list[0].answer);
      this.dialogData.list[index].answer.push(obj);
    },
    //   删除答案
    deleteAnswer(index, anindex) {
      if (this.dialogData.list[index].answer.length <= 1) {
        this.$message.warning("至少要存在一个答案");
        return;
      }
      this.dialogData.list[index].answer.splice(anindex, 1);
    },
    //   删除某一个的行
    deleterow(index) {
      if (this.dialogData.list.length <= 1) {
        this.$message.warning("至少要存在一个");
        return;
      }
      this.dialogData.list.splice(index, 1);
    },
    //   增加某一个的行数
    addrowCol() {
      let obj = JSON.parse(
        JSON.stringify(this.data_structure.option[0][0].list[0])
      );
      this.dialogData.list.push(obj);
    },
    // 保存
    save() {
      this.curQue.option[this.rowIndex][this.colIndex] = JSON.parse(
        JSON.stringify(this.dialogData)
      );
      this.rowIndex = null;
      this.colIndex = null;
    },
    //   编辑某一个
    edit(item, rindex, cindex) {
      console.log(item);
      this.dialogData = JSON.parse(JSON.stringify(item));
      this.dialogVisible = true;
      //   记录索引
      this.rowIndex = rindex;
      this.colIndex = cindex;
    },
    //   关闭弹窗
    handleClose() {
      this.dialogVisible = false;
      this.dialogData = null;
      this.rowIndex = null;
      this.colIndex = null;
    },
    //   修改排列方式
    changearrangeWay(value) {
      let obj = this.data_structure.option[0][0];
      if (value == "双列") {
        this.curQue.option.forEach((row) => {
          if (row.length > 1) {
            row.splice(2, row.length - 1);
          } else {
            row.push(obj);
          }
        });
      } else if (value == "四列") {
        this.curQue.option.forEach((row) => {
          if (row.length >= 2) {
            for (let i = 0; i < 2; i++) {
              row.push(obj);
            }
          } else {
            for (let i = 0; i < 3; i++) {
              row.push(obj);
            }
          }
        });
      } else if (value == "单列") {
        this.curQue.option.forEach((row) => {
          row.splice(1, row.length - 1);
        });
      }
    },
    onBlur(item, field) {
      item[field] = item[field] ? item[field].trim() : "";
    },
    // 增加拼音
    addpinyin(index) {
      let obj;
      obj = JSON.parse(
        JSON.stringify(this.data_structure.option[0].pinyinList[0])
      );
      this.curQue.option[index].pinyinList.push(obj);
    },
    // 删除拼音
    deletepinyin(aindex, index) {
      if (this.type == "zi_transverse_line_chs") {
        if (this.curQue.option[index].pinyinList.length <= 1) {
          this.$message.warning("至少要保留1个拼音");
          return;
        }
        this.curQue.option[index].pinyinList.splice(aindex, 1);
      }
    },
    // 增加答案
    addanswer(index) {
      let obj;
      if (this.type == "zi_transverse_line_chs") {
        obj = JSON.parse(
          JSON.stringify(this.data_structure.option[0].answer[0])
        );
        this.curQue.option[index].answer.push(obj);
      }
    },
    // 删除答案
    deleteanswer(aindex, index) {
      if (this.curQue.option[index].answer.length <= 1) {
        this.$message.warning("至少要保留1个答案");
        return;
      }
      this.curQue.option[index].answer.splice(aindex, 1);
    },
    // 删除其中一个选项
    deleteOptionOne(index) {
      if (this.curQue.option.length <= 1) {
        this.$message.warning("至少要保留1个选项");
        return;
      }
      this.curQue.option.splice(index, 1);
    },
    // 新增选项
    addOption() {
      let obj = JSON.parse(JSON.stringify(this.data_structure.option[0]));
      this.curQue.option.push(obj);
    },
    initcurQue() {
      let data = JSON.parse(JSON.stringify(this.data_structure));
      this.changeCurQue(data);
    },
    // 选项的音频
    changeMp3(fileList, item, index) {
      const articleImgList = JSON.parse(JSON.stringify(fileList));
      const articleImgRes = [];
      articleImgList.forEach((item) => {
        if (item.response) {
          const obj = {
            name: item.name,
            url: item.response.file_info_list[0].file_url,
            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
            media_duration: item.response.file_info_list[0].media_duration, //音频时长
          };
          articleImgRes.push(obj);
        }
      });
      this.curQue.option[index].mp3_list = JSON.parse(
        JSON.stringify(articleImgRes)
      );
    },
    // 题目的音频
    timuchangeMp3(fileList) {
      const articleImgList = JSON.parse(JSON.stringify(fileList));
      const articleImgRes = [];
      articleImgList.forEach((item) => {
        if (item.response) {
          const obj = {
            name: item.name,
            url: item.response.file_info_list[0].file_url,
            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
            media_duration: item.response.file_info_list[0].media_duration, //音频时长
          };
          articleImgRes.push(obj);
        }
      });
      this.curQue.mp3_list = JSON.parse(JSON.stringify(articleImgRes));
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (!this.curQue) {
      this.initcurQue();
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scope>
//@import url(); 引入公共css类
.Big-Book-PurePreview {
  &-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: 200px;
    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;
    margin-bottom: 15px;
  }
  .Big-Book-addrole {
    > div {
      width: 300px;
      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;
    }
  }
  .Big-Book-more {
    .Big-Book-more-text {
      position: relative;
      text-align: center;
    }
    .Big-Book-more-text:before,
    .Big-Book-more-text:after {
      position: absolute;
      background: #ccc;
      content: "";
      height: 1px;
      top: 50%;
      width: 45%;
    }
    .Big-Book-more-text:before {
      left: 10px;
    }
    .Big-Book-more-text:after {
      right: 10px;
    }
    .Big-Book-more-main {
      display: flex;
      > :not(:nth-child(1)) {
        margin-left: 30px;
      }
    }
  }
  .Big-Book-con {
    display: flex;
    align-items: center;
  }
  .close {
    width: 24px;
    cursor: pointer;
  }
  .xorl {
    display: flex;
    align-items: center;
    margin-top: 5px;
    > :nth-child(1) {
      margin-right: 33px;
    }
  }
  .main {
    width: 780px;
    min-height: 251px;
    background: #f2f2f2;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px;
    padding: 24px 20px;
    .row {
      display: flex;
      .col {
        width: 732px;
        margin: 0 4px;
        .td {
          width: 100%;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.1);
          box-sizing: border-box;
          border-radius: 8px;
          min-height: 48px;
          display: flex;
          align-items: center;
          padding: 8px 12px;
          > div {
            margin: 0 8px;
            flex: 1;
            > :nth-child(1) {
              margin-bottom: 8px;
            }
          }
          > span {
            display: inline-block;
            width: 16px;
            height: 16px;
            color: white;
            background: #de4444;
            border-radius: 50%;
            text-align: center;
            font-size: 12px;
            line-height: 16px;
          }
        }
        > p {
          width: 100%;
          text-align: center;
          span {
            cursor: pointer;
          }
        }
      }
    }
  }
  .Module {
    .Modulemain {
      display: flex;
    }
  }
}
</style>
<style lang="scss">
</style>