Merge branch 'master' of http://192.168.0.110:11080/fukai/vue-gjjs

src/assets/css/common.css

@@ -287,3 +287,6 @@
     line-height: 16px;
     font-size: 12px;
   }
+  .el-table--border td.lastColumn{
+    border-right: 0!important;
+  }
\ No newline at end of file

src/components/IStreamTable.vue

@@ -29,7 +29,46 @@
       >
       </el-table-column>
       <slot></slot>
+      <el-table-column fixed="right" width="48px" v-if="showButtonFlg" class-name="buttonColumn">
+        <template slot="header">
+          <c-col style="text-align: left"
+                  ><c-button
+                    icon="el-icon-s-tools"
+                    @click="clounmSetting"
+                    style="padding:0 7px"
+                  ></c-button
+                ></c-col>
+        </template>
+      </el-table-column>
     </el-table>
+    <el-dialog
+      class="showColumnDialog"
+      :visible.sync="setColumnFlg"
+      :title="'自定义列属性'"
+      appenD-to-body
+    >
+      <el-form-item label-width="0">
+        <el-checkbox-group v-model="columnGroup" @change="handleColumnChange">
+          <el-checkbox
+            class="selectColumnClass"
+            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">
+        <el-checkbox
+          class="selectAllClass"
+          :indeterminate="columnGroup.length > 0 && columnGroup.length < tableColumnsOrigin.length"
+          v-model="selectAll"
+          @change="setAll"
+          >全选</el-checkbox
+        >
+        <el-button type="primary" @click="saveColumnEvent">保存</el-button>
+      </span>
+    </el-dialog>
     <c-col :span="16">
     <el-pagination
       v-if="paginationShow"
@@ -80,49 +119,18 @@ export default {
       required: false,
       default: true,
     },
-  },
-  computed: {
-    tableColumns() {
-      const columnArr = [];
-      const lines = this.columns;
-      const etyReg = /\"([^\"]*)\"/;
-      const obj = {};
-      for (let i = 0; i < lines.length; i++) {
-        const 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(" ");
-          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',
-          });
-        }
-      }
-      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,
-          });
+    showButtonFlg: {
+      type: Boolean,
+      required: false,
+      default: false,
     }
+  },
+  watch: {
+    columns() {
+      this.generateColumns();
     }
-      return columnArr.sort((a, b) => {
-        return parseInt(a.index) - parseInt(b.index);
-      });
   },
+  computed: {
     tableData() {
       // return this.list.map((row) => {
       // 	const res = {}
@@ -156,12 +164,65 @@ export default {
   },
   data() {
     return {
+      tableColumnsOrigin: [],
+      tableColumns: [],
       currentPage: 1,
       pageSizes: [5, 10, 20, 30, 40, 50, 100],
       pageSize: 10,
+      selectAll: true,
+      columnGroup: [],
+      setColumnFlg: false
     };
   },
+  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 (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',
+          });
+        }
+      }
+      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,
+          });
+        }
+      }
+      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;
     },
@@ -192,7 +253,25 @@ export default {
       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;
+    },
+  }
 };
 </script>
 
