From fad464a05170b9023364695b6d8c7e091c526cc4 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Tue, 20 Feb 2024 17:57:06 +0700
Subject: [PATCH] updated

---
 .../components/SalaryChart/DialogFormMain.vue | 494 +++++++++---------
 1 file changed, 257 insertions(+), 237 deletions(-)

diff --git a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue b/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
index 04bea5fbb..334adb2a2 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
+++ b/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
@@ -55,6 +55,7 @@ const formData = reactive({
   startDate: null, //วันที่มีผลบังคับใช้
   endDate: null, //วันที่สิ้นสุดบังคับใช้
   details: "", //คำอธิบาย
+  isSpecial: false
 });
 
 /** ตัวแปร ref สำหรับแสดง validate */
@@ -368,232 +369,265 @@ async function downloadFile(url: string, type: string, fileName: string) {
       <Header :tittle="title" :close="closeDialog" />
       <q-separator />
 
-      <q-card-section class="scroll" style="max-height: 70vh" >
+      <q-card-section class="scroll" style="max-height: 70vh">
         <div class="row col-12 q-col-gutter-sm">
-          <div class="col-xs-12 col-md-4">
-            <q-select
-              ref="salaryTypeRef"
-              dense
-              hide-bottom-space
-              outlined
-              option-label="name"
-              option-value="id"
-              emit-value
-              map-options
-              v-model="formData.salaryType"
-              :options="salaryTypeOption"
-              label="ประเภทผังบัญชีเงินเดือน"
-              :rules="[
-                (val) => !!val || 'กรุณาเลือกประเภทผังบัญชีเงินเดือน',
-              ]"
-              lazy-rules
-            />
+          <div class="col-md-9">
+            <div class="col-xs-12 col-md-3">
+              <q-card bordered style="border: 1px solid #d6dee1">
+                <div
+                  class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                >
+                  ข้อมูลผังบัญชีเงินเดือน
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="row col-12 q-col-gutter-sm q-pa-sm">
+                  <div class="col-xs-12 col-md-3">
+                    <q-select
+                      ref="salaryTypeRef"
+                      dense
+                      hide-bottom-space
+                      outlined
+                      option-label="name"
+                      option-value="id"
+                      emit-value
+                      map-options
+                      v-model="formData.salaryType"
+                      :options="salaryTypeOption"
+                      label="ประเภทผังบัญชีเงินเดือน"
+                      :rules="[
+                        (val) => !!val || 'กรุณาเลือกประเภทผังบัญชีเงินเดือน',
+                      ]"
+                      lazy-rules
+                    />
+                  </div>
+
+
+                  <div class="col-xs-12 col-md-3">
+                    <q-select
+                      ref="posTypeRef"
+                      dense
+                      hide-bottom-space
+                      outlined
+                      option-label="name"
+                      option-value="id"
+                      emit-value
+                      map-options
+                      v-model="formData.posTypeId"
+                      :options="salaryPosTypeOption"
+                      label="ประเภทตำแหน่ง/กลุ่ม"
+                      :rules="[
+                        (val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง/กลุ่ม',
+                      ]"
+                      lazy-rules
+                      @update:model-value="fetchPosLevel"
+                    />
+                  </div>
+
+                  <div class="col-xs-12 col-md-3">
+                    <q-select
+                      ref="posLevelRef"
+                      dense
+                      hide-bottom-space
+                      outlined
+                      option-label="name"
+                      option-value="id"
+                      emit-value
+                      map-options
+                      v-model="formData.posLevelId"
+                      :options="salaryPosLevelOption"
+                      label="ระดับ"
+                      :rules="[(val) => !!val || 'กรุณาเลือกระดับ']"
+                      lazy-rules
+                      :disable="formData.posTypeId === ''"
+                    />
+                  </div>
+
+                  <div class="col-xs-12 col-md-1">
+                    <q-checkbox size="md" v-model="formData.isSpecial" label="ฉ" />
+                  </div>
+
+                  <div
+                    class="col-xs-12 col-md-2"
+                    style="display: flex; justify-content: flex-start"
+                  >
+                    <q-toggle
+                      color="primary"
+                      label="สถานะการใช้งาน"
+                      v-model="formData.isActive"
+                    />
+                  </div>
+
+                  <div class="col-xs-12 col-md-4">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formData.date"
+                      :locale="'th'"
+                      autoApply
+                      borderless
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">
+                        {{ year + 543 }}
+                      </template>
+                      <template #year-overlay-value="{ value }">
+                        {{ parseInt(value + 543) }}
+                      </template>
+                      <template #trigger>
+                        <q-input
+                          ref="dateRef"
+                          outlined
+                          dense
+                          hide-bottom-space
+                          :model-value="
+                            formData.date != null
+                              ? date2Thai(formData.date)
+                              : null
+                          "
+                          label="ให้ไว ณ วันที่"
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณาเลือกวันที่ ให้ไว ณ วันที่'}`,
+                          ]"
+                          lazy-rules
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+
+                  <div class="col-xs-12 col-md-4">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formData.startDate"
+                      :locale="'th'"
+                      autoApply
+                      borderless
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="checkEndDate"
+                    >
+                      <template #year="{ year }">
+                        {{ year + 543 }}
+                      </template>
+                      <template #year-overlay-value="{ value }">
+                        {{ parseInt(value + 543) }}
+                      </template>
+                      <template #trigger>
+                        <q-input
+                          ref="startDateRef"
+                          outlined
+                          dense
+                          hide-bottom-space
+                          :model-value="
+                            formData.startDate != null
+                              ? date2Thai(formData.startDate)
+                              : null
+                          "
+                          label="วันที่มีผลบังคับใช้"
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้'}`,
+                          ]"
+                          lazy-rules
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+
+                  <div class="col-xs-12 col-md-4">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formData.endDate"
+                      :locale="'th'"
+                      autoApply
+                      borderless
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formData.startDate"
+                    >
+                      <template #year="{ year }">
+                        {{ year + 543 }}
+                      </template>
+                      <template #year-overlay-value="{ value }">
+                        {{ parseInt(value + 543) }}
+                      </template>
+                      <template #trigger>
+                        <q-input
+                          ref="endDateRef"
+                          outlined
+                          dense
+                          hide-bottom-space
+                          :model-value="
+                            formData.endDate != null
+                              ? date2Thai(formData.endDate)
+                              : null
+                          "
+                          label="วันที่สิ้นสุดบังคับใช้"
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณาเลือกวันที่สิ้นสุดบังคับใช้'}`,
+                          ]"
+                          lazy-rules
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+
+                  <div class="col-12">
+                    <q-input
+                      v-model="formData.details"
+                      outlined
+                      dense
+                      type="textarea"
+                      label="คำอธิบาย"
+                    />
+                  </div>
+                </div>
+
+                <q-separator />
+                <q-card-section class="text-right">
+                  <q-btn
+                    label="บันทึก"
+                    color="secondary"
+                    @click="onClickSubmit"
+                  >
+                    <q-tooltip>บันทึกข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-card-section>
+              </q-card>
+            </div>
           </div>
 
           <div class="col-xs-12 col-md-3">
