ops
/
jump-web
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Table界面增加增、删、改功能

master
taylor 8 years ago
parent
df62aa4ce1
commit
b4ddf28add
7 changed files with 377 additions and 143 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 61
      src/common/util.js
  2. 14
      src/components/Home.vue
  3. 4
      src/components/Login.vue
  4. 0
      src/components/nav1/Form.vue
  5. 130
      src/components/nav1/Page1.vue
  6. 303
      src/components/nav1/Table.vue
  7. 8
      src/main.js

61
src/common/util.js
View File

@ -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;
}
}
};

14
src/components/Home.vue
View File

@ -15,12 +15,12 @@
<!--<el-col :span="4">-->
<aside style="width:230px;">
<h5 class="admin"><i class="fa fa-user" aria-hidden="true" style="margin-right:5px;"></i>欢迎系统管理员：测试</h5>
<el-menu style="border-top: 1px solid #475669;" default-active="/page1" class="el-menu-vertical-demo" @open="handleopen"
<el-menu style="border-top: 1px solid #475669;" default-active="/table" class="el-menu-vertical-demo" @open="handleopen"
@close="handleclose" @select="handleselect" theme="dark" unique-opened router>
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item index="/page1">页面1</el-menu-item>
<el-menu-item index="/page2">页面2</el-menu-item>
<el-menu-item index="/table">Table</el-menu-item>
<el-menu-item index="/form">Form</el-menu-item>
<el-menu-item index="/page3">页面3</el-menu-item>
</el-submenu>
<el-submenu index="2">
@ -39,7 +39,7 @@
<el-col :span="24" style="margin-bottom:15px;">
<strong style="width:200px;float:left;color: #475669;">{{currentPathName}}</strong>
<el-breadcrumb separator="/" style="float:right;">
<el-breadcrumb-item :to="{ path: '/page1' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/table' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>{{currentPathNameParent}}</el-breadcrumb-item>
<el-breadcrumb-item>{{currentPathName}}</el-breadcrumb-item>
</el-breadcrumb>
@ -60,8 +60,8 @@
export default {
data() {
return {
currentPathName:'导航一',
currentPathNameParent:'页面一',
currentPathName:'Table',
currentPathNameParent:'导航一',
form: {
name: '',
region: '',
@ -96,7 +96,7 @@
logout:function(){
var _this=this;
this.$confirm('确认退出吗?', '提示', {
type: 'warning'
//type: 'warning'
}).then(() => {
_this.$router.replace('/login');
}).catch(() => {

4
src/components/Login.vue
View File

@ -44,8 +44,8 @@
var _this=this;
this.$refs.ruleForm2.validate((valid) => {
if (valid) {
//_this.$router.push('/page1');
_this.$router.replace('/page1');
//_this.$router.push('/table');
_this.$router.replace('/table');
} else {
console.log('error submit!!');
return false;

0
src/components/nav1/Page2.vue → src/components/nav1/Form.vue
View File

130
src/components/nav1/Page1.vue
View File

@ -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>

303
src/components/nav1/Table.vue
View File

@ -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>

8
src/main.js
View File

@ -11,8 +11,8 @@ import 'nprogress/nprogress.css'
import Login from './components/Login.vue'
import Home from './components/Home.vue'
import Main from './components/Main.vue'
import Page1 from './components/nav1/Page1.vue'
import Page2 from './components/nav1/Page2.vue'
import Table from './components/nav1/Table.vue'
import Form from './components/nav1/Form.vue'
import Page3 from './components/nav1/Page3.vue'
import Page4 from './components/nav2/Page4.vue'
import Page5 from './components/nav2/Page5.vue'
@ -31,8 +31,8 @@ const routes = [
name: '导航一',
children: [
{ path: '/main', component: Main },
{ path: '/page1', component: Page1, name: '页面1' },
{ path: '/page2', component: Page2, name: '页面2' },
{ path: '/table', component: Table, name: 'Table' },
{ path: '/form', component: Form, name: 'Form' },
{ path: '/page3', component: Page3, name: '页面3' },
]
},

Write Preview
Loading…
Cancel
Save