From febf161d817b5cc842c6598e87a5723cafb30b6d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 12 Mar 2024 16:23:23 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9C=E0=B8=B1=E0=B8=87=E0=B8=9A=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=8D=E0=B8=8A=E0=B8=B5=E0=B8=84=E0=B9=88=E0=B8=B2=E0=B8=88?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B3=20=3D>=20=E0=B8=9A=E0=B8=B1=E0=B8=8D=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=AA=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DialogEmployeeChart.vue                   | 322 ++++++++++++++++++
 .../salaryEmployeeChart/TabCriteria.vue       |   6 +
 .../salaryEmployeeChart/TabStructure.vue      | 309 +++++++++++++++++
 .../interface/index/EmployeeChart.ts          |   7 +
 .../interface/request/EmployeeChart.ts        |  10 +
 src/modules/13_salary/router.ts               |  12 +
 .../13_salary/store/SalaryEmployeeChart.ts    |  13 +
 src/modules/13_salary/views/salaryChart.vue   |  21 +-
 .../13_salary/views/salaryEmployeeChart.vue   |  40 ++-
 .../13_salary/views/salaryEmployeeRate.vue    | 168 +++++++++
 10 files changed, 896 insertions(+), 12 deletions(-)
 create mode 100644 src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
 create mode 100644 src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
 create mode 100644 src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
 create mode 100644 src/modules/13_salary/interface/index/EmployeeChart.ts
 create mode 100644 src/modules/13_salary/interface/request/EmployeeChart.ts
 create mode 100644 src/modules/13_salary/store/SalaryEmployeeChart.ts
 create mode 100644 src/modules/13_salary/views/salaryEmployeeRate.vue

diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
new file mode 100644
index 000000000..bb0f56d03
--- /dev/null
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
@@ -0,0 +1,322 @@
+<script setup lang="ts">
+import { computed, ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import type { ObjectCharRef } from "@/modules/13_salary/interface/index/EmployeeChart";
+import type { FormDataChar } from "@/modules/13_salary/interface/request/EmployeeChart";
+
+import Header from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const {
+  date2Thai,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+} = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  isStatusEdit: { type: Boolean, required: true },
+  data: { type: Object, required: true },
+});
+const formData = reactive<FormDataChar>({
+  name: "", //ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง
+  group: "", //*กลุ่มบัญชีค่าจ้าง
+  isActive: false, //*สถานะการใช้งาน
+  date: null, //ให้ไว้ ณ วันที่
+  startDate: null, //วันที่มีผลบังคับใช้
+  endDate: null, //วันที่สิ้นสุดบังคับใช้
+  details: "", //คำอธิบาย
+});
+
+const nameRef = ref<Object | null>(null);
+const groupRef = ref<Object | null>(null);
+
+const ObjectRef: ObjectCharRef = {
+  name: nameRef,
+  group: groupRef,
+};
+
+const isReadonly = ref<boolean>(false);
+function onClickSubmit() {
+  const hasError = [];
+  for (const key in ObjectRef) {
+    if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
+      const property = ObjectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    dialogConfirm($q, () => {
+      onSubmit();
+    });
+  }
+}
+
+function onSubmit() {
+  console.log(props.isStatusEdit);
+}
+
+function closeDialog() {
+  modal.value = false;
+  clearFormData();
+}
+
+function clearFormData() {
+  formData.name = "";
+  formData.group = "";
+  formData.isActive = false;
+  formData.date = null;
+  formData.startDate = null;
+  formData.endDate = null;
+  formData.details = "";
+}
+
+/** function checkEndDate*/
+function checkEndDate() {
+  if (formData.endDate !== null && formData.startDate !== null) {
+    if (formData.endDate < formData.startDate) {
+      formData.endDate = null;
+    }
+  }
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value && props.isStatusEdit) {
+      console.log(props.data);
+      const data = props.data;
+      formData.name = data.name;
+      formData.group = data.group;
+      formData.isActive = data.isActive;
+      formData.date = data.date;
+      formData.startDate = null;
+      formData.endDate = null;
+      formData.details = "";
+      isReadonly.value = data.isActive ? true : false;
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <form @submit.prevent.stop="onClickSubmit">
+        <Header tittle="test" :close="closeDialog" />
+        <q-separator />
+        <q-card-section class="scroll" style="max-height: 70vh">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-md-12">
+              <div class="row col-12 q-col-gutter-sm">
+                <div class="col-xs-12 col-md-4">
+                  <q-input
+                    :readonly="isReadonly"
+                    ref="nameRef"
+                    dense
+                    hide-bottom-space
+                    outlined
+                    v-model="formData.name"
+                    label="ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง"
+                    :rules="[
+                      (val) =>
+                        !!val ||
+                        'กรุณากรอกชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง',
+                    ]"
+                    lazy-rules
+                  />
+                </div>
+
+                <div class="col-xs-12 col-md-4">
+                  <q-input
+                    ref="groupRef"
+                    week-start="0"
+                    :readonly="isReadonly"
+                    dense
+                    outlined
+                    v-model="formData.group"
+                    label="กลุ่มบัญชีค่าจ้าง"
+                    hide-bottom-space
+                    mask="########"
+                    :rules="[(val) => !!val || 'กรุณากรอกกลุ่มบัญชีค่าจ้าง']"
+                  />
+                </div>
+
+                <div
+                  class="col-xs-12 col-md-4"
+                  style="display: flex; justify-content: flex-start"
+                >
+                  <q-toggle
+                    week-start="0"
+                    :disable="isReadonly"
+                    color="primary"
+                    label="สถานะการใช้งาน"
+                    v-model="formData.isActive"
+                  />
+                </div>
+
+                <div class="col-xs-12 col-md-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formData.date"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                    :readonly="isReadonly"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        :readonly="isReadonly"
+                        outlined
+                        dense
+                        hide-bottom-space
+                        :model-value="
+                          formData.date != null
+                            ? date2Thai(formData.date)
+                            : null
+                        "
+                        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>
+
+                <div class="col-xs-12 col-md-4">
+                  <datepicker
+                    :readonly="isReadonly"
+                    menu-class-name="modalfix"
+                    v-model="formData.startDate"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                    @update:model-value="checkEndDate"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        :readonly="isReadonly"
+                        outlined
+                        dense
+                        hide-bottom-space
+                        :model-value="
+                          formData.startDate != null
+                            ? date2Thai(formData.startDate)
+                            : null
+                        "
+                        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>
+
+                <div class="col-xs-12 col-md-4">
+                  <datepicker
+                    :readonly="isReadonly"
+                    menu-class-name="modalfix"
+                    v-model="formData.endDate"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                    :min-date="formData.startDate"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        :readonly="isReadonly"
+                        outlined
+                        dense
+                        :model-value="
+                          formData.endDate != null
+                            ? date2Thai(formData.endDate)
+                            : null
+                        "
+                        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>
+
+                <div class="col-12">
+                  <q-input
+                    :readonly="isReadonly"
+                    v-model="formData.details"
+                    outlined
+                    dense
+                    type="textarea"
+                    label="คำอธิบาย"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <div class="text-right q-ma-sm">
+          <q-btn label="บันทึก" type="submit" color="secondary">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue b/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
new file mode 100644
index 000000000..e24c62a13
--- /dev/null
+++ b/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>2</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue b/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
new file mode 100644
index 000000000..3f57da830
--- /dev/null
+++ b/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { ItemsMenu } from "@/modules/13_salary/interface/index/Main";
+
+/** importComponents*/
+import DialogEmployeeChart from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const router = useRouter();
+const $q = useQuasar();
+const {
+  date2Thai,
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = useCounterMixin();
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+
+/** ข้อมูล Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "group",
+    align: "left",
+    label: "กลุ่มบัญชีค่าจ้าง",
+    sortable: true,
+    field: "group",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่มีผลบังคับใช้",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะการใช้งาน",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<any>([
+  {
+    id: "1",
+    name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 1",
+    group: 1,
+    date: new Date(),
+    isActive: true,
+  },
+  {
+    id: "2",
+    name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 2",
+    group: 2,
+    date: new Date(),
+    isActive: false,
+  },
+]);
+const visibleColumns = ref<string[]>(["name", "group", "date", "isActive"]);
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
+/** List Mune*/
+const itemMenu = ref<ItemsMenu[]>([
+  {
+    label: "แก้ไข",
+    icon: "edit",
+    color: "edit",
+    type: "edit",
+  },
+  {
+    label: "เอกสารอ้างอิง",
+    icon: "mdi-file-document-outline",
+    color: "teal",
+    type: "upload",
+  },
+  {
+    label: "อัตราเงินเดือน",
+    icon: "mdi-format-list-bulleted-triangle",
+    color: "secondary",
+    type: "salaryRate",
+  },
+  {
+    label: "คัดลอก",
+    icon: "content_copy",
+    color: "blue-6",
+    type: "copy",
+  },
+]);
+
+function onClickAction(type: string, data: any) {
+  switch (type) {
+    case "edit":
+      onEdit(data);
+      break;
+    case "upload":
+      onUpload();
+      break;
+    case "salaryRate":
+      onSalaryRate(data);
+      break;
+    case "coppy":
+      onCoppy(data.id);
+      break;
+
+    default:
+      break;
+  }
+}
+
+function onEdit(data: any) {
+  modalDialogEmployeeChart.value = true;
+  isStatusEdit.value = true;
+  dataRow.value = data;
+}
+
+function onUpload() {}
+
+function onSalaryRate(id: string) {
+  router.push(`/salary-employee/rate/${id}`);
+}
+
+function onCoppy(id: string) {}
+function onClickDelete(id: string) {
+  dialogRemove($q, () => {});
+}
+
+const modalDialogEmployeeChart = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+const dataRow = ref<any>();
+function onClickAdd() {
+  modalDialogEmployeeChart.value = true;
+  isStatusEdit.value = false;
+}
+</script>
+<template>
+  <q-toolbar class="text-primary" style="padding: 0px">
+    <q-btn flat round dense icon="add" @click="onClickAdd()">
+      <q-tooltip>เพิ่ม </q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      borderless
+      dense
+      debounce="300"
+      outlined
+      v-model="formFilter.keyword"
+      placeholder="ค้นหา"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+    <q-select
+      for="#select"
+      v-model="visibleColumns"
+      multiple
+      outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="columns"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
+      class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+    />
+  </q-toolbar>
+  <d-table
+    flat
+    bordered
+    dense
+    :rows="rows"
+    :columns="columns"
+    row-key="name"
+    v-model:pagination="pagination"
+    :rows-per-page-options="[10, 20, 50, 100]"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <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>
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name === 'date'">
+            {{ col.value ? date2Thai(col.value) : "-" }}
+          </div>
+          <div v-else-if="col.name === 'group'">
+            {{ col.value ? `กลุ่มที่ (${col.value})` : "-" }}
+          </div>
+          <div v-else-if="col.name === 'isActive'">
+            <q-icon
+              :name="col.value ? 'done' : 'close'"
+              :color="col.value ? 'primary' : 'grey'"
+              size="24px"
+            ></q-icon>
+          </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-item
+                  v-if="props.row.isActive == false"
+                  clickable
+                  v-close-popup
+                  @click.stop="onClickDelete(props.row.id)"
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon color="red" size="17px" name="delete" />
+                      <div class="q-pl-md">ลบ</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="formFilter.page"
+        active-color="primary"
+        color="dark"
+        :max="1"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+  </d-table>
+
+  <DialogEmployeeChart
+    v-model:modal="modalDialogEmployeeChart"
+    :isStatusEdit="isStatusEdit"
+    :data="dataRow"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/interface/index/EmployeeChart.ts b/src/modules/13_salary/interface/index/EmployeeChart.ts
new file mode 100644
index 000000000..12978b628
--- /dev/null
+++ b/src/modules/13_salary/interface/index/EmployeeChart.ts
@@ -0,0 +1,7 @@
+interface ObjectCharRef {
+  name: object | null;
+  group: object | null;
+
+  [key: string]: any;
+}
+export type { ObjectCharRef };
diff --git a/src/modules/13_salary/interface/request/EmployeeChart.ts b/src/modules/13_salary/interface/request/EmployeeChart.ts
new file mode 100644
index 000000000..5c4882412
--- /dev/null
+++ b/src/modules/13_salary/interface/request/EmployeeChart.ts
@@ -0,0 +1,10 @@
+interface FormDataChar {
+  name: string; //ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง
+  group: string; //*กลุ่มบัญชีค่าจ้าง
+  isActive: boolean; //*สถานะการใช้งาน
+  date: Date | null; //ให้ไว้ ณ วันที่
+  startDate: Date | null; //วันที่มีผลบังคับใช้
+  endDate: Date | null; //วันที่สิ้นสุดบังคับใช้
+  details: string; //คำอธิบาย
+}
+export type { FormDataChar };
diff --git a/src/modules/13_salary/router.ts b/src/modules/13_salary/router.ts
index 06937a91e..f9a0fa041 100644
--- a/src/modules/13_salary/router.ts
+++ b/src/modules/13_salary/router.ts
@@ -1,6 +1,8 @@
 const salaryChart = () => import("@/modules/13_salary/views/salaryChart.vue");
 const salaryEmployeeChart = () =>
   import("@/modules/13_salary/views/salaryEmployeeChart.vue");
+const salaryEmployeeRate = () =>
+  import("@/modules/13_salary/views/salaryEmployeeRate.vue");
 const salaryRate = () => import("@/modules/13_salary/views/salaryRate.vue");
 const salaryRound = () => import("@/modules/13_salary/views/salaryRound.vue");
 const salaryLists = () => import("@/modules/13_salary/views/salaryLists.vue");
@@ -28,6 +30,16 @@ export default [
       Role: "salary",
     },
   },
