ออกคำสั่ง === fix filter

2024-12-02 17:02:54 +07:00 · 2024-12-02 17:02:54 +07:00 · 810115eb41
commit 810115eb41
parent 8ede2c6d09
13 changed files with 227 additions and 2517 deletions
--- a/src/modules/18_command/components/Main/DialogFormCommand.vue
+++ b/src/modules/18_command/components/Main/DialogFormCommand.vue
@ -76,7 +76,6 @@ function onSubmit() {
 */
 function filterSelector(val: string, update: Function) {
  update(() => {
-    commandType.value = val ? "" : commandType.value;
    commandOp.value = listCommand.value.filter(
      (v: any) => v.name.indexOf(val) > -1
    );
@ -90,6 +89,7 @@ function filterSelector(val: string, update: Function) {
 function onClose() {
  modal.value = false;
  commandNo.value = "";
+  commandType.value = "";
  commandYear.value = new Date().getFullYear();
 }

@ -129,10 +129,12 @@ watch(modal, () => {
                option-value="id"
                lazy-rules
                use-input
+                hide-selected
+                fill-input
                hide-bottom-space
                outlined
                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
-                @filter="(inputValue:any,
+                @filter="(inputValue:string,
                    doneFn:Function) => filterSelector(inputValue, doneFn) "
              >
                <template v-slot:no-option>
--- a/src/modules/18_command/components/Main/TableMain.vue
+++ b/src/modules/18_command/components/Main/TableMain.vue
@ -35,72 +35,6 @@ const props = defineProps({
  fetchList: { type: Function, required: true },
 });

-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "commandNo",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: false,
-    field: "commandNo",
-    format(val, row) {
-      return val ? `${val}/${row.commandYear + 543}` : "-";
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "issue",
-    align: "left",
-    label: "ชื่อคำสั่ง",
-    sortable: true,
-    field: "issue",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "commandAffectDate",
-    align: "left",
-    label: "วันที่ลงนาม",
-    sortable: false,
-    field: "commandAffectDate",
-    format(val) {
-      return val ? date2Thai(val) : "-";
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "commandExcecuteDate",
-    align: "left",
-    label: "วันที่คำสั่งมีผล",
-    sortable: false,
-    field: "commandExcecuteDate",
-    format(val) {
-      return val ? date2Thai(val) : "-";
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "createdFullName",
-    align: "left",
-    label: "ผู้สร้าง",
-    sortable: false,
-    field: "createdFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "assignFullName",
-    align: "left",
-    label: "ผู้ลงนาม",
-    sortable: false,
-    field: "assignFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
 const modalCopy = ref<boolean>(false);
 const isCheckPageSize = ref<boolean>(false);
 const commandId = ref<string>("");
@ -208,7 +142,8 @@ onMounted(() => {
 <template>
  <d-table
    ref="table"
-    :columns="columns"
+    :columns="store.columns"
+    :visible-columns="store.visibleColumns"
    :rows="store.rows"
    row-key="id"
    flat
--- a/src/modules/18_command/components/Step/2_ListPersons.vue
+++ b/src/modules/18_command/components/Step/2_ListPersons.vue
@ -5,7 +5,6 @@ import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
-import { usePosSalaryDataStore } from "@/modules/18_command/store/PosSalary";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
 import { useCounterMixin } from "@/stores/mixin";

@ -21,8 +20,6 @@ import DialogSalary from "@/modules/18_command/components/Step/Dialog2_Salary.vu
 const $q = useQuasar();
 const route = useRoute();
 const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
-
-const storePosSalary = usePosSalaryDataStore();
 const store = useCommandDetail();
 const {
  dialogConfirm,
@ -42,6 +39,7 @@ const props = defineProps({
 });

 const ListCommandSalary = ref<ListCommandSalaryType[]>([]);
+const ListCommandSalaryMain = ref<ListCommandSalaryType[]>([]);

 let selectPersonData = reactive<PersonInfo>({
  id: "",
@ -58,7 +56,6 @@ let selectPersonData = reactive<PersonInfo>({
  mouthSalaryAmount: 0,
 });
 const commandReciveId = ref<string>(""); //เก็บ id commandReciveId
-const posNoOptions = ref<DataOption[]>(storePosSalary.optionPos);
 const templatePos = ref<string>("");
 const position = ref<string>("");

@ -120,7 +117,7 @@ const modalPerson = ref<boolean>(false);
 * @param val
 */
 function updatePos(val: string) {
-  const data = ListCommandSalary.value.find(
+  const data = ListCommandSalaryMain.value.find(
    (item: ListCommandSalaryType) => item.id === val
  );
  if (data) {
@ -183,7 +180,7 @@ function filterSelector(val: string, update: Function, filtername: string) {
  switch (filtername) {
    case "pos":
      update(() => {
-        posNoOptions.value = storePosSalary.optionPos.filter(
+        ListCommandSalary.value = ListCommandSalaryMain.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
@ -222,6 +219,7 @@ async function getCommandSalaryList(type: string) {
    .get(config.API.commandSalaryList(type))
    .then(async (res) => {
      const data = await res.data.result;
+      ListCommandSalaryMain.value = data;
      ListCommandSalary.value = data;
    })
    .catch((e) => {
@ -279,11 +277,13 @@ onMounted(async () => {
                option-value="id"
                hide-bottom-space
                use-input
+                hide-selected
+                fill-input
                emit-value
                map-options
                input-debounce="0"
                @update:modelValue="updatePos"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
                  doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
                  )"
              />
@ -327,16 +327,9 @@ onMounted(async () => {
                  outlined
                  debounce="300"
                  placeholder="ค้นหา"
-                  style="max-width: 200px"
                >
                  <template v-slot:append>
-                    <q-icon v-if="filter == ''" name="search" />
-                    <q-icon
-                      v-if="filter !== ''"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click="filter = ''"
-                    />
+                    <q-icon name="search" />
                  </template>
                </q-input>
                <!-- แสดงคอลัมน์ใน table -->
--- a/src/modules/18_command/components/Step/3_ReceivedCopy.vue
+++ b/src/modules/18_command/components/Step/3_ReceivedCopy.vue
@ -219,17 +219,10 @@ onMounted(() => {
          outlined
          debounce="300"
          placeholder="ค้นหา"
-          style="max-width: 200px"
          class="q-ml-sm"
        >
          <template v-slot:append>
-            <q-icon v-if="filter == ''" name="search" />
-            <q-icon
-              v-if="filter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click.prevent="filter = ''"
-            />
+            <q-icon name="search" />
          </template>
        </q-input>
        <!-- แสดงคอลัมน์ใน table -->
--- a/src/modules/18_command/store/ListStore.ts
+++ b/src/modules/18_command/store/ListStore.ts
@ -6,17 +6,91 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";

+import type { QTableProps } from "quasar";
 import type {
  DataListCommand,
  DataCommandType,
 } from "@/modules/18_command/interface/response/Main";

 const $q = useQuasar();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { showLoader, hideLoader, date2Thai, messageError } = useCounterMixin();

 export const useCommandListStore = defineStore("commandListStore", () => {
  const tabsMain = ref<string>("DRAFT");
  const rows = ref<DataListCommand[]>([]);
+  const columns = ref<QTableProps["columns"]>([
+    {
+      name: "commandNo",
+      align: "left",
+      label: "เลขที่คำสั่ง",
+      sortable: false,
+      field: "commandNo",
+      format(val, row) {
+        return val ? `${val}/${row.commandYear + 543}` : "-";
+      },
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "issue",
+      align: "left",
+      label: "ชื่อคำสั่ง",
+      sortable: true,
+      field: "issue",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "commandAffectDate",
+      align: "left",
+      label: "วันที่ลงนาม",
+      sortable: false,
+      field: "commandAffectDate",
+      format(val) {
+        return val ? date2Thai(val) : "-";
+      },
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "commandExcecuteDate",
+      align: "left",
+      label: "วันที่คำสั่งมีผล",
+      sortable: false,
+      field: "commandExcecuteDate",
+      format(val) {
+        return val ? date2Thai(val) : "-";
+      },
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "createdFullName",
+      align: "left",
+      label: "ผู้สร้าง",
+      sortable: false,
+      field: "createdFullName",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "assignFullName",
+      align: "left",
+      label: "ผู้ลงนาม",
+      sortable: false,
+      field: "assignFullName",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+  const visibleColumns = ref<string[]>([
+    "commandNo",
+    "issue",
+    "commandAffectDate",
+    "commandExcecuteDate",
+    "createdFullName",
+    "assignFullName",
+  ]);
  const total = ref<number>(0);
  const maxPage = ref<number>(0);

@ -30,7 +104,7 @@ export const useCommandListStore = defineStore("commandListStore", () => {
  async function fetchCommandType() {
    //เช็คค่าของ listCommand
    if (listCommand.value.length === 0) {
-      showLoader();
+      // showLoader();
      try {
        const res = await http.get(config.API.commandType);
        const data = res.data.result;
@ -44,7 +118,7 @@ export const useCommandListStore = defineStore("commandListStore", () => {
      } catch (err) {
        messageError($q, err);
      } finally {
-        hideLoader();
+        // hideLoader();
      }
    } else {
      return listCommand.value;
@ -54,6 +128,8 @@ export const useCommandListStore = defineStore("commandListStore", () => {
  return {
    tabsMain,
    rows,
+    columns,
+    visibleColumns,
    total,
    maxPage,
    fetchCommandType,
--- a/src/modules/18_command/views/lists.vue
+++ b/src/modules/18_command/views/lists.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";

 import { checkPermission } from "@/utils/permissions";
@ -13,7 +13,6 @@ import type {
  DataOption,
 } from "@/modules/18_command/interface/index/Main";
 import type { FormQuery } from "@/modules/18_command/interface/request/Main";
-import type { ResListCommand } from "@/modules/18_command/interface/response/Main";

 import DialogFormCommand from "@/modules/18_command/components/Main/DialogFormCommand.vue";
 import TableList from "@/modules/18_command/components/Main/TableMain.vue";
@ -38,7 +37,12 @@ const queryParams = reactive<FormQuery>({
  keyword: "", //คำค้นหา
  commandTypeId: "",
 });
-const commandOpMain = ref<DataOption[]>([]);
+const commandOpMain = ref<DataOption[]>([
+  {
+    id: "",
+    name: "ทั้งหมด",
+  },
+]);
 const commandOp = ref<DataOption[]>([]);

 const modalAdd = ref<boolean>(false); // เพิ่มคำสั่ง
@ -47,12 +51,17 @@ const modalAdd = ref<boolean>(false); // เพิ่มคำสั่ง
 * ฟังก์ชันดึงข้อมูลรายการคำสั่ง
 */
 async function fetchListCommand() {
+  store.rows = [];
  showLoader();
  await http
    .get(config.API.commandList, {
-      params: { ...queryParams, status: store.tabsMain },
+      params: {
+        ...queryParams,
+        status: store.tabsMain,
+        keyword: queryParams.keyword.trim(),
+      },
    })
-    .then(async (res: ResListCommand) => {
+    .then(async (res) => {
      const data = await res.data.result;
      store.rows = data.data;
      store.total = data.total;
@ -73,7 +82,6 @@ async function fetchListCommand() {
 */
 function filterSelector(val: string, update: Function) {
  update(() => {
-    queryParams.commandTypeId = val ? "" : queryParams.commandTypeId;
    commandOp.value = commandOpMain.value.filter(
      (v: DataOption) => v.name.indexOf(val) > -1
    );
@ -82,8 +90,10 @@ function filterSelector(val: string, update: Function) {

 onMounted(async () => {
  const data = await store.fetchCommandType();
-  commandOpMain.value = data ? data : [];
-  commandOp.value = commandOpMain.value;
+  if (data) {
+    commandOpMain.value.push(...data);
+    commandOp.value = commandOpMain.value;
+  }
 });
 </script>

@ -91,93 +101,120 @@ onMounted(async () => {
  <div class="toptitle text-dark col-12 row items-center">รายการคำสั่ง</div>

  <!-- toolbar -->
-  <q-card>
-    <q-toolbar class="q-pa-sm q-col-gutter-sm">
-      <datepicker
-        menu-class-name="modalfix"
-        v-model="queryParams.year"
-        :locale="'th'"
-        autoApply
-        year-picker
-        :enableTimePicker="false"
-        @update:model-value="(queryParams.page = 1), fetchListCommand()"
-      >
-        <template #year="{ year }">{{ year + 543 }}</template>
-        <template #year-overlay-value="{ value }">{{
-          parseInt(value + 543)
-        }}</template>
-        <template #trigger>
-          <q-input
-            dense
-            outlined
-            hide-bottom-space
-            :model-value="
-              queryParams.year == null ? null : queryParams.year + 543
-            "
-            :label="`${'ปีงบประมาณ'}`"
-          >
-            <template v-slot:prepend>
-              <q-icon
-                name="event"
-                class="cursor-pointer"
-                style="color: var(--q-primary)"
-              >
-              </q-icon>
-            </template>
-          </q-input>
-        </template>
-      </datepicker>
+  <q-card class="q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="col-12 row">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="queryParams.year"
+          :locale="'th'"
+          autoApply
+          year-picker
+          :enableTimePicker="false"
+          @update:model-value="(queryParams.page = 1), fetchListCommand()"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              hide-bottom-space
+              :model-value="
+                queryParams.year == null ? null : queryParams.year + 543
+              "
+              :label="`${'ปีงบประมาณ'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>

-      <q-btn
-        v-if="checkPermission($route)?.attrIsCreate"
-        flat
-        round
-        dense
-        icon="add"
-        color="primary"
-        @click.prevent="modalAdd = true"
-      />
+        <q-btn
+          v-if="checkPermission($route)?.attrIsCreate"
+          flat
+          round
+          dense
+          icon="add"
+          color="primary"
+          @click.prevent="modalAdd = true"
+        />
+      </div>

-      <q-space />
-      <q-select
-        clearable
-        @clear="queryParams.page = 1"
-        :class="queryParams.commandTypeId ? 'select_ellipsis3' : ''"
-        v-model="queryParams.commandTypeId"
-        :label="`${'ประเภทคำสั่ง'}`"
-        dense
-        emit-value
-        map-options
-        option-label="name"
-        :options="commandOp"
-        option-value="id"
-        lazy-rules
-        use-input
-        @update:model-value="(queryParams.page = 1), fetchListCommand()"
-        outlined
-        style="width: 620px"
-        @filter="(inputValue:string,
-          doneFn:Function) => filterSelector(inputValue, doneFn) "
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
-      <q-input
-        dense
-        outlined
-        v-model="queryParams.keyword"
-        label="ค้นหา"
-        clearable
-        style="width: 300px"
-        @keydown.enter="(queryParams.page = 1), fetchListCommand()"
-      >
-        <template v-slot:append v-if="!queryParams.keyword">
-          <q-icon name="search" /> </template
-      ></q-input>
-    </q-toolbar>
+      <div class="col-12 row">
+        <q-card bordered class="col-12 filter-card q-pa-sm">
+          <div class="row col-12 q-col-gutter-sm">
+            <q-select
+              :clearable="queryParams.commandTypeId !== ''"
+              @clear="
+                (queryParams.page = 1),
+                  (queryParams.commandTypeId = ''),
+                  (commandOp = commandOpMain)
+              "
+              :class="queryParams.commandTypeId ? 'select_ellipsis3' : ''"
+              v-model="queryParams.commandTypeId"
+              :label="`${'ประเภทคำสั่ง'}`"
+              dense
+              emit-value
+              map-options
+              option-label="name"
+              :options="commandOp"
+              option-value="id"
+              lazy-rules
+              use-input
+              @update:model-value="(queryParams.page = 1), fetchListCommand()"
+              outlined
+              hide-selected
+              fill-input
+              style="width: 620px"
+              @filter="(inputValue:string,
+              doneFn:Function) => filterSelector(inputValue, doneFn) "
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+            <q-space />
+            <q-input
+              dense
+              outlined
+              v-model="queryParams.keyword"
+              label="ค้นหา"
+              @keydown.enter="(queryParams.page = 1), fetchListCommand()"
+            >
+              <template v-slot:append> <q-icon name="search" /> </template
+            ></q-input>
+
+            <q-select
+              dense
+              multiple
+              outlined
+              emit-value
+              map-options
+              options-dense
+              option-value="name"
+              style="min-width: 140px"
+              v-model="store.visibleColumns"
+              :options="store.columns"
+              :display-value="$q.lang.table.columns"
+            />
+          </div>
+        </q-card>
+      </div>
+    </div>
  </q-card>

  <!-- Tabs -->