antis-ncc-admin/src/views/lqEvent/index.vue

<template>
	<div class="NCC-common-layout">
		<div class="NCC-common-layout-center">
			<el-row class="NCC-common-search-box" :gutter="16">
				<el-form @submit.native.prevent>
					<el-col :span="6">
						<el-form-item label="活动名称">
							<el-input v-model="query.eventName" placeholder="请输入活动名称" clearable />
						</el-form-item>
					</el-col>
					<!-- <el-col :span="6">
						<el-form-item label="活动编号">
							<el-input v-model="query.eventNumber" placeholder="请输入活动编号" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="活动负责人">
							<userSelect v-model="query.eventCoordinator" placeholder="请选择活动负责人" />
						</el-form-item>
					</el-col> -->
					<el-col :span="6">
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
							<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<div class="NCC-common-layout-main NCC-flex-main">
				<div class="NCC-common-head">
					<div>
						<el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
						<el-button type="text" icon="el-icon-download" @click="exportData()">导出</el-button>
						<!-- <el-button type="text" icon="el-icon-delete" @click="handleBatchRemoveDel()">批量删除</el-button> -->
					</div>
					<div class="NCC-common-head-right">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="reset()" />
						</el-tooltip>
						<screenfull isContainer />
					</div>
				</div>
				<NCC-table v-loading="listLoading" :data="list" has-c @selection-change="handleSelectionChange">
					<el-table-column prop="eventName" label="活动名称" align="left" show-overflow-tooltip />
					<el-table-column prop="eventNumber" label="活动编号" align="left" show-overflow-tooltip />
					<el-table-column prop="eventType" label="活动类型" align="left">
						<template slot-scope="scope">
							{{ scope.row.eventType | dynamicText(eventTypeOptions) }}
						</template>
					</el-table-column>
					<el-table-column prop="eventCoordinatorName" label="活动负责人" align="left" show-overflow-tooltip />
					<el-table-column prop="startTime" label="开始时间" align="left"  :formatter="ncc.tableDateFormat"></el-table-column>
					<el-table-column prop="endTime" label="结束时间" align="left" :formatter="ncc.tableDateFormat"></el-table-column>
					
					<!-- <el-table-column prop="Members" label="参与人数" align="center" width="100">
						<template slot-scope="scope">
							{{ scope.row.Members ? scope.row.Members.length : 0 }}人
						</template>
					</el-table-column> -->
					<el-table-column label="操作" align="left" width="200" fixed="right">
						<template slot-scope="scope">
							<el-button type="text" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
							<el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</NCC-table>
				<pagination
					v-show="total > 0"
					:total="total"
					:page.sync="query.currentPage"
					:limit.sync="query.rows"
					@pagination="getList"
				/>
			</div>
		</div>
		<!-- 弹窗, 新增 / 修改 -->
		<Form v-if="formVisible" ref="Form" @refreshDataList="getList" />
		<!-- 导出弹窗 -->
		<ExportBox v-if="exportVisible" ref="ExportBox" @refreshDataList="getList" />
		<!-- 查看成员弹窗 -->
		<el-dialog title="活动成员" :visible.sync="membersVisible" width="800px">
			<el-table :data="currentMembers" v-loading="membersLoading">
				<el-table-column prop="userId" label="用户ID" align="left" />
				<el-table-column prop="depId" label="部门ID" align="left" />
				<el-table-column prop="teamName" label="团队名称" align="left" />
			</el-table>
		</el-dialog>
	</div>
</template>
<script>
import request from '@/utils/request'
import { getLqEventList, deleteLqEvent, batchDeleteLqEvent } from '@/api/extend/lqevent'
import Form from './Form'
import ExportBox from './ExportBox'
import Pagination from '@/components/Pagination'
export default {
	name: 'LqEvent',
	components: {
		Form,
		ExportBox,
		Pagination
	},
	data() {
		return {
			query: {
				eventName: '',
				eventNumber: '',
				eventCoordinator: '',
				currentPage: 1,
				rows: 20
			},
			list: [],
			total: 0,
			listLoading: true,
			formVisible: false,
			exportVisible: false,
			membersVisible: false,
			membersLoading: false,
			currentMembers: [],
			selectedIds: [],
			eventTypeOptions: [],
		}
	},
	created() {
		this.getEventTypeOptions()
		this.getList()
	},
	methods: {
		// 获取活动类型选项
		getEventTypeOptions() {
			request({
				url: '/api/Extend/lqevent/event-types',
				method: 'GET'
			}).then(response => {
				if (response.code === 200 && response.data) {
					this.eventTypeOptions = response.data.map(item => ({
						id: item.Value,
						fullName: item.Name
					}))
				}
			}).catch(err => {
				console.error('获取活动类型选项失败:', err)
				this.eventTypeOptions = []
			})
		},
		// 获取数据列表
		getList() {
			this.listLoading = true
			getLqEventList(this.query).then(response => {
				this.list = response.data.list
				this.total = response.data.pagination.total
				this.listLoading = false
			}).catch(() => {
				this.listLoading = false
			})
		},
		// 搜索
		search() {
			this.query.currentPage = 1
			this.getList()
		},
		// 重置
		reset() {
			this.query = {
				eventName: '',
				eventNumber: '',
				eventCoordinator: '',
				currentPage: 1,
				rows: 20
			}
			this.getList()
		},
		// 新增 / 修改
		addOrUpdateHandle(id) {
			this.formVisible = true
			this.$nextTick(() => {
				this.$refs.Form.init(id)
			})
		},
		// 删除
		handleDelete(id) {
			this.$confirm('确定要删除该拓客活动吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				deleteLqEvent(id).then(() => {
					this.$message({
						message: '删除成功',
						type: 'success'
					})
					this.getList()
				})
			})
		},
		// 批量删除
		handleBatchRemoveDel() {
			if (this.selectedIds.length === 0) {
				this.$message({
					message: '请选择要删除的数据',
					type: 'warning'
				})
				return
			}
			this.$confirm('确定要删除选中的拓客活动吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				batchDeleteLqEvent(this.selectedIds).then(() => {
					this.$message({
						message: '删除成功',
						type: 'success'
					})
					this.getList()
				})
			})
		},
		// 多选
		handleSelectionChange(selection) {
			this.selectedIds = selection.map(item => item.id)
		},
		// 导出
		exportData() {
			this.exportVisible = true
			this.$nextTick(() => {
				this.$refs.ExportBox.init()
			})
		},
		// 查看成员
		viewMembers(row) {
			this.membersVisible = true
			this.membersLoading = true
			this.currentMembers = row.members || []
			this.membersLoading = false
		}
	}
}
</script>
<style scoped>
.NCC-common-layout {
	height: 100%;
}
</style>