taylor
8 years ago
7 changed files with 377 additions and 143 deletions
-
61src/common/util.js
-
14src/components/Home.vue
-
4src/components/Login.vue
-
0src/components/nav1/Form.vue
-
130src/components/nav1/Page1.vue
-
303src/components/nav1/Table.vue
-
8src/main.js
@ -0,0 +1,61 @@ |
|||
var SIGN_REGEXP = /([yMdhsm])(\1*)/g; |
|||
var DEFAULT_PATTERN = 'yyyy-MM-dd'; |
|||
function padding(s, len) { |
|||
var len = len - (s + '').length; |
|||
for (var i = 0; i < len; i++) { s = '0' + s; } |
|||
return s; |
|||
}; |
|||
|
|||
export default { |
|||
getQueryStringByName: function (name) { |
|||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); |
|||
var r = window.location.search.substr(1).match(reg); |
|||
var context = ""; |
|||
if (r != null) |
|||
context = r[2]; |
|||
reg = null; |
|||
r = null; |
|||
return context == null || context == "" || context == "undefined" ? "" : context; |
|||
}, |
|||
formatDate: { |
|||
|
|||
|
|||
format: function (date, pattern) { |
|||
pattern = pattern || DEFAULT_PATTERN; |
|||
return pattern.replace(SIGN_REGEXP, function ($0) { |
|||
switch ($0.charAt(0)) { |
|||
case 'y': return padding(date.getFullYear(), $0.length); |
|||
case 'M': return padding(date.getMonth() + 1, $0.length); |
|||
case 'd': return padding(date.getDate(), $0.length); |
|||
case 'w': return date.getDay() + 1; |
|||
case 'h': return padding(date.getHours(), $0.length); |
|||
case 'm': return padding(date.getMinutes(), $0.length); |
|||
case 's': return padding(date.getSeconds(), $0.length); |
|||
} |
|||
}); |
|||
}, |
|||
parse: function (dateString, pattern) { |
|||
var matchs1 = pattern.match(SIGN_REGEXP); |
|||
var matchs2 = dateString.match(/(\d)+/g); |
|||
if (matchs1.length == matchs2.length) { |
|||
var _date = new Date(1970, 0, 1); |
|||
for (var i = 0; i < matchs1.length; i++) { |
|||
var _int = parseInt(matchs2[i]); |
|||
var sign = matchs1[i]; |
|||
switch (sign.charAt(0)) { |
|||
case 'y': _date.setFullYear(_int); break; |
|||
case 'M': _date.setMonth(_int - 1); break; |
|||
case 'd': _date.setDate(_int); break; |
|||
case 'h': _date.setHours(_int); break; |
|||
case 'm': _date.setMinutes(_int); break; |
|||
case 's': _date.setSeconds(_int); break; |
|||
} |
|||
} |
|||
return _date; |
|||
} |
|||
return null; |
|||
} |
|||
|
|||
} |
|||
|
|||
}; |
|||
@ -1,130 +0,0 @@ |
|||
<template> |
|||
<section> |
|||
<el-col :span="24" class="toolbar"> |
|||
<el-form :inline="true" :model="formInline" class="demo-form-inline"> |
|||
<el-form-item> |
|||
<el-date-picker v-model="value1" type="date" placeholder="开始日期" :picker-options="pickerOptions0"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-date-picker v-model="value1" type="date" placeholder="结束日期" :picker-options="pickerOptions0"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-input v-model="formInline.user" placeholder="姓名"></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary">查询</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-col> |
|||
|
|||
<template> |
|||
<el-table :data="tableData" highlight-current-row 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">编辑</el-button> |
|||
<el-button type="text" size="small" @click="handleDel(row)">删除</el-button> |
|||
</span> |
|||
</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>--> |
|||
</section> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
formInline: { |
|||
user: '' |
|||
}, |
|||
pickerOptions0: { |
|||
disabledDate(time) { |
|||
return time.getTime() < Date.now() - 8.64e7; |
|||
} |
|||
}, |
|||
value1:'', |
|||
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:'广东广州天河体育中心' |
|||
}] |
|||
} |
|||
}, |
|||
methods: { |
|||
//性别显示转换 |
|||
formatSex:function(row,column){ |
|||
return row.sex==1?'男':row.sex==0?'女':'未知'; |
|||
}, |
|||
handleDel:function(row){ |
|||
//console.log(row); |
|||
var _this=this; |
|||
this.$confirm('确认删除该记录吗?', '提示', { |
|||
type: 'warning' |
|||
}).then(() => { |
|||
for(var i=0;i<_this.tableData.length;i++){ |
|||
if(_this.tableData[i].id==row.id){ |
|||
_this.tableData.splice(i,1); |
|||
} |
|||
} |
|||
}).catch(() => { |
|||
|
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.toolbar .el-form-item { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.toolbar { |
|||
background: #fff; |
|||
padding: 10px 10px 0px 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,303 @@ |
|||
<template> |
|||
<section> |
|||
<!--工具条--> |
|||
<el-col :span="24" class="toolbar"> |
|||
<el-form :inline="true" :model="formInline" class="demo-form-inline"> |
|||
<el-form-item> |
|||
<el-input v-model="formInline.user" placeholder="姓名"></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button>查询</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button @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> |
|||
</span> |
|||
</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-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> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '../../common/util' |
|||
import NProgress from 'nprogress' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
formInline: { |
|||
user: '' |
|||
}, |
|||
pickerOptions0: { |
|||
disabledDate(time) { |
|||
return time.getTime() < Date.now() - 8.64e7; |
|||
} |
|||
}, |
|||
value1:'', |
|||
editFormVisible:false,//编辑界面显是否显示 |
|||
editFormTtile:'编辑',//编辑界面标题 |
|||
//编辑界面数据 |
|||
editForm: { |
|||
id:0, |
|||
name: '', |
|||
sex: -1, |
|||
age: 0, |
|||
birth: '', |
|||
addr: '' |
|||
}, |
|||
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: { |
|||
//性别显示转换 |
|||
formatSex:function(row,column){ |
|||
return row.sex==1?'男':row.sex==0?'女':'未知'; |
|||
}, |
|||
//删除记录 |
|||
handleDel:function(row){ |
|||
//console.log(row); |
|||
var _this=this; |
|||
this.$confirm('确认删除该记录吗?', '提示', { |
|||
//type: 'warning' |
|||
}).then(() => { |
|||
_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' |
|||
}); |
|||
|
|||
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; |
|||
}, |
|||
//编辑 or 新增 |
|||
editSubmit:function(){ |
|||
var _this=this; |
|||
|
|||
_this.$refs.editForm.validate((valid)=>{ |
|||
if(valid){ |
|||
|
|||
_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; |
|||
|
|||
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 |
|||
}); |
|||
}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); |
|||
|
|||
}); |
|||
|
|||
} |
|||
}); |
|||
|
|||
}, |
|||
//显示新增界面 |
|||
handleAdd:function(){ |
|||
var _this=this; |
|||
|
|||
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=''; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.toolbar .el-form-item { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.toolbar { |
|||
background: #fff; |
|||
padding: 10px 10px 0px 10px; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue