ปรับ ui

This commit is contained in:
setthawutttty 2023-12-26 15:53:52 +07:00
parent 5d6c63f242
commit 202079bb13
15 changed files with 281 additions and 102 deletions

View file

@ -101,15 +101,15 @@ const objectComplaintsRef: MyObjectComplaintsRef = {
organizationId: organizationIdRef,
consideredAgency: consideredAgencyRef,
title: titleRef,
description: descriptionRef,
// description: descriptionRef,
dateReceived: dateReceivedRef,
dateConsideration: dateConsiderationRef,
// dateConsideration: dateConsiderationRef,
offenseDetails: offenseDetailsRef,
levelConsideration: levelConsiderationRef,
dateNotification: dateNotificationRef,
complaintFrom: complaintFromRef,
appellant: appellantRef,
result: resultRef,
// levelConsideration: levelConsiderationRef,
// dateNotification: dateNotificationRef,
// complaintFrom: complaintFromRef,
// appellant: appellantRef,
// result: resultRef,
};
/**

View file

@ -28,6 +28,7 @@ const filterKeyword = ref<string>("");
const maxPage = ref<number>(1);
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const statusFilter = ref<string>('ALL')
async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
rowsPerPage.value = rowPerpage;
@ -68,6 +69,10 @@ function filterFn() {
getList();
}
function dataUpdate(){
console.log(statusFilter.value)
}
/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
onMounted(async () => {
await getList();
@ -78,6 +83,20 @@ onMounted(async () => {
<div class="toptitle text-dark col-12 row items-center">รายการเรองรองเรยน</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div class="col-2">
<q-select
v-model="statusFilter"
label="สถานะ"
dense
outlined
emit-value
map-options
option-label="name"
option-value="id"
:options="complainstStore.statusOptions"
@update:model-value="dataUpdate"
/>
</div>
<div>
<q-btn
id="addComplaints"

View file

@ -132,25 +132,40 @@ const formData = reactive<FormData>({
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectInvestigate: MyObjectInvestigateRef = {
complaint: complaintRef,
complaintdetail: complaintdetailRef,
investigationDescription: investigationDescriptionRef,
fault: faultRef,
investigationDetailOther: investigationDetailOtherRef,
fileComplaint: fileComplaintRef,
date: dateRef,
dateEnd: dateEndRef,
investigationDetail: investigationDetailRef,
daysExtend: daysExtendRef,
investigationStatusResult: investigationStatusResultRef,
investigationCauseText: investigationCauseTextRef,
result: resultRef,
// complaint: complaintRef,
// complaintdetail: complaintdetailRef,
// investigationDescription: investigationDescriptionRef,
// fault: faultRef,
// investigationDetailOther: investigationDetailOtherRef,
// fileComplaint: fileComplaintRef,
// date: dateRef,
// dateEnd: dateEndRef,
// investigationDetail: investigationDetailRef,
// daysExtend: daysExtendRef,
// investigationStatusResult: investigationStatusResultRef,
// investigationCauseText: investigationCauseTextRef,
// result: resultRef,
};
const rows = ref([]);
const statusStep = computed(() => {
return route.name === "/discipline-disciplinaryEdit" ? true : false;
});
const dateEndInputStyle = computed(() => {
const currentDate = new Date();
const investigationDateEnd = new Date(formData.investigationDateEnd as Date);
const isInNext7Days =
investigationDateEnd >= currentDate &&
investigationDateEnd <=
new Date(currentDate.getTime() + 7 * 24 * 60 * 60 * 1000);
console.log(isInNext7Days);
return isInNext7Days
? { textDecoration: "underline", color: "red", borderColor: "red" }
: {};
});
const initialPagination = ref<any>({
rowsPerPage: 0,
});
@ -565,7 +580,7 @@ function closeEditDirector() {
modalEditDirector.value = false;
}
async function saveDuty(id: string, duty: string){
async function saveDuty(id: string, duty: string) {
showLoader();
await http
.put(config.API.investigateEditDuty(formData.id, id), { duty: duty })
@ -580,7 +595,7 @@ async function saveDuty(id: string, duty: string){
props.getData?.();
hideLoader();
});
};
}
onMounted(async () => {
mainStore.rowsAdd = [];
@ -1024,7 +1039,7 @@ onMounted(async () => {
}}</template>
<template #trigger>
<q-input
for="#dateEnd"
for="#dateEndInvestigatefacts"
ref="dateEndRef"
:class="inputEditExtend(isReadonly)"
:readonly="
@ -1048,6 +1063,7 @@ onMounted(async () => {
`${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
]"
:label="`${'วันที่สิ้นสุดการสืบสวน'}`"
:input-style="dateEndInputStyle"
>
<template v-slot:prepend>
<q-icon
@ -1581,7 +1597,8 @@ onMounted(async () => {
/>
</template>
<style scoped>
<style scope>
.q-banner {
min-height: 25px;
}

View file

@ -24,7 +24,7 @@ const resetFilter = () => {
filterRef.value.focus();
}
};
const statusFilter = ref<string>('ALL')
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const page = ref<number>(1);
@ -90,6 +90,10 @@ async function editPage(id: string) {
router.push(`/discipline/investigatefacts/${id}`);
}
function dataUpdate(){
console.log(statusFilter.value)
}
/**
* งขอมลจำลองไปย store
*/
@ -103,6 +107,20 @@ onMounted(async () => {
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div class="col-2">
<q-select
v-model="statusFilter"
label="สถานะ"
dense
outlined
emit-value
map-options
option-label="name"
option-value="id"
:options="dataInvestigate.statusOptions"
@update:model-value="dataUpdate"
/>
</div>
<q-space />
<q-input

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue";
import { ref, onMounted, reactive, watch,computed } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
@ -108,6 +108,7 @@ const formData = reactive<FormData>({
disciplinaryCauseText: "",
disciplinaryResult: "",
disciplinaryExtendHistory: [],
disciplinaryFaultLevelOther: "",
});
const disciplineDisciplinary_DocRelevants = ref<FileLists[]>([]); // api
const disciplineDisciplinary_DocSummaryEvidences = ref<FileLists[]>([]);
@ -139,16 +140,16 @@ const disciplinaryResultRef = ref<Object | null>(null);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectdisciplinary: DisciplinaryRef = {
respondentType: respondentTypeRef,
organizationId: organizationIdRef,
consideredAgency: consideredAgencyRef,
disciplinaryFaultLevel: disciplinaryFaultLevelRef,
date: dateRef,
dateEnd: dateEndRef,
daysExtend: daysExtendRef,
disciplinaryDateResult: disciplinaryDateResultRef,
disciplinaryStatusResult: disciplinaryStatusResultRef,
disciplinaryResult: disciplinaryResultRef,
// respondentType: respondentTypeRef,
// organizationId: organizationIdRef,
// consideredAgency: consideredAgencyRef,
// disciplinaryFaultLevel: disciplinaryFaultLevelRef,
// date: dateRef,
// dateEnd: dateEndRef,
// daysExtend: daysExtendRef,
// disciplinaryDateResult: disciplinaryDateResultRef,
// disciplinaryStatusResult: disciplinaryStatusResultRef,
// disciplinaryResult: disciplinaryResultRef,
};
const initialPagination = ref<any>({
@ -172,6 +173,19 @@ const props = defineProps({
});
const emit = defineEmits(["submit:disciplinary"]);
const dateEndInputStyle = computed(() => {
const currentDate = new Date();
const investigationDateEnd = new Date(formData.disciplinaryDateEnd as Date);
const isInNext7Days =
investigationDateEnd >= currentDate &&
investigationDateEnd <=
new Date(currentDate.getTime() + 7 * 24 * 60 * 60 * 1000);
console.log(isInNext7Days);
return isInNext7Days ? { textDecoration: "underline", color: "red" } : {};
});
/** เปิด dialog */
function popup() {
modal.value = true;
@ -360,7 +374,6 @@ watch(
}
);
/** function เรียกรายชื่อหน่วยงาน*/
async function fetchOrganization() {
await http
@ -377,7 +390,6 @@ async function fetchOrganization() {
});
}
/** function เรียกรายชื่อกรรมการ*/
async function fetchDListDirector() {
showLoader();
@ -454,6 +466,9 @@ async function selectComplainant(val: string) {
/** ฟังก์ชั่นเช็คการแก้ไขฟอร์มแล้วไม่ได้กดบันทึก */
function changeFormData() {
isSave.value = true;
if(formData.disciplinaryFaultLevel !== 'อื่นๆ'){
formData.disciplinaryFaultLevelOther = ''
}
}
function calendarOpen() {
@ -523,7 +538,6 @@ function emitPerson(data: PersonsArray[]) {
});
}
function openEditDirector(idVal: string, duty: string) {
editDirectorId.value = idVal;
modalEditDirector.value = true;
@ -534,7 +548,7 @@ function closeEditDirector() {
modalEditDirector.value = false;
}
async function saveDuty(id: string, duty: string){
async function saveDuty(id: string, duty: string) {
showLoader();
await http
.put(config.API.disciplinaryEditDuty(props.data.id, id), { duty: duty })
@ -549,7 +563,7 @@ async function saveDuty(id: string, duty: string){
props.fetchData();
hideLoader();
});
};
}
/** Hook */
onMounted(async () => {
@ -1103,6 +1117,7 @@ onMounted(async () => {
`${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
]"
:label="`${'วันที่สิ้นสุดการสอบสวน'}`"
:input-style="dateEndInputStyle"
>
<template v-slot:prepend>
<q-icon
@ -1320,7 +1335,10 @@ onMounted(async () => {
round
color="blue"
@click="
openEditDirector(props.row.idRaw, props.row.duty)
openEditDirector(
props.row.idRaw,
props.row.duty
)
"
icon="mdi-pencil-outline"
>
@ -1433,7 +1451,15 @@ onMounted(async () => {
@update:model-value="changeFormData()"
/>
</div>
<div class="col-12" v-if="formData.disciplinaryFaultLevel === 'อื่นๆ'">
<q-input
:class="inputEdit(isReadonly)"
outlined
dense
label="ระดับโทษความผิดอื่นๆ"
v-model="formData.disciplinaryFaultLevelOther"
/>
</div>
<div class="col-xs-12 col-sm-6">
<q-input
:readonly="isReadonly"

View file

@ -1,12 +1,15 @@
<script setup lang="ts">
import { ref, useAttrs, watch } from "vue";
import type { Pagination } from "@/modules/04_registry/interface/index/Main";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
const dataInvestigateDis = useInvestigateDisStore();
const table = ref<any>(null);
const filterRef = ref<any>(null);
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const currentPage = ref<number>(1);
const statusFilter = ref<string>('ALL')
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
@ -104,10 +107,29 @@ watch(
updateProp(pagination.value.rowsPerPage, currentPage.value);
}
);
function dataUpdate(){
console.log(statusFilter.value)
}
</script>
<template>
<div class="q-pb-sm row q-col-gutter-sm">
<div class="col-2">
<q-select
v-model="statusFilter"
label="สถานะ"
dense
outlined
emit-value
map-options
option-label="name"
option-value="id"
:options="dataInvestigateDis.statusOptions"
@update:model-value="dataUpdate"
/>
</div>
<q-space />
<!-- นหาขอความใน table -->
<q-input

View file

@ -1,11 +1,13 @@
<script setup lang="ts">
import { ref, useAttrs, watch } from "vue";
import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
const store = useDisciplineResultStore();
const table = ref<any>(null);
const filterRef = ref<any>(null);
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const statusFilter = ref<string>("ALL");
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
count: Number,
@ -89,11 +91,28 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
filter.value
);
});
function dataUpdate() {
console.log(statusFilter.value);
}
</script>
<template>
<div class="q-pb-sm row q-col-gutter-sm">
<div class="q-gutter-sm" v-if="nornmalData == true">
<div class="q-gutter-sm" v-if="nornmalData == true"></div>
<div class="col-2">
<q-select
v-model="statusFilter"
label="สถานะ"
dense
outlined
emit-value
map-options
option-label="name"
option-value="id"
:options="store.statusOptions"
@update:model-value="dataUpdate"
/>
</div>
<q-space />
<q-input
@ -143,7 +162,6 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
:rows-per-page-options="[10, 25, 50, 100]"
:pagination="pagination"
@update:pagination="updateRowsPerPage"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -184,7 +202,6 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
direction-links
></q-pagination>
</template>
</d-table>
</template>

View file

@ -24,6 +24,10 @@ const props = defineProps({
type: String,
default: "",
},
resolution: {
type: String,
default: "",
},
save: {
type: Function,
default: () => console.log("not function"),
@ -31,6 +35,7 @@ const props = defineProps({
});
const duty = ref<string>("");
const resolution = ref<string>("");
const myForm = ref<QForm | null>(null);
/**
@ -56,6 +61,7 @@ async function submit(){
watch(props, () => {
duty.value = props?.duty;
resolution.value = props?.resolution;
});
</script>
@ -63,7 +69,7 @@ watch(props, () => {
<q-dialog v-model="props.modal" persistent>
<q-card style="width: 30vw">
<q-form ref="myForm">
<DialogHeader title="แก้ไขหน้าที่กรรมการ" :close="props.closePopup" />
<DialogHeader title="แก้ไขข้อมูลกรรมการ" :close="props.closePopup" />
<q-separator />
<q-card-section>
<q-input
@ -74,6 +80,17 @@ watch(props, () => {
debounce="300"
placeholder="หน้าที่"
:rules="[(val) => !!val || `กรุณากรอกหน้าที่`]"
hide-bottom-space
/>
<q-input
v-model="resolution"
outlined
dense
class="col-12 q-mb-sm"
debounce="300"
placeholder="มติ/คำสั่งแต่งตั้ง"
:rules="[(val) => !!val || `กรุณากรอก มติ/คำสั่งแต่งตั้ง`]"
hide-bottom-space
/>
</q-card-section>