This commit is contained in:
雷欧(林平凡)
2025-08-11 13:49:42 +08:00
parent fadcd0ad5a
commit 5f2fbe3412
4 changed files with 634 additions and 1 deletions

View File

@@ -0,0 +1,583 @@
<template>
<div class="app-container">
<!-- 数据统计卡片 -->
<el-row :gutter="20" class="mb20" v-if="statistics">
<el-col :span="6">
<el-card shadow="hover">
<div class="statistics-card">
<div class="statistics-title">总线报消息</div>
<div class="statistics-value">{{ statistics.total || 0 }}</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<div class="statistics-card">
<div class="statistics-title">线报商品</div>
<div class="statistics-value">{{ statistics.childrenCount || 0 }}</div>
</div>
</el-card>
</el-col>
</el-row>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="消息内容" prop="content">
<el-input v-model="queryParams.content" placeholder="请输入消息内容" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:xbmessage:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:xbmessage:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:xbmessage:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:xbmessage:export']">导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="xbmessageList" @selection-change="handleSelectionChange" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="首行" prop="firstLine" :show-overflow-tooltip="true" min-width="260" />
<el-table-column label="首个商品" prop="firstSkuName" :show-overflow-tooltip="true" min-width="220" />
<el-table-column label="首价" prop="firstPrice" width="120" align="center" />
<el-table-column label="商品数" width="100" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.children && scope.row.children.length > 0" type="success" size="mini">
{{ scope.row.children.length }}
</el-tag>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="线报时间" prop="createDate" width="180" align="center">
<template slot-scope="scope">
<span>{{ scope.row.createDate ? parseTime(scope.row.createDate) : '-' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-info" @click="showMessageDetail(scope.row)">详情</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:xbmessage:edit']">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:xbmessage:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改消息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="消息类型" prop="type">
<el-input v-model="form.type" placeholder="请输入消息类型" />
</el-form-item>
<el-form-item label="消息内容" prop="content">
<el-input v-model="form.content" type="textarea" placeholder="请输入消息内容" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<!-- 子消息详情对话框 -->
<el-dialog title="子消息详情" :visible.sync="childDetailVisible" width="900px" append-to-body>
<div v-if="currentChild">
<el-descriptions :column="2" border>
<el-descriptions-item label="ID">{{ currentChild.id }}</el-descriptions-item>
<el-descriptions-item label="商品名称">{{ currentChild.skuName || '-' }}</el-descriptions-item>
<el-descriptions-item label="价格">{{ currentChild.firstPrice ? `¥${currentChild.firstPrice}` : '-' }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ currentChild.createDate ? parseTime(currentChild.createDate) : '-' }}</el-descriptions-item>
<el-descriptions-item label="SPUID">{{ currentChild.spuid || '-' }}</el-descriptions-item>
<el-descriptions-item label="所有者">{{ currentChild.owner || '-' }}</el-descriptions-item>
</el-descriptions>
<!-- 商品查询结果 -->
<div v-if="currentChild.jsonQueryResult" style="margin-top: 20px;">
<h4>商品查询结果</h4>
<el-descriptions :column="1" border>
<el-descriptions-item label="品牌">{{ getJsonValue(currentChild.jsonQueryResult, 'brandName') || '-' }}</el-descriptions-item>
<el-descriptions-item label="分类">{{ getCategoryPath(currentChild.jsonQueryResult) || '-' }}</el-descriptions-item>
<el-descriptions-item label="评论数">{{ getJsonValue(currentChild.jsonQueryResult, 'comments') || '-' }}</el-descriptions-item>
<el-descriptions-item label="好评率">{{ getJsonValue(currentChild.jsonQueryResult, 'goodCommentsShare') ? `${getJsonValue(currentChild.jsonQueryResult, 'goodCommentsShare')}%` : '-' }}</el-descriptions-item>
<el-descriptions-item label="30天订单数">{{ getJsonValue(currentChild.jsonQueryResult, 'inOrderCount30Days') || '-' }}</el-descriptions-item>
<el-descriptions-item label="是否热门">{{ getJsonValue(currentChild.jsonQueryResult, 'isHot') ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="是否京东自营">{{ getJsonValue(currentChild.jsonQueryResult, 'isJdSale') ? '是' : '否' }}</el-descriptions-item>
</el-descriptions>
</div>
<!-- 价格信息 -->
<div v-if="currentChild.jsonQueryResult" style="margin-top: 20px;">
<h4>价格信息</h4>
<el-descriptions :column="2" border>
<el-descriptions-item label="原价">{{ getJsonValue(currentChild.jsonQueryResult, 'priceInfo.price') ? `¥${getJsonValue(currentChild.jsonQueryResult, 'priceInfo.price')}` : '-' }}</el-descriptions-item>
<el-descriptions-item label="最低券后价">{{ getJsonValue(currentChild.jsonQueryResult, 'priceInfo.lowestCouponPrice') ? `¥${getJsonValue(currentChild.jsonQueryResult, 'priceInfo.lowestCouponPrice')}` : '-' }}</el-descriptions-item>
<el-descriptions-item label="最低价">{{ getJsonValue(currentChild.jsonQueryResult, 'priceInfo.lowestPrice') ? `¥${getJsonValue(currentChild.jsonQueryResult, 'priceInfo.lowestPrice')}` : '-' }}</el-descriptions-item>
<el-descriptions-item label="购买价">{{ getJsonValue(currentChild.jsonQueryResult, 'purchasePriceInfo.purchasePrice') ? `¥${getJsonValue(currentChild.jsonQueryResult, 'purchasePriceInfo.purchasePrice')}` : '-' }}</el-descriptions-item>
</el-descriptions>
</div>
<!-- 佣金信息 -->
<div v-if="currentChild.jsonQueryResult" style="margin-top: 20px;">
<h4>佣金信息</h4>
<el-descriptions :column="2" border>
<el-descriptions-item label="佣金">{{ getJsonValue(currentChild.jsonQueryResult, 'commissionInfo.commission') ? `¥${getJsonValue(currentChild.jsonQueryResult, 'commissionInfo.commission')}` : '-' }}</el-descriptions-item>
<el-descriptions-item label="佣金比例">{{ getJsonValue(currentChild.jsonQueryResult, 'commissionInfo.commissionShare') ? `${getJsonValue(currentChild.jsonQueryResult, 'commissionInfo.commissionShare')}%` : '-' }}</el-descriptions-item>
<el-descriptions-item label="券佣金">{{ getJsonValue(currentChild.jsonQueryResult, 'commissionInfo.couponCommission') ? `¥${getJsonValue(currentChild.jsonQueryResult, 'commissionInfo.couponCommission')}` : '-' }}</el-descriptions-item>
<el-descriptions-item label="PLUS佣金比例">{{ getJsonValue(currentChild.jsonQueryResult, 'commissionInfo.plusCommissionShare') ? `${getJsonValue(currentChild.jsonQueryResult, 'commissionInfo.plusCommissionShare')}%` : '-' }}</el-descriptions-item>
</el-descriptions>
</div>
<!-- 店铺信息 -->
<div v-if="currentChild.jsonQueryResult" style="margin-top: 20px;">
<h4>店铺信息</h4>
<el-descriptions :column="2" border>
<el-descriptions-item label="店铺ID">{{ getJsonValue(currentChild.jsonQueryResult, 'shopInfo.shopId') || '-' }}</el-descriptions-item>
<el-descriptions-item label="店铺名称">{{ getJsonValue(currentChild.jsonQueryResult, 'shopInfo.shopName') || '-' }}</el-descriptions-item>
<el-descriptions-item label="店铺等级">{{ getJsonValue(currentChild.jsonQueryResult, 'shopInfo.shopLevel') || '-' }}</el-descriptions-item>
<el-descriptions-item label="店铺标签">{{ getJsonValue(currentChild.jsonQueryResult, 'shopInfo.shopLabel') || '-' }}</el-descriptions-item>
</el-descriptions>
</div>
<!-- 优惠券信息 -->
<div v-if="currentChild.jsonCouponList && currentChild.jsonCouponList !== '[]'" style="margin-top: 20px;">
<h4>优惠券信息</h4>
<el-table :data="parseCouponList(currentChild.jsonCouponList)" border style="width: 100%">
<el-table-column label="优惠券类型" align="center" prop="couponStyle" width="120">
<template slot-scope="scope">
<span>{{ scope.row.couponStyle === 0 ? '满减券' : '其他' }}</span>
</template>
</el-table-column>
<el-table-column label="满减门槛" align="center" prop="quota" width="120">
<template slot-scope="scope">
<span>{{ scope.row.quota }}{{ scope.row.discount }}</span>
</template>
</el-table-column>
<el-table-column label="获取时间" align="center" width="200">
<template slot-scope="scope">
<div>开始{{ formatTimestamp(scope.row.getStartTime) }}</div>
<div>结束{{ formatTimestamp(scope.row.getEndTime) }}</div>
</template>
</el-table-column>
<el-table-column label="使用时间" align="center" width="200">
<template slot-scope="scope">
<div>开始{{ formatTimestamp(scope.row.useStartTime) }}</div>
<div>结束{{ formatTimestamp(scope.row.useEndTime) }}</div>
</template>
</el-table-column>
<el-table-column label="链接" align="center" min-width="200">
<template slot-scope="scope">
<el-link :href="scope.row.link" target="_blank" type="primary">查看优惠券</el-link>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="childDetailVisible = false"> </el-button>
</div>
</el-dialog>
<!-- 消息详情对话框 -->
<el-dialog title="消息详情" :visible.sync="messageDetailVisible" width="900px" append-to-body>
<div v-if="currentMessageDetail">
<el-descriptions :column="2" border>
<el-descriptions-item label="消息ID">{{ currentMessageDetail.id }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ currentMessageDetail.createDate ? parseTime(currentMessageDetail.createDate) : '-' }}</el-descriptions-item>
<el-descriptions-item label="来源微信ID">{{ currentMessageDetail.fromWxid || '-' }}</el-descriptions-item>
<el-descriptions-item label="SKUID">{{ currentMessageDetail.skuid || '-' }}</el-descriptions-item>
</el-descriptions>
<!-- 原始消息内容 -->
<div style="margin-top: 20px;">
<h4>原始消息内容</h4>
<el-input
type="textarea"
:rows="8"
v-model="currentMessageDetail.tipOriginalMessage"
readonly
placeholder="暂无消息内容"
/>
</div>
<!-- 子消息列表 -->
<div v-if="currentMessageDetail.children && currentMessageDetail.children.length > 0" style="margin-top: 20px;">
<h4>子消息列表 ({{ currentMessageDetail.children.length }})</h4>
<el-table :data="currentMessageDetail.children" border style="width: 100%" max-height="400">
<el-table-column label="ID" align="center" prop="id" width="80" />
<el-table-column label="商品名称" align="left" prop="skuName" :show-overflow-tooltip="true" min-width="200" />
<el-table-column label="价格" align="center" prop="firstPrice" width="100">
<template slot-scope="scope">
<span v-if="scope.row.firstPrice">¥{{ scope.row.firstPrice }}</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="商品详情" align="left" min-width="300">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="showChildDetail(scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="messageDetailVisible = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listXbmessage, getXbmessage, delXbmessage, addXbmessage, updateXbmessage } from "@/api/system/xbmessage";
import { parseTime } from "@/utils/ruoyi";
export default {
name: "Xbmessage",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 消息表格数据
xbmessageList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
id: null,
type: null,
content: null
},
// 表单参数
form: {},
// 表单校验
rules: {
type: [
{ required: true, message: "消息类型不能为空", trigger: "blur" }
],
content: [
{ required: true, message: "消息内容不能为空", trigger: "blur" }
]
},
// 子消息详情对话框
childDetailVisible: false,
// 当前查看的子消息
currentChild: {},
// 消息详情对话框
messageDetailVisible: false,
// 当前查看的消息详情
currentMessageDetail: {},
// 统计数据
statistics: null
};
},
created() {
this.getList();
},
methods: {
/** 查询消息列表 */
getList() {
this.loading = true;
listXbmessage(this.queryParams).then(response => {
this.xbmessageList = this.normalizeList(response.rows || []);
this.total = response.total;
this.loading = false;
console.log("接口返回数据:", response);
// 处理统计数据
this.processStatistics(response);
});
},
/** 归一化列表数据(解决 children 字段结构不同) */
normalizeList(rows) {
if (!Array.isArray(rows)) return [];
return rows.map(parent => {
const normalized = { ...parent };
if (Array.isArray(parent.children) && parent.children.length > 0) {
normalized.children = parent.children.map(child => {
// 如果接口已经提供了这些字段直接使用否则从jsonQueryResult中解析
const parsedQuery = this.safeJsonParse(child.jsonQueryResult);
const firstPrice = child.firstPrice ||
parsedQuery?.priceInfo?.lowestCouponPrice ||
parsedQuery?.priceInfo?.price ||
parsedQuery?.purchasePriceInfo?.purchasePrice ||
null;
return {
...child,
firstSkuName: child.firstSkuName || child.skuName || parsedQuery?.skuName || null,
firstPrice: firstPrice,
firstLine: child.firstLine || child.skuName || parsedQuery?.skuName || null
}
});
// 父级信息:优先使用接口提供的字段,否则从子项中获取
const firstChild = normalized.children[0];
normalized.firstSkuName = normalized.firstSkuName || firstChild?.firstSkuName || null;
normalized.firstPrice = normalized.firstPrice || firstChild?.firstPrice || null;
normalized.firstLine = normalized.firstLine || firstChild?.firstLine || null;
}
return normalized;
});
},
/** 安全 JSON 解析 */
safeJsonParse(str) {
if (!str || typeof str !== 'string') return null;
try {
return JSON.parse(str);
} catch (e) {
return null;
}
},
/** 显示消息详情 */
showMessageDetail(message) {
this.currentMessageDetail = message;
this.messageDetailVisible = true;
},
/** 显示子消息详情 */
showChildDetail(child) {
this.currentChild = child;
this.childDetailVisible = true;
},
/** 从JSON字符串中安全获取嵌套值 */
getJsonValue(jsonStr, path) {
try {
const obj = typeof jsonStr === 'string' ? JSON.parse(jsonStr) : jsonStr;
if (!obj) return null;
const keys = path.split('.');
let value = obj;
for (const key of keys) {
if (value && typeof value === 'object' && key in value) {
value = value[key];
} else {
return null;
}
}
return value;
} catch (e) {
return null;
}
},
/** 获取分类路径 */
getCategoryPath(jsonStr) {
try {
const obj = typeof jsonStr === 'string' ? JSON.parse(jsonStr) : jsonStr;
if (!obj?.categoryInfo) return null;
const { cid1Name, cid2Name, cid3Name } = obj.categoryInfo;
return [cid1Name, cid2Name, cid3Name].filter(Boolean).join(' > ');
} catch (e) {
return null;
}
},
/** 解析优惠券列表 */
parseCouponList(couponListStr) {
try {
if (!couponListStr || couponListStr === '[]') return [];
const coupons = typeof couponListStr === 'string' ? JSON.parse(couponListStr) : couponListStr;
return Array.isArray(coupons) ? coupons : [];
} catch (e) {
return [];
}
},
/** 转换时间戳为可读时间 */
formatTimestamp(timestamp) {
if (!timestamp) return '-';
try {
// 如果是时间戳(数字),转换为日期
if (typeof timestamp === 'number') {
return this.parseTime(timestamp);
}
// 如果是字符串,尝试解析
if (typeof timestamp === 'string') {
const num = parseInt(timestamp);
if (!isNaN(num)) {
return this.parseTime(num);
}
// 如果不是数字字符串,直接返回
return timestamp;
}
return '-';
} catch (e) {
return '-';
}
},
/** 处理统计数据 */
processStatistics(response) {
if (response.rows && response.rows.length > 0) {
const data = response.rows;
const typeSet = new Set(data.map(item => item.type).filter(Boolean));
// 计算子消息总数
let childrenCount = 0;
data.forEach(item => {
if (item.children && Array.isArray(item.children)) {
childrenCount += item.children.length;
}
});
// 计算有效消息数(有内容的消息)
const validCount = data.filter(item => item.content && item.content.trim()).length;
this.statistics = {
total: response.total || data.length,
childrenCount: childrenCount,
typeCount: typeSet.size,
validCount: validCount
};
} else {
this.statistics = {
total: 0,
childrenCount: 0,
typeCount: 0,
validCount: 0
};
}
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
type: null,
content: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加消息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getXbmessage(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改消息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateXbmessage(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addXbmessage(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除消息编号为"' + ids + '"的数据项?').then(function() {
return delXbmessage(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('system/xbmessage/export', {
...this.queryParams
}, `xbmessage_${new Date().getTime()}.xlsx`)
}
}
};
</script>
<style scoped>
.statistics-card {
text-align: center;
padding: 10px;
}
.statistics-title {
font-size: 14px;
color: #666;
margin-bottom: 8px;
}
.statistics-value {
font-size: 24px;
font-weight: bold;
color: #409EFF;
}
.mb20 {
margin-bottom: 20px;
}
</style>