fix(user): delete revisionId

src/modules/02_users/views/01_user.vue

@@ -2,11 +2,12 @@
 import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 
-import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { updateCurrentPage } from "@/utils/functions";
+import { tokenParsed } from "@/plugins/auth";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -15,6 +16,7 @@ import type {
   ItemsMenu,
   Pagination,
 } from "@/modules/02_users/interface/index/Main";
+import type { NodeTree } from "@/modules/02_users/interface/response/Main";
 import type { Users, Roles } from "@/modules/02_users/interface/response/Main";
 
 /** importComponents*/
@@ -32,8 +34,50 @@ const {
   dialogConfirm,
 } = useCounterMixin();
 
+/** Tree*/
+const activeId = ref<string>(""); // id ของโครงสร้างที่ใช้งานอยู่
+const orgId = ref<string | null>(null); // id ของ node ที่เลือก
+const orgLevel = ref<number | null>(null); // ระดับของ node ที่เลือก
+const expanded = ref<Array<string | number>>([]); // ข้อมูล node ที่ขยาย
+const filter = ref<string>(""); // คำค้นหาใน tree
+const nodeTree = ref<Array<NodeTree>>([
+  {
+    labelName: "",
+    orgCode: "",
+    orgLevel: 0,
+    orgName: "",
+    orgRevisionId: "",
+    orgRootName: "",
+    orgTreeCode: "",
+    orgTreeFax: "",
+    orgTreeId: "",
+    orgTreeName: "หน่วยงานทั้งหมด",
+    orgTreeOrder: 0,
+    orgTreePhoneEx: "",
+    orgTreePhoneIn: "",
+    orgTreeRank: "",
+    orgTreeRankSub: "",
+    orgTreeShortName: "",
+    responsibility: "",
+    totalPosition: 0,
+    totalPositionCurrentUse: 0,
+    totalPositionCurrentVacant: 0,
+    totalPositionNextUse: 0,
+    totalPositionNextVacant: 0,
+    totalRootPosition: 0,
+    totalRootPositionCurrentUse: 0,
+    totalRootPositionCurrentVacant: 0,
+    totalRootPositionNextUse: 0,
+    totalRootPositionNextVacant: 0,
+    children: [] as NodeTree[],
+    isOfficer: false,
+  },
+]);
+const lazy = ref(nodeTree);
+
 /** Table*/
 const keyword = ref<string>(""); // คำค้นหา
+const isAll = ref<boolean>(true); // แสดงตำแหน่งทั้งหมด
 const rows = ref<Users[]>([]); // ข้อมูลรายาการผู้ใช้งาน
 const currentPage = ref<number>(1); // หน้า
 const total = ref<number>(0); // จำนวนรายการ
@@ -118,12 +162,10 @@ const visibleColumns = ref<string[]>([
   "role",
   "enabled",
 ]);
-
 /** เพิ่มข้อมูลผู้ใช้งาน*/
 const modalDialogAdd = ref<boolean>(false); // เปิด ปิด popup
 const isStatusEdit = ref<boolean>(false); // สถานะการแก้ไข
 const userId = ref<string>(""); // id ผู้ใช้งานที่ต้องการแก้ไข
