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

feat: about component

Browse source
This commit is contained in:
oat_dev 2024-04-23 13:51:32 +07:00
parent 2f1c46b9db
commit a147dc4b4c
6 changed files with 186 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

148
src/components/03_customer-management/AboutComponent.vue Normal file
View file

@ -0,0 +1,148 @@
<script setup lang="ts">
import { dateFormat } from 'src/utils/datetime';
defineProps<{
title?: string;
dense?: boolean;
outlined?: boolean;
readonly?: boolean;
separator?: boolean;
}>();
const branchCode = defineModel<string>('branchCode');
const legalEntityCode = defineModel<string>('legalEntityCode');
const taxNo = defineModel<string>('taxNo');
const customerName = defineModel<string>('customerName');
const customerEnglishName = defineModel<string>('customerEnglishName');
const authorizedCapital = defineModel<string>('registeredCapital');
const registerName = defineModel<string>('registerName');
const registerDate = defineModel<Date | null>('registerDate');
</script>
<template>
<div class="row">
<div class="col-3 app-text-muted">• {{ $t(`about`) }}</div>
<div class="col-9 row q-col-gutter-md">
<div class="row q-col-gutter-md">
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('branchCode')"
v-model="branchCode"
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-4"
:label="$t('legalEntityCode')"
v-model="legalEntityCode"
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-5"
:label="$t('taxNo')"
v-model="taxNo"
/>
</div>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('customerName')"
v-model="customerName"
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('customerEnglishName')"
v-model="customerEnglishName"
/>
<VueDatePicker
utc
autoApply
v-model="registerDate"
:locale="'th'"
:enableTimePicker="false"
:disabled="readonly"
class="col-3"
>
<template #year="{ value }">
{{ value + 543 }}
</template>
<template #trigger>
<q-input
id="input-start-date"
:label="$t('registerDate')"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="registerDate ? dateFormat(registerDate) : ''"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="primary"
/>
</template>
<template v-slot:append>
<q-icon
v-if="registerDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="registerDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('authorizedCapital')"
v-model="authorizedCapital"
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('registerName')"
v-model="registerName"
/>
</div>
</div>
<q-separator
v-if="separator"
class="col-12 q-mt-xl q-mb-md"
style="padding-block: 0.5px"
/>
</template>
<style></style>