refactor: add form
This commit is contained in:
Net
parent
47f2664f15
commit
6372ed5418
1 changed files with 316 additions and 3 deletions
|
|
@ -1,22 +1,72 @@
|
|||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { productTreeDecoration } from './constants';
|
||||
import useProductServiceStore from 'src/stores/product-service';
|
||||
|
||||
import {
|
||||
ProductGroup,
|
||||
ProductList,
|
||||
Service,
|
||||
} from 'src/stores/product-service/types';
|
||||
import {
|
||||
EditButton,
|
||||
DeleteButton,
|
||||
SaveButton,
|
||||
UndoButton,
|
||||
} from 'components/button';
|
||||
|
||||
import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
|
||||
import FormPerson from 'components/02_personnel-management/FormPerson.vue';
|
||||
import { DialogContainer, DialogHeader } from 'components/dialog';
|
||||
import ProfileBanner from 'components/ProfileBanner.vue';
|
||||
import { AddressForm } from 'components/form';
|
||||
import {
|
||||
EmployerFormBasicInfo,
|
||||
EmployerFormBusiness,
|
||||
EmployerFormContact,
|
||||
EmployerFormAbout,
|
||||
} from 'src/pages/03_customer-management/components';
|
||||
|
||||
import { CustomerBranchCreate } from 'stores/customer/types';
|
||||
import DialogForm from 'components/DialogForm.vue';
|
||||
import QuotationForm from './QuotationForm.vue';
|
||||
import TreeView from 'src/components/shared/TreeView.vue';
|
||||
import { AddButton } from 'src/components/button';
|
||||
import MainButton from 'src/components/button/MainButton.vue';
|
||||
|
||||
const dialog = ref(true);
|
||||
import {
|
||||
useCustomerForm,
|
||||
useEmployeeForm,
|
||||
} from 'src/pages/03_customer-management/form';
|
||||
import useCustomerStore from 'stores/customer';
|
||||
|
||||
const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
|
||||
{
|
||||
main: [],
|
||||
business: ['businessType', 'jobPosition'],
|
||||
address: [
|
||||
'homeCode',
|
||||
'address',
|
||||
'addressEN',
|
||||
'provinceId',
|
||||
'districtId',
|
||||
'subDistrictId',
|
||||
],
|
||||
contact: [],
|
||||
},
|
||||
);
|
||||
|
||||
const customerFormStore = useCustomerForm();
|
||||
const employeeFormStore = useEmployeeForm();
|
||||
const customerStore = useCustomerStore();
|
||||
|
||||
const { state: customerFormState, currentFormData: customerFormData } =
|
||||
storeToRefs(customerFormStore);
|
||||
const { state: employeeFormState, currentFromDataEmployee } =
|
||||
storeToRefs(employeeFormStore);
|
||||
|
||||
const test = ref(true);
|
||||
const dialog = ref(true);
|
||||
const nodes = ref([
|
||||
{
|
||||
title: 'กลุ่มสินค้าและบริการที่ 1',
|
||||
|
|
@ -246,6 +296,269 @@ function convertToTree() {
|
|||
My Menu
|
||||
</div> -->
|
||||
<QuotationForm v-model:dialog-state="dialog" readonly />
|
||||
|
||||
<DialogContainer
|
||||
:model-value="test"
|
||||
:on-open="async () => {}"
|
||||
:on-close="() => {}"
|
||||
>
|
||||
<template #header>
|
||||
<DialogHeader
|
||||
:title="
|
||||
customerFormState.dialogType === 'create'
|
||||
? $t(`general.add`, {
|
||||
text: `${$t('customer.employer')} `,
|
||||
})
|
||||
: `${$t('customer.employer')} `
|
||||
"
|
||||
>
|
||||
<template #title-after>
|
||||
<span
|
||||
:style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
|
||||
>
|
||||
:
|
||||
{{
|
||||
customerFormData.customerType === 'CORP'
|
||||
? $t('customer.employerLegalEntity')
|
||||
: $t('customer.employerNaturalPerson')
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</DialogHeader>
|
||||
</template>
|
||||
|
||||
<div class="q-px-lg q-pt-lg surface-2">
|
||||
<ProfileBanner
|
||||
v-if="customerFormData.customerBranch !== undefined"
|
||||
active
|
||||
hide-fade
|
||||
:fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
|
||||
:img="
|
||||
customerFormState.customerImageUrl ||
|
||||
`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`
|
||||
"
|
||||
:fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
|
||||
:color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
|
||||
:bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
|
||||
:icon="
|
||||
customerFormData.customerType === 'PERS'
|
||||
? 'mdi-account-plus-outline'
|
||||
: 'mdi-office-building-outline'
|
||||
"
|
||||
:title="
|
||||
customerFormData.customerType === 'PERS'
|
||||
? `${customerFormData.customerBranch[0]?.firstName} ${customerFormData.customerBranch[0]?.lastName}`
|
||||
: customerFormData.customerBranch[0]?.registerName
|
||||
"
|
||||
:caption="
|
||||
customerFormData.customerType === 'PERS'
|
||||
? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
|
||||
: customerFormData.customerBranch[0]?.registerNameEN
|
||||
"
|
||||
@view="
|
||||
() => {
|
||||
customerFormState.imageDialog = true;
|
||||
customerFormState.isImageEdit = false;
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
customerFormState.imageDialog = customerFormState.isImageEdit = true
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="flex: 1; width: 100%; overflow-y: auto"
|
||||
class="surface-2 q-pa-lg"
|
||||
id="customer-form"
|
||||
>
|
||||
<div class="col surface-1 full-height rounded bordered scroll row">
|
||||
<div
|
||||
class="col-12 q-py-md q-pr-md q-pl-sm"
|
||||
id="customer-form-content"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
>
|
||||
<div class="row" id="form-branch-customer-branch">
|
||||
<!-- v-if="customerFormData.customerBranch" -->
|
||||
<q-form
|
||||
class="full-width q-col-gutter-sm"
|
||||
greedy
|
||||
@submit.prevent="async () => {}"
|
||||
>
|
||||
<!-- v-if="!!customerFormState.editCustomerId" -->
|
||||
<div class="col-12 text-weight-bold text-body1 row items-center">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-briefcase-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
<span>{{ $t('customer.form.group.branch') }}</span>
|
||||
</div>
|
||||
|
||||
<EmployerFormAbout :index="(0).toString()" customerType="CORP" />
|
||||
|
||||
<div class="col-12 text-weight-bold text-body1 row items-center">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-briefcase-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
<span>{{ $t('customerBranch.tab.business') }}</span>
|
||||
</div>
|
||||
|
||||
<EmployerFormBusiness prefixId="dialog" dense outlined />
|
||||
|
||||
<AddressForm
|
||||
prefix-id="employer"
|
||||
hide-title
|
||||
dense
|
||||
outlined
|
||||
use-employment
|
||||
:title="$t('form.address')"
|
||||
:addressTitle="$t('form.address')"
|
||||
:addressTitleEN="$t('form.address', { suffix: '(EN)' })"
|
||||
/>
|
||||
</q-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContainer>
|
||||
|
||||
<DialogForm
|
||||
hideFooter
|
||||
:title="$t('form.title.create', { name: $t('customer.employee') })"
|
||||
v-model:modal="test"
|
||||
:undo="() => {}"
|
||||
:submit="async () => {}"
|
||||
:show="() => {}"
|
||||
>
|
||||
<div class="q-px-lg q-pt-lg surface-2">
|
||||
<ProfileBanner
|
||||
active
|
||||
useToggle
|
||||
color="white"
|
||||
icon="mdi-account-plus-outline"
|
||||
:bg-color="
|
||||
employeeFormState.profileUrl
|
||||
? 'white'
|
||||
: 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
|
||||
"
|
||||
v-model:current-tab="employeeFormState.currentTab"
|
||||
v-model:toggle-status="currentFromDataEmployee.status"
|
||||
fallbackCover="/images/employee-banner.png"
|
||||
:img="employeeFormState.profileUrl || `/images/employee-avatar.png`"
|
||||
:toggleTitle="$t('status.title')"
|
||||
hideFade
|
||||
@view="
|
||||
() => {
|
||||
employeeFormState.imageDialog = true;
|
||||
employeeFormState.isImageEdit = false;
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
employeeFormState.imageDialog = employeeFormState.isImageEdit = true
|
||||
"
|
||||
@update:toggle-status="
|
||||
() => {
|
||||
currentFromDataEmployee.status =
|
||||
currentFromDataEmployee.status === 'CREATED'
|
||||
? 'INACTIVE'
|
||||
: 'CREATED';
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="flex: 1; width: 100%; overflow-y: auto"
|
||||
class="surface-2 q-pa-lg"
|
||||
id="drawer-employee-form"
|
||||
>
|
||||
<div class="col surface-1 full-height rounded bordered scroll row">
|
||||
<div
|
||||
class="col-12 full-width col-md-10 q-py-md q-pr-md q-pl-sm"
|
||||
id="employee-form-content"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
>
|
||||
<template v-if="employeeFormState.currentTab === 'personalInfo'">
|
||||
<div
|
||||
class="surface-1 rounded q-pt-sm row"
|
||||
style="position: absolute; z-index: 999; right: 4%"
|
||||
>
|
||||
<UndoButton
|
||||
v-if="
|
||||
employeeFormState.isEmployeeEdit &&
|
||||
employeeFormState.dialogType !== 'create'
|
||||
"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormStore.resetFormDataEmployee();
|
||||
employeeFormState.isEmployeeEdit = false;
|
||||
employeeFormState.dialogType = 'info';
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
type="submit"
|
||||
/>
|
||||
<EditButton
|
||||
v-if="!employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormState.isEmployeeEdit = true;
|
||||
employeeFormState.dialogType = 'edit';
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="!employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
/>
|
||||
</div>
|
||||
|
||||
<BasicInformation
|
||||
no-action
|
||||
id="form-information"
|
||||
prefix-id="form-employee"
|
||||
:show-btn-save="employeeFormState.dialogType === 'create'"
|
||||
employee
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
title="form.field.basicInformation"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormPerson
|
||||
id="form-personal"
|
||||
prefix-id="form-employee"
|
||||
dense
|
||||
outlined
|
||||
employee
|
||||
separator
|
||||
title="customerEmployee.form.group.personalInfo"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogForm>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue