Initial commit

2026-03-02 09:45:33 +07:00
commit d17a9e2588
415 changed files with 92113 additions and 0 deletions
--- a/app/components/transaction/TransactionConfirmModal.vue
+++ b/app/components/transaction/TransactionConfirmModal.vue
@@ -0,0 +1,312 @@
+<template>
+  <div>
+    <div class="content p-0">
+      <div class="columns">
+        <!-- Left Column: Transaction & Customer Info -->
+        <div class="column is-half">
+          <div class="mb-5">
+            <p class="title is-5 mb-3">Thông tin Giao dịch</p>
+            <p><strong>Loại giao dịch:</strong> {{ phaseInfo.name || '-' }}</p>
+            <p><strong>Chính sách tài chính:</strong> {{ selectedPolicy.name || '-' }}</p>
+            <p><strong>Giá gốc:</strong> {{ $numtoString(originPrice) }}</p>
+            <p><strong>Số tiền đặt cọc:</strong> <span class="has-text-primary has-text-weight-bold">{{
+              $numtoString(depositAmount) }}</span></p>
+            <p><strong>Ngày ký hợp đồng:</strong> <span class="has-text-primary has-text-weight-bold">{{
+              formatDate(initialContractDate) }}</span></p>
+            <p><strong>Ngày hết hạn GD:</strong> <span class="has-text-primary has-text-weight-bold">{{
+              formatDate(editableDueDate) }}</span></p>
+          </div>
+          <hr>
+          <div>
+            <p class="title is-5 mb-3">Thông tin Khách hàng</p>
+            <div class="columns">
+              <!-- Original Customer Column -->
+              <div class="column">
+                <p><strong>{{ isIndividual ? 'Khách hàng' : 'Tổ chức' }}</strong></p>
+                <p><strong>Mã KH:</strong> {{ selectedCustomer.code || '-' }}</p>
+                <p><strong>{{ isIndividual ? 'Họ và tên:' : 'Tên tổ chức:' }}</strong> {{ selectedCustomer.fullname ||
+                  '-' }}</p>
+                <p><strong>Số điện thoại:</strong> {{ selectedCustomer.phone || '-' }}</p>
+                <p><strong>{{ isIndividual ? 'CCCD:' : 'GPKD/Mã số thuế:' }}</strong> {{ selectedCustomer.legal_code ||
+                  '-' }}</p>
+              </div>
+
+              <!-- Co-owner Column -->
+              <div class="column" v-if="coOwner && isIndividual">
+                <p class="is-flex is-justify-content-space-between">
+                  <strong>Đồng sở hữu</strong>
+                  <button type="button" class="delete is-small" @click.stop="clearCoOwner()"></button>
+                </p>
+                <p><strong>Mã:</strong> {{ coOwner.people__code || '-' }}</p>
+                <p><strong>Họ và tên:</strong> {{ coOwner.people__fullname || '-' }}</p>
+                <p><strong>Số điện thoại:</strong> {{ coOwner.people__phone || '-' }}</p>
+                <p><strong>CCCD:</strong> {{ coOwner.people__legal_code || '-' }}</p>
+              </div>
+            </div>
+
+            <!-- Co-owner SearchBox -->
+            <div v-if="isIndividual && relatedPeople.length > 0" class="mt-2">
+              <label class="label">Đồng sở hữu</label>
+              <SearchBox :key="coOwner ? coOwner.id : 'empty'"
+                v-bind="{ vdata: relatedPeople, field: 'people__fullname', column: ['people__code', 'people__fullname'], first: true, optionid: coOwner ? coOwner.id : null }"
+                @option="selectCoOwnerByPerson" />
+            </div>
+            <div v-else-if="isIndividual && relatedPeople.length === 0" class="mt-2">
+              <p class="has-text-grey-light is-size-7">Không có người liên quan nào được thêm</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right Column: Product Info -->
+        <div class="column is-half" style="border-left: 1px solid #dbdbdb; padding-left: 2rem;">
+          <div class="mb-5">
+            <p class="title is-5 mb-3">Thông tin Sản phẩm</p>
+            <div class="columns is-multiline is-mobile">
+              <div class="column is-half"><strong>Mã thương mại:</strong> {{ productData.trade_code || '-' }}</div>
+              <div class="column is-half"><strong>Số tờ thửa:</strong> {{ productData.land_lot_code || '-' }}</div>
+              <div class="column is-half"><strong>Mã quy hoạch:</strong> {{ productData.zone_code || '-' }}</div>
+              <div class="column is-half"><strong>Phân khu:</strong> {{ productData.zone_type__name || '-' }}</div>
+              <div class="column is-half"><strong>Loại sản phẩm:</strong> {{ productData.type__name || '-' }}</div>
+              <div class="column is-half"><strong>Hướng cửa:</strong> {{ productData.direction__name || '-' }}</div>
+              <div class="column is-half"><strong>Kích thước lô:</strong> {{ productData.land_lot_size || '-' }}</div>
+              <div class="column is-half"><strong>Diện tích đất:</strong> {{ productData.lot_area ? $numtoString(productData.lot_area)
+                + ' m²' : '-' }}</div>
+              <div class="column is-half"><strong>DT xây dựng:</strong> {{ productData.building_area ?
+                $numtoString(productData.building_area) + ' m²' : '-' }}</div>
+              <div class="column is-half"><strong>DT sàn:</strong> {{ productData.total_built_area ?
+                $numtoString(productData.total_built_area) + ' m²' : '-' }}</div>
+              <div class="column is-half"><strong>Tầng cao:</strong> {{ productData.number_of_floors || '-' }}</div>
+              <div class="column is-half"><strong>Trạng thái:</strong> {{ productData.status__name || '-' }}</div>
+              <div class="column is-half"><strong>Dự án:</strong> {{ productData.project__name || '-' }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="">
+        <div class="columns is-vcentered">
+          <div class="column">
+            <div class="field">
+              <label class="label">Số tiền thanh toán</label>
+              <div class="control">
+                <InputNumber :record="paymentRecord" attr="paymentAmount" placeholder="Nhập số tiền"
+                  :disabled="isPaymentInputDisabled" @number="updatePaymentAmount"
+                  :class="{ 'is-danger': !isPaymentAmountValid }"></InputNumber>
+              </div>
+              <p v-if="!isPaymentAmountValid" class="help is-danger">{{ paymentAmountError }}</p>
+            </div>
+          </div>
+
+          <div class="column">
+            <div class="field">
+              <label class="label">Ngày ký hợp đồng</label>
+              <p class="control has-text-weight-bold pt-2">{{ formatDate(initialContractDate) }}</p>
+            </div>
+          </div>
+          <div class="column">
+            <div class="field">
+              <label class="label">Ngày hết hạn giao dịch</label>
+              <Datepicker :record="dateRecord" attr="dueDate" @date="updateDueDate" position="is-top-right" />
+            </div>
+          </div>
+
+          <div class="column">
+            <div class="field">
+              <label class="label">Mã xác nhận</label>
+              <div class="control">
+                <div class="field has-addons">
+                  <div class="control is-expanded">
+                    <input class="input" type="text" placeholder="Nhập mã" v-model="userInputCaptcha">
+                  </div>
+                  <div class="control">
+                    <a class="button is-static has-text-weight-bold has-background-grey-lighter"
+                      style=" font-family: 'Courier New', monospace; letter-spacing: 2px;">
+                      {{ captchaCode }}
+                    </a>
+                  </div>
+                  <div class="control">
+                    <button class="button" @click="generateCaptcha" :title="'Tạo mã mới'">
+                      <span class="icon">
+                        <SvgIcon v-bind="{ name: 'refresh.svg', type: 'primary', size: 23 }"></SvgIcon>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="is-flex is-justify-content-flex-end mt-4">
+      <button class="button has-text-white is-success mr-2" :disabled="!isConfirmed" @click="handleConfirm">
+        <span>Tạo giao dịch</span>
+      </button>
+      <button class="button" @click="$emit('close')">Hủy</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useStore } from "@/stores/index";
+import dayjs from 'dayjs';
+import Datepicker from '~/components/datepicker/Datepicker.vue';
+import InputNumber from '~/components/common/InputNumber.vue';
+import SearchBox from "~/components/SearchBox";
+
+
+export default {
+  components: { Datepicker, InputNumber, SearchBox },
+  props: {
+    productData: { type: Object, required: true },
+    phaseInfo: { type: Object, required: true },
+    selectedPolicy: { type: Object, required: true },
+    originPrice: { type: Number, required: true },
+    discountValueDisplay: { type: Number, required: true },
+    selectedCustomer: { type: Object, required: true },
+    initialContractDate: { type: String, required: true },
+  },
+  setup() {
+    const store = useStore();
+    return { store };
+  },
+  emits: ['close', 'modalevent'],
+  data() {
+    const initialDueDate = dayjs(this.initialContractDate).add(0, 'day').format('YYYY-MM-DD');
+
+    return {
+      editableDueDate: initialDueDate,
+      dateRecord: { dueDate: initialDueDate },
+      captchaCode: '',
+      userInputCaptcha: '',
+      paymentRecord: { paymentAmount: null },
+      coOwner: null,
+      relatedPeople: [],
+      peopleAddon: { component: "people/People", width: "65%", height: "600px", title: "Người liên quan" }
+    };
+  },
+  watch: {
+    depositAmount: {
+      immediate: true,
+      handler(newVal) {
+        if (this.phaseInfo.id === 'p0' && newVal === 0) {
+          this.paymentRecord.paymentAmount = null;
+        } else {
+          this.paymentRecord.paymentAmount = newVal;
+        }
+      }
+    },
+    selectedCustomer: {
+      immediate: true,
+      async handler(newVal) {
+        if (newVal && newVal.id) {
+          await this.fetchRelatedPeople();
+        } else {
+          this.relatedPeople = [];
+          this.coOwner = null;
+        }
+      }
+    }
+  },
+  computed: {
+    isIndividual() {
+      return this.selectedCustomer?.type === 1;
+    },
+    paymentAmount() {
+      return this.paymentRecord.paymentAmount;
+    },
+    isPaymentInputDisabled() {
+      return this.phaseInfo.id !== 'p0';
+    },
+    isPaymentAmountValid() {
+      return this.paymentAmount > 0;
+    },
+    paymentAmountError() {
+      if (this.isPaymentAmountValid) return '';
+      return 'Số tiền thanh toán phải lớn hơn 0.';
+    },
+    isConfirmed() {
+      return this.userInputCaptcha.toLowerCase() === this.captchaCode.toLowerCase() && this.userInputCaptcha !== '' && this.isPaymentAmountValid;
+    },
+    depositAmount() {
+      return this.selectedPolicy?.deposit || 0;
+    },
+  },
+  created() {
+    this.generateCaptcha();
+  },
+  methods: {
+    async fetchRelatedPeople() {
+      try {
+        const { $getdata } = useNuxtApp();
+        const apiName = this.isIndividual ? 'customerpeople' : 'legalrep';
+        const filterKey = this.isIndividual ? 'customer' : 'organization';
+
+        let customerId = this.selectedCustomer.id;
+
+        // Nếu là organization, cần lấy organization ID
+        if (!this.isIndividual) {
+          const org = await $getdata('organization', { customer: customerId }, undefined, true);
+          if (org) {
+            customerId = org.id;
+          } else {
+            this.relatedPeople = [];
+            this.coOwner = null;
+            return;
+          }
+        }
+
+        const people = await $getdata(apiName, { [filterKey]: customerId });
+        this.relatedPeople = Array.isArray(people) ? people : (people ? [people] : []);
+
+        // Auto-select người đầu tiên nếu có
+        if (this.relatedPeople.length > 0) {
+          this.coOwner = this.relatedPeople[0];
+        } else {
+          this.coOwner = null;
+        }
+      } catch (error) {
+        console.error('Error fetching related people:', error);
+        this.relatedPeople = [];
+        this.coOwner = null;
+      }
+    },
+    clearCoOwner() {
+      this.coOwner = null;
+    },
+    selectCoOwnerByPerson(selectedPerson) {
+      // selectedPerson là một record từ customerpeople
+      this.coOwner = selectedPerson || null;
+    },
+    formatDate(date) {
+      return date ? dayjs(date).format('DD/MM/YYYY') : '-';
+    },
+    updateDueDate(newDate) {
+      this.editableDueDate = newDate;
+      this.dateRecord.dueDate = newDate;
+    },
+    updatePaymentAmount(value) {
+      this.paymentRecord.paymentAmount = value;
+    },
+    generateCaptcha() {
+      this.captchaCode = Math.random().toString(36).substring(2, 7).toUpperCase();
+      this.userInputCaptcha = '';
+    },
+    handleConfirm() {
+      if (this.isConfirmed) {
+        this.$emit('modalevent', {
+          name: 'confirm',
+          data: {
+            currentDate: this.initialContractDate,
+            dueDate: this.editableDueDate,
+            paymentAmount: this.depositAmount,
+            depositReceived: this.paymentAmount,
+            people: this.isIndividual && this.coOwner ? this.coOwner.people : null,
+          }
+        });
+      }
+    },
+  }
+};
+</script>