正文

vue+h-ui+layUI完成列表页及编辑页

IP云V管理员/2022-09-09/0 阅读

09/09

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

最近做一个新项目，用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>

相关阅读

目录[+]