chore: install prettier
This commit is contained in:
Viet An
@@ -6,78 +6,159 @@
|
||||
<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>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>
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
<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" />
|
||||
<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">
|
||||
<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="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 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>
|
||||
@@ -89,24 +170,41 @@
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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" />
|
||||
<Datepicker
|
||||
:record="dateRecord"
|
||||
attr="dueDate"
|
||||
@date="updateDueDate"
|
||||
position="is-top-right"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -116,18 +214,35 @@
|
||||
<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">
|
||||
<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;">
|
||||
<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'">
|
||||
<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>
|
||||
<SvgIcon
|
||||
v-bind="{
|
||||
name: 'refresh.svg',
|
||||
type: 'primary',
|
||||
size: 23,
|
||||
}"
|
||||
></SvgIcon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -140,22 +255,30 @@
|
||||
</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">
|
||||
<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>
|
||||
<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 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: {
|
||||
@@ -171,31 +294,36 @@ export default {
|
||||
const store = useStore();
|
||||
return { store };
|
||||
},
|
||||
emits: ['close', 'modalevent'],
|
||||
emits: ["close", "modalevent"],
|
||||
data() {
|
||||
const initialDueDate = dayjs(this.initialContractDate).add(0, 'day').format('YYYY-MM-DD');
|
||||
const initialDueDate = dayjs(this.initialContractDate).add(0, "day").format("YYYY-MM-DD");
|
||||
|
||||
return {
|
||||
editableDueDate: initialDueDate,
|
||||
dateRecord: { dueDate: initialDueDate },
|
||||
captchaCode: '',
|
||||
userInputCaptcha: '',
|
||||
captchaCode: "",
|
||||
userInputCaptcha: "",
|
||||
paymentRecord: { paymentAmount: null },
|
||||
coOwner: null,
|
||||
relatedPeople: [],
|
||||
peopleAddon: { component: "people/People", width: "65%", height: "600px", title: "Người liên quan" }
|
||||
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) {
|
||||
if (this.phaseInfo.id === "p0" && newVal === 0) {
|
||||
this.paymentRecord.paymentAmount = null;
|
||||
} else {
|
||||
this.paymentRecord.paymentAmount = newVal;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
selectedCustomer: {
|
||||
immediate: true,
|
||||
@@ -206,8 +334,8 @@ export default {
|
||||
this.relatedPeople = [];
|
||||
this.coOwner = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isIndividual() {
|
||||
@@ -217,17 +345,21 @@ export default {
|
||||
return this.paymentRecord.paymentAmount;
|
||||
},
|
||||
isPaymentInputDisabled() {
|
||||
return this.phaseInfo.id !== 'p0';
|
||||
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.';
|
||||
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;
|
||||
return (
|
||||
this.userInputCaptcha.toLowerCase() === this.captchaCode.toLowerCase() &&
|
||||
this.userInputCaptcha !== "" &&
|
||||
this.isPaymentAmountValid
|
||||
);
|
||||
},
|
||||
depositAmount() {
|
||||
return this.selectedPolicy?.deposit || 0;
|
||||
@@ -240,14 +372,14 @@ export default {
|
||||
async fetchRelatedPeople() {
|
||||
try {
|
||||
const { $getdata } = useNuxtApp();
|
||||
const apiName = this.isIndividual ? 'customerpeople' : 'legalrep';
|
||||
const filterKey = this.isIndividual ? 'customer' : 'organization';
|
||||
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);
|
||||
const org = await $getdata("organization", { customer: customerId }, undefined, true);
|
||||
if (org) {
|
||||
customerId = org.id;
|
||||
} else {
|
||||
@@ -258,7 +390,7 @@ export default {
|
||||
}
|
||||
|
||||
const people = await $getdata(apiName, { [filterKey]: customerId });
|
||||
this.relatedPeople = Array.isArray(people) ? people : (people ? [people] : []);
|
||||
this.relatedPeople = Array.isArray(people) ? people : people ? [people] : [];
|
||||
|
||||
// Auto-select người đầu tiên nếu có
|
||||
if (this.relatedPeople.length > 0) {
|
||||
@@ -267,7 +399,7 @@ export default {
|
||||
this.coOwner = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching related people:', error);
|
||||
console.error("Error fetching related people:", error);
|
||||
this.relatedPeople = [];
|
||||
this.coOwner = null;
|
||||
}
|
||||
@@ -280,7 +412,7 @@ export default {
|
||||
this.coOwner = selectedPerson || null;
|
||||
},
|
||||
formatDate(date) {
|
||||
return date ? dayjs(date).format('DD/MM/YYYY') : '-';
|
||||
return date ? dayjs(date).format("DD/MM/YYYY") : "-";
|
||||
},
|
||||
updateDueDate(newDate) {
|
||||
this.editableDueDate = newDate;
|
||||
@@ -291,22 +423,22 @@ export default {
|
||||
},
|
||||
generateCaptcha() {
|
||||
this.captchaCode = Math.random().toString(36).substring(2, 7).toUpperCase();
|
||||
this.userInputCaptcha = '';
|
||||
this.userInputCaptcha = "";
|
||||
},
|
||||
handleConfirm() {
|
||||
if (this.isConfirmed) {
|
||||
this.$emit('modalevent', {
|
||||
name: 'confirm',
|
||||
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>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user