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

2024-03-13 10:38:19 +07:00 · 2024-03-13 10:38:19 +07:00 · 3ea63a2244
commit 3ea63a2244
parent 03439d7114
5 changed files with 318 additions and 6 deletions
--- a/src/modules/02_organizationalNew/components/DialogFormAgency.vue
+++ b/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"
--- a/src/modules/02_organizationalNew/interface/index/Main.ts
+++ b/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,
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
+++ b/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>
--- a/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
+++ b/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>
--- a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
+++ b/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",