+  {
+    path: "/salary-employee/rate/:id",
+    name: "salaryEmployeeRate",
+    component: salaryEmployeeRate,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "salary",
+    },
+  },
   {
     path: "/salary/rate/:id",
     name: "salaryRate",
diff --git a/src/modules/13_salary/store/SalaryEmployeeChart.ts b/src/modules/13_salary/store/SalaryEmployeeChart.ts
new file mode 100644
index 000000000..ea3947e30
--- /dev/null
+++ b/src/modules/13_salary/store/SalaryEmployeeChart.ts
@@ -0,0 +1,13 @@
+import { defineStore } from "pinia";
+
+import { ref } from "vue";
+
+export const useSalaryEmployeeChartDataStore = defineStore(
+  "salaryEmployeeChart",
+  () => {
+    const mainTab = ref<string>("structure");
+    return {
+      mainTab,
+    };
+  }
+);
diff --git a/src/modules/13_salary/views/salaryChart.vue b/src/modules/13_salary/views/salaryChart.vue
index 176711e1d..9ce96f301 100644
--- a/src/modules/13_salary/views/salaryChart.vue
+++ b/src/modules/13_salary/views/salaryChart.vue
@@ -296,18 +296,17 @@ async function filterFn(page: number) {
               </div>
               <div v-else-if="col.name === 'posList'" class="row">
                 <div class="column text-weight-light">
-                    <span>ประเภทตำแหน่ง</span>
-                    <span>ระดับตำแหน่ง</span>
-
-    
-                  </div>
+                  <span>ประเภทตำแหน่ง</span>
+                  <span>ระดับตำแหน่ง</span>
+                </div>
                 <div class="column q-ml-sm">
-                    <span>{{ props.row.posType }}</span>
-                    <span>{{ props.row.isSpecial ? `${props.row.posLevel} (ฉ)` : `${props.row.posLevel}` }}</span>
-                    
-                    
-          
-                  </div>
+                  <span>{{ props.row.posType }}</span>
+                  <span>{{
+                    props.row.isSpecial
+                      ? `${props.row.posLevel} (ฉ)`
+                      : `${props.row.posLevel}`
+                  }}</span>
+                </div>
               </div>
               <div v-else-if="col.name === 'salaryType'">
                 {{
diff --git a/src/modules/13_salary/views/salaryEmployeeChart.vue b/src/modules/13_salary/views/salaryEmployeeChart.vue
index 31dbc5a64..add4984af 100644
--- a/src/modules/13_salary/views/salaryEmployeeChart.vue
+++ b/src/modules/13_salary/views/salaryEmployeeChart.vue
@@ -1,3 +1,41 @@
+<script setup lang="ts">
+import TabStructure from "@/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue";
+import TabCriteris from "@/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue";
+
+import { useSalaryEmployeeChartDataStore } from "@/modules/13_salary/store/SalaryEmployeeChart";
+
+const store = useSalaryEmployeeChartDataStore();
+</script>
+
 <template>
-  <div>ผังบัญชีลูกจ้างประจำ</div>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      ผังบัญชีค่าจ้างลูกจ้างประจำ
+    </div>
+  </div>
+
+  <q-card flat bordered>
+    <q-tabs
+      v-model="store.mainTab"
+      dense
+      align="left"
+      class="text-grey"
+      active-color="primary"
+      indicator-color="primary"
+    >
+      <q-tab name="structure" label="บัญชีโครงสร้างอัตราค่าจ้าง" />
+      <q-tab name="criteria" label="หลักเกณฑ์" />
+    </q-tabs>
+    <q-separator />
+
+    <q-tab-panels v-model="store.mainTab" animated>
+      <q-tab-panel name="structure">
+        <TabStructure />
+      </q-tab-panel>
+
+      <q-tab-panel name="criteria">
+        <TabCriteris />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-card>
 </template>
diff --git a/src/modules/13_salary/views/salaryEmployeeRate.vue b/src/modules/13_salary/views/salaryEmployeeRate.vue
new file mode 100644
index 000000000..8e81fac1c
--- /dev/null
+++ b/src/modules/13_salary/views/salaryEmployeeRate.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const router = useRouter();
+const $q = useQuasar();
+const { dialogRemove, messageError, showLoader, hideLoader, success } =
+  useCounterMixin();
+
+/** ข้อมูล Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับขั้น",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "month",
+    align: "left",
+    label: "อัตราค่าจ้าง/ชั้นวิ่ง (รายเดือน)",
+    sortable: true,
+    field: "month",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "day",
+    align: "left",
+    label: "อัตราค่าจ้าง/ชั้นวิ่ง (รายวัน)",
+    sortable: true,
+    field: "day",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<any>([
+  {
+    no: "1",
+    month: 100000,
+    day: 5000,
+  },
+]);
+const visibleColumns = ref<string[]>(["no", "month", "day"]);
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
+</script>
+<template>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      อัตราค่าจ้าง
+    </div>
+  </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-tooltip>เพิ่ม </q-tooltip>
+      </q-btn>
+      <q-space />
+      <q-input
+        borderless
+        dense
+        debounce="300"
+        outlined
+        v-model="formFilter.keyword"
+        placeholder="ค้นหา"
+      >
+        <template v-slot:append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+      <q-select
+        for="#select"
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+        class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+      />
+    </q-toolbar>
+    <div class="col-12">
+      <d-table
+        flat
+        bordered
+        dense
+        :rows="rows"
+        :columns="columns"
+        row-key="name"
+        v-model:pagination="pagination"
+        :rows-per-page-options="[10, 20, 50, 100]"
+        :visible-columns="visibleColumns"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <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>
+          <q-separator />
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name === 'month'">
+                {{ col.value ? col.value.toLocaleString() : "-" }}
+              </div>
+              <div v-else-if="col.name === 'day'">
+                {{ col.value ? col.value.toLocaleString() : "-" }}
+              </div>
+              <div v-else>{{ col.value ? col.value : "-" }}</div>
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="formFilter.page"
+            active-color="primary"
+            color="dark"
+            :max="1"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+          ></q-pagination>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+</template>
+
+<style scoped></style>