ticketList.blade.php 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. @extends('user.layouts')
  2. @section('css')
  3. <link href="/assets/global/fonts/themify/themify.min.css" rel="stylesheet">
  4. @endsection
  5. @section('content')
  6. <div class="page-content container-fluid">
  7. <div class="row">
  8. <div class="col-lg-8 order-lg-1 order-2">
  9. <div class="panel panel-bordered">
  10. <div class="panel-heading p-20">
  11. <h1 class="panel-title cyan-600">
  12. <i class="icon wb-user-circle"></i>{{trans('user.menu.tickets')}}
  13. </h1>
  14. <div class="panel-actions">
  15. <button class="btn btn-primary btn-animate btn-animate-side" data-toggle="modal" data-target="#add_ticket_modal">
  16. <span>
  17. <i class="icon wb-plus" aria-hidden="true"></i> {{trans('user.ticket.new')}}
  18. </span>
  19. </button>
  20. </div>
  21. </div>
  22. <a href="/tickets1" class="btn btn-primary">刷新页面</a>
  23. <div class="panel-body">
  24. <div class="table-responsive">
  25. <table class="table table-hover text-center">
  26. <thead class="thead-default">
  27. <tr>
  28. <th data-cell-style="cellStyle"> # </th>
  29. <th> {{trans('validation.attributes.title')}} </th>
  30. <th> {{trans('common.status')}} </th>
  31. <th></th>
  32. </tr>
  33. </thead>
  34. <tbody>
  35. @foreach($tickets as $ticket)
  36. <tr>
  37. <td>{{$ticket->id}}</td>
  38. <td>{{$ticket->title}}</td>
  39. <td>{!!$ticket->status_label!!}</td>
  40. <td>
  41. <a href="{{route('replyTicket', ['id' => $ticket->id])}}" class="btn btn-animate btn-animate-vertical btn-outline-info">
  42. <span>
  43. @if($ticket->status === 2)
  44. <i class="icon wb-eye" aria-hidden="true" style="left: 40%"> </i>{{trans('common.view')}}
  45. @else
  46. <i class="icon wb-check" aria-hidden="true" style="left: 40%"> </i>{{trans('common.open')}}
  47. @endif
  48. </span>
  49. </a>
  50. </td>
  51. </tr>
  52. @endforeach
  53. </tbody>
  54. </table>
  55. </div>
  56. </div>
  57. <div class="panel-footer">
  58. <div class="row">
  59. <div class="col-md-12">
  60. <nav class="Page navigation float-right">
  61. {{$tickets->links()}}
  62. </nav>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. <div class="col-lg-4 order-lg-2 order-1">
  69. <div class="panel panel-bordered">
  70. <!--<div class="panel-heading p-20">-->
  71. <!-- <h3 class="panel-title cyan-600"><i class="icon ti-headphone-alt"></i>{{trans('user.ticket.working_hour')}}</h3>-->
  72. <!--</div>-->
  73. <!--<div class="panel-body pt-0">-->
  74. <!-- <ul class="list-group list-group-dividered list-group-full vertical-align-middle">-->
  75. <!-- <li class="list-group-item">-->
  76. <!-- <div class="row">-->
  77. <!-- <div class="col-lg-5 col-4">-->
  78. <!-- <button class="btn btn-pure ti-time blue-700"></button>-->
  79. <!-- </div>-->
  80. <div class="col-lg-7 col-8 text-right">
  81. <br>
  82. </div>
  83. </div>
  84. </li>
  85. <li class="list-group-item">
  86. <div class="row">
  87. <div class="col-2">
  88. <button class="btn btn-pure ti-info-alt red-700"></button>
  89. </div>
  90. <div class="col-10">
  91. {!! trans('user.ticket.service_tips') !!}
  92. </div>
  93. </div>
  94. </li>
  95. </ul>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. <div id="add_ticket_modal" class="modal fade" tabindex="-1" data-focus-on="input:first" data-keyboard="false">
  102. <div class="modal-dialog modal-simple modal-center">
  103. <div class="modal-content">
  104. <div class="modal-header">
  105. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  106. <span aria-hidden="true">×</span>
  107. </button>
  108. <h4 class="modal-title"> {{trans('user.ticket.new')}} </h4>
  109. </div>
  110. <div class="modal-body">
  111. <div class="row">
  112. <div class="col-xl-12 form-group">
  113. <input type="text" class="form-control" name="title" id="title" placeholder="{{trans('user.ticket.title_placeholder')}}">
  114. </div>
  115. <div class="col-xl-12 form-group">
  116. <textarea class="form-control" rows="5" name="content" id="content" placeholder="{{trans('user.ticket.placeholder')}}"></textarea>
  117. </div>
  118. </div>
  119. </div>
  120. <div class="modal-footer">
  121. <button type="button" data-dismiss="modal" class="btn btn-danger"> {{trans('common.cancel')}} </button>
  122. <button type="button" data-dismiss="modal" class="btn btn-success" onclick="createTicket()"> {{trans('common.confirm')}} </button>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. @endsection
  128. @section('javascript')
  129. <script>
  130. // 发起工单
  131. function createTicket() {
  132. const title = $('#title').val();
  133. const content = $('#content').val();
  134. if (title.trim() === '') {
  135. swal.fire({title: '{{trans('validation.required', ['attribute' => trans('validation.attributes.title')])}}!', icon: 'warning'});
  136. return false;
  137. }
  138. if (content.trim() === '') {
  139. swal.fire({title: '{{trans('validation.required', ['attribute' => trans('validation.attributes.content')])}}!', icon: 'warning'});
  140. return false;
  141. }
  142. swal.fire({
  143. title: '{{trans('user.ticket.submit_tips')}}',
  144. icon: 'question',
  145. showCancelButton: true,
  146. cancelButtonText: '{{trans('common.close')}}',
  147. confirmButtonText: '{{trans('common.confirm')}}',
  148. }).then((result) => {
  149. if (result.value) {
  150. $.post('{{route('openTicket')}}', {
  151. _token: '{{csrf_token()}}',
  152. title: title,
  153. content: content,
  154. }, function(ret) {
  155. if (ret.status === 'success') {
  156. swal.fire({title: ret.message, icon: 'success', timer: 1000, showConfirmButton: false}).then(() => window.location.reload());
  157. } else {
  158. swal.fire({title: ret.message, icon: 'error'}).then(() => window.location.reload());
  159. }
  160. });
  161. }
  162. });
  163. }
  164. </script>
  165. @endsection