DialogWorkflow

src/components/DialogWorkflow.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { QTableProps } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const { dialogConfirm } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const operator = defineModel<string>("operator", {
+  default: "officer",
+});
+
+/** table*/
+const rows = ref<any[]>([
+  {
+    fullName: "นายศรัณย์ ศิลาดี",
+    position: "นักบริหาร",
+    posType: "บริหาร(สูง)",
+    organization: "",
+  },
+]);
+const selected = ref<any[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "สังกัด",
+    field: "organization",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+function fetchLists() {}
+
+function onSubmit() {
+  dialogConfirm($q, () => {});
+}
+
+function convertLabelBtn(name: string) {
+  switch (name) {
+    case "officer":
+      return "การเจ้าหน้าที่";
+    case "personnelOfficer":
+      return "สำนักงานการเจ้าหน้าที่";
+    case "commander":
+      return "ผู้บังคับบัญชา";
+    case "authority":
+      return "ผู้มีอำนาจ";
+  }
+}
+
+function onCloseModal() {
+  modal.value = false;
+  selected.value = [];
+  rows.value = [];
+}
+
+watch(modal, (val) => {
+  if (val) {
+    fetchLists();
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 700px">
+      <q-form q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="`เลือกรายชื่อ`" :close="onCloseModal" />
+        <q-separator />
+
+        <q-card-section>
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            row-key="id"
+            flat
+            bordered
+            :paging="true"
+            dense
+            :rows-per-page-options="[10, 25, 50, 100]"
+            class="tableTb"
+            selection="single"
+            v-model:selected="selected"
+          >
+            <template v-slot:header-selection="scope">
+              <q-checkbox
+                keep-color
+                color="primary"
+                dense
+                v-model="scope.checkBox"
+              />
+            </template>
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </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>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table></q-card-section
+        >
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            :label="convertLabelBtn(operator)"
+            color="public"
+            type="submit"
+            :disable="selected.length === 0"
+          >
+            <q-tooltip>{{ convertLabelBtn(operator) }}</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>