ui รายการลาออก

src/modules/06_retirement/components/resign/DialogSendToCommand.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect } from "vue";
+import { ref, watchEffect } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
+import { useRetirementDataStore } from "@/modules/06_retirement/store/Main";
 
+import type { PropType } from "vue";
 import type { QTableProps } from "quasar";
 import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
 
@@ -12,34 +14,30 @@ import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCom
 
 /** use */
 const $q = useQuasar();
+const stroe = useRetirementDataStore();
+const { statusText } = stroe;
 const selected = ref<ResponseItems[]>([]);
 const mixin = useCounterMixin();
-const { dialogConfirm } = mixin;
+const { dialogConfirm, date2Thai } = mixin;
 
 /** props*/
 const props = defineProps({
-  modal: Boolean,
-  closeModal: Function,
-  fecthlist: Function,
-  rows2: Array,
-  filterKeyword2: String,
-});
-
-/** ฟังก์ชั่นการ Selected Data*/
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
+  modal: { type: Boolean, requreid: true },
+  closeModal: { type: Function, requreid: true },
+  fecthList: { type: Function, requreid: true },
+  rows: { type: Array as PropType<ResponseItems[]>, requreid: true },
+  filterKeyword2: { type: String, requreid: true },
+  mainTabs: { type: String, requreid: true },
 });
 
 //Table
-const columns2 = ref<QTableProps["columns"]>([
+const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
     label: "ลำดับ",
     sortable: false,
-    field: "no",
+    field: (row) => props?.rows!.indexOf(row) + 1,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -50,11 +48,9 @@ const columns2 = ref<QTableProps["columns"]>([
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: (row) => `${row.prefix}${row.firstName} ${row.lastName}`,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "location",
@@ -64,8 +60,6 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "location",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionLevel",
@@ -95,8 +89,6 @@ const columns2 = ref<QTableProps["columns"]>([
     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",
@@ -106,34 +98,28 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "datetext",
     align: "left",
-    label: "วันที่ดำเนินการ",
+    label: "วันที่ยื่น",
     sortable: true,
-    field: "datetext",
+    field: (row) => date2Thai(new Date(row.createdAt)),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     sortOrder: "da",
   },
   {
-    name: "statustext",
+    name: "status",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "statustext",
+    field: (row) => statusText(row.status),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumns2 = ref<string[]>([
+const visibleColumns = ref<string[]>([
   "no",
   "prefix",
   "fullname",
@@ -142,7 +128,7 @@ const visibleColumns2 = ref<string[]>([
   "positionNumberOld",
   "organizationPositionOld",
   "datetext",
-  "statustext",
+  "status",
 ]);
 
 const modalCommand = ref<boolean>(false);
@@ -206,7 +192,7 @@ watchEffect(() => {
                 </template>
               </q-input>
               <q-select
-                v-model="visibleColumns2"
+                v-model="visibleColumns"
                 multiple
                 outlined
                 dense
@@ -214,7 +200,7 @@ watchEffect(() => {
                 :display-value="$q.lang.table.columns"
                 emit-value
                 map-options
-                :options="columns2"
+                :options="columns"
                 option-value="name"
                 options-cover
                 style="min-width: 150px"
@@ -225,11 +211,11 @@ watchEffect(() => {
         </div>
 
         <d-table
-          :columns="columns2"
-          :rows="rows2"
+          :columns="columns"
+          :rows="rows"
           :filter="filterKeyword2"
           row-key="id"
-          :visible-columns="visibleColumns2"
+          :visible-columns="visibleColumns"
           selection="multiple"
           v-model:selected="selected"
         >
@@ -253,20 +239,15 @@ watchEffect(() => {
                 />
               </q-td>
               <q-td v-for="col in props.cols" :key="col.id">
-                <div v-if="col.name === 'no'">
-                  {{ props.rowIndex + 1 }}
-                </div>
-
                 <div
-                  v-else
                   :class="
                     col.name === 'organizationPositionOld' ||
                     col.name === 'organization'
-                      ? 'table_ellipsis'
+                      ? 'table_ellipsis2'
                       : ''
                   "
                 >
-                  {{ col.value ? col.value : "-" }}
+                  {{ col.value ? col.value : "" }}
                 </div>
               </q-td>
             </q-tr>
@@ -278,7 +259,7 @@ watchEffect(() => {
         <q-btn
           label="ส่งไปออกคำสั่ง"
           @click="saveOrder"
-          :disable="checkSelected"
+          :disable="selected.length === 0"
           color="public"
         />
       </q-card-actions>
@@ -287,7 +268,7 @@ watchEffect(() => {
 
   <DialogCreateCommand
     v-model:modal="modalCommand"
-    :command-type-code="'C-PM-17'"
-  :persons="selected"
+    :command-type-code="props.mainTabs === '1' ? 'C-PM-17' : 'C-PM-41'"
+    :persons="selected"
   />
 </template>