From fec88e36bbb48f4f13a3f3314ef2534af9676e11 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 8 May 2024 11:51:21 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B8=8A=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=89=E0=B8=A7=E0=B8=B1=E0=B8=94=20=3D>=20=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=B4=E0=B9=89=E0=B8=B7=E0=B8=A1=E0=B8=A3=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=20=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B9=84=E0=B8=94=E0=B9=89?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=AB=E0=B8=A1=E0=B8=AD=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=A1=E0=B8=B2=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |   5 +
 .../Indicators/Assignment/DetailView.vue      | 645 ++++++++++++++++++
 .../01_metadataNew/interface/request/Main.ts  |   2 +-
 src/modules/01_metadataNew/router.ts          |  26 +
 .../01_metadataNew/views/Assignment.vue       | 205 ++++++
 .../01_metadataNew/views/indicatorByPlan.vue  |   2 -
 6 files changed, 882 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/01_metadataNew/components/Indicators/Assignment/DetailView.vue
 create mode 100644 src/modules/01_metadataNew/views/Assignment.vue

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index d7aa13eae..c4ccd71d7 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -99,6 +99,11 @@ const menuList = readonly<any[]>([
             path: "KPIIndicatorByRole",
             role: "evaluateKPI",
           },
+          {
+            label: "งานที่ได้รับมอบหมาย",
+            path: "KPIAssignment",
+            role: "evaluateKPI",
+          },
         ],
       },
       {
diff --git a/src/modules/01_metadataNew/components/Indicators/Assignment/DetailView.vue b/src/modules/01_metadataNew/components/Indicators/Assignment/DetailView.vue
new file mode 100644
index 000000000..bd5d8ff1a
--- /dev/null
+++ b/src/modules/01_metadataNew/components/Indicators/Assignment/DetailView.vue
@@ -0,0 +1,645 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { FormDataRole } from "@/modules/01_metadataNew/interface/request/Main";
+import type { DataOption } from "@/modules/01_metadataNew/interface/index/Main";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+
+const heightSize = ref<string>("224");
+const filter = ref<string>("");
+const node = ref<any>([]);
+const expanded = ref<string[]>([]);
+const orgName = ref<string>("");
+const nodeId = ref<string>("");
+
+const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogConfirm,
+  dialogMessageNotify,
+} = useCounterMixin();
+const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
+
+const modalDialogSelect = ref<boolean>(false);
+const form = reactive<FormDataRole>({
+  position: "", //ตำแหน่งในสายงาน
+  year: new Date().getFullYear(), //ปีงบประมาณ
+  round: "", //รอบการประเมิน
+  org: "", //หน่วยงาน/ส่วนราชการ
+  including: "", //รหัสตัวชี้วัด
+  includingName: "", //ชื่อตัวชี้วัด
+  target: "", //ค่าเป้าหมาย
+  unit: "", //หน่วยนับ
+  weight: "", //น้ำหนัก
+  meaning: "", //นิยามหรือความหมาย
+  formula: "", //สูตรคำนวณ
+  documentInfoEvidence: "", //ข้อมูลเอกสารหลักฐาน
+
+  node: null,
+  nodeId: null,
+  orgRevisionId: null,
+});
+
+const fieldLabels = {
+  score5: "5",
+  score4: "4",
+  score3: "3",
+  score2: "2",
+  score1: "1",
+};
+
+const formScore = reactive<any>({
+  score5: "",
+  score4: "",
+  score3: "",
+  score2: "",
+  score1: "",
+});
+
+const positionOp = ref<DataOption[]>([]);
+const positionMainOp = ref<DataOption[]>([]);
+
+/** Option  รอบการประเมิน*/
+const roundOp = ref<DataOption[]>([
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
+]);
+
+/**
+ * function ต้นหาข้อมูลของ Option
+ * @param val ค่าที่ต้องการฟิลเตอร์
+ * @param update  อัพเดทค่า
+ * @param refData ดาต้าที่ต้องการฟิลเตอร์
+ */
+function filterOption(val: any, update: Function) {
+  update(() => {
+    positionOp.value = positionMainOp.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+/** ดึงข้อมูลตำแหน่ง */
+function getOptions() {
+  http.get(config.API.orgSalaryPosition).then((res) => {
+    const dataOp = res.data.result;
+    const uniqueNames = new Set();
+    const filteredData = dataOp
+      .filter((item: any) => {
+        if (!uniqueNames.has(item.positionName)) {
+          uniqueNames.add(item.positionName);
+          return true;
+        }
+        return false;
+      })
+      .map((item: any) => ({
+        id: item.positionName,
+        name: item.positionName,
+      }));
+
+    positionMainOp.value = filteredData;
+  });
+}
+
+/** เปิด Dialog หน่วยงาน */
+function selectAgency() {
+  modalDialogSelect.value = true;
+}
+
+/** บันทึกข้อมูล */
+function onSubmit() {
+  const url = id.value
+    ? config.API.kpiRoleMainList + `/${id.value}`
+    : config.API.kpiRoleMainList;
+
+  const body = {
+    year: form.year == 0 ? null : form.year,
+    position: form.position, //ตำแหน่ง
+    period: form.round, //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
+    includingName: form.includingName, //ชื่อตัวชี้วัด
+    target: form.target, //ค่าเป้าหมาย
+    unit: form.unit, //หน่วยนับ
+    weight: form.weight, //น้ำหนัก
+    achievement1: formScore.score1, //ผลสำเร็จของงาน 1
+    achievement2: formScore.score2, //ผลสำเร็จของงาน 2
+    achievement3: formScore.score3, //ผลสำเร็จของงาน 3
+    achievement4: formScore.score4, //ผลสำเร็จของงาน 4
+    achievement5: formScore.score5, //ผลสำเร็จของงาน 5
+    meaning: form.meaning, //นิยามหรือความหมาย
+    formula: form.formula, //สูตรคำนวณ
+    documentInfoEvidence: form.documentInfoEvidence, //ข้อมูลเอกสารหลักฐาน
+
+    node: form.node, //ระดับหน่วยงาน
+    nodeId: form.nodeId, //id หน่วยงาน
+    orgRevisionId: form.orgRevisionId, //RevisionId หน่วยงาน
+  };
+
+  if (form.nodeId == null) {
+    dialogMessageNotify($q, "กรุณาเลือกหน่วยงาน/ส่วนราชการ");
+  } else {
+    dialogConfirm($q, () => {
+      showLoader();
+      http[id.value ? "put" : "post"](url, body)
+        .then(() => {
+          success($q, "บันทึกสำเร็จ");
+          id.value ? getDetail() : router.push(`/KPI-indicator-role`);
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  }
+}
+
+//
+//
+function getDetail() {
+  showLoader();
+  http
+    .get(config.API.kpiRoleMainList + `/${id.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      form.position = data.position;
+      form.year = data.year == null ? 0 : data.year;
+      form.round = data.round;
+      form.including = data.including;
+      form.includingName = data.includingName;
+      form.target = data.target;
+      form.unit = data.unit;
+      form.weight = data.weight;
+      form.meaning = data.meaning;
+      form.formula = data.formula;
+
+      formScore.score1 = data.achievement1;
+      formScore.score2 = data.achievement2;
+      formScore.score3 = data.achievement3;
+      formScore.score4 = data.achievement4;
+      formScore.score5 = data.achievement5;
+
+      form.node = data.node;
+      form.nodeId = data.nodeId;
+      form.orgRevisionId = data.orgRevisionId;
+      const arrayExpanded = [
+        data.root,
+        data.child1,
+        data.child2,
+        data.child3,
+        data.child4,
+      ];
+      expanded.value = arrayExpanded.filter((e) => e !== null).slice(0, -1);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchActive() {
+  showLoader();
+  http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      fetchTree(data.activeId);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+async function fetchTree(id: string) {
+  showLoader();
+  http
+    .get(config.API.orgByid(id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      node.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function updateSelected(data: any) {
+  nodeId.value = data.orgTreeId;
+  orgName.value = data.orgTreeName;
+  form.node = data.orgLevel;
+  form.nodeId = data.orgTreeId;
+  form.orgRevisionId = data.orgRevisionId;
+}
+
+function onResize(size: any) {
+  heightSize.value = `${size.height - 99}`;
+}
+
+function setModel(val: string) {
+  form.position = val;
+}
+
+onMounted(() => {
+  fetchActive();
+//   getOptions();
+//   if (id.value !== "") {
+//     getDetail();
+//   }
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      flat
+      round
+      dense
+      class="q-mr-sm"
+      icon="mdi-arrow-left"
+      color="primary"
+      @click="router.go(-1)"
+    />
+    {{ `${title}งานที่ได้รับมอบหมาย` }}
+  </div>
+  <q-card flat>
+    <q-form greedy @submit.prevent @validation-success="onSubmit">
+      <q-card-section>
+        <div class="row q-col-gutter-sm">
+          <div class="col-8">
+            <q-select
+              dense
+              :model-value="form.position"
+              label="ตำแหน่งในสายงาน"
+              outlined
+              emit-value
+              map-options
+              fill-input
+              hide-selected
+              lazy-rules
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งในสายงาน'}`,]"
+              hide-bottom-space
+              option-label="name"
+              option-value="id"
+              class="inputgreen"
+              :options="positionOp"
+              use-input
+              @input-value="setModel"
+              @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+            >
+              <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-2">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="form.year"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              @update:model-value="form.round = ''"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  class="inputgreen"
+                  outlined
+                  :model-value="
+                    form.year === 0 ? null : Number(form.year) + 543
+                  "
+                  :label="`${'ปีงบประมาณ'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                  <template v-slot:append>
+                    <q-icon
+                      v-if="form.year"
+                      name="cancel"
+                      class="cursor-pointer"
+                      @click.stop.prevent="
+                        form.year = 0;
+                        form.round = '';
+                      "
+                    />
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-2">
+            <q-select
+              :readonly="form.year == 0"
+              dense
+              outlined
+              v-model="form.round"
+              :options="roundOp"
+              option-label="name"
+              option-value="id"
+              emit-value
+              map-options
+              input-class="text-red"
+              label="รอบการประเมิน"
+              class="inputgreen"
+            />
+          </div>
+          <div class="col-2" v-if="id">
+            <q-input
+              label="ลำดับ/รหัสตัวชี้วัด"
+              v-model="form.including"
+              outlined
+              readonly
+              dense
+              class="inputgreen"
+            />
+          </div>
+          <div class="col-4">
+            <q-input
+              label="ชื่อตัวชี้วัด"
+              v-model="form.includingName"
+              outlined
+              dense
+              class="inputgreen"
+              lazy-rules
+              :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-2">
+            <q-input
+              label="ค่าเป้าหมาย"
+              v-model="form.target"
+              outlined
+              dense
+              class="inputgreen"
+              lazy-rules
+              :rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-2">
+            <q-input
+              label="หน่วยนับ"
+              v-model="form.unit"
+              outlined
+              dense
+              class="inputgreen"
+              lazy-rules
+              :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-2">
+            <q-input
+              label="น้ำหนัก"
+              v-model="form.weight"
+              outlined
+              dense
+              class="inputgreen"
+              lazy-rules
+              :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก'}`,]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-4">
+            <q-card flat bordered class="full-height">
+              <q-card-section class="bg-grey-3 q-pa-sm">
+                <div class="text-dark text-body2 text-weight-medium">
+                  หน่วยงาน/ส่วนราชการ
+                </div>
+              </q-card-section>
+              <q-card-section class="q-pa-sm">
+                <q-input
+                  dense
+                  outlined
+                  v-model="filter"
+                  label="ค้นหา"
+                  class="inputgreen"
+                >
+                  <template v-slot:append>
+                    <q-icon
+                      v-if="filter !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="filter = ''"
+                    />
+                    <q-icon v-else name="search" color="grey-5" />
+                  </template>
+                </q-input>
+                <q-scroll-area
+                  visible
+                  :style="{ height: `${heightSize}px`, marginTop: '5px' }"
+                >
+                  <q-tree
+                    dense
+                    :nodes="node"
+                    node-key="orgTreeId"
+                    label-key="orgTreeName"
+                    v-model:expanded="expanded"
+                    :filter="filter"
+                    no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                    no-nodes-label="ไม่มีข้อมูล"
+                  >
+                    <template v-slot:default-header="prop">
+                      <q-item
+                        clickable
+                        @click.stop="updateSelected(prop.node)"
+                        :active="form.nodeId === prop.node.orgTreeId"
+                        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>
+                </q-scroll-area>
+              </q-card-section>
+            </q-card>
+          </div>
+          <div class="col-8">
+            <q-card flat bordered>
+              <q-resize-observer @resize="onResize" />
+              <q-card-section class="bg-grey-3 q-pa-sm">
+                <div class="row text-dark text-body2 text-weight-medium">
+                  <div class="text-center col-4">ระดับคะแนน</div>
+                  <div class="col-8">ผลสำเร็จของงาน</div>
+                </div>
+              </q-card-section>
+              <q-card-section class="q-pa-none">
+                <div
+                  v-for="(field, index) in Object.keys(fieldLabels)"
+                  :key="index + 1"
+                >
+                  <div class="row q-pa-sm">
+                    <div
+                      class="col-4 text-center text-body1 text-weight-bold self-center"
+                    >
+                      {{ fieldLabels[field as keyof typeof fieldLabels] }}
+                    </div>
+                    <div class="col-8 text-left">
+                      <!-- <q-field
+                    class="q_field_p_none"
+                    ref="fieldRef"
+                    v-model="formScore[field]"
+                    label-slot
+                    borderless
+                    :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
+                    hide-bottom-space
+                  >
+                    <template #control>
+                      <q-editor
+                        class="full-width"
+                        v-model="formScore[field]"
+                        :dense="$q.screen.lt.md"
+                        min-height="5rem"
+                        :toolbar="[
+                          [
+                            'bold',
+                            'italic',
+                            'strike',
+                            'underline',
+                            'subscript',
+                            'superscript',
+                          ],
+
+                          ['unordered', 'ordered'],
+                        ]"
+                        :fonts="{
+                          arial: 'Arial',
+                          arial_black: 'Arial Black',
+                          comic_sans: 'Comic Sans MS',
+                          courier_new: 'Courier New',
+                          impact: 'Impact',
+                          lucida_grande: 'Lucida Grande',
+                          times_new_roman: 'Times New Roman',
+                          verdana: 'Verdana',
+                        }"
+                      />
+                    </template>
+                  </q-field> -->
+                      <q-input
+                        v-model="formScore[field]"
+                        dense
+                        outlined
+                        class="inputgreen"
+                        label="กรอกผลสำเร็จของงาน"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="col-12"
+                    v-if="index !== Object.keys(fieldLabels).length - 1"
+                  >
+                    <q-separator />
+                  </div>
+                </div>
+              </q-card-section>
+            </q-card>
+          </div>
+          <div class="col-12">
+            <q-input
+              v-model="form.meaning"
+              label="นิยามหรือความหมาย"
+              dense
+              outlined
+              lazy-rules
+              class="inputgreen"
+              :rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมาย'}`,]"
+              hide-bottom-space
+              type="textarea"
+            />
+          </div>
+          <div class="col-12">
+            <q-input
+              v-model="form.formula"
+              label="สูตรคำนวณ"
+              dense
+              outlined
+              lazy-rules
+              class="inputgreen"
+              :rules="[(val:string) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`,]"
+              hide-bottom-space
+              type="textarea"
+            />
+          </div>
+          <div class="col-12">
+            <q-input
+              class="inputgreen"
+              v-model="form.documentInfoEvidence"
+              label="ข้อมูลเอกสารหลักฐาน"
+              outlined
+              dense
+              type="textarea"
+            ></q-input>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn color="public" label="บันทึก" type="submit" unelevated>
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-form>
+  </q-card>
+</template>
+
+<style scoped>
+.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>
diff --git a/src/modules/01_metadataNew/interface/request/Main.ts b/src/modules/01_metadataNew/interface/request/Main.ts
index eaf55552d..a2448b81a 100644
--- a/src/modules/01_metadataNew/interface/request/Main.ts
+++ b/src/modules/01_metadataNew/interface/request/Main.ts
@@ -21,7 +21,7 @@ interface FormListMainByRole {
 }
 interface FormDataRole {
   position: string;
-  year: number;
+  year: number | null;
   round: string;
   org: string;
   including: string;
diff --git a/src/modules/01_metadataNew/router.ts b/src/modules/01_metadataNew/router.ts
index 604134d94..f716f1775 100644
--- a/src/modules/01_metadataNew/router.ts
+++ b/src/modules/01_metadataNew/router.ts
@@ -35,6 +35,12 @@ const competencyAddPage = () =>
   import("@/modules/01_metadataNew/components/competency/AddPage.vue");
 const StrategicView = () =>
   import("@/modules/01_metadataNew/views/Strategic.vue");
+const AssignmentView = () =>
+  import("@/modules/01_metadataNew/views/Assignment.vue");
+const AssignmentDetailView = () =>
+  import(
+    "@/modules/01_metadataNew/components/Indicators/Assignment/DetailView.vue"
+  );
 
 export default [
   {
@@ -220,4 +226,24 @@ export default [
       Role: "development",
     },
   },
+  {
+    path: "/assignment",
+    name: "KPIAssignment",
+    component: AssignmentView,
+    meta: {
+      Auth: true,
+      Key: [1.6],
+      Role: "development",
+    },
+  },
+  {
+    path: "/assignment/:id",
+    name: "KPIAssignmentById",
+    component: AssignmentDetailView,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "evaluateKPI",
+    },
+  },
 ];
diff --git a/src/modules/01_metadataNew/views/Assignment.vue b/src/modules/01_metadataNew/views/Assignment.vue
new file mode 100644
index 000000000..d38186ddb
--- /dev/null
+++ b/src/modules/01_metadataNew/views/Assignment.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { useQuasar, type QTableProps } from "quasar";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const router = useRouter();
+const { showLoader, hideLoader, dialogRemove, success, messageError } =
+  useCounterMixin();
+
+/** table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "including",
+    align: "left",
+    label: "รหัสตัวชี้วัด",
+    sortable: true,
+    field: "including",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "includingName",
+    align: "left",
+    label: "ชื่อตัวชี้วัด",
+    sortable: true,
+    field: "includingName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>(["including", "includingName"]);
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+
+function onClickView(id: string = "") {
+  router.push(`/assignment/${id}`);
+}
+
+function onClickHistory(id: string) {}
+
+function onClickDelete(id: string) {
+  dialogRemove($q, () => {
+    console.log(id);
+  });
+}
+
+onMounted(() => {
+  showLoader();
+  const list = [
+    {
+      id: "1",
+      including: "12",
+      includingName: "name",
+    },
+  ];
+
+  setTimeout(() => {
+    rows.value = list;
+    hideLoader();
+  }, 100);
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการงานที่ได้รับมอบหมาย
+  </div>
+  <q-card flat bordered class="q-pa-md">
+    <div class="row q-col-gutter-sm q-pl-sm">
+      <q-toolbar style="padding: 0">
+        <q-space />
+        <div class="row q-gutter-sm">
+          <q-input dense outlined v-model="filter" label="ค้นหา">
+            <template v-slot:append>
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="filter = ''"
+              />
+              <q-icon v-else name="search" color="grey-5" />
+            </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"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+      </q-toolbar>
+    </div>
+    <div class="col-12">
+      <d-table
+        for="table"
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="id"
+        flat
+        bordered
+        dense
+        class="custom-header-table"
+        :rows-per-page-options="[10, 25, 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>
+        </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 class="table_ellipsis">
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                flat
+                round
+                color="grey"
+                @click.stop
+                size="14px"
+                icon="more_vert"
+              >
+                <q-menu>
+                  <q-list style="min-width: 180px">
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="onClickView(props.row.id)"
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                        <q-icon
+                          color="primary"
+                          size="xs"
+                          name="mdi-pencil-outline"
+                        />
+                      </q-item-section>
+                      <q-item-section>แก้ไขข้อมูล</q-item-section>
+                    </q-item>
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="onClickHistory(props.row.id)"
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-tooltip>ประวัติการแก้ไข</q-tooltip>
+                        <q-icon color="info" size="xs" name="mdi-history" />
+                      </q-item-section>
+                      <q-item-section>ประวัติการแก้ไข</q-item-section>
+                    </q-item>
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click.stop.pervent="onClickDelete(props.row.id)"
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-tooltip>ลบข้อมูล</q-tooltip>
+                        <q-icon color="red" size="xs" name="mdi-delete" />
+                      </q-item-section>
+                      <q-item-section>ลบข้อมูล</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/01_metadataNew/views/indicatorByPlan.vue b/src/modules/01_metadataNew/views/indicatorByPlan.vue
index aa00a8a6b..638e936e7 100644
--- a/src/modules/01_metadataNew/views/indicatorByPlan.vue
+++ b/src/modules/01_metadataNew/views/indicatorByPlan.vue
@@ -334,7 +334,6 @@ onMounted(async () => {
             </q-checkbox>
 
             <q-input
-             
               standout
               dense
               v-model="nodeData.keyword"
@@ -354,7 +353,6 @@ onMounted(async () => {
               </template>
             </q-input>
             <q-select
-         
               v-model="visibleColumns"
               multiple
               outlined