eladmin-web/.svn/pristine/9b/9bb80e00c1195a93f3372ba72a2334a2f972f39e.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.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>