feat: buy-sale page quatation form
This commit is contained in:
Methapon2001
parent
0a10ac94fd
commit
686d88c8d4
5 changed files with 338 additions and 0 deletions
77
src/components/05_buy-sale/MainDialog.vue
Normal file
77
src/components/05_buy-sale/MainDialog.vue
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import AppBox from '../app/AppBox.vue';
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
width?: string;
|
||||||
|
maxWidth?: string;
|
||||||
|
close?: (...args: unknown[]) => void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const dialogState = defineModel('state', { default: true });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="dialogState">
|
||||||
|
<AppBox
|
||||||
|
style="
|
||||||
|
padding: 0;
|
||||||
|
border-radius: var(--radius-2);
|
||||||
|
max-height: 100%;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
"
|
||||||
|
:style="{
|
||||||
|
width: width ?? '100%',
|
||||||
|
maxWidth: maxWidth ?? '98%',
|
||||||
|
}"
|
||||||
|
class="column"
|
||||||
|
>
|
||||||
|
<div class="row items-center q-py-sm q-px-md bordered-b">
|
||||||
|
<div style="flex: 1"><slot name="title" /></div>
|
||||||
|
<div>
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
flat
|
||||||
|
icon="mdi-close"
|
||||||
|
padding="xs"
|
||||||
|
class="close-btn"
|
||||||
|
:class="{ dark: $q.dark.isActive }"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="dialog-body"
|
||||||
|
style="
|
||||||
|
flex: 1;
|
||||||
|
max-height: calc(100vh - 200px);
|
||||||
|
overflow-y: auto;
|
||||||
|
position: relative;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="row items-center q-py-sm q-px-md bordered-t"
|
||||||
|
v-if="$slots.footer"
|
||||||
|
>
|
||||||
|
<slot name="footer" />
|
||||||
|
</div>
|
||||||
|
</AppBox>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.close-btn {
|
||||||
|
color: hsl(var(--negative-bg));
|
||||||
|
background-color: hsla(var(--negative-bg) / 0.1);
|
||||||
|
|
||||||
|
&.dark {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid hsl(var(--negative-bg));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-body > :deep(*) {
|
||||||
|
max-height: calc(100vh - 200px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
70
src/components/05_buy-sale/WorkerItem.vue
Normal file
70
src/components/05_buy-sale/WorkerItem.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
defineProps<{
|
||||||
|
data: {
|
||||||
|
no: number;
|
||||||
|
refNo: string;
|
||||||
|
fullName: string;
|
||||||
|
birthDate: string;
|
||||||
|
age: string;
|
||||||
|
nationality: string;
|
||||||
|
docExpireDate: string;
|
||||||
|
};
|
||||||
|
color?: 'male' | 'female' | 'none';
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="surface-1 rounded row bordered worker-item items-center"
|
||||||
|
:class="{
|
||||||
|
'worker-item__male': color === 'male',
|
||||||
|
'worker-item__female': color === 'female',
|
||||||
|
}"
|
||||||
|
style="padding-block: var(--size-2)"
|
||||||
|
>
|
||||||
|
<div class="col-1 text-center">{{ data.no }}</div>
|
||||||
|
<div class="col-2 text-center">{{ data.refNo }}</div>
|
||||||
|
<div class="col-3">{{ data.fullName }}</div>
|
||||||
|
<div class="col-1">{{ data.birthDate }}</div>
|
||||||
|
<div class="col-1 text-center">{{ data.age }}</div>
|
||||||
|
<div class="col-1 text-center">{{ data.nationality }}</div>
|
||||||
|
<div class="col-2 text-center">{{ data.docExpireDate }}</div>
|
||||||
|
<div class="col-1 text-center">
|
||||||
|
<q-btn
|
||||||
|
id="btn-delete-work"
|
||||||
|
icon="mdi-trash-can-outline"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
size="12px"
|
||||||
|
color="negative"
|
||||||
|
@click="$emit('delete')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.worker-item {
|
||||||
|
--side-color: var(--brand-1);
|
||||||
|
position: relative;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
&.worker-item__female {
|
||||||
|
--side-color: hsl(var(--gender-female));
|
||||||
|
}
|
||||||
|
|
||||||
|
&.worker-item__male {
|
||||||
|
--side-color: hsl(var(--gender-male));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.worker-item::before {
|
||||||
|
position: absolute;
|
||||||
|
content: ' ';
|
||||||
|
left: 0;
|
||||||
|
width: 7px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: var(--side-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
9
src/pages/05_buy-sale/MainPage.vue
Normal file
9
src/pages/05_buy-sale/MainPage.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import QuatationForm from './QuatationForm.vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<QuatationForm />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
177
src/pages/05_buy-sale/QuatationForm.vue
Normal file
177
src/pages/05_buy-sale/QuatationForm.vue
Normal file
|
|
@ -0,0 +1,177 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { Icon } from '@iconify/vue';
|
||||||
|
|
||||||
|
import MainDialog from 'src/components/05_buy-sale/MainDialog.vue';
|
||||||
|
import WorkerItem from 'src/components/05_buy-sale/WorkerItem.vue';
|
||||||
|
import AppBox from 'src/components/app/AppBox.vue';
|
||||||
|
|
||||||
|
const dialogState = ref(true);
|
||||||
|
|
||||||
|
const selectedBranchIssuer = ref('');
|
||||||
|
const selectedCustomer = ref('');
|
||||||
|
const toggleWorker = ref(true);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<MainDialog v-model:state="dialogState">
|
||||||
|
<template #title>{{ $t('quatationAddTitle') }}</template>
|
||||||
|
|
||||||
|
<div class="row q-pa-md items-center">
|
||||||
|
<div style="flex: 1"><q-img src="/logo.png" width="8rem" /></div>
|
||||||
|
<q-select
|
||||||
|
v-model="selectedBranchIssuer"
|
||||||
|
:options="[{ label: 'Issuer 1', value: 'Issuer 1' }]"
|
||||||
|
:label="$t('buySaleFormSelectBranchIssuer')"
|
||||||
|
id="select-branch-issuer"
|
||||||
|
for="select-branch-issuer"
|
||||||
|
style="width: 300px"
|
||||||
|
class="q-mr-md"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
v-model="selectedCustomer"
|
||||||
|
:options="[{ label: 'Customer 1', value: 'Customer 1' }]"
|
||||||
|
:label="$t('buySaleFormSelectCustomer')"
|
||||||
|
id="select-customer"
|
||||||
|
for="select-customer"
|
||||||
|
style="width: 300px"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="surface-2 bordered-t row"
|
||||||
|
style="align-items: stretch; overflow-y: auto"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="col-12 col-sm-9 row items-stretch"
|
||||||
|
style="padding: var(--size-3)"
|
||||||
|
>
|
||||||
|
<AppBox
|
||||||
|
class="full-width"
|
||||||
|
bordered
|
||||||
|
style="
|
||||||
|
padding: var(--size-3);
|
||||||
|
max-height: calc(100vh - 300px - var(--size-3) * 2);
|
||||||
|
overflow-y: auto;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="row items-center q-mb-sm">
|
||||||
|
<span style="flex: 1">
|
||||||
|
{{ $t('buySaleListCustomer') }}
|
||||||
|
<q-toggle
|
||||||
|
v-model="toggleWorker"
|
||||||
|
id="toggle-status"
|
||||||
|
size="md"
|
||||||
|
padding="none"
|
||||||
|
class="q-ml-md"
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
id="add-btn-plus"
|
||||||
|
class="row items-center"
|
||||||
|
style="border: none; background: transparent"
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
height="24"
|
||||||
|
icon="pixelarticons:plus"
|
||||||
|
class="app-text-info cursor-pointer"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AppBox class="surface-2 worker-list" bordered>
|
||||||
|
<WorkerItem
|
||||||
|
:data="{
|
||||||
|
no: 1,
|
||||||
|
refNo: 'CC6613334',
|
||||||
|
nationality: 'Thai',
|
||||||
|
birthDate: '1 May 2001',
|
||||||
|
age: '23 Years',
|
||||||
|
fullName: 'Methapon Metanipat',
|
||||||
|
docExpireDate: '16 May 2025',
|
||||||
|
}"
|
||||||
|
color="male"
|
||||||
|
/>
|
||||||
|
<WorkerItem
|
||||||
|
:data="{
|
||||||
|
no: 1,
|
||||||
|
refNo: 'CC6613334',
|
||||||
|
nationality: 'Thai',
|
||||||
|
birthDate: '1 May 2001',
|
||||||
|
age: '23 Years',
|
||||||
|
fullName: 'Methapon Metanipat',
|
||||||
|
docExpireDate: '16 May 2025',
|
||||||
|
}"
|
||||||
|
color="male"
|
||||||
|
/>
|
||||||
|
</AppBox>
|
||||||
|
</AppBox>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="col-12 col-sm-3"
|
||||||
|
style="
|
||||||
|
padding: var(--size-3);
|
||||||
|
padding-left: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: calc(100vh - 300px);
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<AppBox bordered class="column" style="gap: var(--size-3)">
|
||||||
|
<div class="rounded bordered q-px-md q-py-sm">
|
||||||
|
{{ $t('buySaleQuatationNo') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded bordered q-px-md q-py-sm">
|
||||||
|
{{ $t('buySaleQuatationDate') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded bordered q-px-md q-py-sm">
|
||||||
|
{{ $t('buySaleQuatationTime') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded bordered q-px-md q-py-sm">
|
||||||
|
{{ $t('buySaleQuatationTx') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded bordered q-px-md q-py-sm">
|
||||||
|
{{ $t('buySaleQuatationName') }}
|
||||||
|
</div>
|
||||||
|
<div class="rounded bordered q-px-md q-py-sm">
|
||||||
|
{{ $t('buySaleQuatationNo') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded bordered q-px-md q-py-sm">
|
||||||
|
{{ $t('buySaleQuatationDate') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded bordered q-px-md q-py-sm">
|
||||||
|
{{ $t('buySaleQuatationTime') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded bordered q-px-md q-py-sm">
|
||||||
|
{{ $t('buySaleQuatationTx') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded bordered q-px-md q-py-sm">
|
||||||
|
{{ $t('buySaleQuatationName') }}
|
||||||
|
</div>
|
||||||
|
</AppBox>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<q-btn color="primary" dense label="asd" class="q-px-md"></q-btn>
|
||||||
|
</template>
|
||||||
|
</MainDialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.worker-list > :deep(*:not(:last-child)) {
|
||||||
|
margin-bottom: var(--size-2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -31,6 +31,11 @@ const routes: RouteRecordRaw[] = [
|
||||||
name: 'productAndService',
|
name: 'productAndService',
|
||||||
component: () => import('pages/04_product-service/MainPage.vue'),
|
component: () => import('pages/04_product-service/MainPage.vue'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/buy-sale',
|
||||||
|
name: 'BuySale',
|
||||||
|
component: () => import('pages/05_buy-sale/MainPage.vue'),
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue