|
- <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.account" clearable placeholder="账号"></el-input>
- </el-form-item>
- <el-form-item label="昵称">
- <el-input v-model.trim="searchParm.nickName" clearable></el-input>
- </el-form-item>
- <el-form-item label="密码">
- <el-input v-model.trim="searchParm.pwd" clearable></el-input>
- </el-form-item>
- <el-form-item label="公司">
- <el-select v-model.trim="searchParm.companyId" placeholder="请选择">
- <el-option v-for="item in companys" :key="item.name" :label="item.name" :value="item.id"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="平台">
- <el-select v-model.trim="searchParm.platformId" placeholder="请选择">
- <el-option
- v-for="item in platformList"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- ></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="account" />
- <el-table-column label="昵称" prop="nickName" />
- <el-table-column label="密码" prop="pwd" />
- <el-table-column label="公司" prop="companyName" />
- <el-table-column label="平台" prop="platformName" />
- <el-table-column label="VPNIP" prop="ipAddress" />
- <el-table-column label="信用卡卡号" prop="number" />
- <el-table-column label="州" prop="state" />
- <el-table-column label="国家" prop="contntryShort" />
- <el-table-column label="地址1" prop="addressline1" />
- <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>
- <span v-if="scope.row.status != 7" slot="footer">
- <el-button type="danger" @click="delById(scope.row.id)" style="margin-left: 10px">删除</el-button>
- </span>
- </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="100px">
- <el-form-item label="账号" prop="account">
- <el-input v-model.trim="addParm.account" clearable></el-input>
- </el-form-item>
- <el-form-item label="昵称" prop="nickName">
- <el-input v-model.trim="addParm.nickName" 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="公司" prop="companyId">
- <el-select v-model.trim="addParm.companyId" placeholder="请选择">
- <el-option
- v-for="item in companys"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="平台" prop="platformId">
- <el-select v-model.trim="addParm.platformId" placeholder="请选择">
- <el-option
- v-for="item in platformList"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <!--国家-->
- <el-form-item label="所属国家" prop="contntryShort">
- <el-input v-model.trim="addParm.contntryShort" clearable></el-input>
- </el-form-item>
- <!--VPN vpnId -->
- <el-input v-model.trim="addParm.vpnId" type="hidden" clearable></el-input>
- <el-form-item label="VPN地址" prop="vpnIp">
- <el-input v-model.trim="addParm.vpnIp" style="width:230px"></el-input>
- <el-button
- type="primary"
- icon="el-icon-search"
- @click="goSearchVpn"
- style="width:130px"
- >请选择VPN</el-button>
- </el-form-item>
- <!--信用卡ID cardId -->
- <el-input v-model.trim="addParm.cardId" type="hidden" clearable></el-input>
- <el-form-item label="信用卡号" prop="cardNumber">
- <el-input v-model.trim="addParm.cardNumber" style="width:230px"></el-input>
- <el-button
- type="primary"
- icon="el-icon-search"
- @click="goSearchCard"
- style="width:130px"
- >请选择信用卡</el-button>
- </el-form-item>
- <!--用户等级 level -->
- <el-form-item label="用户等级" prop="level">
- <el-select v-model.trim="addParm.level" placeholder="请选择">
- <el-option
- v-for="item in levelList"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <!--占用状态 occupyStatus -->
- <el-form-item label="占用状态" prop="occupyStatus">
- <el-select v-model.trim="addParm.occupyStatus" placeholder="请选择">
- <el-option
- v-for="item in occupyStatusList"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <!--状态 status -->
- <el-form-item label="状态" prop="status">
- <el-select v-model.trim="addParm.status" placeholder="请选择">
- <el-option
- v-for="item in statusList"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <!-- ********地址相关信息******** -->
- <!--firstname-->
- <el-form-item label="firstname" prop="firstname">
- <el-input v-model.trim="addParm.firstname" clearable></el-input>
- </el-form-item>
- <!--lastname-->
- <el-form-item label="lastname" prop="lastname">
- <el-input v-model.trim="addParm.lastname" clearable></el-input>
- </el-form-item>
- <!--电话-->
- <el-form-item label="电话" prop="tel">
- <el-input v-model.trim="addParm.tel" clearable></el-input>
- </el-form-item>
- <!--国家-->
- <el-form-item label="国家" prop="country">
- <el-input v-model.trim="addParm.country" clearable></el-input>
- </el-form-item>
- <!--州-->
- <el-form-item label="州" prop="state">
- <el-input v-model.trim="addParm.state" clearable></el-input>
- </el-form-item>
- <!--城市-->
- <el-form-item label="城市" prop="city">
- <el-input v-model.trim="addParm.city" clearable></el-input>
- </el-form-item>
- <!--地址1-->
- <el-form-item label="地址1" prop="addressline1">
- <el-input v-model.trim="addParm.addressline1" clearable></el-input>
- </el-form-item>
- <!--地址2-->
- <el-form-item label="地址2" prop="addressline2">
- <el-input v-model.trim="addParm.addressline2" clearable></el-input>
- </el-form-item>
- <!--税号-->
- <el-form-item label="税号" prop="vatNumber">
- <el-input v-model.trim="addParm.vatNumber" clearable></el-input>
- </el-form-item>
- <!--邮政编码-->
- <el-form-item label="邮政编码" prop="postalcode">
- <el-input v-model.trim="addParm.postalcode" clearable></el-input>
- </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>
-
- <!--VPN选择弹窗-->
- <el-dialog
- width="75%"
- :visible.sync="dialogVpnVisible"
- :title="dialogVpnTittle"
- center
- append-to-body
- >
- <!-- 搜索VPN -->
- <el-form class="mt_15" ref="form" inline size="small">
- <el-form-item label="所属国家简称">
- <el-input v-model.trim="searchVpnParm.contntryShort" clearable placeholder="所属国家简称"></el-input>
- </el-form-item>
- <el-form-item label="IP地址">
- <el-input v-model.trim="searchVpnParm.ipAddress" clearable placeholder="IP地址"></el-input>
- </el-form-item>
- <el-form-item label="父ip地址">
- <el-input v-model.trim="searchVpnParm.parentIpAddress" clearable placeholder="父ip地址"></el-input>
- </el-form-item>
- <el-form-item label="端口">
- <el-input v-model.trim="searchVpnParm.port" clearable placeholder="端口"></el-input>
- </el-form-item>
- <el-form-item label="名称">
- <el-input v-model.trim="searchVpnParm.name" clearable placeholder="名称"></el-input>
- </el-form-item>
- <el-form-item label="密码">
- <el-input v-model.trim="searchVpnParm.pwd" clearable placeholder="密码"></el-input>
- </el-form-item>
- <el-form-item label="mac地址">
- <el-input v-model.trim="searchVpnParm.mac" clearable placeholder="mac地址"></el-input>
- </el-form-item>
- <el-form-item label="VPS类型">
- <el-select v-model.trim="searchVpnParm.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="searchVpnParm.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="searchVpnParm.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="goSearchVpn">搜索</el-button>
- <el-button type="warning" @click="resetVpnForm">重置</el-button>
- </el-form-item>
- </el-form>
- <!--表格渲染-->
- <el-table
- ref="table"
- border
- size="small"
- :data="vpnList"
- :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 | getVpnVpsType}}</template>
- </el-table-column>
- <el-table-column label="经销商" prop="dealer">
- <template slot-scope="scope">{{ scope.row.dealer | getVpnDealer}}</template>
- </el-table-column>
- <el-table-column label="mac地址" prop="mac" />
- <el-table-column label="状态" prop="status">
- <template slot-scope="scope">{{ scope.row.status | getVpnStatus}}</template>
- </el-table-column>
- <el-table-column label="创建时间" prop="createdAt" />
- <el-table-column label="修改时间" prop="updatedAt" />
- <el-table-column label="操作">
- <template slot-scope="scope">
- <el-button type="success" @click="getVpnIpById(scope.row)">选中</el-button>
- </template>
- </el-table-column>
- </el-table>
- <!--分页-->
- <div class="mt_15">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="searchVpnParm.page"
- :page-sizes="[10, 20, 30, 40, 50]"
- :page-size="searchVpnParm.pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="vpnTotal"
- ></el-pagination>
- </div>
- </el-dialog>
-
- <!--信用卡选择弹窗-->
- <el-dialog
- width="75%"
- :visible.sync="dialogCardVisible"
- :title="dialogCardTittle"
- center
- append-to-body
- >
- <!--搜索信用卡-->
- <el-form class="mt_15" ref="form" inline size="small">
- <el-form-item label="卡号">
- <el-input v-model.trim="searchCardParm.number" clearable placeholder="账号"></el-input>
- </el-form-item>
- <el-form-item label="PIN">
- <el-input v-model.trim="searchCardParm.pinNumber" clearable></el-input>
- </el-form-item>
- <el-form-item label="持卡人名称">
- <el-input v-model.trim="searchCardParm.holderName" clearable></el-input>
- </el-form-item>
- <el-form-item label="类型">
- <el-select v-model.trim="searchCardParm.type" placeholder="请选择">
- <el-option
- v-for="item in typeCardList"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="卡商">
- <el-select v-model.trim="searchCardParm.cardDealer" placeholder="请选择">
- <el-option
- v-for="item in dealerCardList"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="状态">
- <el-select v-model.trim="searchCardParm.status" placeholder="请选择">
- <el-option
- v-for="item in statusCardList"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="goSearchCard">搜索</el-button>
- <el-button type="warning" @click="resetCardForm">重置</el-button>
- </el-form-item>
- </el-form>
- <!--表格渲染-->
- <el-table
- ref="table"
- border
- size="small"
- :data="cardList"
- :header-cell-style="{textAlign:'center'}"
- >
- <el-table-column label="序号" type="index" width="50" align="center" />
- <el-table-column label="卡号" prop="number" align="center" />
- <el-table-column label="PIN码" prop="pinNumber" align="center" />
- <el-table-column label="持卡人姓氏" prop="holderSurname" align="center" />
- <el-table-column label="持卡人名称" prop="holderName" align="center" />
- <el-table-column label="所属厂商" prop="cardDealer" align="center">
- <template slot-scope="scope">{{ scope.row.cardDealer | getCardDealer}}</template>
- </el-table-column>
- <el-table-column label="类型" prop="type" align="center">
- <template slot-scope="scope">{{ scope.row.type | getCardType}}</template>
- </el-table-column>
- <el-table-column label="状态" prop="status" align="center">
- <template slot-scope="scope">{{ scope.row.status | getCardStatus}}</template>
- </el-table-column>
- <el-table-column label="创建时间" prop="createdAt" align="center" />
- <el-table-column label="修改时间" prop="updatedAt" align="center" />
- <el-table-column label="操作" align="center">
- <template slot-scope="scope">
- <el-button type="success" @click="getCardById(scope.row)" align="center">选中</el-button>
- </template>
- </el-table-column>
- </el-table>
- <!--分页-->
- <div class="mt_15">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="searchCardParm.page"
- :page-sizes="[10, 20, 30, 40, 50]"
- :page-size="searchCardParm.pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="cardTotal"
- ></el-pagination>
- </div>
- </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="100px">
- <el-form-item label="账号" prop="account">
- <el-input v-model.trim="editParm.account" clearable></el-input>
- </el-form-item>
- <el-form-item label="昵称" prop="nickName">
- <el-input v-model.trim="editParm.nickName" 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="公司" prop="companyId">
- <el-select v-model.trim="editParm.companyId" placeholder="请选择">
- <el-option
- v-for="item in companys"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="平台" prop="platformId">
- <el-select v-model.trim="editParm.platformId" placeholder="请选择">
- <el-option
- v-for="item in platformList"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <!--国家-->
- <el-form-item label="所属国家" prop="contntryShort">
- <el-input v-model.trim="editParm.contntryShort" clearable></el-input>
- </el-form-item>
- <!--VPN vpnId -->
- <el-input v-model.trim="editParm.vpnId" type="hidden" clearable></el-input>
- <el-form-item label="VPN地址" prop="vpnIp">
- <el-input v-model.trim="editParm.vpnIp" disabled style="width:230px"></el-input>
- <el-button
- type="primary"
- icon="el-icon-search"
- @click="goSearchVpn"
- style="width:130px"
- >请选择VPN</el-button>
- </el-form-item>
- <!--信用卡ID cardId -->
- <el-input v-model.trim="editParm.cardId" type="hidden" clearable></el-input>
- <el-form-item label="信用卡号" prop="cardNumber">
- <el-input v-model.trim="editParm.cardNumber" disabled style="width:230px"></el-input>
- <el-button
- type="primary"
- icon="el-icon-search"
- @click="goSearchCard"
- style="width:130px"
- >请选择信用卡</el-button>
- </el-form-item>
- <!--用户等级 level -->
- <el-form-item label="用户等级" prop="level">
- <el-select v-model.trim="editParm.level" placeholder="请选择">
- <el-option
- v-for="item in levelList"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <!--占用状态 occupyStatus -->
- <el-form-item label="占用状态" prop="occupyStatus">
- <el-select v-model.trim="editParm.occupyStatus" placeholder="请选择">
- <el-option
- v-for="item in occupyStatusList"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <!--状态 status -->
- <el-form-item label="状态" prop="status">
- <el-select v-model.trim="editParm.status" placeholder="请选择">
- <el-option
- v-for="item in statusList"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <!-- ********地址相关信息******** -->
- <!--firstname-->
- <el-form-item label="firstname" prop="firstname">
- <el-input v-model.trim="editParm.firstname" clearable></el-input>
- </el-form-item>
- <!--lastname-->
- <el-form-item label="lastname" prop="lastname">
- <el-input v-model.trim="editParm.lastname" clearable></el-input>
- </el-form-item>
- <!--电话-->
- <el-form-item label="电话" prop="tel">
- <el-input v-model.trim="editParm.tel" clearable></el-input>
- </el-form-item>
- <!--国家-->
- <el-form-item label="国家" prop="country">
- <el-input v-model.trim="editParm.country" clearable></el-input>
- </el-form-item>
- <!--州-->
- <el-form-item label="州" prop="state">
- <el-input v-model.trim="editParm.state" clearable></el-input>
- </el-form-item>
- <!--城市-->
- <el-form-item label="城市" prop="city">
- <el-input v-model.trim="editParm.city" clearable></el-input>
- </el-form-item>
- <!--地址1-->
- <el-form-item label="地址1" prop="addressline1">
- <el-input v-model.trim="editParm.addressline1" clearable></el-input>
- </el-form-item>
- <!--地址2-->
- <el-form-item label="地址2" prop="addressline2">
- <el-input v-model.trim="editParm.addressline2" clearable></el-input>
- </el-form-item>
- <!--税号-->
- <el-form-item label="税号" prop="vatNumber">
- <el-input v-model.trim="editParm.vatNumber" clearable></el-input>
- </el-form-item>
- <!--邮政编码-->
- <el-form-item label="邮政编码" prop="postalcode">
- <el-input v-model.trim="editParm.postalcode" clearable></el-input>
- </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="120px">
- <el-form-item label="账号" prop="account">
- <el-input v-model.trim="detailParm.account" :disabled="true"></el-input>
- </el-form-item>
- <el-form-item label="昵称" prop="nickName">
- <el-input v-model.trim="detailParm.nickName" :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="公司" prop="companyId">
- <el-select v-model.trim="detailParm.companyId" disabled placeholder="请选择">
- <el-option
- v-for="item in companys"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="平台" prop="platformId">
- <el-select v-model.trim="detailParm.platformId" disabled placeholder="请选择">
- <el-option
- v-for="item in platformList"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
-
- <!--国家-->
- <el-form-item label="国家" prop="contntryShort">
- <el-input v-model.trim="detailParm.contntryShort" disabled clearable></el-input>
- </el-form-item>
- <!--VPN vpnId -->
- <el-form-item label="VPNIP" prop="vpnIp">
- <el-input v-model.trim="detailParm.vpnIp" disabled clearable></el-input>
- </el-form-item>
- <!--信用卡ID cardId -->
- <el-form-item label="信用卡卡号" prop="cardNumber">
- <el-input v-model.trim="detailParm.cardNumber" disabled clearable></el-input>
- </el-form-item>
- <!--用户等级 level -->
- <el-form-item label="用户等级" prop="level">
- <el-select v-model.trim="detailParm.level" disabled placeholder="请选择">
- <el-option
- v-for="item in levelList"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <!--占用状态 occupyStatus -->
- <el-form-item label="占用状态" prop="occupyStatus">
- <el-select v-model.trim="detailParm.occupyStatus" disabled placeholder="请选择">
- <el-option
- v-for="item in occupyStatusList"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <!--状态 status -->
- <el-form-item label="状态" prop="status">
- <el-select v-model.trim="detailParm.status" disabled placeholder="请选择">
- <el-option
- v-for="item in statusList"
- :key="item.name"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <!--占用账户-->
- <el-form-item label="占用账户" prop="occupyAccount">
- <el-input v-model.trim="detailParm.occupyAccount" :disabled="true" clearable></el-input>
- </el-form-item>
- <!--账户余额-->
- <el-form-item label="账户余额" prop="balance">
- <el-input v-model.trim="detailParm.balance" :disabled="true" clearable></el-input>
- </el-form-item>
- <!--购买总金额-->
- <el-form-item label="账户购买总金额" prop="buyTotalMoney">
- <el-input v-model.trim="detailParm.buyTotalMoney" :disabled="true" clearable></el-input>
- </el-form-item>
- <!--地址1-->
- <el-form-item label="地址1" prop="addressline1">
- <el-input v-model.trim="detailParm.addressline1" :disabled="true" clearable></el-input>
- </el-form-item>
- <!--国家-->
- <el-form-item label="国家" prop="country">
- <el-input v-model.trim="detailParm.country" :disabled="true" clearable></el-input>
- </el-form-item>
- <!--州-->
- <el-form-item label="州" prop="state">
- <el-input v-model.trim="detailParm.state" :disabled="true" clearable></el-input>
- </el-form-item>
- <!--电话-->
- <el-form-item label="电话" prop="tel">
- <el-input v-model.trim="detailParm.tel" :disabled="true" clearable></el-input>
- </el-form-item>
- <!--lastname-->
- <el-form-item label="lastname" prop="lastname">
- <el-input v-model.trim="detailParm.lastname" :disabled="true" clearable></el-input>
- </el-form-item>
- <!--税号-->
- <el-form-item label="税号" prop="vatNumber">
- <el-input v-model.trim="detailParm.vatNumber" :disabled="true" clearable></el-input>
- </el-form-item>
- <!--城市-->
- <el-form-item label="城市" prop="city">
- <el-input v-model.trim="detailParm.city" :disabled="true" clearable></el-input>
- </el-form-item>
- <!--地址2-->
- <el-form-item label="地址2" prop="addressline2">
- <el-input v-model.trim="detailParm.addressline2" :disabled="true" clearable></el-input>
- </el-form-item>
- <!--firstname-->
- <el-form-item label="firstname" prop="firstname">
- <el-input v-model.trim="detailParm.firstname" :disabled="true" clearable></el-input>
- </el-form-item>
- <!--邮政编码-->
- <el-form-item label="邮政编码" prop="postalcode">
- <el-input v-model.trim="detailParm.postalcode" :disabled="true" clearable></el-input>
- </el-form-item>
- </el-form>
- </div>
- </el-dialog>
-
- <!--买家导入 importBtn-->
- <el-dialog :visible.sync="dialogImportVisible" :title="dialogImportTitle" center width="23%">
- <div class="dialog-content">
- <el-upload
- class="upload-demo"
- drag
- ref="upload"
- :headers="uploadHeaders"
- :action="uploadFileUrl"
- :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 {
- add,
- editById,
- delById,
- getList,
- getById,
- getVpnList,
- getCardList
- } from "@/api/group/buyer";
- import { getAll } from "@/api/group/company";
- export default {
- filters: {
- getStatus: function(value) {
- if (value == 1) {
- return "待注册";
- } else if (value == 2) {
- return "待验证";
- } else if (value == 3) {
- return "待完善";
- } else if (value == 4) {
- return "正常";
- } else if (value == 5) {
- return "异常";
- } else if (value == 6) {
- return "可用但已用";
- } else {
- return "删除";
- }
- },
- getVpnVpsType: function(value) {
- if (value == 1) {
- return "传统";
- }
- },
- getVpnDealer: function(value) {
- if (value == 1) {
- return "V2";
- }
- },
- getVpnStatus: function(value) {
- if (value == 1) {
- return "可用";
- } else if (value == 2) {
- return "禁用";
- }
- },
- getCardStatus: function(value) {
- if (value == 1) {
- return "正常";
- } else if (value == 2) {
- return "异常";
- } else {
- return "删除";
- }
- },
- getCardType: function(value) {
- if (value == 1) {
- return "Payoneer";
- } else if (value == 2) {
- return "万事达虚拟卡";
- } else {
- return "Visa信用卡";
- }
- },
- getCardDealer: function(value) {
- if (value == 1) {
- return "AmzKeys";
- } else {
- return "Airwallex";
- }
- }
- },
- // 数据
- data() {
- return {
- searchParm: {
- page: 1,
- pageSize: 10,
- account: null,
- sort: "created_at",
- order: "desc",
- nickName: null,
- pwd: null,
- companyId: null,
- platformId: null
- },
- searchVpnParm: {
- 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
- },
- searchCardParm: {
- page: 1,
- pageSize: 10,
- sort: "created_at",
- order: "desc",
- cardDealer: "",
- type: "",
- status: "",
- holderName: null,
- number: null,
- pinNumber: null
- },
- total: 0,
- vpnTotal: 0,
- cardTotal: 0,
- list: [],
- vpnList: [],
- cardList: [],
- dialogAddVisible: false,
- dialogAddTitle: "新增",
- dialogDetailVisible: false,
- dialogDetailTitle: "详情",
- dialogEditVisible: false,
- dialogEditTitle: "修改",
- dialogImportVisible: false,
- dialogImportTitle: "导入",
- dialogVpnTittle: "VPN列表",
- dialogVpnVisible: false,
- dialogCardTittle: "信用卡列表",
- dialogCardVisible: false,
- uploadHeaders:{ Authorization: this.$store.getters.token },
- uploadFileUrl: process.env.VUE_APP_BASE_API + "/api/ctBuyer/import",
- tempUrl: process.env.VUE_APP_BASE_API + "/api/ctBuyer/exportTemp",
- companys: [],
- addDialog: true,
- //买家表格:0 ;VPN表格:1 ;Card表格:2
- handleType: 0,
- platformList: [
- {
- id: 1,
- name: "敦煌"
- },
- {
- id: 2,
- name: "速卖通"
- },
- {
- id: 3,
- name: "马帮"
- }
- ],
- statusList: [
- {
- id: 1,
- name: "待注册"
- },
- {
- id: 2,
- name: "待验证"
- },
- {
- id: 3,
- name: "待完善"
- },
- {
- id: 4,
- name: "正常"
- },
- {
- id: 5,
- name: "异常"
- },
- {
- id: 6,
- name: "可用但已用"
- },
- {
- id: 7,
- name: "删除"
- }
- ],
- occupyStatusList: [
- {
- id: 1,
- name: "已占用"
- },
- {
- id: 2,
- name: "未占用"
- }
- ],
- levelList: [
- {
- id: 1,
- name: "普通"
- },
- {
- id: 2,
- name: "精品"
- },
- {
- id: 3,
- name: "压力"
- },
- {
- id: 4,
- name: "内部账号"
- }
- ],
- searchVpsTypeList: [
- {
- value: null,
- label: "全部"
- },
- {
- value: 1,
- label: "传统"
- }
- ],
- searchDealerList: [
- {
- value: null,
- label: "全部"
- },
- {
- value: 1,
- label: "V2"
- }
- ],
- searchStatusList: [
- {
- value: null,
- label: "全部"
- },
- {
- value: 1,
- label: "可用"
- },
- {
- value: 2,
- label: "禁用"
- }
- ],
- typeCardList: [
- {
- id: null,
- name: "全部"
- },
- {
- id: 1,
- name: "Payoneer"
- },
- {
- id: 2,
- name: "万事达虚拟卡"
- },
- {
- id: 3,
- name: "Visa信用卡"
- }
- ],
- dealerCardList: [
- {
- id: null,
- name: "全部"
- },
- {
- id: 1,
- name: "AmzKeys"
- },
- {
- id: 2,
- name: "Airwallex"
- }
- ],
- statusCardList: [
- {
- id: null,
- name: "全部"
- },
- {
- id: 1,
- name: "正常"
- },
- {
- id: 2,
- name: "异常"
- },
- {
- id: 3,
- name: "删除"
- }
- ],
- addParm: {
- id: null,
- nickName: "",
- pwd: "",
- account: "",
- companyId: null,
- platformId: null,
- vpnId: null,
- vpnIp: "",
- cardId: null,
- cardNumber: "",
- level: null,
- occupyStatus: null,
- addressline1: "",
- country: "",
- tel: "",
- lastname: "",
- vatNumber: "",
- city: "",
- addressline2: "",
- firstname: "",
- postalcode: "",
- status: null
- },
- detailParm: {
- id: null,
- nickName: "",
- pwd: "",
- account: "",
- companyId: null,
- platformId: null,
- contntryShort: "",
- vpnId: null,
- vpnIp: "",
- cardId: null,
- cardNumber: "",
- level: null,
- occupyStatus: null,
- addressline1: "",
- country: "",
- state: "",
- tel: "",
- lastname: "",
- vatNumber: "",
- city: "",
- addressline2: "",
- firstname: "",
- postalcode: "",
- status: null
- },
- editParm: {
- id: null,
- nickName: "",
- pwd: "",
- account: "",
- companyId: null,
- platformId: null,
- contntryShort: "",
- vpnId: null,
- vpnIp: "",
- cardId: null,
- cardNumber: "",
- level: null,
- occupyStatus: null,
- addressline1: "",
- country: "",
- state: "",
- tel: "",
- lastname: "",
- vatNumber: "",
- city: "",
- addressline2: "",
- firstname: "",
- postalcode: "",
- status: null
- },
- rules: {
- pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
- nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
- account: [{ required: true, message: "请输入账号", trigger: "blur" }],
- companyId: [{ required: true, message: "请选择公司", trigger: "blur" }],
- platformId: [
- { required: true, message: "请选择平台", trigger: "blur" }
- ],
- contntryShort: [
- { required: true, message: "请输入所属国家", trigger: "blur" }
- ],
- vpnIp: [{ required: true, message: "请选择VPN地址", trigger: "blur" }],
- // cardNumber: [
- // { required: true, message: "请选择信用卡号", trigger: "blur" }
- // ],
- level: [{ required: true, message: "请选择用户等级", trigger: "blur" }],
- occupyStatus: [
- { required: true, message: "请选择占用状态", trigger: "blur" }
- ],
- status: [{ required: true, message: "请选择状态", trigger: "blur" }],
- addressline1: [
- { required: true, message: "请输入地址1", trigger: "blur" }
- ],
- country: [{ required: true, message: "请输入国家", trigger: "blur" }],
- state: [{ required: true, message: "请输入州", trigger: "blur" }],
- tel: [{ required: true, message: "请输入电话", trigger: "blur" }],
- lastname: [
- { required: true, message: "请输入lastname", trigger: "blur" }
- ],
- city: [{ required: true, message: "请输入城市", trigger: "blur" }],
- firstname: [
- { required: true, message: "请输入firstname", trigger: "blur" }
- ],
- postalcode: [
- { required: true, message: "请输入邮政编码", trigger: "blur" }
- ]
- }
- };
- },
- // 调用
- created() {
- this.goSearch();
- },
- //方法
- methods: {
- resetForm() {
- this.searchParm.account = null;
- this.searchParm.pwd = null;
- this.searchParm.nickName = null;
- this.searchParm.companyId = null;
- this.searchParm.platformId = null;
- this.goSearch();
- },
- //重置vpn列表
- resetVpnForm() {
- this.searchVpnParm.contntryShort = null;
- this.searchVpnParm.ipAddress = null;
- this.searchVpnParm.parentIpAddress = null;
- this.searchVpnParm.port = null;
- this.searchVpnParm.name = null;
- this.searchVpnParm.pwd = null;
- this.searchVpnParm.vpsType = null;
- this.searchVpnParm.dealer = null;
- this.searchVpnParm.mac = null;
- this.searchVpnParm.status = null;
- this.goSearchVpn();
- },
- //重置
- resetCardForm() {
- this.searchCardParm.cardDealer = null;
- this.searchCardParm.cardDealer = "";
- this.searchCardParm.type = "";
- this.searchCardParm.status = "";
- this.searchCardParm.holderName = null;
- this.searchCardParm.number = null;
- this.searchCardParm.pinNumber = null;
- this.goSearchCard();
- },
- // 查询
- goSearch() {
- this.searchParm.page = 1;
- this.getCompanyAll();
- this.getDataList();
- },
- goSearchVpn() {
- this.dialogVpnVisible = true;
- this.searchVpnParm.page = 1;
- this.handleType = 1;
- this.getVpnDataList();
- },
- goSearchCard() {
- this.dialogCardVisible = true;
- this.searchCardParm.page = 1;
- this.handleType = 2;
- this.getCardDataList();
- },
- // 获取所有公司信息
- getCompanyAll() {
- getAll()
- .then(res => {
- this.companys = res.data;
- if (res.code == 200) {
- console.log(this.companys);
- }
- })
- .catch(() => {});
- },
- // 导入
- importBtn() {
- this.dialogImportVisible = true;
- },
- //导入成功
- uploadSuccess(res, file) {
- this.dialogImportVisible = false;
- if (res.code == 200) {
- console.log("SHDJSHDJSHDJSHDJSH" + res.data);
- if (res.data == true) {
- this.$message.success("导入成功!");
- } else {
- window.location.href = res.data;
- this.$message.error("导入失败!");
- }
- }
- this.goSearch();
- },
- //excel模板导出
- exportTempBtn() {
- console.log(this.tempUrl);
- window.location.href = this.tempUrl;
- },
- beforeAvatarUpload(file) {
- console.log("uploadFileUrl=" + this.uploadFileUrl);
- console.log(file);
- const isLt10M = file.size / 1024 / 1024 < 10;
- if (!isLt10M) {
- this.$message.error("上传Excel文件大小不能超过 10MB!");
- }
- return isLt10M;
- },
- // 新增
- addBtn() {
- this.addParm = {
- id: null,
- nickName: "",
- pwd: "",
- account: "",
- companyId: null,
- platformId: null,
- platformName: "",
- vpnId: null,
- cardId: null,
- level: null,
- occupyStatus: null,
- addressline1: "",
- country: "",
- tel: "",
- lastname: "",
- vatNumber: "",
- city: "",
- addressline2: "",
- firstname: "",
- postalcode: "",
- status: null
- };
- this.addDialog = true;
- 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.nickName = res.data.nickName;
- this.editParm.pwd = res.data.pwd;
- this.editParm.account = res.data.account;
- this.editParm.companyId = res.data.companyId;
- this.editParm.platformId = res.data.platformId;
- this.editParm.contntryShort = res.data.contntryShort;
- this.editParm.vpnId = res.data.vpnId;
- this.editParm.vpnIp = res.data.ipAddress;
- this.editParm.cardId = res.data.cardId;
- this.editParm.cardNumber = data.number;
- this.editParm.level = res.data.level;
- this.editParm.occupyStatus = res.data.occupyStatus;
- this.editParm.addressline1 = res.data.addressline1;
- this.editParm.country = res.data.country;
- this.editParm.state = res.data.state;
- this.editParm.tel = res.data.tel;
- this.editParm.lastname = res.data.lastname;
- this.editParm.vatNumber = res.data.vatNumber;
- this.editParm.city = res.data.city;
- this.editParm.addressline2 = res.data.addressline2;
- this.editParm.firstname = res.data.firstname;
- this.editParm.postalcode = res.data.postalcode;
- this.editParm.status = res.data.status;
-
- this.addDialog = false;
- this.dialogEditVisible = true;
- this.$refs.editParm.clearValidate();
- }
- })
- .catch(err => {
- console.log(err);
- });
- },
- // 确认修改
- sureEdit(editParm) {
- this.$refs[editParm].validate((valid) => {
- if (valid) {
- this.$refs.editParm.clearValidate();
- editById(this.editParm)
- .then(res => {
- if (res.code == 200) {
- this.dialogEditVisible = false;
- this.$message.success("修改成功!");
- this.getDataList();
- }
- })
- .catch(err => {
- console.log(err);
- });
- } else {
- console.log('error submit!!');
- return false;
- }
- });
- },
- sureEditCancle(editParm) {
- this.dialogEditVisible=flase
- this.$refs.editParm.clearValidate();
- },
- // 确认新增
- sureAdd(addParm) {
- this.$refs[addParm].validate((valid) => {
- if (valid) {
- this.$refs.addParm.clearValidate();
- add(this.addParm)
- .then(res => {
- if (res.code == 200) {
- console.log(this.addParm);
- this.dialogAddVisible = false;
- this.$message.success("新增成功!");
- this.getDataList();
- }
- })
- .catch(err => {
- console.log(err);
- });
- } else {
- console.log('error submit!!');
- return false;
- }
- });
- },
- sureAddCancle(addParm) {
- this.dialogAddVisible=flase
- this.$refs.addParm.clearValidate();
- },
- // 查看根据id
- getBtnById(id) {
- getById({ id })
- .then(res => {
- if (res.code == 200) {
- this.detailParm.id = res.data.id;
- this.detailParm.nickName = res.data.nickName;
- this.detailParm.pwd = res.data.pwd;
- this.detailParm.account = res.data.account;
- this.detailParm.companyId = res.data.companyId;
- this.detailParm.platformId = res.data.platformId;
- this.detailParm.contntryShort = res.data.contntryShort;
- this.detailParm.vpnId = res.data.vpnId;
- this.detailParm.vpnIp = res.data.ipAddress;
- this.detailParm.cardNumber = res.data.number;
- this.detailParm.cardId = res.data.cardId;
- this.detailParm.level = res.data.level;
- this.detailParm.occupyStatus = res.data.occupyStatus;
- this.detailParm.occupyAccount = res.data.occupyAccount;
- this.detailParm.balance = res.data.balance;
- this.detailParm.buyTotalMoney = res.data.buyTotalMoney;
- this.detailParm.addressline1 = res.data.addressline1;
- this.detailParm.country = res.data.country;
- this.detailParm.state = res.data.state;
- this.detailParm.tel = res.data.tel;
- this.detailParm.lastname = res.data.lastname;
- this.detailParm.vatNumber = res.data.vatNumber;
- this.detailParm.city = res.data.city;
- this.detailParm.addressline2 = res.data.addressline2;
- this.detailParm.firstname = res.data.firstname;
- this.detailParm.postalcode = res.data.postalcode;
- this.detailParm.status = res.data.status;
-
- this.dialogDetailVisible = true;
- }
- })
- .catch(err => {
- console.log(err);
- });
- },
- getVpnIpById(data) {
- if (this.addDialog == true) {
- this.addParm.vpnIp = data.ipAddress;
- this.addParm.vpnId = data.id;
- } else {
- this.editParm.vpnIp = data.ipAddress;
- this.editParm.vpnId = data.id;
- }
- console.log(this.addParm.vpnId);
- this.dialogVpnVisible = false;
- this.$message.success("选择成功");
- },
- getCardById(data) {
- if (this.addDialog == true) {
- this.addParm.cardNumber = data.number;
- this.addParm.cardId = data.id;
- } else {
- this.editParm.cardNumber = data.number;
- this.editParm.cardId = data.id;
- }
-
- this.dialogCardVisible = false;
- this.$message.success("选择成功");
- },
- // 分页获取表格数据
- getDataList() {
- getList(this.searchParm)
- .then(res => {
- if (res.code == 200) {
- this.list = res.data.list;
- this.total = res.data.total;
- }
- })
- .catch(err => {
- console.log(err);
- });
- },
- //获取vpn信息
- getVpnDataList() {
- getVpnList(this.searchVpnParm)
- .then(res => {
- if (res.code == 200) {
- this.vpnList = res.data.list;
- this.vpnTotal = res.data.total;
- }
- })
- .catch(err => {
- console.log(err);
- });
- },
- //获取信用卡信息
- getCardDataList() {
- getCardList(this.searchCardParm)
- .then(res => {
- if (res.code == 200) {
- this.cardList = res.data.list;
- this.cardTotal = res.data.total;
- }
- })
- .catch(err => {
- console.log(err);
- });
- },
- // 分页
- handleSizeChange(val) {
- console.log(`每页 ${val} 条`);
- if (this.handleType == 0) {
- this.searchParm.pageSize = val;
- this.getDataList();
- } else if (this.handleType == 1) {
- this.searchVpnParm.pageSize = val;
- this.getVpnDataList();
- } else if (this.handleType == 2) {
- this.searchCardParm.pageSize = val;
- this.getCardDataList();
- }
- },
- handleCurrentChange(val) {
- console.log(`当前页: ${val}`);
- if (this.handleType == 0) {
- this.searchParm.page = val;
- this.getDataList();
- } else if (this.handleType == 1) {
- this.searchVpnParm.page = val;
- this.getVpnDataList();
- } else if (this.handleType == 2) {
- this.searchCardParm.page = val;
- this.getCardDataList();
- }
- }
- }
- };
- </script>
-
- <style rel="stylesheet/scss" lang="scss" scoped>
- </style>
|