สิทธ์ ทดลองงาน

src/modules/05_placement/components/probation/FormAssign.vue

@@ -10,6 +10,7 @@ const $q = useQuasar();
 const isEdit = ref<boolean>(true);
 const router = useRouter();
 const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -1111,7 +1112,7 @@ onMounted(async () => {
         <div v-else class="col-12 row q-gutter-md">
           <div>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
           <q-btn
-            v-if="!isEdit"
+            v-if="!isEdit && !checkRoutePermisson"
             size="12px"
             flat
             dense
@@ -1147,6 +1148,7 @@ onMounted(async () => {
 
           <div v-if="!isEdit">
             <q-btn
+            v-if="!checkRoutePermisson"
               dense
               flat
               round
@@ -1160,6 +1162,7 @@ onMounted(async () => {
 
           <div v-else>
             <q-btn
+            v-if="!checkRoutePermisson"
               dense
               flat
               round
@@ -1171,6 +1174,7 @@ onMounted(async () => {
             </q-btn>
             <!-- @click="saveEdit(assignId)" -->
             <q-btn
+            v-if="!checkRoutePermisson"
               dense
               flat
               class="q-ml-md"

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue

@@ -35,6 +35,7 @@ const {
   dialogConfirm,
 } = mixin;
 const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
 const assignId = ref<string>(route.params.form.toString());
 const personalId = ref<string>(route.params.personalId.toString());
 const myForm = ref<any>(null);
@@ -430,6 +431,7 @@ onMounted(async () => {
         <div>แบบประเมินผล (คณะกรรมการ)</div>
         <div v-if="status == false">
           <q-btn
+            v-if="!checkRoutePermisson"
             dense
             flat
             round
@@ -442,10 +444,19 @@ onMounted(async () => {
         </div>
 
         <div v-else>
-          <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
+          <q-btn
+            v-if="!checkRoutePermisson"
+            dense
+            flat
+            round
+            color="red"
+            @click="cancel()"
+            icon="mdi-undo"
+          >
             <q-tooltip>ยกเลิก</q-tooltip>
           </q-btn>
           <q-btn
+            v-if="!checkRoutePermisson"
             dense
             class="q-ml-sm"
             flat

src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue

@@ -22,6 +22,7 @@ const {
   dialogMessageNotify,
 } = mixin;
 const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
 const assignId = ref<string>(route.params.form.toString());
 const personalId = ref<string>(route.params.personalId.toString());
 const action = ref<string>("add");
@@ -332,7 +333,7 @@ onMounted(() => {
               :locale="'th'"
               autoApply
               borderless
-              :readonly="!status"
+              :readonly="!status || checkRoutePermisson"
               :enableTimePicker="false"
               week-start="0"
             >
@@ -346,7 +347,7 @@ onMounted(() => {
                 <q-input
                   outlined
                   dense
-                  :disable="!status"
+                  :disable="!status || checkRoutePermisson"
                   class="full-width datepicker"
                   :model-value="
                     date_start != null ? date2Thai(date_start) : null
@@ -373,7 +374,7 @@ onMounted(() => {
               v-model="date_finish"
               :locale="'th'"
               autoApply
-              :readonly="!status"
+              :readonly="!status || checkRoutePermisson"
               borderless
               :enableTimePicker="false"
               week-start="0"
@@ -388,7 +389,7 @@ onMounted(() => {
                 <q-input
                   outlined
                   dense
-                  :disable="!status"
+                  :disable="!status || checkRoutePermisson"
                   class="full-width datepicker"
                   :model-value="
                     date_finish != null ? date2Thai(date_finish) : null
@@ -425,7 +426,7 @@ onMounted(() => {
               class="col-xs-12 col-sm-6"
               dense
               borderless
-              :disable="!status"
+              :disable="!status || checkRoutePermisson"
               emit-value
               map-options
               option-label="label"
@@ -454,7 +455,7 @@ onMounted(() => {
                 ]"
                 hide-bottom-space
                 :options="optionsResult"
-                :disable="!status"
+                :disable="!status || checkRoutePermisson"
                 dense
                 borderless
                 emit-value
@@ -497,7 +498,7 @@ onMounted(() => {
               dense
               borderless
               outlined
-              :disable="!status"
+              :disable="!status || checkRoutePermisson"
               class="bg-white"
               type="textarea"
               v-model="reson"
@@ -550,7 +551,7 @@ onMounted(() => {
                 menu-class-name="modalfix"
                 v-model="chairman_dated"
                 :locale="'th'"
-                :readonly="!status"
+                :readonly="!status || checkRoutePermisson"
                 autoApply
                 borderless
                 :enableTimePicker="false"
@@ -566,7 +567,7 @@ onMounted(() => {
                   <q-input
                     outlined
                     dense
-                    :disable="!status"
+                    :disable="!status || checkRoutePermisson"
                     class="full-width datepicker col-3"
                     :model-value="
                       chairman_dated != null ? date2Thai(chairman_dated) : null
@@ -612,7 +613,7 @@ onMounted(() => {
                 :locale="'th'"
                 autoApply
                 borderless
-                :readonly="!status"
+                :readonly="!status || checkRoutePermisson"
                 :enableTimePicker="false"
                 week-start="0"
               >
@@ -626,7 +627,7 @@ onMounted(() => {
                   <q-input
                     outlined
                     dense
-                    :disable="!status"
+                    :disable="!status || checkRoutePermisson"
                     class="full-width datepicker col-3"
                     :model-value="
                       director1_dated != null
@@ -675,7 +676,7 @@ onMounted(() => {
                 v-model="director2_dated"
                 :locale="'th'"
                 autoApply
-                :readonly="!status"
+                :readonly="!status || checkRoutePermisson"
                 borderless
                 :enableTimePicker="false"
                 week-start="0"
@@ -690,7 +691,7 @@ onMounted(() => {
                   <q-input
                     outlined
                     dense
-                    :disable="!status"
+                    :disable="!status || checkRoutePermisson"
                     class="full-width datepicker col-3"
                     :model-value="
                       director2_dated != null
@@ -717,7 +718,7 @@ onMounted(() => {
       </div>
     </q-form>
 
-    <q-toolbar class="text-primary" v-if="action == 'add'">
+    <q-toolbar class="text-primary" v-if="action == 'add' && !checkRoutePermisson">
       <q-space />
       <q-btn label="บันทึก" color="secondary" @click="savaForm" />
     </q-toolbar>

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue

@@ -12,9 +12,11 @@ import criterion from "@/modules/05_placement/components/Other/Criterion.vue";
 import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
 
 const router = useRouter();
+
 const routeName = router.currentRoute.value.name;
 const $q = useQuasar();
 const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
 const probationStore = useProbationDataStore();
 const { fecthAssignoutput, assign } = probationStore;
 
@@ -362,6 +364,7 @@ onMounted(async () => {
       <div>แบบบันทึกผล (ผู้ดูเเล)</div>
       <div v-if="status == false">
         <q-btn
+        v-if="!checkRoutePermisson"
           dense
           flat
           round
@@ -373,11 +376,12 @@ onMounted(async () => {
         </q-btn>
       </div>
       <div v-else>
-        <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
+        <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo" v-if="!checkRoutePermisson">
           <q-tooltip>ยกเลิก</q-tooltip>
         </q-btn>
         <q-btn
           dense
+          v-if="!checkRoutePermisson"
           flat
           round
           class="q-ml-md"

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue

@@ -17,6 +17,7 @@ const router = useRouter();
 const routeName = router.currentRoute.value.name;
 const $q = useQuasar();
 const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
 const probationStore = useProbationDataStore();
 const { fecthAssignoutput, assign } = probationStore;
 
@@ -373,6 +374,7 @@ onMounted(async () => {
       <div>แบบบันทึกผล (ผู้บังคับบัญชา)</div>
       <div v-if="status == false">
         <q-btn
+          v-if="!checkRoutePermisson"
           dense
           flat
           round
@@ -384,10 +386,19 @@ onMounted(async () => {
         </q-btn>
       </div>
       <div v-else>
-        <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
+        <q-btn
+          v-if="!checkRoutePermisson"
+          dense
+          flat
+          round
+          color="red"
+          @click="cancel()"
+          icon="mdi-undo"
+        >
           <q-tooltip>ยกเลิก</q-tooltip>
         </q-btn>
         <q-btn
+          v-if="!checkRoutePermisson"
           dense
           flat
           round
@@ -854,24 +865,24 @@ onMounted(async () => {
                   <q-item-label>{{ list.label }}</q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                <q-btn-group outline>
+                  <q-btn-group outline>
-                  <q-btn
+                    <q-btn
-                    v-for="(item, index) in 5"
+                      v-for="(item, index) in 5"
-                    :disable="!status"
+                      :disable="!status"
-                    :class="conduct_level[i] == item && 'active'"
+                      :class="conduct_level[i] == item && 'active'"
-                    outline
+                      outline
-                    color="grey-6"
+                      color="grey-6"
-                    :label="item"
+                      :label="item"
-                    @click="conduct_level[i] = item"
+                      @click="conduct_level[i] = item"
-                  >
+                    >
-                    <q-tooltip>
+                      <q-tooltip>
-                      <div class="text-body2">
+                        <div class="text-body2">
-                        <span>{{ optionText[index].label }}</span>
+                          <span>{{ optionText[index].label }}</span>
-                      </div>
+                        </div>
-                    </q-tooltip>
+                      </q-tooltip>
-                  </q-btn>
+                    </q-btn>
-                </q-btn-group>
+                  </q-btn-group>
-              </q-item-section>
+                </q-item-section>
               </q-item>
               <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
             </q-list>
@@ -894,24 +905,24 @@ onMounted(async () => {
                   <q-item-label>{{ list.label }}</q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                <q-btn-group outline>
+                  <q-btn-group outline>
-                  <q-btn
+                    <q-btn
-                    v-for="(item, index) in 5"
+                      v-for="(item, index) in 5"
-                    :disable="!status"
+                      :disable="!status"
-                    :class="moral_level[i] == item && 'active'"
+                      :class="moral_level[i] == item && 'active'"
-                    outline
+                      outline
-                    color="grey-6"
+                      color="grey-6"
-                    :label="item"
+                      :label="item"
-                    @click="moral_level[i] = item"
+                      @click="moral_level[i] = item"
-                  >
+                    >
-                    <q-tooltip>
+                      <q-tooltip>
-                      <div class="text-body2">
+                        <div class="text-body2">
-                        <span>{{ optionText[index].label }}</span>
+                          <span>{{ optionText[index].label }}</span>
-                      </div>
+                        </div>
-                    </q-tooltip>
+                      </q-tooltip>
-                  </q-btn>
+                    </q-btn>
-                </q-btn-group>
+                  </q-btn-group>
-              </q-item-section>
+                </q-item-section>
               </q-item>
               <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
             </q-list>
@@ -934,24 +945,24 @@ onMounted(async () => {
                   <q-item-label>{{ list.label }}</q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                <q-btn-group outline>
+                  <q-btn-group outline>
-                  <q-btn
+                    <q-btn
-                    v-for="(item, index) in 5"
+                      v-for="(item, index) in 5"
-                    :disable="!status"
+                      :disable="!status"
-                    :class="discipline_level[i] == item && 'active'"
+                      :class="discipline_level[i] == item && 'active'"
-                    outline
+                      outline
-                    color="grey-6"
+                      color="grey-6"
-                    :label="item"
+                      :label="item"
-                    @click="discipline_level[i] = item"
+                      @click="discipline_level[i] = item"
-                  >
+                    >
-                    <q-tooltip>
+                      <q-tooltip>
-                      <div class="text-body2">
+                        <div class="text-body2">
-                        <span>{{ optionText[index].label }}</span>
+                          <span>{{ optionText[index].label }}</span>
-                      </div>
+                        </div>
-                    </q-tooltip>
+                      </q-tooltip>
-                  </q-btn>
+                    </q-btn>
-                </q-btn-group>
+                  </q-btn-group>
-              </q-item-section>
+                </q-item-section>
               </q-item>
               <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
             </q-list>
@@ -997,24 +1008,24 @@ onMounted(async () => {
                   </q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                <q-btn-group outline>
+                  <q-btn-group outline>
-                  <q-btn
+                    <q-btn
-                    v-for="(item, index) in 5"
+                      v-for="(item, index) in 5"
-                    :disable="!status"
+                      :disable="!status"
-                    :class="behavio_orther.level == item && 'active'"
+                      :class="behavio_orther.level == item && 'active'"
-                    outline
+                      outline
-                    color="grey-6"
+                      color="grey-6"
-                    :label="item"
+                      :label="item"
-                    @click="behavio_orther.level = item"
+                      @click="behavio_orther.level = item"
-                  >
+                    >
-                    <q-tooltip>
+                      <q-tooltip>
-                      <div class="text-body2">
+                        <div class="text-body2">
-                        <span>{{ optionText[index].label }}</span>
+                          <span>{{ optionText[index].label }}</span>
-                      </div>
+                        </div>
-                    </q-tooltip>
+                      </q-tooltip>
-                  </q-btn>
+                    </q-btn>
-                </q-btn-group>
+                  </q-btn-group>
-              </q-item-section>
+                </q-item-section>
               </q-item>
             </q-list>
           </q-card>

src/modules/05_placement/components/probation/FormEvaluation/Header.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
+import { useRoute } from "vue-router";
 
 const tabHead = ref<string>("save1");
-
+const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
 /** รับค่ามาจากหน้าหลัก */
 const props = defineProps({
   FileDownload: {
@@ -29,22 +31,22 @@ const props = defineProps({
 });
 
 /** เรียกใช้ฟังชั่นจากหน้าหลัก */
-function downloadFile(type: string){
+function downloadFile(type: string) {
   props.FileDownload(type);
-};
+}
 
 watch(tabHead, () => {
   props.changeTab(tabHead.value);
 });
 
 /** ไปยัง step ต่อไป */
-function nextPage(){
+function nextPage() {
   if (props.loop !== undefined) {
     if (props.loop < 3) {
       props.addData();
     }
   }
-};
+}
 </script>
 
 <template>
@@ -99,7 +101,7 @@ function nextPage(){
           </q-tab>
         </q-tabs>
         <div>
-          <q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
+          <q-btn v-if="!checkRoutePermisson" color="blue" flat dense icon="mdi-plus" @click="nextPage">
             <q-tooltip> เพิ่ม </q-tooltip>
           </q-btn>
         </div>

src/modules/05_placement/components/probation/FormEvaluation/Template1.vue

@@ -22,6 +22,7 @@ const FormSaveResult = defineAsyncComponent(
 
 const router = useRouter();
 const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
 const $q = useQuasar();
 const probationStore = useProbationDataStore();
 const { fecthdataAssign } = probationStore;
@@ -169,6 +170,7 @@ onMounted(async () => {
   <div class="q-gutter-md" v-else-if="probationStore.tabs.length == 0">
     <div class="flex justify-center items-center q-my-md q-gutter-md">
       <q-btn
+      v-if="!checkRoutePermisson"
         outline
         color="primary"
         label="สร้างแบบบันทึกผล"

src/modules/05_placement/components/probation/FormEvaluation/Template1Commader.vue

@@ -22,6 +22,7 @@ const FormSaveResultCommader = defineAsyncComponent(
 
 const router = useRouter();
 const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
 const $q = useQuasar();
 const probationStore = useProbationDataStore();
 const { fecthdataAssign } = probationStore;
@@ -171,6 +172,7 @@ function addData() {
   <div class="q-gutter-md" v-else-if="probationStore.tabs.length == 0">
     <div class="flex justify-center items-center q-my-md q-gutter-md">
       <q-btn
+        v-if="!checkRoutePermisson"
         outline
         color="primary"
         label="สร้างแบบบันทึกผล"

src/modules/05_placement/components/probation/FormEvaluation/Template2.vue

@@ -22,6 +22,7 @@ const FormEvaluate = defineAsyncComponent(
 
 const router = useRouter();
 const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
 const mixin = useCounterMixin();
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = mixin;
@@ -156,7 +157,7 @@ function addData() {
 
   <div v-else class="q-gutter-md">
     <div class="flex justify-center items-center q-my-md q-gutter-md">
-      <q-btn outline color="primary" label="สร้างแบบประเมิน" @click="addData" />
+      <q-btn v-if="!checkRoutePermisson" outline color="primary" label="สร้างแบบประเมิน" @click="addData" />
     </div>
   </div>
 </template>

src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue

@@ -24,6 +24,7 @@ const FormEvaluateScore = defineAsyncComponent(
 
 const router = useRouter();
 const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
 const mixin = useCounterMixin();
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError, success } = mixin;
@@ -140,7 +141,7 @@ const changeTab = (tabVal: string) => {
 
   <div class="q-gutter-md" v-if="tabs.length === 0">
     <div class="flex justify-center items-center q-my-md q-gutter-md">
-      <q-btn outline color="primary" label="สร้างแบบประเมิน" @click="addData" />
+      <q-btn v-if="!checkRoutePermisson" outline color="primary" label="สร้างแบบประเมิน" @click="addData" />
     </div>
   </div>
 </template>

src/modules/05_placement/components/probation/MainDetail.vue

@@ -47,6 +47,7 @@ const SummarySurvey = defineAsyncComponent(
 
 const router = useRouter();
 const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
 const drawer = ref<boolean>(true);
 const activeTab = ref<string>("");
 const personalId = ref<string>(route.params.personalId.toString());
@@ -62,7 +63,7 @@ function changeTab(tab: string){
 
 /** ปุ่มกลับ */
 function clickBack(){
-  router.push(`/probation/detail/${personalId.value}`);
+  router.go(-1)
   DataStore.mainTab = "tab1";
 };
 

src/modules/05_placement/components/probation/MainProbation.vue

@@ -17,6 +17,7 @@ import router from "@/router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const rows = ref<FormMainProbation[]>([]);
@@ -505,8 +506,8 @@ onMounted(async () => {
 
             <div>
               <q-btn
+                v-if="checkPermission($route)?.attrIsCreate"
                 @click="onclickAddProbation"
-                size="12px"
                 flat
                 round
                 color="add"
@@ -575,17 +576,47 @@ onMounted(async () => {
         >
           <template v-slot:header="props">
             <q-tr :props="props">
+              <q-th auto-width></q-th>
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr
+            <q-tr :props="props">
-              :props="props"
+              <q-td auto-width>
-              class="cursor-pointer"
+                <q-btn
-              @click="router.push(`/probation/detail/${props.row.personal_id}`)"
+                  v-if="checkPermission($route)?.attrIsGet"
-            >
+                  flat
+                  dense
+                  round
+                  color="info"
+                  icon="mdi-eye"
+                  @click="
+                    router.push(
+                      `/probation/detail-view/${props.row.personal_id}`
+                    )
+                  "
+                >
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsGet &&
+                    checkPermission($route)?.attrIsUpdate
+                  "
+                  flat
+                  dense
+                  round
+                  color="edit"
+                  icon="edit"
+                  @click="
+                    router.push(`/probation/detail/${props.row.personal_id}`)
+                  "
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
                   {{ props.rowIndex + 1 }}

src/modules/05_placement/components/probation/ProbationDetail.vue

@@ -8,13 +8,14 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
+import { checkPermission } from "@/utils/permissions";
 
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 const router = useRouter();
 const route = useRoute();
 const personalId = ref<string>(route.params.id as string);
-
+const checkRoutePermisson = ref<boolean>(route.name == "probationDetailOnly");
 const $q = useQuasar(); //ใช้ noti quasar
 const rows = ref<FormProbationDetail[]>([]);
 const name = ref<string>("");
@@ -220,7 +221,11 @@ async function selectStatus() {
  * @param id personal id
  */
 function clickSelect(id: string) {
-  router.push(`${route.fullPath}/${id}`);
+  if (checkRoutePermisson.value) {
+    router.push(`/probation/detail-view/${personalId.value}/${id}`);
+  } else {
+    router.push(`/probation/detail/${personalId.value}/${id}`);
+  }
 }
 
 /** รีเซ็ตค่าในช่อง input */
@@ -335,6 +340,7 @@ onMounted(async () => {
             <div class="col-12 text-detail">
               <q-select
                 :disable="
+                  checkRoutePermisson ||
                   probation_status == 2 ||
                   probation_status == 3 ||
                   probation_status == 7 ||
@@ -361,8 +367,8 @@ onMounted(async () => {
       <div class="row col-12 q-col-gutter-sm">
         <div>
           <q-btn
+            v-if="!checkRoutePermisson"
             @click="router.push(`/probation/add/${personalId}`)"
-            size="12px"
             flat
             round
             color="add"
@@ -428,18 +434,46 @@ onMounted(async () => {
         >
           <template v-slot:header="props">
             <q-tr :props="props">
+              <q-th auto-width />
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
-              <q-th auto-width />
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr
+            <q-tr :props="props">
-              :props="props"
+              <q-td auto-width>
-              class="cursor-pointer"
+                <q-btn
-              @click="clickSelect(props.row.id)"
+                  v-if="checkPermission($route)?.attrIsGet"
-            >
+                  flat
+                  dense
+                  round
+                  color="info"
+                  icon="mdi-eye"
+                  @click="
+                    router.push(
+                      `/probation/detail-view/${personalId}/${props.row.id}`
+                    )
+                  "
+                >
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsGet &&
+                    checkPermission($route)?.attrIsUpdate &&
+                    !checkRoutePermisson
+                  "
+                  flat
+                  dense
+                  round
+                  color="edit"
+                  icon="edit"
+                  @click="clickSelect(props.row.id)"
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
                   {{ props.rowIndex + 1 }}
@@ -448,7 +482,6 @@ onMounted(async () => {
                   {{ col.value }}
                 </div>
               </q-td>
-              <q-td auto-width> </q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">

src/modules/05_placement/components/probation/SummaryScore.vue

@@ -20,7 +20,7 @@ const {
   dialogConfirm,
 } = mixin;
 const route = useRoute();
-
+const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
 const assignId = ref<string>(route.params.form.toString());
 const action = ref<string>("edit");
 const status = ref<boolean>(false);
@@ -266,7 +266,7 @@ onMounted(() => {
                 outlined
                 dense
                 type="number"
-                :disable="!status"
+                :disable="!status || checkRoutePermisson"
                 v-model="develop_orientation_score"
               />
             </div>
@@ -276,7 +276,7 @@ onMounted(() => {
                 outlined
                 dense
                 type="number"
-                :disable="!status"
+                :disable="!status || checkRoutePermisson"
                 v-model="develop_orientation_percent"
               />
             </div>
@@ -290,7 +290,7 @@ onMounted(() => {
                 dense
                 outlined
                 type="number"
-                :disable="!status"
+                :disable="!status || checkRoutePermisson"
                 v-model="develop_self_learning_score"
               />
             </div>
@@ -300,7 +300,7 @@ onMounted(() => {
                 outlined
                 dense
                 type="number"
-                :disable="!status"
+                :disable="!status || checkRoutePermisson"
                 v-model="develop_self_learning_percent"
               />
             </div>
@@ -314,7 +314,7 @@ onMounted(() => {
                 outlined
                 dense
                 type="number"
-                :disable="!status"
+                :disable="!status || checkRoutePermisson"
                 v-model="develop_training_seminar_score"
               />
             </div>
@@ -324,7 +324,7 @@ onMounted(() => {
                 outlined
                 dense
                 type="number"
-                :disable="!status"
+                :disable="!status || checkRoutePermisson"
                 v-model="develop_training_seminar_percent"
               />
             </div>
@@ -339,7 +339,7 @@ onMounted(() => {
                 outlined
                 dense
                 type="number"
-                :disable="!status"
+                :disable="!status || checkRoutePermisson"
                 v-model="develop_other_training_score"
               />
             </div>
@@ -349,7 +349,7 @@ onMounted(() => {
                 outlined
                 dense
                 type="number"
-                :disable="!status"
+                :disable="!status || checkRoutePermisson"
                 v-model="develop_other_training_percent"
               />
             </div>
@@ -386,7 +386,7 @@ onMounted(() => {
             option-value="value"
             map-options
             emit-value
-            :disable="!status"
+            :disable="!status || checkRoutePermisson"
           />
         </div>
       </div>
@@ -405,7 +405,7 @@ onMounted(() => {
           autogrow
           hide-bottom-space
           :row="3"
-          :disable="!status"
+          :disable="!status || checkRoutePermisson"
         />
       </div>
 
@@ -426,7 +426,7 @@ onMounted(() => {
                 option-value="value"
                 map-options
                 emit-value
-                :disable="!status"
+                :disable="!status || checkRoutePermisson"
               />
             </div>
           </div>
@@ -440,7 +440,7 @@ onMounted(() => {
                 v-model="evaluate_date"
                 :locale="'th'"
                 autoApply
-                :readonly="!status"
+                :readonly="!status || checkRoutePermisson"
                 borderless
                 :enableTimePicker="false"
                 week-start="0"
@@ -455,7 +455,7 @@ onMounted(() => {
                   <q-input
                     outlined
                     dense
-                    :disable="!status"
+                    :disable="!status || checkRoutePermisson"
                     class="full-width datepicker"
                     :model-value="
                       evaluate_date != null ? date2Thai(evaluate_date) : null

src/modules/05_placement/components/probation/SummarySurvey.vue

@@ -32,7 +32,7 @@ const {
   dialogConfirm,
 } = mixin;
 const route = useRoute();
-
+const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
 const assignId = ref<string>(route.params.form.toString());
 const action = ref<string>("edit");
 const status = ref<boolean>(true);
@@ -126,7 +126,7 @@ onMounted(() => {
       </div>
       <div class="col-12">
         <q-input
-          :disable="!status"
+          :disable="!status || checkRoutePermisson"
           label="ความคิดเห็น"
           class="bg-white"
           dense
@@ -146,7 +146,7 @@ onMounted(() => {
       </div>
       <div class="col-12">
         <q-input
-          :disable="!status"
+          :disable="!status || checkRoutePermisson"
           label="ความคิดเห็น"
           class="bg-white"
           dense
@@ -168,7 +168,7 @@ onMounted(() => {
         <q-btn-group outline>
           <q-btn
             v-for="(item, index) in 5"
-            :disable="!status"
+            :disable="!status || checkRoutePermisson"
             :class="
               answer3 == item && 'active'
             "
@@ -192,7 +192,7 @@ onMounted(() => {
     <criterion />
   </q-form>
   <!-- <Footer /> -->
-  <div class="row col-12">
+  <div class="row col-12" v-if="!checkRoutePermisson">
     <q-space />
     <q-btn label="บันทึก" color="secondary" @click="save" v-if="status" />
   </div>

src/modules/05_placement/router.ts

@@ -16,8 +16,13 @@ const mainProbation = () =>
 const probationDetail = () =>
   import("@/modules/05_placement/components/probation/ProbationDetail.vue");
 
+const probationDetailOnly = () =>
+  import("@/modules/05_placement/components/probation/ProbationDetail.vue");
+
 const probationFormEvaluation = () =>
   import("@/modules/05_placement/components/probation/MainDetail.vue");
+const probationFormEvaluationDetail = () =>
+  import("@/modules/05_placement/components/probation/MainDetail.vue");
 
 const probationWorkAdd = () =>
   import("@/modules/05_placement/components/probation/MainDetail.vue");
@@ -143,6 +148,16 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/probation/detail-view/:id",
+    name: "probationDetailOnly",
+    component: probationDetailOnly,
+    meta: {
+      Auth: true,
+      Key: "SYS_PROBATION",
+      Role: "STAFF",
+    },
+  },
   {
     path: "/probation/detail/:personalId/:form",
     name: "probationForm",
@@ -153,6 +168,16 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/probation/detail-view/:personalId/:form",
+    name: "probationFormDetail",
+    component: probationFormEvaluationDetail,
+    meta: {
+      Auth: true,
+      Key: "SYS_PROBATION",
+      Role: "STAFF",
+    },
+  },
   {
     path: "/probation/detail/addresult/:id/:form",
     name: "probationFormAddresult",