Advertisement
vitareinforce

Full Contoh Toggle Dropdown Table

Jan 8th, 2020
180
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.09 KB | None | 0 0
  1. <template>
  2. <div class="dashboard-contents">
  3. <div class="row">
  4. <div class="col-xl-6">
  5. <h2 style="padding:15px; margin-top:10px;">Jurnal</h2>
  6. </div>
  7. <div class="col-xl-6" style="padding-top: 15px;">
  8. <div class="row">
  9. <div class="col-xl-4">
  10. <div class="btn-group" style="border-radius: 5px;">
  11. <button type="button" class="btn" style="width: 100px; height: 45px; background-color: white; color: #4d4f5c; border: 1px solid #0059aa; border-top-left-radius: 5px; border-bottom-left-radius: 5px; padding-left: 5px;">Semua Cabang</button>
  12. <button type="button" class="btn dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 32px; height: 45px; background-color: white; border: 1px solid #0059aa; border-top-right-radius: 5px; border-bottom-right-radius: 5px;">
  13. <img src="@/assets/images/small-down.png" alt="Alternate Text" />
  14. </button>
  15. <div class="dropdown-menu" style="position:absolute; top:83px; padding:15px; border-radius: 5px;">
  16. <div>
  17. <p><a href="#" style="color: black;">Semua Cabang</a></p>
  18. </div>
  19. <div>
  20. <p><a href="#" style="color: black;">Cabang A</a></p>
  21. </div>
  22. <div>
  23. <p><a href="#" style="color: black;">Cabang B</a></p>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. <div class="col-xl-4">.
  29. <download-excel class="btn waves-effect waves-circle waves-float pull-right"
  30. style="width: 132px; height: 45px; background-color: #0059aa; color:white; border-radius: 5px;"
  31. worksheet = "Daftar Jurnal"
  32. name = "data_journals.xls"
  33. :data = "exportData">
  34. <img src="@/assets/images/file-text.png" alt="Alternate Text" /> Export
  35. </download-excel>
  36. </div>
  37. <div class="col-xl-4">
  38. <router-link :to="{name: 'JournalManagement.create'}" type="button" class="btn waves-effect waves-circle waves-float pull-right" style="width: 132px; height: 45px; background-color: #20c197; color:white; border-radius: 5px;">
  39. <img src="@/assets/images/plus-circle.png" alt="Alternate Text" /> Tambah
  40. </router-link>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. <div class="row">
  46. <select v-model="toggleMenu">
  47. <option value="kasBesar">Kas besar</option>
  48. <option value="kaskecil">Kas kecil</option>
  49. </select>
  50. </div>
  51. <div class="row" v-if="toggleMenu == 'kasBesar'">
  52. <table class="table table-hover table-striped">
  53. <thead style="text-align:center;">
  54. <tr>
  55. <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1)">
  56. <div style="margin-bottom: 10px;">
  57. Tanggal <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
  58. </div>
  59. <div>
  60. <input type="text" ng-model="query.createdDate" value="" style="margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: #F0eded; border-radius: 5px; padding: 5px;" />
  61. </div>
  62. </th>
  63. <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1)">
  64. <div style="margin-bottom: 10px;">
  65. Kode Akun <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
  66. </div>
  67. <div>
  68. <input type="text" ng-model="query.createdDate" value="" style="margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: #F0eded; border-radius: 5px; padding: 5px;" />
  69. </div>
  70. </th>
  71. <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1)">
  72. <div style="margin-bottom: 10px;">
  73. Deskripsi <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
  74. </div>
  75. <div>
  76. <input type="text" ng-model="query.createdDate" value="" style="margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: #F0eded; border-radius: 5px; padding: 5px;" />
  77. </div>
  78. </th>
  79. <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1)">
  80. <div style="margin-bottom: 10px;">
  81. Debit <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
  82. </div>
  83. <div>
  84. <input type="text" ng-model="query.createdDate" value="" style="margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: #F0eded; border-radius: 5px; padding: 5px;" />
  85. </div>
  86. </th>
  87. <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1)">
  88. <div style="margin-bottom: 10px;">
  89. Kredit <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
  90. </div>
  91. <div>
  92. <input type="text" ng-model="query.createdDate" value="" style="margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: #F0eded; border-radius: 5px; padding: 5px;" />
  93. </div>
  94. </th>
  95. <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1)">
  96. <div style="margin-bottom: 10px;">
  97. Saldo <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
  98. </div>
  99. <div>
  100. <input type="text" ng-model="query.createdDate" value="" style="margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: #F0eded; border-radius: 5px; padding: 5px;" />
  101. </div>
  102. </th>
  103. <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1)">
  104. <div style="margin-bottom: 10px;">
  105. Posisi Saldo <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
  106. </div>
  107. <div>
  108. <input type="text" ng-model="query.createdDate" value="" style="margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: #F0eded; border-radius: 5px; padding: 5px;" />
  109. </div>
  110. </th>
  111. </tr>
  112. </thead>
  113. <tbody>
  114. <tr v-for="item in journals" :key="item.Id">
  115. <td style="border-right: 1px solid rgba(240, 237, 237, 1); padding-top: 18px;">
  116. <router-link :to="{name: 'JournalManagement.detail', params: { id: item.Id }}">{{ item.created_at | moment('DD MMMM YYYY') }}</router-link></td>
  117. <td style="border-right: 1px solid rgba(240, 237, 237, 1); padding-top: 18px;">{{ item.AccountId }}</td>
  118. <td style="border-right: 1px solid rgba(240, 237, 237, 1); padding-top: 18px;">{{ item.DebitDescription }}</td>
  119. <td style="border-right: 1px solid rgba(240, 237, 237, 1); padding-top: 18px;">{{ item.Debit }}</td>
  120. <td style="border-right: 1px solid rgba(240, 237, 237, 1); padding-top: 18px;">{{ item.Credit }}</td>
  121. <td style="border-right: 1px solid rgba(240, 237, 237, 1); padding-top: 18px;">{{ item.Total }}</td>
  122. <td style="border-right: 1px solid rgba(240, 237, 237, 1); padding-top: 18px;">{{ item.Total }}</td>
  123. </tr>
  124. </tbody>
  125. </table>
  126. </div>
  127. </div>
  128. </template>
  129.  
  130. <script>
  131. import moment from 'moment'
  132. import $ from 'jquery'
  133. import DownloadExcel from 'vue-json-excel'
  134.  
  135. import LegalEntities from '@/services/Companies/LegalEntities'
  136. import Branches from '@/services/Companies/Branches'
  137. import Journals from '@/services/Accounting/Journal'
  138.  
  139. export default {
  140. name: 'JournalManagement.index',
  141. components: {
  142. DownloadExcel
  143. },
  144. data () {
  145. return {
  146. exportData: [],
  147. userData: {},
  148. legalEntity: [],
  149. branch: [],
  150. journals: [],
  151. toggleMenu: 'kasBesar'
  152. }
  153. },
  154. created: function () {
  155. this.init()
  156. },
  157. mounted: function () {
  158. window.$ = $
  159. if(localStorage.userData !== undefined) {
  160. this.userData = JSON.parse(localStorage.userData)
  161. } else {
  162. this.$router.push({ name: 'home' })
  163. location.reload()
  164. }
  165. },
  166. methods: {
  167. init: async function () {
  168. let result = await Journals.index()
  169. let legalEntity = await LegalEntities.index()
  170. let branch = await Branches.index()
  171.  
  172. this.journals = result.data
  173. this.legalEntity = this.itemLookup(legalEntity.data)
  174. this.branch = this.itemLookup(branch.data)
  175. },
  176. itemLookup: function (json) {
  177. let data = []
  178. for(var i = 0; i< json.length; i++) {
  179. data[json[i].Id] = json[i]
  180. }
  181. return data
  182. },
  183. formatDate(time) {
  184. var formattedTime = moment(time).format('DD MMMM YYYY HH:mm')
  185. if(formattedTime == 'Invalid date') {
  186. formattedTime = '-'
  187. }
  188. return formattedTime
  189. },
  190. del: async function (id) {
  191. let result = await Journals.delete(id)
  192. if(result.status == 200) {
  193. alert(result.data.message)
  194. this.$router.push({ name: 'JournalManagement.index' })
  195. location.reload()
  196. } else {
  197. alert("Delete Gagal")
  198. location.reload()
  199. }
  200. }
  201. }
  202. }
  203. </script>
  204.  
  205. <style>
  206. .table-div {
  207. margin-left: 15px;
  208. overflow-x: auto;
  209. overflow-y: auto;
  210. }
  211. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement