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">
                <template slot="prepend">英文</template>
              </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>

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

<script>
import CellEdit from './components/CellEdit';

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: "",
                english: ""
              },
              {
                text: "",
                english: ""
              },
              {
                text: "",
                english: ""
              }
            ],
            body: [
              {
                content: [
                  {
                    type: "content",
                    text: "",
                    sentence_data: {
                      type: "sentence_segword_chs",
                      name: "句子分词",
                      pyPosition: "top", // top 拼音在上面；bottom 拼音在下面
                      sentence: "", // 句子
                      segList: [], // 分词结果
                      seg_words: "",
                      wordsList: []
                    }
                  },
                  {
                    type: "content",
                    text: "",
                    sentence_data: {
                      type: "sentence_segword_chs",
                      name: "句子分词",
                      pyPosition: "top", // top 拼音在上面；bottom 拼音在下面
                      sentence: "", // 句子
                      segList: [], // 分词结果
                      seg_words: "",
                      wordsList: []
                    }
                  },
                  {
                    type: "content",
                    text: "",
                    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: "",
          sentence_data: {
            type: "sentence_segword_chs",
            name: "句子分词",
            pyPosition: "top", // top 拼音在上面；bottom 拼音在下面
            sentence: "", // 句子
            segList: [], // 分词结果
            seg_words: "",
            wordsList: []
          }
        });
      });
      this.curQue.tableData.headers.push({
        text: "",
        english: ""
      });
      this.curQue.tableData.colsConfig.width.push({ val: 100 });
    },
    deleteCol(i) {
        this.$confirm("确定要删除此列吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
            if (this.cols <= 3) return this.$message.warning("必须留三列");
            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: "",
          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;

      td,
      th {
        padding: 8px;

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

      td {
        border: 1px solid #aaa;
      }

      th {
        border: 1px solid #aaa;
      }
    }
  }
}
</style>