-            <q-select
-              ref="posTypeRef"
-              dense
-              hide-bottom-space
-              outlined
-              option-label="name"
-              option-value="id"
-              emit-value
-              map-options
-              v-model="formData.posTypeId"
-              :options="salaryPosTypeOption"
-              label="ประเภทตำแหน่ง/กลุ่ม"
-              :rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง/กลุ่ม']"
-              lazy-rules
-              @update:model-value="fetchPosLevel"
-            />
-          </div>
-
-          <div class="col-xs-12 col-md-3">
-            <q-select
-              ref="posLevelRef"
-              dense
-              hide-bottom-space
-              outlined
-              option-label="name"
-              option-value="id"
-              emit-value
-              map-options
-              v-model="formData.posLevelId"
-              :options="salaryPosLevelOption"
-              label="ระดับ"
-              :rules="[(val) => !!val || 'กรุณาเลือกระดับ']"
-              lazy-rules
-              :disable="formData.posTypeId === ''"
-            />
-          </div>
-
-          <div
-            class="col-xs-12 col-md-2"
-            style="display: flex; justify-content: flex-end"
-          >
-            <q-toggle
-              color="primary"
-              label="สถานะการใช้งาน"
-              v-model="formData.isActive"
-            />
-          </div>
-
-          <div class="col-xs-12 col-md-4">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="formData.date"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="dateRef"
-                  outlined
-                  dense
-                  hide-bottom-space
-                  :model-value="
-                    formData.date != null ? date2Thai(formData.date) : null
-                  "
-                  label="ให้ไว ณ วันที่"
-                  :rules="[
-                    (val) =>
-                      !!val || `${'กรุณาเลือกวันที่ ให้ไว ณ วันที่'}`,
-                  ]"
-                  lazy-rules
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-
-          <div class="col-xs-12 col-md-4">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="formData.startDate"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              @update:model-value="checkEndDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="startDateRef"
-                  outlined
-                  dense
-                  hide-bottom-space
-                  :model-value="
-                    formData.startDate != null
-                      ? date2Thai(formData.startDate)
-                      : null
-                  "
-                  label="วันที่มีผลบังคับใช้"
-                  :rules="[
-                    (val) => !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้'}`,
-                  ]"
-                  lazy-rules
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-
-          <div class="col-xs-12 col-md-4">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="formData.endDate"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formData.startDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="endDateRef"
-                  outlined
-                  dense
-                  hide-bottom-space
-                  :model-value="
-                    formData.endDate != null
-                      ? date2Thai(formData.endDate)
-                      : null
-                  "
-                  label="วันที่สิ้นสุดบังคับใช้"
-                  :rules="[
-                    (val) =>
-                      !!val || `${'กรุณาเลือกวันที่สิ้นสุดบังคับใช้'}`,
-                  ]"
-                  lazy-rules
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-
-          <div class="col-12">
-            <q-input
-              v-model="formData.details"
-              outlined
-              dense
-              type="textarea"
-              label="คำอธิบาย"
-            />
-          </div>
-          
-          <div class="col-xs-12 col-md-12">
             <q-card bordered style="border: 1px solid #d6dee1">
