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>
            <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>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, i) in curQue.tableData.body" :key="`tr-${i}`">
            <td v-for="(col, j) in row.content" :key="`td-${j}`">
              <el-button @click="edit(i, j)">编辑</el-button>
            </td>
            <td>
              <el-button size="mini" @click="deleteRow(i)">删除行</el-button>
            </td>
          </tr>
          <tr>
            <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>
          </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, // 勾叉
                    rowspan: 1,
                    colspan: 1,
                    sentence_data: {
                      type: "sentence_segword_chs",
                      name: "句子分词",
                      pyPosition: "top", // top 拼音在上面；bottom 拼音在下面
                      sentence: "", // 句子
                      segList: [], // 分词结果
                      seg_words: "",
                      wordsList: [],
                    },
                  },
                  {
                    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: [],
                    },
                  },
                  {
                    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: [],
                    },
                  },
                ],
              },
            ],
            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: [],
          },
        });
      });
      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: [],
          },
        });
      }
      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;
      }
    }
  }
}
</style>