From 8ffb6f1dae43cc26bbaecf5d82ff98f6e6df49be Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 11 Apr 2024 17:03:50 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B9=82?=
 =?UTF-8?q?=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=81=E0=B8=B2=E0=B8=A3=20tab=20?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B1=E0=B8=81=E0=B8=A9=E0=B8=93=E0=B8=B0=E0=B9=82?=
 =?UTF-8?q?=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ProjectDetail.vue              | 281 +++++++++---------
 1 file changed, 148 insertions(+), 133 deletions(-)

diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index 9f28230a3..2d49fca57 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -150,155 +150,170 @@ onMounted(() => {
 
       <div class="col-12"><q-separator class="q-my-md" /></div>
 
-      <div class="col-12 text-bold">รูปแบบโครงการตามแผน</div>
+      <div class="row">
+        <div
+          :class="
+            store.projectStatus === 'FINISH'
+              ? 'col-6 q-col-gutter-sm'
+              : 'col-12 q-col-gutter-sm'
+          "
+        >
+          <div class="col-12 text-bold">รูปแบบโครงการตามแผน</div>
 
-      <div class="col-12 q-py-md">
-        <q-label class="q-mb-sm">เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
-        <q-option-group
-          :disable="store.projectStatus === 'FINISH'"
-          keep-color
-          color="primary"
-          dense
-          v-model="formData.developmentProjectTechniquePlanneds"
-          :options="projectTechniquesOp"
-          type="checkbox"
-          inline
-        />
-      </div>
-
-      <div class="row col-12 q-col-gutter-sm">
-        <div class="col-12 col-sm-2">
-          <q-checkbox
-            :disable="store.projectStatus === 'FINISH'"
-            keep-color
-            color="primary"
-            dense
-            value="GO_BLACK"
-            label="ไป-กลับ"
-            v-model="formData.isBackPlanned"
-          ></q-checkbox>
-        </div>
-        <div class="col-12 col-sm-3">
-          <q-input
-            :readonly="store.projectStatus === 'FINISH'"
-            dense
-            outlined
-            v-model="formData.projectDayBackPlanned"
-            label="จำนวน (วัน)"
-            mask="#"
-            reverse-fill-mask
-          />
-        </div>
-      </div>
-      <div class="row col-12 q-col-gutter-sm">
-        <div class="col-12 col-sm-2">
-          <q-checkbox
-            :disable="store.projectStatus === 'FINISH'"
-            keep-color
-            color="primary"
-            dense
-            value="HOLD"
-            label="พักค้าง"
-            v-model="formData.isHoldPlanned"
-          ></q-checkbox>
-        </div>
-        <div class="col-12 col-sm-3">
-          <q-input
-            :readonly="store.projectStatus === 'FINISH'"
-            dense
-            outlined
-            v-model="formData.projectDayHoldPlanned"
-            label="จำนวน (วัน)"
-            mask="#"
-            reverse-fill-mask
-          />
-        </div>
-        <div class="col-12 col-sm-3">
-          <q-input
-            :readonly="store.projectStatus === 'FINISH'"
-            dense
-            outlined
-            v-model="formData.projectNigthHoldPlanned"
-            label="จำนวน (คืน)"
-            mask="#"
-            reverse-fill-mask
-          />
-        </div>
-      </div>
-
-      <div class="q-col-gutter-sm" v-if="store.projectStatus === 'FINISH'">
-        <div class="col-12"><q-separator class="q-my-md" /></div>
-
-        <div class="col-12 text-bold">รูปแบบโครงการตามจริง</div>
-        <div class="col-12 q-py-md">
-          <q-label class="q-mb-sm">เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
-          <q-option-group
-            keep-color
-            color="primary"
-            dense
-            v-model="formData.developmentProjectTechniqueActuals"
-            :options="projectTechniquesOp"
-            type="checkbox"
-            inline
-          />
-        </div>
-
-        <div class="row col-12 q-col-gutter-sm">
-          <div class="col-12 col-sm-2">
-            <q-checkbox
+          <div class="col-12 q-py-md">
+            <q-label class="q-mb-sm">เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
+            <q-option-group
+              :disable="store.projectStatus === 'FINISH'"
               keep-color
               color="primary"
               dense
-              value="GO_BLACK"
-              label="ไป-กลับ"
-              v-model="formData.isBackActual"
-            ></q-checkbox>
-          </div>
-          <div class="col-12 col-sm-3">
-            <q-input
-              dense
-              outlined
-              v-model="formData.projectDayBackActual"
-              label="จำนวน (วัน)"
-              mask="#"
-              reverse-fill-mask
+              v-model="formData.developmentProjectTechniquePlanneds"
+              :options="projectTechniquesOp"
+              type="checkbox"
             />
           </div>
+
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-12 col-md-3">
+              <q-checkbox
+                :disable="store.projectStatus === 'FINISH'"
+                keep-color
+                color="primary"
+                dense
+                value="GO_BLACK"
+                label="ไป-กลับ"
+                v-model="formData.isBackPlanned"
+              ></q-checkbox>
+            </div>
+            <div class="col-12 col-md-4">
+              <q-input
+                :readonly="store.projectStatus === 'FINISH'"
+                dense
+                outlined
+                v-model="formData.projectDayBackPlanned"
+                label="จำนวน (วัน)"
+                mask="#"
+                reverse-fill-mask
+              />
+            </div>
+          </div>
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-12 col-md-3">
+              <q-checkbox
+                :disable="store.projectStatus === 'FINISH'"
+                keep-color
+                color="primary"
+                dense
+                value="HOLD"
+                label="พักค้าง"
+                v-model="formData.isHoldPlanned"
+              ></q-checkbox>
+            </div>
+            <div class="col-12 col-md-4">
+              <q-input
+                :readonly="store.projectStatus === 'FINISH'"
+                dense
+                outlined
+                v-model="formData.projectDayHoldPlanned"
+                label="จำนวน (วัน)"
+                mask="#"
+                reverse-fill-mask
+              />
+            </div>
+            <div class="col-12 col-md-4">
+              <q-input
+                :readonly="store.projectStatus === 'FINISH'"
+                dense
+                outlined
+                v-model="formData.projectNigthHoldPlanned"
+                label="จำนวน (คืน)"
+                mask="#"
+                reverse-fill-mask
+              />
+            </div>
+          </div>
         </div>
-        <div class="row col-12 q-col-gutter-sm">
-          <div class="col-12 col-sm-2">
-            <q-checkbox
+
+        <div
+          v-if="store.projectStatus === 'FINISH'"
+          class="col-6 q-col-gutter-sm"
+        >
+          <div class="col-12 text-bold">รูปแบบโครงการตามจริง</div>
+          <div class="col-12 q-py-md">
+            <q-label class="q-mb-sm">เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
+            <q-option-group
               keep-color
               color="primary"
               dense
-              value="HOLD"
-              label="พักค้าง"
-              v-model="formData.isHoldActual"
-            ></q-checkbox>
-          </div>
-          <div class="col-12 col-sm-3">
-            <q-input
-              dense
-              outlined
-              v-model="formData.projectDayHoldActual"
-              label="จำนวน (วัน)"
-              mask="#"
-              reverse-fill-mask
+              v-model="formData.developmentProjectTechniqueActuals"
+              :options="projectTechniquesOp"
+              type="checkbox"
             />
           </div>
-          <div class="col-12 col-sm-3">
-            <q-input
-              dense
-              outlined
-              v-model="formData.projectNigthHoldActual"
-              label="จำนวน (คืน)"
-              mask="#"
-              reverse-fill-mask
-            />
+
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-md-3">
+              <q-checkbox
+                keep-color
+                color="primary"
+                dense
+                value="GO_BLACK"
+                label="ไป-กลับ"
+                v-model="formData.isBackActual"
+              ></q-checkbox>
+            </div>
+            <div class="col-12 col-md-4">
+              <q-input
+                dense
+                outlined
+                v-model="formData.projectDayBackActual"
+                label="จำนวน (วัน)"
+                mask="#"
+                reverse-fill-mask
+              />
+            </div>
+          </div>
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-12 col-md-3">
+              <q-checkbox
+                keep-color
+                color="primary"
+                dense
+                value="HOLD"
+                label="พักค้าง"
+                v-model="formData.isHoldActual"
+              ></q-checkbox>
+            </div>
+            <div class="col-12 col-md-4">
+              <q-input
+                dense
+                outlined
+                v-model="formData.projectDayHoldActual"
+                label="จำนวน (วัน)"
+                mask="#"
+                reverse-fill-mask
+              />
+            </div>
+            <div class="col-12 col-md-4">
+              <q-input
+                dense
+                outlined
+                v-model="formData.projectNigthHoldActual"
+                label="จำนวน (คืน)"
+                mask="#"
+                reverse-fill-mask
+              />
+            </div>
           </div>
         </div>
       </div>
     </div>
+
+    <q-separator />
+    <div class="row">
+      <div class="col-6 q-pa-md">เลือกยุทธศาสตร์ 1</div>
+      <div class="col-6 q-pa-md">เลือกยุทธศาสตร์ 2</div>
+    </div>
     <q-separator />
     <div class="text-right q-pa-sm">
       <q-btn