| | |
| | | <template> |
| | | <div v-if="role=='访客'" class="app-container"> |
| | | <el-empty description="暂无权限"></el-empty> |
| | | </div> |
| | | <div v-if="role == '访客'" class="app-container"> |
| | | <el-empty description="暂无权限"></el-empty> |
| | | </div> |
| | | <div v-else class="app-container"> |
| | | <div class="filter-container"> |
| | | <el-input v-model="listQuery.keyword" size="small" placeholder="请输入IP地址" clearable class="filter-item w-200" /> |
| | |
| | | <el-button size="small" type="primary" icon="el-icon-refresh" @click="refresh"> |
| | | 刷新 |
| | | </el-button> |
| | | <el-button v-if="uadd=='Yes'" size="small" type="primary" icon="el-icon-plus" @click="add"> |
| | | <el-button v-if="uadd == 'Yes'" size="small" type="primary" icon="el-icon-plus" @click="add"> |
| | | 新增 |
| | | </el-button> |
| | | </el-button-group> |
| | |
| | | |
| | | <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit height="100%" |
| | | class="table-container" highlight-current-row> |
| | | <el-table-column fixed label="序号" width="80" > |
| | | <el-table-column fixed label="序号" width="80"> |
| | | <template slot-scope="scope"> |
| | | {{ scope.row.id }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="ip地址" > |
| | | <el-table-column label="ip地址"> |
| | | <template slot-scope="scope"> |
| | | {{ scope.row.ip }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="端口" > |
| | | <el-table-column label="端口"> |
| | | <template slot-scope="scope"> |
| | | {{ scope.row.port }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="转发类型" > |
| | | <el-table-column label="转发类型"> |
| | | <template slot-scope="scope"> |
| | | {{ scope.row.datatype }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="添加时间" > |
| | | <el-table-column label="添加时间"> |
| | | <template slot-scope="scope"> |
| | | {{ scope.row.addtime }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" width="200" v-if="uupdate=='Yes' || udelete=='Yes'"> |
| | | <el-table-column label="操作" width="200" v-if="uupdate == 'Yes' || udelete == 'Yes'"> |
| | | <template slot-scope="scope"> |
| | | <el-button-group> |
| | | <el-button v-if="uupdate=='Yes'" type="primary" icon="el-icon-edit" size="mini" @click="edit(scope)"> |
| | | <el-button v-if="uupdate == 'Yes'" type="primary" icon="el-icon-edit" size="mini" @click="edit(scope)"> |
| | | 修改 |
| | | </el-button> |
| | | <el-button v-if="udelete=='Yes'" type="danger" icon="el-icon-delete" size="mini" @click="del(scope)"> |
| | | <el-button v-if="udelete == 'Yes'" type="danger" icon="el-icon-delete" size="mini" @click="del(scope)"> |
| | | 删除 |
| | | </el-button> |
| | | </el-button-group> |
| | |
| | | <el-form :ref="temp" :model="temp" label-width="120px" label-position="right" :rules="rules"> |
| | | <el-form-item label="ip地址" prop="ip"> |
| | | <el-input v-model="temp.ip |
| | | " placeholder="请输入ip地址" /> |
| | | " placeholder="请输入ip地址" /> |
| | | </el-form-item> |
| | | <el-form-item label="端口" prop="port"> |
| | | <el-input v-model="temp.port |
| | | " placeholder="请输入端口" /> |
| | | " placeholder="请输入端口" /> |
| | | </el-form-item> |
| | | <el-form-item label="转发类型" prop="datatype"> |
| | | <el-select style="width: 100%;" v-model="temp.datatype" placeholder="请选择转发类型"> |
| | |
| | | |
| | | <script> |
| | | import Pagination from '@/components/Pagination' |
| | | import { getForwardDataPage, delForwardData, addorupForwardData, searchForwardData,addSystemOperationLog } from '@/api/forwar' |
| | | import { getForwardDataPage, delForwardData, addorupForwardData, searchForwardData, addSystemOperationLog } from '@/api/forwar' |
| | | import { deepClone } from '@/utils' |
| | | |
| | | const _temp = { |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | role:localStorage.getItem('role'), |
| | | uadd:'', |
| | | udelete:'', |
| | | uupdate:'', |
| | | options:[{ |
| | | value:'TCP', |
| | | label:'TCP' |
| | | },{ |
| | | value:'UDP', |
| | | label:'UDP' |
| | | role: localStorage.getItem('role'), |
| | | uadd: '', |
| | | udelete: '', |
| | | uupdate: '', |
| | | options: [{ |
| | | value: 'TCP', |
| | | label: 'TCP' |
| | | }, { |
| | | value: 'UDP', |
| | | label: 'UDP' |
| | | }], |
| | | total: 0, |
| | | list: [], |
| | |
| | | loading: false, |
| | | rules: { |
| | | ip: [ |
| | | { required: true, message: '请输入ip地址', trigger: 'blur' }, |
| | | ], |
| | | datatype: [ |
| | | { required: true, message: '请选择转发类型', trigger: 'blur' } |
| | | ], |
| | | port: [ |
| | | { required: true, message: '请输入端口', trigger: 'change' } |
| | | ] |
| | | }, |
| | | { required: true, message: '请输入ip地址', trigger: 'blur' }, |
| | | ], |
| | | datatype: [ |
| | | { required: true, message: '请选择转发类型', trigger: 'blur' } |
| | | ], |
| | | port: [ |
| | | { required: true, message: '请输入端口', trigger: 'change' } |
| | | ] |
| | | }, |
| | | } |
| | | }, |
| | | created() { |
| | | this.fetchData() |
| | | }, |
| | | methods: { |
| | | |
| | | |
| | | // 搜索 |
| | | search() { |
| | | this.listLoading = true |
| | | searchForwardData(this.listQuery).then(response => { |
| | | if (response.data!=null) { |
| | | if (response.data != null) { |
| | | this.list = response.data.records |
| | | this.total = response.data.total |
| | | }else{ |
| | | } else { |
| | | this.$message({ |
| | | message: '未搜索到数据', |
| | | type: 'error' |
| | | }) |
| | | } |
| | | |
| | | |
| | | this.listLoading = false |
| | | }) |
| | | }, |
| | |
| | | this.list.splice(scope.$index, 1) |
| | | delForwardData(params).then(response => { |
| | | this.temp.adminname = localStorage.getItem('username') || ''; |
| | | const params = { name: this.temp.adminname, content: '删除了一个数据转发,该ip地址为:'+scope.row.ip }; |
| | | const params = { name: this.temp.adminname, content: '删除了一个数据转发,该ip地址为:' + scope.row.ip }; |
| | | addSystemOperationLog(params).then(response => { |
| | | |
| | | }) |
| | | }) |
| | | this.$message({ |
| | | message: '删除成功', |
| | | type: 'success' |
| | |
| | | this.loading = true |
| | | this.$refs[this.temp].validate((valid) => { |
| | | if (valid) { |
| | | addorupForwardData(this.temp).then(() => { |
| | | if (this.temp.id=="") { |
| | | this.temp.adminname = localStorage.getItem('username') || ''; |
| | | const params = { name: this.temp.adminname, content: '新增了一个数据转发,该ip地址为:'+this.temp.ip }; |
| | | addSystemOperationLog(params).then(response => { |
| | | addorupForwardData(this.temp).then(() => { |
| | | if (this.temp.id == "") { |
| | | this.temp.adminname = localStorage.getItem('username') || ''; |
| | | const params = { name: this.temp.adminname, content: '新增了一个数据转发,该ip地址为:' + this.temp.ip }; |
| | | addSystemOperationLog(params).then(response => { |
| | | |
| | | }) |
| | | } else { |
| | | this.temp.adminname = localStorage.getItem('username') || ''; |
| | | const params = { name: this.temp.adminname, content: '修改了一个数据转发,该ip地址为:'+this.temp.ip }; |
| | | addSystemOperationLog(params).then(response => { |
| | | }) |
| | | } else { |
| | | this.temp.adminname = localStorage.getItem('username') || ''; |
| | | const params = { name: this.temp.adminname, content: '修改了一个数据转发,该ip地址为:' + this.temp.ip }; |
| | | addSystemOperationLog(params).then(response => { |
| | | |
| | | }) |
| | | } |
| | | this.fetchData() |
| | | setTimeout(() => { |
| | | this.$message({ |
| | | message: '提交成功', |
| | | type: 'success' |
| | | }) |
| | | } |
| | | this.fetchData() |
| | | setTimeout(() => { |
| | | this.$message({ |
| | | message: '提交成功', |
| | | type: 'success' |
| | | }) |
| | | this.dialogVisible = false |
| | | this.loading = false |
| | | }, 300) |
| | | }) |
| | | this.dialogVisible = false |
| | | this.loading = false |
| | | }, 300) |
| | | }) |
| | | } else { |
| | | this.$message({ |
| | | } else { |
| | | this.$message({ |
| | | message: '提交失败,请检查表单必填项是否为空', |
| | | type: 'error' |
| | | }) |
| | | console.log('error submit!!'); |
| | | return false; |
| | | } |
| | | }); |
| | | console.log('error submit!!'); |
| | | return false; |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | } |