index.vue 5.86 KB
<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.activityName" placeholder="请输入活动名称" clearable />
						</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="activityName" label="活动名称" align="left" show-overflow-tooltip />
					<el-table-column prop="minItemQuantity" label="最小项目数量" align="left" >
						<template slot-scope="scope">
							{{ scope.row.minItemQuantity }}个
						</template>
					</el-table-column>
					<el-table-column prop="startTime" label="开始时间" align="left" :formatter="ncc.tableDateFormat" />
					<el-table-column prop="endTime" label="结束时间" align="left" :formatter="ncc.tableDateFormat" />
					<!-- <el-table-column prop="sortOrder" label="排序" align="center" width="80" /> -->
					<el-table-column prop="createTime" label="创建时间" align="left" :formatter="ncc.tableDateFormat" />
					<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)"  class="NCC-table-delBtn" >删除</el-button>
						</template>
					</el-table-column>
				</NCC-table>
				<pagination
					v-show="total > 0"
					:total="total"
					:page.sync="query.currentPage"
					:limit.sync="query.pageSize"
					@pagination="getList"
				/>
			</div>
		</div>
		<!-- 弹窗, 新增 / 修改 -->
		<Form v-if="formVisible" ref="Form" @refreshDataList="getList" />
		<!-- 导出弹窗 -->
		<ExportBox v-if="exportVisible" ref="ExportBox" @refreshDataList="getList" />
	</div>
</template>

<script>
import request from '@/utils/request'
import Form from './Form'
import ExportBox from './ExportBox'
import Pagination from '@/components/Pagination'

export default {
	name: 'LqPackageInfo',
	components: {
		Form,
		ExportBox,
		Pagination
	},
	data() {
		return {
			query: {
				activityName: '',
				activityDesc: '',
				minItemQuantity: null,
				currentPage: 1,
				pageSize: 20,
				isEffective:1
			},
			list: [],
			total: 0,
			listLoading: true,
			formVisible: false,
			exportVisible: false,
			selectedIds: [],
		}
	},
	created() {
		this.getList()
	},
	methods: {
		// 获取数据列表
		getList() {
			this.listLoading = true
			let query = {
				...this.query,
				sort: 'desc',
				sidx: 'CreateTime'
			}
			
			request({
				url: '/api/Extend/lqpackageinfo/GetPackageInfoListAsync',
				method: 'GET',
				data: query
			}).then(response => {
				this.list = response.data.list || []
				this.total = response.data.pagination.total || 0
				this.listLoading = false
			}).catch(() => {
				this.listLoading = false
			})
		},
		// 搜索
		search() {
			this.query.currentPage = 1
			this.getList()
		},
		// 重置
		reset() {
			this.query = {
				activityName: '',
				activityDesc: '',
				minItemQuantity: null,
				currentPage: 1,
				pageSize: 20,
				isEffective:1
			}
			this.getList()
		},
		// 新增 / 修改
		addOrUpdateHandle(id) {
			this.formVisible = true
			this.$nextTick(() => {
				this.$refs.Form.init(id)
			})
		},
		// 删除
		handleDelete(id) {
			this.$confirm('确定要删除该开单活动吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				request({
					url: `/api/Extend/lqpackageinfo/MarkDeletePackageInfoAsync?id=${id}`,
					method: 'DELETE'
				}).then(res => {
					this.$message({
						message: '删除成功',
						type: 'success'
					})
					this.getList()
				}).catch(err => {
					this.$message.error(err.msg || '删除失败')
				})
			})
		},
		// 批量删除
		handleBatchRemoveDel() {
			if (this.selectedIds.length === 0) {
				this.$message({
					message: '请选择要删除的数据',
					type: 'warning'
				})
				return
			}
			this.$confirm('确定要删除选中的开单活动吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				request({
					url: '/api/Extend/LqPackageInfo/batchRemove',
					method: 'POST',
					data: this.selectedIds
				}).then(res => {
					this.$message({
						message: '删除成功',
						type: 'success'
					})
					this.getList()
				}).catch(err => {
					this.$message.error(err.msg || '删除失败')
				})
			})
		},
		// 多选
		handleSelectionChange(selection) {
			this.selectedIds = selection.map(item => item.id)
		},
		// 导出
		exportData() {
			this.exportVisible = true
			this.$nextTick(() => {
				this.$refs.ExportBox.init()
			})
		}
	}
}
</script>

<style scoped>
.NCC-common-layout {
	height: 100%;
}
</style>