จัดโค้ด เรื่อง เรื่องร้องเรียน
This commit is contained in:
setthawutttty
parent
5b47826667
commit
aeaa8c8df2
5 changed files with 103 additions and 80 deletions
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue