sadjv3_admin/src/views/bl/commission/qds/qdsLm.vue

<template>
	<div>
		<div style="display: inline-block;">
			<div style="display: inline-block;margin-top: 5px;">
				<span>名称:</span>
				<el-input style="width: 150px;" @keydown.enter.native="refresh" clearable placeholder="请输入名称"
					v-model="name">
				</el-input>
			</div>
			<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="refresh">查询
			</el-button>
			<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="chognzhi">重置
			</el-button>
			<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="adds">添加
			</el-button>
		</div>
		<el-table v-loading="tableDataLoading" :data="tableData.list">
			<el-table-column prop="id" label="编号" width="80" fixed="left">
			</el-table-column>
			<el-table-column prop="name" label="名称">
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间">
			</el-table-column>
			<el-table-column label="操作" width="180"  fixed="right">
				<template slot-scope="scope">
					<el-button size="mini" type="primary"
						@click="updates(scope.row)" style="margin: 3px;">修改
					</el-button>
					<el-button size="mini" type="danger"
						@click="deletes(scope.row)" style="margin: 3px;">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div style="text-align: center;margin-top: 10px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:page-sizes="[10, 20, 30, 50, 100]" :page-size="size" :current-page="page"
				layout="total,sizes, prev, pager, next" :total="tableData.totalCount">
			</el-pagination>
		</div>
		<!-- 添加/修改-->
		<el-dialog :title="titles" :visible.sync="dialogFormVisible" center  width="50%">
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">名称：</span>
				<el-input style="width:50%;" v-model="name" placeholder="请输入名称"></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleSubmit()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { serverPaths } from '@/utils/enumData'
	export default {
		data() {
			return {
				apiUrl: '',
				size: 10,
				page: 1,
				id: '',
				name: '',
				titles: '',
				tableData: [],
				tableDataLoading: false,
				dialogFormVisible: false,
			}
		},
		methods: {
			// 刷新
			refresh() {
				this.page = 1
				this.dataSelect()
			},
			// 重置
			chognzhi(){
				this.page = 1
				this.name = ''
				this.dataSelect()
			},
			handleSizeChange(val) {
				this.size = val;
				this.dataSelect()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.dataSelect()
			},
			// 添加
			adds() {
				this.titles = '添加';
				this.name = '';
				this.dialogFormVisible = true;
			},
			// 提交
			handleSubmit() {
				if (this.name == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入名称',
						type: 'warning'
					});
					return
				}
				if (this.titles == "添加") {
					this.apiUrl = "commission/qdsLm/add";
				} else {
					this.apiUrl = "commission/qdsLm/modify";
				}
				this.$http({
					url: this.$http.adornUrl(this.apiUrl),
					method: 'post',
					params: this.$http.adornParams({
						id: this.id,
						name: this.name,
					})
				}).then(({data}) => {
					if(data.code==0){
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.chognzhi()
							}
						})
						this.dialogFormVisible = false
					}else{
						this.$message({
							message: data.msg,
							type: 'warning',
							duration: 1500,
							onClose: () => {
							}
						})
					}

				})
			},
			// 修改优惠券
			updates(row) {
				this.titles = '修改';
				this.dialogFormVisible = true;
				this.id = row.id;
				this.name = row.name;
			},
			// 删除
			deletes(row) {
				this.$confirm(`确定删除此条信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('commission/qdsLm/delete'),
						method: 'post',
						params: this.$http.adornParams({
							id: row.id
						})
					}).then(({
						data
					}) => {
						if (data.code == 0) {
							this.$message({
								message: '删除成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.chognzhi()
								}
							})
						} else {
							this.$message({
								message: data.msg,
								type: 'error',
								duration: 1500,
								onClose: () => {
								}
							})
						}
					})
				}).catch(() => {})
			},
			//获取数据
			dataSelect() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('commission/qdsLm/findPage'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.size,
						'name': this.name,
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.tableData = returnData
				})
			},
		},
		mounted() {
			this.dataSelect()
		}
	};
</script>

<style>
	.imgs {
		position: relative;
		border-radius: 6px;
		width: 148px;
		height: 148px;
		margin-right: 10px;
		display: inline-block;
	}

	.dels {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}

	.dels .el-icon-delete {
		line-height: 148px;
		padding-left: 58px;
		font-size: 25px;
		color: #fff;
	}

	.imgs:hover .dels {
		width: 100%;
		height: 100%;
		background: #000;
		display: block;
		opacity: 0.5;
	}
</style>