GCLS_Page_Book/src/components/inputModules/compose/ChineseRadical.vue

<template>
  <!-- 选择偏旁部首组成汉字 -->
  <div class="ChineseRadical Book_enter_container" v-if="curQue">
    <el-form-item label="文字">
      <el-input
        :key="item + i"
        @blur="onBlur(item, 'con')"
        @change="changChinese"
        placeholder="请输入文字"
        style="width: 300px; margin-bottom: 10px"
        v-for="(item, i) in curQue.stem"
        v-model="item.con"
      />
      <Upload
        :changeFillId="changeMp3"
        :datafileList="curQue.stem.length > 0 && curQue.stem[0].mp3List"
        :filleNumber="filleNumber"
        :uploadType="'mp3'"
      />
    </el-form-item>
    <el-form-item label="拼音">
      <div class="Book_flex">
        <el-input
          :key="item + i"
          @blur="onBlur(item, 'pinyin')"
          placeholder="请输入拼音"
          style="width: 300px"
          v-for="(item, i) in curQue.stem"
          v-model="item.pinyin"
        />
        <div @click="getPinyin(item)" class="insert_pinyin">
          <img class="pinyin_icon" src="../../../assets/common/pinyin.png" />
          <span>插入拼音</span>
        </div>
      </div>
    </el-form-item>
    <el-form-item label>
      <div :key="i" class="itemlist" v-for="(item, i) in curQue.option">
        <span style="margin-right: 10px">选项{{ i + 1 }}</span>
        <el-select
          @change="handleChange(item)"
          placeholder="请选择"
          v-model="item.img_url"
        >
          <el-option
            :disabled="opitem.isDisable"
            :key="opitem.resource_key"
            :label="opitem.index_memo"
            :value="opitem.id"
            v-for="opitem in structureListRes"
          ></el-option>
        </el-select>
        <img :src="item.con" class="img_url" v-if="item.img_url" />
        <el-radio
          :label="i"
          @change="changeAnswer(i)"
          style="margin-left: 10px"
          v-model="item.isAnswer"
          >正确答案</el-radio
        >
        <div class="add">
          <div @click="removeOption(i)"></div>
        </div>
      </div>
      <div class="Remove">
        <div @click="addOption"></div>
      </div>
    </el-form-item>
    <!-- <el-form-item label="功能设置">
      <el-checkbox v-model="curQue.playStorkes">播放笔顺</el-checkbox>
        </el-form-item>-->
    <el-form-item style="text-align: right; padding-right: 20px">
      <el-button @click="saveCurque" style="margin-right: 10px" type="primary"
        >保存</el-button
      >
      <el-popconfirm @onConfirm="removeCurque" title="确定删除吗？">
        <el-button slot="reference" type="primary">删除</el-button>
      </el-popconfirm>
      <!-- <el-popconfirm title="这是一段内容确定删除吗？">
        <el-button type="primary" @click="removeCurque">刪除</el-button>
            </el-popconfirm>-->
    </el-form-item>
  </div>
</template>

