eladmin-web/.svn/pristine/eb/eb8bfbd819a9ff9bc9243c626ab81eead127cb8b.svn-base

<template>
  <div class="app-container">
  	<div>
  		<el-button type="success" @click="addBtn">新增</el-button>
  	</div>
    <!--搜索-->
    <el-form class="mt_15" ref="form" inline size="small">
  		<el-form-item label="账号">
    		<el-input v-model="searchParm.account" clearable placeholder='账号'></el-input>
  		</el-form-item>
  		<el-form-item label="昵称">
    		<el-input v-model="searchParm.nickName" clearable></el-input>
  		</el-form-item>
  		<el-form-item label="密码">
    		<el-input v-model="searchParm.pwd" clearable></el-input>
  		</el-form-item>
  		<el-form-item>
    		<el-button type="primary" @click="goSearch">搜索</el-button>
    		<el-button type="warning">重置</el-button>
  		</el-form-item>
		</el-form>
    <!--表格渲染-->
    <el-table ref="table" border size="small" :data="list">
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="账号" prop="account" />
      <el-table-column label="昵称" prop="nickName" />
      <el-table-column label="密码" prop="pwd" />
      <el-table-column label="创建时间" prop="createdAt" />
      <el-table-column label="修改时间" prop="updatedAt" />
      <el-table-column label="操作" width="220">
      	<template slot-scope="scope">
      		<el-button type="danger" @click="delById(scope.row.id)">删除</el-button>
      		<el-button type="warning" @click="editById(scope.row)">修改</el-button>
    		<el-button type="info" @click="getBtnById(scope.row.id)">查看</el-button>
      	</template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="mt_15">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="searchParm.page"
	      :page-sizes="[10, 20, 30, 40, 50]"
	      :page-size="searchParm.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="total">
	    </el-pagination>
  </div>
  <!--弹窗-->
  <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" center width="45%">
  	<div class="dialog-content">
  		 <el-form ref="ruleForm" size="small" :model="addParm" :rules="rules" label-width="100px">
	  		<el-form-item label="账号" prop="account">
	    		<el-input v-model="addParm.account" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="昵称" prop="nickName">
	    		<el-input v-model="addParm.nickName" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="密码" prop="pwd">
	    		<el-input v-model="addParm.pwd" clearable></el-input>
	  		</el-form-item>
			</el-form>
  	</div>
  	<span v-if="dialogTitle!='查看'" slot="footer">
  		<el-button type="info" @click="dialogVisible=flase">取消</el-button>
      <el-button type="primary" @click="sureEdit">确认</el-button>
  	</span>
  </el-dialog>
  </div>
</template>
<script>
	import { add, editById, delById, getList, getById } from '@/api/group/buyer'
export default {
//	数据
  data() {
    return {
    	searchParm: {
    		page: 1,
    		pageSize: 10,
    		account:null,
    		sort:'id',
    		order:'desc',
    		nickName:null,
    		pwd:null
    	},
    	total:0,
      list: [],
      dialogVisible: false,
      dialogTitle: '新增',
      addParm: {
      	id: null,
      	nickName:'',
    		pwd:'',
    		account: ''
      },
      rules: {
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
           nickName: [
            { required: true, message: '请输入昵称', trigger: 'blur' }
          ],
           account: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ]
        }
      
    }
  },
  // 调用
  created() {
	this.goSearch()
  },
	//方法
  methods: {
	//	查询
	goSearch() {
		this.searchParm.page=1
		this.getDataList()
	},
	//重置
	
	// 新增
	addBtn(){
		this.addParm = {
			  id: null,
      	nickName:'',
    		pwd:'',
    		account: ''
      }
		this.dialogTitle='新增'
		this.dialogVisible = true
	},
	//	根据id删除
	delById(id){
		this.$confirm('确认删除?','提示',{
			confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
		}).then(() => {
			delById({id}).then(res => {
				if(res.code==200) {
					this.$message.success('删除成功!')
					this.getDataList()
				}
			}).catch(err => {
				console.log(err)
			})
		}).catch(() => {
			this.$message.info('取消删除')
		})
	},
		//	修改
	editById(data){
		this.dialogTitle = '修改'
		getById({id: data.id}).then(res => {
			if(res.code==200) {
				this.addParm.id = res.data.id;
				this.addParm.nickName = res.data.nickName;
				this.addParm.pwd = res.data.pwd;
				this.addParm.account = res.data.account;
				this.dialogVisible = true
				this.$refs.ruleForm.clearValidate()
			}
		}).catch(err => {
			console.log(err)
		})
	},
	sureEdit(){
		if(this.dialogTitle == '新增'){
			add(this.addParm).then(res => {
				if(res.code==200) {
					this.dialogVisible = false
					this.$message.success('新增成功!')
					this.getDataList()
				}
			}).catch(err => {
				console.log(err)
			})
		} else{
			editById(this.addParm).then(res => {
				if(res.code==200) {
					console.log(res)
					this.dialogVisible = false
					this.$message.success('修改成功!')
					this.getDataList()
				}
			}).catch(err => {
				console.log(err)
			})
		}
	},
	// 查看根据id
	getBtnById(id){
		console.log("详情=============");
		this.dialogTitle = '详情'
		getById({id}).then(res => {
			if(res.code==200) {
				this.addParm.id = res.data.id;
				this.addParm.nickName = res.data.nickName;
				this.addParm.pwd = res.data.pwd;
				this.addParm.account = res.data.account;
				this.dialogVisible = true
				this.$refs.ruleForm.clearValidate()
			}
		}).catch(err => {
			console.log(err)
		})
	},
	// 分页获取表格数据
	getDataList(){
		getList(this.searchParm).then(res => {
				console.log(res)
				if(res.code==200) {
					console.log(res)
					this.list = res.data.list;
					this.total = res.data.total;
				}
			}).catch(err => {
				console.log(err)
			})
	},
	
	//	分页
		handleSizeChange(val) {
   		console.log(`每页 ${val} 条`);
   		this.searchParm.pageSize = val;
   		this.getDataList();
  	},
  	handleCurrentChange(val) {
    	console.log(`当前页: ${val}`);
    	this.searchParm.page = val;
    	this.getDataList();
  	}
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>