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="width: 50%" placeholder="输入关键词">
        <!--<select ng-model="order" class="form-control" style="width: 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="width: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="width: 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="width: 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="width: 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="width: 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="width: 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="width: 40%">
                <label>主要处理人:</label>
                <input id="main_helper" type="text" class="form-control"
                       placeholder="主要处理人">
            </div>

            <div class="form-group" style="width: 40%">
                <label>协助处理人:</label>
                <input id="assist_helper" type="text" class="form-control"
                       ng-click="addDateTimePicker()"
                       placeholder="协助处理人">
            </div>

            <div class="form-group" style="width: 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="width: 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="width: 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="width: 43%">
                            <input ng-model="measure.measure_name" ng-click="addDateTimePicker()"
                                   class="form-control" type="text"
                                   placeholder="输入改进措施" required>
                        </td>
                        <td style="width:20%">
                            <input ng-model="measure.responsible_person" name="measure_person"
                                   class="form-control person_input"
                                   type="text" placeholder="输入负责人">
                        </td>
                        <td style="width:15%">
                            <input ng-model="measure.deadline" type="text"
                                   class="form-control form_datetime"
                                   placeholder="截至日期">
                        </td>
                        <td style="width: 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="width: 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="width: 40%">
                <label>故障名称:</label>
                <input ng-model="data.basic.fault_name" type="text" class="form-control" placeholder="故障名称">
            </div>

            <div class="form-group" style="width: 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="width: 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="width: 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="width: 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="width: 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="width: 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="width: 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="width: 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="width: 43%">
                            <input ng-model="measure.measure_name" ng-click="addDateTimePicker()"
                                   class="form-control" type="text"
                                   placeholder="输入改进措施" required>
                        </td>
                        <td style="width:20%">
                            <input ng-model="measure.responsible_person" name="measure_person"
                                   class="form-control person_input"
                                   type="text" placeholder="输入负责人">
                        </td>
                        <td style="width:15%">
                            <input ng-model="measure.deadline" type="text"
                                   class="form-control form_datetime"
                                   placeholder="截至日期">
                        </td>
                        <td style="width: 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>

 

posted on 2016-10-27 10:43  星空守望者--jkmiao  阅读(257)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 星空守望者--jkmiao
Powered by .NET 9.0 on Kubernetes