域名解析

2024-03-04 21:35:03 +08:00
parent 6d26c58843
commit aca5fb847b
8 changed files with 121 additions and 424 deletions
@@ -10,12 +10,12 @@
      <!-- <el-select v-model="listQuery.protocal" placeholder="请选择协议" clearable style="margin-right:10px;width: 120px;">
        <el-option v-for="item in protocalList" :key="item.name" :label="item.name" :value="item.name" :disabled="!item.enable" />
      </el-select> -->
-      <el-input v-model="listQuery.domain" type="text" style="width:145px;margin-right:10px" class="filter-item" placeholder="请输入域名关键词" :maxlength="5" show-word-limit />
+      <el-input v-model="listQuery.domain" type="text" style="width:145px;margin-right:10px" class="filter-item" placeholder="请输入域名关键词" />
      <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-option v-for="(value, key) in onlineOptions" :key="key" :label="value" :value="key" />
      </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-option v-for="(value, key) in statusOptions" :key="key" :label="value" :value="key" />
      </el-select>
      <el-input v-model="listQuery.description" type="text" style="width:145px;margin-right:10px" class="filter-item" placeholder="请输入描述详情" show-word-limit />
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{
@@ -54,7 +54,6 @@
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.serverPort')" width="80">
-
        <template slot-scope="scope">
          <span>{{ scope.row.serverPort }}</span>
        </template>
@@ -92,19 +91,19 @@
      <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="colorOption[scope.row.enable]">{{ statusOptions[scope.row.enable] }}</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="colorOption[scope.row.isOnline]">{{ onlineOptions[scope.row.isOnline] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" :label="$t('table.access')" width="120">

        <template slot-scope="scope">
-          <el-button size="mini" v-if="(scope.row.protocal === 'HTTP' || scope.row.protocal === 'HTTP(S)')" @click="handleOpenWebPage(scope.row)">{{ $t('table.openWebPage') }}</el-button>
+          <el-button size="mini" @click="handleOpenWebPage(scope.row)">{{ $t('table.openWebPage') }}</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.actions')" width="320" class-name="small-padding fixed-width">
@@ -113,8 +112,7 @@
          <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="handleDelete(scope.row)" style="margin-left: 10px" />

        </template>
      </el-table-column>
@@ -128,58 +126,21 @@

    <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-item :label="$t('License')" prop="licenseId">
          <DropdownTable v-model="temp.licenseId" :name.sync="temp.licenseName" :tableData="licenseAuthList" @selectedData="selectedFeeItem" placeholder="请选择" :width="280"
            :disabled="dialogStatus === 'update'" />
-          <!--          <DropdownTable
-            :columns="countryColumns"
-            :data="licenseList"
-            v-model="temp.licenseId"
-            :value="temp.licenseName"
-            @rowClick="selectedFeeItem"
-            disabled
-            :disabled="dialogStatus==='update'"
-            style="width: 280px"
-          />-->
        </el-form-item>
-        <el-form-item :label="$t('协议')" prop="protocal">
-          <el-select style="width: 280px;" class="filter-item" v-model="temp.protocal" placeholder="请选择">
-            <el-option v-for="item in protocalList" :key="item.name" :label="item.name" :value="item.name" :disabled="!item.enable">
-            </el-option>
-          </el-select>
+        <el-form-item :label="$t('域名')" prop="domain">
+          <el-input v-model="temp.domain">
+            <template slot="prepend">http(s):</template>
+          </el-input>
        </el-form-item>
-        <el-form-item :label="$t('服务端端口')" prop="serverPort">
-          <load-select style="width: 280px;" class="filter-item" v-model="temp.serverPort" :data="serverPortList" :page="loadServerPortQuery.page" :hasMore="more" :clearable="false"
-            :dictLabel="'port'" :dictValue="'port'" :request="loadServerPort" />
-        </el-form-item>
-        <el-form-item :label="$t('客户端IP')" prop="clientIp">
-          <el-input v-model="temp.clientIp"></el-input>
+        <el-form-item :label="$t('目标地址')" prop="targetPath">
+          <el-input v-model="temp.targetPath"></el-input>
        </el-form-item>
        <el-form-item :label="$t('客户端端口')" prop="clientPort">
          <el-input v-model="temp.clientPort"></el-input>
        </el-form-item>
-        <el-form-item :label="$t('域名')" prop="subdomain" v-if="(temp.protocal === 'HTTP' || temp.protocal === 'HTTP(S)') && domainName && domainName != ''">
-          <el-input v-model="temp.subdomain">
-
-            <template slot="append">.{{ domainName }}</template>
-          </el-input>
-        </el-form-item>
-        <el-form-item :label="$t('响应数量')" prop="proxyResponses" v-if="temp.protocal === 'UDP'">
-          <el-input v-model="temp.proxyResponses"></el-input>
-        </el-form-item>
-        <el-form-item :label="$t('超时时间')" prop="proxyTimeoutMs" v-if="temp.protocal === 'UDP'">
-          <el-input v-model="temp.proxyTimeoutMs">
-
-            <template slot="append">毫秒</template>
-          </el-input>
-        </el-form-item>
        <el-form-item :label="$t('table.securityGroup')" prop="securityGroup">
          <el-select style="width: 280px;" class="filter-item" v-model="temp.securityGroupId" clearable>
            <el-option v-for="item in securityGroupList" :key="item.id" :label="item.name" :value="item.id">
@@ -223,38 +184,20 @@ import { fetchList, createUserPortMapping, updateUserPortMapping, updateEnableSt
 import { fetchGroupList } from '@/api/securityGroup'
 import { availablePortList, portAvailable } from '@/api/portPool'
 import { licenseList, licenseAuthList } from '@/api/license'
-import { protocalList } from '@/api/protocal'
 import { userList } from '@/api/user'
 import { domainNameBindInfo } from '@/api/domain'
 import waves from '@/directive/waves' // 水波纹指令
 import { parseTime } from '@/utils'
 import ButtonPopover from '../../components/Button/buttonPopover'
 import DropdownTable from '../../components/Dropdown/DropdownTable'
-// 下拉选择加载组件
-import loadSelect from "@/components/Select/SelectLoadMore";
-
-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
-}, {})
-
 export default {
-  name: 'complexTable',
+  name: 'DmainMaping',
  directives: {
    waves
  },
  components: {
    DropdownTable,
-    ButtonPopover,
-    loadSelect
+    ButtonPopover
  },
  data() {
    const isPortAvailable = (rule, value, callback) => {
@@ -278,7 +221,6 @@ export default {
        current: 1,
        size: 10,
        domain: null,
-        importance: undefined,
        title: undefined,
        type: undefined,
        userId: undefined,
@@ -287,33 +229,32 @@ export default {
        isOnline: undefined,
        enable: undefined,
        description: undefined
-
      },
-      importanceOptions: [1, 2, 3],
-      calendarTypeOptions,
-      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
-      statusOptions: ['published', 'draft', 'deleted'],
      userList: [],
      licenseList: [],
-      protocalList: [],
      licenseAuthList: [],
-      serverPortList: [],
      domainName: '',
      showReviewer: false,
      temp: {
        id: undefined,
        licenseId: undefined,
        licenseName: undefined,
-        serverPort: undefined,
        clientIp: undefined,
        clientPort: undefined,
-        protocal: undefined,
        proxyResponses: undefined,
        proxyTimeoutMs: undefined
      },
-      selectObj: {
-        statusOptions: [{ label: '启用', value: 1 }, { label: '禁用', value: 2 }],
-        onlineOptions: [{ label: '在线', value: 1 }, { label: '离线', value: 2 }]
+      statusOptions: {
+        1: '启用',
+        2: '禁用',
+      },
+      onlineOptions: {
+        1: '在线',
+        2: '离线'
+      },
+      colorOption: {
+        1: 'success',
+        2: 'danger'
      },
      dialogFormVisible: false,
      dialogStatus: '',
@@ -330,54 +271,18 @@ export default {
        ],
        clientIp: [{ required: true, message: '请输入客户端IP', trigger: 'blur' }],
        clientPort: [{ required: true, message: '请输入客户端端口', trigger: 'blur' }],
-        protocal: [{ required: true, message: '请选择协议', trigger: 'blur' }]
-      },
-      downloadLoading: false,
-      countryColumns: [
-        { prop: 'userName', label: '用户名', align: 'center' },
-        { prop: 'name', label: 'License', align: 'center' }
-      ],
-      loadServerPortQuery: { //下拉框加载数据请求参数
-        page: 1,
-        size: 50,
-        licenseId: null,
      },
      more: true,
      securityGroupList: []
    }
  },
-  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]
-    }
-  },
+  // filters: {
+  // },
  created() {
    this.getDomainNameBindInfo()
    this.getDataList()
    this.getLicenseList()
    this.getLicenseAuthList()
-    this.getProtocalList()
    this.fetchSecurityGroupList()
  },
  methods: {
@@ -412,10 +317,6 @@ export default {
        this.domainName = response.data.data
      })
    },
