Initial commit

app/components/transaction/AllocateForm.vue

@@ -0,0 +1,120 @@
+<script setup>
+const props = defineProps({
+  allo: Object,
+  i: Number,
+  length: Number,
+  productId: Number,
+  amount_remain: Number,
+  totalByRef: Object,
+});
+
+const emit = defineEmits(['removeAllocation', 'setAllo']);
+
+const typeOptions = [
+  {
+    label: 'Gốc',
+    value: 'PRINCIPAL',
+  },
+  {
+    label: 'Lãi',
+    value: 'PENALTY',
+  },
+  // {
+  //   label: 'Miễn giảm',
+  //   value: 'REDUCTION',
+  // },
+];
+</script>
+<template>
+  <div class="mb-4" style="position: relative">
+  <a
+    v-if="length > 1"
+    class="has-text-danger is-size-7"
+    style="position: absolute; top: 0.5rem; right: 0.75rem; cursor: pointer"
+    @click="emit('removeAllocation', i)"
+  >
+    Xóa
+  </a>
+  <div
+    class="columns is-multiline is-mobile mb-0"
+    style="border-top: 1px solid #bbbbbb"
+  >
+    <!-- InternalEntry Ref -->
+    <div class="column is-6">
+      <div class="field">
+        <label class="label">Bút toán <span class="has-text-danger">*</span></label>
+        <div class="control">
+          <SearchBox
+            v-bind="{
+              api: 'internalentry',
+              field: 'label',
+              column: ['code'],
+              first: true,
+              filter: {
+                product: props.productId,
+                allocation_remain__gt: 0,
+              },
+            }"
+            @option="(entry) => { 
+              emit('setAllo', { key: 'date', value: entry.date, i }) ;
+              emit('setAllo', { key: 'ref', value: entry.code, i });
+              emit('setAllo', { key: 'allocation_remain', value: entry.allocation_remain, i });
+            }"
+          />
+        </div>
+      </div>
+    </div>
+     <!-- Type -->
+    <div class="column is-2">
+      <div class="field">
+        <label class="label"
+          >Loại <span class="has-text-danger">*</span></label
+        >
+        <div class="control">
+          <div class="select is-fullwidth">
+            <select v-model="allo.type">
+              <option
+                v-for="option in typeOptions"
+                :key="option.value"
+                :value="option.value"
+              >
+                {{ option.label }}
+              </option>
+            </select>
+          </div>
+        </div>
+        <p 
+          v-if="amount_remain === 0 && allo.type === 'PRINCIPAL'"
+          class="help is-danger"
+        >Số tiền gốc là 0</p>
+      </div>
+    </div>
+    <!-- Amount -->
+    <div class="column is-4">
+      <div class="field">
+        <label class="label"
+          >Giá trị <span class="has-text-danger">*</span></label
+        >
+        <div class="control">
+          <InputNumber
+            v-bind="{
+              record: allo,
+              attr: 'amount',
+              defaultValue: true,
+            }"
+            @number="(value) => emit('setAllo', { key: 'amount', value, i })"
+          />
+        </div>
+        <p 
+          v-if="allo.ref && totalByRef && totalByRef[allo.ref] > allo.allocation_remain"
+          class="help is-danger"
+        >
+          Tổng giá trị phân bổ bút toán vượt số tiền chưa phân bổ: 
+          <FormatNumber :value="allo.allocation_remain" />
+          (Tổng hiện tại: <FormatNumber :value="totalByRef[allo.ref]" />)
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+</template>