List Exit interview UI

2023-08-24 17:06:18 +07:00 · 2023-08-24 17:06:18 +07:00 · d562d12cea
commit d562d12cea
parent 6e7d5e6031
4 changed files with 238 additions and 187 deletions
--- a/src/modules/05_placement/components/Other/Detail.vue
+++ b/src/modules/05_placement/components/Other/Detail.vue
@ -12,6 +12,8 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";

+import CurruncyInput from "@/components/CurruncyInput.vue";
+
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
@ -350,7 +352,7 @@ const getClass = (val: boolean) => {
          </div>
          <div class="col-xs-6 col-sm-3 row items-center">
            <div class="col-12">
-              <q-input
+              <!-- <q-input
                :class="getClass(edit)"
                :outlined="edit"
                dense
@ -362,6 +364,12 @@ const getClass = (val: boolean) => {
                hide-bottom-space
                :label="`${'เงินเดือน'}`"
                type="number"
+              /> -->
+              <CurruncyInput
+                v-model="salary"
+                label="เงินเดือน"
+                :edit="edit"
+                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
              />
            </div>
          </div>
--- a/src/modules/06_retirement/components/ExitInterview/exitMain.vue
+++ b/src/modules/06_retirement/components/ExitInterview/exitMain.vue
@ -9,7 +9,10 @@ import http from "@/plugins/http";
 import config from "@/app.config";

 import type { QTableProps } from "quasar";
-import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
+import type { ResponseItems } from "@/modules/06_retirement/interface/response/exitInterview";
+
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";

 const $q = useQuasar(); //ใช้ noti quasar
 const router = useRouter();
@ -33,22 +36,22 @@ const columns = ref<QTableProps["columns"]>([
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
-    name: "prefix",
+    name: "realReason",
    align: "left",
-    label: "คำนำหน้า",
+    label: "สาเหตุที่ลาออก",
    sortable: true,
-    field: "prefix",
+    field: "realReason",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
-    name: "fullname",
+    name: "notExitFactor",
    align: "left",
-    label: "ชื่อ-นามสกุล",
+    label: "ปัจจัยที่ช่วยเปลี่ยนใจไม่อยากลาออก",
    sortable: true,
-    field: "fullname",
+    field: "notExitFactor",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
@ -56,173 +59,76 @@ const columns = ref<QTableProps["columns"]>([
  },

  {
-    name: "positionTypeOld",
+    name: "futureWork",
    align: "left",
-    label: "ตำแหน่งในสายงาน",
+    label: "อนาคตกลับจะมาร่วมงานหรือไม่",
    sortable: true,
-    field: "positionTypeOld",
+    field: "futureWork",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
-    name: "positionLevelOld",
+    name: "futureWorkReason",
    align: "left",
-    label: "ระดับ",
+    label: "เหตุผลที่อยากกลับมาร่วมงาน",
    sortable: true,
-    field: "positionLevelOld",
+    field: "futureWorkReason",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
-    name: "positionNumberOld",
+    name: "havejob",
    align: "left",
-    label: "เลขที่",
+    label: "มีงานใหม่หรือไม่",
    sortable: true,
-    field: "positionNumberOld",
+    field: "havejob",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
-    name: "organizationPositionOld",
+    name: "havejobReason",
    align: "left",
-    label: "สังกัด",
+    label: "เหตุผลที่มีงานใหม่",
    sortable: true,
-    field: "organizationPositionOld",
+    field: "havejobReason",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
-    name: "statustext",
+    name: "datetext",
    align: "left",
-    label: "สถานะ",
+    label: "วันที่สร้าง",
    sortable: true,
-    field: "statustext",
+    field: "datetext",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
 ]);
-const visibleColumns = ref<string[]>([
-  "no",
-  "prefix",
-  "fullname",
-  "positionTypeOld",
-  "positionLevelOld",
-  "positionNumberOld",
-  "organizationPositionOld",
-  "statustext",
-]);
+const visibleColumns = ref<string[]>([]);
+
+const dateBreak = ref<Date | null>(null);

 const filters = ref<ResponseItems[]>([]);
 const rows2 = ref<ResponseItems[]>([]);
-const columns2 = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "prefix",
-    align: "left",
-    label: "คำนำหน้า",
-    sortable: true,
-    field: "prefix",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "fullname",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "positionTypeOld",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "positionTypeOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionLevelOld",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevelOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionNumberOld",
-    align: "left",
-    label: "เลขที่",
-    sortable: true,
-    field: "positionNumberOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organizationPositionOld",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "organizationPositionOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "statustext",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "statustext",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
+const columns2 = ref<QTableProps["columns"]>([]);
 const visibleColumns2 = ref<string[]>([
  "no",
  "prefix",
  "fullname",
-  "positionTypeOld",
-  "positionLevelOld",
-  "positionNumberOld",
-  "organizationPositionOld",
+  "futureWork",
+  "futureWorkReason",
+  "havejob",
+  "havejobReason",
  "statustext",
 ]);

@ -247,6 +153,15 @@ const resetFilter = () => {
  filterRef.value.focus();
 };

+const openModalCalendar = () => {
+  openModal();
+  dateBreak.value = null;
+};
+
+const conditionPopup = () => {
+  closeModal();
+};
+
 const openModalOrder = () => {
  openModal();
  const row = filters.value.filter(
@ -258,6 +173,7 @@ const openModalOrder = () => {

 onMounted(async () => {
  await fecthlist();
+  visibleColumns.value = columns.value.map((r: any) => r.name);
 });

 const fecthlist = async () => {
@ -270,25 +186,20 @@ const fecthlist = async () => {

      data.map((r: ResponseItems) => {
        list.push({
-          activeDate: new Date(),
-          createdAt: new Date(),
-          firstName: r.firstName ?? "",
+          datetext: r.createdAt !== null ? date2Thai(r.createdAt) : "-",
+          createdAt: new Date(r.createdAt),
+          futureWork: !!r.futureWork,
+          futureWorkReason: r.futureWorkReason ?? "",
+          havejob: !!r.havejob,
+          havejobReason: r.havejobReason ?? "",
          id: r.id ?? "",
-          isActive: r.isActive ? r.isActive : false,
-          lastName: r.lastName ?? "",
-          location: r.location ?? "",
-          organizationPositionOld: r.organizationPositionOld ?? "",
-          positionLevelOld: r.positionLevelOld ?? "",
-          positionNumberOld: r.positionNumberOld ?? "",
-          positionTypeOld: r.positionTypeOld ?? "",
-          prefix: r.prefix ?? "",
-          profileId: r.profileId ?? "",
-          reason: r.reason ?? "",
-          salary: r.salary ? r.salary : 0,
-          sendDate: new Date(),
+          lastUpdatedAt: new Date(r.lastUpdatedAt),
+          notExitFactor: r.notExitFactor ?? "",
+          realReason: r.realReason ?? "",
+          suggestFriends: !!r.suggestFriends,
+          suggestFriendsReason: r.suggestFriendsReason ?? "",
+          suggestion: r.suggestion ?? "",
          status: r.status ?? "",
-          statustext: statusText(r.status ?? ""),
-          fullname: `${r.firstName ?? ""} ${r.lastName ?? ""}`,
        });
      });

@ -399,40 +310,50 @@ const saveOrder = async () => {
                <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
-                :props="props"
-                class="cursor-pointer"
-                @click="router.push(`/retirement/resign/${props.row.id}`)"
-              >
+              <q-tr :props="props" class="cursor-pointer">
                <q-td key="no" :props="props">
                  {{ props.rowIndex + 1 }}
                </q-td>
-                <q-td key="prefix" :props="props">
-                  {{ props.row.prefix }}
+                <q-td key="realReason" :props="props">
+                  {{ props.row.realReason }}
                </q-td>
-                <q-td key="fullname" :props="props">
-                  {{ props.row.fullname }}
+                <q-td key="notExitFactor" :props="props">
+                  {{ props.row.notExitFactor }}
                </q-td>
-                <q-td key="positionTypeOld" :props="props">
-                  {{ props.row.positionTypeOld }}
+                <q-td key="futureWork" :props="props">
+                  {{ props.row.futureWork ? "ใช่" : "ไม่" }}
                </q-td>
-                <q-td key="positionLevelOld" :props="props">
-                  {{ props.row.positionLevelOld }}
+                <q-td key="futureWorkReason" :props="props">
+                  {{ props.row.futureWorkReason }}
                </q-td>
-                <q-td key="positionNumberOld" :props="props">
-                  {{ props.row.positionNumberOld }}
+                <q-td key="havejob" :props="props">
+                  {{ props.row.havejob ? "ใช่" : "ไม่" }}
                </q-td>

-                <q-td key="organizationPositionOld" :props="props">
+                <q-td key="havejobReason" :props="props">
                  <div class="table_ellipsis">
-                    {{ props.row.organizationPositionOld }}
+                    {{ props.row.havejobReason }}
                  </div>
                </q-td>
-                <q-td key="statustext" :props="props">
-                  {{ props.row.statustext }}
+                <q-td key="datetext" :props="props">
+                  {{ props.row.datetext }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                    icon="mdi-calendar"
+                    size="12px"
+                    color="blue-7"
+                    flat
+                    round
+                    dense
+                    @click="openModalCalendar"
+                  >
+                    <q-tooltip>วันนัดหมายเพื่อทําการสัมภาษณ์การลาออก</q-tooltip>
+                  </q-btn>
                </q-td>
              </q-tr>
            </template>
@ -528,16 +449,16 @@ const saveOrder = async () => {
              <q-td key="positionTypeOld" :props="props">
                {{ props.row.positionTypeOld }}
              </q-td>
-              <q-td key="positionLevelOld" :props="props">
-                {{ props.row.positionLevelOld }}
+              <q-td key="futureWorkReason" :props="props">
+                {{ props.row.futureWorkReason }}
              </q-td>
-              <q-td key="positionNumberOld" :props="props">
-                {{ props.row.positionNumberOld }}
+              <q-td key="havejob" :props="props">
+                {{ props.row.havejob }}
              </q-td>

-              <q-td key="organizationPositionOld" :props="props">
+              <q-td key="havejobReason" :props="props">
                <div class="table_ellipsis">
-                  {{ props.row.organizationPositionOld }}
+                  {{ props.row.havejobReason }}
                </div>
              </q-td>
              <q-td key="statustext" :props="props">
@ -558,5 +479,60 @@ const saveOrder = async () => {
      </q-card-actions>
    </q-card>
  </q-dialog> -->
+
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myFormConfirm">
+        <DialogHeader
+          title="กําหนดวันนัดหมายเพื่อทําการสัมภาษณ์การลาออก"
+          :close="closeModal"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm q-gutter-md">
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateBreak"
+              :locale="'th'"
+              autoApply
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <!-- :rules="[
+                    (val) => !!val || `${'กรุณาเลือก วันสุดท้ายที่ยับยั้ง'}`,
+                  ]" -->
+                <q-input
+                  outlined
+                  dense
+                  lazy-rules
+                  :model-value="
+                    dateBreak !== null ? date2Thai(dateBreak) : null
+                  "
+                  hide-bottom-space
+                  :label="`${' วันนัดหมายเพื่อทําการสัมภาษณ์การลาออก'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter :editvisible="true" :save="conditionPopup" />
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 <style scoped lang="scss"></style>
--- a/src/modules/06_retirement/interface/response/exitInterview.ts
+++ b/src/modules/06_retirement/interface/response/exitInterview.ts
@ -0,0 +1,40 @@
+interface ResponseData {
+  adjust: string[];
+  adjustOther: string;
+  createdAt: Date;
+  exitFactor: string[];
+  exitFactorOther: string;
+  futureWork: boolean;
+  futureWorkReason: string;
+  havejob: boolean;
+  havejobReason: string;
+  id: string;
+  lastUpdatedAt: Date;
+  notExitFactor: string;
+  realReason: string;
+  reasonWork: string[];
+  reasonWorkOther: string;
+  suggestFriends: boolean;
+  suggestFriendsReason: string;
+  suggestion: string;
+  timeThink: string[];
+}
+
+interface ResponseItems {
+  createdAt: Date;
+  futureWork: boolean;
+  futureWorkReason: string;
+  havejob: boolean;
+  havejobReason: string;
+  id: string;
+  lastUpdatedAt: Date;
+  notExitFactor: string;
+  realReason: string;
+  suggestFriends: boolean;
+  suggestFriendsReason: string;
+  suggestion: string;
+  status: string;
+  datetext: string | null;
+}
+
+export type { ResponseData, ResponseItems };
--- a/src/modules/10_order/components/step/step02.vue
+++ b/src/modules/10_order/components/step/step02.vue
@ -1,17 +1,19 @@
-
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import type { QInput } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps, QForm } from "quasar";
 import { useRoute } from "vue-router";
-import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+
+import type { QInput } from "quasar";
+import type { QTableProps, QForm } from "quasar";
 import type { ResponseData } from "@/modules/05_placement/interface/response/Order";

 import http from "@/plugins/http";
 import config from "@/app.config";

+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import CurruncyInput from "@/components/CurruncyInput.vue";
+
 const props = defineProps({
  next: {
    type: Function,
@ -126,8 +128,10 @@ const getData = async (id: string) => {
          sequence: r.sequence !== null ? r.sequence : 0,
          refRecordId: r.refRecordId,
          salaryAmount: r.salaryAmount !== 0 ? r.salaryAmount : null,
-          positionSalaryAmount: r.positionSalaryAmount!== 0 ? r.positionSalaryAmount : null,
-          monthSalaryAmount: r.monthSalaryAmount!== 0 ? r.monthSalaryAmount : null,
+          positionSalaryAmount:
+            r.positionSalaryAmount !== 0 ? r.positionSalaryAmount : null,
+          monthSalaryAmount:
+            r.monthSalaryAmount !== 0 ? r.monthSalaryAmount : null,
        });
      });
      // console.log("list", list);
@ -241,9 +245,11 @@ const fetchSalary = async (personalId: string) => {
      console.log(res);
      const data = res.data.result;
      modalData.value = {
-        salaryAmount: data.salaryAmount !== 0 ? data.salaryAmount:null,
-        positionSalaryAmount: data.positionSalaryAmount !== 0 ? data.salaryAmount:null,
-        mouthSalaryAmount: data.monthSalaryAmount !== 0 ? data.salaryAmount:null,
+        salaryAmount: data.salaryAmount !== 0 ? data.salaryAmount : null,
+        positionSalaryAmount:
+          data.positionSalaryAmount !== 0 ? data.salaryAmount : null,
+        mouthSalaryAmount:
+          data.monthSalaryAmount !== 0 ? data.salaryAmount : null,
      };
      console.log("data", modalData.value);
    })
@ -368,7 +374,7 @@ const addlist = async (data: Object) => {

 const save = async () => {
  // console.log("save===>", rows.value)
-  const check = rows.value.find((x:any) => x.salaryAmount==null);
+  const check = rows.value.find((x: any) => x.salaryAmount == null);
  if (selected.value.length > 0 && !check) {
    dialogConfirm($q, () => {
      success($q, "บันทึกข้อมูลสำเร็จ");
@ -564,7 +570,7 @@ const getClass = (val: boolean) => {
        color="public"
        @click="save"
        class="q-px-md"
-        >
+      >
      </q-btn>
    </div>
  </div>
@ -579,21 +585,28 @@ const getClass = (val: boolean) => {
            <div class="col-xs-12">
              <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
                <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
+                  <!-- <q-input
                    outlined
                    dense
-                    
                    lazy-rules
                    v-model.number="modalData.salaryAmount"
                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
                    :label="`${'เงินเดือน'}`"
                    type="text"
                    hide-bottom-space
+                  /> -->
+                  <CurruncyInput
+                    :edit="true"
+                    :dense="true"
+                    v-model="modalData.salaryAmount"
+                    :label="`${'เงินเดือน'}`"
+                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                    hide-bottom-space
                  />
                </div>

                <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
+                  <!-- <q-input
                    outlined
                    dense
                    lazy-rules
@ -601,14 +614,21 @@ const getClass = (val: boolean) => {
                    :label="`${'เงินประจำตำแหน่ง'}`"
                    type="number"
                    hide-bottom-space
-                  />
+                  /> -->
                  <!-- :rules="[
                      (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
                    ]" -->
+                  <CurruncyInput
+                    :edit="true"
+                    :dense="true"
+                    v-model="modalData.positionSalaryAmount"
+                    :label="`${'เงินประจำตำแหน่ง'}`"
+                    hide-bottom-space
+                  />
                </div>

                <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
+                  <!-- <q-input
                    outlined
                    dense
                    lazy-rules
@ -616,10 +636,17 @@ const getClass = (val: boolean) => {
                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
                    type="number"
                    hide-bottom-space
-                  />
+                  /> -->
                  <!-- :rules="[
                      (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
                    ]" -->
+                  <CurruncyInput
+                    :edit="true"
+                    :dense="true"
+                    v-model="modalData.positionSalaryAmount"
+                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                    hide-bottom-space
+                  />
                </div>
              </div>
            </div>