zoukankan      html  css  js  c++  java
  • angularjs jquery thinkPHP3.2.3 相结合小实例

    angular1.5 与 jquery想结合一个小应用

    index.html

    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>故障管理列表</title>
        <load href="__PUBLIC__/jquery/jquery-3.1.1.min.js"/>
        <load href="__PUBLIC__/bootstrap/css/bootstrap.min.css"/>
        <load href="__PUBLIC__/js/angular.min.js"/>
        <load href="__PUBLIC__/css/sweetalert.css"/>
        <load href="__PUBLIC__/js/sweetalert.min.js"/>
        <load href="/api/Application/Habo_v2/View/Fault/style.css"/>
        <style>
            .warning {
                background-color: yellow;
            }
        </style>
    </head>
    <body ng-app="myApp">
    
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">demo</a>
            </div>
            <div class="navbar-header">
                <a class="navbar-brand" href="/api/index.php/Habo_v2/Fault/about"> About </a>
            </div>
        </div>
    </nav>
    <h2>故障记录列表</h2>
    <div class="container" ng-controller="faultCtrl">
        <div class="form form-inline">
            <input ng-model="query" type="text" class="form-control" style=" 50%" placeholder="输入关键词">
            <!--<select ng-model="order" class="form-control" style=" 10%" placeholder="排序字段" title="排序字段">-->
            <!--<option value="fault_system">fault_system</option>-->
            <!--<option value="fault_name">fault_name</option>-->
            <!--<option value="status">status</option>-->
            <!--<option value="occur_time">occur_time</option>-->
            <!--<option value="discover_time">discover_time</option>-->
            <!--<option value="solve_time">solve_time</option>-->
            <!--<option value="fault_id">fault_id</option>-->
            <!--</select>-->
            <button class="btn btn-primary">查找</button>
            <button class="btn btn-danger pull-right" ng-click="addFault()">新建</button>
        </div>
        <hr/>
        <table class="table table-striped table-hover table-bordered">
            <tr class="text-align:center">
                <th ng-click="orderKey='fault_id';sortDesc=!sortDesc">ID</th>
                <th ng-click="orderKey='fault_system';sortDesc=!sortDesc">故障系统</th>
                <th ng-click="orderKey='fault_name';sortDesc=!sortDesc">故障名称</th>
                <th ng-click="orderKey='creator';sortDesc=!sortDesc">记录创建人</th>
                <th ng-click="orderKey='main_helper';sortDesc=!sortDesc">故障处理人</th>
                <!--<th width="40%" ng-click="orderKey='phenomenon';sortDesc=!sortDesc" ;>故障现象</th>-->
                <th ng-click="orderKey='occur_time';sortDesc=!sortDesc">发生时间</th>
                <th ng-click="orderKey='status';sortDesc=!sortDesc">当前状态</th>
                <th>操作</th>
            </tr>
            <tr ng-repeat="item in items | filter: query | orderBy: orderKey: sortDesc">
                <td>{{item.fault_id}}</td>
                <td>{{item.fault_system}}</td>
                <td>
                    <a href="/api/index.php/Habo_v2/Fault/detail?fault_id={{item.fault_id}}">
                        {{item.fault_name}}
                    </a>
                </td>
                <td>{{item.creator}}</td>
                <td>{{item.main_helper}}</td>
                <!--<td style="40%; height:25px; overflow: hidden">
                    <textarea cols="50">
                       {{item.phenomenon}}
                    </textarea>
                </td>-->
                <td><span>{{item.occur_time}}</span></td>
                <td><span ng-class="label {{item.statusLabel}}">{{item.status}}</span></td>
                <td><a ng-href="/api/index.php/Habo_v2/Fault/edit?fault_id={{item.fault_id}}">修改</a> |
                    <span ng-click=deleteFault(item.fault_id)><a href="#">删除</a></span>
                </td>
            </tr>
            <tr>
                <td colspan="7" style="text-align: left"><code>total: {{total}}</code></td>
            </tr>
        </table>
    </div>
    
    <footer>
        <div class="container footer">
            <div class="navbar navbar-default navbar-fixed-bottom">
                Copyright &copy;
                <script type="text/javascript">
                    d = new Date;
                    document.write(d.getFullYear());
                </script>
                <span>Habo, Inc. All rights reserved.</span><br/>
                Generated by <a href="http://Habo.oa.com">Habo</a>.
            </div>
        </div>
    </footer>
    
    <script>
    
        var app = angular.module('myApp', []);
        app.controller('faultCtrl', ['$scope', '$http', '$log', '$sce', function ($scope, $http, $log, $sce) {
    
            $scope.orderKey = 'status';
            $scope.sortDesc = true;
            $scope.deleteFault = function (faultId) {
                swal({
                    title: "确定删除么?",
                    text: "建议在原先记录直接修改保存即可,不要随意删除",
                    type: "warning",
                    showCancelButton: true,
                    cancellButtonText: '取消删除',
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "确定删除",
                    closeOnConfirm: false
                }, function () {
                    var param = {
                        'fault_id': faultId
                    };
                    $.post("/api/index.php/Habo_v2/Fault/delete", param, function (jsondata) {
                        if (jsondata['code'] == 0) {
                            swal({
                                title: "done",
                                text: jsondata['message'],
                                type: "success",
                            }, function () {
                                window.location = "/api/index.php/Habo_v2/Fault/index/index.html";
                            });
                        } else {
                            swal('failed', jsondata['message'], 'error');
                        }
                        $log.debug("delete result: ", jsondata);
                    }, "json");
                });
            };
    
            // 新建
            $scope.addFault = function () {
                window.location = "/api/index.php/Habo_v2/Fault/add";
            };
    
            // 获取列表items
            $http.get("http://dev.habo.oa.com/api/index.php/Habo_v2/Fault/getFaultBasic")
                    .success(function (response) {
                        $scope.items = response.data;
                        for (var item in $scope.items) {
                            if (item.staus != '已解决') {
                                item.statusLabel = 'danger';
                            }
                        }
                        $scope.total = $scope.items.length;
                        $log.info('faultData', response.data);
                    });
    
            $scope.TrustDangerousSnippet = function (post) {
                return $sce.trustAsHtml(post.phenomenon);
            };
    
    
        }]);
    </script>
    </body>
    </html>

    add.html

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
    
        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
             Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
        <title>新建故障单报告</title>
    
        <!-- Mobile viewport optimized: j.mp/bplateviewport -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <!-- CSS: implied media="all" -->
        <load href="__PUBLIC__/bootstrap/css/bootstrap.min.css"/>
        <load href="__PUBLIC__/jquery/jquery-3.1.1.min.js"/>
        <load href="__PUBLIC__/js/angular.min.js"/>
    
        <load href="__PUBLIC__/bootstrap/css/bootstrap-datetimepicker.css"/>
        <load href="__PUBLIC__/bootstrap/js/bootstrap-datetimepicker.js"/>
        <load href="__PUBLIC__/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"/>
    
        <load href="__PUBLIC__/css/sweetalert.css"/>
        <load href="__PUBLIC__/js/sweetalert.min.js"/>
    
        <load href="__PUBLIC__/Ueditor/ueditor.config.js"/>
        <load href="__PUBLIC__/Ueditor/ueditor.all.min.js"/>
        <load href="__PUBLIC__/Ueditor/lang/zh-cn/zh-cn.js"/>
        <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
    
        <script src="http://lib.cdc.com/oaui/memberpicker/0.1/js/memberinput.js"></script>
        <load href="/api/Application/Habo_v2/View/Fault/style.css"/>
    
        <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
    
    </head>
    
    <body ng-app="faultApp">
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/api/index.php/Habo_v2/Fault/index">运营开发二组故障记录平台</a>
            </div>
            <div class="navbar-header">
                <a class="navbar-brand" href="/api/index.php/Habo_v2/Fault/about"> About </a>
            </div>
        </div>
    </nav>
    
    <h2> 新建故障单记录 </h2>
    <div ng-controller="addFaultCtrl">
        <div class="container bg-info" style="padding: 30px">
            <form class="form" role="form">
                <div class="form-group" style=" 40%">
                    <label>出故障系统:</label>
                    <select ng-model="data.basic.fault_system" type="text" class="form-control" title="故障系统">
                        <option selected>哈勃多维</option>
                        <option>模调监控</option>
                        <option>H5测速及返回码</option>
                        <option>monitor监控</option>
                    </select>
                </div>
    
                <div class="form-group" style=" 40%">
                    <label>故障名称:</label>
                    <input ng-model="data.basic.fault_name" type="text"
                           ng-click="addDateTimePicker()"
                           class="form-control" placeholder="故障名称">
                </div>
    
                <div class="form-group" style=" 40%">
                    <label for="source_type">发现途径:</label>
                    <select class="form-control" id="source_type" ng-model="data.basic.source_type" title="发现途径">
                        <option selected>监控报警</option>
                        <option>用户反馈</option>
                    </select>
                </div>
                <div class="form-group" style=" 40%">
                    <label for="status">当前状态:</label>
                    <select class="form-control" id="status" ng-model="data.basic.status" title="当前状态">
                        <option>已解决</option>
                        <option>待解决</option>
                    </select>
                </div>
    
    
                <div class="form-group">
                    <label for="phenomenon">故障现象:</label>
                    <textarea id="phenomenon" placeholder="简单描述"></textarea>
                </div>
    
                <div class="form-group">
                    <label for="scope">影响范围:</label>
                    <textarea id="scope" placeholder="影响范围:用户、业务等"></textarea>
                </div>
                <div class="form-group" style=" 40%">
                    <label>事故责任人:</label>
                    <input id="responsible_person" type="text" ng-model="data.basic.responsible_person"
                           class="form-control" placeholder="事故责任人">
                </div>
                <div class="form-group" style=" 40%">
                    <label>主要处理人:</label>
                    <input id="main_helper" type="text" class="form-control"
                           placeholder="主要处理人">
                </div>
    
                <div class="form-group" style=" 40%">
                    <label>协助处理人:</label>
                    <input id="assist_helper" type="text" class="form-control"
                           ng-click="addDateTimePicker()"
                           placeholder="协助处理人">
                </div>
    
                <div class="form-group" style=" 40%">
                    <label for="occur_time" class="control-label">故障发生时间:</label>
                    <div class="input-group date" data-link-field="occur_time">
                        <input ng-model="data.basic.occur_time" id="occur_time" type="text"
                               class="form-control form_datetime"
                               placeholder="故障发生时间">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                </div>
    
                <div class="form-group" style=" 40%">
                    <label for="discover_time" class="control-label">故障发现时间:</label>
                    <div class="input-group date" data-link-field="discover_time">
                        <input class="form-control form_datetime" id="discover_time" ng-model="data.basic.discover_time"
                               type="text">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                </div>
    
                <div class="form-group" style=" 40%">
                    <label for="solve_time" class="control-label">故障解决时间:</label>
                    <div class="input-group date" data-link-field="solve_time">
                        <input class="form-control form_datetime" id="solve_time" ng-model="data.basic.solve_time"
                               type="text">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                </div>
    
                <div class="form-group">
                    <label for="solution">处理过程:</label>
                    <textarea id="solution" placeholder="简要概述处理过程"></textarea>
                </div>
                <div class="form-group">
                    <label>故障原因:</label>
                    <textarea id="reason" placeholder="请写清楚故障原因"></textarea>
                </div>
    
                <div class="form-group">
                    <label ng-click="addFirstMeasure()">改进措施:</label>
                    <!--<span ng-click="addFirstMeasure()"><a href="">添加</a></span>-->
                    <table>
                        <th class="col-sm-5">具体措施</th>
                        <th class="col-sm-2">负责人</th>
                        <th class="col-sm-2" ng-click="addDateTimePicker()">完成时间</th>
                        <th class="col-sm-1">完成进度(%)</th>
                        <th class="col-sm-2">操作</th>
                        <tr ng-repeat="measure in data.measures track by $index">
                            <td style=" 43%">
                                <input ng-model="measure.measure_name" ng-click="addDateTimePicker()"
                                       class="form-control" type="text"
                                       placeholder="输入改进措施" required>
                            </td>
                            <td style="20%">
                                <input ng-model="measure.responsible_person" name="measure_person"
                                       class="form-control person_input"
                                       type="text" placeholder="输入负责人">
                            </td>
                            <td style="15%">
                                <input ng-model="measure.deadline" type="text"
                                       class="form-control form_datetime"
                                       placeholder="截至日期">
                            </td>
                            <td style=" 10%">
                                <input ng-model="measure.status" type="number" class="form-control"
                                       placeholder="填写当前进度" title="填写当前进度" min="0" max="100" required>
                            </td>
                            <td>
                                <span ng-click="addMeasure($index)"><a href="">添加</a></span> |
                                <span ng-click="removeMeasure($index)"><a href="">删除</a></span>
                            </td>
                        </tr>
                    </table>
                </div>
    
                <div class="form-group row">
                    <button id="reset" type="reset()" class="btn btn-danger col-md-2 col-md-offset-2">重置</button>
                    <button id="save" ng-click="save()" class="btn btn-primary col-md-2 col-md-offset-2">保存</button>
                </div>
            </form>
        </div>
    </div>
    
    <footer>
        <div class="container footer">
            <div class="navbar navbar-default navbar-fixed-bottom">
                Copyright &copy;
                <script type="text/javascript">
                    d = new Date;
                    document.write(d.getFullYear());
                </script>
                <span>Habo, Inc. All rights reserved.</span><br/>
                Generated by <a href="http://Habo.oa.com">Habo</a>.
            </div>
        </div>
    </footer>
    <script>
        var app = angular.module('faultApp', []);
        app.controller('addFaultCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
            $scope.data = {
                basic: {},
                measures: [
                    {
                        measure_name: '',
                        responsible_person: '',
                        deadline: '',
                        status: ''
                    }
                ]
            };
    
            $log.info('init', $scope.data);
    
            $scope.addMeasure = function (idx) {
                changeValue();
                console.log("faultData chage after", $scope.data);
                var data = {
                    measure_name: '',
                    responsible_person: '',
                    deadline: '',
                    status: 0
                };
                $scope.data.measures.splice(idx + 1, 0, data);
                $scope.addDateTimePicker()
            };
    
            $scope.addFirstMeasure = function () {
                var data = {
                    measure_name: '',
                    responsible_person: '',
                    deadline: '',
                    status: 0
                };
                $scope.data.measures.push(data);
                $scope.addDateTimePicker()
            };
    
            $scope.removeMeasure = function (idx) {
                $scope.data.measures.splice(idx, 1);
            };
    
            $scope.save = function () {
                changeValue();
                var param = {
                    'faultData': $scope.data
                };
                console.log("post param", param);
                $.post("/api/index.php/Habo_v2/Fault/addFault", param, function (jsondata) {
                    if (jsondata['code'] == 0) {
                        swal({
                            title: "done",
                            text: jsondata['message'],
                            type: "success",
                        }, function () {
                            window.location = "/api/index.php/Habo_v2/Fault/index/index.html";
                        });
                    } else {
                        swal('failed', jsondata['message'], 'error');
                    }
                    $log.info("result: ", jsondata);
    
                }, "json");
            };
    
            $scope.reset = function () {
                swal({
                    title: "Are you sure?",
                    text: "重置清空后无法恢复",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, delete it!",
                    closeOnConfirm: false
                }, function () {
                    $scope.data = {};
                    $('#phenomenon').val('');
                    $("#scope").val("");
                    $("#solution").val("");
                    $("#reason").val("");
                });
            };
    
            function changeValue() {
                $scope.data.basic.responsible_person = $("#responsible_person").val();
                $scope.data.basic.main_helper = $('#main_helper').val();
                $scope.data.basic.assist_helper = $('#assist_helper').val();
    
                $scope.data.basic.phenomenon = phenomenon.getContent();
                $scope.data.basic.scope = scope.getContent();
                $scope.data.basic.solution = solution.getContent();
                $scope.data.basic.reason = reason.getContent();
    
                $("input[name='measure_person']").each(function (index, element) {
                    var person = $(this).val();
                    $scope.data.measures[index].responsible_person = person;
                });
                $log.info($scope.data);
            }
    
            var timeconfig = {
                language: 'zh-CN',
                format: "yyyy-mm-dd hh:ii",
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                forceParse: 1,
                showMeridian: 1,
                minuteStep: 1
            };
    
            $('.form_datetime').datetimepicker(timeconfig);
            $('#responsible_person').memberInput();
            $('#main_helper').memberInput();
            $('#assist_helper').memberInput();
    
            $scope.addDateTimePicker = function () {
                $('.form_datetime').datetimepicker(timeconfig);
                $('.person_input').memberInput();
            };
    
            window.UEDITOR_HOME_URL = "__PUBLIC__/Ueditor/";
            var edtorconfig = {
                toolbars: [
                    ['fullscreen', 'source', '|', 'undo', 'redo', '|',
                        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',
                        'simpleupload', 'insertimage']
                ],
                //    initialFrameWidth: 1000,  //初始化编辑器宽度,默认1000
                initialFrameHeight: 200,
                saveInterval: 5000, //5s 默认保存一次
                elementPathEnabled: false  // 元素路径隐藏
            };
    
            var phenomenon = UE.getEditor('phenomenon', edtorconfig);
            var scope = UE.getEditor('scope', edtorconfig);
            var solution = UE.getEditor('solution', edtorconfig);
            var reason = UE.getEditor('reason', edtorconfig);
        }]);
    </script>
    </body>
    </html>

    edit.html

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
    
        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
             Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
        <title>编辑故障单报告</title>
    
        <!-- Mobile viewport optimized: j.mp/bplateviewport -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <!-- CSS: implied media="all" -->
        <load href="__PUBLIC__/bootstrap/css/bootstrap.min.css"/>
        <load href="__PUBLIC__/jquery/jquery-3.1.1.min.js"/>
        <load href="__PUBLIC__/js/angular.min.js"/>
    
        <load href="__PUBLIC__/bootstrap/css/bootstrap-datetimepicker.css"/>
        <load href="__PUBLIC__/bootstrap/js/bootstrap-datetimepicker.js"/>
        <load href="__PUBLIC__/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"/>
    
        <load href="__PUBLIC__/css/sweetalert.css"/>
        <load href="__PUBLIC__/js/sweetalert.min.js"/>
    
        <load href="__PUBLIC__/Ueditor/ueditor.config.js"/>
        <load href="__PUBLIC__/Ueditor/ueditor.all.min.js"/>
        <load href="__PUBLIC__/Ueditor/lang/zh-cn/zh-cn.js"/>
        <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
    
        <script src="http://lib.cdc.com/oaui/memberpicker/0.1/js/memberinput.js"></script>
        <load href="/api/Application/Habo_v2/View/Fault/style.css"/>
    
        <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
    
    </head>
    
    <body ng-app="faultApp">
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/api/index.php/Habo_v2/Fault/index">运营开发二组故障记录平台</a>
            </div>
            <div class="navbar-header">
                <a class="navbar-brand" href="/api/index.php/Habo_v2/Fault/about"> About </a>
            </div>
        </div>
    </nav>
    
    <h2> 编辑故障单记录 </h2>
    <div ng-controller="addFaultCtrl">
        <div class="container bg-info" style="padding: 30px">
            <form class="form" role="form">
                <input id="faultId" value="{$basic.fault_id}" hidden>
                <div class="form-group" style=" 40%">
                    <label>出故障系统:</label>
                    <select ng-model="data.basic.fault_system" type="text" class="form-control" placeholder="故障系统">
                        <option selected>哈勃多维</option>
                        <option>模调监控</option>
                        <option>H5测速及返回码</option>
                        <option>monitor监控</option>
                    </select>
                </div>
    
                <div class="form-group" style=" 40%">
                    <label>故障名称:</label>
                    <input ng-model="data.basic.fault_name" type="text" class="form-control" placeholder="故障名称">
                </div>
    
                <div class="form-group" style=" 40%">
                    <label for="source_type">发现途径:</label>
                    <select class="form-control" id="source_type" ng-model="data.basic.source_type">
                        <option selected>监控报警</option>
                        <option>用户反馈</option>
                    </select>
                </div>
                <div class="form-group" style=" 40%">
                    <label for="status">当前状态:</label>
                    <select class="form-control" id="status" ng-model="data.basic.status">
                        <option>已解决</option>
                        <option>待解决</option>
                    </select>
                </div>
    
    
                <div class="form-group">
                    <label for="phenomenon">故障现象:</label>
                    <textarea id="phenomenon" placeholder="简单描述">{:htmlspecialchars_decode($basic['phenomenon'])}</textarea>
                </div>
    
                <div class="form-group">
                    <label for="scope">影响范围:</label>
                    <textarea id="scope" placeholder="影响范围:用户、业务等">{:htmlspecialchars_decode($basic['scope'])}</textarea>
                </div>
                <div class="form-group" style=" 40%">
                    <label>事故责任人:</label>
                    <input id="responsible_person" type="text"
                           ng-model="data.basic.responsible_person" value="{$basic.responsible_person}"
                           class="form-control" placeholder="事故责任人">
                </div>
                <div class="form-group" style=" 40%">
                    <label>主要处理人:</label>
                    <input id="main_helper" type="text" class="form-control"
                           ng-model="data.basic.main_helper" value="{$basic.main_helper}"
                           placeholder="主要处理人">
                </div>
    
                <div class="form-group" style=" 40%">
                    <label>协助处理人:</label>
                    <input id="assist_helper" type="text" class="form-control"
                           ng-model="data.basic.assist_helper" value="{$basic.assist_helper}"
                           placeholder="协助处理人">
                </div>
    
                <div class="form-group" style=" 40%">
                    <label for="occur_time" class="control-label">故障发生时间:</label>
                    <div class="input-group date" data-link-field="occur_time">
                        <input class="form-control form_datetime" id="occur_time" ng-model="data.basic.occur_time"
                               type="text">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                </div>
    
                <div class="form-group" style=" 40%">
                    <label for="discover_time" class="control-label">故障发现时间:</label>
                    <div class="input-group date" data-link-field="discover_time">
                        <input class="form-control form_datetime" id="discover_time" ng-model="data.basic.discover_time"
                               type="text">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                </div>
    
                <div class="form-group" style=" 40%">
                    <label for="solve_time" class="control-label">故障解决时间:</label>
                    <div class="input-group date" data-link-field="solve_time">
                        <input class="form-control form_datetime" id="solve_time" ng-model="data.basic.solve_time"
                               type="text">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                </div>
    
                <div class="form-group">
                    <label for="solution">处理过程:</label>
                    <textarea id="solution" placeholder="简要概述处理过程">{:htmlspecialchars_decode($basic['solution'])}</textarea>
                </div>
                <div class="form-group">
                    <label>故障原因:</label>
                    <textarea id="reason" placeholder="请写清楚故障原因">{:htmlspecialchars_decode($basic['reason'])}</textarea>
                </div>
    
                <div class="form-group">
                    <label ng-click="addFirstMeasure()">改进措施:</label>
                    <!--<span ng-click="addFirstMeasure()"><a href="">添加</a></span>-->
                    <table>
                        <th class="col-sm-5">具体措施</th>
                        <th class="col-sm-2">负责人</th>
                        <th class="col-sm-2" ng-click="addDateTimePicker()">完成时间</th>
                        <th class="col-sm-1">完成进度(%)</th>
                        <th class="col-sm-2">操作</th>
                        <tr ng-repeat="measure in data.measures track by $index">
                            <td style=" 43%">
                                <input ng-model="measure.measure_name" ng-click="addDateTimePicker()"
                                       class="form-control" type="text"
                                       placeholder="输入改进措施" required>
                            </td>
                            <td style="20%">
                                <input ng-model="measure.responsible_person" name="measure_person"
                                       class="form-control person_input"
                                       type="text" placeholder="输入负责人">
                            </td>
                            <td style="15%">
                                <input ng-model="measure.deadline" type="text"
                                       class="form-control form_datetime"
                                       placeholder="截至日期">
                            </td>
                            <td style=" 10%">
                                <input ng-model="measure.status" type="text" class="form-control"
                                       placeholder="填写当前进度" title="填写当前进度" required>
                            </td>
                            <td>
                                <span ng-click="addMeasure($index)"><a href="">添加</a></span> |
                                <span ng-click="removeMeasure($index)"><a href="">删除</a></span>
                            </td>
                        </tr>
                    </table>
                </div>
    
                <div class="form-group row">
                    <button id="reset" ng-click="reset()" class="btn btn-danger col-md-2 col-md-offset-2">重置</button>
                    <button id="save" ng-click="save()" class="btn btn-primary col-md-2 col-md-offset-2">保存</button>
                </div>
            </form>
        </div>
    </div>
    <footer>
        <div class="container footer">
            <div class="navbar navbar-default navbar-fixed-bottom">
                Copyright &copy;
                <script type="text/javascript">
                    d = new Date;
                    document.write(d.getFullYear());
                </script>
                <span>Habo, Inc. All rights reserved.</span><br/>
                Generated by <a href="http://Habo.oa.com">Habo</a>.
            </div>
        </div>
    </footer>
    <script>
        var app = angular.module('faultApp', []);
        app.controller('addFaultCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
            $scope.data = {
                basic: {},
                measures: [
                    {
                        measure_name: '',
                        responsible_person: '',
                        deadline: '',
                        status: ''
                    }
                ]
            };
    
            $log.info('init', $scope.data);
    
            $scope.addMeasure = function (idx) {
                var data = {
                    measure_name: '',
                    responsible_person: '',
                    deadline: '',
                    status: 0
                };
                $scope.data.measures.splice(idx + 1, 0, data);
                $scope.addDateTimePicker()
            };
    
            $scope.addFirstMeasure = function () {
                var data = {
                    measure_name: '',
                    responsible_person: '',
                    deadline: '',
                    status: 0
                };
                $scope.data.measures.push(data);
                $scope.addDateTimePicker()
            };
    
            $scope.removeMeasure = function (idx) {
                $scope.data.measures.splice(idx, 1);
            };
    
            $scope.addDateTimePicker = function () {
                $('.form_datetime').datetimepicker(timeconfig);
                $('.person_input').memberInput();
            };
    
            $scope.save = function () {
                changeValue();
                var param = {
                    'fault_id': $('#faultId').val(),
                    'faultData': $scope.data
                };
                console.log("post param", param);
                $.post("/api/index.php/Habo_v2/Fault/updateFault", param, function (jsondata) {
                    if (jsondata['code'] == 0) {
                        swal({
                            title: "done",
                            text: jsondata['message'],
                            type: "success",
                        }, function () {
                            window.location = "/api/index.php/Habo_v2/Fault/index/index.html";
                        });
                    } else {
                        swal('failed', jsondata['message'], 'error');
                    }
                    $log.debug("result: ", jsondata);
    
                }, "json");
            };
            $scope.reset = function () {
                $scope.data = {
                    basic: {},
                    measures: [
                        {
                            measure_name: '',
                            responsible_person: '',
                            deadline: '',
                            status: ''
                        }
                    ]
                };
                $log.debug('phenomenon init', phenomenon.getContent());
                phenomenon.reset();
                $("#scope").val("");
                $("#solution").val("");
                $("#reason").val("");
    
                $log.debug('phenomenon reset', phenomenon.getContent());
            };
    
            $http.get("http://dev.habo.oa.com/api/index.php/Habo_v2/Fault/getFaultDetail", {params: {fault_id: $('#faultId').val()}})
                    .success(function (response) {
                        $scope.data = response.data;
                        $log.info('get fault detail', response.data);
                    });
    
            function changeValue() {
                $scope.data.basic.responsible_person = $("#responsible_person").val();
                $scope.data.basic.main_helper = $('#main_helper').val();
                $scope.data.basic.assist_helper = $('#assist_helper').val();
    
                $scope.data.basic.phenomenon = phenomenon.getContent();
                $scope.data.basic.scope = scope.getContent();
                $scope.data.basic.solution = solution.getContent();
                $scope.data.basic.reason = reason.getContent();
    
                $("input[name='measure_person']").each(function (index, element) {
                    var person = $(this).val();
                    $scope.data.measures[index].responsible_person = person;
                });
                $log.info($scope.data);
            }
    
            $('#responsible_person').memberInput();
            $('#main_helper').memberInput();
            $('#assist_helper').memberInput();
    
            var timeconfig = {
                language: 'zh-CN',
                format: "yyyy-mm-dd hh:ii",
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                forceParse: 1,
                showMeridian: 1,
                minuteStep: 1
            };
            $('.form_datetime').datetimepicker(timeconfig);
    
    
            window.UEDITOR_HOME_URL = "__PUBLIC__/Ueditor/";
            var config = {
                toolbars: [
                    ['fullscreen', 'source', '|', 'undo', 'redo', '|',
                        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',
                        'simpleupload', 'insertimage']
                ],
                //    initialFrameWidth: 1000,  //初始化编辑器宽度,默认1000
                initialFrameHeight: 200,
                saveInterval: 5000, //5s 默认保存一次
                elementPathEnabled: false  // 元素路径隐藏
            };
    
            var phenomenon = UE.getEditor('phenomenon', config);
            var scope = UE.getEditor('scope', config);
            var solution = UE.getEditor('solution', config);
            var reason = UE.getEditor('reason', config);
        }]);
    </script>
    </body>
    </html>
    每天一小步,人生一大步!Good luck~
  • 相关阅读:
    jvm.option是什么,它是如何加载的
    适配器模式--想象一下转换插头
    Android gradle 配置
    Android全面屏适配
    github控件地址
    TextView 链接显示及跳转
    解决java.lang.annotation.AnnotationFormatError: Invalid default: public abstract java.lang.Class org.robolectric.annotation.Config.application()
    解决Android中,禁止ScrollView内的控件改变之后自动滚动
    Android跳转到应用商店的APP详情页面,以及 Google GMS 各个apk的包
    EditText小记
  • 原文地址:https://www.cnblogs.com/jkmiao/p/6003059.html
Copyright © 2011-2022 走看看