-              <div
-                class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
-              >
+              <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
                 อัปโหลดเอกสารอ้างอิง
               </div>
               <div class="col-12"><q-separator /></div>
@@ -628,11 +662,7 @@ async function downloadFile(url: string, type: string, fileName: string) {
                 </div>
 
                 <div v-if="itemsDocument.length > 0" class="col-xs-12 row">
-                  <q-list
-                    class="full-width rounded-borders"
-                    bordered
-                    separator
-                  >
+                  <q-list class="full-width rounded-borders" bordered separator>
                     <q-item
                       v-for="file in itemsDocument"
                       :key="file.id"
@@ -674,23 +704,13 @@ async function downloadFile(url: string, type: string, fileName: string) {
                 </div>
 
                 <div class="col-12" v-else>
-                  <q-card class="q-pa-md" bordered>
-                    ไม่มีรายการเอกสาร
-                  </q-card>
+                  <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
                 </div>
               </div>
             </q-card>
           </div>
         </div>
       </q-card-section>
-      <q-separator/>
-      <q-card-section class="text-right">
-        <q-btn label="บันทึก" color="secondary" @click="onClickSubmit">
-          <q-tooltip>บันทึกข้อมูล</q-tooltip>
-        </q-btn>
-      </q-card-section>
-
-      
     </q-card>
   </q-dialog>
 </template>