eladmin-web/.svn/pristine/f4/f4fc021f9a6cdd11a5a347a3a25fda08acab86f2.svn-base

<template>
	<div class="app-container">
  	<div style="margin-bottom:10px">
  		<el-button type="success" @click="addBtn">新增</el-button>
		<el-button type="success" @click="importBtn">导入</el-button>
		<el-button type="success" @click="exportTempBtn">模版下载</el-button>
  	</div>
    <!--搜索-->
    <el-form class="mt_15" ref="form" inline size="small">
  		<el-form-item label="所属国家简称">
    		<el-input v-model.trim="searchParm.contntryShort" clearable placeholder='所属国家简称'></el-input>
  		</el-form-item>
  		<el-form-item label="IP地址">
    		<el-input v-model.trim="searchParm.ipAddress" clearable placeholder='IP地址'></el-input>
  		</el-form-item>
  		<el-form-item label="父ip地址">
    		<el-input v-model.trim="searchParm.parentIpAddress" clearable placeholder='父ip地址'></el-input>
  		</el-form-item>
  		<el-form-item label="端口">
    		<el-input v-model.trim="searchParm.port" clearable placeholder='端口'></el-input>
  		</el-form-item>
  		<el-form-item label="名称">
    		<el-input v-model.trim="searchParm.name" clearable placeholder='名称'></el-input>
  		</el-form-item>
		<el-form-item label="密码">
    		<el-input v-model.trim="searchParm.pwd" clearable placeholder='密码'></el-input>
  		</el-form-item>
		<el-form-item label="mac地址">
    		<el-input v-model.trim="searchParm.mac" clearable placeholder='mac地址'></el-input>
  		</el-form-item>
		<el-form-item label="VPS类型">
			<el-select v-model.trim="searchParm.vpsType" placeholder="请选择">
			    <el-option
			      v-for="item in searchVpsTypeList"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
  		</el-form-item>
		<el-form-item label="经销商">
    		<el-select v-model.trim="searchParm.dealer" placeholder="请选择">
			    <el-option
			      v-for="item in searchDealerList"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
  		</el-form-item>
		<el-form-item label="状态">
    		<el-select v-model.trim="searchParm.status" placeholder="请选择">
			    <el-option
			      v-for="item in searchStatusList"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
  		</el-form-item>
  		<el-form-item>
    		<el-button type="primary" @click="goSearch">搜索</el-button>
    		<el-button type="warning" @click="resetForm">重置</el-button>
  		</el-form-item>
	</el-form>
    <!--表格渲染-->
    <el-table ref="table" border size="small" :data="list" :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="所属国家简称" prop="contntryShort" />
      <el-table-column label="IP地址" prop="ipAddress" />
      <el-table-column label="父ip地址" prop="parentIpAddress" />
      <el-table-column label="端口" prop="port" />
	  <el-table-column label="名称" prop="name" />
      <el-table-column label="密码" prop="pwd" />
      <el-table-column label="VPS类型" prop="vpsType">
		<template slot-scope="scope">
      		{{ scope.row.vpsType | getVpsType}}
      	</template>
	  </el-table-column>
      <el-table-column label="经销商" prop="dealer">
		<template slot-scope="scope">
      		{{ scope.row.dealer | getDealer}}
      	</template>
	  </el-table-column>
	  <el-table-column label="mac地址" prop="mac" />
      <el-table-column label="状态" prop="status">
		<template slot-scope="scope">
      		{{ scope.row.status | getStatus}}
      	</template>
	  </el-table-column>
      <el-table-column label="创建时间" prop="createdAt" />
      <el-table-column label="修改时间" prop="updatedAt" />
      <el-table-column label="操作" width="220">
      	<template slot-scope="scope">
    		<el-button type="info" @click="getBtnById(scope.row.id)">查看</el-button>
      		<el-button type="warning" @click="editById(scope.row)">修改</el-button>
      		<el-button type="danger" @click="delById(scope.row.id)">删除</el-button>
      	</template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="mt_15">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="searchParm.page"
	      :page-sizes="[10, 20, 30, 40, 50]"
	      :page-size="searchParm.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="total">
	    </el-pagination>
  </div>
  
  <!--新增弹窗-->
  <el-dialog :visible.sync="dialogAddVisible" :title="dialogAddTitle" center width="45%">
  	<div class="dialog-content">
  		 <el-form ref="addParm" size="small" :model="addParm" :rules="rules" label-width="130px">
  		 	<el-form-item label="所属国家简称" prop="contntryShort">
	    		<el-input v-model.trim="addParm.contntryShort" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="IP地址" prop="ipAddress">
	    		<el-input v-model.trim="addParm.ipAddress" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="父ip地址" prop="parentIpAddress">
	    		<el-input v-model.trim="addParm.parentIpAddress" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="端口" prop="port">
	    		<el-input v-model.trim="addParm.port" clearable></el-input>
	  		</el-form-item>
			<el-form-item label="名称" prop="name">
	    		<el-input v-model.trim="addParm.name" clearable></el-input>
	  		</el-form-item>
			<el-form-item label="密码" prop="pwd">
	    		<el-input v-model.trim="addParm.pwd" clearable></el-input>
	  		</el-form-item>
			<el-form-item label="mac地址" prop="mac">
	    		<el-input v-model.trim="addParm.mac" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="link" prop="link">
	    		<el-input v-model.trim="addParm.link" clearable></el-input>
	  		</el-form-item>
			<el-form-item label="VPS类型">
				<el-select v-model.trim="addParm.vpsType" placeholder="请选择">
			    	<el-option
			     	 v-for="item in vpsTypeList"
			      	:key="item.value"
			      	:label="item.label"
			      	:value="item.value">
			    	</el-option>
				</el-select>`
  			</el-form-item>
			<el-form-item label="经销商">
    			<el-select v-model.trim="addParm.dealer" placeholder="请选择">
			    	<el-option
			     	 v-for="item in dealerList"
			     	 :key="item.value"
			     	 :label="item.label"
			      	:value="item.value">
			    </el-option>
			</el-select>
  			</el-form-item>
		</el-form>
  	</div>
  	<span slot="footer">
  		<el-button type="info" @click="sureAddCancle('addParm')">取消</el-button>
      <el-button type="primary" @click="sureAdd('addParm')">确认</el-button>
  	</span>
  </el-dialog>
  
  
  <!--修改弹窗-->
  <el-dialog :visible.sync="dialogEditVisible" :title="dialogEditTitle" center width="45%">
  	<div class="dialog-content">
  		 <el-form ref="editParm" size="small" :model="editParm" :rules="rules" label-width="130px">
  		 	<el-form-item label="所属国家简称" prop="contntryShort">
	    		<el-input v-model.trim="editParm.contntryShort" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="IP地址" prop="ipAddress">
	    		<el-input v-model.trim="editParm.ipAddress" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="父ip地址" prop="parentIpAddress">
	    		<el-input v-model.trim="editParm.parentIpAddress" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="端口" prop="port">
	    		<el-input v-model.trim="editParm.port" clearable></el-input>
	  		</el-form-item>
			<el-form-item label="名称" prop="name">
	    		<el-input v-model.trim="editParm.name" clearable></el-input>
	  		</el-form-item>
			<el-form-item label="密码" prop="pwd">
	    		<el-input v-model.trim="editParm.pwd" clearable></el-input>
	  		</el-form-item>
			<el-form-item label="mac地址" prop="mac">
	    		<el-input v-model.trim="editParm.mac" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="link" prop="link">
	    		<el-input v-model.trim="editParm.link" clearable></el-input>
	  		</el-form-item>
			<el-form-item label="VPS类型">
				<el-select v-model.trim="editParm.vpsType" placeholder="请选择">
			    	<el-option
			     	 v-for="item in vpsTypeList"
			      	:key="item.value"
			      	:label="item.label"
			      	:value="item.value">
			    	</el-option>
				</el-select>`
  			</el-form-item>
			<el-form-item label="经销商">
    			<el-select v-model.trim="editParm.dealer" placeholder="请选择">
			    	<el-option
			     	 v-for="item in dealerList"
			     	:key="item.value"
			      	:label="item.label"
			      	:value="item.value">
			    </el-option>
			</el-select>
  			</el-form-item>
			<el-form-item label="状态">
    			<el-select v-model.trim="editParm.status" placeholder="请选择">
			    	<el-option
			    	  v-for="item in statusList"
			     	:key="item.value"
			      	:label="item.label"
			      	:value="item.value">
			   		 </el-option>
				</el-select>
  			</el-form-item>
		</el-form>
  	</div>
  	<span slot="footer">
  		<el-button type="info" @click="sureEditCancle(editParm)">取消</el-button>
   		<el-button type="primary" @click="sureEdit('editParm')">确认</el-button>
  	</span>
  </el-dialog>
  
  <!--详情弹窗-->
  <el-dialog :visible.sync="dialogDetailVisible" :title="dialogDetailTitle" center width="45%">
  	<div class="dialog-content">
  		 <el-form ref="form" size="small" label-width="130px">
  		 	<el-form-item label="所属国家简称" prop="contntryShort">
	    		<el-input v-model.trim="detailParm.contntryShort" :disabled="true"></el-input>
	  		</el-form-item>
	  		<el-form-item label="IP地址" prop="ipAddress">
	    		<el-input v-model.trim="detailParm.ipAddress" :disabled="true"></el-input>
	  		</el-form-item>
	  		<el-form-item label="父ip地址" prop="parentIpAddress">
	    		<el-input v-model.trim="detailParm.parentIpAddress" :disabled="true"></el-input>
	  		</el-form-item>
	  		<el-form-item label="端口" prop="port">
	    		<el-input v-model.trim="detailParm.port" :disabled="true"></el-input>
	  		</el-form-item>
			<el-form-item label="名称" prop="name">
	    		<el-input v-model.trim="detailParm.name" :disabled="true"></el-input>
	  		</el-form-item>
			<el-form-item label="密码" prop="pwd">
	    		<el-input v-model.trim="detailParm.pwd" :disabled="true"></el-input>
	  		</el-form-item>
			<el-form-item label="mac地址" prop="mac">
	    		<el-input v-model.trim="detailParm.mac" :disabled="true"></el-input>
	  		</el-form-item>
	  		<el-form-item label="link" prop="link">
	    		<el-input v-model.trim="detailParm.link" :disabled="true"></el-input>
	  		</el-form-item>
			<el-form-item label="VPS类型">
				<el-select v-model.trim="detailParm.vpsType" disabled>
			    	<el-option
			     	 v-for="item in vpsTypeList"
			      	:key="item.value"
			      	:label="item.label"
			      	:value="item.value">
			    	</el-option>
				</el-select>`
  			</el-form-item>
			<el-form-item label="经销商">
    			<el-select v-model.trim="detailParm.dealer"  disabled placeholder="请选择">
			    	<el-option
			     	 v-for="item in dealerList"
			     	 :key="item.value"
			     	 :label="item.label"
			      	:value="item.value">
			    </el-option>
			</el-select>
  			</el-form-item>
			<el-form-item label="状态" prop="status">
    			<el-select v-model.trim="detailParm.status" disabled placeholder="请选择">
			    	<el-option
			    	  v-for="item in statusList"
			     	 :key="item.value"
			     	 :label="item.label"
			     	 :value="item.value">
			   		 </el-option>
				</el-select>
  			</el-form-item>
		</el-form>
  	</div>
  </el-dialog>

  <!--Vpn信息导入  importBtn-->
  <el-dialog :visible.sync="dialogImportVisible" :title="dialogImportTitle" center width="23%">
  	<div class="dialog-content">                 
	  		<el-upload
				  class="upload-demo"
				  drag
				  ref="upload"
				  :action="uploadFileUrl"
				  :headers="uploadHeaders"
				  :show-file-list = "false"
				  :on-success="uploadSuccess"
				  :before-upload="beforeAvatarUpload"
				  multiple>
				  <i class="el-icon-upload"></i>
				  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				  <div class="el-upload__tip" slot="tip">只能上传xlsl文件，且不超过10M</div>
				</el-upload>
  	</div>
  </el-dialog>
  
  </div>
</template>
<script>
	import { getList, add, delById, getById, editById} from '@/api/group/vpn'
export default {
	filters: {
	  getVpsType: function (value) {
	   if(value == 1) {
	   	return '传统';
	   }
	  },
	  getDealer: function (value) {
	   if(value == 1) {
	   	return 'V2';
	   }
	  },
	  getStatus: function (value) {
	   if(value == 1) {
	   	return '可用';
	   } else if (value == 2) {
	   	return '禁用';
	   }
	  }
	},
//	数据
  data() {
    return {
    	searchParm: {
    		page: 1,
    		pageSize: 10,
    		sort:'created_at',
    		order:'desc',
			contntryShort:null,
    		ipAddress:null,
    		parentIpAddress:null,
    		port:null,
    		name:null,
			pwd:null,
    		vpsType:null,
    		dealer:null,
    		mac:null,
			status:null,
    	},
    	total:0,
      list: [],
	  uploadHeaders:{ Authorization: this.$store.getters.token },
      dialogAddVisible: false,
      dialogAddTitle: '新增',
      dialogDetailVisible: false,
      dialogDetailTitle: '详情',
      dialogEditVisible: false,
      dialogEditTitle: '修改',
	  dialogImportVisible: false,
      dialogImportTitle:'导入',
	  uploadFileUrl: process.env.VUE_APP_BASE_API + '/api/ctVpn/import',
	  tempUrl: process.env.VUE_APP_BASE_API + '/api/ctVpn/exportTemp',
	  vpsTypeList:[
	        {
			value:1,
			label:"传统"
		}],
	  searchVpsTypeList:[{
			value: null,
			label: '全部'
		},
		{
			value:1,
			label:"传统"
		}],
		searchDealerList:[{
				value: null,
				label: '全部'
			},
			{
	          value: 1,
	          label: 'V2'
	    }],
		dealerList:[
			{
				value: 1,
				label: 'V2'
		}],
		searchStatusList:[{
				value: null,
				label: '全部'
			},
			{
				value: 1,
				label: '可用'
			},
			{
				value: 2,
				label: '禁用'
		}],
		statusList:[{
				value: 1,
				label: '可用'
			},
			{
				value: 2,
				label: '禁用'
		}],
      addParm: {
		id:null,
		contntryShort:null,
    	ipAddress:null,
    	parentIpAddress:null,
    	port:null,
    	name:null,
		pwd:null,
    	vpsType:null,
    	dealer:null,
    	mac:null,
    	link:null,
		status:null,
      },
      detailParm: {
      	id:null,
		contntryShort:null,
    	ipAddress:null,
    	parentIpAddress:null,
    	port:null,
    	name:null,
		pwd:null,
    	vpsType:null,
    	dealer:null,
    	mac:null,
    	link:null,
		status:null,
      },
      editParm: {
      	id:null,
		contntryShort:null,
    	ipAddress:null,
    	parentIpAddress:null,
    	port:null,
    	name:null,
		pwd:null,
    	vpsType:null,
    	dealer:null,
    	mac:null,
    	link:null,
		status:null,
      },
      rules: {
      	contntryShort: [
            { required: true, message: '请输入国家简称', trigger: 'blur' }
          ],
      	ipAddress: [
            { required: true, message: '请输入IP地址', trigger: 'blur' }
          ],
        parentIpAddress: [
            { required: true, message: '请输入父ip地址', trigger: 'blur' }
          ],
        port: [
            { required: true, message: '请输入端口', trigger: 'blur' },
			{pattern: /^[+]?(0|([1-9]\d*))?$/, message: "请输入正确数字", trigger: "blur"}
          ],
        name: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ],
		pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
		vpsType: [
            { required: true, message: '请输入VPS类型', trigger: 'blur' }
          ],
		dealer: [
            { required: true, message: '请输入经销商', trigger: 'blur' }
          ],
		mac: [
            { required: true, message: '请输入mac地址', trigger: 'blur' }
          ],
      	link: [
        	{ required: true, message: '请输入Link信息', trigger: 'blur' }
      	],
		status: [
            { required: true, message: '请输入状态', trigger: 'blur' }
          ]
    	}
	}
  },
  // 调用
  created() {
	this.goSearch()
  },
	//方法
  methods: {
	//重置
  	resetForm() {
		this.searchParm.contntryShort = null;
        this.searchParm.ipAddress = null;
        this.searchParm.parentIpAddress = null;
        this.searchParm.port = null;
        this.searchParm.name = null;
        this.searchParm.pwd = null;
		this.searchParm.vpsType = null;
        this.searchParm.dealer = null;
        this.searchParm.mac = null;
        this.searchParm.status = null;
        this.goSearch()
    },
	//	查询
	goSearch() {
		this.searchParm.page=1
		this.getDataList()
	},
	//导入成功
	uploadSuccess(res, file) {
  		this.dialogImportVisible = false;
    	if(res.code==200) {
			console.log(res.data);
			if(res.data != null) {
				window.location.href = res.data;
				this.$message.error('导入失败!');
			}
    		else{
				this.$message.success('导入成功!');
			}
			
		}
		this.goSearch();
  	},
	beforeAvatarUpload(file) {
	    console.log(file);
	    const isLt10M = file.size / 1024 / 1024 <10;
	    if (!isLt10M) {
	      this.$message.error('上传Excel文件大小不能超过 10MB!');
	    }
	    return isLt10M;
	 },
	// 导入
	importBtn() {
		this.dialogImportVisible = true
	},
	//vpn模板
	exportTempBtn() {
		console.log(this.tempUrl)
		window.location.href = this.tempUrl;
	},
	// 新增
	addBtn(){
		this.addParm = {
			id:null,
			contntryShort:'',
    		ipAddress:'',
    		parentIpAddress:'',
    		port:'',
    		name:'',
			pwd:'',
    		vpsType:null,
    		dealer:null,
    		mac:'',
    		link:'',
			status:null,
      }
		this.dialogAddTitle='新增'
		this.dialogAddVisible = true;
		this.$refs.addParm.clearValidate();
	},
	//	根据id删除
	delById(id){
		this.$confirm('确认删除?','提示',{
			confirmButtonText: '确定',
      		cancelButtonText: '取消',
      		type: 'warning'
		}).then(() => {
			delById({id}).then(res => {
				if(res.code==200) {
					this.$message.success('删除成功!')
					this.getDataList()
				}
			}).catch(err => {
				console.log(err)
			})
		}).catch(() => {
			this.$message.info('取消删除')
		})
	},
	//	修改
	editById(data){
		getById({id: data.id}).then(res => {
			if(res.code==200) {
				this.editParm.id = res.data.id;
				this.editParm.contntryShort = res.data.contntryShort;
				this.editParm.ipAddress = res.data.ipAddress;
				this.editParm.parentIpAddress = res.data.parentIpAddress;
				this.editParm.port = res.data.port;
				this.editParm.name = res.data.name;
				this.editParm.pwd = res.data.pwd;
				this.editParm.vpsType = res.data.vpsType;
				this.editParm.dealer = res.data.dealer;
				this.editParm.mac = res.data.mac;
				this.editParm.link = res.data.link;
				this.editParm.status = res.data.status;
				this.dialogEditVisible = true;
				this.$refs.editParm.clearValidate();
			}
		}).catch(err => {
			console.log(err)
		})
	},
	// 确认修改
	sureEdit(editParm){
		this.$refs[editParm].validate((valid) => {
		  if (valid) {
			editById(this.editParm).then(res => {
				if(res.code==200) {
					console.log(res);
					this.$refs.editParm.clearValidate();
					this.dialogEditVisible = false
					this.$message.success('修改成功!');
					this.getDataList();
				}
			}).catch(err => {
				console.log(err)
			})
		  } else {
			console.log('error submit!!');
			return false;
		  }
		});
	},
	// 确认新增
	sureAdd(addParm){
		
		this.$refs[addParm].validate((valid) => {
		  if (valid) {
			add(this.addParm).then(res => {
				if(res.code==200) {
					this.dialogAddVisible = false
					this.$message.success('新增成功!');
					this.$refs.addParm.clearValidate();
					this.getDataList()
				}
			}).catch(err => {
					console.log(err)
			})
		  } else {
			console.log('error submit!!');
			return false;
		  }
		});
	},
	sureAddCancle(addParm) {
		this.dialogAddVisible=flase;
		this.$refs.addParm.clearValidate();
	},
	sureEditCancle(editParm) {
		this.dialogEditVisible=false;
		this.$refs.editParm.clearValidate();
	},
	// 查看根据id
	getBtnById(id){
		getById({id}).then(res => {
			if(res.code==200) {
				this.detailParm.id = res.data.id;
				this.detailParm.contntryShort = res.data.contntryShort;
				this.detailParm.ipAddress = res.data.ipAddress;
				this.detailParm.parentIpAddress = res.data.parentIpAddress;
				this.detailParm.port = res.data.port;
				this.detailParm.name = res.data.name;
				this.detailParm.pwd = res.data.pwd;
				this.detailParm.vpsType = res.data.vpsType;
				this.detailParm.dealer = res.data.dealer;
				this.detailParm.mac = res.data.mac;
				this.detailParm.link = res.data.link;
				this.detailParm.status = res.data.status;
				this.dialogDetailVisible = true
				
			}
		}).catch(err => {
			console.log(err)
		})
	},
	// 分页获取表格数据
	getDataList(){
		getList(this.searchParm).then(res => {
				console.log(res)
				if(res.code==200) {
					console.log(res)
					this.list = res.data.list;
					this.total = res.data.total;
				}
			}).catch(err => {
				console.log(err)
			})
	},
	
	//	分页
	handleSizeChange(val) {
   		console.log(`每页 ${val} 条`);
   		this.searchParm.pageSize = val;
   		this.getDataList();
  	},
  	handleCurrentChange(val) {
    	console.log(`当前页: ${val}`);
    	this.searchParm.page = val;
    	this.getDataList();
  	}
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>