yf_zd
/
yfwlwCut


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
							{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
    <link rel="stylesheet" href="{% static '/lib/css/ace-skins.min.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/ace-rtl.min.css' %}">
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <title>农机管理</title>
    <style>
        body {
            background: #fff;
        }

        /* 新增 */

        .refresh {
            float: right;
            margin-right: 20px;
            font-size: 14px;
            color: #2571b4;
            cursor: pointer;
        }

        .row {
            margin: 0;
        }

        .searchBox {
            margin-bottom: 20px;
        }

        /* 农机列表 */

        .machineItem {
            border-radius: 5px;
            box-shadow: 0px 0px 13px 0px #d9d9d9;
            overflow: hidden;
            margin-bottom: 15px;
        }

        .machineItem .top {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            background: #3886c9;
            color: #fff;
        }

        .machineItem .top>div {
            line-height: 30px;
            padding-left: 42px;
        }

        .machineItem .bottom {
            padding: 10px;
            text-align: right;
            color: #2571b4;
        }

        .machineItem .bottom a {
            color: #2571b4;
            margin-left: 10px;
            cursor: pointer;
        }

        .machineItem .bottom .delBtn {
            color: red;
        }

        .machineItem .bottom .editBtn {
            color: green;
        }

        /* 弹框 */

        #pop_up_panel {
            display: none;
            padding: 20px 0;
        }

        .layui-form-label {
            width: 120px;
        }

        .layui-form-mid {
            color: red !important;
        }

        .layui-upload-drag .layui-icon {
            color: #2571b4;
        }
    </style>

    <body>
        <div class="content">
            <div class="page-header">
                <h1>
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;">
                            农机管理
                        </font>
                    </font>
                    <div class="refresh" onclick="openPanel('')">
                        <i class="add">
                            <img src="/static/img/addicon.png" alt="" width="28">
                        </i>添加 </div>
                </h1>
            </div>
            <div class="row searchBox">
                <div class="col-xs-12">
                    农机编号：
                    <input type="text">
                    <button type="button" onclick="sub_filter()" class="btn btn-sm btn-primary">筛选</button>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
                    <div class="machineItem">
                        <div class="top">
                            <img src="{% static '/img/equipImg/wlwcdb.png' %}" alt="1" width="120px">
                            <div>
                                <p>农机名称：拖拉机</p>
                                <p>农机编号：001</p>
                                <p>采购人员：张三</p>
                            </div>
                        </div>
                        <div class="bottom">
                            <a href="machineList?id=123" class="useList">使用记录</a>
                            <a onclick="delItem('123',this)" class="delBtn">删除</a>
                            <a onclick="openPanel('')" class="editBtn">修改</a>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
                    <div class="machineItem">
                        <div class="top">
                            <img src="{% static '/img/equipImg/wlwcdb.png' %}" alt="1" width="120px">
                            <div>
                                <p>农机名称：拖拉机</p>
                                <p>农机编号：001</p>
                                <p>采购人员：张三</p>
                            </div>
                        </div>
                        <div class="bottom">
                            <a href="machineList?id=123" class="useList">使用记录</a>
                            <a onclick="delItem('123',this)" class="delBtn">删除</a>
                            <a onclick="openPanel('')" class="editBtn">修改</a>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
                    <div class="machineItem">
                        <div class="top">
                            <img src="{% static '/img/equipImg/wlwcdb.png' %}" alt="1" width="120px">
                            <div>
                                <p>农机名称：拖拉机</p>
                                <p>农机编号：001</p>
                                <p>采购人员：张三</p>
                            </div>
                        </div>
                        <div class="bottom">
                            <a href="machineList?id=123" class="useList">使用记录</a>
                            <a onclick="delItem('123',this)" class="delBtn">删除</a>
                            <a onclick="openPanel('')" class="editBtn">修改</a>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
                    <div class="machineItem">
                        <div class="top">
                            <img src="{% static '/img/equipImg/wlwcdb.png' %}" alt="1" width="120px">
                            <div>
                                <p>农机名称：拖拉机</p>
                                <p>农机编号：001</p>
                                <p>采购人员：张三</p>
                            </div>
                        </div>
                        <div class="bottom">
                            <a href="machineList?id=123" class="useList">使用记录</a>
                            <a onclick="delItem('123',this)" class="delBtn">删除</a>
                            <a onclick="openPanel('')" class="editBtn">修改</a>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
                    <div class="machineItem">
                        <div class="top">
                            <img src="{% static '/img/equipImg/wlwcdb.png' %}" alt="1" width="120px">
                            <div>
                                <p>农机名称：拖拉机</p>
                                <p>农机编号：001</p>
                                <p>采购人员：张三</p>
                            </div>
                        </div>
                        <div class="bottom">
                            <a href="machineList?id=123" class="useList">使用记录</a>
                            <a onclick="delItem('123',this)" class="delBtn">删除</a>
                            <a onclick="openPanel('')" class="editBtn">修改</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新增农机或编辑农机 -->
        <div id="pop_up_panel">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">农机名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入农机名称" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">*</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">采购人员</label>
                    <div class="layui-input-inline">
                        <input type="text" name="buyer" required lay-verify="required" placeholder="请输入采购人员" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">*</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">采购日期</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="test1" placeholder="年-月-日">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">农机图片</label>
                    <div class="layui-input-block">
                        <div class="layui-upload-drag" id="test10">
                            <i class="layui-icon"></i>
                            <p>点击上传，或将文件拖拽到此处</p>
                            <div class="layui-hide" id="uploadDemoView">
                                <hr>
                                <img src="" alt="上传成功后渲染" style="max-width: 196px">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>

        <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
        <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
        <script src="{% static '/lib/layui/layui.all.js' %}"></script>
        <script src="{% static '/js/common.js' %}?versions=0.5.0"></script>
        <script>
            $.ajaxSetup({
                data: {
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
            });
        </script>
        <script>
            layui.use(['form', 'laydate', 'upload'], function () {
                var form = layui.form;
                var laydate = layui.laydate;
                var upload = layui.upload;
                //常规用法
                laydate.render({
                    elem: '#test1',
                    theme: '#2571b4'
                })
                //拖拽上传
                upload.render({
                    elem: '#test10',
                    accept: 'images' //允许上传的文件类型
                        ,
                    size: 3072 //最大允许上传的文件大小KB
                        ,
                    url: 'https://httpbin.org/post' //改成您自己的上传接口
                        ,
                    done: function (res) {
                        layer.msg('上传成功');
                        layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src',
                            res.files.file);
                        console.log(res)
                    }
                });

                //监听提交
                form.on('submit(formDemo)', function (data) {
                    layer.msg(JSON.stringify(data.field));
                    return false;
                });
            });

            function openPanel(id) {
                layui.use('layer', function () {
                    var layer = layui.layer;
                    if (id) {} else {


                        // layer.msg('hello');
                    }
                    layer.open({
                        title: '新增农机',
                        type: 1,
                        area: ['700px', '500px'],
                        content: $('#pop_up_panel')
                    });
                });

            }

            function delItem(id,ele){
                layui.use('layer', function () {
                    var layer = layui.layer;
                    layer.confirm('是否删除农机设备'+id+'?', {icon: 3, title:'提示'}, function(index){
                        //do something
                        $(ele).parents('.machineItem').parent().remove();
                        layer.close(index);
                    });
                });
            }
        </script>
    </body>

</html>