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>
|
<script lang="ts" setup>
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { storeToRefs } from 'pinia';
|
||||||
import { productTreeDecoration } from './constants';
|
import { productTreeDecoration } from './constants';
|
||||||
import useProductServiceStore from 'src/stores/product-service';
|
import useProductServiceStore from 'src/stores/product-service';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
ProductGroup,
|
ProductGroup,
|
||||||
ProductList,
|
ProductList,
|
||||||
Service,
|
Service,
|
||||||
} from 'src/stores/product-service/types';
|
} 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 QuotationForm from './QuotationForm.vue';
|
||||||
import TreeView from 'src/components/shared/TreeView.vue';
|
import TreeView from 'src/components/shared/TreeView.vue';
|
||||||
import { AddButton } from 'src/components/button';
|
import { AddButton } from 'src/components/button';
|
||||||
import MainButton from 'src/components/button/MainButton.vue';
|
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([
|
const nodes = ref([
|
||||||
{
|
{
|
||||||
title: 'กลุ่มสินค้าและบริการที่ 1',
|
title: 'กลุ่มสินค้าและบริการที่ 1',
|
||||||
|
|
@ -246,6 +296,269 @@ function convertToTree() {
|
||||||
My Menu
|
My Menu
|
||||||
</div> -->
|
</div> -->
|
||||||
<QuotationForm v-model:dialog-state="dialog" readonly />
|
<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>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue