|
- <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.number" clearable placeholder='账号'></el-input>
- </el-form-item>
- <!--<el-form-item label="PIN">
- <el-input v-model.trim="searchParm.pinNumber" clearable></el-input>
- </el-form-item>-->
- <el-form-item label="持卡人名称">
- <el-input v-model.trim="searchParm.holderName" clearable></el-input>
- </el-form-item>
- <el-form-item label="类型">
- <el-select v-model.trim="searchParm.type" placeholder="请选择">
- <el-option
- v-for="item in typeList"
- :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.cardDealer" placeholder="请选择">
- <el-option
- v-for="item in dealerList"
- :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.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>
- <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'}">
- <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 | getType}}
- </template>
- </el-table-column>
- <el-table-column label="状态" prop="status" align="center">
- <template slot-scope="scope">
- {{ scope.row.status | getStatus}}
- </template>
- </el-table-column>
- <el-table-column label="创建时间" prop="createdAt" align="center"/>
- <el-table-column label="修改时间" prop="updatedAt" align="center"/>
- <el-table-column label="操作" width="270" align="left" >
- <template slot-scope="scope">
- <el-button type="info" @click="getBtnById(scope.row.id)">查看</el-button>
- <el-button type="warning" @click="editById(scope.row)" style="margin-left: 0px">修改</el-button>
- <span v-if="scope.row.status != 2" slot="footer">
- <el-button type="danger" @click="abNormalById(scope.row.id)">异常</el-button>
- </span>
- <span v-if="scope.row.status != 3" slot="footer">
- <el-button type="danger" @click="delById(scope.row.id)">删除</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="number">
- <el-input v-model.trim="addParm.number" clearable></el-input>
- </el-form-item>
- <!--<el-form-item label="PIN码" prop="pinNumber">
- <el-input v-model.trim="addParm.pinNumber" clearable></el-input>
- </el-form-item>-->
- <el-form-item label="持卡人姓氏" prop="holderSurname">
- <el-input v-model.trim="addParm.holderSurname" clearable></el-input>
- </el-form-item>
- <el-form-item label="持卡人名称" prop="holderName">
- <el-input v-model.trim="addParm.holderName" clearable></el-input>
- </el-form-item>
- <el-form-item label="所属国家" prop="contntryShort">
- <el-input v-model.trim="addParm.contntryShort" clearable></el-input>
- </el-form-item>
- <el-form-item label="有效期" prop="termOfValidity">
- <div class="block">
- <el-date-picker
- v-model="addParm.termOfValidity"
- align="right"
- type="date"
- format='yyyy-MM-dd'
- value-format='yyyy-MM-dd'
- placeholder="选择日期"
- :picker-options="pickerOptions">
- </el-date-picker>
- </div>
- </el-form-item>
- <el-form-item label="卡商" prop="cardDealer">
- <el-select v-model.trim="addParm.cardDealer" placeholder="请选择">
- <el-option
- v-for="item in addDealerList"
- :key="item.name"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="类型" prop="type">
- <el-select v-model="addParm.type" placeholder="请选择">
- <el-option
- v-for="item in addTypeList"
- :key="item.name"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- </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="remarks">
- <el-input v-model.trim="addParm.remarks" 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>
-
- <!--导入 importBtn-->
- <el-dialog :visible.sync="dialogImportVisible" :title="dialogImportTitle" center width="22%">
- <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>
-
- <!--修改弹窗-->
- <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="number">
- <el-input v-model.trim="editParm.number" clearable></el-input>
- </el-form-item>
- <!--<el-form-item label="PIN码" prop="pinNumber">
- <el-input v-model.trim="editParm.pinNumber" clearable></el-input>
- </el-form-item>-->
- <el-form-item label="持卡人姓氏" prop="holderSurname">
- <el-input v-model.trim="editParm.holderSurname" clearable></el-input>
- </el-form-item>
- <el-form-item label="持卡人名称" prop="holderName">
- <el-input v-model.trim="editParm.holderName" clearable></el-input>
- </el-form-item>
- <el-form-item label="有效期" prop="termOfValidity">
- <div class="block">
- <el-date-picker
- v-model="editParm.termOfValidity"
- align="right"
- type="date"
- format='yyyy-MM-dd'
- value-format='yyyy-MM-dd'
- placeholder="选择日期"
- :picker-options="pickerOptions">
- </el-date-picker>
- </div>
- </el-form-item>
- <el-form-item label="所属国家" prop="contntryShort">
- <el-input v-model.trim="editParm.contntryShort" clearable></el-input>
- </el-form-item>
-
- <el-form-item label="类型" prop="type">
- <el-select v-model.trim="editParm.type" placeholder="请选择">
- <el-option
- v-for="item in addTypeList"
- :key="item.name"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="厂商" prop="cardDealer">
- <el-select v-model.trim="editParm.cardDealer" placeholder="请选择">
- <el-option
- v-for="item in addDealerList"
- :key="item.name"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- </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="remarks">
- <el-input v-model.trim="editParm.remarks" 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="100px">
- <el-form-item label="卡号" prop="number" >
- <el-input v-model.trim="detailParm.number" :disabled="true"></el-input>
- </el-form-item>
- <!--<el-form-item label="PIN号码" prop="pinNumber">
- <el-input v-model.trim="detailParm.pinNumber" :disabled="true"></el-input>
- </el-form-item>-->
- <el-form-item label="持卡人姓氏" prop="holderSurname">
- <el-input v-model.trim="detailParm.holderSurname" :disabled="true"></el-input>
- </el-form-item>
- <el-form-item label="持卡人名称" prop="holderName">
- <el-input v-model.trim="detailParm.holderName" :disabled="true"></el-input>
- </el-form-item>
- <el-form-item label="有效期" prop="termOfValidity">
- <div class="block">
- <el-date-picker
- v-model="detailParm.termOfValidity"
- align="right"
- type="date"
- placeholder="选择日期"
- :disabled="true"
- :picker-options="pickerOptions">
- </el-date-picker>
- </div>
- </el-form-item>
- <el-form-item label="所属国家" prop="contntryShort">
- <el-input v-model.trim="detailParm.contntryShort" :disabled="true"></el-input>
- </el-form-item>
- <el-form-item label="所属厂商" disabled prop="cardDealer">
- <el-select v-model.trim="detailParm.cardDealer" disabled placeholder="请选择">
- <el-option
- v-for="item in addDealerList"
- :key="item.name"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="类型" disabled prop="type">
- <el-select v-model.trim="detailParm.type" disabled placeholder="请选择">
- <el-option
- v-for="item in addTypeList"
- :key="item.name"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="状态" disabled prop="status">
- <el-select v-model.trim="detailParm.status" disabled placeholder="请选择">
- <el-option
- v-for="item in addStatusList"
- :key="item.name"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="备注" prop="remarks">
- <el-input v-model.trim="detailParm.remarks" :disabled="true"></el-input>
- </el-form-item>
- </el-form>
- </div>
- </el-dialog>
-
- </div>
- </template>
- <script>
- import { add, editById, delById, abMormal, getList, getById, downLoadFile } from '@/api/group/card'
- export default {
- filters: {
- getStatus: function (value) {
- if(value == 1) {
- return '正常';
- } else if (value == 2) {
- return '异常';
- } else {
- return '删除';
- }
- },
- getType: 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,
- sort:'created_at',
- order:'desc',
- cardDealer:'',
- type:'',
- status:'',
- holderName:null,
- number:null
- // pinNumber: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/ctCard/import',
- updateBoolean: false,
- tempUrl: process.env.VUE_APP_BASE_API + '/api/ctCard/exportTemp',
- typeList:[
- {
- id: null,
- name: '全部'
- },
- {
- id: 1,
- name: 'Payoneer'
- },
- {
- id: 2,
- name: '万事达虚拟卡'
- },
- {
- id: 3,
- name: 'Visa信用卡'
- }],
- dealerList:[
- {
- id: null,
- name: '全部'
- },
- {
- id: 1,
- name: 'AmzKeys'
- },
- {
- id: 2,
- name: 'Airwallex'
- }],
- addTypeList:[
- {
- id: 1,
- name: 'Payoneer'
- },
- {
- id: 2,
- name: '万事达虚拟卡'
- },
- {
- id: 3,
- name: 'Visa信用卡'
- }],
- addDealerList:[
- {
- id: 1,
- name: 'AmzKeys'
- },
- {
- id: 2,
- name: 'Airwallex'
- }],
- addStatusList:[
- {
- id: 1,
- name: '正常'
- },
- {
- id: 2,
- name: '异常',
- },
- {
- id: 3,
- name: '删除'
- }],
- statusList:[
- {
- id: null,
- name: '全部'
- },
- {
- id: 1,
- name: '正常'
- },
- {
- id: 2,
- name: '异常',
- },
- {
- id: 3,
- name: '删除'
- }],
- addParm: {
- id: null,
- termOfValidity:null,
- number:'',
- // pinNumber:'',
- holderSurname: '',
- holderName: '',
- contntryShort:'',
- remarks:'',
- type:null,
- cardDealer:null,
- pwd:''
- },
- editParm: {
- id: null,
- number:null,
- // pinNumber:null,
- holderSurname: null,
- holderName: null,
- termOfValidity: null,
- contntryShort: null,
- type:null,
- cardDealer:null,
- remarks:null,
- pwd:null
- },
- detailParm: {
- id: null,
- number:null,
- // pinNumber:null,
- holderName: null,
- holderSurname: null,
- remarks:null,
- status:null,
- type:null,
- cardDealer:null,
- termOfValidity: null
- },
- rules: {
- number: [
- { required: true, message: '请输入信用卡号', trigger: 'blur' },
- {pattern: /^\d{13,19}$/, message: "请输入13-19位信用卡号", trigger: "blur"}
- ],
- // pinNumber: [
- // { required: true, message: '请输入PIN码', trigger: 'blur' },
- // {pattern: /^\d{3}$/, message: "请输入3位PIN码", trigger: "blur"}
- // ],
- holderSurname: [
- {required: true, message: '请输入持卡人姓氏', trigger: 'blur' }
- ],
- holderName: [
- { required: true,message: '请输入持卡人名称', trigger: 'blur' }
- ],
- termOfValidity: [
- { required: true,message: '请选择有效期', trigger: 'blur' }
- ],
- contntryShort: [
- { required: true,message: '请输入所属国家', trigger: 'blur' }
- ],
- type: [
- {required: true, message: '请选择卡商', trigger: 'blur' }
- ],
- cardDealer: [
- { required: true,message: '请选择类型', trigger: 'blur' }
- ],
- pwd: [
- { required: true,message: '请输入密码', trigger: 'blur' }
- ]
- }
-
- }
- },
- // 调用
- created() {
- this.goSearch();
- },
- //方法
- methods: {
- //重置
- resetForm() {
- this.searchParm.cardDealer = null;
- this.searchParm.cardDealer='';
- this.searchParm.type='';
- this.searchParm.status='';
- this.searchParm.holderName=null;
- this.searchParm.number=null;
- // this.searchParm.pinNumber=null;
- this.goSearch()
- },
- // 查询
- goSearch() {
- this.searchParm.page=1
- this.getDataList()
- },
- beforeAvatarUpload(file) {
- console.log(file);
- // const isXlsl = file.type === 'xlsl';
- const isLt10M = file.size / 1024 / 1024 <10;
-
- // if (!isXlsl) {
- // this.$message.error('上传头像图片只能是 xlsl 格式!');
- // }
- if (!isLt10M) {
- this.$message.error('上传头像图片大小不能超过 10MB!');
- }
- // return isXlsl && isLt10M;
- return isLt10M;
- },
- uploadSuccess(res, file) {
- this.dialogImportVisible = false;
- if(res.code==200) {
- console.log(res.data);
- this.$message.success('导入成功!');
-
- if(res.data != null) {
- window.location.href = res.data;
- }
- }
- this.getDataList();
- },
- // 新增
- addBtn(){
- this.addParm = {
- id: null,
- termOfValidity: null,
- number: null,
- // pinNumber: null,
- holderSurname: null,
- holderName: null,
- contntryShort: null,
- remarks: null,
- type:null,
- cardDealer:null,
- pwd: null
- }
- this.dialogAddVisible = true;
- this.$refs.addParm.clearValidate();
- },
- // 导入
- importBtn() {
- this.dialogImportVisible = true
- },
- exportTempBtn() {
- console.log(this.tempUrl)
- window.location.href = this.tempUrl;
- },
- // 根据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('取消删除')
- })
- },
- // 根据id 设置状态异常
- abNormalById(id){
- this.$confirm('确认状态修改为异常?','提示',{
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- abMormal({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.number = res.data.number;
- // this.editParm.pinNumber = res.data.pinNumber;
- this.editParm.holderSurname = res.data.holderSurname;
- this.editParm.holderName = res.data.holderName;
- this.editParm.termOfValidity = res.data.termOfValidity;
- this.editParm.contntryShort = res.data.contntryShort;
- this.editParm.type = res.data.type;
- this.editParm.cardDealer = res.data.cardDealer;
- this.editParm.remarks = res.data.remarks;
- this.editParm.pwd = res.data.pwd;
- 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) {
- 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.holderName = res.data.holderName;
- this.detailParm.holderSurname = res.data.holderSurname;
- this.detailParm.number = res.data.number;
- // this.detailParm.pinNumber = res.data.pinNumber;
- this.detailParm.type = res.data.type;
- this.detailParm.contntryShort = res.data.contntryShort;
- this.detailParm.status = res.data.status;
- this.detailParm.cardDealer = res.data.cardDealer;
- this.detailParm.termOfValidity = res.data.termOfValidity;
- this.dialogDetailVisible = true
-
- }
- }).catch(err => {
- console.log(err)
- })
- },
- // 分页获取表格数据
- 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)
- })
- },
-
- // 分页
- 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>
|