refactor(04): table order

src/pages/04_product-service/MainPage.vue

@@ -270,6 +270,12 @@ const hideStat = ref(false);
 
 const tbColumn = {
   groupAndType: [
+    {
+      name: 'branchLabelNo',
+      align: 'center',
+      label: 'orderNumber',
+      field: 'branchNo',
+    },
     {
       name: 'name',
       align: 'left',
@@ -297,6 +303,12 @@ const tbColumn = {
   ],
 
   product: [
+    {
+      name: 'branchLabelNo',
+      align: 'center',
+      label: 'orderNumber',
+      field: 'branchNo',
+    },
     { name: 'productName', align: 'left', label: 'productName', field: 'name' },
     {
       name: 'productDetail',
@@ -318,6 +330,12 @@ const tbColumn = {
     },
   ],
   service: [
+    {
+      name: 'branchLabelNo',
+      align: 'center',
+      label: 'orderNumber',
+      field: 'branchNo',
+    },
     { name: 'serviceName', align: 'left', label: 'serviceName', field: 'name' },
     {
       name: 'serviceDetail',
@@ -346,17 +364,31 @@ const tbColumn = {
 
 const tbControl = reactive({
   groupAndType: {
-    fieldDisplay: ['name', 'detail', 'formDialogInputRemark', 'createdAt'],
+    fieldDisplay: [
-    fieldSelected: ['name', 'detail', 'formDialogInputRemark', 'createdAt'],
+      { value: 'branchLabelNo', label: 'orderNumber' },
+      { value: 'name', label: 'name' },
+      { value: 'detail', label: 'detail' },
+      { value: 'formDialogInputRemark', label: 'formDialogInputRemark' },
+      { value: 'createdAt', label: 'createdAt' },
+    ],
+    fieldSelected: [
+      'branchLabelNo',
+      'name',
+      'detail',
+      'formDialogInputRemark',
+      'createdAt',
+    ],
   },
   product: {
     fieldDisplay: [
-      'productName',
+      { value: 'branchLabelNo', label: 'orderNumber' },
-      'productDetail',
+      { value: 'productName', label: 'productName' },
-      'productProcessingTime',
+      { value: 'productDetail', label: 'productDetail' },
-      'priceInformation',
+      { value: 'productProcessingTime', label: 'productProcessingTime' },
+      { value: 'priceInformation', label: 'priceInformation' },
     ],
     fieldSelected: [
+      'branchLabelNo',
       'productName',
       'productDetail',
       'productProcessingTime',
@@ -365,12 +397,14 @@ const tbControl = reactive({
   },
   service: {
     fieldDisplay: [
-      'serviceName',
+      { value: 'branchLabelNo', label: 'orderNumber' },
-      'serviceDetail',
+      { value: 'serviceName', label: 'serviceName' },
-      'serviceWorkTotal',
+      { value: 'serviceDetail', label: 'serviceDetail' },
-      'createdAt',
+      { value: 'serviceWorkTotal', label: 'serviceWorkTotal' },
+      { value: 'createdAt', label: 'createdAt' },
     ],
     fieldSelected: [
+      'branchLabelNo',
       'serviceName',
       'serviceDetail',
       'serviceWorkTotal',
@@ -1995,8 +2029,8 @@ watch(
                     for="select-field"
                     :options="
                       tbControl.groupAndType.fieldDisplay.map((x) => ({
-                        label: $t(x),
+                        label: $t(x.label),
-                        value: x,
+                        value: x.value,
                       }))
                     "
                     :hide-dropdown-icon="$q.screen.lt.sm"
@@ -2134,6 +2168,24 @@ watch(
                           }
                         "
                       >
+                        <q-td
+                          class="text-center"
+                          v-if="
+                            tbControl.groupAndType.fieldSelected.includes(
+                              'branchLabelNo',
+                            )
+                          "
+                        >
+                          {{
+                            productMode === 'type'
+                              ? (currentPageType - 1) * pageSizeType +
+                                props.rowIndex +
+                                1
+                              : (currentPageGroup - 1) * pageSizeGroup +
+                                props.rowIndex +
+                                1
+                          }}
+                        </q-td>
                         <q-td
                           v-if="
                             tbControl.groupAndType.fieldSelected.includes(
@@ -2698,8 +2750,8 @@ watch(
                         product: tbControl.product.fieldDisplay,
                         service: tbControl.service.fieldDisplay,
                       }[productAndServiceTab].map((x) => ({
-                        label: $t(x),
+                        label: $t(x.label),
-                        value: x,
+                        value: x.value,
                       }))
                     "
                     :display-value="$t('displayField')"
@@ -2883,11 +2935,40 @@ watch(
 
                     <template v-slot:body="props">
                       <q-tr
+                        :style="
+                          props.rowIndex % 2 !== 0
+                            ? $q.dark.isActive
+                              ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+                              : `background: #f9fafc`
+                            : ''
+                        "
                         :class="{
                           'app-text-muted': props.row.status === 'INACTIVE',
                         }"
                         :props="props"
                       >
+                        <q-td
+                          class="text-center"
+                          v-if="
+                            {
+                              product: tbControl.product.fieldSelected,
+
+                              service: tbControl.service.fieldSelected,
+                            }[productAndServiceTab].includes(
+                              {
+                                product: 'branchLabelNo',
+                                service: 'branchLabelNo',
+                              }[productAndServiceTab],
+                            )
+                          "
+                        >
+                          {{
+                            (currentPageServiceAndProduct - 1) *
+                              pageSizeServiceAndProduct +
+                            props.rowIndex +
+                            1
+                          }}
+                        </q-td>
                         <q-td
                           v-if="
                             {
@@ -4572,8 +4653,8 @@ watch(
     ref="refImageUpload"
     v-model:dialogState="imageDialog"
     v-model:file="profileFileImg"
-    v-model:image-url="profileUrl"
+    :hidden-footer="!infoProductEdit && !infoServiceEdit"
-    :hidden-footer="!infoProductEdit"
+    v-model:image-url="profileUrl as string"
     clearButton
     @save="handleImageUpload"
   >