cnysel UI改造

src/views/Business/Cnysel/IStreamTable.vue

+<template>
+  <div class="eContainer-table-block">
+    <div style="text-align: left" v-if="showButtonFlg" class="buttonDiv">
+      <c-button
+        icon="el-icon-s-tools"
+        @click="clounmSetting"
+        style="margin-right: 87px;margin-top: 10px;"
+      ></c-button>
+    </div>
+    <el-table
+      ref="table"
+      :data="
+        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+      "
+      style="width: 100%"
+      class="eContainer-table"
+      @selection-change="handleSelectionChange"
+      :row-key="getRowKey"
+      :header-cell-style="{
+        background: 'rgb(235, 235, 235)',
+        color: 'rgb(51, 51, 51)',
+      }"
+      :highlight-current-row="true"
+      @row-click="rowClick"
+      :border="true"
+      max-height="380"
+    >
+      <el-table-column
+        type="selection"
+        width="55"
+        v-if="showSelection"
+        :reserve-selection="true"
+      ></el-table-column>
+
+      <c-table-column
+        v-for="(item, key) in tableColumns"
+        :key="key"
+        :prop="item.prop"
+        :label="item.label"
+        :width="item.width"
+        sortable
+      >
+        <template v-slot="{ scope }">
+          <!-- <template slot-scope="{ scope }"> -->
+          <span>{{
+            !item.render ? scope.row[item.prop] : item.render(item, scope)
+          }}</span>
+        </template>
+      </c-table-column>
+      <slot></slot>
+    </el-table>
+
+    <el-dialog
+      class="showColumnDialog"
+      :visible.sync="setColumnFlg"
+      :title="'自定义列属性'"
+      appenD-to-body
+      v-if="showButtonFlg"
+    >
+      <el-form-item label-width="0" style="display: flex;
+    align-items: center;">
+        <el-checkbox-group v-model="columnGroup" @change="handleColumnChange">
+          <el-checkbox
+            class="selectColumnClass checkbox-left"
+            style="margin-right:45px;"
+            v-for="item in tableColumnsOrigin"
+            :key="item.label"
+            :label="parseInt(item.index)"
+            >{{ item.label }}</el-checkbox
+          >
+        </el-checkbox-group>
+      </el-form-item>
+      <span slot="footer" style="display: flex;
+    align-items: center;">
+        <el-checkbox
+          class="selectAllClass checkbox-left"
+          :indeterminate="
+            columnGroup.length > 0 &&
+            columnGroup.length < tableColumnsOrigin.length
+          "
+          v-model="selectAll"
+          @change="setAll"
+          >全选</el-checkbox
+        >
+        <el-button type="primary" @click="saveColumnEvent" style="margin-left:10px;">保存</el-button>
+      </span>
+    </el-dialog>
+    <c-col :span="16" v-if="tableData.length>10">
+      <el-pagination
+        v-if="paginationShow"
+        class="eContainer-pagination"
+        layout="prev, pager, next, jumper"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        :total="tableData.length"
+        @size-change="sizeChange"
+        @current-change="currentChange"
+      ></el-pagination>
+    </c-col>
+    <c-col :span="8" style="float:right">
+      <div class="paginationLable" v-if="paginationShow">
+        当前显示第 {{ (currentPage - 1) * pageSize + 1 }}-{{
+          currentPage * pageSize > tableData.length
+            ? tableData.length
+            : currentPage * pageSize
+        }}
+        条，共 {{ tableData.length }} 条
+      </div>
+    </c-col>
+  </div>
+</template>
+
+
+<script>
+import CodeTable from "~/config/CodeTable";
+
+export default {
+  props: {
+    columns: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    showSelection: {
+      type: Boolean,
+      default: false,
+    },
+    paginationShow: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    showButtonFlg: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  watch: {
+    columns() {
+      this.generateColumns();
+    },
+  },
+  computed: {
+    tableData() {
+      // return this.list.map((row) => {
+      // 	const res = {}
+      //   const vals = row.split("\t");
+      // 	for (let i = 0; i < vals.length; i++) {
+      // 		res[`${i}`] = vals[i];
+      // 	}
+      // 	return res;
+      // });
+      const arr = [];
+      for (let i = 0; i < this.list.length; i++) {
+        const d = this.list[i];
+        const items = d.split("\t");
+        const it = {};
+        for (let j = 0; j < this.tableColumns.length; j++) {
+          const column = this.tableColumns[j];
+          it[column["prop"]] = column.children
+            .map((c) => items[c["idx"]] || " ")
+            .join("\n");
+        }
+        it["IDX"] = i;
+        it["INR"] = items[0];
+        if (it["INR"].length < 8) {
+          it["INR"] = items[1];
+        }
+        it.srcStr = d;
+        arr.push(it);
+      }
+      this.currentPage = 1;
+      return arr;
+    },
+  },
+  data() {
+    return {
+      tableColumnsOrigin: [],
+      tableColumns: [],
+      currentPage: 1,
+      pageSizes: [5, 10, 20, 30, 40, 50, 100],
+      pageSize: 10,
+      selectAll: true,
+      columnGroup: [],
+      setColumnFlg: false,
+      codes: {
+        ...CodeTable,
+      },
+    };
+  },
+  mounted() {
+    this.generateColumns();
+  },
+  methods: {
+    generateColumns() {
+      const columnArr = [];
+      const lines = this.columns;
+      const etyReg = /\"([^\"]*)\"/;
+      const obj = {};
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (typeof line === "object") {
+          //如果是对象，支持自定义处理
+          //{width,position,index,label,pattern,render}
+          let { width, position, index, label, pattern, render, ...rest } =
+            line;
+          position += "";
+          if (!obj[position]) {
+            obj[position] = [];
+          }
+          obj[position].push({
+            idx: index,
+            prop: label,
+            // width:width+'px',
+            width: width === "auto" ? width : width + "px",
+            pattern,
+            render,
+            ...rest,
+          });
+          continue;
+        }
+        if (etyReg.test(line)) {
+          const gs = line.match(etyReg);
+          const columnName = gs[1];
+          const newLine = line.replace(gs[0], "_");
+          const colPropArr = newLine.split(" ");
+          const positionArr = colPropArr[1].split(":");
+          if (!obj[positionArr[0]]) {
+            obj[positionArr[0]] = [];
+          }
+          obj[positionArr[0]].push({
+            idx: colPropArr[0],
+            prop: columnName,
+            // width: colPropArr[3] + 'px',
+            width:
+              colPropArr[3] === "auto" ? colPropArr[3] : colPropArr[3] + "px",
+          });
+        }
+      }
+      for (const k in obj) {
+        if (Object.hasOwnProperty.call(obj, k)) {
+          const o = obj[k];
+          const tableColumn = o.map((item) => item.prop).join("\n");
+          let colInfo = {
+            prop: tableColumn,
+            label: tableColumn,
+            width: o[0].width,
+            // width: "auto",
+            index: k,
+            children: o,
+          };
+          //支持自定义处理
+          if (o.length == 1) {
+            if (o[0].pattern && this[o[0].pattern]) {
+              colInfo.render = this[o[0].pattern];
+              colInfo.code = o[0].code;
+            } else if (o[0].render) {
+              colInfo.render = o[0].render;
+            }
+          }
+          columnArr.push(colInfo);
+        }
+      }
+      const arr = columnArr.sort((a, b) => {
+        return parseInt(a.index) - parseInt(b.index);
+      });
+      this.tableColumnsOrigin = arr;
+      this.tableColumns = arr;
+      this.columnGroup = arr.map((item) => parseInt(item.index));
+      return arr;
+    },
+    sizeChange(size) {
+      this.pageSize = size;
+    },
+    currentChange(currentPage) {
+      this.currentPage = currentPage;
+    },
+    handleSelectionChange(val) {
+      this.$emit("multipleSelect", this.getSelectedRowIndex(val));
+    },
+    getRowKey(row) {
+      return row["IDX"];
+    },
+    getSelectedRowIndex(val) {
+      const indexArr = [];
+      for (let j = 0; j < val.length; j++) {
+        const v = val[j];
+        for (let i = 0; i < this.tableData.length; i++) {
+          const data = this.tableData[i];
+          if (v["IDX"] === data["IDX"]) {
+            indexArr.push(i);
+          }
+        }
+      }
+      return indexArr;
+    },
+    // 行点击，设置高亮
+    rowClick(row, column, event) {
+      this.$refs.table.setCurrentRow(row);
+      this.$emit("chooseRowEvent", row);
+    },
+    clounmSetting() {
+      this.setColumnFlg = true;
+    },
+    saveColumnEvent() {
+      this.setColumnFlg = false;
+      const arr = this.columnGroup.map((idx) => parseInt(idx));
+      arr.sort((a, b) => a - b);
+      this.columnGroup = arr;
+      this.tableColumns = this.columnGroup.map(
+        (index) => this.tableColumnsOrigin[parseInt(index) - 1]
+      );
+    },
+    setAll(val) {
+      this.columnGroup = val
+        ? this.tableColumnsOrigin.map((item) => parseInt(item.index))
+        : [];
+    },
+    handleColumnChange() {
+      this.selectAll =
+        this.tableColumnsOrigin.length === this.columnGroup.length;
+    },
+
+    //补充自定义列处理函数
+    //去掉日期的时分秒毫秒
+    date(item, scope) {
+      let value = scope.row[item.prop];
+      if (!value) {
+        return "";
+      }
+      let idx = value.indexOf(" ");
+      if (idx > 0) return value.substring(0, idx);
+      return value;
+    },
+    //code映射
+    code(item, scope) {
+      let value = scope.row[item.prop];
+      let code = item.code;
+      if (typeof code == "string") {
+        code = this.codes[code];
+      }
+      if (!value || !code) {
+        return "";
+      }
+      let em = code.find((item) => item.value.trim() == value.trim());
+      if (!em) {
+        return value;
+      }
+      return em.label;
+    },
+    //去掉时间的毫秒
+    time(item, scope) {
+      let value = scope.row[item.prop];
+      if (!value) {
+        return "";
+      }
+      let idx = value.indexOf(".");
+      if (idx > 0) return value.substring(0, idx);
+      return value;
+    },
+    //日期格式化
+    dateFormat(item, scope) {
+      let value = scope.row[item.prop];
+      if (!value) {
+        return "";
+      }
+      return (
+        value.substring(0, 4) +
+        "-" +
+        value.substring(4, 6) +
+        "-" +
+        value.substring(6)
+      );
+    },
+  },
+};
+</script>
+
+<style scoped>
+.eContainer-table-block {
+  margin-top: 15px;
+  position: relative;
+}
+.eContainer-table-block .paginationLable {
+  font-size: 12px;
+  color: #808080;
+  height: 26px;
+  line-height: 26px;
+  float: right;
+  /* margin-top: 20px; */
+}
+.eContainer-table-block .el-table__body-wrapper {
+  overflow: auto;
+}
+.el-table .warning-row {
+  background: oldlace;
+}
+.el-table .success-row {
+  background: #f0f9eb;
+}
+.selectColumnClass .el-checkbox__label {
+  width: 67px;
+  font-size: 13px;
+}
+.selectAllClass .el-checkbox__label {
+  width: 30px;
+  font-size: 13px;
+  padding-left: 5px;
+}
+.eContainer-table-block >>> .el-table .cell {
+  white-space: pre-wrap;
+}
+.eContainer-table-block >>> .el-dialog .el-dialog__footer {
+  display: flex;
+    justify-content: center;
+}
+.buttonDiv {
+  text-align: left;
+  display: inline-block;
+  margin: 0;
+  margin-top: -3px;
+  position: absolute;
+  z-index: 999;
+  right: 5px;
+  padding-top: 3px;
+}
+</style>
\ No newline at end of file

