新增DropdownTable组件

neutrino-proxy-admin/src/components/Dropdown/DropdownTable.vue

@@ -9,26 +9,12 @@
           :rowHeader="countryColumns"
           @rowClick="handleRowClick"
         ></FBATable>
-        <div class="demo-footer">
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="pagination.PageIndex"
-            :page-sizes="[5, 10, 20, 50, 100]"
-            :page-size="pagination.PageSize"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="pagination.TotalCount"
-          >
-          </el-pagination>
-        </div>
       </div>
-      <el-input v-model="keyWords" @input="changeKey" :placeholder="placeholder" slot="reference" :CatId="CatId"> </el-input>
+      <el-input v-model="keyWords" :placeholder="placeholder" slot="reference"/>
     </el-popover>
   </div>
 </template>
 <script>
-  import { delay } from '@/utils/index'
-  import { wfinFeeItemGetPageList } from '@/api/OverseasWarehouse/Cost'
   import FBATable from '@/components/FBATable'
   export default {
     props: {
@@ -44,8 +30,9 @@
         type: String,
         default: '请选择'
       },
-      CatId: {
-        type: Number
+      tableData: {
+        type: Array,
+        default: []
       }
     },
     components: {
@@ -58,7 +45,6 @@
           PageIndex: 1,
           PageSize: 10
         },
-        tableData: [],
         countryColumns: [
           {
             prop: 'NameCn',
@@ -97,59 +83,13 @@
         }
       }
     },
-    watch: {
-      CatId: {
-        handler(newVal, oldVal) {
-          this.getList(newVal)
-        },
-        deep: true,
-        immediate: true
-      }
-    },
     methods: {
-      getList(CatId) {
-        const { PageSize, PageIndex } = this.pagination
-        wfinFeeItemGetPageList({
-          PageSize,
-          PageIndex,
-          NameCn: this.keyWords,
-          CatId: CatId ? CatId : 0
-        })
-          .then(res => {
-            if (res.ErrorCode === 0) {
-              this.tableData = res.Body.Items
-              this.pagination.TotalCount = res.Body.TotalCount
-            }
-          })
-          .catch(err => {
-            console.log(err)
-          })
-      },
-      handleSelectionChange(val) {
-        if (val.length >= 2) {
-          let arrays = val.splice(0, val.length - 1)
-          arrays.forEach(row => {
-            this.$refs.countryTableRef.$refs.FBATable.toggleRowSelection(row) //除了当前点击的，其他的全部取消选中
-          })
-        }
-        this.$emit('selectedData', { list: val, index: this.index })
-        this.timer = setTimeout(() => {
-          this.popVisible = false
-        }, 500)
-      },
       handleRowClick(val) {
         this.$emit('selectedData', { list: val, index: this.index })
         this.timer = setTimeout(() => {
           this.popVisible = false
         }, 200)
       },
-      // 搜索
-      changeKey() {
-        delay(() => {
-          this.pagination.PageIndex = 1
-          this.getList()
-        }, 200)
-      },
       handleSizeChange(val) {
         this.pagination.PageSize = val
         this.getList()

neutrino-proxy-admin/src/components/FBATable/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <el-table
+      ref="FBATable"
+      border
+      :data="data"
+      :span-method="spanMethod"
+      :max-height="height"
+      :header-cell-style="
+        showHeaderStyle
+          ? { background: '#f1f2f7', color: '#333' }
+          : { background: 'none' }
+      "
+      @selection-change="handleSelectionChange"
+      @row-click="handleRowClick"
+    >
+      <el-table-column
+        type="selection"
+        v-if="showCheckBox"
+        width="55"
+      ></el-table-column>
+      <el-table-column type="index" v-if="showIndex" width="55" label="序号">
+      </el-table-column>
+      <el-table-column
+        v-for="(col, index) in rowHeader"
+        :key="index"
+        :prop="col.prop"
+        :label="col.label"
+        :width="col.width"
+        :fixed="col.fixed"
+        :align="col.align"
+      >
+        <template slot-scope="scope">
+          <ex-slot
+            v-if="col.render"
+            :render="col.render"
+            :row="scope.row"
+            :index="scope.$index"
+            :column="col"
+          >
+          </ex-slot>
+          <span v-else>
+            {{ scope.row[col.prop] }}
+          </span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-end" v-if="isPagination">
+      <el-pagination
+        :hide-on-single-page="false"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="PaginationData.currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="PaginationData.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="PaginationData.total"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+// 自定义内容的组件
+var exSlot = {
+  functional: true,
+  props: {
+    row: Object,
+    render: Function,
+    index: Number,
+    column: {
+      type: Object,
+      default: null
+    }
+  },
+
+  render: (h, data) => {
+    const params = {
+      row: data.props.row,
+      index: data.props.index
+    }
+
+    if (data.props.column) params.column = data.props.column
+    return data.props.render(h, params)
+  }
+}
+export default {
+  name: 'FBATable',
+  components: {
+    'ex-slot': exSlot
+  },
+  props: {
+    // 表格数据
+    data: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 表头数据
+    rowHeader: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    showCheckBox: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
+    showIndex: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
+    height: {
+      type: String,
+      default: () => {
+        return 'auto'
+      }
+    },
+    spanMethod: {
+      type: Function,
+      default: () => {
+        return ''
+      }
+    },
+    PaginationData: {
+      type: Object,
+      default: () => ({
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      })
+    },
+    isPagination: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
+    showHeaderStyle: {
+      type: Boolean,
+      default: () => {
+        return true
+      }
+    }
+  },
+  methods: {
+    handleSelectionChange(val) {
+      this.$emit('getSelection', val)
+    },
+    handleRowClick(row) {
+      this.$emit('rowClick', row)
+    },
+    // 	pageSize 改变时会触发
+    handleSizeChange(val) {
+      this.$emit('pageSizeChange', val)
+    },
+    // currentPage 改变时会触发
+    handleCurrentChange(val) {
+      this.$emit('pageCurrentChange', val)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.tableHeader {
+  background: #1890ff;
+}
+.pagination-end {
+  width: 100%;
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

neutrino-proxy-admin/src/views/proxy/portMapping.vue

@@ -77,6 +77,16 @@
             </el-option>
           </el-select>
         </el-form-item>
+
+        <el-form-item :label="$t('License')" prop="licenseId">
+          <SearchCostItem
+            v-model="temp.licenseId"
+            :name.sync="temp.licenseId"
+            :tableData= "licenseList"
+            @selectedData="selectedFeeItem"
+            placeholder="选择费用项"
+          />
+        </el-form-item>
         <el-form-item :label="$t('服务端端口')" prop="serverPort">
           <el-select style="width: 280px;" class="filter-item" v-model="temp.serverPort" placeholder="请选择">
             <el-option v-for="item in serverPortList" :key="item.port" :label="item.port" :value="item.port">
@@ -322,6 +332,9 @@
           }
         })
       },
+      selectedFeeItem(list, index) {
+        console.log(list, index)
+      },
       handleDelete(row) {
         this.$confirm('确定要删除吗？', '提示', {
           confirmButtonText: '确定',