UI แต่งตั้งคณะกรรมการทดลองงาน

src/modules/05_placement/components/probation/DialogOrder/DialogSendToCommand.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { QTableProps } from "quasar";
+import type { AppointMainRows } from "@/modules/05_placement/interface/request/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
+
+/** use */
+const $q = useQuasar();
+const selected = ref<AppointMainRows[]>([]);
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
+
+const filterKeyword = defineModel<string>("filterKeyword", { required: true });
+const rows = defineModel<AppointMainRows[]>("rows", { required: true });
+/** props*/
+const props = defineProps({
+  modal: Boolean,
+  closeModal: Function,
+  getData: Function,
+});
+
+/** ฟังก์ชั่นการ Selected Data*/
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+//Table
+const visibleColumns = ref<string[]>(["no", "topic", "commandNo", "status"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "topic",
+    align: "left",
+    label: "หัวข้อ",
+    sortable: true,
+    field: "topic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "commandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "commandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const modalCommand = ref<boolean>(false);
+
+/** popup ยืนยันส่งัว */
+function saveOrder() {
+  dialogConfirm(
+    $q,
+    () => {
+      props.closeModal?.();
+      modalCommand.value = true;
+    },
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
+}
+
+const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
+function updateInput(value: any) {
+  emit("update:filterKeyword2", value);
+}
+
+/** รีเซ็ตค่าในช่องค้นหา */
+function Reset() {
+  emit("update:filterKeyword2", "");
+}
+
+/** แปลง EN to THAI */
+function convertText(val: string) {
+  switch (val) {
+    case "PENDING":
+      return "รอดำเนินการ";
+    case "REPORT":
+      return "ส่งไปเเต่งตั้ง";
+    case "DONE":
+      return "เสร็จสิ้น";
+    default:
+      "-";
+  }
+}
+
+watchEffect(() => {
+  if (props.modal === true) {
+    selected.value = [];
+  }
+});
+</script>
+<template>
+  <q-dialog v-model="props.modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader tittle="ส่งไปออกคำสั่ง" :close="closeModal" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                :model-value="filterKeyword"
+                @update:model-value="updateInput"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="Reset"
+                  />
+                </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"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="id"
+          :visible-columns="visibleColumns"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{
+                    (pagination.page - 1) * pagination.rowsPerPage +
+                    props.rowIndex +
+                    1
+                  }}
+                </div>
+                <div v-else-if="col.name == 'status'">
+                  {{ props.row.status ? convertText(props.row.status) : "-" }}
+                </div>
+
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <DialogCreateCommand
+    v-model:modal="modalCommand"
+    :command-type-code="'C-PM-10'"
+    :persons="selected"
+    :not-person="true"
+  />
+</template>