-    getAvailablePortList(licenseId) {
-      this.loadServerPortQuery.licenseId = licenseId;
-      this.serverPortList = []; //清掉数据
-    },
    getAllUserList() {
      userList().then(response => {
        this.userList = response.data.data
@@ -426,11 +327,6 @@ export default {
        this.licenseList = response.data.data
      })
    },
-    getProtocalList() {
-      protocalList().then(response => {
-        this.protocalList = response.data.data
-      })
-    },
    getLicenseAuthList() {
      licenseAuthList().then(response => {
        this.licenseAuthList = response.data.data
@@ -465,15 +361,12 @@ export default {
        id: undefined,
        licenseId: undefined,
        licenseName: undefined,
-        serverPort: undefined,
        clientIp: '127.0.0.1',
        clientPort: undefined,
        userId: undefined,
        proxyResponses: undefined,
        proxyTimeoutMs: undefined
      }
-      this.serverPortList = []
-      this.loadServerPortQuery.licenseId = null;
      this.more = true;
    },
    handleCreate() {
@@ -502,36 +395,12 @@ export default {
        }
      })
    },
-    handleOpenWebPage(row) {
-      let url = location.protocol + '//' + location.hostname + ':' + row.serverPort
-      if (row.domain) {
-        url = location.protocol + '//' + row.domain
-      }
-      open(url)
-    },
-    handleUpdate(row) {
-      this.temp = Object.assign({}, row) // copy obj
-      if (row.securityGroupId === 0) {
-        this.temp.securityGroupId = null
-      }
-      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: '更新成功',
@@ -545,11 +414,25 @@ export default {
        }
      })
    },
