ปรับ interfeac
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
09b1b9f492
commit
cfc073e30c
16 changed files with 462 additions and 277 deletions
|
|
@ -2,13 +2,14 @@
|
|||
import { ref, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { DataList } from "../../interface/response/order";
|
||||
|
||||
// importStroe
|
||||
import { useOrderStore } from "../../store/OrderStore";
|
||||
import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
|
||||
|
||||
const router = useRouter();
|
||||
const OrderStore = useOrderStore();
|
||||
const { fecthOrder } = OrderStore; // function จาก stores
|
||||
const { fetchOrder } = OrderStore; // function จาก stores
|
||||
|
||||
// ข้อมูล table
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -78,12 +79,12 @@ const visibleColumns = ref<string[]>([
|
|||
const filterTable = ref<string>("");
|
||||
|
||||
onMounted(async () => {
|
||||
await fecthListOrder();
|
||||
await fetchListOrder();
|
||||
});
|
||||
|
||||
// เรียกรายการคำสั่ง จาก API
|
||||
async function fecthListOrder() {
|
||||
const listData = [
|
||||
async function fetchListOrder() {
|
||||
const listData: DataList[] = [
|
||||
{
|
||||
subject: "ทุจริตในหน้าที่",
|
||||
ordernumber: "1/2556",
|
||||
|
|
@ -109,7 +110,7 @@ async function fecthListOrder() {
|
|||
statusorder: "เสร็จสิ้นแล้ว",
|
||||
},
|
||||
];
|
||||
await fecthOrder(listData); // ส่งข้อมูลไปยัง stores
|
||||
await fetchOrder(listData); // ส่งข้อมูลไปยัง stores
|
||||
}
|
||||
|
||||
// redirect ไปยังการเพิ่มออกคำสั่งลงโทษทางวินัย
|
||||
|
|
@ -139,6 +140,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
<div class="q-pa-md">
|
||||
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
|
||||
<q-btn
|
||||
id="addDisciplineOrder"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
|
|
@ -149,10 +151,17 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
>
|
||||
<q-space />
|
||||
<div class="col-2">
|
||||
<q-input dense outlined v-model="filterTable" label="ค้นหา" />
|
||||
<q-input
|
||||
for="filterTable"
|
||||
dense
|
||||
outlined
|
||||
v-model="filterTable"
|
||||
label="ค้นหา"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
for="visibleColumns"
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
|
|
@ -168,6 +177,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
</div>
|
||||
</q-toolbar>
|
||||
<d-table
|
||||
for="table"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="OrderStore.rows"
|
||||
|
|
@ -191,40 +201,13 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer" style="height: 40px">
|
||||
<q-td key="subject" :props="props">
|
||||
{{ props.row.subject }}
|
||||
</q-td>
|
||||
<q-td key="ordernumber" :props="props">
|
||||
{{ props.row.ordernumber }}
|
||||
</q-td>
|
||||
<q-td key="dateOrder" :props="props">
|
||||
{{ props.row.dateOrder }}
|
||||
</q-td>
|
||||
<q-td key="orderby" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ props.row.orderby }}
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td key="signer" :props="props">
|
||||
{{ props.row.signer }}
|
||||
</q-td>
|
||||
<q-td key="statusorder" :props="props">
|
||||
{{ props.row.statusorder }}
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<!-- <template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template> -->
|
||||
</d-table>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import { ref } from "vue";
|
|||
import { useRouter } from "vue-router";
|
||||
|
||||
// import step
|
||||
import step01 from "./Step01.vue";
|
||||
import step02 from "./Step02.vue";
|
||||
import step03 from "./Step03.vue";
|
||||
import step01 from "@/modules/11_discipline/components/4_Order/Step01.vue";
|
||||
import step02 from "@/modules/11_discipline/components/4_Order/Step02.vue";
|
||||
import step03 from "@/modules/11_discipline/components/4_Order/Step03.vue";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, reactive } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import type { DataOption, MyObjectRef } from "../../interface/index/Main";
|
||||
import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
|
||||
import type {
|
||||
FormData,
|
||||
MyObjectRef,
|
||||
} from "@/modules/11_discipline/interface/request/order";
|
||||
// importStroe
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
|
|
@ -38,28 +42,30 @@ const listInvestigationOptions = ref<DataOption[]>([
|
|||
{ id: "2", name: "รายการสอบสวนความผิดทางวินัย 3" },
|
||||
]);
|
||||
// ตัวแปรทั้งหมด
|
||||
const orderType = ref<string>("");
|
||||
const orderBy = ref<string>("");
|
||||
const listInvestigation = ref<string>("");
|
||||
const authority = ref<string>("");
|
||||
const orderNumber = ref<string>();
|
||||
const dateYear = ref<number>(2023);
|
||||
const date = ref<Date | null>(null);
|
||||
const authorityPosition = ref<string>("");
|
||||
const subject = ref<string>("");
|
||||
const mistakeDetail = ref<string>("");
|
||||
const formData = reactive<FormData>({
|
||||
orderType: "",
|
||||
orderBy: "",
|
||||
listInvestigation: "",
|
||||
authority: "",
|
||||
orderNumber: "",
|
||||
dateYear: 0,
|
||||
date: null,
|
||||
authorityPosition: "",
|
||||
subject: "",
|
||||
mistakeDetail: "",
|
||||
});
|
||||
|
||||
// validateForm
|
||||
const orderTypeRef = ref<any>(null);
|
||||
const orderByRef = ref<any>(null);
|
||||
const listInvestigationRef = ref<any>(null);
|
||||
const authorityRef = ref<any>(null);
|
||||
const orderNumberRef = ref<any>(null);
|
||||
const dateYearRef = ref<any>(null);
|
||||
const dateRef = ref<any>(null);
|
||||
const authorityPositionRef = ref<any>(null);
|
||||
const subjectRef = ref<any>(null);
|
||||
const mistakeDetailRef = ref<any>(null);
|
||||
const orderTypeRef = ref<Object | null>(null);
|
||||
const orderByRef = ref<Object | null>(null);
|
||||
const listInvestigationRef = ref<Object | null>(null);
|
||||
const authorityRef = ref<Object | null>(null);
|
||||
const orderNumberRef = ref<Object | null>(null);
|
||||
const dateYearRef = ref<Object | null>(null);
|
||||
const dateRef = ref<Object | null>(null);
|
||||
const authorityPositionRef = ref<Object | null>(null);
|
||||
const subjectRef = ref<Object | null>(null);
|
||||
const mistakeDetailRef = ref<Object | null>(null);
|
||||
const myObjectRef: MyObjectRef = {
|
||||
orderType: orderTypeRef,
|
||||
orderBy: orderByRef,
|
||||
|
|
@ -91,6 +97,7 @@ function validateForm() {
|
|||
}
|
||||
|
||||
function onSubmit() {
|
||||
console.log(formData);
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
|
|
@ -109,10 +116,11 @@ function onSubmit() {
|
|||
<div class="col-xs-12 col-sm-6">
|
||||
ประเภทคำสั่ง
|
||||
<q-select
|
||||
for="orderType"
|
||||
ref="orderTypeRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="orderType"
|
||||
v-model="formData.orderType"
|
||||
:options="orderTypeOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
|
|
@ -126,10 +134,11 @@ function onSubmit() {
|
|||
<div class="col-xs-12 col-sm-6">
|
||||
คำสั่งโดย
|
||||
<q-select
|
||||
for="orderBy"
|
||||
ref="orderByRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="orderBy"
|
||||
v-model="formData.orderBy"
|
||||
:options="orderByOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
|
|
@ -143,10 +152,11 @@ function onSubmit() {
|
|||
<div class="col-xs-12 col-sm-6">
|
||||
เลือกรายการสอบสวนความผิดทางวินัย
|
||||
<q-select
|
||||
for="listInvestigation"
|
||||
ref="listInvestigationRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="listInvestigation"
|
||||
v-model="formData.listInvestigation"
|
||||
:options="listInvestigationOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
|
|
@ -162,10 +172,11 @@ function onSubmit() {
|
|||
<div class="col-xs-12 col-sm-6">
|
||||
ผู้มีอำนาจลงนาม
|
||||
<q-input
|
||||
for="authority"
|
||||
ref="authorityRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="authority"
|
||||
v-model="formData.authority"
|
||||
placeholder="กรอกผู้มีอำนาจลงนาม"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
|
||||
lazy-rules
|
||||
|
|
@ -175,10 +186,11 @@ function onSubmit() {
|
|||
<div class="col-6">
|
||||
คำสั่งที่
|
||||
<q-input
|
||||
for="orderNumber"
|
||||
ref="orderNumberRef"
|
||||
outlined
|
||||
dense
|
||||
v-model="orderNumber"
|
||||
v-model="formData.orderNumber"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอรคำสั่งที่'}`]"
|
||||
lazy-rules
|
||||
|
|
@ -191,7 +203,7 @@ function onSubmit() {
|
|||
<div class="col-5">
|
||||
พศ
|
||||
<datepicker
|
||||
v-model="dateYear"
|
||||
v-model="formData.dateYear"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
|
|
@ -204,9 +216,10 @@ function onSubmit() {
|
|||
<template #trigger>
|
||||
<q-input
|
||||
ref="dateYearRef"
|
||||
:model-value="dateYear + 543"
|
||||
:model-value="
|
||||
formData.dateYear ? formData.dateYear + 543 : null
|
||||
"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
|
||||
:label="`${'พ.ศ.'}`"
|
||||
dense
|
||||
outlined
|
||||
>
|
||||
|
|
@ -219,7 +232,7 @@ function onSubmit() {
|
|||
วันที่มีผลคำสั่ง
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="date"
|
||||
v-model="formData.date"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
|
|
@ -234,11 +247,14 @@ function onSubmit() {
|
|||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
for="date"
|
||||
ref="dateRef"
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker"
|
||||
:model-value="date != null ? date2Thai(date) : null"
|
||||
:model-value="
|
||||
formData.date != null ? date2Thai(formData.date) : null
|
||||
"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่มีผลคำสั่ง'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
|
|
@ -256,10 +272,11 @@ function onSubmit() {
|
|||
<div class="col-xs-12 col-sm-6">
|
||||
ตำแหน่งผู้มีอำนาจลงนาม
|
||||
<q-input
|
||||
for="authorityPosition"
|
||||
ref="authorityPositionRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="authorityPosition"
|
||||
v-model="formData.authorityPosition"
|
||||
placeholder="กรอกตำแหน่งผู้มีอำนาจลงนาม"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
|
||||
lazy-rules
|
||||
|
|
@ -268,10 +285,11 @@ function onSubmit() {
|
|||
<div class="col-xs-12 col-sm-6">
|
||||
คำสั่งเรื่อง
|
||||
<q-input
|
||||
for="subject"
|
||||
ref="subjectRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="subject"
|
||||
v-model="formData.subject"
|
||||
placeholder="กรอกคำสั่งเรื่อง"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
|
||||
lazy-rules
|
||||
|
|
@ -280,10 +298,11 @@ function onSubmit() {
|
|||
<div class="col-xs-12 col-sm-12">
|
||||
รายละเอียดการกระทำความผิด
|
||||
<q-input
|
||||
for="mistakeDetail"
|
||||
ref="mistakeDetailRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="mistakeDetail"
|
||||
v-model="formData.mistakeDetail"
|
||||
placeholder="กรอกรายละเอียดการกระทำความผิด"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
|
||||
lazy-rules
|
||||
|
|
@ -295,6 +314,7 @@ function onSubmit() {
|
|||
</div>
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
for="submit"
|
||||
flat
|
||||
round
|
||||
unelevated
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue