- 第一步：导航模板，在menu-list.js文件中添加一栏，注意id不能与以往的冲突。
{
id: '1',
name: '用户管理',
icon: 'el-icon-document-remove',
info: '标准版的CRUD',
childList: [
{id: '1-1', name: '新增用户', icon: 'el-icon-plus', url: 'sa-view/users/users-add.html'},
{id: '1-2', name: '修改用户', icon: 'el-icon-edit', url: 'sa-view/users/users-edit.html'},
{id: '1-3', name: '用户列表', icon: 'el-icon-document-remove', url: 'sa-view/users/users-list.html'},
{id: '1-4', name: '用户统计', icon: 'el-icon-pie-chart', url: 'sa-view/users/users-chart.html'},
]
},
- 第二步：【新增】模板users-add.html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户添加</title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<!-- 所有的 css & js 资源 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
<link rel="stylesheet" href="../../static/sa.css">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
<script src="../../static/sa.js"></script>
</head>
<body>
<div class="vue-box" style="display: none;" :style="'display: block;'">
<!-- 参数栏 -->
<div class="c-panel">
<div class="c-title">用户添加</div>
<el-form v-if="m">
<div class="c-item br">
<label class="c-label">昵称：</label>
<el-input size="mini" v-model="m.username"></el-input>
</div>
<div class="c-item br">
<label class="c-label">密码：</label>
<el-input size="mini" v-model="m.password"></el-input>
</div>
<div class="c-item br">
<label class="c-label">手机：</label>
<el-input size="mini" v-model="m.phone"></el-input>
</div>
<div class="c-item br">
<label class="c-label">角色：</label>
<el-select size="mini" v-model="m.role_id">
<el-option label="管理员" :value="1"></el-option>
<el-option label="公告管理员" :value="2"></el-option>
<el-option label="普通用户" :value="3"></el-option>
</el-select>
</div>
<div class="c-item br">
<label class="c-label">性别：</label>
<el-radio-group size="mini" v-model="m.sex" size="mini">
<el-radio :label="1">男</el-radio>
<el-radio :label="2">女</el-radio>
</el-radio-group>
</div>
<div class="c-item br">
<label class="c-label"></label>
<el-button size="mini" type="primary" icon="el-icon-plus" size="mini" @click="ok">确定</el-button>
</div>
</el-form>
</div>
</div>
<script type="text/javascript">
new Vue({
el: '.vue-box',
data: {
m: { // 查询参数
username: '',
password: '',
phone: '',
sex: 1,
}
},
methods: {
// ok
ok: function () {
sa.checkNull(this.m.username, "昵称不能为空");
sa.checkNull(this.m.password, "密码不能为空");
//TODO 发送ajax请求
sa.ok('添加成功');
}
}
})
</script>
</body>
</html>
- 第三步：【列表】模板users-list.list。
<!DOCTYPE html>
<html>
<head>
<title>用户列表</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<!-- 所有的 css & js 资源 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
<link rel="stylesheet" href="../../static/sa.css">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
<script src="../../static/sa.js"></script>
</head>
<body>
<div class="vue-box" style="display: none;" :style="'display: block;'">
<div class="c-panel">
<!-- ------------- 检索参数 ------------- -->
<div class="c-title">用户列表</div>
<el-form>
<div class="c-item">
<label class="c-label">用户昵称：</label>
<el-input size="mini" v-model="p.username" placeholder="模糊查询"></el-input>
</div>
<div class="c-item">
<label class="c-label">注册日期：</label>
<el-date-picker size="mini" v-model="p.start_time" type="date" value-format="yyyy-MM-dd"
placeholder="开始日期"></el-date-picker>
-
<el-date-picker size="mini" v-model="p.end_time" type="date" value-format="yyyy-MM-dd"
placeholder="结束日期"></el-date-picker>
</div>
<div class="c-item" style="min-width: 0px;">
<el-button size="mini" type="primary" icon="el-icon-search" @click="p.pageNo = 1; f5()">查询</el-button>
</div>
<br/>
<div class="c-item s-radio-text">
<label class="c-label">综合排序：</label>
<el-radio-group size="mini" v-model="p.sortType">
<el-radio :label="1">注册时间</el-radio>
<el-radio :label="2">最近登录</el-radio>
<el-radio :label="3">登陆次数</el-radio>
<el-radio :label="4">最近签到</el-radio>
<el-radio :label="5">签到次数</el-radio>
</el-radio-group>
</div>
</el-form>
<!-- <div class="c-title">数据列表</div> -->
<!-- ------------- 快捷按钮 ------------- -->
<div class="fast-btn">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="add()">新增</el-button>
<el-button size="mini" type="success" icon="el-icon-view" @click="getBySelect()">查看</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteByIds()">删除</el-button>
<el-button size="mini" type="warning" icon="el-icon-download" @click="sa.exportExcel()">导出</el-button>
<el-button size="mini" type="info" icon="el-icon-refresh" @click="sa.f5()">重置</el-button>
</div>
<!-- ------------- 数据列表 ------------- -->
<el-table class="data-table" ref="data-table" :data="dataList" size="small">
<el-table-column type="selection" width="45px"></el-table-column>
<el-table-column label="编号" prop="id" width="80px"></el-table-column>
<el-table-column label="昵称" prop="username" width="220px">
<template slot-scope="s">
<img :src="s.row.avatar" @click="sa.showImage(s.row.avatar, '400px', '400px')"
style="width: 3em; height: 3em; float: left; margin-right: 1em; border-radius: 50%; cursor: pointer;">
<div style="float: left; width: 130px; line-height: 20px;">
<b>{{s.row.username}}</b>
<p>{{s.row.tell}}</p>
</div>
</template>
</el-table-column>
<el-table-column label="个人相册">
<template slot-scope="s">
<img :src="s.row.photo_list[0]" style="width: 40px; height: 40px; cursor: pointer;"
@click="sa.showImageList(s.row.photo_list)">
共{{s.row.photo_list.length}}张, 点击预览
</template>
</el-table-column>
<el-table-column label="性别" prop="sex"></el-table-column>
<el-table-column label="注册方式" prop="create_type"></el-table-column>
<el-table-column label="注册于" prop="create_time"></el-table-column>
<el-table-column label="状态">
<template slot-scope="s">
<el-switch v-model="s.row.status" :active-value="1" :inactive-value="2"
inactive-color="#ff4949"></el-switch>
<b style="color: green;" v-if="s.row.status == 1">正常</b>
<b style="color: red;" v-if="s.row.status == 2">禁用</b>
</template>
</el-table-column>
<el-table-column prop="address" label="操作">
<template slot-scope="s">
<el-button class="c-btn" type="success" icon="el-icon-view" @click="get(s.row)">详情</el-button>
<el-button class="c-btn" type="primary" icon="el-icon-edit" @click="edit(s.row)">修改</el-button>
<el-button class="c-btn" type="danger" icon="el-icon-delete" @click="del(s.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- ------------- 分页 ------------- -->
<div class="page-box">
<el-pagination background
layout="total, prev, pager, next, sizes, jumper"
:current-page.sync="p.pageNo"
:page-size.sync="p.pageSize"
:total="dataCount"
:page-sizes="[1, 10, 20, 30, 40, 50, 100]"
@current-change="f5(true)"
@size-change="f5(true)">
</el-pagination>
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el: '.vue-box',
data: {
p: { // 查询参数
username: '',
create_type: 0,
sortType: 1,
start_time: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-1', // 本月一号
end_time: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(), // 本月当日
pageNo: 1,
pageSize: 10,
},
dataCount: 1422,
dataList: []
},
methods: {
// 数据刷新
f5: function () {
//TODO 发送ajax请求数据
this.dataList = [{
"id": 12010,
"username": "碘盐",
"avatar": "https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/default_head/1.png?x-oss-process=style/yasuo",
"tell": '人懒，啥也没留',
"sex": "女",
"photo_list": [
"http://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/01/28/1548635034223276859883.jpg?x-oss-process=style/yasuo"
],
"create_type": "手机号呢注册",
"create_time": "2019-03-22 20:33:00",
"status": 1
}]; // 数据
this.dataCount = 1000; // 分页
sa.f5TableHeight(); // 刷新表格高度
},
// 查看
get: function (data) {
sa.alert(JSON.stringify(data));
},
// 查看 - 根据选中的
getBySelect: function (data) {
var selection = this.$refs['data-table'].selection;
if (selection.length == 0) {
return sa.msg('请选择一条数据')
}
this.get(selection[0]);
},
// 新增
add: function (data) {
//这里有两种新增方式，一个打开一个标签栏进行新增，一个是打开一个iframe弹框进行新增
sa.showIframe('新增数据', 'users-add.html', '400px', '400px');
// this.sa_admin.showMenuById('5-2');
},
//修改
edit: function (data) {
//这里有两种修改方式，一个打开一个标签栏进行修改，一个是打开一个iframe弹框进行修改
sa.showIframe('修改数据', 'users-edit.html?id=' + data.id, '400px', '400px');
// this.sa_admin.showMenuById('5-2');
},
// 删除
del: function (data) {
sa.confirm('是否删除，此操作不可撤销', function () {
//TODO 发送ajax请求：删除数据；参数：{id:data.id}
sa.ok('删除成功');
sa.f5TableHeight(); // 刷新表格高度
}.bind(this));
},
// 批量删除
deleteByIds: function () {
// 获取选中元素的id列表
let selection = this.$refs['data-table'].selection;
let ids = sa.getArrayField(selection, 'id');
if (selection.length == 0) {
return sa.msg('请至少选择一条数据')
}
// 提交删除
sa.confirm('是否批量删除选中数据？此操作不可撤销', function () {
//TODO 发送ajax请求：删除数据；参数：{ids: ids.join(',')}
sa.ok('删除成功');
sa.f5TableHeight(); // 刷新表格高度
}.bind(this));
},
},
created: function () {
this.f5();
sa.onInputEnter(); // 监听输入框的回车事件，执行查询
}
})
</script>
</body>
</html>
- 第四步：【编辑】模板users-edit.list。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户添加</title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<!-- 所有的 css & js 资源 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
<link rel="stylesheet" href="../../static/sa.css">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
<script src="../../static/sa.js"></script>
</head>
<body>
<div class="vue-box" style="display: none;" :style="'display: block;'">
<!-- 参数栏 -->
<div class="c-panel">
<div class="c-title">用户修改</div>
<el-form v-if="m">
<div class="c-item br">
<label class="c-label">昵称：</label>
<el-input size="mini" v-model="m.username"></el-input>
</div>
<div class="c-item br">
<label class="c-label">密码：</label>
<el-input size="mini" v-model="m.password"></el-input>
</div>
<div class="c-item br">
<label class="c-label">手机：</label>
<el-input size="mini" v-model="m.phone"></el-input>
</div>
<div class="c-item br">
<label class="c-label">角色：</label>
<el-select size="mini" v-model="m.role_id">
<el-option label="管理员" :value="1"></el-option>
<el-option label="公告管理员" :value="2"></el-option>
<el-option label="普通用户" :value="3"></el-option>
</el-select>
</div>
<div class="c-item br">
<label class="c-label">性别：</label>
<el-radio-group size="mini" v-model="m.sex" size="mini">
<el-radio :label="1">男</el-radio>
<el-radio :label="2">女</el-radio>
</el-radio-group>
</div>
<div class="c-item br">
<label class="c-label"></label>
<el-button size="mini" type="primary" icon="el-icon-plus" size="mini" @click="ok">确定</el-button>
</div>
</el-form>
</div>
</div>
<script type="text/javascript">
new Vue({
el: '.vue-box',
data: {
m: { // 查询参数
username: '',
password: '',
phone: '',
role_id: '',
sex: 1,
},
id: sa.p("id", -1)//接收sa.iframe通过url传来的参数
},
methods: {
// ok
ok: function () {
sa.checkNull(this.m.username, "昵称不能为空");
sa.checkNull(this.m.password, "密码不能为空");
//TODO 发送ajax请求：添加数据
sa.ok('添加成功');
}
},
mounted: function () {
console.log("ID："+this.id);
//TODO 发送ajax请求：回显数据
if (this.id !== -1) {
this.m.username = "张三";
this.m.password = "123456";
this.m.phone = "10086";
this.m.role_id = 1;
this.m.sex = 1;
}
}
})
</script>
</body>
</html>
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
