no message

src/modules/08_KPI/views/form.vue

@@ -9,14 +9,27 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import DialogHeader from "@/components/DialogHeader.vue";
 import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
+import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
 
+const modalEdit = ref<boolean>(false);
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
 const store = useKpiDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError } = mixin;
+const { showLoader, hideLoader, messageError, dialogConfirm } = mixin;
+
+const evaluatorIdOp = ref<DataOptions[]>([]);
+const commanderIdOp = ref<DataOptions[]>([]);
+const commanderHighOp = ref<DataOptions[]>([]);
+
+const formEva = reactive({
+  evaluatorId: "",
+  commanderId: "",
+  commanderHighId: "",
+});
 
 const formProfile = reactive<FormProfile>({
   fullName: "",
@@ -41,6 +54,7 @@ function fetchEvaluation() {
       formProfile.status = store.convertStatus(data.evaluationStatus);
       formProfile.result = store.convertResults(data.evaluationResults);
       fetchProfile(data.profileId);
+      console.log(store.dataEvaluation)
     })
     .catch((e) => {
       messageError($q, e);
@@ -93,6 +107,23 @@ async function fetchProfile(id: string) {
 /** save */
 function onSave() {}
 
+function close() {
+  modalEdit.value = false;
+}
+
+function clearDialog() {
+  modalEdit.value = false;
+  formEva.evaluatorId = "";
+  formEva.commanderId = "";
+  formEva.commanderHighId = "";
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    clearDialog();
+  });
+}
+
 onMounted(() => {
   fetchEvaluation();
   getProfile();
@@ -138,6 +169,17 @@ onMounted(() => {
                   }}</span>
                   <q-space />
                   <div class="q-gutter-x-sm">
+                    <q-btn
+                      unelevated
+                      round
+                      icon="edit"
+                      color="grey-2"
+                      text-color="edit"
+                      size="md"
+                      @click="modalEdit = true"
+                    >
+                      <q-tooltip>แก้ไขผู้ประเมิน</q-tooltip>
+                    </q-btn>
                     <q-btn
                       unelevated
                       round
@@ -226,6 +268,80 @@ onMounted(() => {
       </div>
     </div>
   </div>
+
+  <q-dialog v-model="modalEdit" persistent>
+    <q-card bordered style="width: 50vh">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader tittle="แก้ไขผู้ประเมิน" :close="close" />
+        <q-separator />
+        <q-card-section>
+          <div class="column q-gutter-sm">
+            <q-select
+              v-model="formEva.evaluatorId"
+              outlined
+              label="ผู้ประเมิน"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="evaluatorIdOp"
+              emit-value
+              map-options
+              hide-bottom-space
+              lazy-rules
+              :rules="[
+                  (val:string) =>
+                    !!val || `${'กรุณาเลือกผู้ประเมิน'}`,
+                ]"
+            />
+            <q-select
+              v-model="formEva.commanderId"
+              outlined
+              label="ผู้บังคับบัญชาเหนือขึ้นไป"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="commanderIdOp"
+              emit-value
+              map-options
+            >
+              <template v-if="formEva.commanderId" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="formEva.commanderId = ''"
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-select>
+            <q-select
+              v-model="formEva.commanderHighId"
+              outlined
+              label="ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="commanderHighOp"
+              emit-value
+              map-options
+            >
+              <template v-if="formEva.commanderHighId" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="formEva.commanderHighId = ''"
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-select>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 <style>
 .bg-toolbar {

src/modules/08_KPI/views/main.vue

@@ -73,6 +73,10 @@ const filterKeyword = ref<string>("");
 const roundMainOp = ref<DataOptions[]>([]);
 const roundDialgOp = ref<DataOptions[]>([]);
 
+const evaluatorIdOp = ref<DataOptions[]>([]);
+const commanderIdOp = ref<DataOptions[]>([]);
+const commanderHighOp = ref<DataOptions[]>([]);
+
 /** Dialog*/
 const modalDialog = ref<boolean>(false);
 const yearDialog = ref<number | null>(null);
@@ -82,6 +86,9 @@ const formRound = reactive({
   prefix: "",
   firstName: "",
   lastName: "",
+  evaluatorId: "",
+  commanderId: "",
+  commanderHighId: "",
 });
 
 /** pagetion*/
@@ -228,9 +235,17 @@ watch(
   }
 );
 
+function getOrgOp(){
+  http
+  .get(config.API.Kpiorg)
+  .then((res)=>{
+    console.log(res)
+  })
+}
 onMounted(() => {
   getProfile();
   fetchRoundOption("main");
+  getOrgOp()
 });
 </script>
 
@@ -465,6 +480,68 @@ onMounted(() => {
                 ]"
               />
             </div>
+
+            <div class="col-12">
+              <q-select
+                v-model="formRound.evaluatorId"
+                outlined
+                label="ผู้ประเมิน"
+                dense
+                option-label="name"
+                option-value="id"
+                :options="evaluatorIdOp"
+                emit-value
+                map-options
+                hide-bottom-space
+                lazy-rules
+                :rules="[
+                  (val:string) =>
+                    !!val || `${'กรุณาเลือกผู้ประเมิน'}`,
+                ]"
+              />
+            </div>
+            <div class="col-12">
+              <q-select
+                v-model="formRound.commanderId"
+                outlined
+                label="ผู้บังคับบัญชาเหนือขึ้นไป"
+                dense
+                option-label="name"
+                option-value="id"
+                :options="commanderIdOp"
+                emit-value
+                map-options
+              >
+                <template v-if="formRound.commanderId" v-slot:append>
+                  <q-icon
+                    name="cancel"
+                    @click.stop.prevent="formRound.commanderId = ''"
+                    class="cursor-pointer"
+                  />
+                </template>
+              </q-select>
+            </div>
+            <div class="col-12">
+              <q-select
+                v-model="formRound.commanderHighId"
+                outlined
+                label="ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
+                dense
+                option-label="name"
+                option-value="id"
+                :options="commanderHighOp"
+                emit-value
+                map-options
+              >
+                <template v-if="formRound.commanderHighId" v-slot:append>
+                  <q-icon
+                    name="cancel"
+                    @click.stop.prevent="formRound.commanderHighId = ''"
+                    class="cursor-pointer"
+                  />
+                </template>
+              </q-select>
+            </div>
           </div>
         </q-card-section>
         <q-separator />