1
This commit is contained in:
37
src/api/system/giftcoupon.js
Normal file
37
src/api/system/giftcoupon.js
Normal 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
343
src/views/system/giftcoupon/index.vue
Normal 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>
|
||||||
|
|
||||||
Reference in New Issue
Block a user