!12 端口映射管理页面优化

Merge pull request !12 from Yohanes/feature/1.7.1

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

@@ -1,95 +1,108 @@
 <template>
   <div class="app-container calendar-list-container">
-    <div class="filter-container">
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
-      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">{{$t('table.add')}}</el-button>
+    <div class="filter-container" style="display:flex">
+      <el-select v-model="listQuery.userId" placeholder="请选择用户" clearable style="margin-right:10px" @change="refrech">
+        <el-option v-for="item in userList" :key="item.loginName" :label="item.name" :value="item.id" />
+      </el-select>
+      <el-select v-model="listQuery.license" placeholder="请选择license" clearable style="margin-right:10px">
+        <el-option v-for="item in licenseList" :key="item.key" :label="item.name" :value="item.id" />
+      </el-select>
+      <el-input v-model="listQuery.serverPort" type="text" style="width:150px;margin-right:10px" class="filter-item"
+        placeholder="请输入服务端端口" :maxlength="5" show-word-limit />
+      <el-select v-model="listQuery.isOnline" placeholder="请选择在线状态" clearable style="width:145px;margin-right:10px">
+        <el-option v-for="item in selectObj.onlineOptions" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <el-select v-model="listQuery.enable" placeholder="请选择启用状态" clearable style="width:145px;margin-right:10px">
+        <el-option v-for="item in selectObj.statusOptions" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{
+        $t('table.search') }}</el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary"
+        icon="el-icon-edit">{{ $t('table.add') }}</el-button>
     </div>
 
-    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
-              style="width: 100%">
+    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit
+      highlight-current-row style="width: 100%">
       <el-table-column align="center" :label="$t('table.id')" width="50">
         <template slot-scope="scope">
-          <span>{{scope.row.id}}</span>
+          <span>{{ scope.row.id }}</span>
         </template>
       </el-table-column>
       <el-table-column align="center" :label="$t('table.userName')" width="100">
         <template slot-scope="scope">
-          <span>{{scope.row.userName}}</span>
+          <span>{{ scope.row.userName }}</span>
         </template>
       </el-table-column>
       <el-table-column align="center" :label="$t('table.licenseName')" width="150">
         <template slot-scope="scope">
-          <span>{{scope.row.licenseName}}</span>
+          <span>{{ scope.row.licenseName }}</span>
         </template>
       </el-table-column>
       <el-table-column align="center" :label="$t('table.serverPort')" width="200">
         <template slot-scope="scope">
-          <span>{{scope.row.serverPort}}</span>
+          <span>{{ scope.row.serverPort }}</span>
         </template>
       </el-table-column>
       <el-table-column align="center" :label="$t('table.proxyClient')" width="200">
         <template slot-scope="scope">
-          <span>{{scope.row.clientIp}}:{{scope.row.clientPort}}</span>
+          <span>{{ scope.row.clientIp }}:{{ scope.row.clientPort }}</span>
         </template>
       </el-table-column>
       <el-table-column width="150px" align="center" :label="$t('table.createTime')">
         <template slot-scope="scope">
-          <span>{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
+          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
       <el-table-column width="150px" align="center" :label="$t('table.updateTime')">
         <template slot-scope="scope">
-          <span>{{scope.row.updateTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
+          <span>{{ scope.row.updateTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
       <el-table-column class-name="status-col" :label="$t('table.enableStatus')" width="100">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.enable | statusFilter">{{scope.row.enable | statusName}}</el-tag>
+          <el-tag :type="scope.row.enable | statusFilter">{{ scope.row.enable | statusName }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column class-name="status-col" :label="$t('table.isOnline')" width="100">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.isOnline | statusFilter">{{scope.row.isOnline | isOnlineName}}</el-tag>
+          <el-tag :type="scope.row.isOnline | statusFilter">{{ scope.row.isOnline | isOnlineName }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column align="center" :label="$t('table.actions')" width="230" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{$t('table.edit')}}</el-button>
-          <el-button v-if="scope.row.enable =='1'" size="mini" type="danger" @click="handleModifyStatus(scope.row,2)">{{$t('table.disable')}}</el-button>
-          <el-button v-if="scope.row.enable =='2'" size="mini" type="success" @click="handleModifyStatus(scope.row,1)">{{$t('table.enable')}}</el-button>
+          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
+          <el-button v-if="scope.row.enable == '1'" size="mini" type="danger" @click="handleModifyStatus(scope.row, 2)">{{
+            $t('table.disable') }}</el-button>
+          <el-button v-if="scope.row.enable == '2'" size="mini" type="success"
+            @click="handleModifyStatus(scope.row, 1)">{{ $t('table.enable') }}</el-button>
           <!--          <el-button size="mini" type="danger" @click="handleDelete(scope.row,'deleted')">{{$t('table.delete')}}</el-button>-->
-          <ButtonPopover @handleCommitClick="handleDelete2(scope.row)" style="margin-left: 10px"/>
+          <ButtonPopover @handleCommitClick="handleDelete2(scope.row)" style="margin-left: 10px" />
 
         </template>
       </el-table-column>
     </el-table>
 
     <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-pageInfo.sync="listQuery.current"
-                     :pageInfo-sizes="[10,20,30, 50]" :pageInfo-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :current-pageInfo.sync="listQuery.current" :pageInfo-sizes="[10, 20, 30, 50]" :pageInfo-size="listQuery.size"
+        layout="total, sizes, prev, pager, next, jumper" :total="total">
       </el-pagination>
     </div>
 
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
-      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="120px" style='width: 400px; margin-left:50px;'>
-<!--        <el-form-item :label="$t('License')" prop="licenseId">-->
-<!--          <el-select style="width: 280px;" class="filter-item" v-model="temp.licenseId" placeholder="请选择" :disabled="dialogStatus=='update'">-->
-<!--            <el-option v-for="item in licenseList" :key="item.id" :label="item.name" :value="item.id">-->
-<!--            </el-option>-->
-<!--          </el-select>-->
-<!--        </el-form-item>-->
+      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="120px"
+        style='width: 400px; margin-left:50px;'>
+        <!--        <el-form-item :label="$t('License')" prop="licenseId">-->
+        <!--          <el-select style="width: 280px;" class="filter-item" v-model="temp.licenseId" placeholder="请选择" :disabled="dialogStatus=='update'">-->
+        <!--            <el-option v-for="item in licenseList" :key="item.id" :label="item.name" :value="item.id">-->
+        <!--            </el-option>-->
+        <!--          </el-select>-->
+        <!--        </el-form-item>-->
 
-        <el-form-item :label="$t('License')" prop="licenseId" >
-          <DropdownTable
-            v-model="temp.licenseId"
-            :name.sync="temp.licenseName"
-            :tableData= "licenseList"
-            @selectedData="selectedFeeItem"
-            placeholder="请选择"
-            :width="280"
-            :disabled="dialogStatus==='update'"
-          />
-<!--          <DropdownTable
+        <el-form-item :label="$t('License')" prop="licenseId">
+          <DropdownTable v-model="temp.licenseId" :name.sync="temp.licenseName" :tableData="licenseList"
+            @selectedData="selectedFeeItem" placeholder="请选择" :width="280" :disabled="dialogStatus === 'update'" />
+          <!--          <DropdownTable
             :columns="countryColumns"
             :data="licenseList"
             v-model="temp.licenseId"
@@ -114,9 +127,11 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
-        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
-        <el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
+        <el-button @click="
+          dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
+        <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">{{ $t('table.confirm')
+        }}</el-button>
+        <el-button v-else type="primary" @click="updateData">{{ $t('table.confirm') }}</el-button>
       </div>
     </el-dialog>
 
@@ -126,7 +141,7 @@
         <el-table-column prop="pv" label="Pv"> </el-table-column>
       </el-table>
       <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="dialogPvVisible = false">{{$t('table.confirm')}}</el-button>
+        <el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
       </span>
     </el-dialog>
 
@@ -134,260 +149,278 @@
 </template>
 
 <script>
-  import { fetchList, createUserPortMapping, updateUserPortMapping, updateEnableStatus, deletePortMapping } from '@/api/portMapping'
-  import { portPoolList, availablePortList } from '@/api/portPool'
-  import { licenseList } from '@/api/license'
-  import waves from '@/directive/waves' // 水波纹指令
-  import { parseTime } from '@/utils'
-  import ButtonPopover from '../../components/Button/buttonPopover'
-  import DropdownTable from '../../components/Dropdown/DropdownTable'
+import { fetchList, createUserPortMapping, updateUserPortMapping, updateEnableStatus, deletePortMapping } from '@/api/portMapping'
+import { portPoolList, availablePortList } from '@/api/portPool'
+import { licenseList } from '@/api/license'
+import { userList } from '@/api/user'
+import waves from '@/directive/waves' // 水波纹指令
+import { parseTime } from '@/utils'
+import ButtonPopover from '../../components/Button/buttonPopover'
+import DropdownTable from '../../components/Dropdown/DropdownTable'
 
-  const calendarTypeOptions = [
-    { key: 'CN', display_name: 'China' },
-    { key: 'US', display_name: 'USA' },
-    { key: 'JP', display_name: 'Japan' },
-    { key: 'EU', display_name: 'Eurozone' }
-  ]
+const calendarTypeOptions = [
+  { key: 'CN', display_name: 'China' },
+  { key: 'US', display_name: 'USA' },
+  { key: 'JP', display_name: 'Japan' },
+  { key: 'EU', display_name: 'Eurozone' }
+]
 
-  // arr to obj ,such as { CN : "China", US : "USA" }
-  const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
-    acc[cur.key] = cur.display_name
-    return acc
-  }, {})
+// arr to obj ,such as { CN : "China", US : "USA" }
+const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
+  acc[cur.key] = cur.display_name
+  return acc
+}, {})
 
