fix(03): employee customer

src/components/03_customer-management/employee/BasicInformation.vue

@@ -9,6 +9,9 @@ import {
   SaveButton,
   UndoButton,
 } from 'components/button';
+import { useI18n } from 'vue-i18n';
+
+const { locale } = useI18n();
 
 const optionsBranch = defineModel<{ id: string; name: string }[]>(
   'optionsBranch',
@@ -29,7 +32,7 @@ const customerBranch = defineModel<{
 const nrcNo = defineModel<string>('nrcNo');
 const code = defineModel<string>('code');
 
-defineProps<{
+const props = defineProps<{
   noAction?: boolean;
   title?: string;
   dense?: boolean;
@@ -56,6 +59,31 @@ let branchFilter: (
   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
 ) => void;
 
+function listBranch(customerCode: string) {
+  if (!props.employeeOwnerOption) return '';
+  const groupedLists: { [key: string]: CustomerBranch } =
+    props.employeeOwnerOption.reduce((acc, item) => {
+      const code = item.codeCustomer;
+      if (!acc[code]) {
+        acc[code] = [];
+      }
+      acc[code].push(item);
+      return acc;
+    }, {});
+  const list: CustomerBranch[] = groupedLists[customerCode];
+  const names = list.map((v) => {
+    return v.customer.customerType === 'CORP'
+      ? locale.value === 'eng'
+        ? v.registerNameEN
+        : v.registerName
+      : locale.value === 'eng'
+        ? `${v.firstNameEN} ${v.lastNameEN}`
+        : `${v.firstName} ${v.lastName}`;
+  });
+
+  return names.join(' / ');
+}
+
 watch(
   () => optionsBranch.value,
   () => {
@@ -160,8 +188,6 @@ onMounted(() => {
         ]"
       >
         <template v-slot:option="scope">
-          <!-- {{ console.log(scope.opt) }} -->
-
           <q-item
             v-if="scope.opt"
             v-bind="scope.itemProps"
@@ -173,7 +199,12 @@ onMounted(() => {
             <div class="q-mt-sm">
               <div>
                 <span v-if="scope.opt.customer.customerType">
-                  {{ `${scope.opt.code} ${$t('general.name')}` }}:
+                  {{ scope.opt.code }}
+                  {{
+                    scope.opt.customer.customerType === 'CORP'
+                      ? $t('customer.form.registerName')
+                      : $t('customer.form.ownerName')
+                  }}:
                   {{
                     scope.opt.customer.customerType === 'CORP'
                       ? scope.opt.customerName
@@ -187,24 +218,15 @@ onMounted(() => {
 
               <div class="text-caption app-text-muted-2 q-mb-xs">
                 <span v-if="scope.opt.customer" class="col column">
-                  {{ $t('customerEmployee.form.employerSelect.branchName') }}:
+                  {{ $t('customerBranch.form.title') }}:
-                  {{
+                  {{ listBranch(scope.opt.codeCustomer) }}
-                    scope.opt.customer.customerType === 'CORP'
-                      ? $i18n.locale === 'eng'
-                        ? scope.opt.registerNameEN
-                        : scope.opt.registerName
-                      : $i18n.locale === 'eng'
-                        ? `${scope.opt.firstNameEN} ${scope.opt.lastNameEN}` ||
-                          '-'
-                        : `${scope.opt.firstName} ${scope.opt.lastName}` || '-'
-                  }}
                 </span>
                 <span v-if="scope.opt.province" class="col">
                   {{ $t('general.address') }}
                   {{
                     $i18n.locale === 'eng'
                       ? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
-                      : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.street')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
+                      : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
                   }}
                   {{ scope.opt.subDistrict?.zipCode || '' }}
                 </span>
@@ -222,50 +244,44 @@ onMounted(() => {
           >
             <div class="q-mr-sm">
               {{ scope.opt.code }}
-              {{ $t('customerEmployee.form.employerSelect.branchName') }}:
               {{
-                $i18n.locale === 'eng'
+                scope.opt.customer.customerType === 'CORP'
-                  ? scope.opt.registerNameEN
+                  ? $t('customer.form.registerName')
-                  : scope.opt.registerName
+                  : $t('customer.form.ownerName')
+              }}:
+              {{
+                scope.opt.customer.customerType === 'CORP'
+                  ? scope.opt.customerName
+                  : $i18n.locale === 'eng'
+                    ? `${scope.opt.firstNameEN} ${scope.opt.lastNameEN}` || '-'
+                    : `${scope.opt.firstName} ${scope.opt.lastName}` || '-'
               }}
             </div>
             <div
               class="text-caption app-text-muted-2"
               v-if="scope.opt.customer && scope.opt.province"
             >
-              {{ $t('customerEmployee.form.employerSelect.branchName') }}:
+              {{ $t('customerBranch.form.title') }}:
-              {{
+              {{ listBranch(scope.opt.codeCustomer) }}
-                $i18n.locale === 'eng'
-                  ? scope.opt.customer.firstNameEN ||
-                    '-' + ' ' + scope.opt.customer.lastNameEN
-                  : scope.opt.customer.firstName ||
-                    '-' + ' ' + scope.opt.customer.lastName
-              }}
 
               {{ $t('general.address') }}
               {{
                 $i18n.locale === 'eng'
-                  ? `${scope.opt.addressEN || ''} ${scope.opt.subDistrict.nameEN || ''} ${scope.opt.district.nameEN || ''} ${scope.opt.province.nameEN || ''}`
+                  ? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
-                  : `${scope.opt.address || ''} ${scope.opt.subDistrict.name || ''} ${scope.opt.district.name || ''} ${scope.opt.province.name || ''}`
+                  : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
               }}
               {{ scope.opt.subDistrict?.zipCode || '' }}
               <q-tooltip v-if="scope.opt.customer && scope.opt.province">
-                {{ $t('customerEmployee.form.employerSelect.branchName') }}:
+                {{ $t('customerBranch.form.title') }}:
-                {{
+                {{ listBranch(scope.opt.codeCustomer) }}
-                  $i18n.locale === 'eng'
-                    ? scope.opt.customer.firstNameEN ||
-                      '-' + ' ' + scope.opt.customer.lastNameEN
-                    : scope.opt.customer.firstName ||
-                      '-' + ' ' + scope.opt.customer.lastName
-                }}
 
                 {{ $t('general.address') }}
                 {{
                   $i18n.locale === 'eng'
-                    ? `${scope.opt.addressEN || ''} ${scope.opt.subDistrict.nameEN || ''} ${scope.opt.district.nameEN || ''} ${scope.opt.province.nameEN || ''}`
+                    ? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
-                    : `${scope.opt.address || ''} ${scope.opt.subDistrict.name || ''} ${scope.opt.district.name || ''} ${scope.opt.province.name || ''}`
+                    : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
                 }}
-                {{ scope.opt.zipCode || '' }}
+                {{ scope.opt.subDistrict?.zipCode || '' }}
               </q-tooltip>
             </div>
           </div>

src/i18n/tha/index.ts

@@ -32,8 +32,8 @@ export default {
     order: 'ลำดับ',
     name: 'ชื่อ',
     fullName: 'ชื่อ-สกุล',
-    detail: 'รายละเอียด',
+    detail: 'รายละเอียด{msg}',
-    remark: 'หมายเหตุ',
+    remark: 'หมายเหตุ{msg}',
     createdAt: 'สร้างเมื่อ',
     noData: 'ไม่มีข้อมูล',
     noField: 'ไม่มีฟิลด์',
@@ -85,6 +85,9 @@ export default {
     noDataTable: 'ยังไม่มีข้อมูลแสดงในตารางนี้',
     birthDate: 'วันเกิด',
     amount: 'จำนวน {msg}',
+    numberOf: 'จำนวน{msg}',
+    list: 'รายการ{msg}',
+    for: 'เพื่อ{msg}',
   },
 
   menu: {
@@ -350,6 +353,7 @@ export default {
       issueDate: 'วันที่ออกหนังสือ',
       passportExpiryDate: 'วันหiมดอายุหนังสือเดินทาง',
 
+      ownerName: 'ชื่อเจ้าของ',
       firstName: 'ชื่อ ',
       lastName: 'นามสกุล ',
       firstNameEN: 'ชื่อ ภาษาอังกฤษ',
@@ -539,7 +543,7 @@ export default {
       name: 'ชื่อสินค้าและบริการ',
     },
     type: {
-      title: 'ปรเภทสินค้าและบริการ',
+      title: 'ประเภทสินค้าและบริการ',
       withName: 'ประเภท {name}',
       addTitle: 'เพิ่มประเภทสินค้าและบริการ',
       code: 'รหัสสินค้าและบริการ',
@@ -547,6 +551,7 @@ export default {
     },
     service: {
       title: 'ประเภท',
+      title2: 'บริการ',
       totalWork: 'งานทั้งหมด',
       code: 'รหัสประเภท',
       name: 'ชื่อประเภท',
@@ -629,6 +634,7 @@ export default {
     tax: 'ภาษี',
     calVat: 'คิดภาษี',
     allProduct: 'รายการสินค้าทั้งหมด',
+
     type: {
       all: 'ทั้งหมด',
       fullAmountCash: 'เงินสดเต็มจำนวน',

src/stores/customer/types.ts

@@ -76,6 +76,8 @@ export type CustomerBranch = {
   customerId: string;
   id: string;
 
+  customer: Customer;
+
   status: Status;
   createdBy: string | null;
   createdAt: string;