diff --git a/src/components/04_product-service/PriceDataComponent.vue b/src/components/04_product-service/PriceDataComponent.vue
index 7d5130ac..ed4235ed 100644
--- a/src/components/04_product-service/PriceDataComponent.vue
+++ b/src/components/04_product-service/PriceDataComponent.vue
@@ -1,9 +1,16 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+import { commaInput } from 'stores/utils';
+
 const serviceCharge = defineModel<number>('serviceCharge');
 const agentPrice = defineModel<number>('agentPrice');
 const price = defineModel<number>('price');
 const vatIncluded = defineModel<boolean>('vatIncluded');
 
+const price4Show = ref('');
+const agentPrice4Show = ref('');
+const serviceCharge4Show = ref('');
+
 withDefaults(
   defineProps<{
     dense?: boolean;
@@ -83,9 +90,19 @@ withDefaults(
         :borderless="readonly"
         hide-bottom-space
         class="col-4"
-        type="number"
         :label="$t('productService.product.salePrice')"
-        v-model="price"
+        :model-value="commaInput(price?.toString() || '0')"
+        @update:model-value="
+          (v) => {
+            if (typeof v === 'string') price4Show = commaInput(v);
+            const x = parseInt(
+              price4Show && typeof price4Show === 'string'
+                ? price4Show.replace(/,/g, '')
+                : '',
+            );
+            price = x;
+          }
+        "
       />
 
       <q-input
@@ -98,9 +115,19 @@ withDefaults(
         :borderless="readonly"
         hide-bottom-space
         class="col-4"
-        type="number"
         :label="$t('productService.product.agentPrice')"
-        v-model="agentPrice"
+        :model-value="commaInput(agentPrice?.toString() || '0')"
+        @update:model-value="
+          (v) => {
+            if (typeof v === 'string') agentPrice4Show = commaInput(v);
+            const x = parseInt(
+              agentPrice4Show && typeof agentPrice4Show === 'string'
+                ? agentPrice4Show.replace(/,/g, '')
+                : '',
+            );
+            agentPrice = x;
+          }
+        "
       />
 
       <q-input
@@ -113,9 +140,19 @@ withDefaults(
         :borderless="readonly"
         hide-bottom-space
         class="col-4"
-        type="number"
         :label="$t('productService.product.processingPrice')"
-        v-model="serviceCharge"
+        :model-value="commaInput(serviceCharge?.toString() || '0')"
+        @update:model-value="
+          (v) => {
+            if (typeof v === 'string') serviceCharge4Show = commaInput(v);
+            const x = parseInt(
+              serviceCharge4Show && typeof serviceCharge4Show === 'string'
+                ? serviceCharge4Show.replace(/,/g, '')
+                : '',
+            );
+            serviceCharge = x;
+          }
+        "
       />
     </div>
   </div>
diff --git a/src/stores/utils/index.ts b/src/stores/utils/index.ts
index d4f687fd..ccc5d405 100644
--- a/src/stores/utils/index.ts
+++ b/src/stores/utils/index.ts
@@ -416,7 +416,8 @@ export async function waitAll<T extends Promise<any>[]>(arr: T) {
 }
 
 export function commaInput(text: string): string {
-  if (typeof text !== 'string') return '';
+  if (typeof text !== 'string') return '0';
+  if (!text) return '0';
   const num = text.replace(/,/gi, '');
   const numF = num.split(/(?=(?:\d{3})+$)/).join(',');