-  export default {
-    name: 'complexTable',
-    directives: {
-      waves
-    },
-    components: {
-      DropdownTable,
-      ButtonPopover
-    },
-    data() {
-      return {
-        tableKey: 0,
-        list: null,
-        total: null,
-        listLoading: true,
-        listQuery: {
-          current: 1,
-          size: 10,
-          importance: undefined,
-          title: undefined,
-          type: undefined
-        },
-        importanceOptions: [1, 2, 3],
-        calendarTypeOptions,
-        sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
-        statusOptions: ['published', 'draft', 'deleted'],
-        licenseList: [],
-        serverPortList: [],
-        showReviewer: false,
-        temp: {
-          id: undefined,
-          licenseId: undefined,
-          licenseName: undefined,
-          serverPort: undefined,
-          clientIp: undefined,
-          clientPort: undefined
-        },
-        dialogFormVisible: false,
-        dialogStatus: '',
-        textMap: {
-          update: '编辑',
-          create: '新建'
-        },
-        dialogPvVisible: false,
-        pvData: [],
-        rules: {
-          licenseId: [{ required: true, message: '请选择License', trigger: 'blur,change' }],
-          serverPort: [{ required: true, message: '请输入服务端端口', trigger: 'blur' }],
-          clientIp: [{ required: true, message: '请输入客户端IP', trigger: 'blur' }],
-          clientPort: [{ required: true, message: '请输入客户端端口', trigger: 'blur' }]
-        },
-        downloadLoading: false,
-        countryColumns: [
-          { prop: 'userName', label: '用户名', align: 'center' },
-          { prop: 'name', label: 'License', align: 'center' }
-        ]
+export default {
+  name: 'complexTable',
+  directives: {
+    waves
+  },
+  components: {
+    DropdownTable,
+    ButtonPopover
+  },
+  data() {
+    return {
+      tableKey: 0,
+      list: null,
+      total: null,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10,
+        importance: undefined,
+        title: undefined,
+        type: undefined,
+        userid: undefined,
+        license: undefined,
+        port: undefined,
+        isOnline: undefined,
+        enable: undefined
+
+      },
+      importanceOptions: [1, 2, 3],
+      calendarTypeOptions,
+      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
+      statusOptions: ['published', 'draft', 'deleted'],
+      userList: [],
+      licenseList: [],
+      serverPortList: [],
+      showReviewer: false,
+      temp: {
+        id: undefined,
+        licenseId: undefined,
+        licenseName: undefined,
+        serverPort: undefined,
+        clientIp: undefined,
+        clientPort: undefined
+      },
+      selectObj: {
+        statusOptions: [{ label: '启用', value: 1 }, { label: '禁用', value: 2 }],
+        onlineOptions: [{ label: '在线', value: 1 }, { label: '离线', value: 2 }]
+      },
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '编辑',
+        create: '新建'
+      },
+      dialogPvVisible: false,
+      pvData: [],
+      rules: {
+        licenseId: [{ required: true, message: '请选择License', trigger: 'blur,change' }],
+        serverPort: [{ required: true, message: '请输入服务端端口', trigger: 'blur' }],
+        clientIp: [{ required: true, message: '请输入客户端IP', trigger: 'blur' }],
+        clientPort: [{ required: true, message: '请输入客户端端口', trigger: 'blur' }]
+      },
+      downloadLoading: false,
+      countryColumns: [
+        { prop: 'userName', label: '用户名', align: 'center' },
+        { prop: 'name', label: 'License', align: 'center' }
+      ]
+    }
+  },
+  filters: {
+    statusName(status) {
+      const statusMap = {
+        1: '启用',
+        2: '禁用'
       }
+      return statusMap[status]
     },
-    filters: {
-      statusName(status) {
-        const statusMap = {
-          1: '启用',
-          2: '禁用'
-        }
-        return statusMap[status]
-      },
-      isOnlineName(isOnline) {
-        const isOnlineMap = {
-          1: '在线',
-          2: '离线'
-        }
-        return isOnlineMap[isOnline]
-      },
-      statusFilter(status) {
-        const statusMap = {
-          1: 'success',
-          2: 'danger'
-        }
-        return statusMap[status]
-      },
-      typeFilter(type) {
-        return calendarTypeKeyValue[type]
+    isOnlineName(isOnline) {
+      const isOnlineMap = {
+        1: '在线',
+        2: '离线'
       }
+      return isOnlineMap[isOnline]
     },
-    created() {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        2: 'danger'
+      }
+      return statusMap[status]
+    },
+    typeFilter(type) {
+      return calendarTypeKeyValue[type]
+    }
+  },
+  created() {
+    this.getDataList()
+    this.getLicenseList()
+  },
+  methods: {
+    refrech(val) {
+      this.$forceUpdate()
+    },
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.data.records
+        this.total = response.data.data.total
+        this.listLoading = false
+      })
+    },
+    getDataList() {
+      const loginName = this.$store.state.user.loginName
+      userList().then(response => {
+        this.userList = response.data.data
+        const curUser = this.userList.find((val) => val.loginName === loginName)
+        if (curUser) {
+          this.listQuery.userId = curUser.id
+        }
+        this.getList()
+      })
+    },
+    getPortPoolList() {
+      portPoolList().then(response => {
+        this.serverPortList = response.data.data
+      })
+    },
+    getAvailablePortList(licenseId) {
+      availablePortList(licenseId).then(response => {
+        this.serverPortList = response.data.data
+      })
+    },
+    getAllUserList() {
+      userList().then(response => {
+        this.userList = response.data.data
+      })
+    },
+    getLicenseList() {
+      licenseList().then(response => {
+        this.licenseList = response.data.data
+      })
+    },
+    handleFilter() {
+      this.listQuery.current = 1
       this.getList()
-      // this.getPortPoolList()
-      this.getLicenseList()
     },
-    methods: {
-      getList() {
-        this.listLoading = true
-        fetchList(this.listQuery).then(response => {
-          this.list = response.data.data.records
-          this.total = response.data.data.total
-          this.listLoading = false
-        })
-      },
-      getPortPoolList() {
-        portPoolList().then(response => {
-          this.serverPortList = response.data.data
-        })
-      },
-      getAvailablePortList(licenseId) {
-        availablePortList(licenseId).then(response => {
-          this.serverPortList = response.data.data
-        })
-      },
-      getLicenseList() {
-        licenseList().then(response => {
-          this.licenseList = response.data.data
-        })
-      },
-      handleFilter() {
-        this.listQuery.current = 1
-        this.getList()
-      },
-      handleSizeChange(val) {
-        this.listQuery.size = val
-        this.getList()
-      },
-      handleCurrentChange(val) {
-        this.listQuery.current = val
-        this.getList()
-      },
-      handleModifyStatus(row, enable) {
-        console.log('route', this.$route)
-        updateEnableStatus(row.id, enable).then(response => {
-          if (response.data.data.code === 0) {
-            this.$message({
-              message: '操作成功',
-              type: 'success'
-            })
-          }
-          this.getList()
-        })
-      },
-      resetTemp() {
-        this.temp = {
-          id: undefined,
-          licenseId: undefined,
-          licenseName: undefined,
-          serverPort: undefined,
-          clientIp: '127.0.0.1',
-          clientPort: undefined
+    handleSizeChange(val) {
+      this.listQuery.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.listQuery.current = val
+      this.getList()
+    },
+    handleModifyStatus(row, enable) {
+      console.log('route', this.$route)
+      updateEnableStatus(row.id, enable).then(response => {
+        if (response.data.data.code === 0) {
+          this.$message({
+            message: '操作成功',
+            type: 'success'
+          })
         }
-      },
-      handleCreate() {
-        this.resetTemp()
-        this.dialogStatus = 'create'
-        this.dialogFormVisible = true
-        this.$nextTick(() => {
-          this.$refs['dataForm'].clearValidate()
-        })
-      },
-      createData() {
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            createUserPortMapping(this.temp).then(response => {
-              if (response.data.code === 0) {
-                this.dialogFormVisible = false
-                this.$notify({
-                  title: '成功',
-                  message: '创建成功',
-                  type: 'success',
-                  duration: 2000
-                })
-                this.getList()
-              }
-            })
-          }
-        })
-      },
-      handleUpdate(row) {
-        this.temp = Object.assign({}, row) // copy obj
-        this.temp.timestamp = new Date(this.temp.timestamp)
-        this.dialogStatus = 'update'
-        this.dialogFormVisible = true
-        this.$nextTick(() => {
-          this.$refs['dataForm'].clearValidate()
-        })
-      },
-      updateData() {
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            const tempData = Object.assign({}, this.temp)
-            updateUserPortMapping(tempData).then(response => {
-              if (response.data.code === 0) {
-                // this.$message({
-                //   message: '操作成功',
-                //   type: 'success'
-                // })
-                this.$notify({
-                  title: '成功',
-                  message: '更新成功',
-                  type: 'success',
-                  duration: 2000
-                })
-                this.dialogFormVisible = false
-                this.getList()
-              }
-            })
-          }
-        })
-      },
-      selectedFeeItem(row, list) {
-        if (this.temp.licenseId !== row.id) {
-          this.temp.licenseId = row.id
-          this.temp.licenseName = row.name
-          this.getAvailablePortList(row.id)
-          this.temp.serverPort = null
-        }
-      },
-      handleDelete(row) {
-        this.$confirm('确定要删除吗？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          deletePortMapping(row.id).then(response => {
+        this.getList()
+      })
+    },
+    resetTemp() {
+      this.temp = {
+        id: undefined,
+        licenseId: undefined,
+        licenseName: undefined,
+        serverPort: undefined,
+        clientIp: '127.0.0.1',
+        clientPort: undefined,
+        userId: undefined
+      }
+    },
+    handleCreate() {
+      this.resetTemp()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          createUserPortMapping(this.temp).then(response => {
             if (response.data.code === 0) {
+              this.dialogFormVisible = false
               this.$notify({
                 title: '成功',
-                message: '删除成功',
+                message: '创建成功',
                 type: 'success',
                 duration: 2000
               })
               this.getList()
             }
           })
-        }).catch(() => {})
-      },
-      handleDelete2(row) {
+        }
+      })
+    },
+    handleUpdate(row) {
+      this.temp = Object.assign({}, row) // copy obj
+      this.temp.timestamp = new Date(this.temp.timestamp)
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+      this.getAvailablePortList(row.licenseId)
+    },
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const tempData = Object.assign({}, this.temp)
+          updateUserPortMapping(tempData).then(response => {
+            if (response.data.code === 0) {
+              // this.$message({
+              //   message: '操作成功',
+              //   type: 'success'
+              // })
+              this.$notify({
+                title: '成功',
+                message: '更新成功',
+                type: 'success',
+                duration: 2000
+              })
+              this.dialogFormVisible = false
+              this.getList()
+            }
+          })
+        }
+      })
+    },
+    selectedFeeItem(row, list) {
+      if (this.temp.licenseId !== row.id) {
+        this.temp.licenseId = row.id
+        this.temp.licenseName = row.name
+        this.getAvailablePortList(row.id)
+        this.temp.serverPort = null
+      }
+    },
+    handleDelete(row) {
+      this.$confirm('确定要删除吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
         deletePortMapping(row.id).then(response => {
           if (response.data.code === 0) {
             this.$notify({
@@ -399,26 +432,40 @@
             this.getList()
           }
         })
-      },
-      handleDownload() {
-        this.downloadLoading = true
-        import('@/vendor/Export2Excel').then(excel => {
-          const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
-          const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
-          const data = this.formatJson(filterVal, this.list)
-          excel.export_json_to_excel(tHeader, data, 'table-list')
-          this.downloadLoading = false
-        })
-      },
-      formatJson(filterVal, jsonData) {
-        return jsonData.map(v => filterVal.map(j => {
-          if (j === 'timestamp') {
-            return parseTime(v[j])
-          } else {
-            return v[j]
-          }
-        }))
-      }
+      }).catch(() => { })
+    },
+    handleDelete2(row) {
+      deletePortMapping(row.id).then(response => {
+        if (response.data.code === 0) {
+          this.$notify({
+            title: '成功',
+            message: '删除成功',
+            type: 'success',
+            duration: 2000
+          })
+          this.getList()
+        }
+      })
+    },
+    handleDownload() {
+      this.downloadLoading = true
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
+        const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
+        const data = this.formatJson(filterVal, this.list)
+        excel.export_json_to_excel(tHeader, data, 'table-list')
+        this.downloadLoading = false
+      })
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => {
+        if (j === 'timestamp') {
+          return parseTime(v[j])
+        } else {
+          return v[j]
+        }
+      }))
     }
   }
