github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #198 from lin-xin/dev 

优化表格、登录页面代码
pull/199/head^2
林鑫 2019-08-17 14:42:53 +08:00 committed by GitHub
parent eb36dad968 2cb246ec3e
commit c442dcfeb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 362 additions and 332 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.prettierrc Normal file
View File

@ -0,0 +1,6 @@
{
"tabWidth": 4,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 140
}

2
package.json
View File

@ -10,7 +10,7 @@
"dependencies": { "dependencies": {
"axios": "^0.18.0", "axios": "^0.18.0",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"element-ui": "^2.9.2", "element-ui": "^2.11.0",
"mavon-editor": "^2.6.17", "mavon-editor": "^2.6.17",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-cropperjs": "^3.0.0", "vue-cropperjs": "^3.0.0",

4
src/assets/css/main.css
View File

@ -56,6 +56,10 @@ a {
margin: 10px 0; margin: 10px 0;
} }
.el-table th {
background-color: #f5f7fa !important;
}
.pagination { .pagination {
margin: 20px 0; margin: 20px 0;
text-align: right; text-align: right;

25
src/components/page/BaseForm.vue
View File

@ -2,7 +2,9 @@
<div> <div>
<div class="crumbs"> <div class="crumbs">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item> <el-breadcrumb-item>
<i class="el-icon-lx-calendar"></i> 表单
</el-breadcrumb-item>
<el-breadcrumb-item>基本表单</el-breadcrumb-item> <el-breadcrumb-item>基本表单</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
@ -21,11 +23,21 @@
</el-form-item> </el-form-item>
<el-form-item label="日期时间"> <el-form-item label="日期时间">
<el-col :span="11"> <el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker> <el-date-picker
type="date"
placeholder="选择日期"
v-model="form.date1"
value-format="yyyy-MM-dd"
style="width: 100%;"
></el-date-picker>
</el-col> </el-col>
<el-col class="line" :span="2">-</el-col> <el-col class="line" :span="2">-</el-col>
<el-col :span="11"> <el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker> <el-time-picker
placeholder="选择时间"
v-model="form.date2"
style="width: 100%;"
></el-time-picker>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="城市级联"> <el-form-item label="城市级联">
@ -58,14 +70,13 @@
</el-form> </el-form>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'baseform', name: 'baseform',
data: function(){ data() {
return { return {
options: [ options: [
{ {
@ -130,12 +141,12 @@
desc: '', desc: '',
options: [] options: []
} }
} };
}, },
methods: { methods: {
onSubmit() { onSubmit() {
this.$message.success('提交成功！'); this.$message.success('提交成功！');
} }
} }
} };
</script> </script>

230
src/components/page/BaseTable.vue
View File

@ -1,69 +1,103 @@
<template> <template>
<div class="table"> <div>
<div class="crumbs"> <div class="crumbs">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 基础表格</el-breadcrumb-item> <el-breadcrumb-item>
<i class="el-icon-lx-cascades"></i> 基础表格
</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="container"> <div class="container">
<div class="handle-box"> <div class="handle-box">
<el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAll">批量删除</el-button> <el-button
<el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10"> type="primary"
icon="el-icon-delete"
class="handle-del mr10"
@click="delAllSelection"
>批量删除</el-button>
<el-select v-model="selectCate" placeholder="筛选省份" class="handle-select mr10">
<el-option key="1" label="广东省" value="广东省"></el-option> <el-option key="1" label="广东省" value="广东省"></el-option>
<el-option key="2" label="湖南省" value="湖南省"></el-option> <el-option key="2" label="湖南省" value="湖南省"></el-option>
</el-select> </el-select>
<el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input> <el-input v-model="selectWord" placeholder="筛选关键词" class="handle-input mr10"></el-input>
<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button> <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
</div> </div>
<el-table :data="data" border class="table" ref="multipleTable" @selection-change="handleSelectionChange"> <el-table
:data="data"
border
class="table"
ref="multipleTable"
header-cell-class-name="table-header"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center"></el-table-column> <el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column prop="date" label="日期" sortable width="150"> <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
<el-table-column prop="name" label="用户名"></el-table-column>
<el-table-column label="账户余额">
<template slot-scope="scope">￥{{scope.row.money}}</template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="姓名" width="120"> <el-table-column label="头像(查看大图)" align="center">
<template slot-scope="scope">
<el-image
class="table-td-thumb"
:src="scope.row.thumb"
:preview-src-list="[scope.row.thumb]"
></el-image>
</template>
</el-table-column> </el-table-column>
<el-table-column prop="address" label="地址" :formatter="formatter"> <el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<el-tag
:type="scope.row.state==='成功'?'success':(scope.row.state==='失败'?'danger':'')"
>{{scope.row.state}}</el-tag>
</template>
</el-table-column> </el-table-column>
<el-table-column prop="date" label="注册时间"></el-table-column>
<el-table-column label="操作" width="180" align="center"> <el-table-column label="操作" width="180" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button
<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button> type="text"
icon="el-icon-edit"
@click="handleEdit(scope.$index, scope.row)"
>编辑</el-button>
<el-button
type="text"
icon="el-icon-delete"
class="red"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination"> <div class="pagination">
<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000"> <el-pagination
</el-pagination> background
layout="total, prev, pager, next"
:current-page="page.index"
:page-size="page.size"
:total="page.total"
@current-change="handlePageChange"
></el-pagination>
</div> </div>
</div> </div>
<!-- 编辑弹出框 --> <!-- 编辑弹出框 -->
<el-dialog title="编辑" :visible.sync="editVisible" width="30%"> <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
<el-form ref="form" :model="form" label-width="50px"> <el-form ref="form" :model="form" label-width="70px">
<el-form-item label="日期"> <el-form-item label="用户名">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input> <el-input v-model="form.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="地址"> <el-form-item label="地址">
<el-input v-model="form.address"></el-input> <el-input v-model="form.address"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="editVisible = false">取 消</el-button> <el-button @click="editVisible = false">取 消</el-button>
<el-button type="primary" @click="saveEdit">确 定</el-button> <el-button type="primary" @click="saveEdit">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
<!-- 删除提示框 -->
<el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
<div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
<span slot="footer" class="dialog-footer">
<el-button @click="delVisible = false">取 消</el-button>
<el-button type="primary" @click="deleteRow">确 定</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
@ -74,132 +108,102 @@
data() { data() {
return { return {
tableData: [], tableData: [],
cur_page: 1,
multipleSelection: [], multipleSelection: [],
select_cate: '', delList: [],
select_word: '', selectCate: '',
del_list: [], selectWord: '',
is_search: false,
editVisible: false, editVisible: false,
delVisible: false, page: {
form: { index: 1,
name: '', size: 10,
date: '', total: 50
address: ''
}, },
form: {},
idx: -1, idx: -1,
id: -1 id: -1
} };
}, },
created() { created() {
this.getData(); this.getData();
}, },
computed: { computed: {
data() { data() {
return this.tableData.filter((d) => { return this.tableData.filter(d => {
let is_del = false; let is_del = false;
for (let i = 0; i < this.del_list.length; i++) { for (let i = 0; i < this.delList.length; i++) {
if (d.name === this.del_list[i].name) { if (d.name === this.delList[i].name) {
is_del = true; is_del = true;
break; break;
} }
} }
if (!is_del) { if (!is_del) {
if (d.address.indexOf(this.select_cate) > -1 && if (
(d.name.indexOf(this.select_word) > -1 || d.address.indexOf(this.selectCate) > -1 &&
d.address.indexOf(this.select_word) > -1) (d.name.indexOf(this.selectWord) > -1 || d.address.indexOf(this.selectWord) > -1)
) { ) {
return d; return d;
} }
} }
}) });
} }
}, },
methods: { methods: {
// 分页导航
handleCurrentChange(val) {
this.cur_page = val;
this.getData();
},
// 获取 easy-mock 的模拟数据 // 获取 easy-mock 的模拟数据
getData() { getData() {
fetchData({ fetchData({
page: this.cur_page page: this.page.index
}).then((res) => { }).then(res => {
this.tableData = res.list; this.tableData = res.list;
}) });
},
search() {
this.is_search = true;
},
formatter(row, column) {
return row.address;
},
filterTag(value, row) {
return row.tag === value;
},
handleEdit(index, row) {
this.idx = index;
this.id = row.id;
this.form = {
id: row.id,
name: row.name,
date: row.date,
address: row.address
}
this.editVisible = true;
}, },
// 触发搜索按钮
handleSearch() {},
// 删除操作
handleDelete(index, row) { handleDelete(index, row) {
this.idx = index; // 二次确认删除
this.id = row.id; this.$confirm('确定要删除吗？', '提示', {
this.delVisible = true; type: 'warning'
})
.then(() => {
this.$message.success('删除成功');
this.tableData.splice(index, 1);
})
.catch(() => {});
}, },
delAll() { // 多选操作
handleSelectionChange(val) {
this.multipleSelection = val;
},
delAllSelection() {
const length = this.multipleSelection.length; const length = this.multipleSelection.length;
let str = ''; let str = '';
this.del_list = this.del_list.concat(this.multipleSelection); this.delList = this.delList.concat(this.multipleSelection);
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
str += this.multipleSelection[i].name + ' '; str += this.multipleSelection[i].name + ' ';
} }
this.$message.error('删除了' + str); this.$message.error(`删除了${str}`);
this.multipleSelection = []; this.multipleSelection = [];
}, },
handleSelectionChange(val) { // 编辑操作
this.multipleSelection = val; handleEdit(index, row) {
this.idx = index;
this.id = row.id;
this.form = row;
this.editVisible = true;
}, },
// 保存编辑 // 保存编辑
saveEdit() { saveEdit() {
this.editVisible = false; this.editVisible = false;
this.$message.success(`修改第 ${this.idx + 1} 行成功`); this.$message.success(`修改第 ${this.idx + 1} 行成功`);
if(this.tableData[this.idx].id === this.id){
this.$set(this.tableData, this.idx, this.form); this.$set(this.tableData, this.idx, this.form);
}else{
for(let i = 0; i < this.tableData.length; i++){
if(this.tableData[i].id === this.id){
this.$set(this.tableData, i, this.form);
return ;
}
}
}
}, },
// 确定删除 // 分页导航
deleteRow(){ handlePageChange(val) {
this.$message.success('删除成功'); this.page.index = val;
this.delVisible = false; this.getData();
if(this.tableData[this.idx].id === this.id){
this.tableData.splice(this.idx, 1);
}else{
for(let i = 0; i < this.tableData.length; i++){
if(this.tableData[i].id === this.id){
this.tableData.splice(i, 1);
return ;
} }
} }
} };
}
}
}
</script> </script>
<style scoped> <style scoped>
@ -215,10 +219,6 @@
width: 300px; width: 300px;
display: inline-block; display: inline-block;
} }
.del-dialog-cnt{
font-size: 16px;
text-align: center
}
.table { .table {
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
@ -229,4 +229,10 @@
.mr10 { .mr10 {
margin-right: 10px; margin-right: 10px;
} }
.table-td-thumb {
display: block;
margin: auto;
width: 40px;
height: 40px;
}
</style> </style>

43
src/components/page/Login.vue
View File

@ -2,19 +2,24 @@
<div class="login-wrap"> <div class="login-wrap">
<div class="ms-login"> <div class="ms-login">
<div class="ms-title">后台管理系统</div> <div class="ms-title">后台管理系统</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content"> <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
<el-form-item prop="username"> <el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder="username"> <el-input v-model="param.username" placeholder="username">
<el-button slot="prepend" icon="el-icon-lx-people"></el-button> <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"> <el-input
type="password"
placeholder="password"
v-model="param.password"
@keyup.enter.native="submitForm()"
>
<el-button slot="prepend" icon="el-icon-lx-lock"></el-button> <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
</el-input> </el-input>
</el-form-item> </el-form-item>
<div class="login-btn"> <div class="login-btn">
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button> <el-button type="primary" @click="submitForm()">登录</el-button>
</div> </div>
<p class="login-tips">Tips : 用户名和密码随便填。</p> <p class="login-tips">Tips : 用户名和密码随便填。</p>
</el-form> </el-form>
@ -26,34 +31,32 @@
export default { export default {
data: function() { data: function() {
return { return {
ruleForm: { param: {
username: 'admin', username: 'admin',
password: '123123' password: '123123',
}, },
rules: { rules: {
username: [ username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
{ required: true, message: '请输入用户名', trigger: 'blur' } password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
], },
password: [ };
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
}, },
methods: { methods: {
submitForm(formName) { submitForm() {
this.$refs[formName].validate((valid) => { this.$refs.login.validate(valid => {
if (valid) { if (valid) {
localStorage.setItem('ms_username',this.ruleForm.username); this.$message.success('登录成功');
localStorage.setItem('ms_username', this.param.username);
this.$router.push('/'); this.$router.push('/');
} else { } else {
this.$message.error('请输入账号和密码');
console.log('error submit!!'); console.log('error submit!!');
return false; return false;
} }
}); });
} },
} },
} };
</script> </script>
<style scoped> <style scoped>