<template>
<div class="app-container">
<el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="100px">
<el-form-item :label="$t('礼品')">
<el-input v-model.trim="queryParams.rewardTitle" :placeholder="$t('请输入礼品名称')" clearable onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('会员昵称')">
<el-input v-model.trim="queryParams.memberName" :placeholder="$t('请输入会员昵称')" clearable onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('会员编号')">
<el-input v-model.trim="queryParams.memberCode" :placeholder="$t('请输入会员编号')" clearable onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('领取方式')">
<dict-selector v-model="queryParams.redeemType" clearable :type="DICT_TYPE.WAY_OF_RECEIVING" />
</el-form-item>
<el-form-item :label="$t('状态')">
<dict-selector v-model="queryParams.status" clearable :type="DICT_TYPE.REWARD_REDEEM_STATUS" />
</el-form-item>
<el-form-item :label="$t('数量')">
<el-row style="width: 194px">
<el-col :span="10">
<dict-selector v-model="queryParams.rewardCountOperate" clearable :type="DICT_TYPE.QUANTITATIVE_RELATION_SYMBOL" @change="handleQuery" />
</el-col>
<el-col :span="12" :offset="2">
<el-input v-model.trim="queryParams.rewardCount" :placeholder="$t('请输入数字')" clearable onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')" @keyup.enter.native="handleQuery" />
</el-col>
</el-row>
</el-form-item>
<el-form-item :label="$t('礼品ID')">
<el-input v-model.trim="queryParams.rewardCode" :placeholder="$t('请输入礼品ID')" clearable onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('兑换入口')">
<dict-selector v-model="queryParams.entrance" clearable :type="DICT_TYPE.PLATFORM_TYPE" @change="handleQuery" />
</el-form-item>
<el-form-item :label="$t('兑换网点')">
<el-select v-model="queryParams.nodeId" :placeholder="$t('请选择兑换网点')" clearable size="small" @change="handleQuery">
<el-option v-for="nodeItem in nodeList" :key="nodeItem.id" :label="isChinese ? nodeItem.titleZh : nodeItem.titleEn" :value="nodeItem.id" />
</el-select>
</el-form-item>
<el-form-item :label="$t('记录ID')">
<el-input v-model.trim="queryParams.redemptionNumber" :placeholder="$t('请输入')" clearable onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item :label="$t('兑换时间')">
<el-date-picker style="width: 240px" v-model="dateRangeCreateTime" type="datetimerange" clearable placement="bottom-start" value-format="yyyy-MM-dd HH:mm:ss" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">{{ $t("搜索") }}</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">{{ $t("重置") }}</el-button>
</el-form-item>
</el-form>
<el-row class="mb8">
<el-button v-hasPermi="['ecw:memberManagement:newExchange']" type="success" size="mini" icon="el-icon-plus" @click="handleNewExchange">{{ $t("新增兑换") }}</el-button>
<el-button v-hasPermi="['ecw:memberManagement:batchWriteOff']" type="success" size="mini" icon="el-icon-plus" @click="handleBatchVerify">{{ $t("批量核销") }}</el-button>
<el-button v-hasPermi="['ecw:memberManagement:export']" type="success" size="mini" icon="el-icon-plus" @click="handleBatchExport">{{ $t("导出") }}</el-button>
<el-button v-hasPermi="['ecw:memberManagement:exchangeoInfoImport']" type="success" size="mini" icon="el-icon-plus" @click="handleShowFileUploadDialog">{{ $t("兑换信息导入") }}</el-button>
<right-toolbar :show-search.sync="showSearch" @queryTable="handleQueryPagination" />
</el-row>
<el-table ref="multipleTable" v-loading="loading" :data="memberList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column width="100" :label="$t('记录ID')" align="center">
<template #default="{ row }">
<el-button size="mini" type="text" @click="handleViewRecord(row)">{{ row.redemptionNumber }}</el-button>
</template>
</el-table-column>
<el-table-column width="90" :label="$t('礼品ID')" align="center" prop="rewardCode" />
<el-table-column width="160" :label="$t('礼品')" align="center" :show-overflow-tooltip="true">
<template #default="{ row }">
<el-button type="text" @click="handleShowRewardsDetail(row)">{{ isChinese ? row.rewardTitleZh : row.rewardTitleEn }}</el-button>
</template>
</el-table-column>
<el-table-column :label="$t('会员')" align="center">
<template #default="{ row }">
<el-button type="text" @click="$router.push('/member/member/member-details/' + row.memberId)">{{ isChinese ? row.memberNameZh : row.memberNameEn }}</el-button>
</template>
</el-table-column>
<el-table-column width="180" :label="$t('时间')" align="center">
<template #default="{ row }"> {{ parseTime(row.redemptionTime) || "/" }}</template>
</el-table-column>
<el-table-column :label="$t('积分')" align="center" prop="totalCount" />
<el-table-column width="60" :label="$t('数量')" align="center" prop="rewardCount" />
<el-table-column width="60" :label="$t('入口')" align="center">
<template #default="{ row }">
{{ isChinese ? handleExchangeEntrance(row.entrance).label : handleExchangeEntrance(row.entrance).labelEn }}
</template>
</el-table-column>
<el-table-column width="100" :label="$t('网点')" align="center" :prop="isChinese ? 'nodeTitleZh' : 'nodeTitleEn'" />
<el-table-column width="90" :label="$t('领取方式')" align="center">
<template #default="{ row }">
{{ isChinese ? handleExchangeRedeemType(row.redeemType).label : handleExchangeRedeemType(row.redeemType).labelEn }}
</template>
</el-table-column>
<el-table-column width="90" :label="$t('状态')" align="center">
<template #default="{ row }">
{{ isChinese ? handleExchangeStatus(row.status).label : handleExchangeStatus(row.status).labelEn }}
</template>
</el-table-column>
<el-table-column width="140" :label="$t('备注')" align="center" prop="remark" />、
<el-table-column width="100" :label="$t('创建人')" align="center" prop="creatorName" />
<el-table-column width="100" :label="$t('更新人')" align="center" prop="updaterName" />
<el-table-column width="280" align="center" fixed="right" :label="$t('操作')" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button v-hasPermi="['ecw:memberManagement:cancel']" size="mini" type="text" icon="el-icon-view" :disabled="scope.row.status != '1'" @click="handleRewardCancel(scope.row)">{{ $t("撤销") }}</el-button>
<el-button v-hasPermi="['ecw:memberManagement:edit']" size="mini" type="text" icon="el-icon-edit" :disabled="scope.row.status != '1'" @click="handleRewardEdit(scope.row)">{{ $t("编辑") }}</el-button>
<!-- <el-button
v-hasPermi="['ecw:memberManagement:view']"
size="mini"
type="text"
icon="el-icon-edit"
@click="handleViewRecord(scope.row)"
>{{ $t("查看") }}</el-button
> -->
<el-button v-hasPermi="['ecw:memberManagement:verification']" size="mini" type="text" icon="el-icon-edit" :disabled="scope.row.status != '1'" @click="handleVerify(scope.row)">{{ $t("核销") }}</el-button>
<el-button v-hasPermi="['ecw:memberManagement:verificationRollback']" size="mini" type="text" icon="el-icon-delete" :disabled="scope.row.status != '2'" @click="handleVerificationRollback(scope.row)">{{ $t("核销回退") }}</el-button>
</template>
</el-table-column>
</el-table>
<!-- //分页列表 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="handleQueryPagination" />
<!-- 批量导入 -->
<!-- 用户导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload" />
<div class="el-upload__text">
{{ $t("将文件拖到此处，或") }}<em>{{ $t("点击上传") }}</em>
</div>
<div slot="tip" class="el-upload__tip text-center">
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">{{ $t("下载模板") }} </el-link>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">{{ $t("确 定") }}</el-button>
<el-button @click="upload.open = false">{{ $t("取 消") }}</el-button>
</div>
</el-dialog>
<!-- 批量核销 -->
<el-dialog :title="$t('批量核销')" :visible.sync="dialogBatchVerify" width="30%" :before-close="handleClose">
<el-form ref="numberValidateForm" :model="batchVerifyForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="核销人" prop="age" :rules="[{ required: true, message: $t('核销人不能为空') }]">
<el-input v-model.number="batchVerifyForm.verifyUser" autocomplete="off" />
</el-form-item>
<el-form-item :label="$t('核销时间')" :rules="[{ required: true, message: $t('核销时间不能为空') }]">
<el-date-picker v-model="batchVerifyForm.verifyTime" type="date" placement="bottom-start" value-format="yyyy-MM-dd HH:mm:ss" :placeholder="$t('选择核销时间')" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogBatchVerify = false">取 消</el-button>
<el-button type="primary" @click="handleBatchVerifySubmit">{{ $t("确认核销") }}</el-button>
</span>
</el-dialog>
<!-- 查看 礼品 -->
<operating-gift ref="operatingGift" :title="operatingPagetitle" :rewards-details="rewardsItem" :show.sync="dialogVisible" :node-list="nodeList" />
</div>
</template>
<script>
import { getDictDatas, DICT_TYPE } from "@/utils/dict"
import { getNodeList, getRewardsDetails } from "@/api/ecw/giftManagement"
import { queryMemberExchangeRecord, batchVerifyAPI, batchRecordExport, batchRecordImportTemplate, rewardCancelQuery, verifyRollback } from "@/api/ecw/memberManagement"
import { getNowDateTime, parseTime } from "@/utils/ruoyi"
import { getBaseHeader } from "@/utils/request"
import OperatingGift from "@/views/ecw/giftManagement/components/operatingGift.vue"
export default {
name: "EcwMembermanagementExchangerecord",
components: {
OperatingGift
},
data() {
return {
upload: {
// 是否显示弹出层（用户导入）
open: false,
// 弹出层标题（用户导入）
title: this.$t("兑换信息导入"),
// 是否禁用上传
isUploading: false,
// 设置上传的请求头部
headers: getBaseHeader(),
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/admin-api/reward/redeem/record/import"
},
// 批量核销
dialogBatchVerify: false,
batchVerifyForm: {
ids: [],
verifyTime: "",
verifyUser: ""
},
// 显示搜索条件
showSearch: true,
selectedMember: [],
cityList: [],
operatingPagetitle: "",
rewardsItem: {},
dateRangeCreateTime: [],
total: 0,
loading: true,
dialogVisible: false,
memberList: [],
formQuery: {
comment: "",
memberIds: [],
operateType: null,
scoreCount: null
},
queryParams: {
rewardTitle: "",
memberName: "", // 会员昵称
memberCode: "", //会员编号
redeemType: "", // 兑换方式
status: "",
rewardCount: "",
rewardCountOperate: "",
rewardCode: "",
entrance: "", // 兑换入口
startTime: "",
endTime: "",
nodeId: "",
redemptionNumber: null,
pageNo: 1,
pageSize: 10
},
// 网点
nodeList: []
}
},
computed: {
isChinese() {
return this.$i18n.locale === "zh_CN"
}
},
watch: {
"$route.query.rewardCode": {
handler(val) {
if (val) {
this.queryParams.rewardCode = val
}
},
immediate: true
},
"$route.query.memberCode": {
handler(val) {
if (val) {
this.queryParams.memberCode = val
}
},
immediate: true
}
},
created() {
this.getNodeListAPI()
this.handleQuery()
},
activated() {
this.handleQuery()
},
methods: {
handleShowRewardsDetail(row) {
let params = {
id: row.rewardId
}
getRewardsDetails(params).then((res) => {
this.dialogVisible = true
this.operatingPagetitle = "1"
this.rewardsItem = res.data
})
},
// 核销回退
handleVerificationRollback(row) {
this.$confirm(this.$t("是否继续核销回退?"), this.$t("提示"), {
confirmButtonText: this.$t("确定"),
cancelButtonText: this.$t("取消"),
type: "warning"
})
.then(() => {
const params = {
redeemIds: [row.id]
}
verifyRollback(params).then((res) => {
this.$message({
type: "success",
message: this.$t("回退成功!")
})
this.handleQuery()
})
})
.catch(() => {
this.$message({
type: "info",
message: this.$t("已取消回退")
})
})
},
// 核销
handleVerify(row) {
this.$router.push({
path: "/member/memberManagement/exchangeRecordOperation",
query: { exchangeRewardID: row.id, pageStatus: "verify" }
})
},
// 查看按钮操作
handleViewRecord(row) {
this.$router.push({
path: "/member/memberManagement/exchangeRecordOperation",
query: { exchangeRewardID: row.id, pageStatus: "view" }
})
},
// 兑换记录编辑操作
handleRewardEdit(row) {
this.$router.push({
path: "/member/memberManagement/exchangeRecordOperation",
query: { exchangeRewardID: row.id, pageStatus: "edit" }
})
},
// 撤销按钮操作
handleRewardCancel(row) {
this.$confirm(this.$t("此操作积分可能存在到期积分, 撤销后积分将进行扣除,是否继续?"), this.$t("提示"), {
confirmButtonText: this.$t("确定"),
cancelButtonText: this.$t("取消"),
type: "warning"
})
.then(() => {
const params = {
id: row.id
}
rewardCancelQuery(params).then((res) => {
this.$message({
type: "success",
message: this.$t("撤销成功!")
})
this.handleQuery()
})
})
.catch(() => {
this.$message({
type: "info",
message: this.$t("已取消撤销")
})
})
},
// 下载导入模板
importTemplate() {
batchRecordImportTemplate().then((res) => {
this.$download.excel(res, "用户导入模板.xls")
this.$message({
message: this.$t("下载模板成功"),
type: "success"
})
})
},
// 导入
handleShowFileUploadDialog() {
this.upload.open = true
},
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
if (response.code == "1001011027") {
this.$message.error(response.msg)
}
if (!response.data.redeemIdFailedMap || JSON.stringify(response.data.redeemIdFailedMap) == "{}") {
this.upload.open = false
this.$modal.msgSuccess(this.$t("导入成功"))
this.$refs.upload.clearFiles()
this.upload.isUploading = false
this.handleQuery()
return
}
this.upload.open = false
this.upload.isUploading = false
this.$refs.upload.clearFiles()
// 拼接提示语
const data = response.data
let text = `${this.$t("导入失败:")}`
for (const username in data.redeemIdFailedMap) {
text += "<br /> " + username + this.$t("：") + data.redeemIdFailedMap[username]
}
text += `<br /> ${this.$t("以上数据格式有问题")}`
this.$alert(text, this.$t("导入结果"), {
dangerouslyUseHTMLString: true
})
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit()
},
// 导出
handleBatchExport() {
const params = { ...this.queryParams }
if (this.dateRangeCreateTime) {
params.startTime = this.dateRangeCreateTime[0]
params.endTime = this.dateRangeCreateTime[1]
}
batchRecordExport(params).then((res) => {
this.$message({
message: this.$t("已加入导出队列，请稍后在下载日志中下载"),
type: "success"
})
})
},
// 批量核销确认按钮
handleBatchVerifySubmit() {
this.$confirm(this.$t("确认提交？"))
.then((_) => {
const params = { ...this.batchVerifyForm }
batchVerifyAPI(params).then((res) => {
this.dialogBatchVerify = false
this.$message({
message: this.$t("核销成功"),
type: "success"
})
})
})
.catch((_) => {})
},
// 批量核销
handleBatchVerify() {
if (this.batchVerifyForm.ids.length > 0) {
this.dialogBatchVerify = true
this.batchVerifyForm.verifyUser = this.$store.getters.name
this.batchVerifyForm.verifyTime = getNowDateTime()
} else {
this.$message({
message: this.$t("请先选择兑换记录"),
type: "warning"
})
}
},
// 新增兑换
handleNewExchange() {
this.$router.push({
path: "/member/memberManagement/exchangeRecordOperation",
query: { pageStatus: "add" }
})
},
getNodeListAPI() {
getNodeList().then((res) => {
this.nodeList = res.data
})
},
handleExchangeRedeemType(id) {
return this.getDictDatas(DICT_TYPE.WAY_OF_RECEIVING).filter((item) => item.value == id)[0]
},
// 兑换入口
handleExchangeEntrance(id) {
return this.getDictDatas(DICT_TYPE.PLATFORM_TYPE).filter((item) => item.value == id)[0]
},
// 兑换状态
handleExchangeStatus(id) {
return this.getDictDatas(DICT_TYPE.REWARD_REDEEM_STATUS).filter((item) => item.value == id)[0]
},
handleClose(done) {
this.$confirm(this.$t("确认关闭？"))
.then((_) => {
done()
})
.catch((_) => {})
},
handleSelectionChange(val) {
this.selectedMember = val
this.batchVerifyForm.ids = val.map((item) => {
return item.id
})
},
dialogBeforeClose() {
this.loading = true
this.queryParams = {
country: null,
city: null,
endTime: null,
holdScore: null,
memberCode: "",
holdScoreOperate: null,
key: null,
redemptionNumber: null,
pageNo: 1,
pageSize: 10,
startTime: null,
usedScore: null,
usedScoreOperate: null
}
},
handleQuery() {
this.queryParams.pageNo = 1
const params = { ...this.queryParams }
if (this.dateRangeCreateTime) {
params.startTime = this.dateRangeCreateTime[0]
params.endTime = this.dateRangeCreateTime[1]
}
queryMemberExchangeRecord(params).then((res) => {
this.loading = false
this.memberList = res.data.list
this.total = res.data.total
})
},
handleQueryPagination() {
const params = { ...this.queryParams }
if (this.dateRangeCreateTime) {
params.startTime = this.dateRangeCreateTime[0]
params.endTime = this.dateRangeCreateTime[1]
}
queryMemberExchangeRecord(params).then((res) => {
this.loading = false
this.memberList = res.data.list
this.total = res.data.total
})
},
resetQuery() {
this.loading = true
this.dateRangeCreateTime = []
this.queryParams = {
country: null,
city: null,
endTime: null,
memberCode: "",
holdScore: null,
holdScoreOperate: null,
key: null,
pageNo: 1,
pageSize: 10,
redemptionNumber: null,
startTime: null,
usedScore: null,
usedScoreOperate: null
}
this.handleQuery()
}
}
}
</script>