386 lines
12 KiB
Vue
386 lines
12 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted } from "vue";
|
||
|
|
import { useRoute, useRouter } from "vue-router";
|
||
|
|
|
||
|
|
import type { DataOption } from "../../interface/index/Main";
|
||
|
|
|
||
|
|
// importStroe
|
||
|
|
import { useCounterMixin } from "@/stores/mixin";
|
||
|
|
import { useComplainstDataStore } from "../../stroes/ComplaintsStore";
|
||
|
|
|
||
|
|
const route = useRoute();
|
||
|
|
const router = useRouter();
|
||
|
|
const mixin = useCounterMixin();
|
||
|
|
const { date2Thai } = mixin;
|
||
|
|
|
||
|
|
const complainstStore = useComplainstDataStore();
|
||
|
|
const { selectComplainantTpye } = complainstStore;
|
||
|
|
|
||
|
|
const complainantType = ref<string>("");
|
||
|
|
const complainantoptions = ref<DataOption[]>([
|
||
|
|
{ id: "0", name: "บุคคล" },
|
||
|
|
{ id: "1", name: "หน่ายงาน" },
|
||
|
|
{ id: "2", name: "กรุงเทพหมานคร" },
|
||
|
|
]);
|
||
|
|
const complainant = ref<string>("");
|
||
|
|
const office = ref<string>("");
|
||
|
|
const agency = ref<string>("");
|
||
|
|
const agencytoptions = ref<DataOption[]>([
|
||
|
|
{ id: "0", name: "หน่ายงานเอ" },
|
||
|
|
{ id: "1", name: "หน่ายงานบี" },
|
||
|
|
{ id: "2", name: "หน่ายงานชี" },
|
||
|
|
]);
|
||
|
|
const topicComplaint = ref<string>("");
|
||
|
|
const detail = ref<string>("");
|
||
|
|
const datereceive = ref<Date>();
|
||
|
|
const files = ref<any>();
|
||
|
|
const fileDocDataUpload = ref<File[]>([]);
|
||
|
|
|
||
|
|
async function selectComplainant(val: string) {
|
||
|
|
complainant.value = "";
|
||
|
|
office.value = "";
|
||
|
|
agency.value = "";
|
||
|
|
if (val === "0") {
|
||
|
|
await fectListname();
|
||
|
|
} else if (val === "1") {
|
||
|
|
await fectOffice();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// เรียกรายชื่อ
|
||
|
|
async function fectListname() {
|
||
|
|
const listName = [
|
||
|
|
{
|
||
|
|
id: "1",
|
||
|
|
name: "นายเอ",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "2",
|
||
|
|
name: "นายบี",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "3",
|
||
|
|
name: "นายชี",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
selectComplainantTpye(listName);
|
||
|
|
}
|
||
|
|
async function fectOffice() {
|
||
|
|
// const listOffice = [
|
||
|
|
// {
|
||
|
|
// id: "1",
|
||
|
|
// name: "สำนักเอ",
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// id: "2",
|
||
|
|
// name: "สำนักเอ",
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// id: "3",
|
||
|
|
// name: "สำนักเอ",
|
||
|
|
// },
|
||
|
|
// ];
|
||
|
|
}
|
||
|
|
const fileUploadDoc = async (files: any) => {
|
||
|
|
files.forEach((file: any) => {
|
||
|
|
fileDocDataUpload.value.push(file);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="toptitle text-dark col-12 row items-center">
|
||
|
|
<q-btn
|
||
|
|
icon="mdi-arrow-left"
|
||
|
|
unelevated
|
||
|
|
round
|
||
|
|
dense
|
||
|
|
flat
|
||
|
|
color="primary"
|
||
|
|
class="q-mr-sm"
|
||
|
|
@click="router.push(`/discipline/complaints`)"
|
||
|
|
/>
|
||
|
|
เพิ่มเรื่องร้องเรียน
|
||
|
|
</div>
|
||
|
|
<div class="col-12 q-mt-sm">
|
||
|
|
<q-card flat bordered>
|
||
|
|
<div class="col-12 row q-pa-md">
|
||
|
|
<div
|
||
|
|
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">
|
||
|
|
<q-select
|
||
|
|
dense
|
||
|
|
outlined
|
||
|
|
v-model="complainantType"
|
||
|
|
:options="complainantoptions"
|
||
|
|
label="ผู้ร้องเรียน"
|
||
|
|
option-value="id"
|
||
|
|
option-label="name"
|
||
|
|
emit-value
|
||
|
|
map-options
|
||
|
|
:rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
|
||
|
|
lazy-rules
|
||
|
|
@update:model-value="selectComplainant(complainantType)"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-2" v-if="complainantType === '0'">
|
||
|
|
<q-select
|
||
|
|
dense
|
||
|
|
outlined
|
||
|
|
v-model="complainant"
|
||
|
|
:options="complainstStore.optionListName"
|
||
|
|
label="ราชชื่อจากทะเบียรประวัติ"
|
||
|
|
option-value="id"
|
||
|
|
option-label="name"
|
||
|
|
emit-value
|
||
|
|
map-options
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-2" v-if="complainantType === '1'">
|
||
|
|
<q-input dense outlined v-model="office" label="เลือกสำนักงาน" />
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-2">
|
||
|
|
<q-select
|
||
|
|
dense
|
||
|
|
outlined
|
||
|
|
v-model="agency"
|
||
|
|
:options="agencytoptions"
|
||
|
|
label="หน่วยงานที่พิจารณา"
|
||
|
|
option-value="id"
|
||
|
|
option-label="name"
|
||
|
|
emit-value
|
||
|
|
map-options
|
||
|
|
:rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
|
||
|
|
lazy-rules
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-12">
|
||
|
|
<q-input
|
||
|
|
dense
|
||
|
|
outlined
|
||
|
|
v-model="topicComplaint"
|
||
|
|
:rules="[(val) => !!val || 'กรุณาการข้อมูล']"
|
||
|
|
lazy-rules
|
||
|
|
label="เรื่องร้องเรียน"
|
||
|
|
type="textarea"
|
||
|
|
rows="5"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-12">
|
||
|
|
<q-input
|
||
|
|
dense
|
||
|
|
outlined
|
||
|
|
v-model="detail"
|
||
|
|
:rules="[(val) => !!val || 'กรุณาการข้อมูล']"
|
||
|
|
lazy-rules
|
||
|
|
label="รายละเอียดที่เกี่นวข้องกับเรื่องที่ต้องการจะข้อเรียน"
|
||
|
|
type="textarea"
|
||
|
|
rows="5"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-2">
|
||
|
|
<datepicker
|
||
|
|
menu-class-name="modalfix"
|
||
|
|
v-model="datereceive"
|
||
|
|
:locale="'th'"
|
||
|
|
autoApply
|
||
|
|
borderless
|
||
|
|
:enableTimePicker="false"
|
||
|
|
week-start="0"
|
||
|
|
>
|
||
|
|
<template #year="{ year }">
|
||
|
|
{{ year + 543 }}
|
||
|
|
</template>
|
||
|
|
<template #year-overlay-value="{ value }">
|
||
|
|
{{ parseInt(value + 543) }}
|
||
|
|
</template>
|
||
|
|
<template #trigger>
|
||
|
|
<q-input
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
class="full-width datepicker"
|
||
|
|
:model-value="
|
||
|
|
datereceive != null ? date2Thai(datereceive) : null
|
||
|
|
"
|
||
|
|
label="วันที่รับเรื่อง"
|
||
|
|
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่รับเรื่อง'}`]"
|
||
|
|
lazy-rules
|
||
|
|
>
|
||
|
|
<template v-slot:prepend>
|
||
|
|
<q-icon
|
||
|
|
name="event"
|
||
|
|
class="cursor-pointer"
|
||
|
|
style="color: var(--q-primary)"
|
||
|
|
>
|
||
|
|
</q-icon>
|
||
|
|
</template>
|
||
|
|
</q-input>
|
||
|
|
</template>
|
||
|
|
</datepicker>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-2">
|
||
|
|
<datepicker
|
||
|
|
menu-class-name="modalfix"
|
||
|
|
v-model="datereceive"
|
||
|
|
:locale="'th'"
|
||
|
|
autoApply
|
||
|
|
borderless
|
||
|
|
:enableTimePicker="false"
|
||
|
|
week-start="0"
|
||
|
|
>
|
||
|
|
<template #year="{ year }">
|
||
|
|
{{ year + 543 }}
|
||
|
|
</template>
|
||
|
|
<template #year-overlay-value="{ value }">
|
||
|
|
{{ parseInt(value + 543) }}
|
||
|
|
</template>
|
||
|
|
<template #trigger>
|
||
|
|
<q-input
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
class="full-width datepicker"
|
||
|
|
:model-value="
|
||
|
|
datereceive != null ? date2Thai(datereceive) : null
|
||
|
|
"
|
||
|
|
label="วันที่กำหนดวันพิจารณา"
|
||
|
|
:rules="[
|
||
|
|
(val) => !!val || `${'กรุณาเลือกวันที่กำหนดวันพิจารณา'}`,
|
||
|
|
]"
|
||
|
|
lazy-rules
|
||
|
|
>
|
||
|
|
<template v-slot:prepend>
|
||
|
|
<q-icon
|
||
|
|
name="event"
|
||
|
|
class="cursor-pointer"
|
||
|
|
style="color: var(--q-primary)"
|
||
|
|
>
|
||
|
|
</q-icon>
|
||
|
|
</template>
|
||
|
|
</q-input>
|
||
|
|
</template>
|
||
|
|
</datepicker>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-2">
|
||
|
|
<q-select
|
||
|
|
dense
|
||
|
|
outlined
|
||
|
|
v-model="complainantType"
|
||
|
|
:options="complainantoptions"
|
||
|
|
label="ลักษณะความผิด"
|
||
|
|
option-value="id"
|
||
|
|
option-label="name"
|
||
|
|
emit-value
|
||
|
|
map-options
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-2">
|
||
|
|
<q-select
|
||
|
|
dense
|
||
|
|
outlined
|
||
|
|
v-model="complainantType"
|
||
|
|
:options="complainantoptions"
|
||
|
|
label="ระดับการพิจารณา"
|
||
|
|
option-value="id"
|
||
|
|
option-label="name"
|
||
|
|
emit-value
|
||
|
|
map-options
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-3"></div>
|
||
|
|
<div class="col-xs-12 col-sm-2">
|
||
|
|
<datepicker
|
||
|
|
menu-class-name="modalfix"
|
||
|
|
v-model="datereceive"
|
||
|
|
:locale="'th'"
|
||
|
|
autoApply
|
||
|
|
borderless
|
||
|
|
:enableTimePicker="false"
|
||
|
|
week-start="0"
|
||
|
|
>
|
||
|
|
<template #year="{ year }">
|
||
|
|
{{ year + 543 }}
|
||
|
|
</template>
|
||
|
|
<template #year-overlay-value="{ value }">
|
||
|
|
{{ parseInt(value + 543) }}
|
||
|
|
</template>
|
||
|
|
<template #trigger>
|
||
|
|
<q-input
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
class="full-width datepicker"
|
||
|
|
:model-value="
|
||
|
|
datereceive != null ? date2Thai(datereceive) : null
|
||
|
|
"
|
||
|
|
label="วันที่แจ้งเตือนล่ววงหน้า"
|
||
|
|
:rules="[
|
||
|
|
(val) => !!val || `${'กรุณาเลือกวันที่แจ้งเตือนล่ววงหน้า'}`,
|
||
|
|
]"
|
||
|
|
lazy-rules
|
||
|
|
>
|
||
|
|
<template v-slot:prepend>
|
||
|
|
<q-icon
|
||
|
|
name="event"
|
||
|
|
class="cursor-pointer"
|
||
|
|
style="color: var(--q-primary)"
|
||
|
|
>
|
||
|
|
</q-icon>
|
||
|
|
</template>
|
||
|
|
</q-input>
|
||
|
|
</template>
|
||
|
|
</datepicker>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-2">
|
||
|
|
<q-select
|
||
|
|
dense
|
||
|
|
outlined
|
||
|
|
v-model="complainantType"
|
||
|
|
:options="complainantoptions"
|
||
|
|
label="รับเรื่องร้องเรียน"
|
||
|
|
option-value="id"
|
||
|
|
option-label="name"
|
||
|
|
emit-value
|
||
|
|
map-options
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-6"></div>
|
||
|
|
<div class="col-xs-12 col-sm-4">
|
||
|
|
<q-input
|
||
|
|
dense
|
||
|
|
outlined
|
||
|
|
v-model="office"
|
||
|
|
label="ผู้ร้องเรียน"
|
||
|
|
:rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
|
||
|
|
lazy-rules
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-4">
|
||
|
|
<q-file
|
||
|
|
class="col-xs-12 col-sm-10"
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
v-model="files"
|
||
|
|
@added="fileUploadDoc"
|
||
|
|
label="ไฟล์เอกสารหลักฐาน"
|
||
|
|
hide-bottom-space
|
||
|
|
lazy-rules
|
||
|
|
accept=".pdf,.xlsx,.doc"
|
||
|
|
>
|
||
|
|
<template v-slot:prepend>
|
||
|
|
<q-icon name="attach_file" />
|
||
|
|
</template>
|
||
|
|
</q-file>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<q-separator />
|
||
|
|
<div class="row col-12 q-pa-sm">
|
||
|
|
<q-space />
|
||
|
|
<q-btn flat round color="secondary" icon="mdi-content-save-outline"
|
||
|
|
><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</q-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped></style>
|