为什么下面的数据有些在接口里面没有,但是通过搜索可以找到:<template>
<div class="app-container">
<el-card class="box-card">
<div class="tab_box">
<div><a style="font-size: 15px;">状态选择:</a></div>
<div v-for="(item, index) in tabList" :key="item.id" @click="toChangeTab(index)">
<div class="tab_item" :class="{ 'activ_tab': activeTab == index }">{{ item.name }}</div>
</div>
</div>
<el-form :model="queryParams" size="small" :inline="true" v-show="showSearch">
<el-form-item label="团购名称" prop="name">
<el-input v-model="queryParams.name" placeholder="请填写" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="发布人" prop="username">
<el-input v-model="queryParams.username" filterable placeholder="请填写">
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
<el-button size="mini" @click="resetQuery">重置</el-button>
<el-button icon="el-icon-plus" size="mini" @click="addGroup" type="primary" plain
v-hasPermi="['solitaire:list:add']">新增</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="box-card">
<el-row :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table :data="dataList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="介绍图片" align="center" prop="cover">
<template slot-scope="scope">
<ImageSizeBox :data="scope.row.cover" size="sl" fit="fit" />
</template>
</el-table-column>
<el-table-column label="团购名称" align="center" prop="name">
<!-- <template slot-scope="scope">
{{ scope.row.name }}
</template> -->
<template slot-scope="scope"> <a href="javascript:;" @click="handleUpdate(scope.row, 'check')" style="color:#007bff;">
{{ scope.row.name }}
</a></template>
</el-table-column>
<el-table-column label="发布人" align="center" prop="username">
<template slot-scope="scope">
{{ scope.row.username }}
</template>
</el-table-column>
<el-table-column label="截止日期" align="center" prop="endTime" width="180">
<template slot-scope="scope">
<span>{{ scope.row.endTime }}</span>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="startTime" width="180">
<template slot-scope="scope">
<span>{{ scope.row.startTime }}</span>
</template>
</el-table-column>
<el-table-column label="最大接龙人数" align="center" prop="maxJoinNum" width="180">
<template slot-scope="scope">
<span>{{ scope.row.maxJoinNum }}</span>
</template>
</el-table-column>
<el-table-column label="参与人数" align="center" prop="joinNum" width="180">
<template slot-scope="scope">
<span>{{ scope.row.joinNum }}</span>
</template>
</el-table-column>
<!-- <el-table-column label="接龙状态" align="center" prop="signEndDatetime" width="180">
<template slot-scope="scope">
<span>{{ scope.row.signEndDatetime }}</span>
</template>
</el-table-column> -->
<el-table-column label="接龙状态" align="center" prop="status">
<template slot-scope="scope">
<el-tag v-if="scope.row.status == 0">未开始</el-tag>
<el-tag v-if="scope.row.status == 1">进行中</el-tag>
<el-tag v-if="scope.row.status == 2">已暂停</el-tag>
<el-tag v-if="scope.row.status == 3">已结束</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" v-if="scope.row.status == '1'" icon="el-icon-upload2"
@click="handleOrderExport(scope)" v-hasPermi="['solitaire:list:export']">数据导出
</el-button>
<el-button size="mini" type="text" v-if="scope.row.status == '1'" icon="el-icon-edit"
@click="handleend(scope.row.id, scope)" v-hasPermi="['solitaire:list:end']">结束接龙
</el-button>
<el-button size="mini" type="text" v-if="[0, 2].includes(scope.row.status)" icon="el-icon-edit"
@click="handlestart(scope.row.id, scope)" v-hasPermi="['solitaire:list:start']">开始接龙
</el-button>
<el-button size="mini" type="text" v-if="scope.row.status == '1'" icon="el-icon-edit"
@click="handlepause(scope.row.id, scope.row.status)" v-hasPermi="['solitaire:list:pause']">暂停接龙
</el-button>
<el-button size="mini" type="text" v-if="scope.row.status == '2' || scope.row.status == '0'"
icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['solitaire:list:fix']">修改
</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row, 'check')"
v-hasPermi="['solitaire:list:fix']">详情
</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.id)"
v-hasPermi="['solitaire:list:delete']">删除
</el-button>
<el-button size="mini" type="text" v-if="scope.row.status != '4'" icon="el-icon-s-order"
@click="orderMessage(scope)" v-hasPermi="['solitaire:list:order']">订单信息
</el-button>
<el-button size="mini" type="text" v-if="scope.row.status != '4'" icon="el-icon-goods"
@click="productMessage(scope)" v-hasPermi="['solitaire:list:shopmessage']">商品信息
</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-card>
</div>
</template>
<script>
import {
listActivity,
getActivity,
delActivity,
addActivity,
updateActivity,
uploadPic,
deljob,
deny, pass, activitynormalList,
checkActivity
} from '@/api/activity/activity'
import { imgUrl } from '@/utils/request'
import { listUser, teamlist } from '@/api/user/user'
import { addGroupShop, deleteGroupBuy, editStatusGroupBuy, exportGroupBuyOrderPage, listGroupShop } from '@/api/solitaire/solitaire';
import { orderPage } from '@/api/groupBuyApi';
export default {
name: 'Solitaire',
data() {
return {
// tabs
tabLoading: false, // 添加此声明解决警告
activeTab: 0,
tabList: [
{
name: '全部',
status: null
},
{
name: '未开始',
status: 0
}, {
name: '运行中',
status: 1
}, {
name: '已暂停',
status: 2
},
{
name: '已结束',
status: 3
}
],
// 图片前缀
imgUrl: imgUrl,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 列表表格数据
dataList: [],
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 查询参数
// for
currten: {
pageNum: 1,
pageSize: 10
},
//分页
column: {
pageSize: null,
pageNum: null
},
queryParams: {
name: null,
status: null,
username: null,
pageNum: 1,
pageSize: 10
// activityName: null,
// teamId: null,
// status: 1,
// type: 0
},
// 表单参数
form: { //封面
cover: imgUrl,
//团购信息
detailInfo: "",
//结束时间
endTime: "",
//id
id: 0,
//参与人数
joinNum: 0,
//最大参与人数
maxJoinNum: 0,
//团购名称
name: "",
//真实结束时间
realEndTime: "",
//开始时间
startTime: "",
//状态
status: 0,
//发布人
username: 0,
},
// 活动详情的类型(normal是正常活动的详情,supply是补录的活动详情)
detailType: 'normal'
}
},
created() {
this.getList()
// this.gettemn()
},
methods: {
orderMessage(scope) {
console.log(scope.row.id, '00')
this.$router.push({ path: '/solitaire/ListOrder', query: { id: scope.row.id } })
},
productMessage(scope) {
console.log(scope.row.id, '00')
this.$router.push({ path: '/solitaire/ListShopMessage', query: { id: scope.row.id } })
},
// exportCardUseInfoHandle() {
// exportCardUseInfo({ cardId: this.$route.query.id }).then(res => {
// const blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
// const contentDisposition = res.headers['content-disposition']
// const patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
// const result = patt.exec(contentDisposition)
// const $link = document.createElement('a')
// $link.href = URL.createObjectURL(blob)
// $link.download = decodeURIComponent(result[1])
// $link.click()
// document.body.appendChild($link)
// document.body.removeChild($link) // 下载完成移除元素
// window.URL.revokeObjectURL($link.href) // 释放掉blob对象
// })
// },
handleOrderExport(scope) {
console.log(scope, '00')
let parmas = {
// storeId: localStorage.getItem("shopId"),
parentId: parseInt(scope.row.id),
}
console.log(parmas, 'parmasparmas')
exportGroupBuyOrderPage(parmas).then(res => {
console.log(res, '939')
const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
// const contentDisposition =res.headers['content-disposition']
// const patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
// const result = patt.exec(contentDisposition)
const $link = document.createElement('a')
$link.href = URL.createObjectURL(blob)
$link.download = "接龙团购.xlsx"
$link.click()
document.body.appendChild($link)
document.body.removeChild($link) // 下载完成移除元素
window.URL.revokeObjectURL($link.href) // 释放掉blob对象
})
},
// toDetail(scope){
// console.log(scope,'47')
// const params={
// parentId:parseInt(scope.row.id),
// }
// exportGroupBuyOrderPage(params).then(res=>{
// console.log(res,'000')
// })
// },
handleQuery() {
console.log(this.queryParams, '94')
this.queryParams.username
this.queryParams.name
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.name = null
this.queryParams.id = null
this.handleQuery()
},
getList() {
this.loading = true;
// 构建符合后端要求的参数
const params = {
name: this.queryParams.name,
username: this.queryParams.username,
pageNum: this.queryParams.pageNum,
pageSize: this.queryParams.pageSize,
// 确保 status 是整数或 undefined
status: this.queryParams.status !== null && this.queryParams.status !== undefined
? Number(this.queryParams.status)
: undefined
};
listGroupShop(params).then(res => {
this.dataList = res.pageData || [];
this.total = parseInt(res.total) || 0;
// 同步分页参数
if (res.pageNum) this.queryParams.pageNum = res.pageNum;
if (res.pageSize) this.queryParams.pageSize = res.pageSize;
}).catch(error => {
console.error("列表获取失败:", error);
this.$modal.msgError("数据加载失败");
this.dataList = [];
this.total = 0;
}).finally(() => {
this.loading = false;
});
},
// tab栏切换
async toChangeTab(index) {
// 当前已经是选中状态时跳过
if (this.activeTab === index) return;
// 更新当前激活标签
this.activeTab = index;
// 提取选中的状态值
const selectedStatus = this.tabList[index].status;
// 设置查询参数
this.queryParams = {
...this.queryParams,
status: selectedStatus,
pageNum: 1 // 重置到第一页
};
// 添加加载状态反馈
this.$set(this, 'tabLoading', true);
try {
await this.getList();
} catch (error) {
console.error("状态切换失败:", error);
this.$modal.msgError("列表加载失败");
} finally {
this.$set(this, 'tabLoading', false);
}
},
addGroup() {
this.$router.push({ path: '/solitaire/form', query: { } })
},
checkList(e) {
console.error(e)
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.name = null
this.queryParams.username = null
this.handleQuery()
},
handlestart(id, scope) {
console.log('000', id, scope.row.status)
const that = this
this.$modal.confirm('是否确认修改团购状态?').then(function () {
editStatusGroupBuy(id, 1).then(res => {
that.getList()
that.$modal.msgSuccess('修改成功')
})
})
},
handleend(id, scope) {
console.log('000', id, scope)
const that = this
this.$modal.confirm('是否确认修改团购状态?').then(function () {
editStatusGroupBuy(id, 3).then(res => {
that.getList()
that.$modal.msgSuccess('修改成功')
})
})
},
handlepause(id, scope) {
console.log('000', id, scope)
const that = this
this.$modal.confirm('是否确认修改团购状态?').then(function () {
editStatusGroupBuy(id, 2).then(res => {
that.getList()
that.$modal.msgSuccess('修改成功')
})
})
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.pkId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 修改按钮操作 */
handleUpdate(row, type) {
this.$router.push({ path: '/solitaire/form', query: { id: row.id, type } })
},
openApproval() {
console.log('00')
this.$router.push({ path: '/solitaire/listordermessage' })
},
// 时长录入
/** 删除按钮操作 */
handleDelete(id) {
console.log('000', id)
this.$modal.confirm('是否确认删除该团购?').then(function () {
return deleteGroupBuy(id)
}).then(() => {
this.getList()
this.$modal.msgSuccess('删除成功')
}).catch(() => {
})
},
/** 导出按钮操作 */
handleExport() {
this.title = '补录'
this.open = true
},
// 补录删除志愿者
deleteUser(e, p) {
this.form.jobUserVOS[e].jobUsers.splice(p, 1)
this.$modal.msgSuccess('删除成功')
},
// 批量审批通过
handleApprovalPass() {
if (this.ids.length == 0) {
this.$modal.msgError('请选择批量审批通过的活动')
} else {
pass({ activityIds: this.ids.join(',') }).then(res => {
console.log(res)
this.$modal.msgSuccess('批量同意成功')
this.getList()
this.ids = []
})
}
},
// 批量审批拒绝
handleApprovalDeny() {
if (this.ids.length == 0) {
this.$modal.msgError('请选择批量审批拒绝的活动')
} else {
this.$prompt('请填写拒绝原因', '提示', {
confirmButtonText: '确定拒绝审批',
cancelButtonText: '取消',
}).then(({ value }) => {
deny({ activityIds: this.ids.join(','), remark: value }).then(res => {
this.$modal.msgSuccess('批量拒绝成功')
this.getList()
this.ids = []
})
})
}
},
handleUpdatepass(e) {
pass(e.pkId).then(res => {
if (res.code === 200) {
this.getList()
this.$modal.msgSuccess('同意成功')
}
})
},
handleDeletedeny(e) {
deny(e.pkId).then(res => {
if (res.code === 200) {
this.$modal.msgSuccess('拒绝成功')
}
})
},
// teamList(e) {
// console.error(e)
// this.userqueryParams.teamId = e
// listUser(this.userqueryParams, this.column).then(response => {
// this.userList = response.pageData
// })
// }
}
}
</script>
<style lang="scss" scoped>
.box-card+.box-card {
margin-top: 15px;
}
</style>
<style>
.tab_box {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 30px;
}
.tab_item {
margin-right: 10px;
padding: 10px 20px;
background-color: #f3eded;
font-size: 16px;
border-radius: 5px;
}
.activ_tab {
color: #fff;
font-weight: 700;
background-color: #409EFF;
}
.avatar-uploader .el-upload {
border: 1px solid #f8f3f3;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
}
.avatar {
width: 120px;
height: 120px;
display: block;
}
.input {
width: 220px;
}
.dialog-custom-class {
position: fixed;
top: 0;
right: 0;
height: 100%;
margin: 0;
padding: 0;
z-index: 9999;
}
</style>