7 changed files with 737 additions and 48 deletions
@ -0,0 +1,117 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
export default { |
|||
|
|||
// 礼包设置
|
|||
|
|||
// 获取礼包列表
|
|||
giftBagListPage: function(data) { |
|||
return request({ |
|||
url: '/lpkgiftbag/giftBagListPage', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
}, |
|||
|
|||
// 获取发放网点列表
|
|||
bankList: function(data) { |
|||
return request({ |
|||
url: '/lpkbank/listAll', |
|||
method: 'get', |
|||
data: data |
|||
}); |
|||
}, |
|||
|
|||
|
|||
// 礼包选择商品时，返回的商品列表
|
|||
getGoods: function(data) { |
|||
return request({ |
|||
url: '/lpkgoods/getGoods', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
}, |
|||
|
|||
|
|||
// 新增、保存礼包
|
|||
saveGiftBag: function(data) { |
|||
return request({ |
|||
url: '/lpkgiftbag/saveGiftBag', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
}, |
|||
|
|||
// 初始化礼包
|
|||
giftBagInit: function(data) { |
|||
return request({ |
|||
url: '/lpkgiftbag/giftBagInit/'+data, |
|||
method: 'get' |
|||
}); |
|||
}, |
|||
|
|||
|
|||
|
|||
|
|||
// 企业卡设置
|
|||
|
|||
// 企业卡发行记录
|
|||
recordListPage: function(data) { |
|||
return request({ |
|||
url: '/empcardbuildrecord/recordListPage', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
}, |
|||
|
|||
// 发行记录详细
|
|||
recordDetails: function(data) { |
|||
return request({ |
|||
url: '/empcard/recordDetails', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
}, |
|||
|
|||
|
|||
// 导出
|
|||
exportExcel: function(data) { |
|||
return request({ |
|||
url: '/empcard/exportExcel', |
|||
method: 'post', |
|||
responseType: 'blob', // 表明返回服务器返回的数据类型
|
|||
data: data, |
|||
headers: { 'Content-Type': 'application/json' } |
|||
}) |
|||
}, |
|||
|
|||
|
|||
// 获取提货卡页面 礼包列表
|
|||
giftBagList: function(data) { |
|||
return request({ |
|||
url: '/lpkgiftbag/giftBagList', |
|||
method: 'get', |
|||
data: data |
|||
}); |
|||
}, |
|||
|
|||
// 发行企业卡
|
|||
generateCard: function(data) { |
|||
return request({ |
|||
url: '/empcard/generateCard', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
}, |
|||
|
|||
// 发放提货卡
|
|||
cardGrant: function(data) { |
|||
return request({ |
|||
url: '/lpkgiftcard/cardGrant', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
}, |
|||
|
|||
} |
|||
|
|||
@ -0,0 +1,563 @@ |
|||
<template> |
|||
<div> |
|||
<el-tabs v-model="activeName" class="my-tabs" type="card" @tab-click="handleClick" style="margin-top: 20px;"> |
|||
|
|||
<el-tab-pane label="企业卡记录" name="roleList"> |
|||
<div class="main-content"> |
|||
<div class="container" v-show="viewState == 1"> |
|||
<div class="tab-header"> |
|||
<el-form :inline="true" :model="page.params" class="demo-form-inline"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="21"> |
|||
<el-form-item label="发行开始日期"> |
|||
<el-date-picker v-model="page.params.startDate" @change="selectTime1" |
|||
type="date" placeholder="选择日期" format="yyyy-MM-dd" |
|||
value-format="yyyy-MM-dd" style="width: 200px;"> |
|||
</el-date-picker> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="发行结束日期"> |
|||
<el-date-picker v-model="page.params.endDate" @change="selectTime2" |
|||
type="date" placeholder="选择日期" format="yyyy-MM-dd" |
|||
value-format="yyyy-MM-dd" style="width: 200px;"> |
|||
</el-date-picker> |
|||
|
|||
</el-form-item> |
|||
<el-button type="primary" @click="getPageList()">查 询</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<el-table :data="tableData" border style="width: 100%; margin-top: 20px;" |
|||
:row-style="{height: '40px'}"> |
|||
<el-table-column label="序号" width="70px" type="index" align="center"> |
|||
</el-table-column> |
|||
<el-table-column label="操作" width="150px" align="center"> |
|||
<template slot-scope="scope"> |
|||
<!-- <el-button type="primary" size="mini" @click="editRow(scope.row)"> |
|||
发放 |
|||
</el-button> --> |
|||
<el-button type="primary" size="mini" @click="showRow(scope.row)"> |
|||
明细 |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="startNumber" label="序列起始号" align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="endNumber" label="序列结束号" align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="buildDate" label="发行时间" align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="countNumber" label="发行总数" align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="bagName" label="绑定礼包" align="center"> |
|||
</el-table-column> |
|||
<!-- <el-table-column prop="bagName" label="发放数量" align="center"> |
|||
</el-table-column> --> |
|||
</el-table> |
|||
|
|||
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" |
|||
@pagination="pagination" style="padding-bottom: 100px;" /> |
|||
</div> |
|||
|
|||
<div class="container" v-show="viewState == 2"> |
|||
<div class="tab-header"> |
|||
<el-form :inline="true" :model="listQuery.params" class="demo-form-inline"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="20"> |
|||
<el-form-item label="卡片序列号"> |
|||
<el-input v-model="listQuery.params.number" placeholder="" clearable /> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="卡片状态"> |
|||
<el-select v-model="listQuery.params.state" placeholder="请选择"> |
|||
<el-option v-for="(item,i) in stateList" :key="i" :label="item.name" |
|||
:value="item.sid"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
</el-form-item> |
|||
<el-button type="primary" @click="getPageList2()">查 询</el-button> |
|||
<el-button type="primary" @click="returnView()">返 回</el-button> |
|||
</el-col> |
|||
<el-col :span="4"> |
|||
<el-form-item style="float: right;"> |
|||
<div |
|||
style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;"> |
|||
<el-button type="primary" @click="exportExcel()">导出Excel</el-button> |
|||
<el-button type="primary" @click="downloadQR()" |
|||
style="margin-left: 10px;">下载二维码</el-button> |
|||
</div> |
|||
|
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<el-table :data="tableData2" border style="width: 100%; margin-top: 20px;" |
|||
:row-style="{height: '40px'}"> |
|||
<el-table-column label="序号" width="70px" type="index" align="center"> |
|||
</el-table-column> |
|||
<!-- <el-table-column label="操作" width="150px" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="primary" size="mini" @click="editRow(scope.row)"> |
|||
明细 |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> --> |
|||
<el-table-column prop="serialNumber" label="序列号" align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="code" label="卡号" align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="codeKey" label="秘钥" align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="state" label="卡片状态" align="center"> |
|||
</el-table-column> |
|||
<!-- <el-table-column prop="name" label="发放时间" align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="buildDate" label="发放网点" align="center"> |
|||
</el-table-column> --> |
|||
|
|||
</el-table> |
|||
|
|||
<pagination :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" |
|||
@pagination="pagination2" style="padding-bottom: 100px;" /> |
|||
</div> |
|||
</div> |
|||
</el-tab-pane> |
|||
|
|||
<el-tab-pane label="发行企业卡" name="addrole"> |
|||
|
|||
<div class="listconadd"> |
|||
|
|||
<el-card class="box-card"> |
|||
<div class="item"> |
|||
<span class="item_text">区域编码：</span> |
|||
<el-input v-model="formobj.cardArea" placeholder="" class="item_input" |
|||
oninput="value=value.replace(/[^0-9]/g,'')" maxlength="2" clearable /> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item_text">券卡数量：</span> |
|||
<el-input v-model="formobj.num" placeholder="" class="item_input" |
|||
oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" clearable /> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item_text">选择礼包：</span> |
|||
<el-select v-model="formobj.giftbagSid" filterable class="item_input" clearable |
|||
placeholder="请选择" style="width:100%" @change="giftPackSelect"> |
|||
<el-option v-for="item in giftPackList" :key="item.sid" :label="item.name" |
|||
:value="item.sid"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div |
|||
style="width: 100%;display: flex;flex-direction: row;justify-content: center;margin-top: 20px;"> |
|||
<span |
|||
style="background: #018AD2; color: #fff;padding: 5px 15px;border-radius: 5px;font-size: 16px;" |
|||
@click="saveOrUpdate">发行</span> |
|||
</div> |
|||
|
|||
|
|||
|
|||
</el-card> |
|||
|
|||
</div> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
|
|||
<el-dialog title="发放信息" :visible.sync="editDialog" width="30%" :before-close="banClose"> |
|||
<table class="e-table" cellspacing="0"> |
|||
<tr> |
|||
<td>起始序列号</td> |
|||
<td> <!-- @change="changeParentSid" --> |
|||
<el-input v-model="from.start" style="width:100%" oninput="value=value.replace(/[^0-9]/g,'')" |
|||
@input="input1"></el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>结束序列号</td> |
|||
<td> |
|||
<el-input v-model="from.end" style="width:100%" oninput="value=value.replace(/[^0-9]/g,'')" |
|||
@input="input2"></el-input> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>发放网点</td> |
|||
<td> |
|||
<el-select v-model="from.bankSid" filterable clearable placeholder="请选择" style="width:100%" |
|||
@change="bankSelect"> |
|||
<el-option v-for="item in bankList" :key="item.sid" :label="item.name" :value="item.sid"> |
|||
</el-option> |
|||
</el-select> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<div style="margin-top: 20px; text-align: center;"> |
|||
<el-button type="primary" @click="save()">保 存</el-button> |
|||
<el-button @click="banClose">关 闭</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from '@/api/corporateCardSet/corporateCardSet.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
viewState: 1, |
|||
page: { |
|||
total: 0, // 默认数据总数 |
|||
current: 1, // 默认开始页面 |
|||
size: 10, // 每页的数据条数 |
|||
params: { |
|||
startDate: '', |
|||
endDate: '', |
|||
}, |
|||
}, |
|||
tableData: [], |
|||
tableData2: [], |
|||
listQuery: { |
|||
total: 0, // 默认数据总数 |
|||
current: 1, // 默认开始页面 |
|||
size: 10, // 每页的数据条数 |
|||
params: { |
|||
sid: "", |
|||
number: '', |
|||
state: '', |
|||
}, |
|||
}, |
|||
|
|||
activeName: 'roleList', |
|||
formobj: { |
|||
cardArea: "", |
|||
num: '', |
|||
giftbagSid: "" |
|||
}, |
|||
giftPackList: [], |
|||
stateList: [{ |
|||
name: "全部", |
|||
sid: "" |
|||
}, { |
|||
name: "未绑定用户", |
|||
sid: "2" |
|||
} |
|||
], |
|||
recordId: '', |
|||
editDialog: false, |
|||
from: { |
|||
start: "", |
|||
end: "", |
|||
bankSid: "" |
|||
}, |
|||
bankList: [] |
|||
} |
|||
}, |
|||
created() { |
|||
this.getPageList() |
|||
this.getBankList() |
|||
}, |
|||
methods: { |
|||
|
|||
handleClick(tab, event) { |
|||
this.viewState = 1 |
|||
|
|||
this.listQuery = { |
|||
total: 0, // 默认数据总数 |
|||
current: 1, // 默认开始页面 |
|||
size: 10, // 每页的数据条数 |
|||
params: { |
|||
sid: "", |
|||
number: '', |
|||
state: '', |
|||
}, |
|||
} |
|||
|
|||
if (tab.name == 'addrole') { |
|||
this.giftBagList() |
|||
} else { |
|||
this.getPageList() |
|||
} |
|||
}, |
|||
pagination(val) { // 分页 |
|||
this.page.current = val.pageNum |
|||
this.page.size = val.pageSize |
|||
this.getPageList(this.page) |
|||
}, |
|||
pagination2(val) { // 分页 |
|||
this.listQuery.current = val.pageNum |
|||
this.listQuery.size = val.pageSize |
|||
this.getPageList2(this.listQuery) |
|||
}, |
|||
selectTime1(val) { |
|||
|
|||
console.log('selectTime1:', val) |
|||
this.page.params.startDate = val |
|||
|
|||
}, |
|||
selectTime2(val) { |
|||
|
|||
console.log('selectTime2:', val) |
|||
this.page.params.endDate = val |
|||
|
|||
}, |
|||
|
|||
getPageList() { |
|||
req.recordListPage(this.page) |
|||
.then(resp => { |
|||
console.log('>>>>>>>>>getPageList', resp.data) |
|||
this.tableData = resp.data.records |
|||
this.page.total = resp.data.total |
|||
}) |
|||
.catch(() => {}) |
|||
}, |
|||
|
|||
getPageList2() { |
|||
req.recordDetails(this.listQuery) |
|||
.then(resp => { |
|||
console.log('>>>>>>>>>recordDetails', resp.data) |
|||
this.tableData2 = resp.data.records |
|||
this.recordId = resp.data.records[0].recordId |
|||
this.listQuery.total = resp.data.total |
|||
}) |
|||
.catch(() => { |
|||
|
|||
}) |
|||
|
|||
}, |
|||
editRow(row) { |
|||
this.editDialog = true |
|||
}, |
|||
showRow(row) { |
|||
this.listQuery.params.sid = row.sid |
|||
this.viewState = 2 |
|||
req.recordDetails(this.listQuery) |
|||
.then(resp => { |
|||
|
|||
console.log('>>>>>>>>>recordDetails', resp.data) |
|||
this.tableData2 = resp.data.records |
|||
|
|||
this.recordId = resp.data.records[0].recordId |
|||
this.listQuery.total = resp.data.total |
|||
}) |
|||
.catch(() => { |
|||
|
|||
}) |
|||
|
|||
}, |
|||
|
|||
returnView() { |
|||
this.tableData2 = [] |
|||
this.viewState = 1 |
|||
this.listQuery = { |
|||
total: 0, // 默认数据总数 |
|||
current: 1, // 默认开始页面 |
|||
size: 10, // 每页的数据条数 |
|||
params: { |
|||
sid: "", |
|||
number: '', |
|||
state: '', |
|||
}, |
|||
} |
|||
}, |
|||
|
|||
exportExcel() { |
|||
|
|||
const loading = this.$loading({ |
|||
lock: true, |
|||
text: 'Loading', |
|||
spinner: 'el-icon-loading', |
|||
background: 'rgba(0, 0, 0, 0.7)' |
|||
}) |
|||
|
|||
this.listQuery.params.serialNumber = '', |
|||
this.listQuery.params.state = '', |
|||
|
|||
req.exportExcel(this.listQuery.params).then((resp) => { |
|||
loading.close() |
|||
const blob = new Blob([resp], { |
|||
type: 'application/vnd.ms-excel' |
|||
}) |
|||
const fileName = '企业卡明细列表(批次号_' + this.recordId + ').xls' |
|||
const elink = document.createElement('a') |
|||
elink.download = fileName |
|||
elink.style.display = 'nonde' |
|||
elink.href = URL.createObjectURL(blob) |
|||
document.body.appendChild(elink) |
|||
elink.click() |
|||
URL.revokeObjectURL(elink.href) |
|||
document.body.removeChild(elink) |
|||
}).catch(() => { |
|||
loading.close() |
|||
}) |
|||
}, |
|||
downloadQR() { |
|||
this.$message({ |
|||
showClose: true, |
|||
type: 'success', |
|||
message: '功能暂未完善...' |
|||
}) |
|||
}, |
|||
giftBagList() { |
|||
req.giftBagList() |
|||
.then(resp => { |
|||
console.log('>>>>>>>>>giftBagList', resp.data) |
|||
this.giftPackList = resp.data |
|||
|
|||
}) |
|||
.catch(() => {}) |
|||
}, |
|||
giftPackSelect(val) { |
|||
console.log('>>>>>>>>>giftPackSelect', val) |
|||
this.formobj.giftbagSid = val |
|||
}, |
|||
saveOrUpdate() { |
|||
console.log('>>>>>>>>>saveOrUpdate', this.formobj) |
|||
req.generateCard(this.formobj) |
|||
.then(resp => { |
|||
if (resp.success) { |
|||
this.$message({ |
|||
showClose: true, |
|||
type: 'success', |
|||
message: resp.msg |
|||
}) |
|||
this.handleReturn('true') |
|||
} else { |
|||
// 根据resp.code进行异常情况处理 |
|||
} |
|||
}) |
|||
.catch(() => {}) |
|||
}, |
|||
handleReturn(isreload) { |
|||
if (isreload === 'true') this.$emit('reloadlist') |
|||
this.formobj = { |
|||
cardArea: "", |
|||
num: '', |
|||
giftbagSid: "" |
|||
} |
|||
this.$emit('doback') |
|||
}, |
|||
getBankList() { |
|||
req.bankList() |
|||
.then(resp => { |
|||
console.log('>>>>>>>>>getBankList', resp.data) |
|||
this.bankList = resp.data |
|||
|
|||
}) |
|||
.catch(() => {}) |
|||
}, |
|||
input1(val) { |
|||
console.log("input1》》》》", val) |
|||
}, |
|||
input2(val) { |
|||
console.log("input2》》》》", val) |
|||
}, |
|||
bankSelect(val) { |
|||
console.log("bankSelect》》》》", val) |
|||
const choose = this.bankList.filter((item) => item.sid === val) |
|||
this.from.bankSid = choose[0].sid |
|||
}, |
|||
save() { |
|||
console.log("save》》》》", this.from) |
|||
|
|||
req.cardGrant(this.from) |
|||
.then(resp => { |
|||
this.$message({ |
|||
showClose: true, |
|||
type: 'success', |
|||
message: resp.msg |
|||
}) |
|||
this.editDialog = false |
|||
this.from = { |
|||
start: "", |
|||
end: "", |
|||
bankSid: "" |
|||
} |
|||
this.getPageList() |
|||
}) |
|||
.catch(() => {}) |
|||
|
|||
|
|||
}, |
|||
banClose() { |
|||
this.from = { |
|||
start: "", |
|||
end: "", |
|||
bankSid: "" |
|||
} |
|||
this.editDialog = false |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.box-card { |
|||
margin-left: 60px; |
|||
margin-right: 60px; |
|||
min-width: 70%; |
|||
margin-top: 20px; |
|||
margin-bottom: 50px; |
|||
|
|||
.item { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
margin-top: 15px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
|
|||
.item_text { |
|||
flex: 0.8; |
|||
font-size: 18px; |
|||
text-align: right; |
|||
} |
|||
|
|||
.item_input { |
|||
flex: 4; |
|||
font-size: 16px; |
|||
margin-left: 10px; |
|||
margin-right: 80px; |
|||
} |
|||
|
|||
.item_left_input { |
|||
width: 20%; |
|||
} |
|||
|
|||
.item_left_text { |
|||
height: 30px; |
|||
margin-left: 20px; |
|||
line-height: 30px; |
|||
color: #018AD2; |
|||
padding: 0px 15px; |
|||
border: 1.5px solid #018AD2; |
|||
border-radius: 5px; |
|||
|
|||
} |
|||
|
|||
.item_right { |
|||
flex: 1; |
|||
justify-items: center; |
|||
|
|||
.item_right_list_text { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.item_right_list_delect { |
|||
color: #5E94FF; |
|||
margin-left: 20px; |
|||
font-size: 16px; |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -1,8 +0,0 @@ |
|||
<template> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
Loading…
Reference in new issue