eladmin-web/.svn/pristine/6e/6e070056e47792a10a7ddbfca30dab3d60b551f2.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.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>