vue+h-ui+layUI完成列表页及编辑页
最近做一个新项目，用H-ui做后台，
比较喜欢他的模仿bootsharp的栅格和表单样式。
感觉不好的是iframe加载速度比较慢。
这里在原有的H-ui页面基础上加入用vue来绑数据，用的还可以。
用layui分页控件来绑分页加载，用layer作为弹窗显示
以后改造为用x-admin的首页，加H-ui的编辑和列表也，这样就解决了iframe加载比较慢的问题
列表页：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="./H-ui.admin/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="./H-ui.admin/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="./H-ui.admin/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="./H-ui.admin/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="./H-ui.admin/static/h-ui.admin/css/style.css" />
</head>
<body>
<style>
[v-cloak] {
display: none;
}
</style>
<nav class="breadcrumb">
<i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 管理 <span class="c-gray en">></span> Banner列表
<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新">
<i class="Hui-iconfont"></i>
</a>
</nav>
<div class="page-container" id="app">
<div class="text-c">
<input type="text" name="" id="" v-model="search" placeholder=" Banner名称" style="width:250px" class="input-text">
<button v-on:click="find" class="btn btn-success" type="button"><i class="Hui-iconfont"></i> 搜Banner名称</button>
</div>
<div class="cl pd-5 bg-1 bk-gray mt-20">
<span class="l">
<a class="btn btn-primary radius" href="javascript:;" v-on:click="add('添加Banner','/Admin/News/BannerEdit?id=0')">
<i class="Hui-iconfont"></i> 添加Banner
</a>
</span> <span class="r">共有数据：<strong>{{total}}</strong> 条</span>
</div>
<div class="mt-20">
<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
<thead>
<tr class="text-c">
<th width="">ID</th>
<th>Banner名称</th>
<th>图片</th>
<th>跳转类型</th>
<th width="">排序</th>
<th width="">操作</th>
</tr>
</thead>
<tbody>
<tr class="text-c" v-for="(item, index) in list" v-bind:key="item.Id">
<td v-cloak>{{++index}}</td>
<td v-cloak>{{item.Title}}</td>
<td v-cloak><a href="javascript:;"><img style="width:40px;height:40px" class="picture-thumb" v-bind:src="item.Img" v-on:click="showPhotos(item.Img)"></a></td>
<td v-cloak>{{item.Type|typeStr}}</td>
<td v-cloak>{{item.Sort}}</td>
<td v-cloak class="f-14 td-manage">
<a style="text-decoration:none" class="ml-5" v-on:click="add('Banner编辑', '/Admin/News/BannerEdit?id='+item.Id)" href="javascript:;" title="编辑">
<i class="Hui-iconfont"></i>
</a>
<a style="text-decoration:none" class="ml-5" v-on:click="del(item.Id)" href="javascript:;" title="删除">
<i class="Hui-iconfont"></i>
</a>
</td>
</tr> </tbody>
</table>
</div>
<div id="laypage"></div> </div> <script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Content/layer/layer.js"></script>
<script type="text/javascript" src="~/Content/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="~/Content/static/h-ui.admin/js/H-ui.admin.js"></script> <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
<script src="~/Content/layui/layui.js"></script>
<script src="~/Content/vue/vue2.6.js"></script>
<script src="~/Content/vue/axios.js"></script> <script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
list: [],
total: ,
pageIndex: ,
pageSize: ,
search: '',
},
methods: {
loadList: function () {
var index = layer.load(, { shade: false });
var data = {
pageIndex: this.pageIndex,
pageSize: this.pageSize,
search: this.search
};
axios.post('/A/N/GetB', data)
.then(result => {
this.list = result.data.Data;
this.total = result.data.Total; if (this.pageIndex == ) {
this.loadPage();
}
layer.close(index);
});
},
loadPage: function () {
layui.use(['laypage'], function () {
var laypage = layui.laypage;
laypage.render({
elem: 'laypage',
count: vm.total, //数据量
limit: vm.pageSize,//每页限制s
jump: function (obj, first) {
if (!first) {
vm.pageIndex = obj.curr;
vm.loadList();
}
}
});
});
},
find: function () {
this.loadList();
},
add: function (title, url, w, h) {
console.log(url)
var index = layer.open({
type: ,
title: title,
content: url
});
layer.full(index);
},
del: function (id) {
layer.confirm('确认要删除吗？', function (index) {
axios.post('/A/N/BDel', { id: id })
.then(result => {
if (result.data.ResultCode == ) {
layer.msg('已删除!', { icon: , time: });
vm.loadList();
} });
});
},
showPhotos: function (img) {
var json = {
"title": "", //相册标题
"id": , //相册id
"start": , //初始显示的图片序号，默认0
"data": [ //相册包含的图片，数组格式
{
"alt": "图片",
"pid": , //图片id
"src": img, //原图地址
"thumb": img //缩略图地址
}
]
};
layer.photos({
shade: 0.2,
maxWidth: ,
//maxHeight :500,
area: 'auto',// ['600px', '450px'],
photos: json,
anim: //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
}
},
created: function () {
this.loadList();
},
filters: {
typeStr: function (value) {
var show = "图片";
switch (value) {
case :
show = "图片";
break;
case :
show = "资讯";
break;
case :
show = "外链";
break;
default:
}
return show;
} },
}) </script>
</body>
</html>
编辑页：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="./H-ui.admin/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="./H-ui.admin/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="./H-ui.admin/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="./H-ui.admin/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="./H-ui.admin/static/h-ui.admin/css/style.css" />
</head>
<body>
<style>
.hide {
display:none;
}
.pic_list {
display: flex;
justify-content: flex-start;
} .pic_list li {
width: 80px;
height: 80px;
background: #F2F2F2;
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
cursor: pointer;
color: #ADADAD;
position: relative;
} .pic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style> <article class="page-container" id="app">
<form class="form form-horizontal" id="form">
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>B名称：</label>
<div class="formControls col-xs-4 col-sm-4">
<input type="text" class="input-text" placeholder="" v-model="title" maxlength="50">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>Banner图：</label>
<div class="formControls col-xs-8 col-sm-9">
<ul class="pic_list">
<li onclick="upload(this)">
上传图片
<img id="shareImg" v-bind:src="img" class="pic" v-bind:class="{hide:img==''}">
</li>
</ul>
<input type="file" accept="image/*" onchange="uploadImg(this)"style="display: none">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>类型：</label>
<div class="formControls col-xs-3 col-sm-3">
<span class="select-box">
<select v-model="type" class="select">
<option value="0">图片</option>
<option value="1">资讯</option>
<option value="2">外链</option>
</select>
</span>
</div>
</div>
<div v-show="type==2" class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>外链Url：</label>
<div class="formControls col-xs-6 col-sm-6">
<input type="text" class="input-text" placeholder="" v-model="url" maxlength="250">
</div>
</div>
<div v-show="type==1" class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>选择资讯：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text col-xs-6" placeholder="选择资讯" id="consultaionTitle" v-model="consultaionTitle" style="width:40%" readonly>
<input type="hidden" id="consultaionId" v-model="consultaionId" />
<button type="button" class="btn btn-default btn-uploadstar radius ml-10" v-on:click="choiceNews">选择资讯</button>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>排序值：</label>
<div class="formControls col-xs-4 col-sm-4">
<input type="text" class="input-text" placeholder="" v-model="sort">
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
<button v-on:click="save" class="btn btn-success radius" type="button">
<i class="Hui-iconfont"></i> 保 存
</button>
</div>
</div>
</form>
</article> <script src="~/Scripts/jquery.js"></script>
<script src="~/Content/layer/layer.js"></script>
<script src="~/Content/vue/vue.js"></script>
<script src="~/Content/vue/axios.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
id: 0,
title: "",
sort: 0,
type: 0,
consultaionId: 0,
consultaionTitle:"",
url: "",
img: "",
repeatSubmit: 0
},
methods: {
getBanner: function () {
this.id = this.getQueryString("id");
if (this.id > 0) {
//获取数据
var data = {
id: this.id
};
axios.post('/A/N/GetBById', data)
.then(result => {
this.title = result.data.Data.Title;
this.sort = result.data.Data.Sort;
this.type = result.data.Data.Type;
this.consultaionId = result.data.Data.CId;
this.url = result.data.Data.Url;
this.consultaionTitle = result.data.Data.CTitle;
this.img = result.data.Data.Img;
});
}
},
save: function () {
if (this.repeatSubmit == 1) return; if (this.title.trim() === "") {
layer.msg("名称不能为空！", { icon: 7, time: 2000 });
return;
}
if (this.img.trim() === "") {
layer.msg("请上传Banner图片！", { icon: 7, time: 2000 });
return;
}
if (this.type == 1 && this.consultaionId===0) {
layer.msg("请选择资讯！", { icon: 7, time: 2000 });
return;
} if (this.type == 2 && this.url === "") {
layer.msg("外链不能为空！", { icon: 7, time: 2000 });
return;
} if (this.sort === "") {
layer.msg('排序不能为空', { icon: 7, time: 2000 });
return;
}
var reg = /^\d+$/;
if (!reg.test(this.sort)) {
layer.msg('排序只能为数字', { icon: 7, time: 2000 });
return;
}
this.repeatSubmit = 1;
var index = layer.load(0, { shade: false }); //0代表加载的风格，支持0-2
var data = {
Id: this.id,
Title: this.title,
Sort: this.sort,
Type: this.type,
ConsultaionId: this.consultaionId,
Url: this.url,
Img: this.img
}; axios.post('/A/N/BSubmit', data)
.then(result => {
if (result.data.ResultCode == 1000) {
layer.msg(result.data.Message, { icon: 1, time: 1000 }, function () {
var indexF = parent.layer.getFrameIndex(window.name);
window.parent.location.reload();
parent.layer.close(indexF);
}); } else {
vm.repeatSubmit = 0;
layer.msg(result.data.Message, { icon: 1, time: 1000 });
}
layer.close(index);
});
},
//选择资讯
choiceNews: function () {
layer.open({
title:'选择资讯',
type: 2,
area: ['850px', '600px'],
fixed: false, //不固定
maxmin: true,
content: '/A/N/ChoiceC'
});
},
getQueryString: function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
},
created: function () {
this.getBanner();
}, }) //分享图片上传
function upload(dom) {
$(dom).parent().next().click();
}
//上传图片
function uploadImg(self) {
var file = self.files[0];
if (file == undefined || file == "") {
layer.open({
content: '请选择上传的图片'
, skin: 'msg'
, time: 2 //2秒后自动关闭
});
return;
}
var filename = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();//获取上传文件的类型
if (filename != "jpg" && filename != "png" && filename != "jpeg") {
layer.open({
content: "只能上传JPG/PNG/JPEG格式的图片,您上传的格式为：" + filename
, skin: 'msg'
, time: 2000 //2秒后自动关闭
});
return;
}
if (file.size > 1024 * 1024 * 5) {
layer.open({
content: '上传的图片不能超过5MB'
, skin: 'msg'
, time: 2000 //2秒后自动关闭
});
return;
}
var form = new FormData();
form.append('upfile', file);
form.append('type', filename);
$.ajax({
url: '/Home/UpLoadImg',
type: 'POST',
data: form,
async: true,
cache: false,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
}).done(function (data) {
layer.msg(data.Message, { icon: 1 });
if (data.ResultCode === 1000) {
vm.img = data.Data;
}
}).fail(function () {
layer.msg('图片错误，请重新选择！', { icon: 7 });
});
}
</script>
</body>
</html>
vue+h-ui+layUI完成列表页及编辑页的更多相关文章
- H+ 编辑tab页 保存后 刷新列表tab页 并关闭自已。tabA页调用tabB页的方法
//注:在contabs.js文件中 $(function () { }); 方法外 加入 //注: data-name="' + menuName + '" 这句是加入的自定义属 ...
- Django（十八）后台管理：列表页选项、编辑页选项、自定义后台页面
[参考]https://blog.csdn.net/u010132177/article/details/103814357 [参考]https://docs.djangoproject.com/zh ...
- PDF怎么去除页眉页脚，PDF页眉页脚编辑方法
我们在使用文件的时候需要编辑页眉页脚的时候,这个时候我们应该怎么做呢,相信别的文件大家都知道怎么编辑了,PDF文件大家都知道吗,最开始接触这个文件的时候小编觉得很难,之后找到技巧之后也并没有很难,今天 ...
- vue mandmobile ui实现三列列表的方法
vue mandmobile ui实现三列列表的方法 请问这种列表的要用那个组件好呢?Cellitem 只能用到两列,这个要三列的怎么弄?mand的好像没有listview,grid组件的 问了man ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- vue mand-mobile ui Stepper步进器默认值传字符串进去不起作用
vue mand-mobile ui Stepper步进器默认值传字符串进去不起作用 Stepper 步进器 的默认值有没有弄过的,看了组件只能默认数字的,传字符串进去不起作用<div slot ...
- vue + element ui 表格自定义表头，提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- vue+element ui 的tab 动态增减，切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
随机推荐
- zookeeper基本概述
zookeeper是一个分布式的协调服务框架 其本质是一个分布式的小文件存储系统,可以存储一些小的文件,官方建议每个小文件不要超过一兆 zk一般都是装奇数台,便于zk内部的一些投票选举 leader: ...
- NX二次开发-UFUN拉伸函数UF_MODL_create_extruded
NX9+VS2012 //NX二次开发中常用拉伸函数为UF_MODL_create_extruded2,但是此函数不能拉伸片体, //想要拉伸片体用函数UF_MODL_create_extruded. ...
- [DataContract]引用
项目->右键->添加引用->找到System.Runtime.Serialization 添加之
- 互联网公司java面试题（一）
1.JDK和JRE区别? JDK是整个JAVA的核心,包括了Java运行环境JRE,一堆Java工具和Java基础的类库.通过JDK开发人员将源码文件(java文件)编译成字节码文件(class文 件 ...
- BOM window对象方法
window对象方法 alert():弹出一个警告对话框. prompt():弹出一个输入对话框. confirm():弹出一个确认对话框.如果单击“确定按钮”返回true,如果单击“取消 ...
- GIT学习记录4（标签管理与自定义git）
学习参考地址:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 本编随笔只是自己对 ...
- Maven精选系列--classifier元素妙用
首先来看这么一个依赖 <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json- ...
- USACO2008 Patting Heads /// 筛数 oj24705
题目大意: N (1 < N < 100,000)头牛被编号为1-N,围坐成圈 每头牛都被画上数字Ai (1 ≤ Ai ≤ 1,000,000),可能重复 逐个起来拍打 其他身上的数字是 ...
- SQL Server实现跨库查询（跨库select insert）
方法一: select * from servername.dbo.tablename 方法二: select * from OPENDATASOURCE( 'SQLOLEDB', ...
- Random类和Math.random()方法
一.Random类的定义Random类位于 java.util 包中,主要用于生成伪 随机数Random类将 种子数 作为随机算法的起源数字,计算生成伪随机数,其与生成的随机数字的区间无关创建Rand ...