<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时必输 }; }, }, 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) { // 默认第一列 if (this.isPty) { const v = row[this.tableColumn[0].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>