จัดโค้ด เรื่อง เรื่องร้องเรียน
This commit is contained in:
setthawutttty
parent
5b47826667
commit
aeaa8c8df2
5 changed files with 103 additions and 80 deletions
|
|
@ -6,7 +6,6 @@ const router = useRouter();
|
|||
|
||||
/** บันทึกข้อมูล */
|
||||
async function onSubmit () {
|
||||
|
||||
/** post */
|
||||
console.log("add");
|
||||
router.push(`/discipline/complaints`);
|
||||
|
|
|
|||
|
|
@ -1,17 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import Form from "@/modules/11_discipline/components/1_Complaint/Form.vue";
|
||||
import type { FormData } from "@/modules/11_discipline/interface/request/complaint";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import type { FormData } from "@/modules/11_discipline/interface/request/complaint";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const id = ref<string>(route.params.id as string);
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
});
|
||||
|
||||
// get ข้อมูลเก่ากรณีแก้ไขข้อมูล
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const data = reactive<FormData>({
|
||||
complainantType: "",
|
||||
complainant: "",
|
||||
|
|
@ -28,8 +25,9 @@ const data = reactive<FormData>({
|
|||
petitioner: "",
|
||||
files: null,
|
||||
});
|
||||
|
||||
/** ดึงค่าจาก api */
|
||||
const fetchData = async () => {
|
||||
// ดึงค่าจาก api
|
||||
data.complainantType = "2"
|
||||
data.complainant = "1"
|
||||
data.office = "0"
|
||||
|
|
@ -46,12 +44,16 @@ const fetchData = async () => {
|
|||
data.files = ""
|
||||
};
|
||||
|
||||
// แก้ไขข้อมูล
|
||||
const onSubmit = async () => {
|
||||
// put
|
||||
/** ฟังชั่น แก้ไข */
|
||||
async function onSubmit() {
|
||||
console.log("edit");
|
||||
router.push(`/discipline/complaints`);
|
||||
};
|
||||
|
||||
/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
|
|
|
|||
|
|
@ -3,28 +3,28 @@ import { ref, onMounted, reactive, watch } from "vue";
|
|||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
/** import Type */
|
||||
/** import Type */
|
||||
import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
|
||||
import type {
|
||||
FormData,
|
||||
MyObjectComplaintsRef,
|
||||
} from "@/modules/11_discipline/interface/request/complaint";
|
||||
|
||||
/** importStroe*/
|
||||
/** importStroe*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
|
||||
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dialogConfirm } = mixin;
|
||||
const complainstStore = useComplainstDataStore();
|
||||
|
||||
const fileDocDataUpload = ref<File[]>([]);
|
||||
|
||||
/** เรียกใช้ store */
|
||||
const mixin = useCounterMixin();
|
||||
const complainstStore = useComplainstDataStore();
|
||||
const { date2Thai, dialogConfirm } = mixin;
|
||||
const { selectComplainantTpye, filterSelector } = complainstStore; // function จาก store complainstStore
|
||||
|
||||
// validateForm
|
||||
/** validateForm */
|
||||
const complainantTypeRef = ref<Object | null>(null);
|
||||
const complainantRef = ref<Object | null>(null);
|
||||
const officeRef = ref<Object | null>(null);
|
||||
|
|
@ -52,7 +52,7 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
/** ข้อมูล form*/
|
||||
/** ข้อมูล form*/
|
||||
const formData = reactive<FormData>({
|
||||
complainantType: "",
|
||||
complainant: "",
|
||||
|
|
@ -70,7 +70,25 @@ const formData = reactive<FormData>({
|
|||
files: null,
|
||||
});
|
||||
|
||||
// options ทั้งหมด
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const objectComplaintsRef: MyObjectComplaintsRef = {
|
||||
complainantType: complainantTypeRef,
|
||||
complainant: complainantRef,
|
||||
office: officeRef,
|
||||
agency: agencyRef,
|
||||
topicComplaint: topicComplaintRef,
|
||||
detail: detailRef,
|
||||
datereceive: datereceiveRef,
|
||||
dateconsideration: dateconsiderationRef,
|
||||
offenseDescription: offenseDescriptionRef,
|
||||
considerationLevel: considerationLevelRef,
|
||||
datewarn: datewarnRef,
|
||||
receivecomplaints: receivecomplaintsRef,
|
||||
petitioner: petitionerRef,
|
||||
files: filesRef,
|
||||
};
|
||||
|
||||
/** options ทั้งหมด*/
|
||||
const offenseDescriptiontoptions = ref<DataOption[]>([
|
||||
{ id: "0", name: "ยังไม่ระบุ" },
|
||||
{ id: "1", name: "ไม่ร้ายแรง" },
|
||||
|
|
@ -91,10 +109,10 @@ const receivecomplaintstoptions = ref<DataOption[]>([
|
|||
{ id: "6", name: "บอกกล่าว" },
|
||||
]);
|
||||
|
||||
|
||||
|
||||
|
||||
// เลือกผู้ร้องเรียน
|
||||
/**
|
||||
* รับค่าผู้ถูกร้องเรียน
|
||||
* @param val บุคคล หน่วยงาน กทม
|
||||
*/
|
||||
async function selectComplainant(val: string) {
|
||||
formData.complainant = "";
|
||||
formData.office = "";
|
||||
|
|
@ -105,7 +123,8 @@ async function selectComplainant(val: string) {
|
|||
await fetchOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fetchOffice เรียกโครงสร้างสำนักงาน
|
||||
}
|
||||
}
|
||||
// เรียกรายชื่อ
|
||||
|
||||
/** เรียกรายชื่อ */
|
||||
async function fetchListname() {
|
||||
const listName = [
|
||||
{
|
||||
|
|
@ -123,30 +142,24 @@ async function fetchListname() {
|
|||
];
|
||||
selectComplainantTpye(listName);
|
||||
}
|
||||
// เรียกโครงสร้างสำนักงาน
|
||||
async function fetchOffice() {
|
||||
// const listOffice = [
|
||||
// {
|
||||
// id: "1",
|
||||
// name: "สำนักเอ",
|
||||
// },
|
||||
// {
|
||||
// id: "2",
|
||||
// name: "สำนักเอ",
|
||||
// },
|
||||
// {
|
||||
// id: "3",
|
||||
// name: "สำนักเอ",
|
||||
// },
|
||||
// ];
|
||||
}
|
||||
// อัพโหลดไฟล์
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
|
||||
/** เรียกโครงสร้างสำนักงาน */
|
||||
async function fetchOffice() {}
|
||||
|
||||
/**
|
||||
* ฟังชั่นอัปโหลดไฟล์
|
||||
* @param files ไฟล์ที่รับมา
|
||||
*/
|
||||
async function fileUploadDoc(files: any) {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
};
|
||||
// เลือกระดับการพิจารณา
|
||||
}
|
||||
|
||||
/**
|
||||
* เลือกระดับการพิจารณา
|
||||
* @param val รับตัวเลข ในรูปแบบ string
|
||||
*/
|
||||
function selectLevel(val: string) {
|
||||
let dayNum = 0;
|
||||
if (val == "3") {
|
||||
|
|
@ -166,24 +179,7 @@ function selectLevel(val: string) {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const objectComplaintsRef: MyObjectComplaintsRef = {
|
||||
complainantType: complainantTypeRef,
|
||||
complainant: complainantRef,
|
||||
office: officeRef,
|
||||
agency: agencyRef,
|
||||
topicComplaint: topicComplaintRef,
|
||||
detail: detailRef,
|
||||
datereceive: datereceiveRef,
|
||||
dateconsideration: dateconsiderationRef,
|
||||
offenseDescription: offenseDescriptionRef,
|
||||
considerationLevel: considerationLevelRef,
|
||||
datewarn: datewarnRef,
|
||||
receivecomplaints: receivecomplaintsRef,
|
||||
petitioner: petitionerRef,
|
||||
files: filesRef,
|
||||
};
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function validateForm() {
|
||||
const hasError = [];
|
||||
for (const key in objectComplaintsRef) {
|
||||
|
|
@ -201,19 +197,21 @@ function validateForm() {
|
|||
console.log("ไม่ผ่าน ");
|
||||
}
|
||||
}
|
||||
// บันทึกข้อมูล
|
||||
|
||||
/** ฟังชั่น บันทึก */
|
||||
function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
console.log(formData);
|
||||
props.onSubmit()
|
||||
props.onSubmit();
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
|
||||
/** เช็คข้อมูลจาก props*/
|
||||
watch(props.data, async () => {
|
||||
formData.complainantType = props.data.complainantType;
|
||||
formData.complainant = props.data.complainant;
|
||||
|
|
@ -236,29 +234,27 @@ watch(props.data, async () => {
|
|||
<q-card flat bordered>
|
||||
<form @submit.prevent="validateForm">
|
||||
<div class="col-12 row q-pa-md">
|
||||
<div
|
||||
class="col-xs-12 col-sm-12 row q-col-gutter-md"
|
||||
>
|
||||
<div class="col-xs-12 col-sm-12 row q-col-gutter-md">
|
||||
<div class="col-xs-12 col-sm-3" id="complainantType">
|
||||
<q-select
|
||||
for="SelectcomplainantType"
|
||||
v-model="formData.complainantType"
|
||||
ref="complainantTypeRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.complainantType"
|
||||
:options="complainstStore.complainantoptions"
|
||||
label="ผู้ถูกร้องเรียน"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
use-input
|
||||
map-options
|
||||
hide-bottom-space
|
||||
:options="complainstStore.complainantoptions"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
|
||||
lazy-rules
|
||||
@update:model-value="
|
||||
selectComplainant(formData.complainantType)
|
||||
"
|
||||
use-input
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantType'
|
||||
)"
|
||||
|
|
@ -306,6 +302,7 @@ watch(props.data, async () => {
|
|||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-xs-12 col-sm-3"
|
||||
v-if="formData.complainantType === '1'"
|
||||
|
|
@ -324,6 +321,7 @@ watch(props.data, async () => {
|
|||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-3" id="agency">
|
||||
<q-select
|
||||
ref="agencyRef"
|
||||
|
|
@ -354,6 +352,7 @@ watch(props.data, async () => {
|
|||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-12" id="topicComplaint">
|
||||
<q-input
|
||||
for="inputTopicComplaint"
|
||||
|
|
@ -369,6 +368,7 @@ watch(props.data, async () => {
|
|||
rows="5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-12" id="detail">
|
||||
<q-input
|
||||
for="inputDetail"
|
||||
|
|
@ -384,6 +384,7 @@ watch(props.data, async () => {
|
|||
rows="5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-3" id="datereceive">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -451,6 +452,7 @@ watch(props.data, async () => {
|
|||
@update:model-value="selectLevel(formData.considerationLevel)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-3" id="dateconsideration">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -499,6 +501,7 @@ watch(props.data, async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-3" id="offenseDescription">
|
||||
<q-select
|
||||
for="selectOffenseDescription"
|
||||
|
|
@ -566,6 +569,7 @@ watch(props.data, async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-3" id="receivecomplaints">
|
||||
<q-select
|
||||
for="selectReceivecomplaints"
|
||||
|
|
@ -584,6 +588,7 @@ watch(props.data, async () => {
|
|||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-12" id="petitioner">
|
||||
<q-input
|
||||
for="inputPetitioner"
|
||||
|
|
@ -599,6 +604,7 @@ watch(props.data, async () => {
|
|||
rows="5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12" id="files">
|
||||
<q-file
|
||||
for="inputFiles"
|
||||
|
|
|
|||
|
|
@ -11,17 +11,13 @@ import TableComplaint from "@/modules/11_discipline/components/1_Complaint/Table
|
|||
|
||||
const router = useRouter();
|
||||
|
||||
/** stoer */
|
||||
const complainstStore = useComplainstDataStore();
|
||||
const { fetchComplainst } = complainstStore; // function จาก stores
|
||||
const { fetchComplainst } = complainstStore;
|
||||
|
||||
//ข้อมูล Table
|
||||
const filterTable = ref<string>("");
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchListComplaints();
|
||||
});
|
||||
|
||||
// เรีนกรายการเรื่องร้องเรียน
|
||||
/**เรีนกรายการเรื่องร้องเรียน */
|
||||
async function fetchListComplaints() {
|
||||
const listData: DataList[] = [
|
||||
{
|
||||
|
|
@ -58,9 +54,15 @@ async function fetchListComplaints() {
|
|||
];
|
||||
await fetchComplainst(listData);
|
||||
}
|
||||
/** ไปยังหน้าเพิ่มข้อมูล */
|
||||
function redirectToPageadd() {
|
||||
router.push(`/discipline/complaints/add`);
|
||||
}
|
||||
|
||||
/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
|
||||
onMounted(async () => {
|
||||
await fetchListComplaints();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -80,7 +82,9 @@ function redirectToPageadd() {
|
|||
><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
|
||||
<q-input
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
id="filterTable"
|
||||
|
|
@ -95,6 +99,7 @@ function redirectToPageadd() {
|
|||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
id="visibleColumns"
|
||||
for="visibleColumns"
|
||||
|
|
@ -112,6 +117,7 @@ function redirectToPageadd() {
|
|||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<TableComplaint :filterTable="filterTable" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,16 +5,19 @@ import type { QTableProps } from "quasar";
|
|||
// importStroe
|
||||
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
|
||||
const router = useRouter();
|
||||
const complainstStore = useComplainstDataStore();
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
filterTable: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
/** หัวตาราง */
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
|
|
@ -89,6 +92,8 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
/** หัวข้อที่เเสดงในตาราง */
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"subject",
|
||||
|
|
@ -100,17 +105,22 @@ const visibleColumns = ref<string[]>([
|
|||
"considerationDeadlineDate",
|
||||
]);
|
||||
|
||||
/** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
|
||||
onMounted(() => {
|
||||
complainstStore.columns = columns.value;
|
||||
complainstStore.visibleColumns = visibleColumns.value;
|
||||
});
|
||||
|
||||
//pagination
|
||||
/** แสดงจำนวนในตาราง */
|
||||
const pagination = ref({
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
/**
|
||||
* ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
|
||||
* @param id ไอดีระบุ
|
||||
*/
|
||||
function OpenEdit(id:string){
|
||||
console.log(id)
|
||||
router.push(`/discipline/complaints/${id}`)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue