rpa
/
eladmin-web

<template>
  <div class="app-container">
  	<div style="margin-bottom:10px">
  		<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.trim="searchParm.name" clearable placeholder='名称'></el-input>
  		</el-form-item>
  		<el-form-item label="地址">
    		<el-input v-model.trim="searchParm.address" clearable></el-input>
  		</el-form-item>
  		<el-form-item label="联系方式">
    		<el-input v-model.trim="searchParm.phone" clearable></el-input>
  		</el-form-item>
  		<el-form-item>
    		<el-button type="primary" @click="goSearch">搜索</el-button>
    		<el-button type="warning" @click="resetForm">重置</el-button>
  		</el-form-item>
		</el-form>
    <!--表格渲染-->
    <el-table ref="table" border size="small" :data="list" :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="公司名称" prop="name" />
      <el-table-column label="地址" prop="address" />
      <el-table-column label="联系方式" prop="phone" />
      <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="info" @click="getBtnById(scope.row.id)">查看</el-button>
      		<el-button type="warning" @click="editById(scope.row)">修改</el-button>
      		<el-button type="danger" @click="delById(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="dialogAddVisible" :title="dialogAddTitle" center width="45%">
  	<div class="dialog-content">
  		 <el-form ref="addParm" size="small" :model="addParm" :rules="rules" label-width="100px">
	  		<el-form-item label="公司名称" prop="name">
	    		<el-input v-model.trim="addParm.name" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="地址" prop="address">
	    		<el-input v-model.trim="addParm.address" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="联系方式" prop="phone">
	    		<el-input v-model.trim="addParm.phone" clearable></el-input>
	  		</el-form-item>
			</el-form>
  	</div>
  	<span slot="footer">
  		<el-button type="info" @click="sureAddCancle('addParm')">取消</el-button>
      <el-button type="primary" @click="sureAdd('addParm')">确认</el-button>
  	</span>
  </el-dialog>
  
  
  <!--修改弹窗-->
  <el-dialog :visible.sync="dialogEditVisible" :title="dialogEditTitle" center width="45%">
  	<div class="dialog-content">
  		 <el-form ref="editParm" size="small" :model="editParm" :rules="rules" label-width="100px">
	  		<el-form-item label="公司名称" prop="name">
	    		<el-input v-model.trim="editParm.name" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="地址" prop="address">
	    		<el-input v-model.trim="editParm.address" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="联系方式" prop="phone">
	    		<el-input v-model.trim="editParm.phone" clearable></el-input>
	  		</el-form-item>
			</el-form>
  	</div>
  	<span slot="footer">
  		<el-button type="info" @click="sureEditCancle('editParm')">取消</el-button>
      <el-button type="primary" @click="sureEdit('editParm')">确认</el-button>
  	</span>
  </el-dialog>
  
  <!--详情弹窗-->
  <el-dialog :visible.sync="dialogDetailVisible" :title="dialogDetailTitle" center width="45%">
  	<div class="dialog-content">
  		 <el-form ref="form" size="small" label-width="100px">
	  		<el-form-item label="公司名称" prop="name" >
	    		<el-input v-model.trim="detailParm.name" :disabled="true"></el-input>
	  		</el-form-item>
	  		<el-form-item label="地址" prop="address">
	    		<el-input v-model.trim="detailParm.address" :disabled="true"></el-input>
	  		</el-form-item>
	  		<el-form-item label="联系方式" prop="phone">
	    		<el-input v-model.trim="detailParm.phone" :disabled="true"></el-input>
	  		</el-form-item>
			</el-form>
  	</div>
  </el-dialog>
  
  </div>
</template>
<script>
	import { add, editById, delById, getList, getById, getAll } from '@/api/group/company'
export default {
//	数据
  data() {
    return {
    	searchParm: {
    		page: 1,
    		pageSize: 10,
    		name:null,
    		sort:'created_at',
    		order:'desc',
    		address:null,
    		phone:null,
    	},
    	total:0,
      list: [],
      dialogAddVisible: false,
      dialogAddTitle: '新增',
      dialogDetailVisible: false,
      dialogDetailTitle: '详情',
      dialogEditVisible: false,
      dialogEditTitle: '修改',
      addParm: {
      	id: null,
      	name:'',
    		address:'',
    		phone: '',
      },
      detailParm: {
      	id: null,
      	name:'',
    		address:'',
    		phone: '',
      },
      editParm: {
      	id: null,
      	name:'',
    		address:'',
    		phone: '',
      },
      rules: {
      		platformId: [
            { required: true, message: '请输入平台ID', trigger: 'blur' }
          ],
      		platformName: [
            { required: true, message: '请输入平台名称', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入公司名称', trigger: 'blur' }
          ],
           address: [
            { required: true, message: '请输入地址', trigger: 'blur' }
          ],
           phone: [
            { required: true, message: '请输入联系方式', trigger: 'blur' },
			{ pattern : /^[+]?(0|([1-9]\d*))?$/, message : '请输入正确的手机号码', trigger: 'blur'}
          ]
        }
      
    }
  },
  // 调用
  created() {
	this.goSearch()
  },
	//方法
  methods: {
  	resetForm() {
        this.searchParm.name = null;
        this.searchParm.address = null;
        this.searchParm.phone = null;
        this.goSearch()
    },
	//	查询
	goSearch() {
		this.searchParm.page=1
		this.getDataList()
	},
	//重置
	
	// 新增
	addBtn(){
		this.addParm = {
			  id: null,
			  platformName:'',
      	name:'',
    		address:'',
    		phone: '',
      }
		this.dialogAddTitle='新增'
		this.dialogAddVisible = true;
		this.$refs.addParm.clearValidate();
	},
	//	根据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.$refs.editParm.clearValidate();
		getById({id: data.id}).then(res => {
			if(res.code==200) {
				this.editParm.id = res.data.id;
				this.editParm.name = res.data.name;
				this.editParm.address = res.data.address;
				this.editParm.phone = res.data.phone;
				this.dialogEditVisible = true
			}
		}).catch(err => {
			console.log(err)
		})
	},
	// 确认修改
	sureEdit(editParm){
		this.$refs[editParm].validate((valid) => {
		  if (valid) {
		  	this.$refs.editParm.clearValidate();
				editById(this.editParm).then(res => {
				if(res.code==200) {
						console.log(res)
						this.dialogEditVisible = false
						this.$message.success('修改成功!')
						this.getDataList()
					}
				}).catch(err => {
					console.log(err)
				})
		  } else {
				console.log('error submit!!');
				return false;
		  }
		});
	},
	sureEditCancle(editParm){
			this.dialogEditVisible=flase
			this.$refs.editParm.clearValidate();
		},
	// 确认新增
	sureAdd(addParm){
		this.$refs[addParm].validate((valid) => {
		  if (valid) {
		  	this.$refs.addParm.clearValidate();
				add(this.addParm).then(res => {
				if(res.code==200) {
							this.dialogAddVisible = false
							this.$message.success('新增成功!')
							this.getDataList()
						}
				}).catch(err => {
						console.log(err)
				})
		  } else {
				console.log('error submit!!');
				return false;
		  }
		});
	},
		sureAddCancle(addParm){
			this.dialogAddVisible=flase
			this.$refs.addParm.clearValidate();
		},
	// 查看根据id
	getBtnById(id){
		getById({id}).then(res => {
			if(res.code==200) {
				this.detailParm.id = res.data.id;
				this.detailParm.name = res.data.name;
				this.detailParm.address = res.data.address;
				this.detailParm.phone = res.data.phone;
				this.dialogDetailVisible = 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>