+}
 </script>

neutrino-proxy-server/src/main/java/fun/asgc/neutrino/proxy/server/constant/PoolGroupEnum.java

@@ -0,0 +1,21 @@
+package fun.asgc.neutrino.proxy.server.constant;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+
+/**
+ * 端口池分组枚举类型
+ * @author Yohanes
+ * @date 2023/03/17
+ */
+@Getter
+@AllArgsConstructor
+public enum PoolGroupEnum {
+    GLOBAL(0, "全局"),
+    USER(1, "用户"),
+    LICENSE(2, "License");
+
+    private Integer status;
+    private String desc;
+
+}

neutrino-proxy-server/src/main/java/fun/asgc/neutrino/proxy/server/controller/req/PortMappingListReq.java

@@ -21,6 +21,7 @@
  */
 package fun.asgc.neutrino.proxy.server.controller.req;
 
+import fun.asgc.neutrino.proxy.server.constant.OnlineStatusEnum;
 import lombok.Data;
 
 /**
@@ -30,5 +31,27 @@ import lombok.Data;
  */
 @Data
 public class PortMappingListReq {
+    /**
+     * 用户ID
+     */
+    private Integer userId;
+    /**
+     * licenseId
+     */
+    private Integer licenseId;
+    /**
+     * 服务端口号
+     */
+    private Integer serverPort;
 
+    /**
+     * 是否在线
+     * {@link OnlineStatusEnum}
+     */
+    private Integer isOnline;
+    /**
+     * 启用状态
+     * {@link fun.asgc.neutrino.proxy.server.constant.EnableStatusEnum}
+     */
+    private Integer enable;
 }

neutrino-proxy-server/src/main/java/fun/asgc/neutrino/proxy/server/controller/res/PortPoolListRes.java

@@ -59,4 +59,8 @@ public class PortPoolListRes {
 	 * 分组
 	 */
 	private String groupName;
+	/**
+	 * 分组ID
+	 */
+	private String groupId;
 }

neutrino-proxy-server/src/main/java/fun/asgc/neutrino/proxy/server/dal/PortMappingMapper.java

@@ -5,8 +5,11 @@ import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
 import fun.asgc.neutrino.proxy.server.constant.EnableStatusEnum;
+import fun.asgc.neutrino.proxy.server.controller.req.PortMappingListReq;
+import fun.asgc.neutrino.proxy.server.controller.res.PortMappingListRes;
 import fun.asgc.neutrino.proxy.server.dal.entity.PortMappingDO;
 import org.apache.ibatis.annotations.Mapper;
+import org.apache.ibatis.annotations.Param;
 
 import java.util.Date;
 import java.util.List;
@@ -82,4 +85,6 @@ public interface PortMappingMapper extends BaseMapper<PortMappingDO> {
 				.set(PortMappingDO::getUpdateTime, updateTime)
 		);
 	}
+
+	List<PortMappingDO> selectPortMappingByCondition(@Param("req") PortMappingListReq req);
 }

neutrino-proxy-server/src/main/java/fun/asgc/neutrino/proxy/server/service/PortMappingService.java

@@ -12,10 +12,7 @@ import fun.asgc.neutrino.proxy.server.base.rest.SystemContextHolder;
 import fun.asgc.neutrino.proxy.server.constant.EnableStatusEnum;
 import fun.asgc.neutrino.proxy.server.constant.ExceptionConstant;
 import fun.asgc.neutrino.proxy.server.constant.OnlineStatusEnum;
-import fun.asgc.neutrino.proxy.server.controller.req.PortMappingCreateReq;
-import fun.asgc.neutrino.proxy.server.controller.req.PortMappingListReq;
-import fun.asgc.neutrino.proxy.server.controller.req.PortMappingUpdateEnableStatusReq;
-import fun.asgc.neutrino.proxy.server.controller.req.PortMappingUpdateReq;
+import fun.asgc.neutrino.proxy.server.controller.req.*;
 import fun.asgc.neutrino.proxy.server.controller.res.*;
 import fun.asgc.neutrino.proxy.server.dal.LicenseMapper;
 import fun.asgc.neutrino.proxy.server.dal.PortMappingMapper;
@@ -32,10 +29,7 @@ import org.noear.solon.annotation.Component;
 import org.noear.solon.annotation.Inject;
 import org.noear.solon.core.Lifecycle;
 
