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

<!--  -->
<template>
  <div class="sentence-seg-temp" v-if="detail">
    <div class="seg-congfig">
      <div class="adult-book-input-item">
        <span
          class="adult-book-lable"
          style="line-height: 32px; margin-left: 10px"
          >横线长度：</span
        >
        <el-select v-model="detail.hengLeg" placeholder="请选择" size="small">
          <el-option
            v-for="item in inputLegOptions"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="adult-book-input-item" v-if="type !== 'config_table'">
        <el-button type="primary" size="small" @click="setConfig" style="margin"
          >功能设置</el-button
        >
        <!-- <ul class="check-fn-list">
          <li v-if="items && items.fn_check_list.sent_check">
            {{ items.fn_check_list.sent_check | getFnName(fn_list) }}
          </li>
          <li v-if="items && items.fn_check_list.short_check">
            {{ items.fn_check_list.short_check | getFnName(fn_list) }}
          </li>
          <li v-if="items && items.fn_check_list.long_check">
            {{ items.fn_check_list.long_check | getFnName(fn_list) }}
          </li>
          <li v-if="items && items.fn_check_list.judge_check">
            {{ items.fn_check_list.judge_check | getFnName(fn_list) }}
          </li>
          <li v-if="items && items.fn_check_list.checkbox_check">
            {{ items.fn_check_list.checkbox_check | getFnName(fn_list) }}
          </li>
          <li v-if="items && items.fn_check_list.radio_check">
            {{ items.fn_check_list.radio_check | getFnName(fn_list) }}
          </li>
          <li v-if="items && items.fn_check_list.record_check">
            {{ items.fn_check_list.record_check | getFnName(fn_list) }}
          </li>
        </ul> -->
      </div>
    </div>
    <div class="adult-book-input-item">
      <span class="adult-book-lable">句子缩进：</span>
      <el-radio-group v-model="detail.textindent">
        <el-radio :label="true">是</el-radio>
        <el-radio :label="false">否</el-radio>
      </el-radio-group>
    </div>
    <div
      class="sentence-option"
      v-for="(dItem, dIndex) in detail.detail"
      :key="'items.detail' + dIndex"
    >
      <div class="adult-book-input-item adult-book-input-item-center">
        <span class="adult-book-lable">元素{{ dIndex + 1 }}.</span>
        <el-button size="small" @click="deleteElement(dIndex)"
          >删除元素</el-button
        >

        <el-button
          type="primary"
          size="small"
          icon="el-icon-top"
          @click="moveElement(dItem, dIndex, 'up')"
          >上移</el-button
        >
        <el-button
          type="primary"
          size="small"
          icon="el-icon-bottom"
          @click="moveElement(dItem, dIndex, 'down')"
          >下移</el-button
        >
      </div>
      <template>
        <SentenceSegwordChs
          :curQue="dItem"
          :segModel="segModel"
          name="元素"
          :type="type"
        />
        <div class="adult-book-input-item" style="margin-top: 10px">
          <span class="adult-book-lable">图片：</span>
          <Upload
            :changeFillId="timuchangeImage"
            :datafileList="dItem.img_list ? dItem.img_list : []"
            :filleNumber="1"
            :uploadType="'image'"
            :index="dIndex"
          />
        </div>
      </template>
      <template>
        <div class="adult-book-input-item adult-book-input-item-center">
          <span class="adult-book-lable">字体:</span>
          <el-radio-group
            v-model="dItem.config.fontFamily"
            @input="value => changefontFamily(value, dItem)"
          >
            <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 adult-book-input-item-center">
          <span class="adult-book-lable">字的大小:</span>
          <el-radio-group
            v-model="dItem.config.fontSize"
            @input="value => changefontSize(value, dItem)"
          >
            <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 adult-book-input-item-center">
          <span class="adult-book-lable">字的颜色:</span>
          <el-radio-group v-model="dItem.config.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 adult-book-input-item-center">
          <span class="adult-book-lable">设置间距:</span>
          <el-checkbox-group v-model="dItem.config.wordPadding">
            <el-checkbox
              v-for="(item, index) in paddingList"
              :key="'paddingList' + index"
              :label="item.value"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="adult-book-input-item">
          <span class="adult-book-lable">输入内容：</span>
          <el-radio-group v-model="dItem.config.conAlign">
            <el-radio label="left">左对齐</el-radio>
            <el-radio label="center">居中对齐</el-radio>
          </el-radio-group>
        </div>
      </template>
    </div>
    <el-button @click="addElement()" style="margin-bottom: 10px"
      >添加元素</el-button
    >
    <!-- <div class="adult-book-input-item">
      <span class="adult-book-lable">英文:</span>
      <el-input
        v-model="detail.en"
        type="textarea"
        placeholder="请输入英文翻译"
      />
    </div> -->
    <el-dialog
      title="功能设置"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      append-to-body
      :visible.sync="configVisible"
      width="80%"
    >
      <FnConfig :items="items" :config="queConfig" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="configVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveConfig">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SentenceSegwordChs from "./SentenceSegwordChs";
