ui pop up history
This commit is contained in:
parent
3d519802ef
commit
22159ecade
5 changed files with 239 additions and 82 deletions
129
src/modules/11_discipline/components/4_Result/DialogHistory.vue
Normal file
129
src/modules/11_discipline/components/4_Result/DialogHistory.vue
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
watchEffect,
|
||||
watch,
|
||||
type PropType,
|
||||
onMounted,
|
||||
} from "vue";
|
||||
import { QForm, useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { QTableProps } from "quasar";
|
||||
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, success, messageError, dialogConfirm, hideLoader,date2Thai } = mixin;
|
||||
const listCheck = ref<string>("");
|
||||
const props = defineProps({
|
||||
modal: Boolean,
|
||||
personId: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
close: Function,
|
||||
});
|
||||
const rows = ref<any>();
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "directions",
|
||||
align: "left",
|
||||
label: "คำสั่ง",
|
||||
sortable: true,
|
||||
field: "directions",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "dateDirections",
|
||||
align: "left",
|
||||
label: "วันที่ส่งไปออกคำสั่ง",
|
||||
sortable: true,
|
||||
field: "dateDirections",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
const data = [
|
||||
{
|
||||
id: "1",
|
||||
directions: "จำลอง1",
|
||||
dateDirections: date2Thai(new Date(),false,true),
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
directions: "จำลอง2",
|
||||
dateDirections: date2Thai(new Date(),false,true),
|
||||
},
|
||||
];
|
||||
|
||||
rows.value = data;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="props.modal" persistent>
|
||||
<q-card style="min-width: 40vw">
|
||||
<q-form ref="myForm">
|
||||
<DialogHeader
|
||||
:title="`ประวัติการออกคำสั่ง ${props.personId}`"
|
||||
:close="props.close"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<d-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium" v-html="col.label" />
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card-section>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.my-menu-link {
|
||||
background: #ebf9f7 !important;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #1bb19ab8;
|
||||
color: #1bb19ab8 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -132,21 +132,24 @@ async function fecthTypeOption(){
|
|||
await http
|
||||
.get(config.API.typeOrder())
|
||||
.then((res) => {
|
||||
if (props.title == "ส่งไปออกคำสั่งลงโทษทางวินัย") {
|
||||
// if (props.title == "ส่งไปออกคำสั่ง") {
|
||||
optionsType.value = res.data.result.filter(
|
||||
(e: OpType) =>
|
||||
e.commandCode === "C-PM-19" ||
|
||||
e.commandCode === "C-PM-20" ||
|
||||
e.commandCode === "C-PM-27" ||
|
||||
e.commandCode === "C-PM-28" ||
|
||||
e.commandCode === "C-PM-29"
|
||||
e.commandCode === "C-PM-29" ||
|
||||
e.commandCode === "C-PM-30" ||
|
||||
e.commandCode === "C-PM-31"
|
||||
);
|
||||
} else {
|
||||
optionsType.value = res.data.result.filter(
|
||||
(e: OpType) =>
|
||||
e.commandCode === "C-PM-30" || e.commandCode === "C-PM-31"
|
||||
);
|
||||
}
|
||||
// }
|
||||
// else {
|
||||
// optionsType.value = res.data.result.filter(
|
||||
// (e: OpType) =>
|
||||
// e.commandCode === "C-PM-30" || e.commandCode === "C-PM-31"
|
||||
// );
|
||||
// }
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -160,15 +163,16 @@ watchEffect(() => {
|
|||
if (props.Modal === true) {
|
||||
selected.value = [];
|
||||
type.value = "";
|
||||
if (props.title == "ส่งไปออกคำสั่งลงโทษทางวินัย") {
|
||||
rows.value = props.data.persons.filter(
|
||||
(item: any) => item.status !== "REPORT"
|
||||
);
|
||||
} else if (props.title == "ส่งไปออกคำสั่งงดโทษ/เพิ่มโทษ") {
|
||||
rows.value = props.data.persons.filter(
|
||||
(item: any) => item.status == "REPORT" && item.statusDiscard == "NEW"
|
||||
);
|
||||
}
|
||||
rows.value = props.data.persons
|
||||
// if (props.title == "ส่งไปออกคำสั่งลงโทษทางวินัย") {
|
||||
// rows.value = props.data.persons.filter(
|
||||
// (item: any) => item.status !== "REPORT"
|
||||
// );
|
||||
// } else if (props.title == "ส่งไปออกคำสั่งงดโทษ/เพิ่มโทษ") {
|
||||
// rows.value = props.data.persons.filter(
|
||||
// (item: any) => item.status == "REPORT" && item.statusDiscard == "NEW"
|
||||
// );
|
||||
// }
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -280,7 +284,7 @@ watch(
|
|||
v-model="props.selected"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props" >
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -279,16 +279,16 @@ onMounted(async () => {
|
|||
<div class="q-gutter-x-sm">
|
||||
<q-btn
|
||||
v-if="status === 'DONE'"
|
||||
label="ส่งไปออกคำสั่งลงโทษทางวินัย"
|
||||
label="ส่งไปออกคำสั่ง"
|
||||
color="public"
|
||||
@click="sentIssue('ส่งไปออกคำสั่งลงโทษทางวินัย')"
|
||||
@click="sentIssue('ส่งไปออกคำสั่ง')"
|
||||
/>
|
||||
<q-btn
|
||||
<!-- <q-btn
|
||||
v-if="status === 'DONE'"
|
||||
label="ส่งไปออกคำสั่งงดโทษ/เพิ่มโทษ"
|
||||
color="blue-6"
|
||||
@click="sentIssue('ส่งไปออกคำสั่งงดโทษ/เพิ่มโทษ')"
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
<q-card flat class="col-12">
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
|
||||
import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
|
||||
import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
|
||||
import DialogHistory from '@/modules/11_discipline/components/4_Result/DialogHistory.vue'
|
||||
|
||||
import type {
|
||||
FormData,
|
||||
|
|
@ -16,6 +17,7 @@ import type {
|
|||
DataOptionRes,
|
||||
FileArray,
|
||||
} from "@/modules/11_discipline/interface/request/result";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
const mainStore = useDisciplineMainStore();
|
||||
const modalPerson = ref<boolean>(false);
|
||||
|
|
@ -43,6 +45,8 @@ const consideredAgency = ref<string>("");
|
|||
const organizationOption = ref<DataOption[]>([]);
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const detailRef = ref<Object | null>(null);
|
||||
const modalHistory = ref<boolean>(false)
|
||||
const personalId = ref<string>('')
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
|
|
@ -228,6 +232,16 @@ function confirmDelete(docid: string) {
|
|||
props.fetchData();
|
||||
});
|
||||
}
|
||||
|
||||
function openDetial(id:string){
|
||||
personalId.value = id
|
||||
modalHistory.value = true
|
||||
}
|
||||
|
||||
function closeDetail(){
|
||||
modalHistory.value = false
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="row q-col-gutter-sm">
|
||||
|
|
@ -333,6 +347,7 @@ function confirmDelete(docid: string) {
|
|||
:key="col.name"
|
||||
:props="props"
|
||||
style="color: #000000; font-weight: 500"
|
||||
|
||||
>
|
||||
<span class="text-weight-medium">{{
|
||||
col.label
|
||||
|
|
@ -346,6 +361,7 @@ function confirmDelete(docid: string) {
|
|||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click="openDetial(props.row.id)"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
|
|
@ -564,4 +580,11 @@ function confirmDelete(docid: string) {
|
|||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<DialogHistory
|
||||
:modal="modalHistory"
|
||||
:close="closeDetail"
|
||||
:person-id="personalId"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import http from "@/plugins/http";
|
|||
import config from "@/app.config";
|
||||
import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
|
||||
|
||||
const qualification = ref<string>('')
|
||||
const qualification = ref<string>("");
|
||||
const mainStore = useDisciplineMainStore();
|
||||
const searchRef = ref<any>(null);
|
||||
const rows = ref<tableType[]>([]);
|
||||
|
|
@ -315,7 +315,7 @@ function returnDetail(data: any) {
|
|||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered>
|
||||
<div class="col-12 row q-pa-md">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="row col-12 q-col-gutter-md">
|
||||
<div class="row col-12" v-if="data === null">
|
||||
<div class="row col-12 q-col-gutter-sm items-start">
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
|
|
@ -356,61 +356,62 @@ function returnDetail(data: any) {
|
|||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columnsRespondent"
|
||||
:rows="rows"
|
||||
row-key="personId"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumnsRespondent"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
style="color: #000000; font-weight: 500"
|
||||
>
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click="returnDetail(props.row)"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'info'">
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="`/registry/${props.row.personId}`"
|
||||
><q-icon name="info" color="info" size="sm"
|
||||
><q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
|
||||
</q-icon></router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columnsRespondent"
|
||||
:rows="rows"
|
||||
row-key="personId"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumnsRespondent"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
style="color: #000000; font-weight: 500"
|
||||
>
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click="returnDetail(props.row)"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'info'">
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="`/registry/${props.row.personId}`"
|
||||
><q-icon name="info" color="info" size="sm"
|
||||
><q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
|
||||
</q-icon></router-link
|
||||
>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
:class="inputEdit(isReadonly)"
|
||||
|
|
@ -491,11 +492,11 @@ function returnDetail(data: any) {
|
|||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
label="คุณวุฒิ"
|
||||
type="textarea"
|
||||
dense
|
||||
outlined
|
||||
v-model="qualification"
|
||||
label="คุณวุฒิ"
|
||||
type="textarea"
|
||||
dense
|
||||
outlined
|
||||
v-model="qualification"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue