GCLS_Page_Book_Component_NPC/src/components/Adult/inputModules/HeaderSeparate/index.vue

<template>
  <div class="header-separate">
    <div class="header-separate-options">
      <div>
        表头英文位置：
        <el-radio v-model="curQue.headerEnglishPosition" label="top">
          上
        </el-radio>
        <el-radio v-model="curQue.headerEnglishPosition" label="right">
          右
        </el-radio>
        <el-radio v-model="curQue.headerEnglishPosition" label="bottom">
          下
        </el-radio>
        <el-radio v-model="curQue.headerEnglishPosition" label="left">
          左
        </el-radio>
      </div>
      <div>
        单元格拼音位置：
        <el-radio v-model="curQue.pinyinPosition" label="top">上</el-radio>
        <el-radio v-model="curQue.pinyinPosition" label="right">右</el-radio>
        <el-radio v-model="curQue.pinyinPosition" label="bottom">下</el-radio>
        <el-radio v-model="curQue.pinyinPosition" label="left">左</el-radio>
      </div>
      <div>
        首列对齐方式：
        <el-radio v-model="curQue.firstColAligin" label="center">居中</el-radio>
        <el-radio v-model="curQue.firstColAligin" label="follow">
          跟随内容
        </el-radio>
      </div>
      <div>
        内容对齐方式：
        <el-radio v-model="curQue.textAlign" label="left">左对齐</el-radio>
        <el-radio v-model="curQue.textAlign" label="center">居中</el-radio>
        <el-radio v-model="curQue.textAlign" label="right">右对齐</el-radio>
      </div>
      <div>
        <el-button @click="addCol">增加一列</el-button>
        <el-button @click="addRow">增加一行</el-button>
      </div>
    </div>
    <div class="header-separate-preview">
      <table class="preview-table">
        <thead>
          <tr>
            <td></td>
            <td
              v-for="(item, k) in curQue.tableData.colsConfig.width"
              :key="`tfoot-${k}`"
            >
              第{{k+1}}列
            </td>
            <td></td>
          </tr>
          <tr>
            <th></th>
            <th v-for="(num, i) in curQue.tableData.headers" :key="`th-${i}`">
              <el-input v-model="num.text">
                <template slot="prepend">文本</template>
              </el-input>
              <el-input v-model="num.english">
                <el-select
                  slot="prepend"
                  v-model="num.type"
                  placeholder="请选择"
                >
                  <el-option label="英文" value="english" />
                  <el-option label="拼音" value="pinyin" />
                </el-select>
              </el-input>
            </th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, i) in curQue.tableData.body" :key="`tr-${i}`">
            <td width="60">第{{i+1}}行</td>
            <td v-for="(col, j) in row.content" :key="`td-${j}`">
              <p>{{col.message+' '+col.text+' '+col.sentence_data.sentence}}</p>
              <template v-if="col.mulText">
                <ul
                class="option-detail-detail"
                v-for="(dItem, dIndex) in col.mulText.detail"
                :key="'ddItem' + dIndex"
                >
                <li
                    v-for="(ddItem, ddIndex) in dItem.detail"
                    :key="'ddItem' + dIndex + ddIndex"
                >
                    <span
                    :class="[
                        ddItem.config.wordPadding.indexOf('left') > -1
                        ? 'dleft'
                        : '',
                        ddItem.config.wordPadding.indexOf('right') > -1
                        ? 'dright'
                        : '',
                        !ddItem.sentence ? 'placeholder' : '',
                    ]"
                    >{{ ddItem.sentence }}</span
                    >
                </li>
                </ul>
              </template>
              <el-button @click="edit(i, j)">编辑</el-button>
            </td>
            <td>
              <el-button size="mini" @click="deleteRow(i)">删除行</el-button>
            </td>
          </tr>
          <tr>
            <td></td>
            <td
              v-for="(width, i) in curQue.tableData.colsConfig.width"
              :key="`width-${i}`"
            >
              <el-input v-model.number="width.val" size="mini">
                <template slot="prepend">宽度</template>
              </el-input>
              <el-button size="mini" @click="deleteCol(i)">删除列</el-button>
            </td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>

    <CellEdit
      :visible="visible"
      :body="curQue.tableData.body"
      :cur-index="curIndex"
      @close="close"
    />
  </div>
</template>

<script>
import CellEdit from "./components/CellEdit.vue";

export default {
  components: { CellEdit },
  props: {
    curQue: {
      type: Object,
      default: () => {
        return {
          isFirst: true,
          type: "header_separate",
          name: "表头分离表格",
          pinyinPosition: "top",
          headerEnglishPosition: "top",
          firstColAligin: "center",
          textAlign: "center",
          tableData: {
            headers: [
              {
                text: "",
                type: "english",
                english: "",
              },
              {
                text: "",
                type: "english",
                english: "",
              },
              {
                text: "",
                type: "english",
                english: "",
              },
            ],
            body: [
              {
                content: [
                  {
                    type: "content",
                    text: "",
                    message: "",
                    prefixOrSuffix: "prefix", // 前缀或后缀
                    isUnderline: false, // 下划线
                    background: "#fff", // 背景色
                    isCross: false, // 勾叉
                    answer: "",
                    CrossAnswer: "normal",
                    rowspan: 1,
                    colspan: 1,
                    sentence_data: {
                      type: "sentence_segword_chs",
                      name: "句子分词",
                      pyPosition: "top", // top 拼音在上面；bottom 拼音在下面
                      sentence: "", // 句子
                      segList: [], // 分词结果
                      seg_words: "",
                      wordsList: [],
                    },
                    mulText:{
                        correct: {
                            completeInput: ""
                        },
                        detail: [],
                        input_Isexample: false,
                    }
                  },
                  {
                    type: "content",
                    text: "",
                    message: "",
                    prefixOrSuffix: "prefix",
                    isUnderline: false,
                    background: "#fff",
                    isCross: false,
                    answer: "",
                    CrossAnswer: "normal",
                    rowspan: 1,
                    colspan: 1,
                    sentence_data: {
                      type: "sentence_segword_chs",
                      name: "句子分词",
                      pyPosition: "top", // top 拼音在上面；bottom 拼音在下面
                      sentence: "", // 句子
                      segList: [], // 分词结果
                      seg_words: "",
                      wordsList: [],
                    },
                    mulText:{
                        correct: {
                            completeInput: ""
                        },
                        detail: [],
                        input_Isexample: false,
                    }
                  },
                  {
                    type: "content",
                    text: "",
                    message: "",
                    prefixOrSuffix: "prefix",
                    isUnderline: false,
                    background: "#fff",
                    isCross: false,
                    answer: "",
                    CrossAnswer: "normal",
                    rowspan: 1,
                    colspan: 1,
                    sentence_data: {
                      type: "sentence_segword_chs",
                      name: "句子分词",
                      pyPosition: "top", // top 拼音在上面；bottom 拼音在下面
                      sentence: "", // 句子
                      segList: [], // 分词结果
                      seg_words: "",
                      wordsList: [],
                    },
                    mulText:{
                        correct: {
                            completeInput: ""
                        },
                        detail: [],
                        input_Isexample: false,
                    }
                  },
                ],
              },
            ],
            colsConfig: {
              width: [{ val: 100 }, { val: 100 }, { val: 100 }],
            },
          },
        };
      },
    },
    changeCurQue: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      visible: false,
      curIndex: {
        col: 0,
        row: 0,
      },
    };
  },
  computed: {
    rows() {
      return this.curQue.tableData.body.length;
    },
    cols() {
      if (this.rows.length <= 0) return 0;
      return this.curQue.tableData.body[0].content.length;
    },
  },
  created() {
    if (this.curQue.isFirst) {
      this.curQue.isFirst = false;
      this.changeCurQue(this.curQue);
    }
  },
  methods: {
    addCol() {
      this.curQue.tableData.body.forEach(({ content }) => {
        content.push({
          type: "content",
          text: "",
          message: "",
          prefixOrSuffix: "prefix",
          isUnderline: false,
          background: "#fff",
          isCross: false,
          rowspan: 1,
          colspan: 1,
          sentence_data: {
            type: "sentence_segword_chs",
            name: "句子分词",
            pyPosition: "top", // top 拼音在上面；bottom 拼音在下面
            sentence: "", // 句子
            segList: [], // 分词结果
            seg_words: "",
            wordsList: [],
          },
          mulText:{
            correct: {
                completeInput: ""
            },
            detail: [],
            input_Isexample: false,
          }
        });
      });
      this.curQue.tableData.headers.push({
        text: "",
        type: "english",
        english: "",
      });
      this.curQue.tableData.colsConfig.width.push({ val: 100 });
    },
    deleteCol(i) {
      this.$confirm("确定要删除此列吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.curQue.tableData.body.forEach(({ content }) => {
          content.splice(i, 1);
        });
        this.curQue.tableData.headers.splice(i, 1);
        this.curQue.tableData.colsConfig.width.splice(i, 1);
      });
    },

    addRow() {
      let content = [];
      for (let i = 0; i < this.cols; i++) {
        content.push({
          type: "content",
          text: "",
          message: "", // 内容
          prefixOrSuffix: "prefix",
          isUnderline: false,
          background: "#fff",
          isCross: false,
          rowspan: 1,
          colspan: 1,
          sentence_data: {
            type: "sentence_segword_chs",
            name: "句子分词",
            pyPosition: "top", // top 拼音在上面；bottom 拼音在下面
            sentence: "", // 句子
            segList: [], // 分词结果
            seg_words: "",
            wordsList: [],
          },
          mulText:{
            correct: {
                completeInput: ""
            },
            detail: [],
            input_Isexample: false,
          }
        });
      }
      this.curQue.tableData.body.push({
        content,
      });
    },
    deleteRow(i) {
      this.$confirm("确定要删除此行吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.rows <= 1) return this.$message.warning("必须留一行");
        this.curQue.tableData.body.splice(i, 1);
      });
    },

    edit(i, j) {
      this.curIndex = {
        col: j,
        row: i,
      };
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.header-separate {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;

  &-options {
    > div {
      margin-bottom: 12px;
    }
  }

  &-preview {
    border-top: 1px solid #ccc;
    padding-top: 12px;

    .preview-table {
      border-collapse: collapse;

      th {
        .el-select {
          width: 80px;
        }
      }

      td,
      th {
        padding: 8px;

        .el-input {
          max-width: 220px;
        }
      }

      td {
        border: 1px solid #aaa;
      }

      th {
        border: 1px solid #aaa;
      }
    }
  }
  .option-detail-detail {
    clear: both;
    overflow: hidden;
    margin-bottom: 10px;
    > li {
        float: left;
        > span {
        float: left;
        &.dleft {
            padding-left: 4px;
        }
        &.dright{
            padding-right: 4px;
        }
        }
    }
    > i {
        float: left;
    }
  }
}
</style>