From cfee4020ec728867b5059a3a868f3a7266265b17 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 5 Mar 2024 17:40:27 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9C=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=87=E0=B8=9A=E0=B8=B1=E0=B8=8D=E0=B8=8A=E0=B8=B5=E0=B9=80?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=94=E0=B8=B7=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/SalaryChart/DialogFormMain.vue | 16 ++++++++-
 .../components/SalaryChart/DialogUpload.vue   |  7 +++-
 src/modules/13_salary/views/salaryChart.vue   | 34 +++++++++++++------
 src/modules/13_salary/views/salaryRate.vue    | 15 +++++++-
 4 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue b/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
index 6f1c9ad3d..3564ba669 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
+++ b/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
@@ -19,6 +19,7 @@ import Header from "@/components/DialogHeader.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 
+const isReadonly = ref<boolean>(false)
 const $q = useQuasar();
 const {
   date2Thai,
@@ -144,6 +145,7 @@ async function fetchSalaryDetail(id: string) {
       formData.endDate = data.endDate;
       formData.details = data.details;
       formData.isSpecial = data.isSpecial;
+      isReadonly.value = data.isActive
     })
     .catch((err) => {
       messageError($q, err);
@@ -206,6 +208,7 @@ function clearFormData() {
   formData.details = "";
   documentFile.value = null;
   itemsDocument.value = [];
+  isReadonly.value = false
 }
 
 function onClickSubmit() {
@@ -283,17 +286,18 @@ function checkEndDate() {
 
 <template>
   <q-dialog v-model="modal" persistent>
+
     <q-card class="col-12" style="width: 80%">
       <form @submit.prevent.stop="onClickSubmit">
         <Header :tittle="title" :close="closeDialog" />
         <q-separator />
-
         <q-card-section class="scroll" style="max-height: 70vh">
           <div class="row col-12 q-col-gutter-sm">
             <div class="col-md-12">
               <div class="row col-12 q-col-gutter-sm">
                 <div class="col-xs-12 col-md-3">
                   <q-select
+                  :readonly="isReadonly"
                     ref="salaryTypeRef"
                     dense
                     hide-bottom-space
@@ -314,6 +318,7 @@ function checkEndDate() {
 
                 <div class="col-xs-12 col-md-3">
                   <q-select
+                  :readonly="isReadonly"
                     ref="posTypeRef"
                     dense
                     hide-bottom-space
@@ -333,6 +338,7 @@ function checkEndDate() {
 
                 <div class="col-xs-12 col-md-3">
                   <q-select
+                  :readonly="isReadonly"
                     ref="posLevelRef"
                     dense
                     hide-bottom-space
@@ -352,6 +358,7 @@ function checkEndDate() {
 
                 <div class="col-xs-12 col-md-1">
                   <q-checkbox
+                  :disable="isReadonly"
                     size="md"
                     v-model="formData.isSpecial"
                     label="ฉ"
@@ -378,6 +385,7 @@ function checkEndDate() {
                     borderless
                     :enableTimePicker="false"
                     week-start="0"
+                    :readonly="isReadonly"
                   >
                     <template #year="{ year }">
                       {{ year + 543 }}
@@ -387,6 +395,7 @@ function checkEndDate() {
                     </template>
                     <template #trigger>
                       <q-input
+                      :readonly="isReadonly"
                         ref="dateRef"
                         outlined
                         dense
@@ -417,6 +426,7 @@ function checkEndDate() {
 
                 <div class="col-xs-12 col-md-4">
                   <datepicker
+                  :readonly="isReadonly"
                     menu-class-name="modalfix"
                     v-model="formData.startDate"
                     :locale="'th'"
@@ -434,6 +444,7 @@ function checkEndDate() {
                     </template>
                     <template #trigger>
                       <q-input
+                      :readonly="isReadonly"
                         ref="startDateRef"
                         outlined
                         dense
@@ -464,6 +475,7 @@ function checkEndDate() {
 
                 <div class="col-xs-12 col-md-4">
                   <datepicker
+                  :readonly="isReadonly"
                     menu-class-name="modalfix"
                     v-model="formData.endDate"
                     :locale="'th'"
@@ -481,6 +493,7 @@ function checkEndDate() {
                     </template>
                     <template #trigger>
                       <q-input
+                      :readonly="isReadonly"
                         ref="endDateRef"
                         outlined
                         dense
@@ -511,6 +524,7 @@ function checkEndDate() {
 
                 <div class="col-12">
                   <q-input
+                  :readonly="isReadonly"
                     v-model="formData.details"
                     outlined
                     dense
diff --git a/src/modules/13_salary/components/SalaryChart/DialogUpload.vue b/src/modules/13_salary/components/SalaryChart/DialogUpload.vue
index dffb98a71..3b36fa0ac 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogUpload.vue
+++ b/src/modules/13_salary/components/SalaryChart/DialogUpload.vue
@@ -34,6 +34,10 @@ const props = defineProps({
     type: String,
     defult: '',
   },
+  isActive: {
+    type: Boolean,
+    defult: false,
+  },
   fetchData: {
     type: Function,
     defult: () => {},
@@ -283,7 +287,6 @@ async function downloadFile(url: string, type: string, fileName: string) {
     <q-card class="col-12" style="width: 80%">
       <Header :tittle="`อัปโหลดเอกสารอ้างอิง`" :close="closeDialog" />
       <q-separator />
-
       <q-card-section class="scroll" style="max-height: 70vh">
         <div class="row col-12 q-col-gutter-sm">
           <div class="col-md-12">
@@ -293,6 +296,7 @@ async function downloadFile(url: string, type: string, fileName: string) {
 
                 <div class="row col-12 q-col-gutter-y-sm">
                   <div class="col-12 row">
+                    <div v-if="!props.isActive" class="full-width">
                     <q-file
                       v-if="props.typeAction === 'edit'"
                       class="col-12"
@@ -320,6 +324,7 @@ async function downloadFile(url: string, type: string, fileName: string) {
                       </template>
                     </q-file>
                   </div>
+                  </div>
 
                   <div v-if="itemsDocument.length > 0" class="col-xs-12 row">
                     <q-list
diff --git a/src/modules/13_salary/views/salaryChart.vue b/src/modules/13_salary/views/salaryChart.vue
index 0baa78b90..50bfb37b4 100644
--- a/src/modules/13_salary/views/salaryChart.vue
+++ b/src/modules/13_salary/views/salaryChart.vue
@@ -15,11 +15,11 @@ import type { Salary } from "@/modules/13_salary/interface/response/Main";
 import type { FormQuerySalary } from "@/modules/13_salary/interface/request/Main";
 import DialogFormUpload from '@/modules/13_salary/components/SalaryChart/DialogUpload.vue'
 import DialogFormMain from "@/modules/13_salary/components/SalaryChart/DialogFormMain.vue";
-
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
+const isActive = ref<boolean>(false)
 const $q = useQuasar();
 const router = useRouter();
 const {
@@ -119,12 +119,6 @@ const itemMenu = ref<ItemsMenu[]>([
     color: "blue-6",
     type: "copy",
   },
-  {
-    label: "ลบ",
-    icon: "delete",
-    color: "red",
-    type: "delete",
-  },
 ]);
 
 /** queryString*/
@@ -214,10 +208,11 @@ async function onClickDelete(id: string) {
   });
 }
 
-async function onClickUpload(type: string,id: string) {
+async function onClickUpload(type: string,id: string,active:boolean) {
   modalUpload.value = true
   typeAction.value = type;
   rowId.value = id
+  isActive.value = active
 }
 
 onMounted(async () => {
@@ -349,11 +344,9 @@ async function filterFn(page: number) {
                           : item.type === 'salaryRate'
                           ? onClickSalaryRate(props.row.id)
                           : item.type === 'upload'
-                          ? onClickUpload('edit',props.row.id)
+                          ? onClickUpload('edit',props.row.id,props.row.isActive)
                           : item.type === 'copy'
                           ? onClickCoppy(props.row.id)
-                          : item.type === 'delete'
-                          ? onClickDelete(props.row.id)
                           : null
                       "
                     >
@@ -368,6 +361,23 @@ async function filterFn(page: number) {
                         </div>
                       </q-item-section>
                     </q-item>
+                    <q-item
+                      v-if="props.row.isActive == false"
+                      clickable
+                      v-close-popup
+                      @click.stop="onClickDelete(props.row.id)"
+                    >
+                      <q-item-section>
+                        <div class="row items-center">
+                          <q-icon
+                            color="red"
+                            size="17px"
+                            name="delete"
+                          />
+                          <div class="q-pl-md">ลบ</div>
+                        </div>
+                      </q-item-section>
+                    </q-item>
                   </q-list>
                 </q-menu>
               </q-btn>
@@ -402,7 +412,9 @@ async function filterFn(page: number) {
     :typeAction="typeAction"
     :id="rowId"
     :fetchData="fetchListSalaly"
+    :isActive="isActive"
   />
+
 </template>
 
 <style scoped></style>
diff --git a/src/modules/13_salary/views/salaryRate.vue b/src/modules/13_salary/views/salaryRate.vue
index 375ec6d3a..6872de4d9 100644
--- a/src/modules/13_salary/views/salaryRate.vue
+++ b/src/modules/13_salary/views/salaryRate.vue
@@ -33,6 +33,7 @@ const {
   hideLoader,
 } = useCounterMixin();
 
+const isActive = ref<boolean>(false)
 const salaryId = ref<string>(route.params.id.toString());
 
 /** modalDialog*/
@@ -201,7 +202,17 @@ function clickDownload() {
       hideLoader();
     });
 }
+function fetchList(){
+  http
+  .get(config.API.salaryChartByid(salaryId.value))
+  .then((res)=>{
+    isActive.value = res.data.result.isActive
+  })
+  .catch((e)=>{})
+  .finally(()=>{})
+}
 onMounted(async () => {
+  await fetchList();
   await fetchListSalalyRate();
 });
 
@@ -229,6 +240,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
   <q-card flat bordered class="q-pa-md">
     <div class="col-12 row">
       <q-btn
+      v-if="!isActive"
         flat
         round
         dense
@@ -273,7 +285,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="props.row.isNext === true ? 'text-info':''">
               <div v-if="col.name == 'no'">
                 {{
                   (formQuery.page - 1) * formQuery.pageSize + props.rowIndex + 1
@@ -323,6 +335,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
             </q-td>
             <q-td>
               <q-btn
+              v-if="!isActive"
                 flat
                 dense
                 icon="mdi-dots-vertical"