GCLS_Page_Book_Component_NPC/src/views/adultInput2.vue

<!--  -->
<template>
  <div class="Big-Book-container">
    <Header />
    <div class="Big-Book-content">
      <div class="content-tree">
        <Catelog
          :book-id="bookId"
          :book-level="bookLevel"
          :book-node-index="bookIndex"
          :change-id="changeId"
        />
      </div>
      <div class="Book-content" v-if="currentTreeID">
        <div class="Big-Book-save">
          <el-button type="primary" @click="onSave">保 存</el-button>
          <el-button type="danger" @click="onPreview" plain>预 览</el-button>
        </div>
        <el-tabs
          v-model="editableTabsValue"
          type="card"
          editable
          @edit="handleTabsEdit"
          @tab-click="tabClick"
        >
          <el-tab-pane
            v-for="(item, index) in question_list"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
            <div class="createTable">
              <el-input
                maxlength="1"
                style="width: 50px"
                v-model="row"
                type="text"
                @input="rowLine('row')"
              />*<el-input
                style="width: 50px"
                v-model="line"
                type="text"
                maxlength="1"
                @input="rowLine('line')"
              />
              <el-button
                @click="createTable"
                style="margin-left: 10px"
                type="primary"
                >增加题</el-button
              >
            </div>
            <div
              v-for="(topic, toindex) in item.cur_fn_data"
              :key="'topic' + toindex + index"
            >
              <p>第{{ toindex + 1 }}题</p>
              <div class="Big-Book-top">
                <span>正标题</span>
                <el-input
                  style="width: 80%"
                  type="textarea"
                  autosize
                  placeholder="请输入正标题"
                  v-model="topic.z_title"
                  @blur="onBlur(topic, 'z_title')"
                ></el-input>
              </div>
              <div class="Big-Book-top">
                <span>副标题</span>
                <el-input
                  style="width: 80%"
                  type="textarea"
                  autosize
                  placeholder="请输入副标题"
                  v-model="topic.f_title"
                  @blur="onBlur(topic, 'f_title')"
                ></el-input>
              </div>
              <div class="Big-Book-top">
                <span>是否有背景色</span>
                <el-radio v-model="topic.is_bg" :label="true">有</el-radio>
                <el-radio v-model="topic.is_bg" :label="false">无</el-radio>
              </div>
              <div class="Big-Book-top">
                <span>是否有背景图</span>
                <el-radio v-model="topic.is_layout" :label="true">有</el-radio>
                <el-radio v-model="topic.is_layout" :label="false">无</el-radio>
              </div>
              <div
                v-for="(rowItem, rowIndex) in topic.table_list"
                :key="'row' + rowIndex + index"
              >
                <div
                  v-for="(topicIitem, lineIndex) in rowItem"
                  :key="lineIndex"
                >
                  <p>{{ topicIitem.text }}</p>
                  <div>
                    <template
                      v-if="
                        topicIitem.type == 'article_chs' ||
                        (topicIitem.data &&
                          topicIitem.data.type == 'article_chs')
                      "
                    >
                      <template v-if="topicIitem.is_edit">
                        <ArticleTemChs
                          :curQue="topicIitem.data"
                          :changeCurQue="changeCurQue"
                        />
                      </template>
                      <template v-else>
                        <ArticleView :curQue="topicIitem.data" />
                      </template>
                    </template>
                    <template
                      v-if="
                        topicIitem.type == 'dialog_article_chs' ||
                        (topicIitem.data &&
                          topicIitem.data.type == 'dialog_article_chs')
                      "
                    >
                      <template v-if="topicIitem.is_edit">
                        <DialogueArticleChs
                          :curQue="topicIitem.data"
                          :changeCurQue="changeCurQue"
                        />
                      </template>
                      <template v-else>
                        <!-- <ArticleView :curQue="topicIitem.que" /> -->
                      </template>
                    </template>
                    <template v-if="topicIitem.type == 'NewWord_chs'">
                      <template v-if="topicIitem.is_edit">
                        <Neword
                          :curQue="topicIitem.data"
                          :changeCurQue="changeCurQue"
                        />
                      </template>
                      <template v-else>
                        <NewordPhraseview :curQue="topicIitem.data" />
                      </template>
                    </template>
                    <template v-if="topicIitem.type == 'notes_chs'">
                      <template v-if="topicIitem.is_edit">
                        <Notes
                          :curQue="topicIitem.data"
                          :changeCurQue="changeCurQue"
                        />
                      </template>
                      <template v-else>
                        <NewordPhraseview :curQue="topicIitem.data" />
                      </template>
                    </template>
                  </div>
                  <div
                    class="addoption"
                    v-if="topicIitem.data && topicIitem.is_edit"
                    @click="
                      remoeModule(toindex, rowIndex, lineIndex, topicIitem)
                    "
                  >
                    删除模板
                  </div>
                  <div
                    v-else-if="
                      TopicIndex == toindex &&
                      RowIndex == rowIndex &&
                      lineIndex == LineIndex
                    "
                    class="addoption"
                  >
                    选择模板
                  </div>
                  <div
                    v-if="!topicIitem.data && topicIitem.is_add_module"
                    class="addoption"
                    @click="addModule(toindex, rowIndex, lineIndex, topicIitem)"
                  >
                    添加模板
                  </div>
                  <template v-if="topicIitem.data">
                    <div class="Big-Book-save" v-if="topicIitem.is_edit">
                      <el-button
                        type="success"
                        size="small"
                        @click="onSure(topicIitem)"
                        >确定</el-button
                      >
                    </div>
                    <div class="Big-Book-save" v-else>
                      <el-button
                        type="primary"
                        size="small"
                        @click.stop="editCurQue(topicIitem)"
                        >编辑</el-button
                      >
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="Book-function" v-if="currentTreeID">
        <ul class="function-list">
          <li
            v-for="(item, index) in fn_data"
            :key="'fn' + index"
            @click="selectedFnType(item, index)"
          >
            <el-dropdown v-if="item.list">
              <span class="fn-name">
                {{ item.name }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" trigger="click">
                <el-dropdown-item
                  @click.native="selectSmallModule(item, child, index, i)"
                  v-for="(child, i) in item.list"
                  :key="i"
                  >{{ child.name }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
            <span v-else class="fn-name">{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <el-dialog
      :visible.sync="previewVisible"
      title="预览"
      top="0"
      width="100%"
      @close="handleClosePre"
    >
      <div class="chooseCon">
        <Preview
          :context="context"
          :que-index="queIndex"
          :fatherName="fatherName"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClosePre">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Catelog from "@/components/Adult/inputModules/Catelog";
import ArticleTemChs from "@/components/Adult/inputModules/ArticleTemChs/index.vue";
import DialogueArticleChs from "@/components/Adult/inputModules/DialogueArticleChs/index.vue";
import Single from "@/components/Adult/inputModules/Single.vue";
import Judge from "@/components/Adult/inputModules/Judge.vue";
import Dialogue from "@/components/Adult/inputModules/Dialogue.vue";
import MatrixSingle from "@/components/Adult/inputModules/MatrixSingle.vue";
import MultiRowInput from "@/components/Adult/inputModules/MultiRowInput.vue";
import Ligature from "@/components/Adult/inputModules/Ligature.vue";
import Neword from "@/components/Adult/inputModules/Neword.vue";
import Notes from "@/components/Adult/inputModules/Notes.vue";
import InputRecord from "@/components/Adult/inputModules/InputRecord.vue";
import AudioControl from "@/components/Adult/inputModules/AudioControl.vue";
import SuitchControl from "@/components/Adult/inputModules/SuitchControl.vue";
import BgControl from "@/components/Adult/inputModules/BgControl.vue";
import UploadControl from "@/components/Adult/inputModules/UploadControl.vue";
import TextItem from "@/components/Adult/inputModules/TextItem.vue";
import Sentence from "@/components/Adult/inputModules/Sentence.vue";

import Textdes from "@/components/Adult/inputModules/Textdes.vue";
import Record from "@/components/Adult/inputModules/Record.vue";
import Hanzi from "@/components/Adult/inputModules/Hanzi.vue";
import Picture from "@/components/Adult/inputModules/Picture.vue";
import Singleview from "@/components/Adult/preview/Single.vue";
import Judgeview from "@/components/Adult/preview/Judge.vue";
import Textdesview from "@/components/Adult/preview/Textdes.vue";
import Hanziview from "@/components/Adult/preview/Hanzi.vue";
import Pictureview from "@/components/Adult/preview/Picture.vue";
import Dialogueview from "@/components/Adult/preview/Dialogue.vue";
import MatrixSingleview from "@/components/Adult/preview/MatrixSingle.vue";
import MultiRowInputview from "@/components/Adult/preview/MultiRowInput.vue";
import Ligatureview from "@/components/Adult/preview/Ligature.vue";
import InputRecordview from "@/components/Adult/preview/InputRecord.vue";
import BgControlview from "@/components/Adult/preview/BgControl.vue";
import NewordPhraseview from "@/components/Adult/preview/WordPhrase.vue";

import Preview from "@/components/Adult/Preview.vue";
import fn from "@/components/Adult/common/data2.js";
import { getContent } from "@/api/ajax";

export default {
  components: {
    Header,
    Catelog,
    Single,
    Textdes,
    Record,
    Singleview,
    Textdesview,
    Hanziview,
    Pictureview,
    Preview,
    Hanzi,
    Picture,
    Judge,
    Judgeview,
    Dialogue,
    Dialogueview,
    MatrixSingle,
    MatrixSingleview,
    MultiRowInput,
    MultiRowInputview,
    Ligature,
    Ligatureview,
    Neword,
    Notes,
    InputRecord,
    ArticleTemChs,
    DialogueArticleChs,
    AudioControl,
    SuitchControl,
    BgControl,
    InputRecordview,
    BgControlview,
    NewordPhraseview,
    UploadControl,
    TextItem,
    Sentence,
  },
  data() {
    return {
      bookId: 1,
      bookLevel: "",
      bookIndex: "",
      fn_data: [],
      fn_type: "",
      cur_fn_data: null, //当前模块的数据结构
      cur_page_queIsEdit: [], //当前页数的某个题
      question_list: [
        {
          name: "tab1",
          title: "第1页",
          cur_fn_data: [],
        },
      ], //总的数据列表
      cur_page_que_index: 0,
      editableTabsValue: "tab1",
      tabIndex: 0,
      previewVisible: false,
      context: [],
      queIndex: 0,
      currentTreeID: null,
      row: null, //行
      line: null, //列
      TopicIndex: null, //第几题的索引
      RowIndex: null, //第几行
      LineIndex: null, //第几列
      bgControlX: null, // 背景图插入模板的 x
      bgControlY: null, // 背景图插入模板的 y
      bgControlIndex: null, //插入第几个
      DeletebgControlIndex: null, //删除第几个
      fatherName: "",
      module_type: "",
      tmInde: "",
    };
  },
  computed: {
    getCurrentQuestionView() {
      const function_type = this.fn_type;
      switch (function_type) {
        case "single":
          return Single;
        case "text":
          return Textdes;
        case "record":
          return Record;
      }
    },
  },
  watch: {},
  //方法集合
  methods: {
    // 随意插入模板获取位置
    changeSite(x, y) {
      this.bgControlX = x;
      this.bgControlY = y;
    },
    // 插入索引
    changebgControlIndex(index) {
      this.bgControlIndex = index;
    },
    // 删除索引
    changeDeletebgControlIndex(index) {
      this.DeletebgControlIndex = index;
    },
    rowLine(value) {
      this[value] = this[value].match(/^\d*(\.?\d{0,2})/g)[0] || "";
    },
    createTable() {
      if (this.row && this.line) {
        let arr = {
          z_title: "",
          f_title: "",
          is_bg: false, //是否有背景色
          is_layout: false, // 是不是按背景图布局
          table_list: [],
        };
        for (let i = 0; i < this.row; i++) {
          let rowArr = [];
          for (let j = 0; j < this.line; j++) {
            let obj = {
              text: `第${i + 1}行,第${j + 1}列`,
              is_add_module: true,
              is_edit: true,
            };
            rowArr.push(obj);
          }
          arr.table_list.push(rowArr);
        }
        this.question_list[this.tabIndex].cur_fn_data.push(arr);
        this.row = null;
        this.line = null;
      } else {
        this.$message.warning("请输入行和列");
      }
    },
    // 添加模板
    addModule(topicIndex, rowindex, lineIndex, item) {
      this.TopicIndex = topicIndex;
      this.RowIndex = rowindex;
      this.LineIndex = lineIndex;
      item.is_add_module = false;
    },
    // 删除模板
    remoeModule(topicIndex, rowindex, lineIndex, item) {
      // this.question_list[this.tabIndex].cur_fn_data[topicIndex].tableList[
      //   rowindex
      // ][lineIndex].que = null;
      // this.$set(
      //   this.question_list[this.tabIndex].cur_fn_data[topicIndex].tableList[
      //     rowindex
      //   ][lineIndex],
      //   "que",
      //   null
      // );
      item.data = null;
      this.TopicIndex = null;
      this.RowIndex = null;
      this.LineIndex = null;
      item.is_add_module = true;
    },
    handleClosePre() {
      if (window.stopAudioVoice) window.stopAudioVoice();
      if (window.stopAudioAudio) window.stopAudioAudio();
      if (window.stopAudioSound) window.stopAudioSound();
      this.previewVisible = false;
    },
    onBlur(item, field) {
      item[field] = item[field] ? item[field].trim() : "";
    },
    // 当前目录id  name    父级name/当前 name
    changeId(id, name, fatherName) {
      this.fatherName = fatherName;
      this.currentTreeID = id;
      // 根据当前目录切换题
      let MethodName = "book-courseware_manager-GetCoursewareContent";
      let data = {
        id,
      };
      getContent(MethodName, data)
        .then((res) => {
          this.question_list = JSON.parse(res.content);
          this.cur_page_que_index =
            this.question_list[this.tabIndex].cur_fn_data.length - 1;
        })
        .catch((error) => {});
    },
    handleTabsEdit(targetName, action) {
      if (action === "add") {
        let leg = this.question_list.length;
        let obj = {
          name: `tab${leg + 1}`,
          title: `第${leg + 1}页`,
          cur_fn_data: [],
        };
        this.question_list.push(obj);
      }
      if (action === "remove") {
        let tabs = JSON.parse(JSON.stringify(this.question_list));
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        let question_list = tabs.filter((tab) => tab.name !== targetName);
        question_list.map((item, index) => {
          item.name = `tab${index + 1}`;
          item.title = `第${index + 1}页`;
          return item;
        });
        this.question_list = question_list;
      }
    },
    tabClick(tab) {
      this.tabIndex = tab.index;
    },
    // 大模板
    selectedFnType(item, index) {
      if (item.list) {
        return;
      }
      if (
        Object.prototype.toString.call(this.TopicIndex).indexOf("Number") ==
          -1 &&
        Object.prototype.toString.call(this.LineIndex).indexOf("Number") == -1
      ) {
        this.$message.warning("请先选择添加模板的位置");
        return;
      }

      if (
        this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
          .table_list[this.RowIndex][this.LineIndex].data
      ) {
        this.$message.warning("每列只能添加一个模板");
      } else {
        console.log("不存在");
        this.module_type = item.type;
        this.$set(
          this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
            .table_list[this.RowIndex][this.LineIndex],
          "type",
          item.type
        );
        this.$set(
          this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
            .table_list[this.RowIndex][this.LineIndex],
          "data",
          null
        );
        console.log(this.question_list);
      }
    },
    changeCurQue(data_stru) {
      console.log(this.RowIndex, this.LineIndex);
      this.$set(
        this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
          .table_list[this.RowIndex][this.LineIndex],
        "data",
        JSON.parse(JSON.stringify(data_stru))
      );
      console.log(this.question_list);
    },
    // 小模板
    selectSmallModule(item, child, itemIndex, childIndex) {
      console.log("选择了小模版");
      if (
        Object.prototype.toString.call(this.TopicIndex).indexOf("Number") ==
          -1 &&
        Object.prototype.toString.call(this.LineIndex).indexOf("Number") == -1
      ) {
        this.$message.warning("请先选择添加模板的位置");
        return;
      }
      let cur_fn_data = JSON.parse(
        JSON.stringify(this.fn_data[itemIndex].data_structure)
      );
      if (
        this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
          .table_list[this.RowIndex][this.LineIndex].data
      ) {
        this.$message.warning("每列只能添加一个模板");
      } else {
        cur_fn_data.ChildType = child.type;
        if (cur_fn_data.fn_list) {
          cur_fn_data.fn_list.forEach((gn) => {
            if (gn.type == child.type && gn.type != "image_record") {
              gn.isFn = true;
            }
            if (
              child.type == "image_input_three" ||
              child.type == "image_dobleinput" ||
              child.type == "image_wordInput" ||
              child.type == "image_gdcy"
            ) {
              if (gn.type == "image_input") {
                gn.isFn = true;
              }
            }
          });
        }

        this.$set(
          this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
            .table_list[this.RowIndex][this.LineIndex],
          "data",
          null
        );
      }
    },
    //删除某页中一个部分
    deleteCurQue(item, queIndex) {
      item.queList.splice(queIndex, 1);
    },
    onSave() {
      let question_list_str = JSON.stringify(this.question_list);
      localStorage.setItem("question_list", question_list_str);
      this.$message.success("保存成功");
      const MethodName = "book-courseware_manager-SaveCoursewareContent";
      let data = {
        id: this.currentTreeID,
        content: JSON.stringify(this.question_list),
      };
      getContent(MethodName, data)
        .then((res) => {})
        .catch((error) => {});
    },
    onPreview() {
      this.previewVisible = true;
      this.context = this.question_list;
    },
    onSure(curItem) {
      this.TopicIndex = null;
      this.RowIndex = null;
      this.LineIndex = null;
      curItem.is_edit = false;
    },
    onDel(item, curIndex) {
      item.cur_fn_data.splice(curIndex, 1);
      if (this.question_list[this.tabIndex].cur_fn_data.length > 0) {
        this.cur_page_que_index =
          this.question_list[this.tabIndex].cur_fn_data.length - 1;
      } else {
        this.cur_page_que_index = 0;
      }
      // let question_list_str = JSON.stringify(this.question_list);
      // localStorage.setItem("question_list", question_list_str);
    },
    //编辑当前题型
    editCurQue(curItem) {
      curItem.is_edit = true;
      console.log(curItem);
      // if (!curItem.isEdit) {
      //   let count = 0;
      //   let tabIndex = this.tabIndex;
      //   let leg = this.question_list[tabIndex].cur_fn_data.length;
      //   this.question_list[tabIndex].cur_fn_data.forEach((item) => {
      //     if (item.isEdit) {
      //       count++;
      //     }
      //   });
      //   if (count == 0) {
      //     if (!curItem.isEdit) {
      //       curItem.isEdit = true;
      //     }
      //   } else {
      //     this.$message.warning("有题目未保存");
      //   }
      // }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.fn_data = fn.fnData;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log(this.question_list);
    // let question_list_str = localStorage.getItem("question_list");
    // if (question_list_str) {
    //   this.question_list = JSON.parse(question_list_str);
    //   this.cur_page_que_index =
    //     this.question_list[this.tabIndex].cur_fn_data.length - 1;
    // }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Big-Book-container {
  width: 100%;
  min-height: 100vh;
  .Big-Book-content {
    padding: 26px 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .content-tree {
    width: 280px;
  }
  .Book-content {
    flex: 1;
    box-sizing: border-box;
    padding: 30px;
    height: 859px;
    overflow-y: auto;
    &-inner {
      // width: 860px;
    }
    .addoption {
      width: 148px;
      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;
      font-size: 14px;
      color: #000000;
      margin-top: 20px;
    }
    .createTable {
    }
  }
  .Big-Book-save {
    width: 860px;
    display: flex;
    justify-content: flex-end;
    padding: 0 0 20px 0;
  }
  .Big-Book {
    &-add {
      position: absolute;
      top: -40px;
      right: 0;
      z-index: 1;
      width: 73px;
      height: 40px;
      background: #f7f7f7;
      border: 1px solid #d9d9d9;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-size: 18px;
      text-align: center;
      color: #000000;
    }
    &-name {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 10px;
      > p {
        font-size: 14px;
      }
    }
    &-delete {
      width: 16px;
      height: 16px;
      margin-left: 15px;
      cursor: pointer;
    }
    &-curPage {
      margin-bottom: 20px;

      &.Big-Book-curPage-edit {
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        background-color: #fafafa;
      }
      &.Big-Book-curPage-preview {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        &:hover {
          background-color: #fafafa;
          border-top: 1px solid #e0e0e0;
          border-bottom: 1px solid #e0e0e0;
        }
      }
    }
    &-queBox {
      padding: 10px 0;
    }
  }

  .Book-function {
    width: 204px;
    background: #f7f7f7;
    box-sizing: border-box;
    padding: 30px 16px;
    height: 859px;
    overflow-y: auto;
    .function-list {
      width: 100%;
      > li {
        width: 100%;
        width: 172px;
        height: 40px;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.15);
        box-sizing: border-box;
        border-radius: 4px;
        cursor: pointer;
        margin-bottom: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        > span {
          font-weight: normal;
          font-size: 16px;
          line-height: 150%;
          color: #000000;
        }
      }
    }
  }
  .Big-Book-top {
    margin-top: 20px;
    display: flex;
    align-items: center;
    span {
      margin-right: 10px;
    }
  }
}
</style>