feat: customer branch dialog UI + function submit + define emit
This commit is contained in:
oat_dev
parent
e7c7d10e13
commit
aba1d61e01
2 changed files with 166 additions and 6 deletions
|
|
@ -10,10 +10,10 @@ const userCustomer = useCustomerStore();
|
|||
const { fetchListById } = userCustomer;
|
||||
|
||||
const inputSearch = ref<string>('');
|
||||
const branch = ref<CustomerBranch[]>();
|
||||
|
||||
const currentCustomerName = ref<string>('');
|
||||
const currentCustomerUrlImage = ref<string>('');
|
||||
const branch = defineModel<CustomerBranch[]>('branch');
|
||||
const currentCustomerName = defineModel<string>('currentCustomerName');
|
||||
const currentCustomerUrlImage = defineModel<string>('currentCustomerUrlImage');
|
||||
|
||||
const prop = withDefaults(
|
||||
defineProps<{
|
||||
|
|
@ -25,6 +25,12 @@ const prop = withDefaults(
|
|||
},
|
||||
);
|
||||
|
||||
defineEmits<{
|
||||
(e: 'back'): void;
|
||||
(e: 'viewDetail'): void;
|
||||
(e: 'dialog'): void;
|
||||
}>();
|
||||
|
||||
onMounted(async () => {
|
||||
const result = await fetchListById(prop.customerId);
|
||||
if (result) {
|
||||
|
|
@ -84,7 +90,7 @@ onMounted(async () => {
|
|||
unelevated
|
||||
:label="'+ ' + $t('formDialogTitleCreateSubBranch')"
|
||||
padding="4px 16px"
|
||||
@click="console.log('add')"
|
||||
@click="$emit('dialog')"
|
||||
style="background-color: var(--cyan-6); color: white"
|
||||
/>
|
||||
<q-separator vertical inset class="q-mx-lg" />
|
||||
|
|
|
|||
|
|
@ -38,7 +38,8 @@ import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormE
|
|||
import { dialog } from 'src/stores/utils';
|
||||
|
||||
const userCustomer = useCustomerStore();
|
||||
const { create, getStatsCustomer, fetchList, editById } = userCustomer;
|
||||
const { create, getStatsCustomer, fetchList, editById, fetchListById } =
|
||||
userCustomer;
|
||||
const formData = ref<CustomerCreate>({
|
||||
status: 'CREATED',
|
||||
customerType: 'CORP',
|
||||
|
|
@ -117,8 +118,12 @@ const infoDrawerEdit = ref(false);
|
|||
const isMainPage = ref<boolean>(true);
|
||||
const statsCustomerType = ref<CustomerStats>();
|
||||
const currentCustomerId = ref<string>('');
|
||||
|
||||
const dialogInputCustomerBranchForm = ref<boolean>(false);
|
||||
const currentCustomer = ref<Customer>();
|
||||
const branch = ref<CustomerBranch[]>();
|
||||
|
||||
const currentCustomerName = ref<string>('');
|
||||
const currentCustomerUrlImage = ref<string>('');
|
||||
|
||||
const inputFile = (() => {
|
||||
const element = document.createElement('input');
|
||||
|
|
@ -295,6 +300,17 @@ async function onSubmit() {
|
|||
if (resultList) listCustomer.value = resultList.result;
|
||||
}
|
||||
|
||||
async function onSubmitCustomerBranch() {
|
||||
dialogInputCustomerBranchForm.value = false;
|
||||
clearForm();
|
||||
const result = await fetchListById(currentCustomerId.value);
|
||||
if (result) {
|
||||
currentCustomerName.value = result.customerName;
|
||||
currentCustomerUrlImage.value = result.imageUrl;
|
||||
branch.value = result.branch;
|
||||
}
|
||||
}
|
||||
|
||||
async function onSubmitEdit(id: string) {
|
||||
if (!formData.value) return;
|
||||
|
||||
|
|
@ -449,6 +465,7 @@ onMounted(async () => {
|
|||
<UsersDetailCardComponent
|
||||
v-for="i in listCustomer"
|
||||
:key="i.id"
|
||||
class="hover-card"
|
||||
:color="i.customerType === 'CORP' ? 'purple' : 'green'"
|
||||
:metadata="{ id: '1', disabled: false }"
|
||||
:badge="i.branch"
|
||||
|
|
@ -551,6 +568,10 @@ onMounted(async () => {
|
|||
<CustomerInfoComponent
|
||||
:customer-id="currentCustomerId"
|
||||
@back="isMainPage = true"
|
||||
@dialog="dialogInputCustomerBranchForm = true"
|
||||
v-model:branch="branch"
|
||||
v-model:currentCustomerName="currentCustomerName"
|
||||
v-model:currentCustomerUrlImage="currentCustomerUrlImage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -806,6 +827,132 @@ onMounted(async () => {
|
|||
</template>
|
||||
</FormDialog>
|
||||
|
||||
<FormDialog
|
||||
v-model:modal="dialogInputCustomerBranchForm"
|
||||
:title="$t('formDialogTitleCreateSubBranch')"
|
||||
:submit="
|
||||
() => {
|
||||
onSubmitCustomerBranch();
|
||||
}
|
||||
"
|
||||
:close="() => {}"
|
||||
>
|
||||
<template #address>
|
||||
<!-- <FormCustomerBranch separator dense outlined /> -->
|
||||
|
||||
<div class="col-3 app-text-muted">
|
||||
• {{ $t('formDialogCustomerBranch') }}
|
||||
</div>
|
||||
|
||||
<div class="col-12 row bordered q-pt-none rounded">
|
||||
<TabComponent
|
||||
v-model:customer-branch="formData.customerBranch"
|
||||
v-model:tab-index="indexTab"
|
||||
>
|
||||
<template #address>
|
||||
<FormAddress
|
||||
v-if="
|
||||
indexTab !== undefined && formData.customerBranch?.[indexTab]
|
||||
"
|
||||
v-model:address="formData.customerBranch[indexTab].address"
|
||||
v-model:address-e-n="formData.customerBranch[indexTab].addressEN"
|
||||
v-model:province-id="formData.customerBranch[indexTab].provinceId"
|
||||
v-model:district-id="formData.customerBranch[indexTab].districtId"
|
||||
v-model:sub-district-id="
|
||||
formData.customerBranch[indexTab].subDistrictId
|
||||
"
|
||||
v-model:zip-code="formData.customerBranch[indexTab].zipCode"
|
||||
separator
|
||||
dense
|
||||
outlined
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #businessInformation>
|
||||
<FormBusiness
|
||||
v-if="
|
||||
indexTab !== undefined && formData.customerBranch?.[indexTab]
|
||||
"
|
||||
v-model:employment-office="
|
||||
formData.customerBranch[indexTab].employmentOffice
|
||||
"
|
||||
v-model:bussiness-type="
|
||||
formData.customerBranch[indexTab].bussinessType
|
||||
"
|
||||
v-model:bussiness-type-en="
|
||||
formData.customerBranch[indexTab].bussinessTypeEN
|
||||
"
|
||||
v-model:job-position="
|
||||
formData.customerBranch[indexTab].jobPosition
|
||||
"
|
||||
v-model:job-position-en="
|
||||
formData.customerBranch[indexTab].jobPositionEN
|
||||
"
|
||||
v-model:job-description="
|
||||
formData.customerBranch[indexTab].jobDescription
|
||||
"
|
||||
v-model:sale-employee="
|
||||
formData.customerBranch[indexTab].saleEmployee
|
||||
"
|
||||
v-model:pay-date="formData.customerBranch[indexTab].payDate"
|
||||
v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
|
||||
separator
|
||||
dense
|
||||
outlined
|
||||
/>
|
||||
</template>
|
||||
<template #about>
|
||||
<AboutComponent
|
||||
v-if="
|
||||
indexTab !== undefined && formData.customerBranch?.[indexTab]
|
||||
"
|
||||
:type-customer="customerType"
|
||||
v-model:tax-no="formData.customerBranch[indexTab].taxNo"
|
||||
v-model:customer-name="formData.customerBranch[indexTab].name"
|
||||
v-model:customer-english-name="
|
||||
formData.customerBranch[indexTab].nameEN
|
||||
"
|
||||
v-model:authorized-capital="
|
||||
formData.customerBranch[indexTab].authorizedCapital
|
||||
"
|
||||
v-model:register-name="
|
||||
formData.customerBranch[indexTab].registerName
|
||||
"
|
||||
v-model:register-date="
|
||||
formData.customerBranch[indexTab].registerDate
|
||||
"
|
||||
dense
|
||||
outlined
|
||||
bordered
|
||||
separator
|
||||
/>
|
||||
</template>
|
||||
<template #contactInformation>
|
||||
<ContactComponent
|
||||
v-if="
|
||||
indexTab !== undefined && formData.customerBranch?.[indexTab]
|
||||
"
|
||||
v-model:mail="formData.customerBranch[indexTab].email"
|
||||
v-model:telephone="formData.customerBranch[indexTab].telephoneNo"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
/>
|
||||
</template>
|
||||
<template #otherDocuments>
|
||||
<OtherInformation
|
||||
v-if="
|
||||
indexTab !== undefined && formData.customerBranch?.[indexTab]
|
||||
"
|
||||
dense
|
||||
outlined
|
||||
/>
|
||||
</template>
|
||||
</TabComponent>
|
||||
</div>
|
||||
</template>
|
||||
</FormDialog>
|
||||
|
||||
<DrawerInfo
|
||||
title="บริษัททดสอบ"
|
||||
v-model:drawer-open="infoDrawer"
|
||||
|
|
@ -1001,5 +1148,12 @@ onMounted(async () => {
|
|||
.customer-row {
|
||||
display: grid;
|
||||
gap: var(--size-6);
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.hover-card:hover {
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--shadow-3);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue