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

<!--  -->
<template>
  <div class="Big-Book-Single" v-if="curQue">
    <div class="Big-Book-Single-content" style="margin-top: 20px">
      <div class="adult-book-input-item">
        <span class="adult-book-lable">标题：</span>           
        <el-input
          style="width: 300px"
          placeholder="请输入标题"
          v-model="curQue.title"
          @blur="onBlur(curQue, 'title')"
          class="adult-book-input"
          :autosize="{ minRows: 2 }"
        ></el-input>
      </div>
      <div class="adult-book-input-item">
        <span class="adult-book-lable">标题颜色：</span>  
        <div class="adult-book-main">
          <el-radio-group v-model="curQue.titleBg">
            <el-radio label="white">白色</el-radio>
            <el-radio label="themeColor">书的主题色</el-radio> </el-radio-group
          >  
        </div>
      </div>
      <div class="adult-book-input-item">
        <span class="adult-book-lable">详细信息：</span>  
        <div class="adult-book-main">
          <el-radio-group v-model="curQue.isInfor">
            <el-radio :label="true">有</el-radio>
            <el-radio :label="false">没有</el-radio> </el-radio-group
          >  
        </div>
              
      </div>

      <div
        class="Big-Book-main"
        v-for="(item, index) in curQue.option"
        :key="'newWord' + index"
        style="border-bottom: 1px #ccc solid; margin-bottom: 20px"
      >
        <div
          class="Big-Book-main-inner"
          v-for="(sItem, sIndex) in item"
          :key="'newWord_' + sIndex"
        >
          <NewordPhraseModule
            :curQueItem="sItem"
            :index="index"
            :sIndex="sIndex"
            :type="curQue.type"
            :deleteGroup="deleteGroup"
          />
        </div>
        <div class="addoption addoption2" @click="saddoption(item)">
          添加字词
        </div>
        <el-button size="mini" type="danger" @click="delsItem(index)">
          删除本组
        </el-button>
      </div>
      <div class="addoption" @click="addoption">添加一组</div>
    </div>
  </div>
</template>

<script>
import Inputmodule from "../common/Inputmodule.vue";
import NewordPhraseModule from "../common/NewordPhraseModule.vue";

export default {
  name: "Single",
  props: ["curQue", "changeCurQue"],
  components: {
    Inputmodule,
    NewordPhraseModule,
  },
  data() {
    return {
      data_structure: {
        type: "NewWord_chs",
        name: "生词",
        title: "",
        isInfor: true,
        titleBg: "themeColor", //标题背景颜色
        option: [
          [
            {
              new_word: "",
              cixing: "", //词性
              definition_list: [""], //需要增加词性
              pinyin: "",
              img_list: [],
              mp3_list: [],
              pinyin_site: "first", //拼音位置
            },
          ],
        ],
      },
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    onBlur(item, field) {
      item[field] = item[field] ? item[field].trim() : "";
    },
    addoption() {
      let leg = this.curQue.option.length;
      let last = this.curQue.option[leg - 1];
      let res_data = JSON.parse(JSON.stringify(this.data_structure));
      let obj = res_data.option[0];
      this.curQue.option.push(obj);
    },
    deleteGroup(index, sIndex) {
      if (this.curQue.option[0].length == 1) {
        this.$message.warning("至少剩余1个，不能全部删除");
        return;
      }
      this.curQue.option[index].splice(sIndex, 1);
    },
    saddoption(item) {
      let con = {
        new_word: "",
        cixing: "", //词性
        definition_list: [""], //需要增加词性
        pinyin: "",
        img_list: [],
        mp3_list: [],
      };
      item.push(con);
    },
    delsItem(index) {
      this.curQue.option.splice(index, 1);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (!this.curQue) {
      let res_data = JSON.parse(JSON.stringify(this.data_structure));
      this.changeCurQue(res_data);
    } else {
      if (!this.curQue.hasOwnProperty("isInfor")) {
        this.$set(this.curQue, "isInfor", true);
      }
      if (!this.curQue.hasOwnProperty("titleBg")) {
        this.$set(this.curQue, "titleBg", "themeColor");
      }
      // let data = JSON.parse(JSON.stringify(this.curQue));
      this.curQue.option.forEach((item) => {
        if (!item[0].pinyin_site) {
          item[0].pinyin_site = "first"; //拼音位置
        }
      });
      // this.curQue = JSON.parse(JSON.stringify(data));
    }
  },
  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 {
      background: rgba(230, 229, 229, 0.3);
      border: 1px #999 solid;
      border-radius: 8px;
      padding: 20px;
      > div {
        margin-bottom: 10px;
        &.Big-Book-pinyin {
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
      }
      .Big-Book-main-inner {
      }
    }
  }
  .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;
    &.addoption2 {
      width: 200px;
    }
  }
  .Big-Book-con {
    padding-bottom: 6px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
  }
}
</style>
<style lang="scss">
</style>