<script>
import Upload from "../../../components/inputModules/common/Upload";
import "../../../utils/pinyin_dict_withtone";
import "../../../utils/pinyinUtil";
export default {
  name: "ChineseStrokes",
  props: [
    "curQue",
    "changeDataList",
    "saveCacheData",
    "removeCaheData",
    "hanziSideList",
  ],
  components: {
    Upload,
  },
  data() {
    return {
      item: [
        "ā",
        "á",
        "ǎ",
        "à",
        "ō",
        "ó",
        "ǒ",
        "ò",
        "ē",
        "é",
        "ě",
        "è",
        "ī",
        "í",
        "ǐ",
        "ì",
        "ū",
        "ú",
        "ǔ",
        "ù",
        "ǖ",
        "ǘ",
        "ǚ",
        "ǜ",
      ],
      targetitem: {
        // mp3: "", //音频
        // option: [
        //   {
        //     con: "",
        //     isAnswer: "",
        //   },
        // ], //选项
        // correct: [], //正确答案
        // type: "", //题的类型
        // content: "", //题干
      },
      spellShow: false,
      optionIndex: null,
      filleNumber: 1,
      structureListRes: [],
    };
  },
  watch: {
    hanziSideList: {
      handler: function (val, oldVal) {
        let _this = this;
        if (val) {
          _this.structureListRes = _this.handleStructureList(val);
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  methods: {
    handleChange(opItem) {
      let option = this.curQue.option;
      this.structureListRes.map((item) => {
        if (item.id == opItem.img_url) {
          opItem.con = item.file_url;
        }
        let opArr = option.filter((opitem) => opitem.img_url == item.id);
        if (opArr.length > 0) {
          item.isDisable = true;
        } else {
          item.isDisable = false;
        }
        return item;
      });
    },
    // 去除首位的空格
    onBlur(item, field) {
      item[field] = item[field] ? item[field].trim() : "";
    },
    // 上传音频
    changeMp3(id, fileList, duration) {
      this.curQue.stem[0].mp3_url = id ? "[FID##" + id + "##FID]" : "";
      this.curQue.stem[0].duration = duration ? duration : 0;
      this.curQue.stem[0].mp3List = fileList;
    },
    // 修改文字
    changChinese(e) {
      if (e == "") {
        this.curQue.stem.forEach((item) => {
          item.pinyin = " ";
        });
      }
    },
    // 保存单个题
    saveCurque() {
      this.saveCacheData();
    },
    removeCurque() {
      this.removeCaheData();
    },
    // 点击生成拼音
    getPinyin() {
      let bool = false;
      let value = "";
      this.curQue.stem.forEach((item) => {
        if (item.con == "") {
          this.$message.info("请先输入内容,再生成拼音");
          bool = true;
        } else {
          value = item.con;
        }
      });
      if (bool) {
        return;
      }
      let result = pinyinUtil.getPinyin(value);
      this.curQue.stem.forEach((item) => {
        item.pinyin = result;
      });
    },
    changeAnswer(index) {
      this.curQue.option.forEach((item, i) => {
        if (i == index) {
          this.curQue.correct[0] = item.img_url;
        } else {
          this.$set(this.curQue.option[i], "isAnswer", "");
        }
      });
    },
    addOption(index) {
      let flag = false;
      this.curQue.option.forEach((item) => {
        if (item.con == "") {
          flag = true;
        }
      });
      if (flag) {
        this.$message.info("请先填空再增加选项");
        return;
      }
      let obj = {
        con: "",
      };
      this.curQue.option.push(obj);
    },
    removeOption(index) {
      if (this.curQue.option.length <= 2) {
        this.$message.info("至少要有两个选项");
        return;
      }
      this.curQue.option.splice(index, 1);
      this.handleChange();
    },
    handleStructureList(arr) {
      let _this = this;
      arr = arr.map((item, index) => {
        item.id = "[FID##" + item.file_id + "##FID]";
        let opArr = _this.curQue.option.filter(
          (opitem) => opitem.img_url == item.id
        );
        if (opArr.length > 0) {
          item.isDisable = true;
        } else {
          item.isDisable = false;
        }
        item.index = index + 1;
        item.index_memo = `${item.index}. ${item.memo}`;
        return item;
      });

      return arr;
    },
  },
  created() {},
  mounted() {
    let _this = this;
    _this.structureListRes = _this.handleStructureList(this.hanziSideList);
  },
};
</script> 

<style lang="scss" scoped>
.ChineseRadical {
  .pinyin {
    width: 400px;
    height: 180px;
    background: #ebebeb;
    border-radius: 5.3566px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 8px 10px;
  }
  .pinyin > div {
    margin: 5px;
    width: 32px;
    height: 35px;
    line-height: 32px;
    text-align: center;
    background: #fcfcfe;
    box-shadow: 0px 0.732069px 0px #898a8d;
    border-radius: 5.3566px;
    cursor: pointer;
  }
  .Upload {
    cursor: pointer;
    margin-left: 10px;
  }
  .Upload img {
    position: relative;
    top: 4px;
  }
  .itemlist {
    margin-bottom: 10px;
    margin-left: 20px;
    display: flex;
    align-items: center;
  }
  .add > div,
  .Remove > div {
    width: 40px;
    height: 40px;
    border: 1px solid #000000;
    display: flex;
    justify-content: center;
    align-content: center;
    cursor: pointer;
  }
  .Remove > div {
    margin-left: 65px;
    margin-top: 10px;
    background: url("../../../assets/common/add.png") no-repeat 50%;
  }
  .add > div {
    margin-left: 10px;
    background: url("../../../assets/common/remove.png") no-repeat 50%;
  }
  .img_url {
    width: 38px;
    margin-left: 20px;
    border: 1px solid #dcdfe6;
  }
}
</style>