API tools faq
paste
Advertisement
vitareinforce

bundle.vue

vitareinforce
Feb 25th, 2020
217
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.51 KB | None | 0 0
raw download clone embed print report
  1. <template>
  2. <div class="row">
  3. <div class="col-lg-12">
  4. <b-tabs pills card>
  5. <b-tab title="Bundle" active>
  6. <div v-if="loading && !$route.name.includes('.create')" class="d-flex justify-content-center mb-3">
  7. <b-spinner label="Loading..."></b-spinner>
  8. </div>
  9. <div v-if="$route.name.includes('.detail')" class="row">
  10. <div class="col-lg-12 button-back-div">
  11. <router-link :to="{ name: 'BundleManagement.index' }" class="btn btn-primary">Kembali</router-link>
  12. </div>
  13. </div>
  14. <div class="row">
  15. <div class="col-lg-12" style="padding-left: 30px; padding-right: 40px;">
  16. <div class="row">
  17. <div class="col-lg-6">
  18. <div class="form-group form-float">
  19. <!-- Foto field -->
  20. <label class="form-label" style="color: black;">Lampiran</label>
  21. <img v-if="$route.name.includes('.detail')" :src="'data:image/jpeg;base64,' + bundle.Picture1" class="img-fluid img-thumbnail" style="width: 50% !important; height: 50% !important" />
  22. <base64-upload v-if="!$route.name.includes('.detail')" class="img-fluid" imageSrc="/img/uploads.png" @change="onChangeImage1" style="width: 50% !important; height: 50% !important" >Upload photo</base64-upload>
  23. </div>
  24. </div>
  25. </div>
  26.  
  27. <div class="row">
  28. <!-- Kode Bundle field -->
  29. <div class="col-lg-6">
  30. <div class="form-group form-float">
  31. <label for="date" class="form-label" style="color: black;">Kode Bundle</label>
  32. <input :disabled="$route.name.includes('.detail')" placeholder="Ketik kode bundle..." id="date" type="text" v-model="bundle.Code" required maxlength="32" minlength="2" class="validate form-control" style="border: 1px solid black;">
  33. </div>
  34. </div>
  35.  
  36. <!-- Nama Bundle field -->
  37. <div class="col-lg-6">
  38. <div class="form-group form-float">
  39. <label for="date" class="form-label" style="color: black;">Nama Bundle</label>
  40. <input :disabled="$route.name.includes('.detail')" placeholder="Ketik nama bundle..." id="date" type="text" v-model="bundle.Name" required maxlength="32" minlength="2" class="validate form-control" style="border: 1px solid black;">
  41. </div>
  42. </div>
  43.  
  44. <!-- Kategori Barang field -->
  45. <div class="col-lg-6">
  46. <div class="form-group form-float">
  47. <label for="date" class="form-label" style="color: black;">Kategori Barang</label>
  48. <vue-select :disabled="$route.name.includes('.detail')" v-model="bundle.Category" class="vue-select2" name="role" :options="category" label="Name"></vue-select>
  49. </div>
  50. </div>
  51.  
  52. <!-- Kategori Gudang field -->
  53. <div class="col-lg-6">
  54. <div class="form-group form-float">
  55. <label for="date" class="form-label" style="color: black;">Kategori Gudang</label>
  56. <vue-select :disabled="$route.name.includes('.detail')" v-model="bundle.WarehouseCategory" class="vue-select2" name="role" :options="warehouseCategory"></vue-select>
  57. </div>
  58. </div>
  59.  
  60. <!-- Jumlah Bundle field -->
  61. <div class="col-lg-6">
  62. <div class="form-group form-float">
  63. <label for="flagName" class="form-label" style="color: black;">Jumlah Bundle</label>
  64. <input :disabled="$route.name.includes('.detail')" placeholder="Ketik nama bundle..." id="date" type="text" v-model="bundle.BundleQuantity" required maxlength="32" minlength="2" class="validate form-control" style="border: 1px solid black;">
  65. </div>
  66. </div>
  67.  
  68. <div class="col-lg-6">
  69. <div class="form-group form-float">
  70. <label for="date" class="form-label" style="color: black;">Harga Bundle (Rp)</label>
  71. <input v-if="!$route.name.includes('.detail')" placeholder="Ketik harga bundle..." id="date" type="text" v-model="bundle.Price" required maxlength="32" minlength="2" class="validate form-control" style="border: 1px solid black;">
  72. <div v-if="$route.name.includes('.detail')" class="form-control disabled-field">{{ bundle.Price | currency }}</div>
  73. </div>
  74. </div>
  75. </div>
  76.  
  77. <hr />
  78.  
  79. <!-- Dynamic Row -->
  80. <div v-for="(item, index) in bundle.BundleItems" :key="index" class="row">
  81. <div class="col-lg-12" style="margin-top: 15px;">
  82. <div class="row">
  83. <!-- Nama Barang field -->
  84. <div class="col-lg-12">
  85. <div class="form-group form-float">
  86. <label for="flagName" class="form-label" style="color: black;">Nama Barang</label>
  87. <div class="form-group form-float">
  88. <vue-select :disabled="$route.name.includes('.detail')" v-model="selectedInventory[index]" class="vue-select2" name="role" :options="inventory" label="Name"></vue-select>
  89. </div>
  90. </div>
  91. </div>
  92.  
  93. <!-- Nama Barang field -->
  94. <div class="col-lg-6">
  95. <div class="form-group form-float">
  96. <label for="productNumber" class="form-label" style="color: black;">Nama Barang</label>
  97. <input disabled placeholder="Auto generate..." id="productNumber" type="text" v-model="item.Name" required maxlength="32" minlength="2" class="validate form-control" style="border: 1px solid black;">
  98. </div>
  99. </div>
  100.  
  101. <!-- Kode Barang field -->
  102. <div class="col-lg-6">
  103. <div class="form-group form-float">
  104. <label for="productNumber" class="form-label" style="color: black;">Kode Barang</label>
  105. <input disabled placeholder="Auto generate..." id="productNumber" type="text" v-model="item.Code" required maxlength="32" minlength="2" class="validate form-control" style="border: 1px solid black;">
  106. </div>
  107. </div>
  108.  
  109. <!-- Kategori Barang field -->
  110. <div class="col-lg-6">
  111. <div class="form-group form-float">
  112. <label for="productNumber" class="form-label" style="color: black;">Kategori Barang</label>
  113. <input disabled placeholder="Auto generate..." id="productNumber" type="text" v-model="item.Category" required maxlength="32" minlength="2" class="validate form-control" style="border: 1px solid black;">
  114. </div>
  115. </div>
  116.  
  117. <!-- Kategori Gudang field -->
  118. <div class="col-lg-6">
  119. <div class="form-group form-float">
  120. <label for="productNumber" class="form-label" style="color: black;">Kategori Gudang</label>
  121. <input disabled placeholder="Auto generate..." id="productNumber" type="text" v-model="item.WarehouseCategory" required maxlength="32" minlength="2" class="validate form-control" style="border: 1px solid black;">
  122. </div>
  123. </div>
  124.  
  125. <!-- Jumlah Stock Opname field -->
  126. <div class="col-lg-6">
  127. <div class="form-group form-float">
  128. <label for="productNumber" class="form-label" style="color: black;">Jumlah Barang</label>
  129. <input disabled placeholder="Auto generate..." id="productNumber" type="text" v-model="item.TotalQuantity" required maxlength="32" minlength="2" class="validate form-control" style="border: 1px solid black;">
  130. </div>
  131. </div>
  132.  
  133. <!-- Jumlah Bundle field -->
  134. <div class="col-lg-6">
  135. <div class="form-group form-float">
  136. <label for="productNumber" class="form-label" style="color: black;">Jumlah Barang Bundle</label>
  137. <input :disabled="$route.name.includes('.detail')" placeholder="Auto generate..." id="productNumber" type="text" v-model="item.TotalBundleQuantity" required maxlength="32" minlength="2" class="validate form-control" style="border: 1px solid black;">
  138. </div>
  139. </div>
  140.  
  141. <!-- Harga Barang field -->
  142. <div class="col-lg-6">
  143. <div class="form-group form-float">
  144. <label for="productNumber" class="form-label" style="color: black;">Harga Barang</label>
  145. <!-- <input disabled placeholder="Auto generate..." id="productNumber" type="text" v-model="item.SellingPrice" required maxlength="32" minlength="2" class="validate form-control" style="border: 1px solid black;"> -->
  146. <div class="form-control disabled-field">{{ item.SellingPrice | currency }}</div>
  147. </div>
  148. </div>
  149. </div>
  150. <hr />
  151. </div>
  152. </div>
  153.  
  154.  
  155. <div v-if="!$route.name.includes('.detail')" class="row" style="padding-left: 0px;">
  156. <div class="col-lg-3">
  157. <button @click="add()" type="submit" class="btn waves-effect add-btn" style="width: 100%; background-color: #20c197; color: white; margin-top: 15px;">
  158. Tambah
  159. </button>
  160. </div>
  161. <div class="col-lg-3">
  162. <button v-show="bundle.BundleItems.length > 1" @click="del()" type="submit" class="btn btn-danger" style="width: 100%; background-color: #c52c46; color: white; margin-top: 15px; border-color: #c52c46;">
  163. Hapus
  164. </button>
  165. </div>
  166. </div>
  167.  
  168. </div>
  169. </div>
  170. <div v-if="!$route.name.includes('.detail')" class="row">
  171. <div class="col-lg-12 button-div">
  172. <button v-on:click="save()" class="btn btn-success">Simpan</button>
  173. <router-link :to="{ name: 'BundleManagement.index' }" class="btn btn-default">Batal</router-link>
  174. </div>
  175. </div>
  176.  
  177. </b-tab>
  178. </b-tabs>
  179. </div>
  180. </div>
  181. </template>
  182.  
  183. <style>
  184. .card-header {
  185. width: 1620px;
  186. background-color: #20c197;
  187. border-radius: 0px !important;
  188. padding-left: 10px;
  189. padding-top: 0px;
  190. padding-right: 0px;
  191. padding-bottom: 0px;
  192. }
  193.  
  194. .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  195. color: black;
  196. background-color: #f8f8ff;
  197. border-radius: 0px;
  198. border-bottom: 3px solid #0059aa;
  199. }
  200.  
  201. .button-div {
  202. text-align: right;
  203. margin-top: 30px;
  204. }
  205.  
  206. .btn-success {
  207. width: 132px;
  208. background-color: #20c197;
  209. border: none;
  210. }
  211.  
  212. .btn-danger {
  213. width: 132px;
  214. margin-left: 15px;
  215. border: none;
  216. }
  217.  
  218. .disabled-field {
  219. background-color: #E9ECEF;
  220. border: 1px solid black;
  221. }
  222. </style>
  223.  
  224.  
  225. <script>
  226. // Plugins
  227. import moment from 'moment'
  228. import $ from 'jquery'
  229. import VueSelect from 'vue-select'
  230. import 'vue-select/dist/vue-select.css'
  231. import Base64Upload from 'vue-base64-upload'
  232.  
  233. // API
  234. // import LegalEntity from '@/services/Companies/LegalEntities'
  235. // import Branch from '@/services/Companies/Branches'
  236. import Bundle from '@/services/Inventories/Bundle'
  237. import Inventories from '@/services/Inventories/Inventory'
  238.  
  239. export default {
  240. name: 'BundleManagement.create',
  241. components: {
  242. VueSelect,
  243. Base64Upload
  244. },
  245. data () {
  246. return {
  247. //Loading
  248. loading: true,
  249. // Scope, Sama kyk vm.users , vm.employee dkk
  250. userData: {},
  251. bundle: {
  252. BundleItems: [{
  253. "Id": null,
  254. "Name": null,
  255. "Code": null,
  256. "Category": null,
  257. "WarehouseCategory": null,
  258. "TotalQuantity": null,
  259. "SellingPrice": null,
  260. "TotalBundleQuantity": null
  261. }]
  262. },
  263. inventory: {},
  264. selectedInventory: [],
  265. category: ['-','Barang Inti','Barang Hadiah'],
  266. warehouseCategory: ['Alat Tulis','Barang Siap Jual'],
  267. // rawItemCollection: []
  268. }
  269. },
  270. beforeUpdate: function () {
  271. // Ngeassign variable pada saat proses update, misal kyk dropdown
  272. this.bundle.BundleItems[this.bundle.BundleItems.length - 1] = {
  273. "Id": this.selectedInventory[this.bundle.BundleItems.length - 1].Id,
  274. "Name": this.selectedInventory[this.bundle.BundleItems.length - 1].Name,
  275. "Code": this.selectedInventory[this.bundle.BundleItems.length - 1].Code,
  276. "Category": this.selectedInventory[this.bundle.BundleItems.length - 1].Category,
  277. "WarehouseCategory": this.selectedInventory[this.bundle.BundleItems.length - 1].WarehouseCategory,
  278. "TotalQuantity": this.selectedInventory[this.bundle.BundleItems.length - 1].TotalQuantity,
  279. "SellingPrice": this.selectedInventory[this.bundle.BundleItems.length - 1].SellingPrice,
  280. "TotalBundleQuantity": this.selectedInventory[this.bundle.BundleItems.length - 1].TotalBundleQuantity
  281. }
  282. },
  283. mounted: function () {
  284. // Sama dengan document.ready
  285. window.$ = $
  286. if(localStorage.userData !== undefined) {
  287. this.userData = JSON.parse(localStorage.userData)
  288. this.userData.Permissions = JSON.parse(this.userData.Permissions)
  289. } else {
  290. this.$router.push({ name: 'home' })
  291. location.reload()
  292. }
  293. this.init()
  294. },
  295. methods: {
  296. // Kumpulan Fungsi disini
  297. init: async function() {
  298. // Ngeload Data Dari API
  299. // let legalEntity = await LegalEntity.index()
  300. // let branch = await Branch.index()
  301. let inventory = await Inventories.index()
  302.  
  303. // Assign data ke Scope
  304. // this.legalEntity = legalEntity.data
  305. // this.branch = branch.data
  306. this.inventory = this.filterInventoryPusat(inventory.data)
  307.  
  308. //for edit mode
  309. if(this.$route.params.id) {
  310. let edit = await Bundle.detail(this.$route.params.id)
  311. this.bundle = edit.data
  312. this.bundle.BundleItems = JSON.parse(edit.data.BundleItems)
  313. }
  314.  
  315. this.loading = false
  316. },
  317. save: async function() {
  318. // Fungsi Save Data
  319. console.log(this.bundle)
  320. this.bundle.IsDeleted = false
  321. this.bundle.CreationTime = new Date()
  322. this.bundle.CreatorUserId = this.userData.Id
  323. // let rawItemCollection = this.bundle.BundleItems
  324. this.bundle.BundleItems = JSON.stringify(this.bundle.BundleItems)
  325.  
  326. try {
  327. let result
  328. if(this.$route.params.id) {
  329. result = await Bundle.edit(this.$route.params.id, this.bundle)
  330. }
  331. if(!this.$route.params.id) {
  332. console.log("create mode")
  333. result = await Bundle.create(this.bundle)
  334.  
  335. console.log("berhasil menambahkan ke bundle")
  336.  
  337. //Add Bundle to Inventory
  338. let bundleAsInventory = {
  339. Name: this.bundle.Name,
  340. LegalEntityId: 1,
  341. BranchId: 1,
  342. Code: this.bundle.Code,
  343. Category: "Bundle",
  344. TotalQuantity: this.bundle.BundleQuantity,
  345. Quantity100: this.bundle.BundleQuantity,
  346. Price100: this.bundle.Price,
  347. Quantity90: 0,
  348. Price90: 0,
  349. Quantity60: 0,
  350. Price60: 0,
  351. Quantity30: 0,
  352. SafetyStockLimit: 0,
  353. BuyingPrice: this.bundle.Price,
  354. IsDeleted: false,
  355. CreationTime: new Date(),
  356. CreatorUserId: this.bundle.CreatorUserId,
  357. UnasemblyQuantity: 0,
  358. AssemblyQuantity: 0,
  359. StockOpnameQuantity: 0,
  360. RefurbishQuantity: 0,
  361. isBundle: true
  362. }
  363.  
  364. let resultBundleInventory = await Inventories.create(bundleAsInventory)
  365. if(resultBundleInventory.status == 200) {
  366. console.log("Input Bundle Ke Inventory Sukses")
  367. alert("Input Bundle ke Inventory Sukses")
  368. } else {
  369. console.log("Gagal Input Ke Inventory")
  370. alert("Input Bundle ke Inventory Gagal")
  371. }
  372.  
  373. // console.log(rawItemCollection)
  374. // //Extract ke inventory di frontend
  375. // for(var i = 0; i < rawItemCollection.length; i++) {
  376. // Inventories.detail(rawItemCollection[i].Id).then(function (existingInventory) {
  377. // console.log(parseInt(existingInventory.data.TotalQuantity) - (parseInt(this.bundle.BundleQuantity) * (parseInt(rawItemCollection[i].TotalBundleQuantity))))
  378. // let inventoryItems = {
  379. // Id: existingInventory.data.Id,
  380. // Name: existingInventory.data.Name,
  381. // LegalEntityId: 1,
  382. // BranchId: 1,
  383. // Code: existingInventory.data.Code,
  384. // Category: existingInventory.data.Category,
  385. // TotalQuantity: parseInt(existingInventory.data.TotalQuantity) - (parseInt(this.bundle.BundleQuantity) * (parseInt(rawItemCollection[i].TotalBundleQuantity))),
  386. // Quantity100: parseInt(existingInventory.data.TotalQuantity) - (parseInt(this.bundle.BundleQuantity) * (parseInt(rawItemCollection[i].TotalBundleQuantity))),
  387. // Price100: existingInventory.data.Price100,
  388. // Quantity90: existingInventory.data.Quantity90,
  389. // Price90: existingInventory.data.Price90,
  390. // Quantity60: existingInventory.data.Quantity60,
  391. // Price60: existingInventory.data.Price60,
  392. // Quantity30: existingInventory.data.Quantity30,
  393. // SafetyStockLimit: existingInventory.data.SafetyStockLimit,
  394. // BuyingPrice: existingInventory.data.BuyingPrice,
  395. // IsDeleted: existingInventory.data.IsDeleted,
  396. // CreationTime: existingInventory.data.CreationTime,
  397. // CreatorUserId: this.bundle.CreatorUserId,
  398. // UnasemblyQuantity: existingInventory.data.UnasemblyQuantity,
  399. // AssemblyQuantity: existingInventory.data.AssemblyQuantity,
  400. // StockOpnameQuantity: existingInventory.data.StockOpnameQuantity,
  401. // RefurbishQuantity: existingInventory.data.RefurbishQuantity,
  402. // }
  403.  
  404. // Inventories.edit(this.rawItemCollection[i].Id, inventoryItems).then(function(resultInventory) {
  405. // if(resultInventory.status == 200) {
  406. // console.log("Edit Inventory Sukses")
  407. // alert("Done Process")
  408. // } else {
  409. // console.log("Gagal Edit Inventory")
  410. // alert("Done Process fail")
  411. // }
  412. // })
  413. // })
  414. // }
  415. // alert("Done Process")
  416. }
  417. if(result.status == 200) {
  418. this.$fire({
  419. title: 'Sukses',
  420. text: 'Input Data Sukses',
  421. // icon: 'info',
  422. // type: 'success',
  423. showConfirmButton: false
  424. })
  425. this.$router.push({ name: 'BundleManagement.index' })
  426. location.reload()
  427. } else {
  428. this.$fire({
  429. title: 'Error',
  430. text: 'Input Data Gagal',
  431. showConfirmButton: false
  432. // icon: 'error'
  433. // type: 'error'
  434. })
  435. console.log(result)
  436. }
  437. } catch (error) {
  438. alert("Error : " + error)
  439. }
  440. },
  441. add: function () {
  442. this.bundle.BundleItems.push({
  443. "Id": null,
  444. "Name": null,
  445. "Code": null,
  446. "Category": null,
  447. "TotalQuantity": null,
  448. "SellingPrice": null,
  449. "TotalBundleQuantity": null
  450. })
  451. },
  452. del: function () {
  453. this.$delete(this.bundle.BundleItems, this.bundle.BundleItems.length - 1)
  454. // this.bundle.BundleItems.splice(this.bundle.BundleItems.length, 1)
  455. },
  456. onChangeImage1(file) {
  457. this.bundle.Picture1 = file.base64
  458. },
  459. lookupData (json, id) {
  460. let data = []
  461. for(var i = 0; i < json.length; i++) {
  462. data[json[i].Id] = json[i]
  463. }
  464. return data[id]
  465. },
  466. filterInventoryPusat (json) {
  467. let data = []
  468. for(var i = 0; i < json.length; i++) {
  469. if((json[i].LegalEntityId == 1) && (json[i].BranchId == 1)) {
  470. data.push(json[i])
  471. }
  472. }
  473. return data
  474. },
  475. formatDate(time) {
  476. // Format Tanggal
  477. var formattedTime = moment(time).format('DD MMMM YYYY HH:mm')
  478. if(formattedTime == 'Invalid date') {
  479. formattedTime = '-'
  480. }
  481. return formattedTime
  482. }
  483. }
  484. }
  485. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!