ui pop up history

This commit is contained in:
setthawutttty 2023-12-27 11:08:35 +07:00
parent 3d519802ef
commit 22159ecade
5 changed files with 239 additions and 82 deletions

View 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>

View file

@ -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>

View file

@ -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">

View file

@ -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>

View file

@ -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>