feat: about component

src/components/03_customer-management/AboutComponent.vue

@@ -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>

src/i18n/en-US/customer-main-page.ts

@@ -19,4 +19,15 @@ export default {
   payDay: 'Payday',
   payRate: 'Daily wage rate',
   salesPerson: 'Salesperson',
+
+  // เกี่ยวกับ About
+  about: 'About',
+  branchCode: 'Branch Code',
+  legalEntityCode: 'Legal Entity Code',
+  taxNo: 'Tax Identification Number',
+  customerName: 'Customer Thai Name',
+  customerEnglishName: 'Customer English Name',
+  registerDate: 'Register Date',
+  authorizedCapital: 'Registered Capital',
+  registerName: 'RegisterName',
 };

src/i18n/en-US/index.ts

@@ -8,6 +8,7 @@ import formDialog from './form-dialog';
 import status from './status';
 import customerMainPage from './customer-main-page';
 import employerDialog from './employer-dialog';
+import otherDocument from './other-document';
 export default {
   ok: 'Confirm',
   agree: 'Agree',
@@ -43,4 +44,5 @@ export default {
   ...formDialog,
   ...customerMainPage,
   ...employerDialog,
+  ...otherDocument,
 };

src/i18n/th-th/customer-main-page.ts

@@ -27,4 +27,15 @@ export default {
   payRate: 'อัตราค่าจ้าง/วัน',
 
   salesPerson: 'พนักงานขาย',
+
+  // เกี่ยวกับ
+  about: 'เกี่ยวกับ',
+  branchCode: 'รหัสสาขา',
+  legalEntityCode: 'รหัสนิติบุคคล',
+  taxNo: 'เลขประจำตัวผู้เสียภาษี',
+  customerName: 'ชื่อลูกค้า ภาษาไทย',
+  customerEnglishName: 'ชื่อลูกค้า ภาษาอังกฤษ',
+  registerDate: 'จดทะเบียนเมื่อ',
+  authorizedCapital: 'ทุนจดทะเบียน',
+  registerName: 'จดทะเบียนชื่อ',
 };

src/i18n/th-th/index.ts

@@ -8,6 +8,7 @@ import user from './user';
 import formDialog from './form-dialog';
 import status from './status';
 import employerDialog from './employer-dialog';
+import otherDocument from './other-document';
 export default {
   ok: 'ยืนยัน',
   agree: 'ตกลง',
@@ -43,4 +44,5 @@ export default {
   ...formDialog,
   ...customerMainPage,
   ...employerDialog,
+  ...otherDocument,
 };

src/pages/03_customer-management/MainPage.vue

@@ -13,6 +13,9 @@ import BasicInformation from 'src/components/03_customer-management/BasicInforma
 import FormCustomerBranch from 'src/components/03_customer-management/FormCustomerBranch.vue';
 import TabComponent from 'src/components/TabComponent.vue';
 import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
+import AboutComponent from 'src/components/03_customer-management/AboutComponent.vue';
+import ContactComponent from 'src/components/03_customer-management/ContactInformation.vue';
+import OtherInformation from 'src/components/03_customer-management/OtherInformation.vue';
 import FormBusiness from 'src/components/03_customer-management/FormBusiness.vue';
 
 const statusToggle = ref<boolean>(false);
@@ -217,6 +220,15 @@ function openDialogInputForm() {
           <template #businessInformation>
             <FormBusiness separator dense outlined />
           </template>
+          <template #about>
+            <AboutComponent dense outlined separator />
+          </template>
+          <template #contactInformation>
+            <ContactComponent dense outlined separator />
+          </template>
+          <template #otherDocuments>
+            <OtherInformation dense outlined />
+          </template>
         </TabComponent>
       </div>
     </template>