新增iso报文bic查找弹窗

editor_vue/src/iso/Service/post.js

@@ -77,6 +77,13 @@ export default{
             data:data
         })
     },
+    getBic(data){
+        return new link({
+            url:`/swift/getBic`,
+            method:"post",
+            data:data
+        })
+    },
 
 
     sendCipsMes(data){

editor_vue/src/iso/components/Table.vue

+<template>
+  <div>
+    <el-table
+      ref="table"
+      @select="rowSelectChange"
+      @row-click="getCurrentRow"
+      @row-dblclick="selectRow"
+      @select-all="selectAll"
+      :header-cell-class-name="cellClass"
+      :data="data"
+      border
+      :highlight-current-row="!config.closeHighlightRow"
+      empty-text="暂无数据"
+      show-header-selection="false"
+    >
+      <el-table-column
+        :selectable="config.selectable"
+        v-if="config.showSelect"
+        type="selection"
+        width="55"
+      >
+      </el-table-column>
+      <el-table-column
+        :align="item.align ? item.align : 'center'"
+        :label="item.label"
+        :prop="item.prop"
+        :min-width="item.minWidth ? item.minWidth : '120'"
+        :formatter="item.formatter"
+        v-for="(item, index) in config.itemList"
+        :key="index"
+      >
+      </el-table-column>
+      <slot name="操作"> </slot>
+    </el-table>
+    <!-- 分页 -->
+    <div style="text-align: right">
+      <el-pagination
+        :current-page="config.pageConfig.currentPage"
+        :page-size="config.pageConfig.pageSize"
+        :page-sizes="config.pageConfig.pageSizeList"
+        :total="config.pageConfig.total"
+        @current-change="currentPageChange"
+        @size-change="pageSizeChange"
+        layout="total, sizes, prev, pager, next, jumper"
+        style="margin: 20px 0px"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+    <script>
+export default {
+  props: {
+    data: Array,
+    config: Object,
+    selectable: Function,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    cellClass(row) {
+            if (row.columnIndex === 0) {
+                return 'disabledCheck';
+            }
+        },
+    selectAll() {
+      this.$refs.table.clearSelection();
+    },
+    rowSelectChange(pageSelected, row) {
+      // 取消其他行的选中状态
+      this.$refs.table.clearSelection();
+      // 选中当前行
+      this.$refs.table.toggleRowSelection(row);
+      this.$emit("selectionChange", pageSelected);
+    },
+    toggleRowSelection(row) {
+      this.$refs.table.toggleRowSelection(row);
+    },
+    selectionChange(pageSelected) {
+      this.$emit("selectionChange", pageSelected);
+    },
+    currentPageChange(newPage) {
+      this.$emit("loadData", {
+        currentPage: newPage,
+      });
+    },
+    pageSizeChange(newPageSize) {
+      this.$emit("loadData", {
+        pageSize: newPageSize,
+      });
+    },
+    getCurrentRow(row) {
+      this.$emit("getCurrentRow", row);
+    },
+    selectRow(row) {},
+  },
+};
+</script>
+
+<style scoped>
+    /* 深度选择器 去掉全选按钮 */
+    ::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
+        display: none;
+    }
+ 
+    ::v-deep .el-table .disabledCheck .cell::before {
+        content: '';
+        text-align: center;
+        line-height: 37px;
+    }
+
+</style>
+    
\ No newline at end of file

editor_vue/src/iso/components/TextInput.vue

@@ -13,14 +13,44 @@
     </el-input>
     <span v-if="showSpan" class="add-btn" @click="generate">+</span>
     <!-- 搜索账户和地址 -->
-    <span v-if="ifaccount" class="search-btn" @click="getbic">
+    <span v-if="ifaccount" class="search-btn" @click="choose">
       搜索
     </span>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      title="请选择"
+      v-if="dialogVisible"
+      width="40%"
+      append-to-body
+    >
+      <s-table
+        ref="table"
+        @selectionChange="selectionChange"
+        @loadData="loadData"
+        :data="tableData"
+        :config="tableConfig"
+        selection-mode="single"
+      ></s-table>
+
+      <span slot="footer">
+        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
+
+        <el-button @click="chooseConfirm" size="mini" type="primary"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+
+import Table from "./Table.vue";
+
 export default {
+  components:{
+    "s-table": Table,
+  },
   props: ["dataModel", "dataType", "max"],
   data() {
     return {
@@ -30,6 +60,45 @@ export default {
       showSpan: false,
       bizMsgIdr: "",
       ifaccount: false,
+
+      dialogVisible: false,
+      // 最终选中的所有数据
+      allSelectedUserList: [],
+      // 最终选中的全部唯一字段列表
+      allUniquePropList: [],
+      // 唯一字段
+      uniqueProp: "id",
+      // 每次弹窗中选中的所有数据
+      allSelectedList: [],
+      tableData: [],
+      tableConfig: {
+        showSelect: true,
+        selectable: (row, rowIndex) => {
+          if (this.allUniquePropList.indexOf(row[this.uniqueProp]) === -1) {
+            if (rowIndex === row.index) {
+              return false;
+            } else {
+              return true;
+            }
+          }
+        },
+        pageConfig: {
+          pageSizeList: [3, 5, 10],
+          pageSize: 3,
+          currentPage: 1,
+          total: 0,
+        },
+        itemList: [
+          {
+            label: "BIC Code",
+            prop: "BIC",
+          },
+          {
+            label: "Name",
+            prop: "NAM1",
+          },
+        ],
+      },
     };
   },
   methods: {
@@ -124,8 +193,91 @@ export default {
     //     this.$set(this.model.bcdgrp, row.role.toLowerCase(), res.data);
     //   }
     },
+
+    // 点击选择按钮
+    choose() {
+      this.allUniquePropList = [];
+      this.allSelectedUserList.forEach((item) => {
+        this.allUniquePropList.push(item[this.uniqueProp]);
+      });
+      this.allSelectedList = [];
+      this.dialogVisible = true;
+    }, // 点击选择弹窗的确定按钮
+    chooseConfirm() {
+      console.log(this.allSelectedUserList.concat(
+        this.allSelectedList
+      )[0].BIC)
+      this.dataModel.value = this.allSelectedUserList.concat(
+        this.allSelectedList
+      )[0].BIC;
+      this.dialogVisible = false;
+    }, // 加载数据
+    loadData(newPageConfig) {
+      if (newPageConfig && newPageConfig.currentPage) {
+        this.tableConfig.pageConfig.currentPage = newPageConfig.currentPage;
+      }
+      if (newPageConfig && newPageConfig.pageSize) {
+        this.tableConfig.pageConfig.pageSize = newPageConfig.pageSize;
+      }
+      const data = {
+        bicnam: "",
+        biccod: "",
+        currentPage: this.tableConfig.pageConfig.currentPage,
+        pageSize: this.tableConfig.pageConfig.pageSize,
+      };
+    //   send.getBic(data).then((res) => {
+    //     let data = res.data;
+    //     this.tableData = data.records;
+    //     this.tableConfig.pageConfig.total = data.total;
+    //     this.updateSelectedMark();
+    //   });
+    
+    //调试数据
+    this.tableData = [
+          {
+            BIC: "001",
+            NAM1: "001",
+          },
+          {
+            BIC: "002",
+            NAM1: "002",
+          },
+        ]
+        this.tableConfig.pageConfig.total = 2;
+        this.updateSelectedMark();
+    }, 
+    
+    // 改变多选列的选中状态时，更新选中列表
+    selectionChange(pageSelectedList) {
+      // 当页唯一字段组成的列表
+      let uniquePropList = [];
+      this.tableData.forEach((row) => {
+        uniquePropList.push(row[this.uniqueProp]);
+      }); 
+      // 从全部选中的数据中，过滤掉当前页的数据，再添加当前页选中的数据
+      this.allSelectedList = this.allSelectedList
+        .filter((row) => !uniquePropList.includes(row[this.uniqueProp]))
+        .concat(pageSelectedList);
+    }, 
+    // 更新选中标记--选中数据与当页数据的交集，标记为选中状态
+    updateSelectedMark() {
+      this.$nextTick(() => {
+        let pageSelectedList = [];
+        this.allSelectedList.forEach((row1) => {
+          this.tableData.forEach((row2) => {
+            if (row1[this.uniqueProp] === row2[this.uniqueProp]) {
+              pageSelectedList.push(row2);
+            }
+          });
+        });
+        pageSelectedList.forEach((row) => {
+          this.$refs.table.toggleRowSelection(row);
+        });
+      });
+    },
   },
   mounted() {
+    this.loadData();
     if ("CHBHHKHHXXX"===this.dataModel.headBic) {
       this.$set(this.dataModel, "value", "CHBHHKHHXXX");
     }