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

index.html

  1. <html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  5.     <title>故障管理列表</title>
  6.     <load href="__PUBLIC__/jquery/jquery-3.1.1.min.js"/>
  7.     <load href="__PUBLIC__/bootstrap/css/bootstrap.min.css"/>
  8.     <load href="__PUBLIC__/js/angular.min.js"/>
  9.     <load href="__PUBLIC__/css/sweetalert.css"/>
  10.     <load href="__PUBLIC__/js/sweetalert.min.js"/>
  11.     <load href="/api/Application/Habo_v2/View/Fault/style.css"/>
  12.     <style>
  13.         .warning {
  14.             background-color: yellow;
  15.         }
  16.     </style>
  17. </head>
  18. <body ng-app="myApp">
  19.  
  20. <nav class="navbar navbar-inverse" role="navigation">
  21.     <div class="container-fluid">
  22.         <div class="navbar-header">
  23.             <a class="navbar-brand" href="#">demo</a>
  24.         </div>
  25.         <div class="navbar-header">
  26.             <a class="navbar-brand" href="/api/index.php/Habo_v2/Fault/about"> About </a>
  27.         </div>
  28.     </div>
  29. </nav>
  30. <h2>故障记录列表</h2>
  31. <div class="container" ng-controller="faultCtrl">
  32.     <div class="form form-inline">
  33.         <input ng-model="query" type="text" class="form-control" style="width: 50%" placeholder="输入关键词">
  34.         <!--<select ng-model="order" class="form-control" style="width: 10%" placeholder="排序字段" title="排序字段">-->
  35.         <!--<option value="fault_system">fault_system</option>-->
  36.         <!--<option value="fault_name">fault_name</option>-->
  37.         <!--<option value="status">status</option>-->
  38.         <!--<option value="occur_time">occur_time</option>-->
  39.         <!--<option value="discover_time">discover_time</option>-->
  40.         <!--<option value="solve_time">solve_time</option>-->
  41.         <!--<option value="fault_id">fault_id</option>-->
  42.         <!--</select>-->
  43.         <button class="btn btn-primary">查找</button>
  44.         <button class="btn btn-danger pull-right" ng-click="addFault()">新建</button>
  45.     </div>
  46.     <hr/>
  47.     <table class="table table-striped table-hover table-bordered">
  48.         <tr class="text-align:center">
  49.             <th ng-click="orderKey='fault_id';sortDesc=!sortDesc">ID</th>
  50.             <th ng-click="orderKey='fault_system';sortDesc=!sortDesc">故障系统</th>
  51.             <th ng-click="orderKey='fault_name';sortDesc=!sortDesc">故障名称</th>
  52.             <th ng-click="orderKey='creator';sortDesc=!sortDesc">记录创建人</th>
  53.             <th ng-click="orderKey='main_helper';sortDesc=!sortDesc">故障处理人</th>
  54.             <!--<th width="40%" ng-click="orderKey='phenomenon';sortDesc=!sortDesc" ;>故障现象</th>-->
  55.             <th ng-click="orderKey='occur_time';sortDesc=!sortDesc">发生时间</th>
  56.             <th ng-click="orderKey='status';sortDesc=!sortDesc">当前状态</th>
  57.             <th>操作</th>
  58.         </tr>
  59.         <tr ng-repeat="item in items | filter: query | orderBy: orderKey: sortDesc">
  60.             <td>{{item.fault_id}}</td>
  61.             <td>{{item.fault_system}}</td>
  62.             <td>
  63.                 <a href="/api/index.php/Habo_v2/Fault/detail?fault_id={{item.fault_id}}">
  64.                     {{item.fault_name}}
  65.                 </a>
  66.             </td>
  67.             <td>{{item.creator}}</td>
  68.             <td>{{item.main_helper}}</td>
  69.             <!--<td style="width:40%; height:25px; overflow: hidden">
  70.                 <textarea cols="50">
  71.                    {{item.phenomenon}}
  72.                 </textarea>
  73.             </td>-->
  74.             <td><span>{{item.occur_time}}</span></td>
  75.             <td><span ng-class="label {{item.statusLabel}}">{{item.status}}</span></td>
  76.             <td><a ng-href="/api/index.php/Habo_v2/Fault/edit?fault_id={{item.fault_id}}">修改</a> |
  77.                 <span ng-click=deleteFault(item.fault_id)><a href="#">删除</a></span>
  78.             </td>
  79.         </tr>
  80.         <tr>
  81.             <td colspan="7" style="text-align: left"><code>total: {{total}}</code></td>
  82.         </tr>
  83.     </table>
  84. </div>
  85.  
  86. <footer>
  87.     <div class="container footer">
  88.         <div class="navbar navbar-default navbar-fixed-bottom">
  89.             Copyright &copy;
  90.             <script type="text/javascript">
  91.                 d = new Date;
  92.                 document.write(d.getFullYear());
  93.             </script>
  94.             <span>Habo, Inc. All rights reserved.</span><br/>
  95.             Generated by <a href="http://Habo.oa.com">Habo</a>.
  96.         </div>
  97.     </div>
  98. </footer>
  99.  
  100. <script>
  101.  
  102.     var app = angular.module('myApp', []);
  103.     app.controller('faultCtrl', ['$scope', '$http', '$log', '$sce', function ($scope, $http, $log, $sce) {
  104.  
  105.         $scope.orderKey = 'status';
  106.         $scope.sortDesc = true;
  107.         $scope.deleteFault = function (faultId) {
  108.             swal({
  109.                 title: "确定删除么？",
  110.                 text: "建议在原先记录直接修改保存即可，不要随意删除",
  111.                 type: "warning",
  112.                 showCancelButton: true,
  113.                 cancellButtonText: '取消删除',
  114.                 confirmButtonColor: "#DD6B55",
  115.                 confirmButtonText: "确定删除",
  116.                 closeOnConfirm: false
  117.             }, function () {
  118.                 var param = {
  119.                     'fault_id': faultId
  120.                 };
  121.                 $.post("/api/index.php/Habo_v2/Fault/delete", param, function (jsondata) {
  122.                     if (jsondata['code'] == 0) {
  123.                         swal({
  124.                             title: "done",
  125.                             text: jsondata['message'],
  126.                             type: "success",
  127.                         }, function () {
  128.                             window.location = "/api/index.php/Habo_v2/Fault/index/index.html";
  129.                         });
  130.                     } else {
  131.                         swal('failed', jsondata['message'], 'error');
  132.                     }
  133.                     $log.debug("delete result: ", jsondata);
  134.                 }, "json");
  135.             });
  136.         };
  137.  
  138.         // 新建
  139.         $scope.addFault = function () {
  140.             window.location = "/api/index.php/Habo_v2/Fault/add";
  141.         };
  142.  
  143.         // 获取列表items
  144.         $http.get("http://dev.habo.oa.com/api/index.php/Habo_v2/Fault/getFaultBasic")
  145.                 .success(function (response) {
  146.                     $scope.items = response.data;
  147.                     for (var item in $scope.items) {
  148.                         if (item.staus != '已解决') {
  149.                             item.statusLabel = 'danger';
  150.                         }
  151.                     }
  152.                     $scope.total = $scope.items.length;
  153.                     $log.info('faultData', response.data);
  154.                 });
  155.  
  156.         $scope.TrustDangerousSnippet = function (post) {
  157.             return $sce.trustAsHtml(post.phenomenon);
  158.         };
  159.  
  160.     }]);
  161. </script>
  162. </body>
  163. </html>

add.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.  
  6.     <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
  7.          Remove this if you use the .htaccess -->
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  9.  
  10.     <title>新建故障单报告</title>
  11.  
  12.     <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14.  
  15.     <!-- CSS: implied media="all" -->
  16.     <load href="__PUBLIC__/bootstrap/css/bootstrap.min.css"/>
  17.     <load href="__PUBLIC__/jquery/jquery-3.1.1.min.js"/>
  18.     <load href="__PUBLIC__/js/angular.min.js"/>
  19.  
  20.     <load href="__PUBLIC__/bootstrap/css/bootstrap-datetimepicker.css"/>
  21.     <load href="__PUBLIC__/bootstrap/js/bootstrap-datetimepicker.js"/>
  22.     <load href="__PUBLIC__/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"/>
  23.  
  24.     <load href="__PUBLIC__/css/sweetalert.css"/>
  25.     <load href="__PUBLIC__/js/sweetalert.min.js"/>
  26.  
  27.     <load href="__PUBLIC__/Ueditor/ueditor.config.js"/>
  28.     <load href="__PUBLIC__/Ueditor/ueditor.all.min.js"/>
  29.     <load href="__PUBLIC__/Ueditor/lang/zh-cn/zh-cn.js"/>
  30.     <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
  31.  
  32.     <script src="http://lib.cdc.com/oaui/memberpicker/0.1/js/memberinput.js"></script>
  33.     <load href="/api/Application/Habo_v2/View/Fault/style.css"/>
  34.  
  35.     <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
  36.  
  37. </head>
  38.  
  39. <body ng-app="faultApp">
  40. <nav class="navbar navbar-inverse" role="navigation">
  41.     <div class="container-fluid">
  42.         <div class="navbar-header">
  43.             <a class="navbar-brand" href="/api/index.php/Habo_v2/Fault/index">运营开发二组故障记录平台</a>
  44.         </div>
  45.         <div class="navbar-header">
  46.             <a class="navbar-brand" href="/api/index.php/Habo_v2/Fault/about"> About </a>
  47.         </div>
  48.     </div>
  49. </nav>
  50.  
  51. <h2> 新建故障单记录 </h2>
  52. <div ng-controller="addFaultCtrl">
  53.     <div class="container bg-info" style="padding: 30px">
  54.         <form class="form" role="form">
  55.             <div class="form-group" style="width: 40%">
  56.                 <label>出故障系统:</label>
  57.                 <select ng-model="data.basic.fault_system" type="text" class="form-control" title="故障系统">
  58.                     <option selected>哈勃多维</option>
  59.                     <option>模调监控</option>
  60.                     <option>H5测速及返回码</option>
  61.                     <option>monitor监控</option>
  62.                 </select>
  63.             </div>
  64.  
  65.             <div class="form-group" style="width: 40%">
  66.                 <label>故障名称:</label>
  67.                 <input ng-model="data.basic.fault_name" type="text"
  68.                        ng-click="addDateTimePicker()"
  69.                        class="form-control" placeholder="故障名称">
  70.             </div>
  71.  
  72.             <div class="form-group" style="width: 40%">
  73.                 <label for="source_type">发现途径:</label>
  74.                 <select class="form-control" id="source_type" ng-model="data.basic.source_type" title="发现途径">
  75.                     <option selected>监控报警</option>
  76.                     <option>用户反馈</option>
  77.                 </select>
  78.             </div>
  79.             <div class="form-group" style="width: 40%">
  80.                 <label for="status">当前状态:</label>
  81.                 <select class="form-control" id="status" ng-model="data.basic.status" title="当前状态">
  82.                     <option>已解决</option>
  83.                     <option>待解决</option>
  84.                 </select>
  85.             </div>
  86.  
  87.             <div class="form-group">
  88.                 <label for="phenomenon">故障现象:</label>
  89.                 <textarea id="phenomenon" placeholder="简单描述"></textarea>
  90.             </div>
  91.  
  92.             <div class="form-group">
  93.                 <label for="scope">影响范围:</label>
  94.                 <textarea id="scope" placeholder="影响范围：用户、业务等"></textarea>
  95.             </div>
  96.             <div class="form-group" style="width: 40%">
  97.                 <label>事故责任人:</label>
  98.                 <input id="responsible_person" type="text" ng-model="data.basic.responsible_person"
  99.                        class="form-control" placeholder="事故责任人">
  100.             </div>
  101.             <div class="form-group" style="width: 40%">
  102.                 <label>主要处理人:</label>
  103.                 <input id="main_helper" type="text" class="form-control"
  104.                        placeholder="主要处理人">
  105.             </div>
  106.  
  107.             <div class="form-group" style="width: 40%">
  108.                 <label>协助处理人:</label>
  109.                 <input id="assist_helper" type="text" class="form-control"
  110.                        ng-click="addDateTimePicker()"
  111.                        placeholder="协助处理人">
  112.             </div>
  113.  
  114.             <div class="form-group" style="width: 40%">
  115.                 <label for="occur_time" class="control-label">故障发生时间:</label>
  116.                 <div class="input-group date" data-link-field="occur_time">
  117.                     <input ng-model="data.basic.occur_time" id="occur_time" type="text"
  118.                            class="form-control form_datetime"
  119.                            placeholder="故障发生时间">
  120.                     <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
  121.                 </div>
  122.             </div>
  123.  
  124.             <div class="form-group" style="width: 40%">
  125.                 <label for="discover_time" class="control-label">故障发现时间:</label>
  126.                 <div class="input-group date" data-link-field="discover_time">
  127.                     <input class="form-control form_datetime" id="discover_time" ng-model="data.basic.discover_time"
  128.                            type="text">
  129.                     <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
  130.                 </div>
  131.             </div>
  132.  
  133.             <div class="form-group" style="width: 40%">
  134.                 <label for="solve_time" class="control-label">故障解决时间:</label>
  135.                 <div class="input-group date" data-link-field="solve_time">
  136.                     <input class="form-control form_datetime" id="solve_time" ng-model="data.basic.solve_time"
  137.                            type="text">
  138.                     <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
  139.                 </div>
  140.             </div>
  141.  
  142.             <div class="form-group">
  143.                 <label for="solution">处理过程:</label>
  144.                 <textarea id="solution" placeholder="简要概述处理过程"></textarea>
  145.             </div>
  146.             <div class="form-group">
  147.                 <label>故障原因:</label>
  148.                 <textarea id="reason" placeholder="请写清楚故障原因"></textarea>
  149.             </div>
  150.  
  151.             <div class="form-group">
  152.                 <label ng-click="addFirstMeasure()">改进措施:</label>
  153.                 <!--<span ng-click="addFirstMeasure()"><a href="">添加</a></span>-->
  154.                 <table>
  155.                     <th class="col-sm-5">具体措施</th>
  156.                     <th class="col-sm-2">负责人</th>
  157.                     <th class="col-sm-2" ng-click="addDateTimePicker()">完成时间</th>
  158.                     <th class="col-sm-1">完成进度(%)</th>
  159.                     <th class="col-sm-2">操作</th>
  160.                     <tr ng-repeat="measure in data.measures track by $index">
  161.                         <td style="width: 43%">
  162.                             <input ng-model="measure.measure_name" ng-click="addDateTimePicker()"
  163.                                    class="form-control" type="text"
  164.                                    placeholder="输入改进措施" required>
  165.                         </td>
  166.                         <td style="width:20%">
  167.                             <input ng-model="measure.responsible_person" name="measure_person"
  168.                                    class="form-control person_input"
  169.                                    type="text" placeholder="输入负责人">
  170.                         </td>
  171.                         <td style="width:15%">
  172.                             <input ng-model="measure.deadline" type="text"
  173.                                    class="form-control form_datetime"
  174.                                    placeholder="截至日期">
  175.                         </td>
  176.                         <td style="width: 10%">
  177.                             <input ng-model="measure.status" type="number" class="form-control"
  178.                                    placeholder="填写当前进度" title="填写当前进度" min="0" max="100" required>
  179.                         </td>
  180.                         <td>
  181.                             <span ng-click="addMeasure($index)"><a href="">添加</a></span> |
  182.                             <span ng-click="removeMeasure($index)"><a href="">删除</a></span>
  183.                         </td>
  184.                     </tr>
  185.                 </table>
  186.             </div>
  187.  
  188.             <div class="form-group row">
  189.                 <button id="reset" type="reset()" class="btn btn-danger col-md-2 col-md-offset-2">重置</button>
  190.                 <button id="save" ng-click="save()" class="btn btn-primary col-md-2 col-md-offset-2">保存</button>
  191.             </div>
  192.         </form>
  193.     </div>
  194. </div>
  195.  
  196. <footer>
  197.     <div class="container footer">
  198.         <div class="navbar navbar-default navbar-fixed-bottom">
  199.             Copyright &copy;
  200.             <script type="text/javascript">
  201.                 d = new Date;
  202.                 document.write(d.getFullYear());
  203.             </script>
  204.             <span>Habo, Inc. All rights reserved.</span><br/>
  205.             Generated by <a href="http://Habo.oa.com">Habo</a>.
  206.         </div>
  207.     </div>
  208. </footer>
  209. <script>
  210.     var app = angular.module('faultApp', []);
  211.     app.controller('addFaultCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
  212.         $scope.data = {
  213.             basic: {},
  214.             measures: [
  215.                 {
  216.                     measure_name: '',
  217.                     responsible_person: '',
  218.                     deadline: '',
  219.                     status: ''
  220.                 }
  221.             ]
  222.         };
  223.  
  224.         $log.info('init', $scope.data);
  225.  
  226.         $scope.addMeasure = function (idx) {
  227.             changeValue();
  228.             console.log("faultData chage after", $scope.data);
  229.             var data = {
  230.                 measure_name: '',
  231.                 responsible_person: '',
  232.                 deadline: '',
  233.                 status: 0
  234.             };
  235.             $scope.data.measures.splice(idx + 1, 0, data);
  236.             $scope.addDateTimePicker()
  237.         };
  238.  
  239.         $scope.addFirstMeasure = function () {
  240.             var data = {
  241.                 measure_name: '',
  242.                 responsible_person: '',
  243.                 deadline: '',
  244.                 status: 0
  245.             };
  246.             $scope.data.measures.push(data);
  247.             $scope.addDateTimePicker()
  248.         };
  249.  
  250.         $scope.removeMeasure = function (idx) {
  251.             $scope.data.measures.splice(idx, 1);
  252.         };
  253.  
  254.         $scope.save = function () {
  255.             changeValue();
  256.             var param = {
  257.                 'faultData': $scope.data
  258.             };
  259.             console.log("post param", param);
  260.             $.post("/api/index.php/Habo_v2/Fault/addFault", param, function (jsondata) {
  261.                 if (jsondata['code'] == 0) {
  262.                     swal({
  263.                         title: "done",
  264.                         text: jsondata['message'],
  265.                         type: "success",
  266.                     }, function () {
  267.                         window.location = "/api/index.php/Habo_v2/Fault/index/index.html";
  268.                     });
  269.                 } else {
  270.                     swal('failed', jsondata['message'], 'error');
  271.                 }
  272.                 $log.info("result: ", jsondata);
  273.  
  274.             }, "json");
  275.         };
  276.  
  277.         $scope.reset = function () {
  278.             swal({
  279.                 title: "Are you sure?",
  280.                 text: "重置清空后无法恢复",
  281.                 type: "warning",
  282.                 showCancelButton: true,
  283.                 confirmButtonColor: "#DD6B55",
  284.                 confirmButtonText: "Yes, delete it!",
  285.                 closeOnConfirm: false
  286.             }, function () {
  287.                 $scope.data = {};
  288.                 $('#phenomenon').val('');
  289.                 $("#scope").val("");
  290.                 $("#solution").val("");
  291.                 $("#reason").val("");
  292.             });
  293.         };
  294.  
  295.         function changeValue() {
  296.             $scope.data.basic.responsible_person = $("#responsible_person").val();
  297.             $scope.data.basic.main_helper = $('#main_helper').val();
  298.             $scope.data.basic.assist_helper = $('#assist_helper').val();
  299.  
  300.             $scope.data.basic.phenomenon = phenomenon.getContent();
  301.             $scope.data.basic.scope = scope.getContent();
  302.             $scope.data.basic.solution = solution.getContent();
  303.             $scope.data.basic.reason = reason.getContent();
  304.  
  305.             $("input[name='measure_person']").each(function (index, element) {
  306.                 var person = $(this).val();
  307.                 $scope.data.measures[index].responsible_person = person;
  308.             });
  309.             $log.info($scope.data);
  310.         }
  311.  
  312.         var timeconfig = {
  313.             language: 'zh-CN',
  314.             format: "yyyy-mm-dd hh:ii",
  315.             weekStart: 1,
  316.             todayBtn: 1,
  317.             autoclose: 1,
  318.             todayHighlight: 1,
  319.             startView: 2,
  320.             forceParse: 1,
  321.             showMeridian: 1,
  322.             minuteStep: 1
  323.         };
  324.  
  325.         $('.form_datetime').datetimepicker(timeconfig);
  326.         $('#responsible_person').memberInput();
  327.         $('#main_helper').memberInput();
  328.         $('#assist_helper').memberInput();
  329.  
  330.         $scope.addDateTimePicker = function () {
  331.             $('.form_datetime').datetimepicker(timeconfig);
  332.             $('.person_input').memberInput();
  333.         };
  334.  
  335.         window.UEDITOR_HOME_URL = "__PUBLIC__/Ueditor/";
  336.         var edtorconfig = {
  337.             toolbars: [
  338.                 ['fullscreen', 'source', '|', 'undo', 'redo', '|',
  339.                     'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',
  340.                     'simpleupload', 'insertimage']
  341.             ],
  342.             //    initialFrameWidth: 1000,  //初始化编辑器宽度,默认1000
  343.             initialFrameHeight: 200,
  344.             saveInterval: 5000, //5s 默认保存一次
  345.             elementPathEnabled: false  // 元素路径隐藏
  346.         };
  347.  
  348.         var phenomenon = UE.getEditor('phenomenon', edtorconfig);
  349.         var scope = UE.getEditor('scope', edtorconfig);
  350.         var solution = UE.getEditor('solution', edtorconfig);
  351.         var reason = UE.getEditor('reason', edtorconfig);
  352.     }]);
  353. </script>
  354. </body>
  355. </html>

