|
|
@ -2,270 +2,236 @@ |
|
|
|
<section> |
|
|
|
<!--工具条--> |
|
|
|
<el-col :span="24" class="toolbar"> |
|
|
|
<el-form :inline="true" :model="formInline"> |
|
|
|
<el-form :inline="true" :model="filters"> |
|
|
|
<el-form-item> |
|
|
|
<el-input v-model="formInline.user" placeholder="姓名"></el-input> |
|
|
|
<el-input v-model="filters.name" placeholder="姓名"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button>查询</el-button> |
|
|
|
<el-button type="primary" v-on:click="getUsers">查询</el-button> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button @click="handleAdd">新增</el-button> |
|
|
|
<el-button type="primary" @click="handleAdd">新增</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</el-col> |
|
|
|
|
|
|
|
<!--列表--> |
|
|
|
<template> |
|
|
|
<el-table :data="tableData" highlight-current-row v-loading="listLoading" style="width: 100%;"> |
|
|
|
<el-table-column type="index" width="50"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="name" label="姓名" width="180" sortable> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="age" label="年龄" width="100" sortable> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="birth" label="生日" width="180" sortable> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="addr" label="地址" sortable> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column inline-template :context="_self" label="操作" width="100"> |
|
|
|
<span> |
|
|
|
<el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button> |
|
|
|
<el-button type="text" size="small" @click="handleDel(row)">删除</el-button> |
|
|
|
<el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;"> |
|
|
|
<el-table-column type="index" width="60"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="name" label="姓名" width="180" sortable> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="age" label="年龄" width="100" sortable> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="birth" label="生日" width="180" sortable> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="addr" label="地址" sortable> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column inline-template :context="_self" label="操作" width="140"> |
|
|
|
<span> |
|
|
|
<el-button size="small" @click="handleEdit(row)">编辑</el-button> |
|
|
|
<el-button type="danger" size="small" @click="handleDel(row)">删除</el-button> |
|
|
|
</span> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</template> |
|
|
|
|
|
|
|
<!--分页--> |
|
|
|
<el-col :span="24" class="toolbar" style="padding-bottom:10px;"> |
|
|
|
<el-pagination :current-page="1" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" |
|
|
|
:total="400" style="float:right"> |
|
|
|
</el-pagination> |
|
|
|
</el-col> |
|
|
|
<!--分页--> |
|
|
|
<el-col :span="24" class="toolbar" style="padding-bottom:10px;"> |
|
|
|
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;"> |
|
|
|
</el-pagination> |
|
|
|
</el-col> |
|
|
|
|
|
|
|
<!--编辑界面--> |
|
|
|
<el-dialog :title="editFormTtile" v-model="editFormVisible" :close-on-click-modal="false"> |
|
|
|
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm"> |
|
|
|
<el-form-item label="姓名" prop="name"> |
|
|
|
<el-input v-model="editForm.name" auto-complete="off"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="性别"> |
|
|
|
<!--<el-select v-model="editForm.sex" placeholder="请选择性别"> |
|
|
|
<!--编辑界面--> |
|
|
|
<el-dialog :title="editFormTtile" v-model="editFormVisible" :close-on-click-modal="false"> |
|
|
|
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm"> |
|
|
|
<el-form-item label="姓名" prop="name"> |
|
|
|
<el-input v-model="editForm.name" auto-complete="off"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="性别"> |
|
|
|
<!--<el-select v-model="editForm.sex" placeholder="请选择性别"> |
|
|
|
<el-option label="男" :value="1"></el-option> |
|
|
|
<el-option label="女" :value="0"></el-option> |
|
|
|
</el-select>--> |
|
|
|
<el-radio-group v-model="editForm.sex"> |
|
|
|
<el-radio class="radio" :label="1">男</el-radio> |
|
|
|
<el-radio class="radio" :label="0">女</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="年龄"> |
|
|
|
<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="生日"> |
|
|
|
<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="地址"> |
|
|
|
<el-input type="textarea" v-model="editForm.addr"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click.native="editFormVisible = false">取 消</el-button> |
|
|
|
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">{{btnEditText}}</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</section> |
|
|
|
<el-radio-group v-model="editForm.sex"> |
|
|
|
<el-radio class="radio" :label="1">男</el-radio> |
|
|
|
<el-radio class="radio" :label="0">女</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="年龄"> |
|
|
|
<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="生日"> |
|
|
|
<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="地址"> |
|
|
|
<el-input type="textarea" v-model="editForm.addr"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click.native="editFormVisible = false">取 消</el-button> |
|
|
|
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">{{btnEditText}}</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</section> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import util from '../../common/util' |
|
|
|
import NProgress from 'nprogress' |
|
|
|
import { getUserListPage, removeUser, editUser, addUser } from '../../api/api'; |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
formInline: { |
|
|
|
user: '' |
|
|
|
}, |
|
|
|
pickerOptions0: { |
|
|
|
disabledDate(time) { |
|
|
|
return time.getTime() < Date.now() - 8.64e7; |
|
|
|
} |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
filters: { |
|
|
|
name: '' |
|
|
|
}, |
|
|
|
value1:'', |
|
|
|
editFormVisible:false,//编辑界面显是否显示 |
|
|
|
editFormTtile:'编辑',//编辑界面标题 |
|
|
|
users: [], |
|
|
|
total: 0, |
|
|
|
page: 1, |
|
|
|
listLoading: false, |
|
|
|
editFormVisible: false,//编辑界面显是否显示 |
|
|
|
editFormTtile: '编辑',//编辑界面标题 |
|
|
|
//编辑界面数据 |
|
|
|
editForm: { |
|
|
|
id:0, |
|
|
|
id: 0, |
|
|
|
name: '', |
|
|
|
sex: -1, |
|
|
|
age: 0, |
|
|
|
birth: '', |
|
|
|
addr: '' |
|
|
|
}, |
|
|
|
editLoading:false, |
|
|
|
btnEditText:'提 交', |
|
|
|
editFormRules:{ |
|
|
|
name:[ |
|
|
|
editLoading: false, |
|
|
|
btnEditText: '提 交', |
|
|
|
editFormRules: { |
|
|
|
name: [ |
|
|
|
{ required: true, message: '请输入姓名', trigger: 'blur' } |
|
|
|
] |
|
|
|
}, |
|
|
|
tableData: [{ |
|
|
|
id:1000, |
|
|
|
name: 'lanqy1', |
|
|
|
sex: 1, |
|
|
|
age: 20, |
|
|
|
birth:'1996-03-02', |
|
|
|
addr:'广东广州天河体育中心' |
|
|
|
}, { |
|
|
|
id:1001, |
|
|
|
name: 'lanqy2', |
|
|
|
sex: 1, |
|
|
|
age: 20, |
|
|
|
birth:'1996-03-02', |
|
|
|
addr:'广东广州天河体育中心' |
|
|
|
}, { |
|
|
|
id:1002, |
|
|
|
name: 'lanqy3', |
|
|
|
sex: 0, |
|
|
|
age: 20, |
|
|
|
birth:'1996-03-02', |
|
|
|
addr:'广东广州天河体育中心' |
|
|
|
}, { |
|
|
|
id:1003, |
|
|
|
name: 'lanqy4', |
|
|
|
sex: 1, |
|
|
|
age: 20, |
|
|
|
birth:'1996-03-02', |
|
|
|
addr:'广东广州天河体育中心' |
|
|
|
}, { |
|
|
|
id:1004, |
|
|
|
name: 'lanqy5', |
|
|
|
sex: 1, |
|
|
|
age: 20, |
|
|
|
birth:'1996-03-02', |
|
|
|
addr:'广东广州天河体育中心' |
|
|
|
}, { |
|
|
|
id:1005, |
|
|
|
name: 'lanqy6', |
|
|
|
sex: 1, |
|
|
|
age: 20, |
|
|
|
birth:'1996-03-02', |
|
|
|
addr:'广东广州天河体育中心' |
|
|
|
}, { |
|
|
|
id:1006, |
|
|
|
name: 'lanqy7', |
|
|
|
sex: 1, |
|
|
|
age: 20, |
|
|
|
birth:'1996-03-02', |
|
|
|
addr:'广东广州天河体育中心' |
|
|
|
}, { |
|
|
|
id:1007, |
|
|
|
name: 'lanqy8', |
|
|
|
sex: 1, |
|
|
|
age: 20, |
|
|
|
birth:'1996-03-02', |
|
|
|
addr:'广东广州天河体育中心' |
|
|
|
}], |
|
|
|
listLoading:false |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
//性别显示转换 |
|
|
|
formatSex:function(row,column){ |
|
|
|
return row.sex==1?'男':row.sex==0?'女':'未知'; |
|
|
|
formatSex: function (row, column) { |
|
|
|
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知'; |
|
|
|
}, |
|
|
|
//删除记录 |
|
|
|
handleDel:function(row){ |
|
|
|
handleCurrentChange(val) { |
|
|
|
this.page = val; |
|
|
|
this.getUsers(); |
|
|
|
}, |
|
|
|
//获取用户列表 |
|
|
|
getUsers() { |
|
|
|
let para = { |
|
|
|
page: this.page, |
|
|
|
name: this.filters.name |
|
|
|
}; |
|
|
|
this.listLoading = true; |
|
|
|
NProgress.start(); |
|
|
|
getUserListPage(para).then((res) => { |
|
|
|
this.total = res.data.total; |
|
|
|
this.users = res.data.users; |
|
|
|
this.listLoading = false; |
|
|
|
NProgress.done(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
//删除 |
|
|
|
handleDel: function (row) { |
|
|
|
//console.log(row); |
|
|
|
var _this=this; |
|
|
|
var _this = this; |
|
|
|
this.$confirm('确认删除该记录吗?', '提示', { |
|
|
|
//type: 'warning' |
|
|
|
}).then(() => { |
|
|
|
_this.listLoading=true; |
|
|
|
_this.listLoading = true; |
|
|
|
NProgress.start(); |
|
|
|
setTimeout(function(){ |
|
|
|
for(var i=0;i<_this.tableData.length;i++){ |
|
|
|
if(_this.tableData[i].id==row.id){ |
|
|
|
_this.tableData.splice(i,1); |
|
|
|
|
|
|
|
_this.listLoading=false; |
|
|
|
NProgress.done(); |
|
|
|
_this.$notify({ |
|
|
|
title: '成功', |
|
|
|
message: '删除成功', |
|
|
|
type: 'success' |
|
|
|
}); |
|
|
|
let para = { id: row.id }; |
|
|
|
removeUser(para).then((res) => { |
|
|
|
_this.listLoading = false; |
|
|
|
NProgress.done(); |
|
|
|
_this.$notify({ |
|
|
|
title: '成功', |
|
|
|
message: '删除成功', |
|
|
|
type: 'success' |
|
|
|
}); |
|
|
|
_this.getUsers(); |
|
|
|
}); |
|
|
|
|
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
},1000); |
|
|
|
}).catch(() => { |
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
//显示编辑界面 |
|
|
|
handleEdit:function(row){ |
|
|
|
this.editFormVisible=true; |
|
|
|
this.editFormTtile='编辑'; |
|
|
|
this.editForm.id=row.id; |
|
|
|
this.editForm.name=row.name; |
|
|
|
this.editForm.sex=row.sex; |
|
|
|
this.editForm.age=row.age; |
|
|
|
this.editForm.birth=row.birth; |
|
|
|
this.editForm.addr=row.addr; |
|
|
|
handleEdit: function (row) { |
|
|
|
this.editFormVisible = true; |
|
|
|
this.editFormTtile = '编辑'; |
|
|
|
this.editForm.id = row.id; |
|
|
|
this.editForm.name = row.name; |
|
|
|
this.editForm.sex = row.sex; |
|
|
|
this.editForm.age = row.age; |
|
|
|
this.editForm.birth = row.birth; |
|
|
|
this.editForm.addr = row.addr; |
|
|
|
}, |
|
|
|
//编辑 or 新增 |
|
|
|
editSubmit:function(){ |
|
|
|
var _this=this; |
|
|
|
editSubmit: function () { |
|
|
|
var _this = this; |
|
|
|
|
|
|
|
_this.$refs.editForm.validate((valid)=>{ |
|
|
|
if(valid){ |
|
|
|
_this.$refs.editForm.validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
|
|
|
|
_this.$confirm('确认提交吗?','提示',{}).then(()=>{ |
|
|
|
_this.editLoading=true; |
|
|
|
_this.$confirm('确认提交吗?', '提示', {}).then(() => { |
|
|
|
_this.editLoading = true; |
|
|
|
NProgress.start(); |
|
|
|
_this.btnEditText='提交中'; |
|
|
|
setTimeout(function(){ |
|
|
|
_this.editLoading=false; |
|
|
|
NProgress.done(); |
|
|
|
_this.btnEditText='提 交'; |
|
|
|
_this.$notify({ |
|
|
|
title: '成功', |
|
|
|
message: '提交成功', |
|
|
|
type: 'success' |
|
|
|
}); |
|
|
|
_this.editFormVisible = false; |
|
|
|
_this.btnEditText = '提交中'; |
|
|
|
|
|
|
|
if(_this.editForm.id==0){ |
|
|
|
//新增 |
|
|
|
_this.tableData.push({ |
|
|
|
id:new Date().getTime(), |
|
|
|
name: _this.editForm.name, |
|
|
|
sex: _this.editForm.sex, |
|
|
|
age: _this.editForm.age, |
|
|
|
birth: _this.editForm.birth==''?'':util.formatDate.format(new Date(_this.editForm.birth),'yyyy-MM-dd'), |
|
|
|
addr: _this.editForm.addr |
|
|
|
if (_this.editForm.id == 0) { |
|
|
|
//新增 |
|
|
|
let para = { |
|
|
|
name: _this.editForm.name, |
|
|
|
sex: _this.editForm.sex, |
|
|
|
age: _this.editForm.age, |
|
|
|
birth: _this.editForm.birth == '' ? '' : util.formatDate.format(new Date(_this.editForm.birth), 'yyyy-MM-dd'), |
|
|
|
addr: _this.editForm.addr, |
|
|
|
}; |
|
|
|
addUser(para).then((res) => { |
|
|
|
_this.editLoading = false; |
|
|
|
NProgress.done(); |
|
|
|
_this.btnEditText = '提 交'; |
|
|
|
_this.$notify({ |
|
|
|
title: '成功', |
|
|
|
message: '提交成功', |
|
|
|
type: 'success' |
|
|
|
}); |
|
|
|
_this.editFormVisible = false; |
|
|
|
_this.getUsers(); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
//编辑 |
|
|
|
let para = { |
|
|
|
id: _this.editForm.id, |
|
|
|
name: _this.editForm.name, |
|
|
|
sex: _this.editForm.sex, |
|
|
|
age: _this.editForm.age, |
|
|
|
birth: _this.editForm.birth == '' ? '' : util.formatDate.format(new Date(_this.editForm.birth), 'yyyy-MM-dd'), |
|
|
|
addr: _this.editForm.addr, |
|
|
|
}; |
|
|
|
editUser(para).then((res) => { |
|
|
|
_this.editLoading = false; |
|
|
|
NProgress.done(); |
|
|
|
_this.btnEditText = '提 交'; |
|
|
|
_this.$notify({ |
|
|
|
title: '成功', |
|
|
|
message: '提交成功', |
|
|
|
type: 'success' |
|
|
|
}); |
|
|
|
}else{ |
|
|
|
//编辑 |
|
|
|
for(var i=0;i<_this.tableData.length;i++){ |
|
|
|
if(_this.tableData[i].id==_this.editForm.id){ |
|
|
|
_this.tableData[i].name=_this.editForm.name; |
|
|
|
_this.tableData[i].sex=_this.editForm.sex; |
|
|
|
_this.tableData[i].age=_this.editForm.age; |
|
|
|
_this.tableData[i].birth=_this.editForm.birth==''?'':util.formatDate.format(new Date(_this.editForm.birth),'yyyy-MM-dd'); |
|
|
|
_this.tableData[i].addr=_this.editForm.addr; |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
},1000); |
|
|
|
_this.editFormVisible = false; |
|
|
|
_this.getUsers(); |
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
@ -274,21 +240,24 @@ |
|
|
|
|
|
|
|
}, |
|
|
|
//显示新增界面 |
|
|
|
handleAdd:function(){ |
|
|
|
var _this=this; |
|
|
|
handleAdd: function () { |
|
|
|
var _this = this; |
|
|
|
|
|
|
|
this.editFormVisible=true; |
|
|
|
this.editFormTtile='新增'; |
|
|
|
this.editFormVisible = true; |
|
|
|
this.editFormTtile = '新增'; |
|
|
|
|
|
|
|
this.editForm.id=0; |
|
|
|
this.editForm.name=''; |
|
|
|
this.editForm.sex=1; |
|
|
|
this.editForm.age=0; |
|
|
|
this.editForm.birth=''; |
|
|
|
this.editForm.addr=''; |
|
|
|
this.editForm.id = 0; |
|
|
|
this.editForm.name = ''; |
|
|
|
this.editForm.sex = 1; |
|
|
|
this.editForm.age = 0; |
|
|
|
this.editForm.birth = ''; |
|
|
|
this.editForm.addr = ''; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getUsers(); |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |