โครงสร้างอัตรากำลัง => ปรับการเพิ่มส่วนราชการ

src/modules/02_organizationalNew/components/DialogFormAgency.vue

@@ -61,6 +61,8 @@ const orgLevelOptionMain = ref<DataOption[]>([
   { name: "ระดับฝ่าย/กลุ่มงาน", id: "SECTION" },
 ]);
 
+const orgLevelSubOptionMain = ref<DataOption[]>([]);
+
 const orgLevelOption = ref<DataOption[]>([]);
 
 const orgNameRef = ref<Object | null>(null);
@@ -70,6 +72,7 @@ const orgCodeRef = ref<Object | null>(null);
 // const orgPhoneInRef = ref<Object | null>(null);
 // const orgFaxRef = ref<Object | null>(null);
 const orgLevelRef = ref<Object | null>(null);
+const orgLevelSubRef = ref<Object | null>(null);
 
 const formData = reactive<FormDataAgency>({
   orgName: "",
@@ -79,6 +82,7 @@ const formData = reactive<FormDataAgency>({
   orgPhoneIn: "",
   orgFax: "",
   orgLevel: "",
+  orgLevelSub: "",
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
@@ -90,6 +94,7 @@ const objectComplaintsRef: FormAgencyRef = {
   // orgPhoneIn: orgPhoneInRef,
   // orgFax: orgFaxRef,
   orgLevel: orgLevelRef,
+  orgLevelSub: orgLevelSubRef,
 };
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
@@ -141,8 +146,12 @@ function onSubmit() {
       ["org" + type + "PhoneIn"]: formData.orgPhoneIn,
       ["org" + type + "Fax"]: formData.orgFax,
       ["org" + type + "Rank"]: formData.orgLevel,
+      ["org" + type + "RankSub"]:
+        level.value !== 0 ? formData.orgLevelSub : undefined,
       [nameId]: rootId,
     };
+    console.log(body);
+
     if (actionType.value === "ADD") {
       await http
         .post(config.API.createOrgLevel(type.toLocaleLowerCase()), body)
@@ -229,6 +238,7 @@ watch(
             props.dataNode.orgTreeRank === "DEPARTMENT"
               ? orgLevelOptionMain.value
               : orgLevelOptionMain.value.slice(1, 4);
+          selectOrgLevele(formData.orgLevel);
         }
       }
     }
@@ -245,6 +255,45 @@ const tittleName = computed(() => {
 
   return name;
 });
+
+function selectOrgLevele(val: string) {
+  formData.orgLevelSub = "";
+  switch (val) {
+    case "OFFICE":
+      orgLevelSubOptionMain.value = [
+        { name: "ระดับกอง", id: "DIVISION" },
+        {
+          name: "สำนักงาน",
+          id: "OFFICE",
+        },
+        { name: "ส่วนราชการ", id: "GOVERNMENT" },
+        { name: "โรงพยาบาล", id: "HOSPITAL" },
+        { name: "เทียบเท่ากอง", id: "EQUIVALENT" },
+      ];
+
+      break;
+    case "DIVISION":
+      orgLevelSubOptionMain.value = [
+        { name: "ระดับส่วน", id: "SECTION" },
+        {
+          name: "กลุ่มภารกิจ",
+          id: "MISSION",
+        },
+      ];
+
+    case "SECTION":
+      orgLevelSubOptionMain.value = [
+        { name: "ระดับฝ่าย", id: "FACTION" },
+        {
+          name: "กลุ่มงาน",
+          id: "WORK",
+        },
+      ];
+
+    default:
+      break;
+  }
+}
 </script>
 
 <template>
@@ -323,6 +372,7 @@ const tittleName = computed(() => {
                   emit-value
                   map-options
                   v-model="formData.orgLevel"
+                  @update:model-value="selectOrgLevele"
                   :options="orgLevelOption"
                   :label="
                     level == 0 ? 'ระดับของหน่วยงาน' : 'ระดับของส่วนราชการ'
@@ -339,6 +389,26 @@ const tittleName = computed(() => {
                   lazy-rules
                 />
               </div>
+              <div class="col-4" v-if="formData.orgLevel !== '' && level !== 0">
+                <q-select
+                  :readonly="level === 0 || formData.orgLevel === 'DEPARTMENT'"
+                  ref="orgLevelSubRef"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.orgLevelSub"
+                  :options="orgLevelSubOptionMain"
+                  label="ระดับของส่วนราชการ(ซับ)"
+                  :rules="[
+                    (val) => !!val || 'กรุณาเลือกระดับของส่วนราชการ (ซับ)',
+                  ]"
+                  lazy-rules
+                />
+              </div>
               <div class="col-4">
                 <q-input
                   v-model="formData.orgPhoneEx"

src/modules/02_organizationalNew/interface/index/Main.ts

@@ -22,6 +22,7 @@ interface FormDataAgency {
   orgPhoneIn: string;
   orgFax: string;
   orgLevel: string;
+  orgLevelSub: string;
 }
 
 interface FormDataPosition {
@@ -125,8 +126,6 @@ interface NewPagination {
   sortBy: string;
 }
 
-
-
 export type {
   Pagination,
   DataOption,

src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue

@@ -310,7 +310,12 @@ watch(
         </q-card-section>
         <q-separator />
         <div class="text-right q-ma-sm">
-          <q-btn label="บันทึก" type="submit" color="secondary">
+          <q-btn
+            label="บันทึก"
+            type="submit"
+            color="secondary"
+            :disable="isReadonly"
+          >
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </div>

src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue

@@ -1,6 +1,244 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+const {
+  date2Thai,
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = useCounterMixin();
+
+/** ข้อมูล Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "groupPos",
+    align: "left",
+    label: "กลุ่มงานช่างตำแหน่ง",
+    sortable: true,
+    field: "groupPos",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "minimumOld",
+    align: "left",
+    label: "อัตราค่าจ้าง ขั้นต่ำสุด",
+    sortable: true,
+    field: "minimumOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "groupOld",
+    align: "left",
+    label: "อัตราค่าจ้าง กลุ่มกบัญชีค่าจ่าง",
+    sortable: true,
+    field: "groupOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "maximumOld",
+    align: "left",
+    label: "อัตราค่าจ้าง ขั้นสูงสุดเดิม",
+    sortable: true,
+    field: "maximumOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "groupHigher",
+    align: "left",
+    label: "อัตราค่าจ้างสูงกว่า กลุ่มกบัญชีค่าจ่าง",
+    sortable: true,
+    field: "groupHigher",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "maximumNew",
+    align: "left",
+    label: "อัตราค่าจ้างสูงกว่า ขั้นสูงใหม่",
+    sortable: true,
+    field: "maximumNew",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "reson",
+    align: "left",
+    label: "อัตราค่าจ้างสูงกว่า ขั้นสูงใหม่",
+    sortable: true,
+    field: "maximumNew",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "groupPos",
+  "level",
+  "minimumOld",
+  "groupOld",
+  "maximumOld",
+  "groupHigher",
+]);
+
+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 formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
+</script>
 <template>
-  <div>2</div>
+  <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>
 </template>
 
 <style scoped></style>

src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue

@@ -106,7 +106,7 @@ const itemMenu = ref<ItemsMenu[]>([
     type: "upload",
   },
   {
-    label: "อัตราเงินเดือน",
+    label: "อัตราค่าจ้าง",
     icon: "mdi-format-list-bulleted-triangle",
     color: "secondary",
     type: "salaryRate",