<template>
|
<div class="wrapper">
|
<Card class="user-action-card">
|
<Row @keydown.enter.native="handleSearch">
|
<Form ref="searchForm" :model="searchForm" inline :label-width="80" style="width: 100%" class="search-form">
|
<Form-item label="用户昵称" prop="userName">
|
<Input type="text" v-model="searchForm.userName" placeholder="请输入用户昵称" clearable style="width: 200px" />
|
</Form-item>
|
<!-- <Form-item label="页面类型" prop="pageCode">-->
|
<!-- <Select-->
|
<!-- v-model="searchForm.pageCode"-->
|
<!-- clearable-->
|
<!-- filterable-->
|
<!-- style="width: 200px"-->
|
<!-- placeholder="请选择页面类型">-->
|
<!-- <Option-->
|
<!-- v-for="item in pageTypeOptions"-->
|
<!-- :key="item.value"-->
|
<!-- :value="item.value"-->
|
<!-- :label="item.label">-->
|
<!-- {{ item.label }}-->
|
<!-- </Option>-->
|
<!-- </Select>-->
|
<!-- </Form-item>-->
|
<Form-item label="开始时间" prop="beginDate">
|
<DatePicker
|
v-model="searchForm.beginDate"
|
type="datetime"
|
placeholder="请选择开始时间"
|
style="width: 200px">
|
</DatePicker>
|
</Form-item>
|
<Form-item label="结束时间" prop="endDate">
|
<DatePicker
|
v-model="searchForm.endDate"
|
type="datetime"
|
placeholder="请选择结束时间"
|
style="width: 200px">
|
</DatePicker>
|
</Form-item>
|
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
<Button @click="handleReset" type="default" class="search-btn">重置</Button>
|
</Form>
|
</Row>
|
<div class="table-container">
|
<Table
|
:loading="loading"
|
border
|
:columns="columns"
|
:data="data"
|
ref="table">
|
</Table>
|
</div>
|
<Row type="flex" justify="end" class="mt_10">
|
<Page
|
:current="searchForm.pageNumber"
|
:total="total"
|
:page-size="searchForm.pageSize"
|
@on-change="changePage"
|
@on-page-size-change="changePageSize"
|
:page-size-opts="[10, 20, 50]"
|
size="small"
|
show-total
|
show-elevator
|
show-sizer>
|
</Page>
|
</Row>
|
</Card>
|
|
<!-- 用户行为详情弹窗 -->
|
<Modal
|
v-model="detailModalVisible"
|
title="用户行为详情"
|
width="80%"
|
:loading="detailLoading"
|
:footer-hide="true">
|
<Spin size="large" fix v-if="detailLoading"></Spin>
|
<div v-else>
|
<!-- 详情筛选条件 -->
|
<Row @keydown.enter.native="handleDetailSearch">
|
<Form ref="detailSearchForm" :model="detailSearchForm" inline :label-width="80" style="width: 100%" class="search-form">
|
<!-- <Form-item label="用户昵称" prop="userName">-->
|
<!-- <Input type="text" v-model="detailSearchForm.userName" placeholder="请输入用户昵称" clearable style="width: 200px" />-->
|
<!-- </Form-item>-->
|
<Form-item label="页面类型" prop="pageCode">
|
<Select
|
v-model="detailSearchForm.pageCode"
|
clearable
|
filterable
|
style="width: 200px"
|
placeholder="请选择页面类型">
|
<Option
|
v-for="item in pageTypeOptions"
|
:key="item.value"
|
:value="item.value"
|
:label="item.label">
|
{{ item.label }}
|
</Option>
|
</Select>
|
</Form-item>
|
<Form-item label="开始时间" prop="beginDate">
|
<DatePicker
|
v-model="detailSearchForm.beginDate"
|
type="datetime"
|
placeholder="请选择开始时间"
|
style="width: 200px">
|
</DatePicker>
|
</Form-item>
|
<Form-item label="结束时间" prop="endDate">
|
<DatePicker
|
v-model="detailSearchForm.endDate"
|
type="datetime"
|
placeholder="请选择结束时间"
|
style="width: 200px">
|
</DatePicker>
|
</Form-item>
|
<Button @click="handleDetailSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
<Button @click="handleDetailReset" type="default" class="search-btn">重置</Button>
|
</Form>
|
</Row>
|
<div class="table-container">
|
<Table
|
:loading="detailTableLoading"
|
border
|
:columns="detailColumns"
|
:data="detailData"
|
ref="detailTable">
|
</Table>
|
</div>
|
<Row type="flex" justify="end" class="mt_10">
|
<Page
|
:current="detailSearchForm.pageNumber"
|
:total="detailTotal"
|
:page-size="detailSearchForm.pageSize"
|
@on-change="changeDetailPage"
|
@on-page-size-change="changeDetailPageSize"
|
:page-size-opts="[10, 20, 50]"
|
size="small"
|
show-total
|
show-elevator
|
show-sizer>
|
</Page>
|
</Row>
|
</div>
|
</Modal>
|
</div>
|
</template>
|
|
<script>
|
import { userStayList, userStayListRecord } from "@/api/userAction";
|
import { formatDate } from "@/utils/filters";
|
|
export default {
|
name: "userAction",
|
data() {
|
// 设置默认时间改为最近7天
|
const now = new Date();
|
const endTime = new Date(now);
|
endTime.setHours(23, 59, 59, 999);
|
|
// 开始时间为7天前（包含今天，总共7天）
|
const startTime = new Date(now);
|
startTime.setDate(startTime.getDate() - 6);
|
startTime.setHours(0, 0, 0, 0);
|
|
console.log("默认开始时间(最近7天):", startTime);
|
console.log("默认结束时间:", endTime);
|
console.log("开始时间类型:", typeof startTime);
|
console.log("结束时间类型:", typeof endTime);
|
|
// 验证日期格式化是否正常工作
|
try {
|
const formattedStart = formatDate(startTime, 'yyyy-MM-dd hh:mm:ss');
|
const formattedEnd = formatDate(endTime, 'yyyy-MM-dd hh:mm:ss');
|
console.log("默认开始时间格式化结果:", formattedStart);
|
console.log("默认结束时间格式化结果:", formattedEnd);
|
} catch (e) {
|
console.error("初始化时日期格式化出错:", e);
|
}
|
|
return {
|
loading: false, // 默认不加载
|
searchForm: {
|
pageNumber: 1,
|
pageSize: 10,
|
userName: "",
|
pageCode: "",
|
beginDate: startTime,
|
endDate: endTime
|
},
|
// 页面类型选项（用于下拉框）
|
pageTypeOptions: [
|
{ value: "RECOMMEND_VIDEO", label: "首页推荐视频" },
|
{ value: "HEALTH_VIDEO", label: "大健康视频" },
|
{ value: "KITCHEN_VIDEO", label: "神厨视频" },
|
{ value: "RECOMMEND_VIDEO_GOODS", label: "视频推荐商品页面" },
|
{ value: "RECOMMEND_VIDEO_LEFT_GOODS", label: "左滑推荐商品" },
|
{ value: "RECOMMEND_VIDEO_RIGHT_VIDEO", label: "右滑视频页面" },
|
{ value: "FILL_ORDER", label: "填写订单" },
|
{ value: "PAY_ORDER", label: "支付订单" },
|
{ value: "PAY_SUCCESS", label: "支付成功" },
|
{ value: "ORDER_LIST", label: "订单列表" },
|
{ value: "ORDER_DETAIL", label: "订单详情" },
|
{ value: "PRIZE_DETAIL", label: "抽奖活动" },
|
{ value: "CART_LIST", label: "购物车" },
|
{ value: "TBA_BAR_MY", label: "我的页面" },
|
{ value: "SHOPPING_SQUARE", label: "商品广场" },
|
{ value: "ACTIVITY_LIST", label: "活动列表" },
|
{ value: "ACTIVITY_DETAIL", label: "活动详情" },
|
{ value: "PUBLISH_VIDEO", label: "视频发布" },
|
{ value: "SWIPER_GOODS", label: "滑动商品" },
|
{ value: "COUPON_CENTER", label: "领卷中心" },
|
{ value: "MY_COUPON", label: "我的优惠卷" },
|
{ value: "AFTER_SALE", label: "售后列表" },
|
{ value: "APPLY_SALE", label: "申请售后" },
|
{ value: "REFUND_ORDER", label: "退款/退货" },
|
{ value: "GOODS_DETAILS", label: "商品详情页面" }
|
],
|
columns: [
|
{
|
title: "用户id",
|
key: "userId",
|
minWidth: 120
|
},
|
{
|
title: "用户昵称",
|
key: "nickName",
|
minWidth: 100
|
},
|
{
|
title: "页面类型",
|
key: "pageCode",
|
minWidth: 150,
|
render: (h, params) => {
|
const pageCodes = {
|
"RECOMMEND_VIDEO": "首页推荐视频",
|
"HEALTH_VIDEO": "大健康视频",
|
"KITCHEN_VIDEO": "神厨视频",
|
"RECOMMEND_VIDEO_GOODS": "视频推荐商品页面",
|
"RECOMMEND_VIDEO_LEFT_GOODS": "左滑推荐商品",
|
"RECOMMEND_VIDEO_RIGHT_VIDEO": "右滑视频页面",
|
"FILL_ORDER": "填写订单",
|
"PAY_ORDER": "支付订单",
|
"PAY_SUCCESS": "支付成功",
|
"ORDER_LIST": "订单列表",
|
"ORDER_DETAIL": "订单详情",
|
"PRIZE_DETAIL": "抽奖活动",
|
"CART_LIST": "购物车",
|
"TBA_BAR_MY": "我的页面",
|
"SHOPPING_SQUARE": "商品广场",
|
"ACTIVITY_LIST": "活动列表",
|
"ACTIVITY_DETAIL": "活动详情",
|
"PUBLISH_VIDEO": "视频发布",
|
"SWIPER_GOODS": "滑动商品",
|
"COUPON_CENTER": "领卷中心",
|
"MY_COUPON": "我的优惠卷",
|
"AFTER_SALE": "售后列表",
|
"APPLY_SALE": "申请售后",
|
"REFUND_ORDER": "退款/退货",
|
"GOODS_DETAILS": "商品详情页面"
|
};
|
return h('span', pageCodes[params.row.pageCode] || params.row.pageCode);
|
}
|
},
|
{
|
title: "进入时间",
|
key: "startTime",
|
minWidth: 160
|
},
|
{
|
title: "操作",
|
key: "action",
|
width: 150,
|
align: "center",
|
render: (h, params) => {
|
// 添加查看详情按钮
|
return h('div', [
|
h('Button', {
|
props: {
|
type: 'primary',
|
size: 'small'
|
},
|
on: {
|
click: () => {
|
this.showDetailModal(params.row.userId);
|
}
|
}
|
}, '查看'),
|
// 只有当页面类型是商品详情页面时才显示跳转按钮
|
params.row.pageCode === "GOODS_DETAILS" && params.row.pageParams ? h('Button', {
|
props: {
|
type: 'primary',
|
size: 'small',
|
style: { marginLeft: '5px' }
|
},
|
on: {
|
click: () => {
|
// 修改：使用新窗口打开商品详情页面，保留弹窗
|
this.openGoodsDetailInNewTab(params.row.pageParams);
|
}
|
}
|
}, '查看商品详情') : null,
|
// 当页面类型是订单详情页面时显示跳转按钮
|
params.row.pageCode === "ORDER_DETAIL" && params.row.pageParams ? h('Button', {
|
props: {
|
type: 'primary',
|
size: 'small',
|
style: { marginLeft: '5px' }
|
},
|
on: {
|
click: () => {
|
// 修改：使用新窗口打开订单详情页面，保留弹窗
|
this.openOrderDetailInNewTab(params.row.pageParams);
|
}
|
}
|
}, '查看订单详情') : null
|
].filter(item => item !== null));
|
}
|
}
|
],
|
data: [],
|
total: 0,
|
// 详情弹窗相关数据
|
detailModalVisible: false,
|
detailLoading: false,
|
detailTableLoading: false,
|
detailSearchForm: {
|
pageNumber: 1,
|
pageSize: 10,
|
userId: "",
|
userName: "",
|
pageCode: "",
|
beginDate: startTime,
|
endDate: endTime
|
},
|
detailColumns: [
|
{
|
title: "用户Id",
|
key: "userId",
|
minWidth: 120
|
},
|
{
|
title: "用户昵称",
|
key: "nickName",
|
minWidth: 100
|
},
|
|
{
|
title: "页面类型",
|
key: "pageCode",
|
minWidth: 150,
|
render: (h, params) => {
|
const pageCodes = {
|
"RECOMMEND_VIDEO": "首页推荐视频",
|
"HEALTH_VIDEO": "大健康视频",
|
"KITCHEN_VIDEO": "神厨视频",
|
"RECOMMEND_VIDEO_GOODS": "视频推荐商品页面",
|
"RECOMMEND_VIDEO_LEFT_GOODS": "左滑推荐商品",
|
"RECOMMEND_VIDEO_RIGHT_VIDEO": "右滑视频页面",
|
"FILL_ORDER": "填写订单",
|
"PAY_ORDER": "支付订单",
|
"PAY_SUCCESS": "支付成功",
|
"ORDER_LIST": "订单列表",
|
"ORDER_DETAIL": "订单详情",
|
"PRIZE_DETAIL": "抽奖活动",
|
"CART_LIST": "购物车",
|
"TBA_BAR_MY": "我的页面",
|
"SHOPPING_SQUARE": "商品广场",
|
"ACTIVITY_LIST": "活动列表",
|
"ACTIVITY_DETAIL": "活动详情",
|
"PUBLISH_VIDEO": "视频发布",
|
"SWIPER_GOODS": "滑动商品",
|
"COUPON_CENTER": "领卷中心",
|
"MY_COUPON": "我的优惠卷",
|
"AFTER_SALE": "售后列表",
|
"APPLY_SALE": "申请售后",
|
"REFUND_ORDER": "退款/退货",
|
"GOODS_DETAILS": "商品详情页面"
|
};
|
return h('span', pageCodes[params.row.pageCode] || params.row.pageCode);
|
}
|
},
|
{
|
title: "进入时间",
|
key: "enterTime",
|
minWidth: 160
|
},
|
{
|
title: "离开时间",
|
key: "leaveTime",
|
minWidth: 160
|
},
|
{
|
title: "停留时长(秒)",
|
key: "staySeconds",
|
minWidth: 120
|
},
|
{
|
title: "操作",
|
key: "action",
|
width: 150,
|
align: "center",
|
render: (h, params) => {
|
// 只有当页面类型是商品详情页面时才显示跳转按钮
|
if (params.row.pageCode === "GOODS_DETAILS" && params.row.pageParams) {
|
return h('div', [
|
h('Button', {
|
props: {
|
type: 'primary',
|
size: 'small'
|
},
|
on: {
|
click: () => {
|
// 修改：使用新窗口打开商品详情页面，保留弹窗
|
this.openGoodsDetailInNewTab(params.row.pageParams);
|
}
|
}
|
}, '查看商品详情')
|
]);
|
}
|
// 当页面类型是订单详情页面时显示跳转按钮
|
if (params.row.pageCode === "ORDER_DETAIL" && params.row.pageParams) {
|
return h('div', [
|
h('Button', {
|
props: {
|
type: 'primary',
|
size: 'small'
|
},
|
on: {
|
click: () => {
|
// 修改：使用新窗口打开订单详情页面，保留弹窗
|
this.openOrderDetailInNewTab(params.row.pageParams);
|
}
|
}
|
}, '查看订单详情')
|
]);
|
}
|
return h('span', '-');
|
}
|
}
|
],
|
detailData: [],
|
detailTotal: 0
|
};
|
},
|
methods: {
|
// 初始化数据
|
init() {
|
console.log("执行init方法，准备加载数据");
|
// 页面初始化时直接调用，检查时间参数
|
this.$nextTick(() => {
|
console.log("init方法中的nextTick回调，调用getDataListWithoutValidation");
|
this.getDataListWithoutValidation();
|
});
|
},
|
// 获取最近7天的开始时间（包含今天，总共7天）
|
getDefaultBeginDate() {
|
const now = new Date();
|
const startTime = new Date(now);
|
startTime.setDate(startTime.getDate() - 6); // 7天前，包含今天
|
startTime.setHours(0, 0, 0, 0);
|
return startTime;
|
},
|
// 获取当天结束时间
|
getDefaultEndDate() {
|
const now = new Date();
|
now.setHours(23, 59, 59, 999);
|
return now;
|
},
|
// 不进行表单验证的数据获取
|
getDataListWithoutValidation() {
|
this.loading = true;
|
console.log("开始请求数据:", this.searchForm);
|
console.log("开始时间值:", this.searchForm.beginDate);
|
console.log("结束时间值:", this.searchForm.endDate);
|
console.log("开始时间类型:", typeof this.searchForm.beginDate);
|
console.log("结束时间类型:", typeof this.searchForm.endDate);
|
|
// 检查时间参数是否为空
|
if (!this.searchForm.beginDate) {
|
console.log("开始时间为空");
|
}
|
if (!this.searchForm.endDate) {
|
console.log("结束时间为空");
|
}
|
|
// 处理时间格式，使用正确的参数名称beginDate和endDate
|
const params = { ...this.searchForm };
|
if (params.beginDate) {
|
params.beginDate = this.formatDate(params.beginDate);
|
console.log("格式化后的开始时间:", params.beginDate);
|
} else {
|
this.loading = false;
|
this.$Message.error("开始时间不能为空");
|
return;
|
}
|
if (params.endDate) {
|
params.endDate = this.formatDate(params.endDate);
|
console.log("格式化后的结束时间:", params.endDate);
|
} else {
|
this.loading = false;
|
this.$Message.error("结束时间不能为空");
|
return;
|
}
|
|
console.log("最终请求参数:", params);
|
|
userStayListRecord(params).then(res => {
|
console.log("请求成功:", res);
|
if (res.code === 200) {
|
this.data = res.data.records || [];
|
this.total = res.data.total || 0;
|
console.log("数据加载完成，记录数:", this.data.length);
|
} else {
|
this.$Message.error(res.msg || "获取数据失败");
|
console.error("获取数据失败:", res.msg || "未知错误");
|
}
|
}).catch(err => {
|
console.error("请求失败:", err);
|
this.$Message.error("请求异常: " + (err.message || "未知错误"));
|
}).finally(() => {
|
// 确保在任何情况下都关闭loading状态
|
this.loading = false;
|
console.log("请求完成，loading状态已关闭");
|
});
|
},
|
// 带表单验证的数据获取
|
getDataList() {
|
this.$refs.searchForm.validate((valid) => {
|
if (valid) {
|
this.getDataListWithoutValidation();
|
} else {
|
this.loading = false; // 验证失败时也要关闭loading
|
this.$Message.error("请检查表单输入是否正确");
|
}
|
});
|
},
|
// 格式化日期时间
|
formatDate(date) {
|
if (!date) {
|
console.warn("日期格式化时传入了空值");
|
return "";
|
}
|
try {
|
const formattedDate = formatDate(new Date(date), 'yyyy-MM-dd hh:mm:ss');
|
console.log("日期格式化结果:", formattedDate);
|
return formattedDate;
|
} catch (error) {
|
console.error("日期格式化出错:", error);
|
// 如果格式化出错，尝试使用另一种方式
|
try {
|
const d = new Date(date);
|
const year = d.getFullYear();
|
const month = ('0' + (d.getMonth() + 1)).slice(-2);
|
const day = ('0' + d.getDate()).slice(-2);
|
const hours = ('0' + d.getHours()).slice(-2);
|
const minutes = ('0' + d.getMinutes()).slice(-2);
|
const seconds = ('0' + d.getSeconds()).slice(-2);
|
const formatted = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
console.log("备用日期格式化结果:", formatted);
|
return formatted;
|
} catch (backupError) {
|
console.error("备用日期格式化也出错:", backupError);
|
return "";
|
}
|
}
|
},
|
// 改变页数
|
changePage(page) {
|
this.searchForm.pageNumber = page;
|
this.getDataListWithoutValidation();
|
},
|
// 改变页码
|
changePageSize(pageSize) {
|
this.searchForm.pageNumber = 1;
|
this.searchForm.pageSize = pageSize;
|
this.getDataListWithoutValidation();
|
},
|
// 搜索
|
handleSearch() {
|
console.log("搜索按钮被点击");
|
this.searchForm.pageNumber = 1;
|
// 直接检查时间参数，不使用表单验证
|
console.log("开始搜索，检查时间参数");
|
// 检查时间参数是否为空
|
if (!this.searchForm.beginDate || !this.searchForm.endDate) {
|
this.$Message.error("开始时间和结束时间不能为空");
|
return;
|
}
|
this.getDataListWithoutValidation();
|
},
|
// 重置
|
handleReset() {
|
this.searchForm.pageNumber = 1;
|
this.searchForm.pageSize = 10;
|
this.searchForm.userName = "";
|
this.searchForm.pageCode = "";
|
// 使用正确的参数名称和方法
|
this.searchForm.beginDate = this.getDefaultBeginDate();
|
this.searchForm.endDate = this.getDefaultEndDate();
|
// 重置后重新加载数据
|
this.$nextTick(() => {
|
this.getDataListWithoutValidation();
|
});
|
},
|
// 在新标签页中打开商品详情页面
|
openGoodsDetailInNewTab(pageParams) {
|
try {
|
// 解析pageParams JSON字符串
|
const params = JSON.parse(pageParams);
|
console.log("解析后的参数:", params);
|
|
// 检查必要参数
|
if (!params.id || !params.goodsId) {
|
this.$Message.error("商品参数不完整");
|
return;
|
}
|
|
// 构造商品详情页面的URL
|
const routeData = this.$router.resolve({
|
name: "goods-detail",
|
query: {
|
id: params.goodsId
|
}
|
});
|
|
// 在新标签页中打开
|
window.open(routeData.href, '_blank');
|
} catch (error) {
|
console.error("解析pageParams出错:", error);
|
this.$Message.error("参数解析失败");
|
}
|
},
|
// 在新标签页中打开订单详情页面
|
openOrderDetailInNewTab(pageParams) {
|
try {
|
// 解析pageParams JSON字符串
|
const params = JSON.parse(pageParams);
|
console.log("解析后的参数:", params);
|
|
// 检查必要参数
|
if (!params.sn) {
|
this.$Message.error("订单参数不完整");
|
return;
|
}
|
|
// 构造订单详情页面的URL
|
const routeData = this.$router.resolve({
|
name: "order-detail",
|
query: {
|
sn: params.sn
|
}
|
});
|
|
// 在新标签页中打开
|
window.open(routeData.href, '_blank');
|
} catch (error) {
|
console.error("解析pageParams出错:", error);
|
this.$Message.error("参数解析失败");
|
}
|
},
|
// 显示详情弹窗
|
showDetailModal(userId) {
|
this.detailSearchForm.userId = userId;
|
this.detailSearchForm.pageNumber = 1;
|
this.detailSearchForm.userName = "";
|
this.detailSearchForm.pageCode = "";
|
this.detailSearchForm.beginDate = this.getDefaultBeginDate();
|
this.detailSearchForm.endDate = this.getDefaultEndDate();
|
this.detailModalVisible = true;
|
this.getDetailData();
|
},
|
// 获取详情数据
|
getDetailData() {
|
this.detailTableLoading = true;
|
|
// 处理时间格式
|
const params = { ...this.detailSearchForm };
|
if (params.beginDate) {
|
params.beginDate = this.formatDate(params.beginDate);
|
}
|
if (params.endDate) {
|
params.endDate = this.formatDate(params.endDate);
|
}
|
|
// 调用与userAction.vue相同的接口，但增加userId参数
|
userStayList(params).then(res => {
|
if (res.code === 200) {
|
this.detailData = res.data.records || [];
|
this.detailTotal = res.data.total || 0;
|
} else {
|
this.$Message.error(res.msg || "获取详情数据失败");
|
}
|
}).catch(err => {
|
console.error("请求详情数据失败:", err);
|
this.$Message.error("请求异常: " + (err.message || "未知错误"));
|
}).finally(() => {
|
this.detailTableLoading = false;
|
});
|
},
|
// 改变详情页数
|
changeDetailPage(page) {
|
this.detailSearchForm.pageNumber = page;
|
this.getDetailData();
|
},
|
// 改变详情页码
|
changeDetailPageSize(pageSize) {
|
this.detailSearchForm.pageNumber = 1;
|
this.detailSearchForm.pageSize = pageSize;
|
this.getDetailData();
|
},
|
// 详情搜索
|
handleDetailSearch() {
|
this.detailSearchForm.pageNumber = 1;
|
this.getDetailData();
|
},
|
// 详情重置
|
handleDetailReset() {
|
this.detailSearchForm.pageNumber = 1;
|
this.detailSearchForm.pageSize = 10;
|
this.detailSearchForm.userName = "";
|
this.detailSearchForm.pageCode = "";
|
this.detailSearchForm.beginDate = this.getDefaultBeginDate();
|
this.detailSearchForm.endDate = this.getDefaultEndDate();
|
this.getDetailData();
|
}
|
},
|
mounted() {
|
console.log("组件已挂载，开始初始化数据");
|
this.$nextTick(() => {
|
console.log("nextTick回调，调用init方法");
|
this.init();
|
});
|
},
|
// 添加路由监听，处理页面回显问题
|
watch: {
|
$route(to, from) {
|
// 当路由发生变化时，如果当前是userActionRecord页面，则重新加载数据
|
if (to.name === 'user-action-record') {
|
this.$nextTick(() => {
|
this.getDataListWithoutValidation();
|
});
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.search-btn {
|
margin-right: 10px;
|
}
|
.mt_10 {
|
margin-top: 10px;
|
}
|
|
/* 用户行为卡片样式 */
|
.user-action-card {
|
height: calc(100vh - 100px);
|
display: flex;
|
flex-direction: column;
|
}
|
|
/* 表格容器样式 */
|
.table-container {
|
flex: 1;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
}
|
|
/* 表格样式 */
|
.table-container /deep/ .ivu-table-wrapper {
|
flex: 1;
|
overflow-y: auto;
|
height: 100%;
|
}
|
|
/* 搜索表单样式 */
|
.search-form {
|
padding: 16px 0;
|
}
|
|
/* 分页样式 */
|
.mt_10 {
|
padding: 10px 0;
|
}
|
</style>
|
