GCLS_Page_Book_Component_NPC/src/components/Adult/common/SegwordConfig.vue

<!--  -->
<template>
  <div class="seg-word-config">
    <div
      class="adult-book-input-item"
      v-if="
        curQue &&
        type != 'sentence_segtemp_chs' &&
        type != 'sort_chs' &&
        type != 'sentence_listen_read_chs' &&
        type!=='adultinput' &&
        type!=='NewWord_chs'
      "
      style="margin-top: 10px"
    >
      <span class="adult-book-lable">字的大小:</span>
      <el-radio-group
        v-model="curQue.resetFontsize"
        @input="changeResetFontsize"
      >
        <el-radio label="12px">12px</el-radio>
        <el-radio label="16px">16px</el-radio>
        <el-radio label="20px">20px</el-radio>
        <el-radio label="24px">24px</el-radio>
        <el-radio label="28px">28px</el-radio>
      </el-radio-group>
    </div>
    <div
      class="adult-book-input-item"
      v-if="
        curQue &&
        type != 'sentence_segtemp_chs' &&
        type != 'sort_chs' &&
        type != 'sentence_listen_read_chs'
      "
    >
      <span class="adult-book-lable">字体:</span>
      <el-radio-group
        v-model="curQue.resetFontfamily"
        @input="changeResetFontfamily"
      >
        <el-radio
          v-for="(item, index) in fontFamilyList"
          :key="'fontFamilyList' + index"
          :label="item.value"
        >
          <span>{{ item.name }}</span>
        </el-radio>
      </el-radio-group>
    </div>
    <el-table :data="data" border style="width: 75%">
      <el-table-column prop="chs" label="词" width="120"> 
        <template slot-scope="scope">
          <div class="adult-book-input-item">
            <el-input
              size="small"
              v-model="scope.row.chs"
              placeholder="请输入词"
              @blur="onBlur(scope.row, 'chs')"
            ></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="拼音" width="220" v-if="type!=='adultinput'">
        <template slot-scope="scope">
          <div class="adult-book-input-item">
            <el-input
              size="small"
              v-model="scope.row.pinyin"
              placeholder="请输入拼音"
              @blur="onBlur(scope.row, 'pinyin')"
              style="margin-right: 10px"
            ></el-input>
            <el-button size="small" @click="_createWordPinyin(scope.row)"
              >生成拼音</el-button
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="配置"
        v-if="
          type != 'sort_chs' &&
          type != 'sentence_listen_read_chs' 
        "
      >
        <template slot-scope="scope">
          <div class="adult-book-input-item" v-if="type!=='adultinput'&&type!=='NewWord_chs'">
            <span class="adult-book-lable">字的大小:</span>
            <el-radio-group v-model="scope.row.fontSize">
              <el-radio label="12px">12px</el-radio>
              <el-radio label="16px">16px</el-radio>
              <el-radio label="20px">20px</el-radio>
              <el-radio label="24px">24px</el-radio>
              <el-radio label="28px">28px</el-radio>
            </el-radio-group>
          </div>
          <!-- <div class="adult-book-input-item">
            <span class="adult-book-lable">字的颜色:</span>
            <el-radio-group v-model="scope.row.fontColor">
              <el-radio
                v-for="(item, index) in colorList"
                :key="'colorList' + index"
                :label="item.value"
              >
                <span
                  :style="{
                    backgroundColor: item.value == 'sub' ? '' : item.value,
                  }"
                  :class="item.value != 'sub' ? 'colorItem' : ''"
                  >{{ item.value == "sub" ? "书的辅助色" : "" }}</span
                >
              </el-radio>
            </el-radio-group>
          </div> -->
          <div class="adult-book-input-item">
            <span class="adult-book-lable">字体:</span>
            <el-radio-group v-model="scope.row.fontFamily">
              <el-radio
                v-for="(item, index) in fontFamilyList"
                :key="'fontFamilyList' + index"
                :label="item.value"
              >
                <span>{{ item.name }}</span>
              </el-radio>
            </el-radio-group>
          </div>
          <div class="adult-book-input-item" v-if="type!=='adultinput'&&type!=='NewWord_chs'">
            <span class="adult-book-lable">设置下划线:</span>
            <el-checkbox v-model="scope.row.underLine">显示下划线</el-checkbox>
          </div>
          <div
            class="adult-book-input-item"
            v-if="
              type != 'sentence_segtemp_chs' &&
              type != 'dialogue_answer_chs' &&
              type != 'sentence_input_chs' &&
              type != 'sentence_judge_chs' &&
              type != 'sentence_record_chs' &&
              type != 'sentence_input_record_chs' &&
              type != 'sentence_listen_read_chs'
            "
          >
            <span class="adult-book-lable">设置间距:</span>
            <el-checkbox-group v-model="scope.row.wordPadding">
              <el-checkbox
                v-for="(item, index) in paddingList"
                :key="'colorList' + index"
                :label="item.value"
              >
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <template v-if="type==='dialogue_answer_chs'">
            <div class="adult-book-input-item">
                <span class="adult-book-lable">对齐方式：</span>
                <el-radio-group
                    v-model="scope.row.DiaTextAlign"
                >
                    <el-radio label="left">左对齐</el-radio>
                    <el-radio label="center">居中对齐</el-radio>
                    <el-radio label="right">右对齐</el-radio>
                </el-radio-group>
            </div>
            <div class="adult-book-input-item">
                <span class="adult-book-lable">横线长度：</span>
                <el-input type="number" v-model="scope.row.DiaInputLength" style="width:150px"></el-input>
            </div>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import "@/utils/pinyin_dict_withtone";
import "@/utils/pinyinUtil";
export default {
  components: {},
  props: ["data", "type", "curQue"],
  data() {
    return {
      colorList: [
        {
          value: "#000",
          name: "黑色",
        },
        {
          value: "sub",
          name: "主题色",
        },
      ],
      paddingList: [
        {
          value: "left",
          name: "要左边距",
        },
        {
          value: "right",
          name: "要右边距",
        },
      ],
      fontFamilyList: [
        {
          value: "FZJCGFKTK",
          name: "使用中文字体",
        },
        {
          value: "Sans-GBNPC",
          name: "使用拼音字体",
        },
        {
          value: "robot",
          name: "使用英文字体",
        },
        {
          value: "Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif",
          name: "系统字体",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    onBlur(item, field) {
      item[field] = item[field] ? item[field].trim() : "";
    },
    _createWordPinyin(item) {
      let result = pinyinUtil.getPinyin(item.chs);
      item.pinyin = result;
    },
    changeResetFontsize(value) {
      this.data.forEach((item) => {
        item.fontSize = value;
      });
    },
    changeResetFontfamily(value) {
      this.data.forEach((item) => {
        item.fontFamily = value;
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.curQue) {
      if (!this.curQue.hasOwnProperty("resetFontsize")) {
        this.$set(this.curQue, "resetFontsize", "");
      }
      if (!this.curQue.hasOwnProperty("resetFontfamily")) {
        this.$set(this.curQue, "resetFontfamily", "FZJCGFKTK");
      }
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.adult-book-input-item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 10px;
}
.adult-book-lable {
  width: 80px;
  font-size: 14px;
  display: block;
  text-align: right;
  margin-right: 8px;

  font-weight: bold;
  &-bottom {
    margin-bottom: 10px;
    display: block;
  }
}
.el-radio-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
}
.el-radio {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 6px;
}
.colorItem {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  display: block;
}
</style>