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">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 管理 <span class="c-gray en">&gt;</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">&#xe68f;</i>
    </a>
</nav>
<div class="page-container" id="app">
    <div class="text-c">
        <input type="text" name="" id="" v-model="search" placeholder=" Banner名称" style="250px" class="input-text">
        <button v-on:click="find" class="btn btn-success" type="button"><i class="Hui-iconfont">&#xe665;</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">&#xe600;</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="80">ID</th>
                    <th>Banner名称</th>
                    <th>图片</th>
                    <th>跳转类型</th>
                    <th width="80">排序</th>
                    <th width="120">操作</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="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">&#xe6df;</i>
                        </a>
                        <a style="text-decoration:none" class="ml-5" v-on:click="del(item.Id)" href="javascript:;" title="删除">
                            <i class="Hui-iconfont">&#xe6e2;</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: 0,
            pageIndex: 1,
            pageSize: 10,
            search: '',
        },
        methods: {
            loadList: function () {
                var index = layer.load(0, { 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 == 1) {
                            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: 2,
                    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 == 1000) {
                                layer.msg('已删除!', { icon: 1, time: 1000 });
                                vm.loadList();
                            }

                        });
                });
            },
            showPhotos: function (img) {
                var json = {
                    "title": "", //相册标题
                    "id": 123, //相册id
                    "start": 0, //初始显示的图片序号，默认0
                    "data": [   //相册包含的图片，数组格式
                        {
                            "alt": "图片",
                            "pid": 666, //图片id
                            "src": img, //原图地址
                            "thumb": img //缩略图地址
                        }
                    ]
                };
                layer.photos({
                    shade: 0.2,
                    maxWidth: 600,
                    //maxHeight :500,
                    area: 'auto',// ['600px', '450px'],
                    photos: json, 
                    anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });
            }
        },
        created: function () {
            this.loadList();
        },
        filters: {
            typeStr: function (value) {
                var show = "图片";
                switch (value) {
                    case 0:
                        show = "图片";
                        break;
                    case 1:
                        show = "资讯";
                        break;
                    case 2:
                        show = "外链";
                        break;
                    default:
                }
                return show;
            }

        },
    })

</script>

</body>
</html>

编辑页：

<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="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">&#xe632;</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>