<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>