api.js 添加接口
// //信息列表新增接口
// export function info(data){
// data = qs.stringify(data)
// return service({
// method: 'post',
// url: '/info',
// data
// })
// }
// //信息列表修改接口
// export function updateInfo(data){
// data = qs.stringify(data)
// return service({
// method: 'put',
// url: '/info',
// data
// })
// }
// 信息列表新增和修改接口
export function info(type, data) {
data = qs.stringify(data)
let obj = { method: type, url: '/info', data }
return service(obj)
}
//信息列表查询接口
export function getInfo() {
return service({
method: 'get',
url: '/info',
})
}
//信息列表删除接口
export function infoDel(id) {
return service({
method: 'delete',
url: `/info/${id}`
})
}
<template>
<div class="infoList">
<el-form :inline="true"
class="demo-form-inline"
size ="small">
<el-form-item>
<el-button type="primary" @click="addStudent">新增</el-button>
</el-form-item>
</el-form>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column prop="name" label="姓名" align="center"></el-table-column>
<el-table-column prop="sex" label="性别" align="center"></el-table-column>
<el-table-column prop="age" label="年龄" align="center"></el-table-column>
<el-table-column prop="father" label="父亲" align="center"></el-table-column>
<el-table-column prop="mather" label="母亲" align="center"></el-table-column>
<el-table-column prop="address" label="家庭住址" align="center"></el-table-column>
<el-table-column prop="time" label="入学时间" align="center"></el-table-column>
<el-table-column prop="phone" label="联系方式" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
type="danger"
size="mini"
icon="el-icon-edit"
@click="edit(scope.row)">
</el-button>
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
@click="del(scope.row)">
</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :title="state? '添加学生信息':'修改学生信息'" :visible.sync="dialogFormVisible" width="500px">
<el-form :model="form" :rules ="rules" ref="form">
<el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
<el-radio v-model="form.sex" label="1">男</el-radio>
<el-radio v-model="form.sex" label="2">女</el-radio>
</el-form-item>
<el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
<el-input v-model="form.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="父亲姓名" :label-width="formLabelWidth" prop="father">
<el-input v-model="form.father" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="母亲姓名" :label-width="formLabelWidth" prop="mather">
<el-input v-model="form.mather" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="家庭住址" :label-width="formLabelWidth" prop="address">
<el-input v-model="form.address" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="入校时间" :label-width="formLabelWidth" prop="time">
<el-date-picker
v-model="form.time"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="联系方式" :label-width="formLabelWidth" prop="phone">
<el-input v-model="form.phone" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeInfo('form')">取 消</el-button>
<el-button type="primary" @click="sure('form')">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {info,getInfo,infoDel} from '@/api/api.js'
export default {
data() {
return {
tableData: [{
name: '小二',
sex: '1',
age: '14',
father: '三强',
mather: '四婶',
address: '杭州市',
time: '2021-3-1',
phone: '18705161482'
}
],
dialogFormVisible: false,
form: {
name: '',
sex: '1',
age: '',
father: '',
mather: '',
address: '',
time: '',
phone: ''
},
formLabelWidth: '80px',
rules: {
name: [{required: true, message: '请输入姓名'}],
sex: [{required: true}],
age: [{required: true, message: '请输入年龄'}],
address: [{required: true, message: '请输入地址'}],
time: [{required: true, message: '请输入入学时间'}],
phone: [{required: true, message: '请输入联系方式'}]
},
state: true,
total: 0
}
},
created() {
this.getData()
},
methods: {
edit(row){
this.status =false
this.dialogFormVisible =true
this.form = {...row}
},
closeInfo(form){
this.$refs[form].resetFields()
this.dialogFormVisible = false
},
del(row){
console.log(row)
this.$alert('你确定要删除吗?','提示',{
confirmButtonText: '确定',
callback: ()=>{
infoDel(row.id).then(res=>{
if(res.data.status===200){
this.getData()
this.$message({message: res.data.message,type: 'success'})
}
})
}
})
},
addStudent(){
this.form = {
name: '',
sex: '1',
age: '',
father: '',
mather: '',
address: '',
time: '',
phone: ''
}
this.status =true
this.dialogFormVisible =true
},
getData(){
getInfo().then(res =>{
if (res.data.status ===200) {
this.tableData = res.data.data
this.total =res.data.data.total
}
})
},
sure(form){
console.log(form,this.form)
this.$refs.form.validate(valid => {
if(valid){
console.log(form,this.form)
if (this.state) {
info('post',this.form).then(res =>{
if(res.data.status===200){
this.getData()
this.dialogFormVisible =false
this.$refs[form].resetFields()
this.$message({type: 'success',message:res.data.message})
}
})
}else {
info('put',this.form).then(res =>{
if(res.data.status===200){
this.getData()
this.dialogFormVisible =false
this.$refs[form].resetFields()
this.$message({type: 'success',message:res.data.message})
}
})
}
}
})
}
}
}
</script>
<style lang="scss">
.infoList {
.el-form {
text-align: left;
}
.el-pagination {
text-align: left;
margin-top: 20px;
}
}
</style>