edit.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.  
  6.     <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
  7.          Remove this if you use the .htaccess -->
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  9.  
  10.     <title>编辑故障单报告</title>
  11.  
  12.     <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14.  
  15.     <!-- CSS: implied media="all" -->
  16.     <load href="__PUBLIC__/bootstrap/css/bootstrap.min.css"/>
  17.     <load href="__PUBLIC__/jquery/jquery-3.1.1.min.js"/>
  18.     <load href="__PUBLIC__/js/angular.min.js"/>
  19.  
  20.     <load href="__PUBLIC__/bootstrap/css/bootstrap-datetimepicker.css"/>
  21.     <load href="__PUBLIC__/bootstrap/js/bootstrap-datetimepicker.js"/>
  22.     <load href="__PUBLIC__/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"/>
  23.  
  24.     <load href="__PUBLIC__/css/sweetalert.css"/>
  25.     <load href="__PUBLIC__/js/sweetalert.min.js"/>
  26.  
  27.     <load href="__PUBLIC__/Ueditor/ueditor.config.js"/>
  28.     <load href="__PUBLIC__/Ueditor/ueditor.all.min.js"/>
  29.     <load href="__PUBLIC__/Ueditor/lang/zh-cn/zh-cn.js"/>
  30.     <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
  31.  
  32.     <script src="http://lib.cdc.com/oaui/memberpicker/0.1/js/memberinput.js"></script>
  33.     <load href="/api/Application/Habo_v2/View/Fault/style.css"/>
  34.  
  35.     <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
  36.  
  37. </head>
  38.  
  39. <body ng-app="faultApp">
  40. <nav class="navbar navbar-inverse" role="navigation">
  41.     <div class="container-fluid">
  42.         <div class="navbar-header">
  43.             <a class="navbar-brand" href="/api/index.php/Habo_v2/Fault/index">运营开发二组故障记录平台</a>
  44.         </div>
  45.         <div class="navbar-header">
  46.             <a class="navbar-brand" href="/api/index.php/Habo_v2/Fault/about"> About </a>
  47.         </div>
  48.     </div>
  49. </nav>
  50.  
  51. <h2> 编辑故障单记录 </h2>
  52. <div ng-controller="addFaultCtrl">
  53.     <div class="container bg-info" style="padding: 30px">
  54.         <form class="form" role="form">
  55.             <input id="faultId" value="{$basic.fault_id}" hidden>
  56.             <div class="form-group" style="width: 40%">
  57.                 <label>出故障系统:</label>
  58.                 <select ng-model="data.basic.fault_system" type="text" class="form-control" placeholder="故障系统">
  59.                     <option selected>哈勃多维</option>
  60.                     <option>模调监控</option>
  61.                     <option>H5测速及返回码</option>
  62.                     <option>monitor监控</option>
  63.                 </select>
  64.             </div>
  65.  
  66.             <div class="form-group" style="width: 40%">
  67.                 <label>故障名称:</label>
  68.                 <input ng-model="data.basic.fault_name" type="text" class="form-control" placeholder="故障名称">
  69.             </div>
  70.  
  71.             <div class="form-group" style="width: 40%">
  72.                 <label for="source_type">发现途径:</label>
  73.                 <select class="form-control" id="source_type" ng-model="data.basic.source_type">
  74.                     <option selected>监控报警</option>
  75.                     <option>用户反馈</option>
  76.                 </select>
  77.             </div>
  78.             <div class="form-group" style="width: 40%">
  79.                 <label for="status">当前状态:</label>
  80.                 <select class="form-control" id="status" ng-model="data.basic.status">
  81.                     <option>已解决</option>
  82.                     <option>待解决</option>
  83.                 </select>
  84.             </div>
  85.  
  86.             <div class="form-group">
  87.                 <label for="phenomenon">故障现象:</label>
  88.                 <textarea id="phenomenon" placeholder="简单描述">{:htmlspecialchars_decode($basic['phenomenon'])}</textarea>
  89.             </div>
  90.  
  91.             <div class="form-group">
  92.                 <label for="scope">影响范围:</label>
  93.                 <textarea id="scope" placeholder="影响范围：用户、业务等">{:htmlspecialchars_decode($basic['scope'])}</textarea>
  94.             </div>
  95.             <div class="form-group" style="width: 40%">
  96.                 <label>事故责任人:</label>
  97.                 <input id="responsible_person" type="text"
  98.                        ng-model="data.basic.responsible_person" value="{$basic.responsible_person}"
  99.                        class="form-control" placeholder="事故责任人">
  100.             </div>
  101.             <div class="form-group" style="width: 40%">
  102.                 <label>主要处理人:</label>
  103.                 <input id="main_helper" type="text" class="form-control"
  104.                        ng-model="data.basic.main_helper" value="{$basic.main_helper}"
  105.                        placeholder="主要处理人">
  106.             </div>
  107.  
  108.             <div class="form-group" style="width: 40%">
  109.                 <label>协助处理人:</label>
  110.                 <input id="assist_helper" type="text" class="form-control"
  111.                        ng-model="data.basic.assist_helper" value="{$basic.assist_helper}"
  112.                        placeholder="协助处理人">
  113.             </div>
  114.  
  115.             <div class="form-group" style="width: 40%">
  116.                 <label for="occur_time" class="control-label">故障发生时间:</label>
  117.                 <div class="input-group date" data-link-field="occur_time">
  118.                     <input class="form-control form_datetime" id="occur_time" ng-model="data.basic.occur_time"
  119.                            type="text">
  120.                     <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
  121.                 </div>
  122.             </div>
  123.  
  124.             <div class="form-group" style="width: 40%">
  125.                 <label for="discover_time" class="control-label">故障发现时间:</label>
  126.                 <div class="input-group date" data-link-field="discover_time">
  127.                     <input class="form-control form_datetime" id="discover_time" ng-model="data.basic.discover_time"
  128.                            type="text">
  129.                     <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
  130.                 </div>
  131.             </div>
  132.  
  133.             <div class="form-group" style="width: 40%">
  134.                 <label for="solve_time" class="control-label">故障解决时间:</label>
  135.                 <div class="input-group date" data-link-field="solve_time">
  136.                     <input class="form-control form_datetime" id="solve_time" ng-model="data.basic.solve_time"
  137.                            type="text">
  138.                     <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
  139.                 </div>
  140.             </div>
  141.  
  142.             <div class="form-group">
  143.                 <label for="solution">处理过程:</label>
  144.                 <textarea id="solution" placeholder="简要概述处理过程">{:htmlspecialchars_decode($basic['solution'])}</textarea>
  145.             </div>
  146.             <div class="form-group">
  147.                 <label>故障原因:</label>
  148.                 <textarea id="reason" placeholder="请写清楚故障原因">{:htmlspecialchars_decode($basic['reason'])}</textarea>
  149.             </div>
  150.  
  151.             <div class="form-group">
  152.                 <label ng-click="addFirstMeasure()">改进措施:</label>
  153.                 <!--<span ng-click="addFirstMeasure()"><a href="">添加</a></span>-->
  154.                 <table>
  155.                     <th class="col-sm-5">具体措施</th>
  156.                     <th class="col-sm-2">负责人</th>
  157.                     <th class="col-sm-2" ng-click="addDateTimePicker()">完成时间</th>
  158.                     <th class="col-sm-1">完成进度(%)</th>
  159.                     <th class="col-sm-2">操作</th>
  160.                     <tr ng-repeat="measure in data.measures track by $index">
  161.                         <td style="width: 43%">
  162.                             <input ng-model="measure.measure_name" ng-click="addDateTimePicker()"
  163.                                    class="form-control" type="text"
  164.                                    placeholder="输入改进措施" required>
  165.                         </td>
  166.                         <td style="width:20%">
  167.                             <input ng-model="measure.responsible_person" name="measure_person"
  168.                                    class="form-control person_input"
  169.                                    type="text" placeholder="输入负责人">
  170.                         </td>
  171.                         <td style="width:15%">
  172.                             <input ng-model="measure.deadline" type="text"
  173.                                    class="form-control form_datetime"
  174.                                    placeholder="截至日期">
  175.                         </td>
  176.                         <td style="width: 10%">
  177.                             <input ng-model="measure.status" type="text" class="form-control"
  178.                                    placeholder="填写当前进度" title="填写当前进度" required>
  179.                         </td>
  180.                         <td>
  181.                             <span ng-click="addMeasure($index)"><a href="">添加</a></span> |
  182.                             <span ng-click="removeMeasure($index)"><a href="">删除</a></span>
  183.                         </td>
  184.                     </tr>
  185.                 </table>
  186.             </div>
  187.  
  188.             <div class="form-group row">
  189.                 <button id="reset" ng-click="reset()" class="btn btn-danger col-md-2 col-md-offset-2">重置</button>
  190.                 <button id="save" ng-click="save()" class="btn btn-primary col-md-2 col-md-offset-2">保存</button>
  191.             </div>
  192.         </form>
  193.     </div>
  194. </div>
  195. <footer>
  196.     <div class="container footer">
  197.         <div class="navbar navbar-default navbar-fixed-bottom">
  198.             Copyright &copy;
  199.             <script type="text/javascript">
  200.                 d = new Date;
  201.                 document.write(d.getFullYear());
  202.             </script>
  203.             <span>Habo, Inc. All rights reserved.</span><br/>
  204.             Generated by <a href="http://Habo.oa.com">Habo</a>.
  205.         </div>
  206.     </div>
  207. </footer>
  208. <script>
  209.     var app = angular.module('faultApp', []);
  210.     app.controller('addFaultCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
  211.         $scope.data = {
  212.             basic: {},
  213.             measures: [
  214.                 {
  215.                     measure_name: '',
  216.                     responsible_person: '',
  217.                     deadline: '',
  218.                     status: ''
  219.                 }
  220.             ]
  221.         };
  222.  
  223.         $log.info('init', $scope.data);
  224.  
  225.         $scope.addMeasure = function (idx) {
  226.             var data = {
  227.                 measure_name: '',
  228.                 responsible_person: '',
  229.                 deadline: '',
  230.                 status: 0
  231.             };
  232.             $scope.data.measures.splice(idx + 1, 0, data);
  233.             $scope.addDateTimePicker()
  234.         };
  235.  
  236.         $scope.addFirstMeasure = function () {
  237.             var data = {
  238.                 measure_name: '',
  239.                 responsible_person: '',
  240.                 deadline: '',
  241.                 status: 0
  242.             };
  243.             $scope.data.measures.push(data);
  244.             $scope.addDateTimePicker()
  245.         };
  246.  
  247.         $scope.removeMeasure = function (idx) {
  248.             $scope.data.measures.splice(idx, 1);
  249.         };
  250.  
  251.         $scope.addDateTimePicker = function () {
  252.             $('.form_datetime').datetimepicker(timeconfig);
  253.             $('.person_input').memberInput();
  254.         };
  255.  
  256.         $scope.save = function () {
  257.             changeValue();
  258.             var param = {
  259.                 'fault_id': $('#faultId').val(),
  260.                 'faultData': $scope.data
  261.             };
  262.             console.log("post param", param);
  263.             $.post("/api/index.php/Habo_v2/Fault/updateFault", param, function (jsondata) {
  264.                 if (jsondata['code'] == 0) {
  265.                     swal({
  266.                         title: "done",
  267.                         text: jsondata['message'],
  268.                         type: "success",
  269.                     }, function () {
  270.                         window.location = "/api/index.php/Habo_v2/Fault/index/index.html";
  271.                     });
  272.                 } else {
  273.                     swal('failed', jsondata['message'], 'error');
  274.                 }
  275.                 $log.debug("result: ", jsondata);
  276.  
  277.             }, "json");
  278.         };
  279.         $scope.reset = function () {
  280.             $scope.data = {
  281.                 basic: {},
  282.                 measures: [
  283.                     {
  284.                         measure_name: '',
  285.                         responsible_person: '',
  286.                         deadline: '',
  287.                         status: ''
  288.                     }
  289.                 ]
  290.             };
  291.             $log.debug('phenomenon init', phenomenon.getContent());
  292.             phenomenon.reset();
  293.             $("#scope").val("");
  294.             $("#solution").val("");
  295.             $("#reason").val("");
  296.  
  297.             $log.debug('phenomenon reset', phenomenon.getContent());
  298.         };
  299.  
  300.         $http.get("http://dev.habo.oa.com/api/index.php/Habo_v2/Fault/getFaultDetail", {params: {fault_id: $('#faultId').val()}})
  301.                 .success(function (response) {
  302.                     $scope.data = response.data;
  303.                     $log.info('get fault detail', response.data);
  304.                 });
  305.  
  306.         function changeValue() {
  307.             $scope.data.basic.responsible_person = $("#responsible_person").val();
  308.             $scope.data.basic.main_helper = $('#main_helper').val();
  309.             $scope.data.basic.assist_helper = $('#assist_helper').val();
  310.  
  311.             $scope.data.basic.phenomenon = phenomenon.getContent();
  312.             $scope.data.basic.scope = scope.getContent();
  313.             $scope.data.basic.solution = solution.getContent();
  314.             $scope.data.basic.reason = reason.getContent();
  315.  
  316.             $("input[name='measure_person']").each(function (index, element) {
  317.                 var person = $(this).val();
  318.                 $scope.data.measures[index].responsible_person = person;
  319.             });
  320.             $log.info($scope.data);
  321.         }
  322.  
  323.         $('#responsible_person').memberInput();
  324.         $('#main_helper').memberInput();
  325.         $('#assist_helper').memberInput();
  326.  
  327.         var timeconfig = {
  328.             language: 'zh-CN',
  329.             format: "yyyy-mm-dd hh:ii",
  330.             weekStart: 1,
  331.             todayBtn: 1,
  332.             autoclose: 1,
  333.             todayHighlight: 1,
  334.             startView: 2,
  335.             forceParse: 1,
  336.             showMeridian: 1,
  337.             minuteStep: 1
  338.         };
  339.         $('.form_datetime').datetimepicker(timeconfig);
  340.  
  341.         window.UEDITOR_HOME_URL = "__PUBLIC__/Ueditor/";
  342.         var config = {
  343.             toolbars: [
  344.                 ['fullscreen', 'source', '|', 'undo', 'redo', '|',
  345.                     'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',
  346.                     'simpleupload', 'insertimage']
  347.             ],
  348.             //    initialFrameWidth: 1000,  //初始化编辑器宽度,默认1000
  349.             initialFrameHeight: 200,
  350.             saveInterval: 5000, //5s 默认保存一次
  351.             elementPathEnabled: false  // 元素路径隐藏
  352.         };
  353.  
  354.         var phenomenon = UE.getEditor('phenomenon', config);
  355.         var scope = UE.getEditor('scope', config);
  356.         var solution = UE.getEditor('solution', config);
  357.         var reason = UE.getEditor('reason', config);
  358.     }]);
  359. </script>
  360. </body>
  361. </html>

