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

<!-- 可配置表格 -->
<template>
  <div class="config-table">
    <div class="config-table-options">
      <div>
        表格阴影：
        <el-radio v-model="curQue.isShadow" :label="true">有</el-radio>
        <el-radio v-model="curQue.isShadow" :label="false">无</el-radio>
      </div>
      <div>
        表格标题：
        <el-radio v-model="curQue.isTitle" :label="true">有</el-radio>
        <el-radio v-model="curQue.isTitle" :label="false">无</el-radio>
        <el-input v-show="curQue.isTitle" v-model="curQue.title" type="text" />
      </div>
      <div>
        表头行背景色：
        <el-color-picker
          v-model="curQue.headerBgColor"
          size="mini"
          :predefine="predefineColors"
        />
      </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-radio v-model="curQue.pinyinPosition" label="top">上</el-radio>
        <el-radio v-model="curQue.pinyinPosition" label="bottom">下</el-radio>
        <el-radio v-model="curQue.pinyinPosition" label="left">左</el-radio>
        <el-radio v-model="curQue.pinyinPosition" label="right">右</el-radio>
      </div>
      <div>
        外层边框突出显示：
        <el-radio v-model="curQue.marginHighlight" :label="true">是</el-radio>
        <el-radio v-model="curQue.marginHighlight" :label="false">否</el-radio>
      </div>
      <div>
        <el-button @click="addTableHeader">增加一行表头</el-button>
        <el-button @click="addCol">增加一列</el-button>
        <el-button @click="addRow">增加一行</el-button>
      </div>
    </div>
    <div class="config-table-preview">
      <table class="preview-table">
        <caption v-if="curQue.isTitle">
          {{
            curQue.title
          }}
        </caption>
        <thead>
          <tr>
            <td />
            <td
              v-for="(item, k) in curQue.tableData.colsConfig.width"
              :key="`tfoot-${k}`"
            >
              第{{ k + 1 }}列
            </td>
            <td />
          </tr>
          <tr v-for="(item, i) in curQue.tableData.headers" :key="i">
            <th />
            <th v-for="(header, j) in item.content" :key="j">
              <el-form :inline="true" :model="header">
                <el-form-item label="内容">
                  <el-input v-model="header.text" class="text" />
                </el-form-item>
                <el-form-item label="合并行">
                  <el-input
                    v-model="header.rowspan"
                    class="rowspan"
                    type="number"
                  />
                </el-form-item>
                <el-form-item label="合并列">
                  <el-input
                    v-model="header.colspan"
                    class="colspan"
                    type="number"
                  />
                </el-form-item>
              </el-form>
            </th>
            <th>
              <el-button size="mini" @click="deleteThead(i)">
                删除表头
              </el-button>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, i) in curQue.tableData.body" :key="`row-${i}`">
            <td width="60">第{{ i + 1 }}行</td>
            <td v-for="(col, j) in row.content" :key="`col-${j}`">
              <p>
                {{
                  col.prefix + " " + col.text + " " + col.sentence_data.sentence
                }}
              </p>
              <template v-if="col.mulText">
                <ul
                  v-for="(dItem, dIndex) in col.mulText.detail"
                  :key="'ddItem' + dIndex"
                  class="option-detail-detail"
                >
                  <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 size="mini" @click="edit(i, j)">编辑</el-button>
            </td>
            <td>
              <el-button size="mini" @click="deleteRow(i)">删除行</el-button>
            </td>
          </tr>
          <tr>
            <td />
            <td
              v-for="(item, k) in curQue.tableData.colsConfig.width"
              :key="`tfoot-${k}`"
            >
              <el-input
                v-model.number="item.val"
                size="mini"
                class="input-width"
              >
                <template slot="prepend">宽度</template>
              </el-input>
              <el-button size="mini" @click="deleteCol(k)">删除列</el-button>
            </td>
            <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.vue";

export default {
  components: { CellEdit },
  props: {
    curQue: {
      type: Object,
      default: () => {
        return {
          isFirst: true,
          type: "config_table",
          name: "可配置表格",
          isShadow: false,
          isTitle: false,
          marginHighlight: false,
          pinyinPosition: "top",
          title: "",
          textAlign: "center",
          headerBgColor: "#fff",
          tableData: {
            headers: [],
            body: [
              {
                content: [
                  {
                    type: "content",
                    text: "",
                    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 }],
            },
          },
        };
      },
    },
    changeCurQue: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      visible: false,
      curIndex: {
        col: 0,
        row: 0,
      },
      predefineColors: ["#f6d5a4", "#efeff9", "#e2e1c8"],
    };
  },
  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: {
    edit(i, j) {
      this.curIndex = {
        col: j,
        row: i,
      };
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    addTableHeader() {
      if (this.cols <= 0 && this.rows <= 0) {
        return this.$message.warning("请先添加行或列");
      }
      let content = [];
      for (let i = 0; i < this.cols; i++) {
        content.push({
          text: "",
          rowspan: 1,
          colspan: 1,
        });
      }
      this.curQue.tableData.headers.push({
        isMerge: false,
        content,
      });
    },
    deleteThead(i) {
      this.curQue.tableData.headers.splice(i, 1);
    },

    addCol() {
      this.curQue.tableData.body.forEach(({ content }) => {
        content.push({
          type: "content",
          text: "",
          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: [],
          },
        });
      });
      this.curQue.tableData.headers.forEach(({ content }) => {
        content.push({
          text: "",
          rowspan: 1,
          colspan: 1,
        });
      });
      this.curQue.tableData.colsConfig.width.push({ val: 100 });
    },
    deleteCol(k) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.cols <= 1) return this.$message.warning("必须留一列");
        this.curQue.tableData.body.forEach(({ content }) => {
          content.splice(k, 1);
        });
        this.curQue.tableData.headers.forEach(({ content }) => {
          content.splice(k, 1);
        });
        this.curQue.tableData.colsConfig.width.splice(k, 1);
      });
    },

    addRow() {
      let content = [];
      for (let i = 0; i < this.cols; i++) {
        content.push({
          type: "content",
          text: "",
          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: [],
          },
        });
      }
      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);
      });
    },
  },
};
</script>

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

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

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

    .preview-table {
      border-collapse: collapse;

      td,
      th {
        padding: 8px;
      }

      td {
        border: 1px solid #aaa;

        .input-width {
          min-width: 118px;
        }
      }

      th {
        border: 1px solid #aaa;

        .rowspan,
        .colspan {
          width: 70px;
        }
      }
    }
  }
  .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>