-
 // รายการตัวเลือก
 const itemMenu = ref<ItemsMenu[]>([
   {
@@ -151,24 +193,72 @@ const itemMenu = ref<ItemsMenu[]>([
     type: "delete",
   },
 ]);
-
 const employeeClassMain = ref<DataOption[]>([
   { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
   { id: "employee", name: "ลูกจ้างประจำ" },
 ]);
-
 const employeeClassOption = ref<DataOption[]>(employeeClassMain.value);
 
+/** ฟังก์ชันเรียกข้อมูลโครงสร้าง แบบปัจุบัน*/
+async function fetchOrganizationActive() {
+  showLoader();
+  await http
+    .get(config.API.activeOrganization)
+    .then(async (res) => {
+      const data = res.data.result;
+      if (data) {
+        activeId.value = data.activeId;
+        await fetchDataTree(data.activeId);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**
- * ฟังก์ชันดึงข้อมูลรายชื่อผู้ใช้งาน
+ * ฟังก์ชัน fetch ข้อมูลของโครงสร้าง
+ * @param id id โครงสร้าง
  */
+async function fetchDataTree(id: string) {
+  const tokenParsedData = await tokenParsed();
+  const isSuperAdmin = tokenParsedData.role.includes("SUPER_ADMIN");
+  if (!isSuperAdmin) {
+    nodeTree.value = [];
+  }
+  showLoader();
+  await http
+    .get(config.API.orgByid(id.toString()))
+    .then(async (res) => {
+      const data = await res.data.result;
+      nodeTree.value.push(...data);
+      orgId.value = nodeTree.value[0].orgTreeId || "";
+      await selectedOrg(nodeTree.value[0]);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ฟังก์ชันดึงข้อมูลรายชื่อผู้ใช้งาน*/
 async function fetchListUsers() {
   showLoader();
   await http
-    .get(
+    .post(config.API.managementUser + `/admin`, {
-      config.API.managementUser +
+      pageSize: pageSize.value,
-        `?pageSize=${pageSize.value}&page=${currentPage.value}&keyword=${keyword.value}&type=${employeeClass.value}`
+      page: currentPage.value,
-    )
+      keyword: keyword.value.trim(),
+      type: employeeClass.value,
+      isAll: isAll.value,
+      nodeId: orgId.value,
+      node: orgLevel.value,
+    })
     .then(async (res) => {
       const data = await res.data.result;
       total.value = data.total;
@@ -314,6 +404,19 @@ function filterFnOptions(val: string, update: Function, type: string) {
   }
 }
 
+async function selectedOrg(data: NodeTree) {
+  orgId.value = data.orgTreeId;
+  orgLevel.value = data.orgLevel;
+  currentPage.value = 1;
+  // ดึงข้อมูลผู้ใช้งานตามหน่วยงานที่เลือก
+  await fetchListUsers();
+}
+
+async function onSearchData() {
+  currentPage.value = 1;
+  await fetchListUsers();
+}
+
 /**
  * ดูการเปลี่ยนแปลงของจำนวนข้อมูลต่อหน้า
  * ดึงข้อมูลรายชื่อผู้ใช้งานตามจำนวนข้อมูลต่อหน้า
@@ -330,7 +433,7 @@ watch(
  * ดึงข้อมูลรายชื่อผู้ใช้งาน
  */
 onMounted(async () => {
-  await fetchListUsers();
+  await fetchOrganizationActive();
 });
 </script>
 
@@ -341,161 +444,285 @@ onMounted(async () => {
     </div>
   </div>
 
-  <q-card flast bordered class="q-pa-md">
+  <q-card flat bordered>
-    <div class="items-center col-12 row q-col-gutter-sm">
+    <q-card-section :horizontal="$q.screen.gt.xs">
-      <q-select
+      <!-- Tree  -->
-        outlined
+      <q-card-section
-        dense
+        class="col-lg-3 col-md-4 col-sm-5 col-xs-12 q-col-gutter-sm"
-        v-model="employeeClass"
-        :options="employeeClassOption"
-        label="สถานภาพ"
-        emit-value
-        map-options
-        option-label="name"
-        option-value="id"
-        use-input
-        hide-selected
-        fill-input
-        style="width: 300px"
-        @update:model-value="(currentPage = 1), fetchListUsers()"
-        @filter="(inputValue: string,
-  doneFn: Function) => filterFnOptions(inputValue, doneFn,'employeeClass')"
-        ><template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
-
-      <q-btn
-        class="q-ml-sm"
-        flat
-        round
-        dense
-        color="primary"
-        icon="add"
-        @click="openDialog()"
       >
-        <q-tooltip>เพิ่มผู้ใช้งาน </q-tooltip>
+        <div class="col-12">
-      </q-btn>
+          <div class="q-gutter-sm">
-      <q-space />
+            <div class="row q-col-gutter-sm q-pl-sm">
-
+              <div class="col-12">
-      <q-input
+                <q-input dense outlined v-model="filter" label="ค้นหา">
-        borderless
+                  <template v-slot:append>
-        dense
+                    <q-icon name="search" />
-        outlined
+                  </template>
-        v-model="keyword"
+                </q-input>
-        placeholder="ค้นหา"
-        @keydown.enter.prevent="(currentPage = 1), fetchListUsers()"
-      >
-        <template v-slot:append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
-      <q-select
-        v-model="visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="columns"
-        option-value="name"
-        style="min-width: 140px"
-      />
-    </div>
-
-    <div class="col-12 q-pt-sm">
-      <d-table
-        ref="table"
-        :columns="columns"
-        :rows="rows"
-        row-key="id"
-        flat
-        bordered
-        :paging="true"
-        dense
-        :rows-per-page-options="[10, 25, 50, 100]"
-        :visible-columns="visibleColumns"
-        @update:pagination="updatePagination"
-      >
-        <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-th>
-          </q-tr>
-        </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 === 'enabled'">
-                <q-icon
-                  :name="col.value ? 'check' : 'close'"
-                  :color="col.value ? 'primary' : 'red'"
-                  size="24px"
-                />
               </div>
-              <div v-else>
+            </div>
-                {{ col.value ? col.value : "-" }}
+            <div class="bg-white tree-container q-pa-xs">
-              </div>
+              <q-tree
-            </q-td>
+                class="q-pa-sm q-gutter-sm"
-            <q-td>
-              <q-btn
-                flat
                 dense
-                icon="mdi-dots-vertical"
+                default-expand-all
-                class="q-pa-none q-ml-xs"
+                :nodes="lazy"
-                color="grey-13"
+                node-key="orgTreeId"
-                size="12px"
+                label-key="labelName"
+                :filter="filter?.trim()"
+                no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                no-nodes-label="ไม่มีข้อมูล"
+                v-model:expanded="expanded"
               >
-                <q-menu>
+                <template v-slot:default-header="prop">
-                  <q-list dense style="min-width: 200px">
+                  <q-item
-                    <q-item
+                    @click.stop="selectedOrg(prop.node)"
-                      v-for="(item, index) in props.row.enabled
+                    :active="orgId == prop.node.orgTreeId"
-                        ? itemMenu.filter((e) => e.type !== 'open')
+                    clickable
-                        : itemMenu.filter((e) => e.type !== 'close')"
+                    active-class="my-list-link text-primary text-weight-medium"
-                      :key="index"
+                    class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                      clickable
+                  >
-                      v-close-popup
+                    <div>
-                      @click.stop="onClickAction(item.type, props.row)"
+                      <div
-                    >
+                        :class="
-                      <q-item-section>
+                          prop.node.isOfficer
-                        <div class="row items-center">
+                            ? 'text-weight-medium text-blue'
-                          <q-icon
+                            : 'text-weight-medium'
-                            :color="item.color"
+                        "
-                            size="17px"
+                      >
-                            :name="item.icon"
+                        <div
-                          />
+                          v-if="
-                          <div class="q-pl-md">{{ item.label }}</div>
+                            prop.node.isDeputy == true &&
+                            prop.node.orgLevel == 0
+                          "
+                          class="text-info"
+                        >
+                          {{ prop.node.orgTreeName }}
                         </div>
-                      </q-item-section>
+                        <div v-else>
-                    </q-item>
+                          {{ prop.node.orgTreeName }}
-                  </q-list>
+                        </div>
-                </q-menu>
+                        {{ prop.node.isOfficer ? "(สกจ.)" : "" }}
-              </q-btn>
+                      </div>
-            </q-td>
+                      <div class="text-weight-light text-grey-8">
-          </q-tr>
+                        {{
-        </template>
+                          prop.node.orgCode == null ? null : prop.node.orgCode
-        <template v-slot:pagination="scope">
+                        }}
-          ทั้งหมด {{ total }} รายการ
+                        {{
-          <q-pagination
+                          prop.node.orgTreeShortName == null
-            v-model="currentPage"
+                            ? null
-            active-color="primary"
+                            : prop.node.orgTreeShortName
-            color="dark"
+                        }}
-            :max="Number(maxPage)"
+                      </div>
-            size="sm"
+                    </div>
-            boundary-links
+                  </q-item>
-            direction-links
+                </template>
-            :max-pages="5"
+              </q-tree>
-            @update:model-value="fetchListUsers"
+            </div>
-          ></q-pagination>
+          </div>
-        </template>
+        </div>
-      </d-table>
+      </q-card-section>
-    </div>
+      <q-separator :vertical="$q.screen.gt.xs" />
+
+      <!-- Table -->
+      <q-card-section
+        class="col-lg-9 col-md-8 col-sm-7 col-xs-12"
+        style="height: 85vh"
+      >
+        <div class="col-12 q-col-gutter-sm scroll" style="height: 100%">
+          <div class="col-12">
+            <div class="col-12 row q-col-gutter-sm items-end">
+              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3">
+                <div class="row q-col-gutter-sm items-center">
+                  <div class="col-11">
+                    <q-select
+                      outlined
+                      dense
+                      v-model="employeeClass"
+                      :options="employeeClassOption"
+                      label="สถานภาพ"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      option-value="id"
+                      use-input
+                      hide-selected
+                      fill-input
+                      @update:model-value="onSearchData"
+                      @filter="(inputValue: string,
+        doneFn: Function) => filterFnOptions(inputValue, doneFn,'employeeClass')"
+                      ><template v-slot:no-option>
+                        <q-item>
+                          <q-item-section class="text-grey">
+                            ไม่มีข้อมูล
+                          </q-item-section>
+                        </q-item>
+                      </template>
+                    </q-select>
+                  </div>
+                  <div class="col-1">
+                    <q-btn
+                      flat
+                      round
+                      dense
+                      color="primary"
+                      icon="add"
+                      @click="openDialog()"
+                    >
+                      <q-tooltip>เพิ่มผู้ใช้งาน </q-tooltip>
+                    </q-btn>
+                  </div>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-0 col-md-0 col-lg-3"></div>
+              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
+                <div class="row q-col-gutter-sm items-center">
+                  <div class="col-4">
+                    <q-checkbox
+                      keep-color
+                      v-model="isAll"
+                      label="แสดงตำแหน่งทั้งหมด"
+                      color="primary"
+                      @update:model-value="onSearchData"
+                    >
+                      <q-tooltip
+                        >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
+                      >
+                    </q-checkbox>
+                  </div>
+                  <div class="col-5">
+                    <q-input
+                      borderless
+                      dense
+                      outlined
+                      v-model="keyword"
+                      placeholder="ค้นหา"
+                      @keydown.enter.prevent="onSearchData"
+                    >
+                      <template v-slot:append>
+                        <q-icon name="search" />
+                      </template>
+                    </q-input>
+                  </div>
+                  <div class="col-3">
+                    <q-select
+                      v-model="visibleColumns"
+                      multiple
+                      outlined
+                      dense
+                      options-dense
+                      :display-value="$q.lang.table.columns"
+                      emit-value
+                      map-options
+                      :options="columns"
+                      option-value="name"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-12">
+            <d-table
+              ref="table"
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              flat
+              bordered
+              :paging="true"
+              dense
+              :rows-per-page-options="[10, 25, 50, 100]"
+              :visible-columns="visibleColumns"
+              @update:pagination="updatePagination"
+            >
+              <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-th>
+                </q-tr>
+              </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 === 'enabled'">
+                      <q-icon
+                        :name="col.value ? 'check' : 'close'"
+                        :color="col.value ? 'primary' : 'red'"
+                        size="24px"
+                      />
+                    </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 props.row.enabled
+                              ? itemMenu.filter((e) => e.type !== 'open')
+                              : itemMenu.filter((e) => e.type !== 'close')"
+                            :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">
+                ทั้งหมด {{ total }} รายการ
+                <q-pagination
+                  v-model="currentPage"
+                  active-color="primary"
+                  color="dark"
+                  :max="Number(maxPage)"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                  :max-pages="5"
+                  @update:model-value="fetchListUsers"
+                ></q-pagination>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card-section>
   </q-card>
 
   <DialogAddUser
@@ -507,4 +734,19 @@ onMounted(async () => {
   />
 </template>
 
-<style scoped></style>
+<style scoped>
+.tree-container {
+  overflow: auto;
+  height: 76vh;
+  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>