Initial commit

app/components/transaction/Allocate.vue

@@ -0,0 +1,96 @@
+<script setup>
+import AllocateItem from '@/components/transaction/AllocateItem.vue';
+
+const props = defineProps({
+  row: Object,
+  pagename: String
+});
+
+const { $getdata } = useNuxtApp();
+const transaction = ref([]);
+const isLoading = ref(true);
+const paymentSchedules = ref([]);
+const incompletePaymentSchedules = computed(() => 
+  paymentSchedules.value.filter(pm => pm.remain_amount > 0)
+)
+
+async function getTransaction() {
+  const transactionData = await $getdata('transaction', undefined, {
+    filter: {
+      id: props.row.id
+    },
+    values: 'date,txncurrent__detail,txncurrent__detail__status,customer__type,txncurrent,txncurrent__detail__amount,txncurrent__detail__amount_remaining,txncurrent__detail__status__name,product__zone_type__name,product__trade_code,product__cart__dealer,customer__legal_code,customer__legal_type__name,payment_plan,id,code,customer,customer__code,customer__fullname,customer__phone,product,phase,phase__name,phase__code,policy,policy__code,policy__name,origin_price,discount_amount,sale_price,deposit_amount,deposit_received,deposit_remaining,amount_received,amount_remain,create_time,update_time,total_received_amount,total_allocation_remain,total_allocation_amount'
+  }, true);
+
+  transaction.value = transactionData;
+}
+
+async function getPaymentSchedules() {
+  isLoading.value = true;
+  const paymentSchedulesData = await $getdata('payment_schedule', undefined, {
+    filter: {
+      txn_detail__transaction: transaction.value.id
+    },
+    sort: 'cycle',
+    values: 'invoice__ref_code,invoice__amount,txn_detail__amount,batch_date,amount_remain,penalty_remain,penalty_paid,penalty_amount,penalty_reduce,ovd_days,remain_amount,paid_amount,txn_detail__transaction__product,txn_detail__transaction__product__trade_code,txn_detail__status,txn_detail__status__name,txn_detail__transaction__product__code,txn_detail__phase__name,txn_detail,id,txn_detail__transaction__customer__fullname,txn_detail__transaction__customer__code,txn_detail__transaction__customer__legal_code,status__name,type__name,code,from_date,txn_detail__transaction__policy__code,to_date,amount,cycle,cycle_days,txn_detail__transaction,type,status,updater,entry,detail,txn_detail__transaction__code,txn_detail__code'
+  });
+
+  paymentSchedules.value = paymentSchedulesData;
+  isLoading.value = false;
+}
+
+async function getStuff() {
+  await getTransaction();
+  await getPaymentSchedules();
+}
+
+onMounted(() => {
+  getStuff();
+});
+</script>
+<template>
+  <div class="columns mx-0 mt-2 mb-5">
+    <div class="column is-1">
+      <p class="has-text-weight-semibold">Mã GD</p>
+      <p>{{ transaction.code }}</p>
+    </div>
+    <div class="column">
+      <p class="has-text-weight-semibold">Sản phẩm</p>
+      <p>{{ transaction.product__trade_code }}</p>
+    </div>
+    <div class="column">
+      <p class="has-text-weight-semibold">Khách hàng</p>
+      <p>{{ transaction.customer__fullname }}</p>
+    </div>
+    <div class="column">
+      <p class="has-text-weight-semibold">Ngày</p>
+      <FormatDate :date="transaction.date" />
+    </div>
+    <div class="column">
+      <p class="has-text-weight-semibold">Đã nhận</p>
+      <FormatNumber :value="transaction.total_received_amount" />
+    </div>
+    <div class="column">
+      <p class="has-text-weight-semibold">Đã phân bổ</p>
+      <FormatNumber :value="transaction.total_allocation_amount" />
+    </div>
+    <div class="column">
+      <p class="has-text-weight-semibold">Chưa phân bổ</p>
+      <FormatNumber :value="transaction.total_allocation_remain" />
+    </div>
+  </div>
+  <div class="mb-6 is-flex is-flex-direction-column is-gap-4">
+    <template v-if="incompletePaymentSchedules.length > 0">
+      <AllocateItem 
+        v-for="(paymentSchedule, i) in incompletePaymentSchedules"
+        v-bind="{ paymentSchedule, i, onRefresh: getStuff }" 
+      />
+    </template>
+    <div v-else-if="isLoading" class="is-flex is-justify-content-center">
+      <SvgIcon v-bind="{ name: 'loading.svg', type: 'info', size: 24 }" />
+    </div>
+    <template v-else>
+      <p class="my-4 fs-20 has-text-centered has-text-grey">Giao dịch đã phân bổ hoàn tất!</p>
+    </template>
+  </div>
+</template>