refactor: edit layout work

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

@@ -50,7 +50,6 @@ function addData() {
   const canAdd = true;
   if (canAdd) {
     employeeWork.value?.push({
-      workEndDate: null,
       workPermitExpireDate: null,
       workPermitIssueDate: null,
       workPermitNo: '',
@@ -115,7 +114,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         name="mdi-briefcase-outline"
         style="background-color: var(--surface-3)"
       />
-      {{ $t(`customerEmployee.formWorkHistory.title`) }}
+      {{ $t(`customerEmployee.form.group.workHistory`) }}
       <AddButton
         v-if="currentIndex === -1 && !hideAction"
         id="btn-add-bank"
@@ -177,36 +176,18 @@ const workplaceFilter = selectFilterOptionRefMod(
           />
         </div>
       </span>
-      <q-select
+
+      <q-input
+        :for="`${prefixId}-input-owner-name`"
+        :dense="dense"
         outlined
-        clearable
+        :readonly="readonly || work.statusSave"
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
         hide-bottom-space
         class="col-6"
-        input-debounce="0"
+        :label="$t('customerEmployee.formWorkHistory.employerName')"
-        option-label="label"
+        v-model="work.ownerName"
-        option-value="value"
+      />
-        v-model="work.jobType"
+
-        :dense="dense"
-        :readonly="readonly || work.statusSave"
-        :options="jobTypeOptions"
-        :hide-dropdown-icon="readonly"
-        :for="`${prefixId}-select-job-type`"
-        :label="$t('customerEmployee.formWorkHistory.jobType')"
-        @filter="jobTypeFilter"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('general.noData') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
       <q-select
         outlined
         clearable
@@ -237,63 +218,7 @@ const workplaceFilter = selectFilterOptionRefMod(
           </q-item>
         </template>
       </q-select>
-      <q-input
-        :for="`${prefixId}-input-work-end-date`"
-        :label="$t('general.remark')"
-        :dense="dense"
-        outlined
-        :readonly="readonly || work.statusSave"
-        hide-bottom-space
-        class="col-12"
-        v-model="work.remark"
-        type="textarea"
-      />
-      <DatePicker
-        :label="$t('customerEmployee.formWorkHistory.workUntil')"
-        v-model="work.workEndDate"
-        class="col-3"
-        :id="`${prefixId}-input-work-until-date`"
-        :readonly="readonly || work.statusSave"
-        clearable
-      />
 
-      <q-input
-        :for="`${prefixId}-input-work-permit-no`"
-        :dense="dense"
-        outlined
-        :readonly="readonly || work.statusSave"
-        hide-bottom-space
-        class="col-6"
-        :label="$t('customerEmployee.formWorkHistory.permitNo')"
-        v-model="work.workPermitNo"
-      />
-      <DatePicker
-        :label="$t('customerEmployee.formWorkHistory.permitIssueDate')"
-        v-model="work.workPermitIssueDate"
-        class="col-3"
-        :id="`${prefixId}-date-picker-work-permit-issue-date`"
-        :readonly="readonly || work.statusSave"
-        clearable
-      />
-      <DatePicker
-        :label="$t('customerEmployee.formWorkHistory.permitExpireDate')"
-        v-model="work.workPermitExpireDate"
-        class="col-3"
-        :id="`${prefixId}-date-picker-work-permit-expire-date`"
-        :readonly="readonly || work.statusSave"
-        clearable
-      />
-
-      <q-input
-        :for="`${prefixId}-input-owner-name`"
-        :dense="dense"
-        outlined
-        :readonly="readonly || work.statusSave"
-        hide-bottom-space
-        class="col-5"
-        :label="$t('customerEmployee.formWorkHistory.employerName')"
-        v-model="work.ownerName"
-      />
       <q-select
         outlined
         clearable
@@ -303,7 +228,38 @@ const workplaceFilter = selectFilterOptionRefMod(
         map-options
         hide-selected
         hide-bottom-space
-        class="col-4"
+        class="col-6"
+        input-debounce="0"
+        option-label="label"
+        option-value="value"
+        v-model="work.jobType"
+        :dense="dense"
+        :readonly="readonly || work.statusSave"
+        :options="jobTypeOptions"
+        :hide-dropdown-icon="readonly"
+        :for="`${prefixId}-select-job-type`"
+        :label="$t('customerEmployee.formWorkHistory.jobType')"
+        @filter="jobTypeFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('general.noData') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        class="col-6"
         input-debounce="0"
         option-value="value"
         option-label="label"
@@ -324,6 +280,63 @@ const workplaceFilter = selectFilterOptionRefMod(
           </q-item>
         </template>
       </q-select>
+
+      <q-input
+        :for="`${prefixId}-input-owner-name`"
+        :dense="dense"
+        outlined
+        :readonly="readonly || work.statusSave"
+        hide-bottom-space
+        class="col-4"
+        :label="$t('customerEmployee.formWorkHistory.identityNo')"
+        v-model="work.identityNo"
+        mask="#############"
+        :rules="[
+          (val) =>
+            !val ||
+            (val.length === 13 && /^[0-9]+$/.test(val)) ||
+            $t('form.error.invalidCustomeMessage', {
+              msg: $t('form.error.requireLength', { msg: 13 }),
+            }),
+        ]"
+      />
+      <q-input
+        :for="`${prefixId}-input-owner-name`"
+        :dense="dense"
+        outlined
+        :readonly="readonly || work.statusSave"
+        hide-bottom-space
+        class="col-4"
+        :label="$t('customerEmployee.formWorkHistory.permitNo')"
+        v-model="work.workPermitNo"
+      />
+      <q-input
+        :for="`${prefixId}-input-owner-name`"
+        :dense="dense"
+        outlined
+        :readonly="readonly || work.statusSave"
+        hide-bottom-space
+        class="col-4"
+        :label="$t('customerEmployee.formWorkHistory.permitIssuedAt')"
+        v-model="work.workPermitIssueAt"
+      />
+
+      <DatePicker
+        :label="$t('customerEmployee.formWorkHistory.permitIssueDate')"
+        v-model="work.workPermitIssueDate"
+        class="col-3"
+        :id="`${prefixId}-date-picker-work-permit-issue-date`"
+        :readonly="readonly || work.statusSave"
+        clearable
+      />
+      <DatePicker
+        :label="$t('customerEmployee.formWorkHistory.permitExpireDate')"
+        v-model="work.workPermitExpireDate"
+        class="col-3"
+        :id="`${prefixId}-date-picker-work-permit-expire-date`"
+        :readonly="readonly || work.statusSave"
+        clearable
+      />
     </div>
   </div>
 </template>