อัตรากำลังลูกจ้างชั่วคราว

2025-01-08 18:07:09 +07:00 · 2025-01-08 18:07:09 +07:00 · e26d739750
commit e26d739750
parent 896ac775c1
19 changed files with 4849 additions and 0 deletions
--- a/src/modules/20_positionTemp/components/TreeMain.vue
+++ b/src/modules/20_positionTemp/components/TreeMain.vue
@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { OrgTree } from "@/modules/20_positionTemp/interface/response/organizational";
+import type { DataTree } from "@/modules/20_positionTemp/interface/index/organizational";
+
+/** importStore*/
+import { usePositionEmp } from "@/modules/20_positionTemp/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const store = usePositionEmp();
+const {} = useCounterMixin();
+
+/** props*/
+const nodeMain = defineModel<OrgTree[]>("nodeTree", { default: [] });
+const nodeId = defineModel<string>("nodeId", { required: true });
+const shortName = defineModel<string>("shortName", { required: true });
+const props = defineProps({
+  fetchDataTree: {
+    type: Function,
+    require: true,
+  },
+  fetchDataTable: {
+    type: Function,
+    require: true,
+  },
+});
+
+const filter = ref<string>(""); //ค้าหาข้อมูลโครงสร้าง
+const nodes = ref<Array<OrgTree>>([]); //ข้อมูลโครงสร้าง
+const lazy = ref(nodes);
+const expanded = ref<Array<string[]>>([]);
+
+/**
+ * funtion เลือกข้อมูล Tree
+ * @param data ข่อมูล Tree
+ */
+function updateSelected(data: DataTree) {
+  shortName.value = data.orgTreeShortName;
+
+  if (!store.treeId || store.treeId != data.orgTreeId) {
+    store.treeId = data.orgTreeId;
+    store.level = data.orgLevel;
+
+    nodeId.value = data.orgTreeId ? data.orgTreeId : "111";
+
+    data.orgTreeId &&
+      props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true);
+    /** ดึงข้อมูลสถิติจำนวนด้านบน*/
+    http
+      .post(config.API.orgSummaryEmp, {
+        id: data.orgTreeId, //*Id node
+        type: data.orgLevel, //*ประเภทnode
+        isNode: false, //*นับทั้ง node ไหม
+      })
+      .then(async (res: any) => {
+        const data = await res.data.result;
+        if (data) {
+          store.getSumPosition({
+            totalPosition: data.totalPosition,
+            totalPositionCurrentUse: data.totalPositionCurrentUse,
+            totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+            totalPositionNextUse: data.totalPositionNextUse,
+            totalPositionNextVacant: data.totalPositionNextVacant,
+            totalRootPosition: data.totalPosition,
+            totalRootPositionCurrentUse: data.totalPositionCurrentUse,
+            totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
+            totalRootPositionNextUse: data.totalPositionNextUse,
+            totalRootPositionNextVacant: data.totalPositionNextVacant,
+          });
+        }
+      });
+  }
+}
+
+watch(
+  () => nodeMain.value,
+  () => {
+    nodes.value = nodeMain.value;
+  }
+);
+</script>
+
+<template>
+  <div class="col-12 q-py-sm q-px-sm">
+    <div class="q-gutter-sm">
+      <div class="row q-col-gutter-sm q-pl-sm">
+        <div class="col-12">
+          <q-input dense outlined v-model="filter" label="ค้นหา">
+            <template v-slot:append>
+              <q-icon name="search" color="grey-5" />
+            </template>
+          </q-input>
+        </div>
+      </div>
+      <div class="bg-white tree-container q-pa-xs">
+        <q-tree
+          class="q-pa-sm q-gutter-sm"
+          dense
+          default-expand-all
+          :nodes="lazy"
+          node-key="orgTreeId"
+          label-key="labelName"
+          :filter="filter.trim()"
+          no-results-label="ไม่พบข้อมูลที่ค้นหา"
+          no-nodes-label="ไม่มีข้อมูล"
+          v-model:expanded="expanded"
+        >
+          <template v-slot:default-header="prop">
+            <q-item
+              clickable
+              :active="nodeId == prop.node.orgTreeId"
+              @click.stop="updateSelected(prop.node)"
+              active-class="my-list-link text-primary text-weight-medium"
+              class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+            >
+              <div>
+                <div class="text-weight-medium">
+                  {{ prop.node.orgTreeName }}
+                </div>
+                <div class="text-weight-light text-grey-8">
+                  {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                  {{
+                    prop.node.orgTreeShortName == null
+                      ? null
+                      : prop.node.orgTreeShortName
+                  }}
+                </div>
+              </div>
+            </q-item>
+          </template>
+        </q-tree>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tree-container {
+  overflow: auto;
+  height: 73vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>