clone code

src/modules/03_recruiting/views/01_compete/ImportData.vue

@@ -0,0 +1,213 @@
+<!-- page:main page สรรหา -->
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการนำเข้าข้อมูลผู้สมัครสอบแข่งขัน
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+    <div>
+      <Table
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :nornmalData="false"
+      >
+        <template #columns="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 == 'no'" @click="clickEdit(props.row.year)">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div
+                v-else-if="col.name == 'name'"
+                class="table_ellipsis2"
+                @click="clickEdit(props.row.year)"
+              >
+                {{ col.value }}
+              </div>
+              <div v-else-if="col.name == 'file'">
+                <q-btn
+                  size="13px"
+                  flat
+                  class="bg-blue-1 q-ml-xs"
+                  color="blue"
+                  v-if="col.value == null || file == false"
+                >
+                  <q-icon
+                    name="mdi-file-excel-outline"
+                    size="20px"
+                    class="q-mr-sm"
+                  />
+                  นำเข้าไฟล์
+                  <q-tooltip>นำเข้าไฟล์ excel</q-tooltip>
+                </q-btn>
+                <div v-else>
+                  <q-chip
+                    removable
+                    color="grey-2"
+                    text-color="grey-9"
+                    :label="col.value"
+                    size="14px"
+                    square
+                    icon-remove="mdi-close"
+                    v-model="file"
+                    @remove="remove"
+                  >
+                    <q-tooltip>{{ col.value }}</q-tooltip>
+                  </q-chip>
+                  <q-btn
+                    size="14px"
+                    flat
+                    dense
+                    color="positive"
+                    icon="mdi-content-save-settings-outline"
+                  >
+                    <q-tooltip>บันทึกคะแนนสอบ</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
+              <div v-else @click="clickEdit(props.row.year)">
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </div>
+  </q-card>
+</template>
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { onMounted, ref, watch } from "vue";
+import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+import Table from "@/modules/03_recruiting/components/Table.vue";
+
+const $q = useQuasar(); // show dialog
+const router = useRouter();
+const file = ref<boolean>(true);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([
+  "no",
+  "year",
+  "name",
+  "startDate",
+  "endDate",
+  "file",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อระยะเวลาการสอบแข่งขัน",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "doc",
+    align: "left",
+    label: "เอกสารประกอบ",
+    sortable: true,
+    field: "doc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "วันที่เริ่มต้น",
+    sortable: true,
+    field: "startDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "วันที่สิ้นสุด",
+    sortable: true,
+    field: "endDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "file",
+    align: "left",
+    label: "เอกสารข้อมูลผู้สอบ",
+    sortable: true,
+    field: "file",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const rows = ref<any>([]);
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = () => {};
+
+const clickEdit = (id: string) => {
+  router.push(`/compete/import/${id}`);
+};
+
+const remove = () => {
+  $q.dialog({
+    title: "ยืนยันการลบเอกสารข้อมูล",
+    message: "ต้องการลบเอกสารนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(() => {
+      file.value = false;
+    })
+    .onCancel(() => {
+      file.value = true;
+    })
+    .onDismiss(() => {});
+};
+</script>
+
+<style></style>