ปรับ interfeac

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-10-19 15:39:18 +07:00
parent 09b1b9f492
commit cfc073e30c
16 changed files with 462 additions and 277 deletions

View file

@ -16,7 +16,7 @@ export const useLeavelistDataStore = defineStore("leave", () => {
const mainData = ref<any>([]) const mainData = ref<any>([])
const rows = ref<any>([]) const rows = ref<any>([])
const loadTable = ref<boolean>(false) const loadTable = ref<boolean>(false)
async function fecthList(data: any) { async function fetchList(data: any) {
let datalist = data.map((e: any) => ({ let datalist = data.map((e: any) => ({
leaveType: e.leaveType, leaveType: e.leaveType,
name: e.name, name: e.name,
@ -161,7 +161,7 @@ export const useLeavelistDataStore = defineStore("leave", () => {
amounttab2, amounttab2,
//ข้อมูลในตาราง //ข้อมูลในตาราง
rows, rows,
fecthList, fetchList,
loadTable, loadTable,
//filter table //filter table
filterTable, filterTable,

View file

@ -8,7 +8,7 @@ export const useWorklistDataStore = defineStore("work", () => {
// ข้อมูลในตาราง // ข้อมูลในตาราง
const rows = ref<any>([]) const rows = ref<any>([])
const dataMain = ref<any>([]) const dataMain = ref<any>([])
function fecthList(data: any) { function fetchList(data: any) {
let datalist = data.map((e: any) => ({ let datalist = data.map((e: any) => ({
fullName: e.fullName, fullName: e.fullName,
timeIn: e.timeIn, timeIn: e.timeIn,
@ -86,7 +86,7 @@ export const useWorklistDataStore = defineStore("work", () => {
return { return {
//ข้อมูลในตาราง //ข้อมูลในตาราง
rows, rows,
fecthList, fetchList,
//ค้นหาข้อมูล //ค้นหาข้อมูล
filterTable, filterTable,
selectDate, selectDate,

View file

@ -6,7 +6,7 @@ import { useLeavelistDataStore } from "../stores/LeaveStore";
import TableList from "../components/2_Leave/TableList.vue"; import TableList from "../components/2_Leave/TableList.vue";
const leaveStore = useLeavelistDataStore(); const leaveStore = useLeavelistDataStore();
const { fecthList, clearFilter } = leaveStore; const { fetchList, clearFilter } = leaveStore;
onMounted(() => { onMounted(() => {
fecthLeaveList(); fecthLeaveList();
@ -39,7 +39,7 @@ function fecthLeaveList() {
status: "2", status: "2",
}, },
]; ];
fecthList(data); // stores fetchList(data); // stores
} }
// Tab // Tab
function changTab() { function changTab() {
@ -51,7 +51,7 @@ function changTab() {
<div class="toptitle text-dark col-12 row items-center">รายการลา</div> <div class="toptitle text-dark col-12 row items-center">รายการลา</div>
<div> <div>
<!-- <q-card flat bordered class="col-12 q-mt-sm"> --> <!-- <q-card flat bordered class="col-12 q-mt-sm"> -->
<q-card bordered flat > <q-card bordered flat>
<q-tabs <q-tabs
v-model="leaveStore.tab" v-model="leaveStore.tab"
dense dense
@ -66,7 +66,6 @@ function changTab() {
@click="changTab" @click="changTab"
name="1" name="1"
label="รายการลาที่อยู่ระหว่างดำเนิดการ" label="รายการลาที่อยู่ระหว่างดำเนิดการ"
> >
<q-badge <q-badge
color="grey-4" color="grey-4"
@ -79,12 +78,7 @@ function changTab() {
rounded rounded
/> />
</q-tab> </q-tab>
<q-tab <q-tab @click="changTab" name="2" label="รายการลาทั้งหมด">
@click="changTab"
name="2"
label="รายการลาทั้งหมด"
>
<q-badge <q-badge
color="grey-4" color="grey-4"
:class=" :class="
@ -110,7 +104,7 @@ function changTab() {
<TableList /> <TableList />
</q-tab-panel> </q-tab-panel>
</q-tab-panels> </q-tab-panels>
<!-- </q-card> --> <!-- </q-card> -->
</q-card> </q-card>
</div> </div>
</template> </template>

View file

@ -9,7 +9,7 @@ import TableList from "../components/1_Work/TableList.vue";
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const workStore = useWorklistDataStore(); const workStore = useWorklistDataStore();
const { date2Thai } = mixin; const { date2Thai } = mixin;
const { fecthList } = workStore; const { fetchList } = workStore;
onMounted(() => { onMounted(() => {
fecthWorkList(); fecthWorkList();
@ -66,7 +66,7 @@ function fecthWorkList() {
status: "1", status: "1",
}, },
]; ];
fecthList(listData); // stores fetchList(listData); // stores
} }
</script> </script>
<template> <template>

View file

@ -1,17 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted, reactive, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
// import Type // import Type
import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
import type { import type {
DataOption, FormData,
MyObjectComplaintsRef, MyObjectComplaintsRef,
} from "../../interface/index/Main"; } from "@/modules/11_discipline/interface/request/complaint";
// importStroe // importStroe
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useComplainstDataStore } from "../../store/ComplaintsStore"; import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
const $q = useQuasar(); const $q = useQuasar();
const router = useRouter(); const router = useRouter();
@ -19,7 +19,7 @@ const mixin = useCounterMixin();
const { date2Thai, dialogConfirm } = mixin; //function stores const { date2Thai, dialogConfirm } = mixin; //function stores
const complainstStore = useComplainstDataStore(); const complainstStore = useComplainstDataStore();
const { selectComplainantTpye, filterSelector, fectOptioin } = complainstStore; // function store complainstStore const { selectComplainantTpye, filterSelector, fetchOptioin } = complainstStore; // function store complainstStore
// options // options
const complainantoptions = ref<DataOption[]>([ const complainantoptions = ref<DataOption[]>([
@ -52,38 +52,40 @@ const receivecomplaintstoptions = ref<DataOption[]>([
{ id: "6", name: "บอกกล่าว" }, { id: "6", name: "บอกกล่าว" },
]); ]);
// form // form
const complainantType = ref<string>(""); const formData = reactive<FormData>({
const complainant = ref<string>(""); // complainantType: "",
const office = ref<string>(""); // complainant: "",
const agency = ref<string>(""); office: "",
const topicComplaint = ref<string>(""); agency: "",
const detail = ref<string>(""); topicComplaint: "",
const datereceive = ref<Date>(); detail: "",
const dateconsideration = ref<Date>(); datereceive: null,
const offenseDescription = ref<string>(""); dateconsideration: null,
const considerationLevel = ref<string>(""); offenseDescription: "",
const datewarn = ref<Date>(); considerationLevel: "",
const receivecomplaints = ref<string>(""); datewarn: null,
const petitioner = ref<string>(""); receivecomplaints: "",
const files = ref<any>(); petitioner: "",
files: null,
});
const fileDocDataUpload = ref<File[]>([]); const fileDocDataUpload = ref<File[]>([]);
onMounted(() => { onMounted(() => {
fectOptioin(complainantoptions.value, agencytoptions.value); fetchOptioin(complainantoptions.value, agencytoptions.value);
}); });
// //
async function selectComplainant(val: string) { async function selectComplainant(val: string) {
complainant.value = ""; formData.complainant = "";
office.value = ""; formData.office = "";
agency.value = ""; formData.agency = "";
if (val === "0") { if (val === "0") {
await fectListname(); // function fectListname await fetchListname(); // function fetchListname
} else if (val === "1") { } else if (val === "1") {
await fectOffice(); // function fectOffice await fetchOffice(); // function fetchOffice
} }
} }
// //
async function fectListname() { async function fetchListname() {
const listName = [ const listName = [
{ {
id: "1", id: "1",
@ -101,7 +103,7 @@ async function fectListname() {
selectComplainantTpye(listName); selectComplainantTpye(listName);
} }
// //
async function fectOffice() { async function fetchOffice() {
// const listOffice = [ // const listOffice = [
// { // {
// id: "1", // id: "1",
@ -134,29 +136,35 @@ function selectLevel(val: string) {
dayNum = 15; // dayNum = 15; //
} }
// //
if (dateconsideration.value) { if (formData.dateconsideration) {
const currentDate = new Date(dateconsideration.value); const currentDate = new Date(formData.dateconsideration);
const newDate = new Date( const newDate = new Date(
currentDate.getTime() + dayNum * 24 * 60 * 60 * 1000 currentDate.getTime() + dayNum * 24 * 60 * 60 * 1000
); );
datewarn.value = newDate; formData.datewarn = newDate;
} }
} }
watch(formData, () => {
if (formData.considerationLevel !== "") {
selectLevel(formData.considerationLevel);
}
});
// validateForm // validateForm
const complainantTypeRef = ref<any>(null); const complainantTypeRef = ref<Object | null>(null);
const complainantRef = ref<any>(null); const complainantRef = ref<Object | null>(null);
const officeRef = ref<any>(null); const officeRef = ref<Object | null>(null);
const agencyRef = ref<any>(null); const agencyRef = ref<Object | null>(null);
const topicComplaintRef = ref<any>(null); const topicComplaintRef = ref<Object | null>(null);
const detailRef = ref<any>(null); const detailRef = ref<Object | null>(null);
const datereceiveRef = ref<any>(); const datereceiveRef = ref<Object | null>();
const dateconsiderationRef = ref<any>(null); const dateconsiderationRef = ref<Object | null>(null);
const offenseDescriptionRef = ref<any>(null); const offenseDescriptionRef = ref<Object | null>(null);
const considerationLevelRef = ref<any>(null); const considerationLevelRef = ref<Object | null>(null);
const datewarnRef = ref<any>(null); const datewarnRef = ref<Object | null>(null);
const receivecomplaintsRef = ref<any>(null); const receivecomplaintsRef = ref<Object | null>(null);
const petitionerRef = ref<any>(null); const petitionerRef = ref<Object | null>(null);
const filesRef = ref<any>(null); const filesRef = ref<Object | null>(null);
const objectComplaintsRef: MyObjectComplaintsRef = { const objectComplaintsRef: MyObjectComplaintsRef = {
complainantType: complainantTypeRef, complainantType: complainantTypeRef,
@ -195,7 +203,9 @@ function validateForm() {
function onSubmit() { function onSubmit() {
dialogConfirm( dialogConfirm(
$q, $q,
async () => {}, async () => {
console.log(formData);
},
"ยืนยันการบันทึกข้อมูล", "ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?" "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
); );
@ -222,12 +232,13 @@ function onSubmit() {
<div <div
class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs" class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
> >
<div class="col-xs-12 col-sm-2"> <div class="col-xs-12 col-sm-2" id="complainantType">
<q-select <q-select
for="complainantType"
ref="complainantTypeRef" ref="complainantTypeRef"
dense dense
outlined outlined
v-model="complainantType" v-model="formData.complainantType"
:options="complainstStore.complainantoptions" :options="complainstStore.complainantoptions"
label="ผู้ร้องเรียน" label="ผู้ร้องเรียน"
option-value="id" option-value="id"
@ -236,7 +247,9 @@ function onSubmit() {
map-options map-options
:rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
lazy-rules lazy-rules
@update:model-value="selectComplainant(complainantType)" @update:model-value="
selectComplainant(formData.complainantType)
"
use-input use-input
@filter="(inputValue: any, @filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantType' doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantType'
@ -252,12 +265,17 @@ function onSubmit() {
</q-select> </q-select>
</div> </div>
<div class="col-xs-12 col-sm-2" v-if="complainantType === '0'"> <div
class="col-xs-12 col-sm-2"
id="complainant"
v-if="formData.complainantType === '0'"
>
<q-select <q-select
for="complainant"
ref="complainantRef" ref="complainantRef"
dense dense
outlined outlined
v-model="complainant" v-model="formData.complainant"
:options="complainstStore.optionListName" :options="complainstStore.optionListName"
label="รายชื่อจากทะเบียรประวัติ" label="รายชื่อจากทะเบียรประวัติ"
option-value="id" option-value="id"
@ -279,23 +297,30 @@ function onSubmit() {
</template> </template>
</q-select> </q-select>
</div> </div>
<div class="col-xs-12 col-sm-2" v-if="complainantType === '1'"> <div
class="col-xs-12 col-sm-2"
v-if="formData.complainantType === '1'"
id="office"
>
<q-input <q-input
for="office"
name="office"
ref="officeRef" ref="officeRef"
dense dense
outlined outlined
v-model="office" v-model="formData.office"
label="เลือกสำนักงาน" label="เลือกสำนักงาน"
:rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
lazy-rules lazy-rules
/> />
</div> </div>
<div class="col-xs-12 col-sm-2"> <div class="col-xs-12 col-sm-2" id="agency">
<q-select <q-select
ref="agencyRef" ref="agencyRef"
for="agency"
dense dense
outlined outlined
v-model="agency" v-model="formData.agency"
:options="complainstStore.agencytoptions" :options="complainstStore.agencytoptions"
label="หน่วยงานที่พิจารณา" label="หน่วยงานที่พิจารณา"
option-value="id" option-value="id"
@ -318,12 +343,13 @@ function onSubmit() {
</template> </template>
</q-select> </q-select>
</div> </div>
<div class="col-xs-12 col-sm-12"> <div class="col-xs-12 col-sm-12" id="topicComplaint">
<q-input <q-input
for="topicComplaint"
ref="topicComplaintRef" ref="topicComplaintRef"
dense dense
outlined outlined
v-model="topicComplaint" v-model="formData.topicComplaint"
:rules="[(val) => !!val || 'กรุณาการข้อมูล']" :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
lazy-rules lazy-rules
label="เรื่องร้องเรียน" label="เรื่องร้องเรียน"
@ -331,12 +357,13 @@ function onSubmit() {
rows="5" rows="5"
/> />
</div> </div>
<div class="col-xs-12 col-sm-12"> <div class="col-xs-12 col-sm-12" id="detail">
<q-input <q-input
for="detail"
ref="detailRef" ref="detailRef"
dense dense
outlined outlined
v-model="detail" v-model="formData.detail"
:rules="[(val) => !!val || 'กรุณาการข้อมูล']" :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
lazy-rules lazy-rules
label="รายละเอียดที่เกี่นวข้องกับเรื่องที่ต้องการจะข้อเรียน" label="รายละเอียดที่เกี่นวข้องกับเรื่องที่ต้องการจะข้อเรียน"
@ -344,10 +371,10 @@ function onSubmit() {
rows="5" rows="5"
/> />
</div> </div>
<div class="col-xs-12 col-sm-2"> <div class="col-xs-12 col-sm-2" id="datereceive">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="datereceive" v-model="formData.datereceive"
:locale="'th'" :locale="'th'"
autoApply autoApply
borderless borderless
@ -362,12 +389,15 @@ function onSubmit() {
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
for="datereceive"
ref="datereceiveRef" ref="datereceiveRef"
outlined outlined
dense dense
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
datereceive != null ? date2Thai(datereceive) : null formData.datereceive != null
? date2Thai(formData.datereceive)
: null
" "
label="วันที่รับเรื่อง" label="วันที่รับเรื่อง"
:rules="[ :rules="[
@ -387,10 +417,10 @@ function onSubmit() {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-xs-12 col-sm-2"> <div class="col-xs-12 col-sm-2" id="dateconsideration">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="dateconsideration" v-model="formData.dateconsideration"
:locale="'th'" :locale="'th'"
autoApply autoApply
borderless borderless
@ -405,13 +435,14 @@ function onSubmit() {
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
for="dateconsideration"
ref="dateconsiderationRef" ref="dateconsiderationRef"
outlined outlined
dense dense
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
dateconsideration != null formData.dateconsideration != null
? date2Thai(dateconsideration) ? date2Thai(formData.dateconsideration)
: null : null
" "
label="วันที่กำหนดวันพิจารณา" label="วันที่กำหนดวันพิจารณา"
@ -432,12 +463,13 @@ function onSubmit() {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-xs-12 col-sm-2"> <div class="col-xs-12 col-sm-2" id="offenseDescription">
<q-select <q-select
for="offenseDescription"
ref="offenseDescriptionRef" ref="offenseDescriptionRef"
dense dense
outlined outlined
v-model="offenseDescription" v-model="formData.offenseDescription"
:options="offenseDescriptiontoptions" :options="offenseDescriptiontoptions"
label="ลักษณะความผิด" label="ลักษณะความผิด"
option-value="id" option-value="id"
@ -448,12 +480,13 @@ function onSubmit() {
lazy-rules lazy-rules
/> />
</div> </div>
<div class="col-xs-12 col-sm-2"> <div class="col-xs-12 col-sm-2" id="considerationLevel">
<q-select <q-select
for="considerationLevel"
ref="considerationLevelRef" ref="considerationLevelRef"
dense dense
outlined outlined
v-model="considerationLevel" v-model="formData.considerationLevel"
:options="considerationLeveltoptions" :options="considerationLeveltoptions"
label="ระดับการพิจารณา" label="ระดับการพิจารณา"
option-value="id" option-value="id"
@ -462,14 +495,14 @@ function onSubmit() {
map-options map-options
:rules="[(val) => !!val || `${'กรุณาเลือกระดับการพิจารณา'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกระดับการพิจารณา'}`]"
lazy-rules lazy-rules
@update:model-value="selectLevel(considerationLevel)" @update:model-value="selectLevel(formData.considerationLevel)"
/> />
</div> </div>
<div class="col-xs-12 col-sm-3"></div> <div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-2"> <div class="col-xs-12 col-sm-2" id="datewarn">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="datewarn" v-model="formData.datewarn"
:locale="'th'" :locale="'th'"
autoApply autoApply
borderless borderless
@ -484,11 +517,16 @@ function onSubmit() {
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
for="datewarn"
ref="datewarnRef" ref="datewarnRef"
outlined outlined
dense dense
class="full-width datepicker" class="full-width datepicker"
:model-value="datewarn != null ? date2Thai(datewarn) : null" :model-value="
formData.datewarn != null
? date2Thai(formData.datewarn)
: null
"
label="วันที่แจ้งเตือนล่วงหน้า" label="วันที่แจ้งเตือนล่วงหน้า"
:rules="[ :rules="[
(val) => (val) =>
@ -508,12 +546,13 @@ function onSubmit() {
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-xs-12 col-sm-2"> <div class="col-xs-12 col-sm-2" id="receivecomplaints">
<q-select <q-select
for="receivecomplaints"
ref="receivecomplaintsRef" ref="receivecomplaintsRef"
dense dense
outlined outlined
v-model="receivecomplaints" v-model="formData.receivecomplaints"
:options="receivecomplaintstoptions" :options="receivecomplaintstoptions"
label="รับเรื่องร้องเรียน" label="รับเรื่องร้องเรียน"
option-value="id" option-value="id"
@ -525,24 +564,26 @@ function onSubmit() {
/> />
</div> </div>
<div class="col-xs-12 col-sm-6"></div> <div class="col-xs-12 col-sm-6"></div>
<div class="col-xs-12 col-sm-4"> <div class="col-xs-12 col-sm-4" id="petitioner">
<q-input <q-input
id="petitioner"
ref="petitionerRef" ref="petitionerRef"
dense dense
outlined outlined
v-model="petitioner" v-model="formData.petitioner"
label="ผู้ร้องเรียน" label="ผู้ร้องเรียน"
:rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]" :rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
lazy-rules lazy-rules
/> />
</div> </div>
<div class="col-xs-12 col-sm-4"> <div class="col-xs-12 col-sm-4" id="files">
<q-file <q-file
for="files"
ref="filesRef" ref="filesRef"
class="col-xs-12 col-sm-10" class="col-xs-12 col-sm-10"
outlined outlined
dense dense
v-model="files" v-model="formData.files"
@added="fileUploadDoc" @added="fileUploadDoc"
label="ไฟล์เอกสารหลักฐาน" label="ไฟล์เอกสารหลักฐาน"
hide-bottom-space hide-bottom-space
@ -562,6 +603,7 @@ function onSubmit() {
<div class="row col-12 q-pa-sm"> <div class="row col-12 q-pa-sm">
<q-space /> <q-space />
<q-btn <q-btn
id="onSubmit"
flat flat
round round
color="secondary" color="secondary"

View file

@ -2,12 +2,15 @@
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { DataList } from "@/modules/11_discipline/interface/response/complaint";
// importStroe // importStroe
import { useComplainstDataStore } from "../../store/ComplaintsStore"; import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
const router = useRouter(); const router = useRouter();
const complainstStore = useComplainstDataStore(); const complainstStore = useComplainstDataStore();
const { fectComplainst } = complainstStore; // function stores const { fetchComplainst } = complainstStore; // function stores
// Table // Table
const filterTable = ref<string>(""); const filterTable = ref<string>("");
@ -96,12 +99,12 @@ const visibleColumns = ref<string[]>([
"considerationDeadlineDate", "considerationDeadlineDate",
]); ]);
onMounted(async () => { onMounted(async () => {
await fecthListComplaints(); await fetchListComplaints();
}); });
// //
async function fecthListComplaints() { async function fetchListComplaints() {
const listData = [ const listData: DataList[] = [
{ {
subject: "ทุจริตในหน้าที่", subject: "ทุจริตในหน้าที่",
detail: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน", detail: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
@ -131,7 +134,7 @@ async function fecthListComplaints() {
considerationDeadlineDate: "2023-11-01", considerationDeadlineDate: "2023-11-01",
}, },
]; ];
await fectComplainst(listData); await fetchComplainst(listData);
} }
function redirectToPageadd() { function redirectToPageadd() {
router.push(`/discipline/complaints/add`); router.push(`/discipline/complaints/add`);
@ -157,6 +160,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
<div class="q-pa-md"> <div class="q-pa-md">
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md"> <q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
<q-btn <q-btn
id="addComplaints"
flat flat
dense dense
round round
@ -167,10 +171,19 @@ const paginationLabel = (start: string, end: string, total: string) => {
> >
<q-space /> <q-space />
<div class="col-2"> <div class="col-2">
<q-input dense outlined v-model="filterTable" label="ค้นหา" /> <q-input
id="filterTable"
for="filterTable"
dense
outlined
v-model="filterTable"
label="ค้นหา"
/>
</div> </div>
<div class="col-2"> <div class="col-2">
<q-select <q-select
id="visibleColumns"
for="visibleColumns"
v-model="visibleColumns" v-model="visibleColumns"
multiple multiple
outlined outlined
@ -186,6 +199,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
</div> </div>
</q-toolbar> </q-toolbar>
<d-table <d-table
id="table"
ref="table" ref="table"
:columns="columns" :columns="columns"
:rows="complainstStore.rows" :rows="complainstStore.rows"
@ -209,46 +223,21 @@ const paginationLabel = (start: string, end: string, total: string) => {
</template> </template>
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer" style="height: 40px"> <q-tr :props="props" class="cursor-pointer" style="height: 40px">
<q-td key="no" :props="props"> <q-td v-for="col in props.cols" :key="col.name" :props="props">
{{ props.rowIndex + 1 }} <div v-if="col.name == 'no'">
</q-td> {{ props.rowIndex + 1 }}
<q-td key="subject" :props="props"> </div>
{{ props.row.subject }} <div v-if="col.name == 'detail'">
</q-td> <div class="table_ellipsis">
<q-td key="detail" :props="props"> {{ props.row.detail }}
<div class="table_ellipsis"> </div>
{{ props.row.detail }} </div>
<div v-else>
{{ col.value }}
</div> </div>
</q-td>
<q-td key="complainant" :props="props">
{{ props.row.complainant }}
</q-td>
<q-td key="offenseDescription" :props="props">
{{ props.row.offenseDescription }}
</q-td>
<q-td key="creationDate" :props="props">
{{ props.row.creationDate }}
</q-td>
<q-td key="considerationLevel" :props="props">
{{ props.row.considerationLevel }}
</q-td>
<q-td key="considerationDeadlineDate" :props="props">
{{ props.row.considerationDeadlineDate }}
</q-td> </q-td>
</q-tr> </q-tr>
</template> </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> </d-table>
</div> </div>
</q-card> </q-card>

View file

@ -2,13 +2,14 @@
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { DataList } from "../../interface/response/order";
// importStroe // importStroe
import { useOrderStore } from "../../store/OrderStore"; import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
const router = useRouter(); const router = useRouter();
const OrderStore = useOrderStore(); const OrderStore = useOrderStore();
const { fecthOrder } = OrderStore; // function stores const { fetchOrder } = OrderStore; // function stores
// table // table
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
@ -78,12 +79,12 @@ const visibleColumns = ref<string[]>([
const filterTable = ref<string>(""); const filterTable = ref<string>("");
onMounted(async () => { onMounted(async () => {
await fecthListOrder(); await fetchListOrder();
}); });
// API // API
async function fecthListOrder() { async function fetchListOrder() {
const listData = [ const listData: DataList[] = [
{ {
subject: "ทุจริตในหน้าที่", subject: "ทุจริตในหน้าที่",
ordernumber: "1/2556", ordernumber: "1/2556",
@ -109,7 +110,7 @@ async function fecthListOrder() {
statusorder: "เสร็จสิ้นแล้ว", statusorder: "เสร็จสิ้นแล้ว",
}, },
]; ];
await fecthOrder(listData); // stores await fetchOrder(listData); // stores
} }
// redirect // redirect
@ -139,6 +140,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
<div class="q-pa-md"> <div class="q-pa-md">
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md"> <q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
<q-btn <q-btn
id="addDisciplineOrder"
flat flat
dense dense
round round
@ -149,10 +151,17 @@ const paginationLabel = (start: string, end: string, total: string) => {
> >
<q-space /> <q-space />
<div class="col-2"> <div class="col-2">
<q-input dense outlined v-model="filterTable" label="ค้นหา" /> <q-input
for="filterTable"
dense
outlined
v-model="filterTable"
label="ค้นหา"
/>
</div> </div>
<div class="col-2"> <div class="col-2">
<q-select <q-select
for="visibleColumns"
v-model="visibleColumns" v-model="visibleColumns"
multiple multiple
outlined outlined
@ -168,6 +177,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
</div> </div>
</q-toolbar> </q-toolbar>
<d-table <d-table
for="table"
ref="table" ref="table"
:columns="columns" :columns="columns"
:rows="OrderStore.rows" :rows="OrderStore.rows"
@ -191,40 +201,13 @@ const paginationLabel = (start: string, end: string, total: string) => {
</template> </template>
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer" style="height: 40px"> <q-tr :props="props" class="cursor-pointer" style="height: 40px">
<q-td key="subject" :props="props"> <q-td v-for="col in props.cols" :key="col.name" :props="props">
{{ props.row.subject }} <div>
</q-td> {{ col.value }}
<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 }}
</div> </div>
</q-td> </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> </q-tr>
</template> </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> </d-table>
</div> </div>
</q-card> </q-card>

View file

@ -3,9 +3,9 @@ import { ref } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
// import step // import step
import step01 from "./Step01.vue"; import step01 from "@/modules/11_discipline/components/4_Order/Step01.vue";
import step02 from "./Step02.vue"; import step02 from "@/modules/11_discipline/components/4_Order/Step02.vue";
import step03 from "./Step03.vue"; import step03 from "@/modules/11_discipline/components/4_Order/Step03.vue";
const router = useRouter(); const router = useRouter();

View file

@ -1,8 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref, reactive } from "vue";
import { useQuasar } from "quasar"; 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 // importStroe
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
@ -38,28 +42,30 @@ const listInvestigationOptions = ref<DataOption[]>([
{ id: "2", name: "รายการสอบสวนความผิดทางวินัย 3" }, { id: "2", name: "รายการสอบสวนความผิดทางวินัย 3" },
]); ]);
// //
const orderType = ref<string>(""); const formData = reactive<FormData>({
const orderBy = ref<string>(""); orderType: "",
const listInvestigation = ref<string>(""); orderBy: "",
const authority = ref<string>(""); listInvestigation: "",
const orderNumber = ref<string>(); authority: "",
const dateYear = ref<number>(2023); orderNumber: "",
const date = ref<Date | null>(null); dateYear: 0,
const authorityPosition = ref<string>(""); date: null,
const subject = ref<string>(""); authorityPosition: "",
const mistakeDetail = ref<string>(""); subject: "",
mistakeDetail: "",
});
// validateForm // validateForm
const orderTypeRef = ref<any>(null); const orderTypeRef = ref<Object | null>(null);
const orderByRef = ref<any>(null); const orderByRef = ref<Object | null>(null);
const listInvestigationRef = ref<any>(null); const listInvestigationRef = ref<Object | null>(null);
const authorityRef = ref<any>(null); const authorityRef = ref<Object | null>(null);
const orderNumberRef = ref<any>(null); const orderNumberRef = ref<Object | null>(null);
const dateYearRef = ref<any>(null); const dateYearRef = ref<Object | null>(null);
const dateRef = ref<any>(null); const dateRef = ref<Object | null>(null);
const authorityPositionRef = ref<any>(null); const authorityPositionRef = ref<Object | null>(null);
const subjectRef = ref<any>(null); const subjectRef = ref<Object | null>(null);
const mistakeDetailRef = ref<any>(null); const mistakeDetailRef = ref<Object | null>(null);
const myObjectRef: MyObjectRef = { const myObjectRef: MyObjectRef = {
orderType: orderTypeRef, orderType: orderTypeRef,
orderBy: orderByRef, orderBy: orderByRef,
@ -91,6 +97,7 @@ function validateForm() {
} }
function onSubmit() { function onSubmit() {
console.log(formData);
dialogConfirm( dialogConfirm(
$q, $q,
async () => { async () => {
@ -109,10 +116,11 @@ function onSubmit() {
<div class="col-xs-12 col-sm-6"> <div class="col-xs-12 col-sm-6">
ประเภทคำส ประเภทคำส
<q-select <q-select
for="orderType"
ref="orderTypeRef" ref="orderTypeRef"
dense dense
outlined outlined
v-model="orderType" v-model="formData.orderType"
:options="orderTypeOptions" :options="orderTypeOptions"
option-value="id" option-value="id"
option-label="name" option-label="name"
@ -126,10 +134,11 @@ function onSubmit() {
<div class="col-xs-12 col-sm-6"> <div class="col-xs-12 col-sm-6">
คำสงโดย คำสงโดย
<q-select <q-select
for="orderBy"
ref="orderByRef" ref="orderByRef"
dense dense
outlined outlined
v-model="orderBy" v-model="formData.orderBy"
:options="orderByOptions" :options="orderByOptions"
option-value="id" option-value="id"
option-label="name" option-label="name"
@ -143,10 +152,11 @@ function onSubmit() {
<div class="col-xs-12 col-sm-6"> <div class="col-xs-12 col-sm-6">
เลอกรายการสอบสวนความผดทางว เลอกรายการสอบสวนความผดทางว
<q-select <q-select
for="listInvestigation"
ref="listInvestigationRef" ref="listInvestigationRef"
dense dense
outlined outlined
v-model="listInvestigation" v-model="formData.listInvestigation"
:options="listInvestigationOptions" :options="listInvestigationOptions"
option-value="id" option-value="id"
option-label="name" option-label="name"
@ -162,10 +172,11 @@ function onSubmit() {
<div class="col-xs-12 col-sm-6"> <div class="col-xs-12 col-sm-6">
อำนาจลงนาม อำนาจลงนาม
<q-input <q-input
for="authority"
ref="authorityRef" ref="authorityRef"
dense dense
outlined outlined
v-model="authority" v-model="formData.authority"
placeholder="กรอกผู้มีอำนาจลงนาม" placeholder="กรอกผู้มีอำนาจลงนาม"
:rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]" :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
lazy-rules lazy-rules
@ -175,10 +186,11 @@ function onSubmit() {
<div class="col-6"> <div class="col-6">
คำสงท คำสงท
<q-input <q-input
for="orderNumber"
ref="orderNumberRef" ref="orderNumberRef"
outlined outlined
dense dense
v-model="orderNumber" v-model="formData.orderNumber"
hide-bottom-space hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอรคำสั่งที่'}`]" :rules="[(val) => !!val || `${'กรุณากรอรคำสั่งที่'}`]"
lazy-rules lazy-rules
@ -191,7 +203,7 @@ function onSubmit() {
<div class="col-5"> <div class="col-5">
พศ พศ
<datepicker <datepicker
v-model="dateYear" v-model="formData.dateYear"
:locale="'th'" :locale="'th'"
autoApply autoApply
year-picker year-picker
@ -204,9 +216,10 @@ function onSubmit() {
<template #trigger> <template #trigger>
<q-input <q-input
ref="dateYearRef" ref="dateYearRef"
:model-value="dateYear + 543" :model-value="
formData.dateYear ? formData.dateYear + 543 : null
"
:rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]" :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
:label="`${'พ.ศ.'}`"
dense dense
outlined outlined
> >
@ -219,7 +232,7 @@ function onSubmit() {
นทผลคำส นทผลคำส
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="date" v-model="formData.date"
:locale="'th'" :locale="'th'"
autoApply autoApply
borderless borderless
@ -234,11 +247,14 @@ function onSubmit() {
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
for="date"
ref="dateRef" ref="dateRef"
outlined outlined
dense dense
class="full-width datepicker" class="full-width datepicker"
:model-value="date != null ? date2Thai(date) : null" :model-value="
formData.date != null ? date2Thai(formData.date) : null
"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่มีผลคำสั่ง'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่มีผลคำสั่ง'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
@ -256,10 +272,11 @@ function onSubmit() {
<div class="col-xs-12 col-sm-6"> <div class="col-xs-12 col-sm-6">
ตำแหนงผอำนาจลงนาม ตำแหนงผอำนาจลงนาม
<q-input <q-input
for="authorityPosition"
ref="authorityPositionRef" ref="authorityPositionRef"
dense dense
outlined outlined
v-model="authorityPosition" v-model="formData.authorityPosition"
placeholder="กรอกตำแหน่งผู้มีอำนาจลงนาม" placeholder="กรอกตำแหน่งผู้มีอำนาจลงนาม"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
lazy-rules lazy-rules
@ -268,10 +285,11 @@ function onSubmit() {
<div class="col-xs-12 col-sm-6"> <div class="col-xs-12 col-sm-6">
คำสงเรอง คำสงเรอง
<q-input <q-input
for="subject"
ref="subjectRef" ref="subjectRef"
dense dense
outlined outlined
v-model="subject" v-model="formData.subject"
placeholder="กรอกคำสั่งเรื่อง" placeholder="กรอกคำสั่งเรื่อง"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]" :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
lazy-rules lazy-rules
@ -280,10 +298,11 @@ function onSubmit() {
<div class="col-xs-12 col-sm-12"> <div class="col-xs-12 col-sm-12">
รายละเอยดการกระทำความผ รายละเอยดการกระทำความผ
<q-input <q-input
for="mistakeDetail"
ref="mistakeDetailRef" ref="mistakeDetailRef"
dense dense
outlined outlined
v-model="mistakeDetail" v-model="formData.mistakeDetail"
placeholder="กรอกรายละเอียดการกระทำความผิด" placeholder="กรอกรายละเอียดการกระทำความผิด"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]" :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
lazy-rules lazy-rules
@ -295,6 +314,7 @@ function onSubmit() {
</div> </div>
<q-card-actions align="right"> <q-card-actions align="right">
<q-btn <q-btn
for="submit"
flat flat
round round
unelevated unelevated

View file

@ -1,12 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch } from "vue"; import { ref, reactive, watch } from "vue";
import type { FormData, FormRef } from "@/modules/11_discipline/interface/request/director"; import type {
FormData,
FormRef,
} from "@/modules/11_discipline/interface/request/director";
// props page // props page
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
default: null default: null,
}, },
onSubmit: { onSubmit: {
type: Function, type: Function,
@ -16,7 +19,7 @@ const props = defineProps({
// //
const idCard = ref<string>(""); const idCard = ref<string>("");
const idCardRef = ref<any>(null) const idCardRef = ref<any>(null);
// form // form
const formData = reactive<FormData>({ const formData = reactive<FormData>({
@ -30,31 +33,31 @@ const formData = reactive<FormData>({
}); });
watch(props.data, async () => { watch(props.data, async () => {
console.log("data==>", props.data) console.log("data==>", props.data);
formData.prefix = props.data.prefix formData.prefix = props.data.prefix;
formData.firstname = props.data.firstname formData.firstname = props.data.firstname;
formData.lastname = props.data.lastname formData.lastname = props.data.lastname;
formData.position = props.data.position formData.position = props.data.position;
formData.phone = props.data.phone formData.phone = props.data.phone;
formData.responsibilities = props.data.responsibilities formData.responsibilities = props.data.responsibilities;
formData.email = props.data.email formData.email = props.data.email;
}); });
// //
function addEmployee() { function addEmployee() {
if (idCardRef.value.validate()) { if (idCardRef.value.validate()) {
console.log("idCard===>", idCard.value) console.log("idCard===>", idCard.value);
} }
} }
// api // api
const prefixRef = ref<object | null>(null) const prefixRef = ref<object | null>(null);
const firstnameRef = ref<object | null>(null) const firstnameRef = ref<object | null>(null);
const lastnameRef = ref<object | null>(null) const lastnameRef = ref<object | null>(null);
const positionRef = ref<object | null>(null) const positionRef = ref<object | null>(null);
const phoneRef = ref<object | null>(null) const phoneRef = ref<object | null>(null);
const responsibilitiesRef = ref<object | null>(null) const responsibilitiesRef = ref<object | null>(null);
const emailRef = ref<object | null>(null) const emailRef = ref<object | null>(null);
const formRef: FormRef = { const formRef: FormRef = {
prefix: prefixRef, prefix: prefixRef,
firstname: firstnameRef, firstname: firstnameRef,
@ -62,7 +65,7 @@ const formRef: FormRef = {
position: positionRef, position: positionRef,
phone: phoneRef, phone: phoneRef,
responsibilities: responsibilitiesRef, responsibilities: responsibilitiesRef,
email: emailRef email: emailRef,
}; };
function onValidate() { function onValidate() {
@ -77,69 +80,127 @@ function onValidate() {
} }
} }
if (hasError.every((result) => result === true)) { if (hasError.every((result) => result === true)) {
props.onSubmit() props.onSubmit();
} }
}; }
</script> </script>
<template> <template>
<form @submit.prevent.stop="onValidate" class="q-gutter-md"> <form @submit.prevent.stop="onValidate" class="q-gutter-md">
<div class="col-12"> <div class="col-12">
<q-card bordered> <q-card bordered>
<div class="row q-pa-md q-col-gutter-sm"> <div class="row q-pa-md q-col-gutter-sm">
<div class="col-md-3 row q-pa-md text-bold"> <div class="col-md-3 row q-pa-md text-bold">
<label>นหาบคคลากรทอยในระบบ</label> <label>นหาบคคลากรทอยในระบบ</label>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<q-input dense outlined v-model="idCard" label="รหัสบัตรประชาชน" ref="idCardRef" <q-input
:rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]" /> dense
outlined
v-model="idCard"
label="รหัสบัตรประชาชน"
ref="idCardRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]"
/>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<q-btn unelevated dense color="primary" class="q-px-md q-py-sm" @click="addEmployee" label="เพิ่มบุคลากร" /> <q-btn
unelevated
dense
color="primary"
class="q-px-md q-py-sm"
@click="addEmployee"
label="เพิ่มบุคลากร"
/>
</div> </div>
</div> </div>
<div class="row q-px-md q-col-gutter-sm"> <div class="row q-px-md q-col-gutter-sm">
<div class="col-md-3"> <div class="col-md-3">
<q-input dense outlined v-model="formData.prefix" label="คำนำหน้า" ref="prefixRef" <q-input
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]" /> dense
outlined
v-model="formData.prefix"
label="คำนำหน้า"
ref="prefixRef"
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]"
/>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<q-input dense outlined v-model="formData.firstname" label="ชื่อ" ref="firstnameRef" <q-input
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]" /> dense
outlined
v-model="formData.firstname"
label="ชื่อ"
ref="firstnameRef"
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]"
/>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<q-input dense outlined v-model="formData.lastname" label="นามสกุล" ref="lastnameRef" <q-input
:rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]" /> dense
outlined
v-model="formData.lastname"
label="นามสกุล"
ref="lastnameRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]"
/>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<q-input dense outlined v-model="formData.position" label="ตำแหน่ง" ref="positionRef" <q-input
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]" /> dense
outlined
v-model="formData.position"
label="ตำแหน่ง"
ref="positionRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
/>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<q-input dense outlined v-model="formData.phone" label="เบอร์โทร" ref="phoneRef" <q-input
:rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]" /> dense
outlined
v-model="formData.phone"
label="เบอร์โทร"
ref="phoneRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]"
/>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<q-input dense outlined v-model="formData.responsibilities" label="หน้าที่" ref="responsibilitiesRef" <q-input
:rules="[(val: string) => !!val || `${'กรุณากรอกหน้าที่'}`]" /> dense
outlined
v-model="formData.responsibilities"
label="หน้าที่"
ref="responsibilitiesRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกหน้าที่'}`]"
/>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<q-input dense outlined v-model="formData.email" label="อีเมล" ref="emailRef" <q-input
:rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]" /> dense
outlined
v-model="formData.email"
label="อีเมล"
ref="emailRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]"
/>
</div> </div>
</div> </div>
<q-separator /> <q-separator />
<div class="row col-12 q-pa-sm"> <div class="row col-12 q-pa-sm">
<q-space /> <q-space />
<q-btn type="submit" flat round color="public" icon="mdi-content-save-outline"> <q-btn
type="submit"
flat
round
color="public"
icon="mdi-content-save-outline"
>
<q-tooltip>นทกขอม</q-tooltip> <q-tooltip>นทกขอม</q-tooltip>
</q-btn> </q-btn>
</div> </div>
</q-card> </q-card>
</div> </div>
</form> </form>
</template> </template>

View file

@ -0,0 +1,38 @@
interface FormData {
complainantType: string
complainant: string
office: string
agency: string
topicComplaint: string
detail: string
datereceive: Date | null
dateconsideration: Date | null
offenseDescription: string
considerationLevel: string
datewarn: Date | null
receivecomplaints: string
petitioner: string
files: any | null
}
interface MyObjectComplaintsRef {
complainantType: object | null;
complainant: object | null;
office: object | null;
agency: object | null;
topicComplaint: object | null;
datereceive: object | null;
dateconsideration: object | null;
offenseDescription: object | null;
considerationLevel: object | null;
datewarn: object | null;
receivecomplaints: object | null;
petitioner: object | null;
files: object | null;
[key: string]: any;
}
export type {
FormData,
MyObjectComplaintsRef
}

View file

@ -0,0 +1,30 @@
interface FormData {
orderType: string;
orderBy: string;
listInvestigation: string;
authority: string;
orderNumber: string;
dateYear: number;
date: Date | null;
authorityPosition: string
subject: string;
mistakeDetail: string
}
interface MyObjectRef {
orderType: object | null;
orderBy: object | null;
listInvestigation: object | null;
authority: object | null;
orderNumber: object | null;
dateYear: object | null;
date: object | null;
authorityPosition: object | null;
subject: object | null;
mistakeDetail: object | null;
[key: string]: any;
}
export type {
FormData,
MyObjectRef
}

View file

@ -0,0 +1,15 @@
interface DataList {
subject: string
detail: string
complainant: string
offenseDescription: string
creationDate: string
considerationLevel: string
considerationDeadlineDate: string
}
export type {
DataList
}

View file

@ -0,0 +1,15 @@
interface DataList {
subject: string
ordernumber: string
dateOrder: string
orderby: string
signer: string
statusorder: string
}
export type {
DataList
}

View file

@ -1,15 +1,14 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { ref } from "vue"; import { ref } from "vue";
import type { DataOption } from "../interface/index/Main"; import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
import type { DataList } from "@/modules/11_discipline/interface/response/complaint"
export const useComplainstDataStore = defineStore("DisciplineComplainst", () => { export const useComplainstDataStore = defineStore("DisciplineComplainst", () => {
const rows = ref<any>([]) const rows = ref<DataList[]>([])
function fetchComplainst(data: DataList[]) {
let datalist = data.map((e: DataList) => ({
function fectComplainst(data: any) {
let datalist = data.map((e: any) => ({
subject: e.subject, subject: e.subject,
detail: e.detail, detail: e.detail,
complainant: e.complainant, complainant: e.complainant,
@ -20,16 +19,13 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
})) }))
rows.value = datalist rows.value = datalist
} }
const complainantoptionsMain = ref<DataOption[]>() const complainantoptionsMain = ref<DataOption[]>()
const complainantoptions = ref<DataOption[]>() const complainantoptions = ref<DataOption[]>()
const agencytoptionsMain = ref<DataOption[]>() const agencytoptionsMain = ref<DataOption[]>()
const agencytoptions = ref<DataOption[]>() const agencytoptions = ref<DataOption[]>()
const optionListNameMain = ref<DataOption[]>([]) const optionListNameMain = ref<DataOption[]>([])
const optionListName = ref<DataOption[]>([]) const optionListName = ref<DataOption[]>([])
function fectOptioin(complainantoptions: any, agencytoptions: any) { function fetchOptioin(complainantoptions: any, agencytoptions: any) {
complainantoptionsMain.value = complainantoptions complainantoptionsMain.value = complainantoptions
agencytoptionsMain.value = agencytoptions agencytoptionsMain.value = agencytoptions
} }
@ -37,7 +33,7 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
optionListNameMain.value = list optionListNameMain.value = list
optionListName.value = list optionListName.value = list
} }
function filterSelector(val: any, update: Function, type: string) { function filterSelector(val: string, update: Function, type: string) {
update(() => { update(() => {
if (type === "filtercomplainantType" && complainantoptionsMain.value) { if (type === "filtercomplainantType" && complainantoptionsMain.value) {
complainantoptions.value = complainantoptionsMain.value.filter( complainantoptions.value = complainantoptionsMain.value.filter(
@ -58,10 +54,10 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
return { return {
rows, rows,
optionListName, optionListName,
fectComplainst, fetchComplainst,
selectComplainantTpye, selectComplainantTpye,
filterSelector, filterSelector,
fectOptioin, fetchOptioin,
complainantoptions, complainantoptions,
agencytoptions, agencytoptions,
} }

View file

@ -1,10 +1,12 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { ref } from "vue"; import { ref } from "vue";
import type { DataList } from "@/modules/11_discipline/interface/response/order"
export const useOrderStore = defineStore("DisciplineOrder", () => { export const useOrderStore = defineStore("DisciplineOrder", () => {
const rows = ref<any>([]) const rows = ref<DataList[]>([])
async function fecthOrder(data: any) { async function fetchOrder(data: DataList[]) {
let datalist = data.map((e: any) => ({ let datalist = data.map((e: DataList) => ({
subject: e.subject, subject: e.subject,
ordernumber: e.ordernumber, ordernumber: e.ordernumber,
dateOrder: e.dateOrder, dateOrder: e.dateOrder,
@ -19,6 +21,6 @@ export const useOrderStore = defineStore("DisciplineOrder", () => {
return { return {
rows, rows,
fecthOrder fetchOrder
} }
}) })