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
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue