chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: FormBusiness components

Browse source
This commit is contained in:
Net 2024-04-23 13:40:03 +07:00
parent 0498f711fc
commit 1f84d95223
1 changed files with 197 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

197
src/components/03_customer-management/FormBusiness.vue Normal file
View file

@ -0,0 +1,197 @@
<script setup lang="ts">
const businessAddress = defineModel<string>('email');
const typeBusiness = defineModel<string>('typeBusiness');
const JobPosition = defineModel<string>('JobPosition');
const typeBusinessEN = defineModel<string>('typeBusinessEN');
const JobPositionEN = defineModel<string>('JobPositionEN');
const jobDescription = defineModel<string>('jobDescription');
const payDay = defineModel<string>('payDay');
const payRate = defineModel<string>('payRate');
const salesPerson = defineModel<string>('salesPerson');
const typeBusinessOptions = [
{
value: '1',
label: 'ประเภทบริษัท 1',
},
{
value: '2',
label: 'ประเภทบริษัท 2',
},
{
value: '3',
label: 'ประเภทบริษัท 3',
},
];
const JobPositionOptions = [
{
value: '1',
label: 'ตําแหน่งงาน 1',
},
{
value: '2',
label: 'ตําแหน่งงาน 2',
},
{
value: '3',
label: 'ตําแหน่งงาน 3',
},
];
defineProps<{
title?: string;
dense?: boolean;
outlined?: boolean;
readonly?: boolean;
separator?: boolean;
}>();
</script>
<template>
<div class="col-12 app-text-muted"></div>
<div class="col-12 row q-col-gutter-y-md">
<div class="col-3 q-pl-xl app-text-muted">
{{ $t('businessInformation') }}
</div>
<div class="col-9 row q-col-gutter-md">
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-12"
:label="$t('inputCustomerAddress')"
v-model="businessAddress"
/>
<q-select
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
v-model="typeBusiness"
:options="typeBusinessOptions"
:label="$t('businessType')"
class="col-6"
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('businessTypeEN')"
v-model="typeBusinessEN"
/>
<q-select
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
v-model="JobPosition"
:options="JobPositionOptions"
:label="$t('jobPosition')"
class="col-6"
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('jobPositionEN')"
v-model="JobPositionEN"
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('jobDescription')"
v-model="jobDescription"
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('payDay')"
v-model="payDay"
>
<template v-slot:prepend>
<q-icon
name="mdi-calendar-blank-outline"
color="primary"
class="cursor-pointer"
size="16px"
>
<q-popup-proxy
cover
transition-show="scale"
transition-hide="scale"
>
<q-date v-model="payDay" mask="YYYY-MM-DD HH:mm">
<div class="row items-center justify-end">
<q-btn v-close-popup label="Close" color="primary" flat />
</div>
</q-date>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
<!-- <q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('payDay')"
v-model="payDay"
/> -->
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('payRate')"
v-model="payRate"
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('salesPerson')"
v-model="salesPerson"
/>
</div>
</div>
<q-separator
v-if="separator"
class="col-12 q-mb-md"
style="padding-block: 0.5px; margin-top: 32px"
/>
</template>