-import java.util.Date;
-import java.util.List;
-import java.util.Map;
-import java.util.Set;
+import java.util.*;
 import java.util.function.Function;
 import java.util.stream.Collectors;
 
@@ -59,15 +53,18 @@ public class PortMappingService implements Lifecycle {
 	@Inject
 	private VisitorChannelService visitorChannelService;
 
+	@Inject
+	private PortPoolService portPoolService;
+
 	public PageInfo<PortMappingListRes> page(PageQuery pageQuery, PortMappingListReq req) {
 		Page<PortMappingListRes> result = PageHelper.startPage(pageQuery.getCurrent(), pageQuery.getSize());
-		List<PortMappingDO> list = portMappingMapper.selectList(new LambdaQueryWrapper<PortMappingDO>()
-				.orderByAsc(PortMappingDO::getId)
-		);
+
+		List<PortMappingDO> list = portMappingMapper.selectPortMappingByCondition(req);
 		List<PortMappingListRes> respList = mapperFacade.mapAsList(list, PortMappingListRes.class);
 		if (CollectionUtils.isEmpty(list)) {
 			return PageInfo.of(respList, result.getTotal(), pageQuery.getCurrent(), pageQuery.getSize());
 		}
+
 		Set<Integer> licenseIds = respList.stream().map(PortMappingListRes::getLicenseId).collect(Collectors.toSet());
 		List<LicenseDO> licenseList = licenseMapper.findByIds(licenseIds);
 		if (CollectionUtil.isEmpty(licenseList)) {
@@ -77,6 +74,7 @@ public class PortMappingService implements Lifecycle {
 		List<UserDO> userList = userMapper.findByIds(userIds);
 		Map<Integer, LicenseDO> licenseMap = licenseList.stream().collect(Collectors.toMap(LicenseDO::getId, Function.identity()));
 		Map<Integer, UserDO> userMap = userList.stream().collect(Collectors.toMap(UserDO::getId, Function.identity()));
+
 		respList.forEach(item -> {
 			LicenseDO license = licenseMap.get(item.getLicenseId());
 			if (null == license) {
@@ -90,6 +88,11 @@ public class PortMappingService implements Lifecycle {
 			}
 			item.setUserName(user.getName());
 		});
+		//sorted [userId asc] [licenseId asc] [createTime asc]
+		respList = respList.stream().sorted(Comparator.comparing(PortMappingListRes::getUserId)
+				.thenComparing(PortMappingListRes::getLicenseId)
+				.thenComparing(PortMappingListRes::getCreateTime))
+		.collect(Collectors.toList());
 		return PageInfo.of(respList, result.getTotal(), pageQuery.getCurrent(), pageQuery.getSize());
 	}
 
@@ -97,7 +100,7 @@ public class PortMappingService implements Lifecycle {
 		LicenseDO licenseDO = licenseMapper.findById(req.getLicenseId());
 		ParamCheckUtil.checkNotNull(licenseDO, ExceptionConstant.LICENSE_NOT_EXIST);
 		if (!SystemContextHolder.isAdmin()) {
-			// 临时处理，如果当前用户不是管理院，则操作userId不能为1
+			// 临时处理，如果当前用户不是管理员，则操作userId不能为1
 			ParamCheckUtil.checkExpression(!licenseDO.getUserId().equals(1), ExceptionConstant.NO_PERMISSION_VISIT);
 		}
 		PortPoolDO portPoolDO = portPoolMapper.findByPort(req.getServerPort());

neutrino-proxy-server/src/main/java/fun/asgc/neutrino/proxy/server/service/PortPoolService.java

@@ -1,16 +1,16 @@
 /**
  * Copyright (c) 2022 aoshiguchen
- * <p>
+ *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
  * in the Software without restriction, including without limitation the rights
  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  * copies of the Software, and to permit persons to whom the Software is
  * furnished to do so, subject to the following conditions:
- * <p>
+ *
  * The above copyright notice and this permission notice shall be included in all
  * copies or substantial portions of the Software.
- * <p>
+ *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
@@ -34,8 +34,10 @@ import fun.asgc.neutrino.proxy.server.constant.ExceptionConstant;
 import fun.asgc.neutrino.proxy.server.controller.req.*;
 import fun.asgc.neutrino.proxy.server.controller.res.*;
 import fun.asgc.neutrino.proxy.server.dal.PortGroupMapper;
+import fun.asgc.neutrino.proxy.server.dal.PortMappingMapper;
 import fun.asgc.neutrino.proxy.server.dal.PortPoolMapper;
 import fun.asgc.neutrino.proxy.server.dal.entity.PortGroupDO;
+import fun.asgc.neutrino.proxy.server.dal.entity.PortMappingDO;
 import fun.asgc.neutrino.proxy.server.dal.entity.PortPoolDO;
 import fun.asgc.neutrino.proxy.server.dal.entity.UserDO;
 import fun.asgc.neutrino.proxy.server.util.ParamCheckUtil;
@@ -48,22 +50,26 @@ import java.util.ArrayList;
 import java.util.Date;
 import java.util.List;
 import java.util.Objects;
+import java.util.stream.Collectors;
 
 /**
+ *
  * @author: aoshiguchen
  * @date: 2022/8/7
  */
 @Component
 public class PortPoolService {
-    @Inject
-    private MapperFacade mapperFacade;
-    @Db
-    private PortPoolMapper portPoolMapper;
-    @Inject
-    private VisitorChannelService visitorChannelService;
+	@Inject
+	private MapperFacade mapperFacade;
+	@Db
+	private PortPoolMapper portPoolMapper;
+	@Inject
+	private VisitorChannelService visitorChannelService;
 
     @Db
     private PortGroupMapper portGroupMapper;
+	@Db
+	private PortMappingMapper portMappingMapper;
 
     public PageInfo<PortPoolListRes> page(PageQuery pageQuery, PortPoolListReq req) {
         Page<PortPoolListRes> result = PageHelper.startPage(pageQuery.getCurrent(), pageQuery.getSize());
@@ -76,10 +82,19 @@ public class PortPoolService {
         List<PortPoolDO> list = portPoolMapper.selectList(new LambdaQueryWrapper<PortPoolDO>()
                 .eq(PortPoolDO::getEnable, EnableStatusEnum.ENABLE.getStatus())
         );
-        return mapperFacade.mapAsList(list, PortPoolListRes.class);
+		return mapperFacade.mapAsList(this.filterUsedPorts(list), PortPoolListRes.class);
     }
+	private List<PortPoolDO> filterUsedPorts(List<PortPoolDO> list) {
+		//Gets the used ports
+		List<PortMappingDO> usePorts = portMappingMapper.selectList(new LambdaQueryWrapper<PortMappingDO>().orderByAsc(PortMappingDO::getId));
 
-    public PortPoolCreateRes create(PortPoolCreateReq req) {
+		List<Integer> serverPorts = usePorts.stream().map(item -> item.getServerPort()).collect(Collectors.toList());
+
+		return list.stream().filter(item -> !serverPorts.contains(item.getPort())).collect(Collectors.toList());
+	}
+
+
+	public PortPoolCreateRes create(PortPoolCreateReq req) {
         PortPoolDO oldPortPoolDO = portPoolMapper.findByPort(req.getPort());
         ParamCheckUtil.checkMustNull(oldPortPoolDO, ExceptionConstant.PORT_CANNOT_REPEAT);
         PortGroupDO portGroupDO = portGroupMapper.selectById(req.getGroupId());

neutrino-proxy-server/src/main/resources/mapper/PortMappingMapper.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="fun.asgc.neutrino.proxy.server.dal.PortMappingMapper">
+    
+    <select id="selectPortMappingByCondition" resultType="fun.asgc.neutrino.proxy.server.dal.entity.PortMappingDO">
+        SELECT pm.* from port_mapping  pm left join license on pm.license_id = license.'id'
+        <where>
+            <if test="req.userId != null">
+                AND license.user_id = #{req.userId}
+            </if>
+            <if test="req.licenseId != null">
+                AND pm.license_id = #{req.licenseId}
+            </if>
+            <if test="req.serverPort != null">
+                AND pm.server_port = #{req.serverPort}
+            </if>
+            <if test="req.isOnline != null">
+                AND pm.is_online = #{req.isOnline}
+            </if>
+            <if test="req.enable != null">
+                AND pm.enable = #{req.enable}
+            </if>
+        </where>
+        order by pm.id asc
+    </select>
+</mapper>