angularjs jquery thinkPHP3.2.3 相结合小实例的更多相关文章

  1. jquery-1 jquery几个小实例

    jquery-1  jquery几个小实例 一.总结 一句话总结:jquery真的是简单加简便. 1.jquery中改变多个css属性怎么整? 可以链式连接方式,也可以大括号整多个.中间是键值对加引号 ...

  2. 【jQuery小实例】---2自定义动画

    ---本系列文章所用使用js均可在本博客文件中找到 本节用jQuery完一个简易的动画效果,一个小驴跑跑的效果.和一个类似qq面板效果.大致也分为三步:添加jquery-1.8.3.js文件.这个是不 ...

  3. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  4. jQuery.uploadify文件上传组件实例讲解

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  5. JQuery数组详解（含实例）

    <!doctype html>jQuery数组处理详解(含实例演示)@Mr.Think 演示所用数组 var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; 1 ...

  6. winform 异步读取数据 小实例

    这几天对突然对委托事件,异步编程产生了兴趣,大量阅读前辈们的代码后自己总结了一下. 主要是实现 DataTable的导入导出,当然可以模拟从数据库读取大量数据,这可能需要一定的时间,然后 再把数据导入 ...

  7. Html5+css3+angularjs+jquery+webAPi 开发手机web（一）

    前言 随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛,一直想学这个,想学那个折腾下来几乎没学到什么东西.工作经验告诉我,要掌握一门技术,就需要在项目中去磨练, 所以我就准备开发一个手机端的 ...

  8. CSS应用内容补充及小实例

    一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  9. Objective-C之代理设计模式小实例

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

