ผังบัญชีค่าจ้างลูกจ้างประจำ => อัตราค่าจ้าง

src/modules/13_salary/views/salaryEmployeeRate.vue

@@ -5,6 +5,10 @@ import { useRouter } from "vue-router";
 
 /** importType*/
 import type { QTableProps } from "quasar";
+import type { ItemsMenu } from "@/modules/13_salary/interface/index/Main";
+
+/** importComponts*/
+import DialogEmployeeRate from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -54,6 +58,23 @@ const rows = ref<any>([
 ]);
 const visibleColumns = ref<string[]>(["no", "month", "day"]);
 
+/** List Mune*/
+const itemMenu = ref<ItemsMenu[]>([
+  {
+    label: "แก้ไข",
+    icon: "edit",
+    color: "edit",
+    type: "edit",
+  },
+
+  {
+    label: "ลบ",
+    icon: "delete",
+    color: "red",
+    type: "delete",
+  },
+]);
+
 const formFilter = reactive({
   page: 1,
   pageSize: 10,
@@ -63,6 +84,37 @@ const pagination = ref({
   page: formFilter.page,
   rowsPerPage: formFilter.pageSize,
 });
+
+const modalDialogEmployeeRate = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+
+function onClickAction(type: string, data: any) {
+  switch (type) {
+    case "edit":
+      onEdit();
+      break;
+    case "delete":
+      onDelete();
+      break;
+
+    default:
+      break;
+  }
+}
+
+function onEdit() {
+  modalDialogEmployeeRate.value = true;
+  isStatusEdit.value = true;
+}
+
+function onDelete() {
+  dialogRemove($q, () => {});
+}
+
+function onClickAdd() {
+  modalDialogEmployeeRate.value = true;
+  isStatusEdit.value = false;
+}
 </script>
 <template>
   <div class="row items-center">
@@ -82,7 +134,7 @@ const pagination = ref({
   </div>
   <q-card flat bordered class="q-pa-md">
     <q-toolbar class="text-primary" style="padding: 0px">
-      <q-btn flat round dense icon="add">
+      <q-btn flat round dense icon="add" @click="onClickAdd">
         <q-tooltip>เพิ่ม </q-tooltip>
       </q-btn>
       <q-space />
@@ -132,6 +184,7 @@ const pagination = ref({
             <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>
           <q-separator />
         </template>
@@ -146,6 +199,39 @@ const pagination = ref({
               </div>
               <div v-else>{{ col.value ? col.value : "-" }}</div>
             </q-td>
+            <q-td>
+              <q-btn
+                flat
+                dense
+                icon="mdi-dots-vertical"
+                class="q-pa-none q-ml-xs"
+                color="grey-13"
+                size="12px"
+              >
+                <q-menu>
+                  <q-list dense style="min-width: 200px">
+                    <q-item
+                      v-for="(item, index) in itemMenu"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click.stop="onClickAction(item.type, props.row)"
+                    >
+                      <q-item-section>
+                        <div class="row items-center">
+                          <q-icon
+                            :color="item.color"
+                            size="17px"
+                            :name="item.icon"
+                          />
+                          <div class="q-pl-md">{{ item.label }}</div>
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </q-td>
           </q-tr>
         </template>
         <template v-slot:pagination="scope">
@@ -163,6 +249,11 @@ const pagination = ref({
       </d-table>
     </div>
   </q-card>
+
+  <DialogEmployeeRate
+    v-model:modal="modalDialogEmployeeRate"
+    :isStatusEdit="isStatusEdit"
+  />
 </template>
 
 <style scoped></style>