CC/ruoyi-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
荒
2025-10-31 12:55:21 +08:00
parent 5e44b8ccd8
commit 10a6ee9e3a
2 changed files with 380 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/api/system/giftcoupon.js Normal file
View File

@@ -0,0 +1,37 @@
import request from '@/utils/request'
// 礼金列表
export function listGiftCoupons(query) {
return request({
url: '/system/giftcoupon/list',
method: 'get',
params: query
})
}
// 礼金详情
export function getGiftCoupon(giftCouponKey) {
return request({
url: `/system/giftcoupon/${giftCouponKey}`,
method: 'get'
})
}
// 礼金统计
export function getGiftCouponStatistics(query) {
return request({
url: '/system/giftcoupon/statistics',
method: 'get',
params: query
})
}
// 导出礼金列表
export function exportGiftCoupons(query) {
return request({
url: '/system/giftcoupon/export',
method: 'post',
params: query
})
}

343
src/views/system/giftcoupon/index.vue Normal file
View File

@@ -0,0 +1,343 @@
<template>
<div>
<list-layout>
<!-- 搜索区域 -->
<template #search>
<el-form :inline="true" :model="queryParams" label-width="100px">
<el-form-item label="礼金Key">
<el-input v-model="queryParams.giftCouponKey" placeholder="礼金批次ID" clearable size="small" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="商品SKU">
<el-input v-model="queryParams.skuId" placeholder="商品SKU ID" clearable size="small" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="商品名称">
<el-input v-model="queryParams.skuName" placeholder="商品名称" clearable size="small" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="类型">
<el-select v-model="queryParams.owner" placeholder="请选择" clearable size="small">
<el-option label="自营" value="g" />
<el-option label="POP" value="pop" />
</el-select>
</el-form-item>
<el-form-item label="过期状态">
<el-select v-model="queryParams.isExpired" placeholder="请选择" clearable size="small">
<el-option label="未过期" :value="0" />
<el-option label="已过期" :value="1" />
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="dateRange"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
size="small"
range-separator="至"
@change="handleDateRangeChange"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
<el-button type="warning" size="small" icon="el-icon-download" @click="handleExport" v-hasPermi="['system:giftcoupon:export']">导出</el-button>
</el-form-item>
</el-form>
</template>
<!-- 统计信息卡片 -->
<template #statistics>
<el-row :gutter="20" style="margin-bottom: 20px;">
<el-col :span="8">
<el-card shadow="hover">
<div style="text-align: center;">
<div style="font-size: 24px; font-weight: bold; color: #409EFF;">{{ statistics.totalCount || 0 }}</div>
<div style="color: #909399; margin-top: 8px;">礼金批次总数</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover">
<div style="text-align: center;">
<div style="font-size: 24px; font-weight: bold; color: #67C23A;">{{ statistics.totalUseCount || 0 }}</div>
<div style="color: #909399; margin-top: 8px;">总使用次数</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover">
<div style="text-align: center;">
<div style="font-size: 24px; font-weight: bold; color: #E6A23C;">¥{{ formatMoney(statistics.totalOcsAmount || 0) }}</div>
<div style="color: #909399; margin-top: 8px;">总分摊金额</div>
</div>
</el-card>
</el-col>
</el-row>
</template>
<!-- 表格区域 -->
<template #table>
<el-table :data="list" v-loading="loading" border stripe :default-sort="{prop: 'createTime', order: 'descending'}">
<el-table-column label="礼金Key" prop="giftCouponKey" width="180" sortable>
<template slot-scope="scope">
<div>
<span style="margin-right: 8px;">{{ scope.row.giftCouponKey }}</span>
<el-button
type="text"
size="mini"
icon="el-icon-copy-document"
@click="copyToClipboard(scope.row.giftCouponKey)"
title="复制礼金Key"
>
复制
</el-button>
</div>
</template>
</el-table-column>
<el-table-column label="商品SKU" prop="skuId" width="120" />
<el-table-column label="商品名称" prop="skuName" min-width="200" show-overflow-tooltip />
<el-table-column label="类型" prop="owner" width="80">
<template slot-scope="scope">
<el-tag :type="scope.row.owner === 'g' ? 'success' : 'warning'">
{{ scope.row.owner === 'g' ? '自营' : 'POP' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="使用次数" prop="useCount" width="100" sortable />
<el-table-column label="总分摊金额" prop="totalOcsAmount" width="120" sortable>
<template slot-scope="scope">
¥{{ formatMoney(scope.row.totalOcsAmount || 0) }}
</template>
</el-table-column>
<el-table-column label="创建时间" prop="createTime" width="160" sortable>
<template slot-scope="scope">{{ parseTime(scope.row.createTime) }}</template>
</el-table-column>
<el-table-column label="过期时间" prop="expireTime" width="160">
<template slot-scope="scope">
<span v-if="scope.row.expireTime">{{ parseTime(scope.row.expireTime) }}</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="过期状态" prop="isExpired" width="100">
<template slot-scope="scope">
<el-tag :type="scope.row.isExpired === 1 ? 'danger' : 'success'">
{{ scope.row.isExpired === 1 ? '已过期' : '未过期' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="120">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="handleDetail(scope.row)">
详情
</el-button>
</template>
</el-table-column>
</el-table>
</template>
<!-- 分页区域 -->
<template #pagination>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</template>
</list-layout>
<!-- 详情对话框 -->
<el-dialog title="礼金详情" :visible.sync="detailVisible" width="600px" append-to-body>
<el-descriptions :column="2" border v-if="currentRow">
<el-descriptions-item label="礼金Key" :span="2">{{ currentRow.giftCouponKey }}</el-descriptions-item>
<el-descriptions-item label="商品SKU">{{ currentRow.skuId }}</el-descriptions-item>
<el-descriptions-item label="商品名称" :span="2">{{ currentRow.skuName }}</el-descriptions-item>
<el-descriptions-item label="类型">
<el-tag :type="currentRow.owner === 'g' ? 'success' : 'warning'">
{{ currentRow.owner === 'g' ? '自营' : 'POP' }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="使用次数">{{ currentRow.useCount }}</el-descriptions-item>
<el-descriptions-item label="总分摊金额">¥{{ formatMoney(currentRow.totalOcsAmount || 0) }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ parseTime(currentRow.createTime) }}</el-descriptions-item>
<el-descriptions-item label="过期时间">
<span v-if="currentRow.expireTime">{{ parseTime(currentRow.expireTime) }}</span>
<span v-else>-</span>
</el-descriptions-item>
<el-descriptions-item label="过期状态" :span="2">
<el-tag :type="currentRow.isExpired === 1 ? 'danger' : 'success'">
{{ currentRow.isExpired === 1 ? '已过期' : '未过期' }}
</el-tag>
</el-descriptions-item>
</el-descriptions>
<div slot="footer" class="dialog-footer">
<el-button @click="detailVisible = false">关 闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listGiftCoupons, getGiftCouponStatistics, exportGiftCoupons } from '@/api/system/giftcoupon'
import ListLayout from '@/components/ListLayout'
import { parseTime } from '@/utils/ruoyi'
export default {
name: 'GiftCoupon',
components: {
ListLayout
},
data() {
return {
loading: false,
list: [],
total: 0,
dateRange: [],
queryParams: {
pageNum: 1,
pageSize: 50,
giftCouponKey: undefined,
skuId: undefined,
skuName: undefined,
owner: undefined,
isExpired: undefined,
beginTime: null,
endTime: null
},
statistics: {
totalCount: 0,
totalUseCount: 0,
totalOcsAmount: 0
},
detailVisible: false,
currentRow: null
}
},
created() {
this.getList()
this.loadStatistics()
},
methods: {
/** 查询列表 */
getList() {
this.loading = true
listGiftCoupons(this.queryParams).then(res => {
this.list = (res.rows || res.data || [])
this.total = res.total || 0
this.loading = false
}).catch(() => {
this.loading = false
})
},
/** 加载统计信息 */
loadStatistics() {
const params = { ...this.queryParams }
// 统计信息不需要分页参数
delete params.pageNum
delete params.pageSize
getGiftCouponStatistics(params).then(res => {
if (res.code === 200 && res.data) {
this.statistics = {
totalCount: res.data.useCount || 0,
totalUseCount: res.data.useCount || 0,
totalOcsAmount: res.data.totalOcsAmount || 0
}
}
})
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
this.loadStatistics()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = []
this.queryParams = {
pageNum: 1,
pageSize: 50,
giftCouponKey: undefined,
skuId: undefined,
skuName: undefined,
owner: undefined,
isExpired: undefined,
beginTime: null,
endTime: null
}
this.handleQuery()
},
/** 处理日期范围变化 */
handleDateRangeChange(val) {
if (val && val.length === 2) {
this.queryParams.beginTime = val[0]
this.queryParams.endTime = val[1]
} else {
this.queryParams.beginTime = null
this.queryParams.endTime = null
}
},
/** 导出按钮操作 */
handleExport() {
const params = { ...this.queryParams }
this.$modal.confirm('是否确认导出所有礼金数据项？').then(() => {
this.exportLoading = true
return exportGiftCoupons(params)
}).then(response => {
this.$download.excel(response, '礼金数据.xlsx')
this.exportLoading = false
}).catch(() => {
this.exportLoading = false
})
},
/** 查看详情 */
handleDetail(row) {
this.currentRow = row
this.detailVisible = true
},
/** 复制到剪贴板 */
copyToClipboard(text) {
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(() => {
this.$modal.msgSuccess('复制成功')
}).catch(() => {
this.fallbackCopyToClipboard(text)
})
} else {
this.fallbackCopyToClipboard(text)
}
},
/** 降级复制方法 */
fallbackCopyToClipboard(text) {
const textArea = document.createElement('textarea')
textArea.value = text
textArea.style.position = 'fixed'
textArea.style.opacity = '0'
document.body.appendChild(textArea)
textArea.select()
try {
document.execCommand('copy')
this.$modal.msgSuccess('复制成功')
} catch (err) {
this.$modal.msgError('复制失败')
}
document.body.removeChild(textArea)
},
/** 格式化金额 */
formatMoney(amount) {
if (!amount) return '0.00'
return Number(amount).toFixed(2)
},
/** 格式化时间 */
parseTime
}
}
</script>
<style scoped>
.el-card {
cursor: pointer;
}
</style>