src/views/Business/Cnysel/Selp.vue

@@ -85,18 +85,18 @@
                     <c-input  v-model="model.cnystm"  placeholder="请输入Selection"></c-input>
                 </el-form-item>
             </c-col> -->
-      <c-istream-table
+      <c-istream-table-noOperate
         :list="stmData.data"
         :columns="stmData.columns"
         :showButtonFlg="true"
       >
-        <el-table-column fixed="right" prop="op" label="操作" width="200px">
-          <!-- <template slot="header">
-            <c-col :span="11" style="text-align: left"><span>操作</span></c-col>  -->
+        <el-table-column fixed="right" prop="op" width="auto">
+          <template slot="header">
+            <!-- <c-col :span="11" style="text-align: center"></c-col>  -->
             <!-- <c-col :span="12" style="text-align:right"><c-button icon="el-icon-s-tools"></c-button></c-col> -->
-          <!-- </template>-->
+          </template>
         </el-table-column> 
-      </c-istream-table>
+      </c-istream-table-noOperate>
     </c-col>
 
   </div>
@@ -109,10 +109,15 @@ import commonProcess from "~/mixin/commonProcess";
 import CodeTable from "~/config/CodeTable";
 import Event from "~/model/Cnysel/Event";
 
+import IStreamTableNoOperate from "./IStreamTable.vue";
+
 export default {
   inject: ["root"],
   props: ["model", "codes"],
   mixins: [commonProcess],
+  components: {
+    "c-istream-table-noOperate": IStreamTableNoOperate
+  },
   data() {
     return {
       ownextkey:[
@@ -122,7 +127,7 @@ export default {
       ],
       stmData: {
         columns: [
-          '0 1 "业务编号" 110',
+          '0 1 "业务编号" 120',
           '1 2 "币种" 110',
           '2 3 "金额" 120 2 8:1 2 5',
           '3 4 "收款人名称" 250',

src/views/Business/Cnysel/index.vue

@@ -18,7 +18,9 @@
         >
           <!--PD000001 -->
           <el-tab-pane label="接口信息选择" name="selp">
+            <content>
               <m-selp :model="model" :codes="codes" />
+            </content>
           </el-tab-pane>
         </c-tabs>
       </el-form>