UI วินัย
This commit is contained in:
setthawutttty
parent
c9f625e8d8
commit
818b167b8d
6 changed files with 778 additions and 12 deletions
|
|
@ -0,0 +1,328 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogMessageNotify, showLoader, hideLoader, success, messageError } =
|
||||
mixin;
|
||||
|
||||
const checkRoutePermisson = ref<boolean>(
|
||||
route.name == "disciplineInvestigatefactsDetail"
|
||||
);
|
||||
|
||||
const props = defineProps({
|
||||
rows: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
visibleColumns: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
fetchData: Function,
|
||||
});
|
||||
|
||||
const remark = ref<string>("");
|
||||
const selected = ref<any[]>([]);
|
||||
const file = ref<any>(null);
|
||||
const pagination = ref<any>({
|
||||
descending: false,
|
||||
rowsPerPage: 25,
|
||||
});
|
||||
|
||||
function close() {
|
||||
modal.value = false;
|
||||
file.value = null;
|
||||
selected.value = [];
|
||||
remark.value = "";
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
if (selected.value.length !== 0) {
|
||||
const body = new FormData();
|
||||
selected.value
|
||||
.map((items: any) => items.id)
|
||||
.forEach((items: any) => {
|
||||
body.append("id", items);
|
||||
});
|
||||
body.append("file", file.value);
|
||||
body.append("remark", remark.value);
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.investigateReport(), body)
|
||||
.then((res) => {
|
||||
close();
|
||||
props.fetchData?.();
|
||||
success($q, "ส่งรายชื่อไปยุติเรื่อง สำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
} else {
|
||||
dialogMessageNotify($q, "กรุณาเลือกรายชื่ออย่างน้อย 1 คน");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 80%">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader :tittle="'ส่งรายชื่อไปยุติเรื่อง'" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-8">
|
||||
<q-card bordered>
|
||||
<q-card-section class="bg-grey-2 text-weight-medium q-pa-sm"
|
||||
>รายชื่อ</q-card-section
|
||||
>
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-xs">
|
||||
<q-table
|
||||
:columns="props.columns"
|
||||
:rows="rows"
|
||||
row-key="personId"
|
||||
flat
|
||||
bordered
|
||||
:paging="false"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
dense
|
||||
class="my-sticky-custom"
|
||||
:visible-columns="props.visibleColumns"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="scope.selected"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td>
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="props.selected"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<q-card
|
||||
bordered
|
||||
class="row col-12"
|
||||
style="border: 1px solid #d6dee1"
|
||||
>
|
||||
<div
|
||||
class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
|
||||
>
|
||||
อัปโหลดไฟล์เอกสาร
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row col-12 q-col-gutter-y-sm q-pa-sm">
|
||||
<div v-if="!checkRoutePermisson" class="col-12 row">
|
||||
<q-file
|
||||
class="col-12"
|
||||
for="#evidenceFiles"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกเลือกเอกสารที่เกี่ยวข้อง'}`,]"
|
||||
v-model="file"
|
||||
label="เอกสารที่เกี่ยวข้องกับการยุติเรื่อง"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
|
||||
<!-- <div class="col-xs-12 row">
|
||||
<q-list
|
||||
class="full-width rounded-borders"
|
||||
bordered
|
||||
separator
|
||||
>
|
||||
<q-item
|
||||
v-for="file in props.data
|
||||
.disciplineInvestigateRelevantDocs"
|
||||
:key="file.id"
|
||||
clickable
|
||||
v-ripple
|
||||
>
|
||||
<q-item-section>{{ file.fileName }}</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<div class="row">
|
||||
<div>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="blue"
|
||||
icon="mdi-download"
|
||||
@click="
|
||||
downloadRenameFileByLink(
|
||||
file.pathName,
|
||||
file.fileName
|
||||
)
|
||||
"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div>
|
||||
<q-btn
|
||||
v-if="!isReadonly && !checkRoutePermisson"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
icon="mdi-delete"
|
||||
@click="deleteFileRelevant(file.id)"
|
||||
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div> -->
|
||||
|
||||
<div class="col-12" v-else>
|
||||
<q-card class="q-pa-md" bordered>
|
||||
ไม่มีรายการเอกสาร
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
label="หมายเหตุ"
|
||||
type="textarea"
|
||||
v-model="remark"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.my-sticky-custom {
|
||||
max-height: 60vh;
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
td:first-child,
|
||||
td:nth-child(2) {
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
td:nth-child(2) {
|
||||
left: 44px;
|
||||
}
|
||||
|
||||
tr th {
|
||||
position: sticky;
|
||||
z-index: 2;
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
thead tr:last-child th {
|
||||
top: 48px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
thead tr:first-child th {
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
tr:first-child th:first-child {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
tr:first-child th:nth-child(2) {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
th:first-child {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
th:nth-child(2) {
|
||||
position: sticky;
|
||||
|
||||
left: 44px; // ต้องเท่ากับหรือตามความกว้างคอลัมน์แรก
|
||||
}
|
||||
|
||||
tbody {
|
||||
scroll-margin-top: 48px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -22,6 +22,7 @@ import DialogDirector from "@/modules/11_discipline/components/DialogDirector.vu
|
|||
import PopupSendToNext from "@/modules/11_discipline/components/PopupSendToNext.vue";
|
||||
import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
|
||||
import DialogAddDate from "@/modules/11_discipline/components/DialogAddDate.vue";
|
||||
import DialogSendTerminate from "@/modules/11_discipline/components/2_InvestigateFacts/DialogSendTerminate.vue";
|
||||
|
||||
const modalPersonal = ref<boolean>(false);
|
||||
const personId = ref<string>("");
|
||||
|
|
@ -852,7 +853,7 @@ onMounted(async () => {
|
|||
<q-btn
|
||||
class="q-pa-sm"
|
||||
color="orange"
|
||||
label="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง"
|
||||
label="ส่งรายชื่อไปยุติเรื่อง"
|
||||
@click="openModal"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -1008,6 +1009,14 @@ onMounted(async () => {
|
|||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'isSend'">
|
||||
<q-icon
|
||||
v-if="props.row.isSend == 'DONE'"
|
||||
name="check"
|
||||
size="sm"
|
||||
color="primary"
|
||||
></q-icon>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ?? "-" }}
|
||||
</div>
|
||||
|
|
@ -1764,7 +1773,15 @@ onMounted(async () => {
|
|||
:lists="props.data.investigationExtendHistory"
|
||||
/>
|
||||
|
||||
<PopupSendToNext
|
||||
<DialogSendTerminate
|
||||
v-model:modal="modalPopup"
|
||||
:rows="mainStore.rowsCheck"
|
||||
:columns="mainStore.columnsDirector"
|
||||
:visible-columns="mainStore.visibleColumnsDirector"
|
||||
:fetch-data="fetchData"
|
||||
/>
|
||||
|
||||
<!-- <PopupSendToNext
|
||||
v-model:modal="modalPopup"
|
||||
:close="closePopup"
|
||||
title="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง"
|
||||
|
|
@ -1774,7 +1791,7 @@ onMounted(async () => {
|
|||
@return-person="emitPerson"
|
||||
:checked-val="false"
|
||||
:fetch-data="fetchData"
|
||||
/>
|
||||
/> -->
|
||||
|
||||
<PopupPersonal
|
||||
:modal="modalPersonal"
|
||||
|
|
@ -1792,7 +1809,7 @@ onMounted(async () => {
|
|||
/>
|
||||
</template>
|
||||
|
||||
<style scope>
|
||||
<style scoped>
|
||||
.q-banner {
|
||||
min-height: 25px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,9 +78,9 @@ function getHistory(id: string) {
|
|||
}
|
||||
|
||||
watch(
|
||||
() => props.personId,
|
||||
() => props.modal,
|
||||
() => {
|
||||
if (props.personId) {
|
||||
if (props.modal) {
|
||||
getHistory(props.personId);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,14 +13,16 @@ import type {
|
|||
FormData,
|
||||
FormRef,
|
||||
DataOption,
|
||||
FaultTypeOption,
|
||||
} from "@/modules/11_discipline/interface/request/Result";
|
||||
|
||||
import DialogHistory from "@/modules/11_discipline/components/4_Result/DialogHistory.vue";
|
||||
import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
const mainStore = useDisciplineMainStore();
|
||||
|
||||
const isEmpType = ref<string>('')
|
||||
const isEmpType = ref<string>("");
|
||||
const dataStore = useDisciplineResultStore();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
|
|
@ -31,6 +33,7 @@ const {
|
|||
showLoader,
|
||||
dialogRemove,
|
||||
downloadRenameFileByLink,
|
||||
dialogMessageNotify,
|
||||
} = mixin;
|
||||
const route = useRoute();
|
||||
|
||||
|
|
@ -55,6 +58,28 @@ const organizationOption = ref<DataOption[]>([]);
|
|||
const detailRef = ref<Object | null>(null);
|
||||
const modalHistory = ref<boolean>(false);
|
||||
const personalId = ref<string>("");
|
||||
const nameFault = ref<string>("");
|
||||
const modalFault = ref<boolean>(false);
|
||||
const remark = ref<string>("");
|
||||
|
||||
const checkValue = ref<FaultTypeOption[]>(
|
||||
JSON.parse(JSON.stringify(mainStore.checkValueFaultT))
|
||||
);
|
||||
const offense = ref<string>("");
|
||||
const offenseOp = ref<DataOption[]>([
|
||||
{
|
||||
id: "มาตรา 82",
|
||||
name: "มาตรา 82",
|
||||
},
|
||||
{
|
||||
id: "มาตรา 83",
|
||||
name: "มาตรา 83",
|
||||
},
|
||||
{
|
||||
id: "มาตรา 85",
|
||||
name: "มาตรา 85",
|
||||
},
|
||||
]);
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
|
|
@ -228,16 +253,41 @@ function closeDetail() {
|
|||
}
|
||||
|
||||
/** เปิดรายละเอียด */
|
||||
function onclickViewinfo(id: string,type:string) {
|
||||
function onclickViewinfo(id: string, type: string) {
|
||||
modalPersonal.value = true;
|
||||
personId.value = id;
|
||||
isEmpType.value = type
|
||||
isEmpType.value = type;
|
||||
}
|
||||
|
||||
function updatemodalPersonal(modal: boolean) {
|
||||
modalPersonal.value = modal;
|
||||
}
|
||||
|
||||
function onFault(data: any) {
|
||||
nameFault.value = data.name;
|
||||
modalFault.value = true;
|
||||
personalId.value = data.personId;
|
||||
}
|
||||
|
||||
function close() {
|
||||
modalFault.value = false;
|
||||
personalId.value = "";
|
||||
remark.value = "";
|
||||
checkValue.value = JSON.parse(JSON.stringify(mainStore.checkValueFaultT));
|
||||
}
|
||||
|
||||
function onFaultSubmit() {
|
||||
if (checkValue.value.some((item) => item.value)) {
|
||||
dialogConfirm($q, () => {
|
||||
console.log("onFaultSubmit wait API");
|
||||
close();
|
||||
props.fetchData();
|
||||
});
|
||||
} else {
|
||||
dialogMessageNotify($q, "กรุณาเลือกอย่างน้อย 1 มาตรา");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* เช็คข้อมูลจาก props
|
||||
* เมื่อมีข้อมูล
|
||||
|
|
@ -391,13 +441,28 @@ watch(
|
|||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<td>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="edit"
|
||||
icon="edit"
|
||||
@click="onFault(props.row)"
|
||||
>
|
||||
<q-tooltip>ระบุฐานความผิด</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="info"
|
||||
icon="mdi-eye"
|
||||
@click="onclickViewinfo(props.row.personId,props.row.profileType)"
|
||||
@click="
|
||||
onclickViewinfo(
|
||||
props.row.personId,
|
||||
props.row.profileType
|
||||
)
|
||||
"
|
||||
>
|
||||
<q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
|
||||
</q-btn>
|
||||
|
|
@ -428,7 +493,11 @@ watch(
|
|||
{{ props.row.organization }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'salary'">
|
||||
{{ props.row.salary?props.row.salary.toLocaleString():'0' }}
|
||||
{{
|
||||
props.row.salary
|
||||
? props.row.salary.toLocaleString()
|
||||
: "0"
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'profileType'">
|
||||
{{
|
||||
|
|
@ -438,7 +507,7 @@ watch(
|
|||
}}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ?? '-'}}
|
||||
{{ col.value ?? "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
|
|
@ -647,6 +716,93 @@ watch(
|
|||
</q-form>
|
||||
</div>
|
||||
|
||||
<q-dialog v-model="modalFault" persistent>
|
||||
<q-card class="col-12" style="width: 40vw">
|
||||
<q-form greedy @submit.prevent @validation-success="onFaultSubmit">
|
||||
<DialogHeader
|
||||
:tittle="`ระบุฐานความผิดของ ${nameFault}`"
|
||||
:close="close"
|
||||
/>
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-card
|
||||
bordered
|
||||
flat
|
||||
style="max-height: 500px; overflow-y: scroll"
|
||||
class="q-pa-sm"
|
||||
>
|
||||
<div
|
||||
v-for="(items, index) in checkValue"
|
||||
:class="`full-width `"
|
||||
:key="items.id"
|
||||
>
|
||||
<div
|
||||
:class="`row border_bottom q-py-xs ${
|
||||
items.id == 1 || items.id == 25
|
||||
? 'bg-grey-3'
|
||||
: items.id == 2 || items.id == 14 || items.id == 26
|
||||
? 'bg-grey-2'
|
||||
: ''
|
||||
}`"
|
||||
:style="index == 0 ? 'border-top: 1px solid #d8d8d8;' : ''"
|
||||
>
|
||||
<div class="col-1 text-center">
|
||||
<q-checkbox
|
||||
v-if="
|
||||
items.id !== 2 && items.id !== 14 && items.id !== 26
|
||||
"
|
||||
v-model="items.value"
|
||||
dense
|
||||
:true-value="true"
|
||||
:false-value="false"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
:class="items.subId == 0 ? `col-11` : `col-11 q-pl-lg`"
|
||||
>
|
||||
{{ items.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row">
|
||||
<div class="col-1">
|
||||
<q-checkbox
|
||||
v-model="checkValue"
|
||||
dense
|
||||
:true-value="true"
|
||||
:false-value="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-11"></div>
|
||||
</div> -->
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
label="หมายเหตุ"
|
||||
v-model="remark"
|
||||
outlined
|
||||
dense
|
||||
type="textarea"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<PopupPersonal
|
||||
:modal="modalPersonal"
|
||||
:id="personId"
|
||||
|
|
@ -660,3 +816,12 @@ watch(
|
|||
:person-id="personalId"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.border_bottom {
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
border-radius: 0;
|
||||
border-left: 1px solid #d8d8d8;
|
||||
border-right: 1px solid #d8d8d8;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue