GridEtyPromptDialog.vue

<template>
  <el-dialog
    :title="promptData.title"
    :visible.sync="show"
    custom-class="grid-ety"
    :highlight-current-row="true"
    width="60%"
    :before-close="beforeClose"
  >
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      border
      @row-dblclick="selectEty"
    >
      <el-table-column
        v-for="(item, idx) in tableColumn"
        :key="idx"
        :property="item.prop"
        :label="item.label"
        :width="item.width"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next, total, jumper"
      :total="tableData.length"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="currentChange"
    >
    </el-pagination>
  </el-dialog>
</template>

<script>
export default {
  props: {
    promptData: {
      required: true,
      type: Object,
      default: () => {
        return {
          title: "",
          columnStr: "",
          data: [],
          rulePath: "",
          modelUrl: "", //非机构处理需要回填的字段路劲信息,isPty为false时必输
          defaultColumn: "",
        };
      },
    },
    isPty: {
      //默认为机构处理
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      show: false,
      currentPage: 1,
      pageSizes: [5, 10, 20, 30, 40, 50, 100],
      pageSize: 5,
    };
  },
  computed: {
    tableColumn() {
      return this.dealExtKeyTableColumn();
    },
    tableData() {
      return this.dealExtKeyTableData();
    },
  },
  methods: {
    dealExtKeyTableColumn() {
      const columnArr = [];
      const lines = this.promptData.columnStr.split("\n");
      const etyReg = /\"([^\"]*)\"/;
      const obj = {};
      for (let i = 0; i < lines.length; i++) {
        let line = lines[i];
        if (etyReg.test(line)) {
          const gs = line.match(etyReg);
          const columnName = gs[1];
          const newLine = line.replace(gs[0], " _ ");
          const colPropArr = newLine.split(/\s+/);
          const positionArr = colPropArr[1].split(":");
          if (!obj[positionArr[0]]) {
            obj[positionArr[0]] = [];
          }
          obj[positionArr[0]].push({
            idx: colPropArr[0],
            prop: columnName,
            width: colPropArr[3],
          });
        }
      }
      for (const k in obj) {
        if (Object.hasOwnProperty.call(obj, k)) {
          const o = obj[k];
          const tableColumn = o.map((item) => item.prop).join("\n");
          columnArr.push({
            prop: tableColumn,
            label: tableColumn,
            // width: o[0].width,
            width: "auto",
            index: k,
            children: o,
          });
        }
      }
      return columnArr.sort((a, b) => {
        return parseInt(a.index) - parseInt(b.index);
      });
    },
    dealExtKeyTableData() {
      const arr = [];
      for (let i = 0; i < this.promptData.data.length; i++) {
        const d = this.promptData.data[i];
        const items = d.split("\t");
        const it = {};
        for (let j = 0; j < this.tableColumn.length; j++) {
          const column = this.tableColumn[j];
          it[column["prop"]] = column.children
            .map((c) => items[c["idx"]] || " ")
            .join("\n");
        }
        it["IDX"] = i;
        //隐藏列，便于取值
        if (typeof this.promptData.shadow === "object") {
          for (let k in this.promptData.shadow) {
            it[k] = items[this.promptData.shadow[k]];
          }
        }
        arr.push(it);
      }
      return arr;
    },
    currentChange(currentPage) {
      this.currentPage = currentPage;
    },
    selectEty(row, column, event) {
      // 默认第一列
      var idx = this.promptData.defaultColumn;
      if (this.isPty) {
        const v = row[this.tableColumn[idx].prop].split("\n")[0];
        this.$emit("select-ety", v, this.promptData.rulePath);
      } else {
        const { modelUrl, isCover, rulePath } = this.promptData;
        let v = {};
        for (let k in modelUrl) {
          row[k] && (v[k] = row[k]);
        }
        this.$emit("select-ety", v, modelUrl, isCover, rulePath);
      }
      this.show = false;
      this.currentPage = 1;
    },
    beforeClose(done) {
      this.show = false;
      this.currentPage = 1;
      done();
    },
  },
};
</script>

<style>
.grid-ety .el-table .cell {
  white-space: pre-wrap;
}
</style>