From 03bd77a2220d5360a9679576736883e14dd08d88 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 19 Jun 2024 13:50:45 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20layout=20?=
 =?UTF-8?q?=E0=B9=83=E0=B8=AB=E0=B8=A1=E0=B9=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_product-service/ฺBasicInfoProduct.vue   | 45 +++++++++++++------
 1 file changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/components/04_product-service/ฺBasicInfoProduct.vue b/src/components/04_product-service/ฺBasicInfoProduct.vue
index be3197bd..05ef517e 100644
--- a/src/components/04_product-service/ฺBasicInfoProduct.vue
+++ b/src/components/04_product-service/ฺBasicInfoProduct.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const remark = defineModel<string>('remark');
+const remark = defineModel<string>('remark', { default: '' });
 const detail = defineModel<string>('detail');
 const process = defineModel<number>('process');
 const name = defineModel<string>('name');
@@ -57,18 +57,31 @@ defineProps<{
         v-model="detail"
       />
 
-      <q-input
-        for="input-remark"
-        :dense="dense"
-        :outlined="!readonly"
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
-        type="textarea"
-        class="col-12"
-        :label="$t('detail')"
-        v-model="remark"
-      />
+      <div class="col-12" v-if="readonly">
+        <div style="padding-top: 12px">
+          <text style="padding-left: 12px; color: rgba(0, 0, 0, 0.6)">
+            {{ $t('detail') }}
+          </text>
+
+          <q-card-section v-html="remark" />
+        </div>
+      </div>
+
+      <div class="col-12" v-else>
+        <div class="bordered rounded" style="padding-top: 12px">
+          <text style="padding-left: 12px; color: rgba(0, 0, 0, 0.6)">
+            {{ $t('detail') }}
+          </text>
+
+          <q-editor
+            dense
+            class="rounded surface-2"
+            v-model="remark"
+            min-height="5rem"
+            style="border: none"
+          />
+        </div>
+      </div>
 
       <q-input
         for="input-process"
@@ -91,4 +104,8 @@ defineProps<{
   />
 </template>
 
-<style scoped></style>
+<style scoped>
+.q-editor__toolbar {
+  border-bottom: none !important;
+}
+</style>