refactor(04): empty value show '-'

src/components/04_product-service/BasicInfoProduct.vue

@@ -150,6 +150,7 @@ const branchFilter = selectFilterOptionRefMod(
         class="col-6"
         :label="$t('productName')"
         v-model="name"
+        :rules="[(val: string) => !!val]"
       />
       <q-input
         lazy-rules="ondemand"
@@ -190,7 +191,10 @@ const branchFilter = selectFilterOptionRefMod(
         >
           <q-editor
             dense
-            v-model="detail"
+            :model-value="readonly ? detail || '-' : detail"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (detail = v) : '')
+            "
             min-height="5rem"
             class="full-width q-mt-sm q-mb-xs"
             :flat="!readonly"
@@ -218,7 +222,8 @@ const branchFilter = selectFilterOptionRefMod(
         type="textarea"
         class="col-12"
         :label="$t('formDialogInputRemark')"
-        v-model="remark"
+        :model-value="readonly ? remark || '-' : remark"
+        @update:model-value="(v) => (typeof v === 'string' ? (remark = v) : '')"
       />
     </div>
   </div>

src/components/04_product-service/BasicInformation.vue

@@ -99,7 +99,8 @@ const serviceCodeFilter = selectFilterOptionRefMod(
         type="textarea"
         class="col-12"
         :label="$t('detail')"
-        v-model="detail"
+        :model-value="readonly ? detail || '-' : detail"
+        @update:model-value="(v) => (typeof v === 'string' ? (detail = v) : '')"
         :for="`input-detail`"
       />
       <q-input
@@ -111,13 +112,14 @@ const serviceCodeFilter = selectFilterOptionRefMod(
         type="textarea"
         class="col-12"
         :label="$t('formDialogInputRemark')"
-        v-model="remark"
+        :model-value="readonly ? remark || '-' : remark"
+        @update:model-value="(v) => (typeof v === 'string' ? (remark = v) : '')"
         :for="`input-remark`"
       />
     </div>
 
     <div v-if="service" class="col-12 row q-col-gutter-sm">
-      <q-select
+      <!-- <q-select
         outlined
         clearable
         use-input
@@ -149,8 +151,8 @@ const serviceCodeFilter = selectFilterOptionRefMod(
             </q-item-section>
           </q-item>
         </template>
-      </q-select>
-      <!-- <q-input
+      </q-select> -->
+      <q-input
         lazy-rules="ondemand"
         id="input-service-code"
         for="input-service-code"
@@ -163,7 +165,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
         :label="$t('serviceCode')"
         v-model="serviceCode"
         :rules="[(val: string) => !!val || $t('pleaseInformation')]"
-      /> -->
+      />
 
       <q-select
         outlined
@@ -229,7 +231,10 @@ const serviceCodeFilter = selectFilterOptionRefMod(
         type="textarea"
         class="col-12"
         :label="$t('detail')"
-        v-model="serviceDescription"
+        :model-value="readonly ? serviceDescription || '-' : serviceDescription"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (serviceDescription = v) : '')
+        "
       />
     </div>
   </div>