ปรับ UI หน้ารายละเอียดเรื่องร้องเรียน
This commit is contained in:
setthawutttty
parent
f04826e05a
commit
30b420ae6c
3 changed files with 184 additions and 50 deletions
|
|
@ -6,12 +6,13 @@ import { useQuasar } from "quasar";
|
|||
import type {
|
||||
FormData,
|
||||
ArrayPerson,
|
||||
ArrayFileList,
|
||||
} from "@/modules/11_discipline/interface/request/complaint";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin()
|
||||
const { dialogConfirm } = mixin
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm } = mixin;
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const id = ref<string>(route.params.id as string);
|
||||
|
|
@ -25,6 +26,14 @@ const personOj = reactive<ArrayPerson>({
|
|||
salary: "",
|
||||
organization: "",
|
||||
});
|
||||
|
||||
const fileListOj = reactive<ArrayFileList>({
|
||||
id: "",
|
||||
file: "",
|
||||
fileName: "",
|
||||
fileType: "",
|
||||
});
|
||||
|
||||
const data = reactive<FormData>({
|
||||
respondentType: "",
|
||||
office: "",
|
||||
|
|
@ -42,8 +51,9 @@ const data = reactive<FormData>({
|
|||
complaintStatus: "",
|
||||
organizationId: "",
|
||||
persons: [personOj],
|
||||
personId:[],
|
||||
respondentId:[]
|
||||
personId: [],
|
||||
respondentId: [],
|
||||
fileList: [fileListOj],
|
||||
});
|
||||
|
||||
/** ดึงค่าจาก api */
|
||||
|
|
@ -62,7 +72,7 @@ const fetchData = async () => {
|
|||
data.appellant = "สมศรี สุขใจ";
|
||||
data.documentFile = "";
|
||||
data.complaintStatus = "NEW";
|
||||
data.persons = [
|
||||
(data.persons = [
|
||||
{
|
||||
idcard: "1529900022223",
|
||||
name: "นางศิรินภา คงน้อย",
|
||||
|
|
@ -71,7 +81,39 @@ const fetchData = async () => {
|
|||
salary: "10000",
|
||||
organization: "สกจ.",
|
||||
},
|
||||
]
|
||||
]),
|
||||
(data.fileList = [
|
||||
{
|
||||
id: "08dbeb08-1931-487d-8989-0725ce48031d",
|
||||
file: "https://s3cluster.frappet.com/bma-ehr-fpt/edb095bf-8898-4ef8-ad60-daaf60991b8f?AWSAccessKeyId=frappet&Expires=1700657567&Signature=7Do0YexqpTJGA4DQPKzJ5YtvyJg%3D",
|
||||
fileName: "ex_slip.jpeg.png14",
|
||||
fileType: "image/png",
|
||||
},
|
||||
{
|
||||
id: "08dbeb08-392b-41b8-8970-78934f317469",
|
||||
file: "https://s3cluster.frappet.com/bma-ehr-fpt/5a32c821-46d6-4bbc-9824-b777f154702e?AWSAccessKeyId=frappet&Expires=1700657567&Signature=HlNAjybBNPqGAYJtHIefNRofz1E%3D",
|
||||
fileName: "17058616.jpg",
|
||||
fileType: "image/jpeg",
|
||||
},
|
||||
{
|
||||
id: "08dbeb08-3e41-4500-8476-6bdd76f0b6c8",
|
||||
file: "https://s3cluster.frappet.com/bma-ehr-fpt/1bf5ef61-05f3-4cb1-98a5-dd2698b49440?AWSAccessKeyId=frappet&Expires=1700657567&Signature=WAlAjPbX%2BUoO0zY7m1jDEb3ovvA%3D",
|
||||
fileName: "17058616.jpg",
|
||||
fileType: "image/jpeg",
|
||||
},
|
||||
{
|
||||
id: "08dbeb08-428f-483b-8d50-718e947d012e",
|
||||
file: "https://s3cluster.frappet.com/bma-ehr-fpt/d848952a-54af-4502-b235-1f01f441d86c?AWSAccessKeyId=frappet&Expires=1700657568&Signature=3L9QfaWLCHmZjeS2UttVM3se6W0%3D",
|
||||
fileName: "HybGoQu8osQ49G7AzCOvYF4G.png",
|
||||
fileType: "image/png",
|
||||
},
|
||||
{
|
||||
id: "08dbeb08-8aa5-4264-87bf-1794be50f0c7",
|
||||
file: "https://s3cluster.frappet.com/bma-ehr-fpt/ac55b1f8-54f6-43c4-9f85-c236d24e7d76?AWSAccessKeyId=frappet&Expires=1700657568&Signature=isN3RM3P4%2BP5lgK5%2F45h1U5pabI%3D",
|
||||
fileName: "1300399ปปปป.jpg",
|
||||
fileType: "image/jpeg",
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
/** ฟังชั่น แก้ไข */
|
||||
|
|
@ -81,33 +123,48 @@ async function onSubmit() {
|
|||
}
|
||||
|
||||
/** ยืนยัน มีมูลส่งไปสืบสวน */
|
||||
function sentInvestigate(){
|
||||
dialogConfirm($q,()=> confirmSentInvestigate(),'ยืนยันส่งไปสืบสวน','ต้องการยืนยันส่งไปสืบสวนใช่หรือไม่?')
|
||||
function sentInvestigate() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => confirmSentInvestigate(),
|
||||
"ยืนยันส่งไปสืบสวน",
|
||||
"ต้องการยืนยันส่งไปสืบสวนใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
/** ยืนยัน ยุติเรื่อง */
|
||||
function endInvestigate(){
|
||||
dialogConfirm($q,()=> confirmEndInvestigate(),'ยืนยันยุติเรื่อง','ต้องการยืนยันยุติเรื่องใช่หรือไม่?')
|
||||
function endInvestigate() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => confirmEndInvestigate(),
|
||||
"ยืนยันยุติเรื่อง",
|
||||
"ต้องการยืนยันยุติเรื่องใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
/** ยืนยัน ยกเลิกการยุติเรื่อง */
|
||||
function cancelInvestigate(){
|
||||
dialogConfirm($q,()=> confirmCancelInvestigate(),'ยืนยันยกเลิกการยุติเรื่อง','ต้องการยืนยันยกเลิกการยุติเรื่องใช่หรือไม่?')
|
||||
function cancelInvestigate() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => confirmCancelInvestigate(),
|
||||
"ยืนยันยกเลิกการยุติเรื่อง",
|
||||
"ต้องการยืนยันยกเลิกการยุติเรื่องใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
/** ฟังชั่น มีมูลส่งไปสืบสวน*/
|
||||
function confirmSentInvestigate(){
|
||||
console.log('sent')
|
||||
function confirmSentInvestigate() {
|
||||
console.log("sent");
|
||||
}
|
||||
|
||||
/** ฟังชั่น ยุติเรื่อง*/
|
||||
function confirmEndInvestigate(){
|
||||
console.log('sent')
|
||||
function confirmEndInvestigate() {
|
||||
console.log("sent");
|
||||
}
|
||||
|
||||
/** ฟังชั่น ยกเลิกการยุติเรื่อง*/
|
||||
function confirmCancelInvestigate(){
|
||||
console.log('sent')
|
||||
function confirmCancelInvestigate() {
|
||||
console.log("sent");
|
||||
}
|
||||
/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
|
||||
onMounted(() => {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import type {
|
|||
MyObjectComplaintsRef,
|
||||
DataAddRequest,
|
||||
ArrayPerson,
|
||||
ArrayFileList
|
||||
} from "@/modules/11_discipline/interface/request/complaint";
|
||||
|
||||
/** importStroe*/
|
||||
|
|
@ -25,7 +26,7 @@ const fileDocDataUpload = ref<File[]>([]);
|
|||
/** เรียกใช้ store */
|
||||
const mixin = useCounterMixin();
|
||||
const complainstStore = useComplainstDataStore();
|
||||
const { date2Thai, dialogConfirm } = mixin;
|
||||
const { date2Thai, dialogConfirm,dialogRemove,success } = mixin;
|
||||
const { selectComplainantTpye, filterSelector } = complainstStore; // function จาก store complainstStore
|
||||
|
||||
/** validateForm */
|
||||
|
|
@ -42,7 +43,6 @@ const levelConsiderationRef = ref<Object | null>(null);
|
|||
const dateNotificationRef = ref<Object | null>(null);
|
||||
const complaintFromRef = ref<Object | null>(null);
|
||||
const appellantRef = ref<Object | null>(null);
|
||||
const documentFileRef = ref<Object | null>(null);
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
|
|
@ -66,6 +66,13 @@ const personOj = reactive<ArrayPerson>({
|
|||
organization: "",
|
||||
});
|
||||
|
||||
const fileListOj = reactive<ArrayFileList>({
|
||||
id:"",
|
||||
file:"",
|
||||
fileName:"",
|
||||
fileType:""
|
||||
});
|
||||
|
||||
const formData = reactive<FormData>({
|
||||
respondentType: "",
|
||||
office: "",
|
||||
|
|
@ -85,6 +92,7 @@ const formData = reactive<FormData>({
|
|||
personId: [],
|
||||
organizationId: null,
|
||||
respondentId: [],
|
||||
fileList:[fileListOj]
|
||||
});
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
|
|
@ -101,7 +109,6 @@ const objectComplaintsRef: MyObjectComplaintsRef = {
|
|||
dateNotification: dateNotificationRef,
|
||||
complaintFrom: complaintFromRef,
|
||||
appellant: appellantRef,
|
||||
documentFile: documentFileRef,
|
||||
};
|
||||
|
||||
/** options ทั้งหมด*/
|
||||
|
|
@ -341,13 +348,27 @@ async function addPerson() {
|
|||
toggleModal();
|
||||
}
|
||||
|
||||
/**
|
||||
* เปิดลิงค์ไฟล์
|
||||
* @param link รับมาเป็น https ลิงค์
|
||||
*/
|
||||
function downloadFile(link:string){
|
||||
window.open(link, '_blank');
|
||||
}
|
||||
|
||||
function deleteFile(id:string){
|
||||
dialogRemove($q,() => confirmDelete(id))
|
||||
}
|
||||
|
||||
function confirmDelete(id:string){
|
||||
success($q, `ลบไฟล์สำเร็จ #id:${id}`);
|
||||
}
|
||||
/**
|
||||
* เช็คข้อมูลจาก props
|
||||
* เมื่อมีข้อมูล
|
||||
* เก็บข้อมูลลง formData
|
||||
*/
|
||||
watch(props.data, async () => {
|
||||
console.log(props.data.persons);
|
||||
formData.respondentType = props.data.respondentType;
|
||||
formData.office = props.data.office;
|
||||
formData.consideredAgency = props.data.consideredAgency;
|
||||
|
|
@ -363,6 +384,7 @@ watch(props.data, async () => {
|
|||
formData.documentFile = props.data.documentFile;
|
||||
formData.complaintStatus = props.data.complaintStatus;
|
||||
complainstStore.fetchComplainstAdd(props.data.persons);
|
||||
formData.fileList = props.data.fileList;
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -856,32 +878,6 @@ onMounted(() => {
|
|||
rows="5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12" id="documentFile">
|
||||
<q-file
|
||||
for="inputFiles"
|
||||
ref="documentFileRef"
|
||||
outlined
|
||||
dense
|
||||
class="fit"
|
||||
:readonly="
|
||||
formData.complaintStatus !== 'NEW' &&
|
||||
formData.complaintStatus !== ''
|
||||
"
|
||||
v-model="formData.documentFile"
|
||||
@added="fileUploadDoc"
|
||||
label="ไฟล์เอกสารหลักฐาน"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
accept=".pdf,.xlsx,.doc"
|
||||
clearable
|
||||
:rules="[(val) => !!val || `${'กรุณาเพิ่มไฟล์เอกสารหลักฐาน'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
|
|
@ -906,6 +902,80 @@ onMounted(() => {
|
|||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 q-mt-sm">
|
||||
<q-card flat bordered>
|
||||
<div class="row q-ma-sm q-col-gutter-x-sm">
|
||||
<div class="col-11" id="documentFile">
|
||||
<q-file
|
||||
for="inputFiles"
|
||||
outlined
|
||||
dense
|
||||
class="fit"
|
||||
:readonly="
|
||||
formData.complaintStatus !== 'NEW' &&
|
||||
formData.complaintStatus !== ''
|
||||
"
|
||||
v-model="formData.documentFile"
|
||||
@added="fileUploadDoc"
|
||||
label="ไฟล์เอกสารหลักฐาน"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
accept=".pdf,.xlsx,.doc"
|
||||
clearable
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
<div class="col-1 self-center" v-if="formData.documentFile">
|
||||
<q-btn
|
||||
size="14px"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="add"
|
||||
class="q-ml-sm"
|
||||
icon="mdi-upload"
|
||||
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-pa-md">
|
||||
<q-list bordered separator v-for="data in formData.fileList" :key="data.id">
|
||||
<q-item clickable v-ripple class="items-center">
|
||||
<q-item-section>{{ data.fileName }}</q-item-section>
|
||||
<q-space/>
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="blue"
|
||||
class="q-ml-sm"
|
||||
icon="mdi-download"
|
||||
@click="downloadFile(data.file)"
|
||||
><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="red"
|
||||
class="q-ml-sm"
|
||||
icon="mdi-delete-outline"
|
||||
@click="deleteFile(data.id)"
|
||||
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</q-item>
|
||||
|
||||
</q-list>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<DialogAddPersonal
|
||||
:modal="modal"
|
||||
btn-title="เพิ่มรายชื่อผู้ถูกสอบสวน"
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ interface FormData {
|
|||
personId: any
|
||||
organizationId:string|null
|
||||
respondentId:any
|
||||
fileList:ArrayFileList[]
|
||||
}
|
||||
|
||||
interface ArrayPerson {
|
||||
|
|
@ -27,6 +28,12 @@ interface ArrayPerson {
|
|||
salary: string,
|
||||
organization: string,
|
||||
}
|
||||
interface ArrayFileList {
|
||||
id:string
|
||||
file:string
|
||||
fileName:string
|
||||
fileType:string
|
||||
}
|
||||
interface MyObjectComplaintsRef {
|
||||
respondentType: object | null;
|
||||
office: object | null;
|
||||
|
|
@ -40,7 +47,6 @@ interface MyObjectComplaintsRef {
|
|||
dateNotification: object | null;
|
||||
complaintFrom: object | null;
|
||||
appellant: object | null;
|
||||
documentFile: object | null;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
|
|
@ -57,5 +63,6 @@ export type {
|
|||
FormData,
|
||||
MyObjectComplaintsRef,
|
||||
DataAddRequest,
|
||||
ArrayPerson
|
||||
ArrayPerson,
|
||||
ArrayFileList
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue