ui รายละเอียดเรื่องลาออก

src/modules/03_retire/views/addRetire.vue

@@ -86,7 +86,7 @@ async function onSubmit() {
 
       const formData = new FormData();
       formData.append("Location", tranferOrg.value);
-      formData.append("SendDate", dateToISO(dateCommand.value));
+      // formData.append("SendDate", dateToISO(dateCommand.value));
       formData.append(
         "ActiveDate",
         dateLeave.value !== null ? dateToISO(dateLeave.value) : ""
@@ -186,6 +186,7 @@ onMounted(() => {
         <div v-if="routeName == 'AddRetire'">เพิ่มเรื่องลาออก</div>
         <div v-else>รายละเอียดเรื่องลาออก</div>
       </div>
+
       <q-form
         ref="myform"
         class="col-12"
@@ -194,14 +195,32 @@ onMounted(() => {
         @validation-success="onSubmit"
       >
         <q-card bordered>
-          <div class="col-12 row q-col-gutter-sm q-pa-md">
+          <q-card-actions align="right" v-if="routeName !== 'AddRetire'">
-            <div class="col-xs-12 col-sm-12">
+            <q-btn
-              <div class="col-12 row q-col-gutter-sm">
+              v-if="
+                dataDetail.status !== 'DELETE' &&
+                dataDetail.status !== 'CANCEL' &&
+                dataDetail.status !== 'DONECANCEL' &&
+                dataDetail.status !== 'DONEREJECT' &&
+                checkCancleLeave
+              "
+              unelevated
+              color="orange"
+              label="ยกเลิกการลาออก"
+              @click="cancelResing"
+              :disable="tranferOrg == '' && noteReason == ''"
+            />
+          </q-card-actions>
+
+          <div
+            class="col-12 row q-col-gutter-sm q-pa-md"
+            style="padding-top: 0px"
+          >
             <q-input
               :class="
                 routeName !== 'AddRetire'
-                      ? 'col-md-8 col-xs-12'
+                  ? 'col-md-9 col-xs-12'
-                      : 'col-md-8 col-xs-12 inputgreen'
+                  : 'col-md-9 col-xs-12 inputgreen'
               "
               class=""
               dense
@@ -213,7 +232,7 @@ onMounted(() => {
               :rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
             />
 
-                <datepicker
+            <!-- <datepicker
                     :class="
                       routeName !== 'AddRetire'
                         ? 'col-md-2 col-xs-12'
@@ -260,12 +279,13 @@ onMounted(() => {
                         </template>
                       </q-input>
                     </template>
-                </datepicker>
+                  </datepicker> -->
+
             <datepicker
               :class="
                 routeName !== 'AddRetire'
-                      ? 'col-md-2 col-xs-12'
+                  ? 'col-md-3 col-xs-12'
-                      : 'col-md-2 col-xs-12 inputgreen'
+                  : 'col-md-3 col-xs-12 inputgreen'
               "
               menu-class-name="modalfix"
               v-model="dateLeave"
@@ -289,9 +309,7 @@ onMounted(() => {
                   hide-bottom-space
                   :readonly="routeName != 'AddRetire'"
                   class="full-width"
-                      :model-value="
+                  :model-value="dateLeave != null ? date2Thai(dateLeave) : null"
-                        dateLeave != null ? date2Thai(dateLeave) : null
-                      "
                   :label="`${'วันที่ขอลาออกจากราชการ'}`"
                   :rules="[
                           (val: string) =>
@@ -309,6 +327,7 @@ onMounted(() => {
                 </q-input>
               </template>
             </datepicker>
+
             <q-input
               :class="
                 routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
@@ -341,6 +360,7 @@ onMounted(() => {
                   <q-icon name="attach_file" /> </template
               ></q-file>
             </div>
+
             <div class="col-12 row" v-if="routeName != 'AddRetire'">
               <q-card bordered flat class="row col-12 text-dark q-mt-sm">
                 <div
@@ -351,11 +371,7 @@ onMounted(() => {
                   </div>
                 </div>
                 <q-list class="col-12">
-                      <q-item
+                  <q-item v-for="file in files" :key="file.key" class="q-my-xs">
-                        v-for="file in files"
-                        :key="file.key"
-                        class="q-my-xs"
-                      >
                     <q-item-section>
                       <q-item-label class="full-width ellipsis">
                         {{ file.fileName }}
@@ -403,9 +419,7 @@ onMounted(() => {
                       </div>
                     </div>
                     <div class="col-xs-6 row items-start">
-                          <div class="col-12 text-top">
+                      <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
-                            วันสุดท้ายที่ยับยั้ง
-                          </div>
                       <div class="col-12 text-detail">
                         {{
                           dataDetail.officerRejectDate !== null
@@ -415,9 +429,7 @@ onMounted(() => {
                       </div>
                     </div>
                     <div class="col-xs-12 row items-start">
-                          <div class="col-12 text-top">
+                      <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-                            ความคิดเห็นและเหตุผล
-                          </div>
                       <div
                         class="col-12 text-detail"
                         v-if="dataDetail.officerReject === false"
@@ -467,9 +479,7 @@ onMounted(() => {
                       </div>
                     </div>
                     <div class="col-xs-6 row items-start">
-                          <div class="col-12 text-top">
+                      <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
-                            วันสุดท้ายที่ยับยั้ง
-                          </div>
                       <div class="col-12 text-detail">
                         {{
                           dataDetail.commanderRejectDate !== null
@@ -479,9 +489,7 @@ onMounted(() => {
                       </div>
                     </div>
                     <div class="col-xs-12 row items-start">
-                          <div class="col-12 text-top">
+                      <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-                            ความคิดเห็นและเหตุผล
-                          </div>
                       <div
                         class="col-12 text-detail"
                         v-if="dataDetail.commanderReject === false"
@@ -531,9 +539,7 @@ onMounted(() => {
                       </div>
                     </div>
                     <div class="col-xs-6 row items-start">
-                          <div class="col-12 text-top">
+                      <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
-                            วันสุดท้ายที่ยับยั้ง
-                          </div>
                       <div class="col-12 text-detail">
                         {{
                           dataDetail.oligarchRejectDate !== null
@@ -543,9 +549,7 @@ onMounted(() => {
                       </div>
                     </div>
                     <div class="col-xs-12 row items-start">
-                          <div class="col-12 text-top">
+                      <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-                            ความคิดเห็นและเหตุผล
-                          </div>
                       <div
                         class="col-12 text-detail"
                         v-if="dataDetail.oligarchReject == false"
@@ -571,36 +575,8 @@ onMounted(() => {
                 </div>
               </q-card>
             </div>
-
-                <div class="col-12 row" v-if="routeName != 'AddRetire'">
-                  <Workflow :id="id" sys-name="RETIREMENT_RESIFNATION" />
-                </div>
-              </div>
-            </div>
           </div>
 
-          <q-separator v-if="routeName !== 'AddRetire'" />
-          <q-card-actions
-            align="right"
-            v-if="routeName !== 'AddRetire'"
-            class="q-px-md"
-          >
-            <q-btn
-              v-if="
-                dataDetail.status !== 'DELETE' &&
-                dataDetail.status !== 'CANCEL' &&
-                dataDetail.status !== 'DONECANCEL' &&
-                dataDetail.status !== 'DONEREJECT' &&
-                checkCancleLeave
-              "
-              unelevated
-              class="q-px-md items-center"
-              color="orange"
-              label="ยกเลิกการลาออก"
-              @click="cancelResing"
-              :disable="tranferOrg == '' && noteReason == ''"
-            />
-          </q-card-actions>
           <q-separator v-if="routeName == 'AddRetire'" />
           <q-card-actions
             align="right"
@@ -618,6 +594,10 @@ onMounted(() => {
           </q-card-actions>
         </q-card>
       </q-form>
+
+      <div class="col-12 row q-mt-sm" v-if="routeName != 'AddRetire'">
+        <Workflow :id="id" sys-name="RETIREMENT_RESIFNATION" />
+      </div>
     </div>
   </div>