随机推荐

  1. Unix 初步（一）

    1.Unix文件系统 Unix文件系统有三种文件类型:普通文件.目录文件和设备文件(将外部设备作为一种特殊的文件进行管理,实现输入输出统一而单纯的操作.) 2.Unix的网络功能 TCP/IP 3.r ...

  2. Java 设计模式泛谈&装饰者模式和单例模式

    设计模式(Design Pattern) 1.是一套被反复使用.多人知晓的,经过分类编目 的 代码设计经验总结.使用设计模式是为了可重用代码,让代码更容易维护以及扩展. 2.简单的讲:所谓模式就是得到 ...

  3. iOS stringByEvaluatingJavaScriptFromString的参数长度限制

    我不是十分确定传给stringByEvaluatingJavaScriptFromString的javascript脚本长度有限制 请看我下面代码: int l = 166235; data = [d ...

  4. HTML新增属性

    1.<input type="text" required必填  placeholder="默认显示内容"  autofocus自动获取焦点 /> ...

  5. C++ explicit关键字应用方法详解

    C++编程语言中有很多比较重要的关键字在实际编程中起着非常重要的作用.我们今天为大家介绍的C++ explicit关键字就是其中一个应用比较频繁的关键字.下面就让我们一起来看看这方面的知识吧. C++ ...

  6. WPF之MVVM模式讲解

    WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的,WPF提供了数据绑定机制,当数据发生变化时,WPF会自动发出通知去更新UI. 恰当的模式可以让我们轻松达到“高内聚 ...

  7. surface实例-小球弹起事例

    ball.java package com.example.sufacedemo; import android.graphics.Bitmap; import android.graphics.Bi ...

  8. 2016 - 1- 24 大文件下载 关于NSOutStream 的使用补充

    // // ViewController.m // 大文件下载 // // Created by Mac on 16/1/24. // Copyright © 2016年 Mac. All right ...

  9. 用meta-data配置参数

    在接入第三方渠道SDK的时候,经常会看到其配置文件AndroidManifest.xml有类似如下的定义: <!-- appid --> <meta-data android:nam ...

  10. 如何成为一名优秀的前端工程师 (share)

    发现一篇不错的博文,和大家分享一下,为有志成为一名优秀前端工程师的童鞋们提供一个参考. :)~ 本文来源:http://www.biaodianfu.com/what-makes-a-good-fro ...