+    handleOpenWebPage(row) {
+      open(location.protocol + '//' + row.domain)
+    },
+    handleUpdate(row) {
+      this.temp = Object.assign({}, row) // copy obj
+      if (row.securityGroupId === 0) {
+        this.temp.securityGroupId = null
+      }
+      this.temp.timestamp = new Date(this.temp.timestamp)
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
    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
      }
    },
@@ -572,68 +455,6 @@ export default {
        })
      }).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]
-        }
-      }))
-    },
-    // 传入给load-select组件的函数
-    loadServerPort({ page = 1, more = false, keyword = "" } = {}) {
-      if (this.loadServerPortQuery.licenseId == null || this.loadServerPortQuery.licenseId == '') {
-        this.more = false;
-        this.$message({
-          message: '请先选择License',
-          type: 'warning'
-        })
-        return;
-      }
-      return new Promise(resolve => {
-        this.loadServerPortQuery.page = page;
-        this.loadServerPortQuery.keyword = keyword;
-        // 访问后端接口API
-        availablePortList(this.loadServerPortQuery).then(res => {
-          let result = res.data;
-          if (more) {
-            this.serverPortList = [...this.serverPortList, ...result.data.records];
-          } else {
-            this.serverPortList = result.data.records;
-          }
-
-          // this.loadServerPortQuery.page = result.data.current;
-          let { total, current, size } = result.data;
-          this.more = page * size < total;
-          this.loadServerPortQuery.page = current;
-          resolve();
-        });
-      });
-    }
  }
 }
 </script>
@@ -105,9 +105,7 @@
          <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="handleDelete(scope.row)" style="margin-left: 10px" />
        </template>
      </el-table-column>
    </el-table>
@@ -122,26 +120,9 @@
    <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-item :label="$t('License')" prop="licenseId">
          <DropdownTable v-model="temp.licenseId" :name.sync="temp.licenseName" :tableData="licenseAuthList"
            @selectedData="selectedFeeItem" placeholder="请选择" :width="280" :disabled="dialogStatus === 'update'" />
-          <!--          <DropdownTable
-            :columns="countryColumns"
-            :data="licenseList"
-            v-model="temp.licenseId"
-            :value="temp.licenseName"
-            @rowClick="selectedFeeItem"
-            disabled
-            :disabled="dialogStatus==='update'"
-            style="width: 280px"
-          />-->
        </el-form-item>
        <el-form-item :label="$t('协议')" prop="protocal">
          <el-select style="width: 280px;" class="filter-item" v-model="temp.protocal" placeholder="请选择">
@@ -232,20 +213,6 @@ import ButtonPopover from '../../components/Button/buttonPopover'
 import DropdownTable from '../../components/Dropdown/DropdownTable'
 // 下拉选择加载组件
 import loadSelect from "@/components/Select/SelectLoadMore";
-
-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
-}, {})
-
 export default {
  name: 'complexTable',
  directives: {
@@ -277,7 +244,6 @@ export default {
      listQuery: {
        current: 1,
        size: 10,
-        importance: undefined,
        title: undefined,
        type: undefined,
        userId: undefined,
@@ -288,7 +254,6 @@ export default {
        description: undefined

      },
-      importanceOptions: [1, 2, 3],
      calendarTypeOptions,
      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
      statusOptions: ['published', 'draft', 'deleted'],
@@ -367,9 +332,6 @@ export default {
      }
      return statusMap[status]
    },
-    typeFilter(type) {
-      return calendarTypeKeyValue[type]
-    }
  },
  created() {
    this.getDomainNameBindInfo()
@@ -571,29 +533,6 @@ export default {
        })
      }).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') {