import FnConfig from "./FnConfig.vue";
import Upload from "./Upload.vue";
export default {
  components: {
    SentenceSegwordChs,
    FnConfig,
    Upload
  },
  props: ["detail", "segModel", "type"],
  data() {
    return {
      inputLegOptions: [
        {
          name: "系统默认值",
          value: -1
        },
        {
          name: "约1个汉字的宽度",
          value: 1
        },
        {
          name: "约2个汉字的宽度",
          value: 2
        },
        {
          name: "约3个汉字的宽度",
          value: 3
        },
        {
          name: "约4个汉字的宽度",
          value: 4
        },
        {
          name: "约5个汉字的宽度",
          value: 5
        }
      ],
      colorList: [
        {
          value: "#000",
          name: "黑色"
        },
        {
          value: "sub",
          name: "辅助色"
        },
        {
          value: "#FF8730",
          name: "橙色"
        },
        {
          value: "#3CB4E7",
          name: "蓝色"
        },
        {
          value: "#ED5050",
          name: "浅红色"
        },
        {
          value: "#FF3F3F",
          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, sans-serif, alabo",
          name: "系统字体"
        },
        {
          value: "math",
          name: "公式字体"
        }
      ],
      configVisible: false,
      items: null,
      queConfig: {
        fn_record_list: [
          {
            type: "sentence_record_mini_chs",
            name: "录音控件-mini",
            isFn: false
          },
          {
            type: "sentence_record_normal_chs",
            name: "录音控件-normal",
            isFn: false
          },
          {
            type: "sentence_record_pro_chs",
            name: "录音控件-pro",
            isFn: false
          },
          {
            type: "sentence_record_promax_chs",
            name: "录音控件-promax",
            isFn: false
          }
        ]
      }
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    changefontFamily(value, dItem) {
      //   if (value == "楷体") {
      //     dItem.config.fontSize = "16px";
      //   } else if (value == "Sans-GBNPC") {
      //     dItem.config.fontSize = "16px";
      //   } else if (value == "robot") {
      //     dItem.config.fontSize = "16px";
      //   }
      if (dItem && dItem.wordsList && dItem.wordsList.length > 0) {
        dItem.wordsList.forEach((item, index) => {
          item.fontFamily = value;
        });
      }
    },
    changefontSize(value, dItem) {
      if (dItem && dItem.wordsList && dItem.wordsList.length > 0) {
        dItem.wordsList.forEach((item, index) => {
          item.fontSize = value;
        });
      }
    },
    addElement() {
      let obj = {
        pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
        sentence: "", //句子
        segList: [], //分词结果
        seg_words: "",
        wordsList: [],
        hengList: [],
        config: {
          fontSize: "20px",
          fontColor: "#000",
          fontFamily: "楷体,FZJCGFKTK",
          wordPadding: [],
          conAlign: "center"
        }
      };
      this.detail.detail.push(JSON.parse(JSON.stringify(obj)));
    },
    deleteElement(index) {
      this.detail.detail.splice(index, 1);
    },
    moveElement(dItem, index, type) {
      let obj = JSON.parse(JSON.stringify(dItem));
      if (type == "up" && index > 0) {
        this.detail.detail.splice(index - 1, 0, obj);
        this.detail.detail.splice(index + 1, 1);
      }
      if (type == "down" && index < this.detail.detail.length - 1) {
        this.detail.detail[index] = this.detail.detail.splice(
          index + 1,
          1,
          this.detail.detail[index]
        )[0];
      }
    },
    //功能设置
    setConfig() {
      this.configVisible = true;
      this.items = JSON.parse(JSON.stringify(this.detail));
    },
    saveConfig() {
      this.configVisible = false;
      this.$set(this.detail, "fn_check_list", this.items.fn_check_list);
    },
    timuchangeImage(fileList, duration, 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,
            file_size: item.response.file_info_list[0].file_size,
            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]"
          };
          articleImgRes.push(obj);
        }
      });

      this.detail.detail[index].img_list = JSON.parse(
        JSON.stringify(articleImgRes)
      );
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log(this.detail);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.sentence-option {
  border: 1px #ccc solid;
  background: #f5f5f5;
  padding: 10px;
  margin-bottom: 10px;
}
.adult-book-input-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  &-center {
    align-items: center;
  }
}
.adult-book-lable {
  width: 70px;
  font-size: 14px;
  display: block;
  text-align: right;
  margin-right: 8px;
  line-height: 32px;
  &-bottom {
    margin-bottom: 10px;
    display: block;
  }
}
.el-radio-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.el-radio {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.colorItem {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  display: block;
}
.seg-congfig {
  display: flex;
  justify-content: space-between;
}
</style>