@@ -217,8 +296,20 @@ export default {
 .el-table .success-row {
   background: #f0f9eb;
 }
-
+.selectColumnClass .el-checkbox__label {
+  width: 60px;
+  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;
 }
+.el-table.buttonColumn th>.cell {
+    padding-left: 0;
+    padding-right: 0;
+}
 </style>
\ No newline at end of file

src/views/Business/Sptsel/Menu.vue

@@ -295,19 +295,20 @@
       <c-col :span="24">
         <c-istream-table
           :list="stmData.data"
-          :columns="saveColumnFlg ? stmData.columns : saveColumns"
+          :columns="stmData.columns"
+          :showButtonFlg="true"
         >
-          <el-table-column fixed="right" prop="op" label="操作" width="165px">
+          <el-table-column fixed="right" prop="op" label="操作" width="165px" class-name="lastColumn">
             <template slot="header">
-              <c-col :span="11" style="text-align: left"
+              <c-col style="text-align: left"
                 ><span>操作</span></c-col
               >
-              <c-col :span="12" style="text-align: right"
+              <!-- <c-col style="text-align: right"
                 ><c-button
                   icon="el-icon-s-tools"
                   @click="clounmSetting"
                 ></c-button
-              ></c-col>
+              ></c-col> -->
             </template>
             <template slot-scope="scope">
               <c-button style="margin-left: 0" size="small" @click="onDetails"
@@ -338,33 +339,7 @@
       </c-col>
     </el-row>
 
-    <el-dialog
-      class="showColumnDialog"
-      :visible.sync="setColumnFlg"
-      :title="'自定义列属性'"
-      appenD-to-body
-    >
-      <el-form-item label-width="0">
-        <el-checkbox-group v-model="columnGroup" @change="handleColumnChange">
-          <el-checkbox
-            v-for="item in setColumn"
-            :key="item.label"
-            :label="item.index"
-            >{{ item.label }}</el-checkbox
-          >
-        </el-checkbox-group>
-      </el-form-item>
-      <span slot="footer">
-        <el-checkbox
-          class="cbClass"
-          :indeterminate="isIndeterminate"
-          v-model="selectAll"
-          @change="setAll"
-          >全选</el-checkbox
-        >
-        <el-button type="primary" @click="saveColumnEvent">保存</el-button>
-      </span>
-    </el-dialog>
+    
     <!-- <el-row style="margin-top: 2rem">
        <c-col :span="23">
       <el-card class="box-card">
@@ -440,15 +415,14 @@ export default {
   mixins: [CommonProcess],
   data() {
     return {
-      saveColumns: [],
+      // saveColumns: [],
       sourceModel: [],
       sourceData: [],
       initdialog: false,
       detailDialog: false,
-      setColumnFlg: false,
-      saveColumnFlg: true,
-      selectAll: true,
-      isIndeterminate: false,
+      // setColumnFlg: false,
+      // saveColumnFlg: true,
+      
       transactionStatus: {
         busiNo: "",
         modTimes: 0,
@@ -457,8 +431,7 @@ export default {
         earnCount: 0,
         earnAmt: 0,
       },
-      setColumn: [],
-      columnGroup: [],
+      // setColumn: [],
       stmData: {
         columns: [
           '4 1 "交易代码" 70 ',
@@ -512,49 +485,21 @@ export default {
         this.model[element] = "t";
       });
     },
-    clounmSetting() {
-      this.setColumnFlg = true;
-    },
-    saveColumnEvent() {
-      this.setColumnFlg = false;
-      this.saveColumnFlg = false;
-      this.saveColumns = this.columnGroup.map(
-        (index) => this.stmData.columns[index]
-      );
-    },
-    setAll(val) {
-      this.columnGroup = val ? this.setColumn.map((item) => item.index) : [];
-      this.isIndeterminate = false;
-    },
-    handleColumnChange() {
-      this.selectAll = this.setColumn.length === this.columnGroup.length;
-      this.isIndeterminate =
-        this.columnGroup.length > 0 &&
-        this.columnGroup.length < this.setColumn.length;
-    },
+    
     ...Event,
   },
   created: function () {
-    this.setColumn = this.stmData.columns.map((item, index) => {
-      let begIdx = item.indexOf('"');
-      let endIdx = item.indexOf('"', begIdx + 1);
-      let label = item.substring(begIdx + 1, endIdx);
-      return { label, value: true, index };
-    });
-    this.columnGroup = this.setColumn.map((item) => item.index);
+    // this.setColumn = this.stmData.columns.map((item, index) => {
+    //   let begIdx = item.indexOf('"');
+    //   let endIdx = item.indexOf('"', begIdx + 1);
+    //   let label = item.substring(begIdx + 1, endIdx);
+    //   return { label, value: true, index };
+    // });
+    // this.columnGroup = this.setColumn.map((item) => item.index);
   },
 };
 </script>
 <style scoped>
-.el-checkbox >>> .el-checkbox__label {
-  width: 60px;
-  font-size: 13px;
-}
-.cbClass >>> .el-checkbox__label {
-  width: 30px;
-  font-size: 13px;
-  padding-left: 5px;
-}
 .showColumnDialog >>> .el-dialog__body {
   padding-bottom: 10px;
 }