ui ส่งไปออกคำสั่ง

This commit is contained in:
STW_TTTY\stwtt 2024-09-25 10:17:33 +07:00
parent 0247619d87
commit 9b5f8b7af8
6 changed files with 509 additions and 21 deletions

View file

@ -0,0 +1,387 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import avatar from "@/assets/avatar_user.jpg";
import { useCounterMixin } from "@/stores/mixin";
import { useTransferDataStore } from "@/modules/05_placement/store";
import { useCommandMainStore } from "@/modules/18_command/store/Main";
// import http from "@/plugins/http";
// import config from "@/app.config";
import type { QTableProps } from "quasar";
import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
import DialogHeader from "@/components/DialogHeader.vue";
import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
const $q = useQuasar();
const mixin = useCounterMixin();
const {
showLoader,
success,
messageError,
dialogConfirm,
hideLoader,
date2Thai,
dateText,
} = mixin;
const modal = defineModel<boolean>("modal", { required: true });
/**
* props
*/
const props = defineProps({
closeModal: Function,
fetchData: Function,
rows: Array,
});
const modalCommand = ref<boolean>(false); //- modal
//Table
const selected = ref<ResponseData[]>([]); //
const filter = ref<string>(""); //
const visibleColumns = ref<string[]>([
"no",
"fullName",
"examNumber",
"organizationName",
"positionCandidate",
"reportingDate",
"bmaOfficer",
"draft",
"statusName",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "center",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullName",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px,",
},
{
name: "examNumber",
align: "center",
label: "ลำดับที่สอบได้",
sortable: true,
field: "examNumber",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organizationName",
align: "left",
label: "หน่วยงานที่รับการบรรจุ",
sortable: true,
field: "organizationName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionCandidate",
align: "left",
label: "ตำแหน่งที่สอบ",
sortable: true,
field: "positionCandidate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "reportingDate",
align: "left",
label: "วันที่รายงานตัว",
sortable: true,
field: "reportingDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "bmaOfficer",
align: "left",
label: "สถานภาพ",
sortable: true,
field: "bmaOfficer",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "draft",
align: "left",
label: "สถานะการส่งรายชื่อ",
sortable: true,
field: "draft",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "statusName",
align: "left",
label: "สถานะการบรรจุ",
sortable: true,
field: "statusName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
/**
* งกนยนยนการออกคำส
*/
function saveOrder() {
dialogConfirm(
$q,
async () => {
modalCommand.value = true;
modal.value = false;
},
"ยืนยันส่งไปออกคำสั่ง",
"ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
);
}
/**
* เม props.modal เป true
*
* กำหนดให selected เปนคาวาง
*/
watch(
() => modal.value,
() => {
if (modal.value === true) {
selected.value = [];
}
}
);
</script>
<template>
<q-dialog v-model="modal">
<q-card style="width: 1200px; max-width: 80vw">
<DialogHeader :tittle="'ส่งไปออกคำสั่ง'" :close="closeModal" />
<q-separator />
<q-card-section>
<div class="row justify-end">
<div class="col-5">
<q-toolbar style="padding: 0">
<q-input
borderless
outlined
dense
debounce="300"
v-model="filter"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</q-toolbar>
</div>
</div>
<d-table
:columns="columns"
:rows="rows"
:filter="filter"
row-key="id"
:visible-columns="visibleColumns"
selection="multiple"
v-model:selected="selected"
>
<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">
<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"
class="cursor-pointer"
>
<template v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</template>
<template
v-else-if="col.name === 'fullName'"
class="table_ellipsis"
>
<q-item v-ripple style="padding: 0">
<q-item-section avatar>
<q-avatar size="30px" color="grey-4">
<q-img
:src="props.row.avatar"
class="photo-profile"
v-if="props.row.avatar"
/>
<q-img :src="avatar" class="photo-profile" v-else"/>
</q-avatar>
</q-item-section>
<q-item-section>
<div class="text-weight-medium">{{ props.row.name }}</div>
<div class="text-weight-light">
{{ props.row.idCard }}
</div>
</q-item-section>
</q-item>
</template>
<template v-else-if="col.name === 'examNumber'">
<div class="text-weight-medium">
{{
props.row.examNumber !== null ? props.row.examNumber : "-"
}}
</div>
</template>
<template v-else-if="col.name === 'organizationName'">
<div
v-if="
props.row.orgName !== null ||
props.row.positionPath !== null
"
>
<div class="col-4">
<div class="text-weight-medium">
{{ props.row.root !== null ? props.row.root : "-" }}
{{
props.row.rootShortName !== null
? `(${props.row.rootShortName})`
: ""
}}
</div>
<div class="text-weight-light">
{{
props.row.nodeName !== null ? props.row.nodeName : ""
}}
{{
props.row.nodeShortName !== null
? `(${props.row.nodeShortName}${props.row.posMasterNo})`
: ""
}}
</div>
</div>
</div>
<div v-else>
<div class="col-4">
<div class="text-weight-medium">-</div>
</div>
</div>
</template>
<template v-else-if="col.name === 'positionCandidate'">
<div
class="text-weight-medium"
v-if="props.row.positionCandidate == null"
>
-
</div>
<div class="text-weight-medium" v-else>
{{ props.row.positionCandidate }}
</div>
</template>
<template v-else-if="col.name === 'reportingDate'">
<div class="text-weight-medium">
{{
props.row.reportingDate !== null
? dateText(props.row.reportingDate)
: "-"
}}
</div>
</template>
<template v-else-if="col.name === 'bmaOfficer'">
<div class="text-weight-medium">
{{ props.row.bmaOfficer }}
</div>
</template>
<template v-else-if="col.name === 'draft'">
<div class="text-weight-medium">
{{ props.row.draft }}
</div>
</template>
<template v-else-if="col.name === 'statusName'">
<div class="text-weight-medium">
{{ props.row.statusName }}
</div>
</template>
</q-td>
</q-tr>
</template>
</d-table>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn
label="ส่งไปออกคำสั่ง"
@click="saveOrder"
:disable="selected.length === 0"
color="public"
><q-tooltip>งไปออกคำส</q-tooltip></q-btn
>
</q-card-actions>
</q-card>
</q-dialog>
<DialogCreateCommand
v-model:modal="modalCommand"
:command-type-code="'C-PM-13'"
:persons-id="selected.map((r) => r.id)"
/>
</template>
<style scoped></style>

View file

@ -2,13 +2,14 @@
import { ref, onMounted, watch, reactive, computed } from "vue";
import { useQuasar, QForm } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute, useRouter } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import { tokenParsed } from "@/plugins/auth";
import router from "@/router";
import http from "@/plugins/http";
import config from "@/app.config";
import avatar from "@/assets/avatar_user.jpg";
import type { PartialTableName } from "@/modules/05_placement/interface/request/placement";
@ -20,10 +21,12 @@ import Table from "@/modules/05_placement/components/PersonalList/TableView.vue"
import DialogCard from "@/modules/05_placement/components/PersonalList/DialogDetail.vue";
import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
import DialogHeader from "@/components/DialogHeader.vue";
import DialogOrders from "@/modules/05_placement/components/PersonalList/DialogOrders.vue"; //
const route = useRoute();
const mixin = useCounterMixin(); //
const $q = useQuasar(); // show dialog
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin(); //
const {
messageError,
showLoader,
@ -45,6 +48,7 @@ const props = defineProps({
let roleAdmin = ref<boolean>(false);
const edit = ref<boolean>(true);
const modal = ref<boolean>(false); //modal +
const modalOrder = ref<boolean>(false); //modal
const editRow = ref<boolean>(false); //
const modalDisclaim = ref<boolean>(false); //modal
const editvisible = ref<boolean>(true);
@ -58,6 +62,7 @@ const Name = ref<string>();
const rowsAll = ref<any>([]);
const rows = ref<any[]>([]);
const rowsFilter = ref<any>([]);
const rowsOrder = ref<any>([]);
const myForm = ref<any>();
const files = ref<any>(null);
@ -509,10 +514,10 @@ function selectData(pid: string, draft: string) {
* @param props rows data
* @param action type
*/
const editDetail = (
function editDetail(
props: PartialTableName,
action: "disclaim" | "deferment" | "defermentInfo" | "disclaimInfo"
) => {
) {
Name.value = props.name;
personalId.value = props.personalId;
editRow.value = false;
@ -554,7 +559,7 @@ const editDetail = (
modalwaitInfo.value = true;
});
}
};
}
/**
* เป dialog
@ -723,6 +728,23 @@ function onSubmitDate() {
});
}
/**
* งกนสงไปออกคำส
*
* นหารายชอออกคำสงตามสถานะ อน (APPROVE)
*/
function openModalOrder(val: boolean) {
// object #e.draft == "" &&
rowsOrder.value = rows.value.filter(
(e: any) => e.nodeName !== null && e.reportingDate !== null
);
modalOrder.value = val;
}
function closeModal() {
modalOrder.value = false;
}
watch(containStatus, () => {
if (containStatus.value) {
rows.value = rowsAll.value.filter((x: any) => x.statusId == "CONTAIN");
@ -768,6 +790,7 @@ onMounted(async () => {
v-model:editvisible="editvisible"
v-model:containfilter="containStatus"
@update-modaladdlist="handleModalAddListUpdate"
@update-modaladdSendPerson="openModalOrder"
:history="true"
:boss="true"
:saveNoDraft="true"
@ -1220,7 +1243,7 @@ onMounted(async () => {
:outlined="edit"
dense
lazy-rules
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
:rules="[(val:string) => !!val || 'กรุณากรอกเหตุผล']"
:readonly="!edit"
:borderless="!edit"
v-model="userNote"
@ -1235,7 +1258,7 @@ onMounted(async () => {
:label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
outlined
use-chips
:rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
:rules="[(val:string) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
multiple
@update:model-value="clickEditRow"
class="q-py-sm"
@ -1569,6 +1592,12 @@ onMounted(async () => {
</q-form>
</q-card>
</q-dialog>
<DialogOrders
v-model:modal="modalOrder"
:close-modal="closeModal"
:rows="rowsOrder"
/>
</template>
<style lang="scss" scoped>

View file

@ -3,6 +3,7 @@ import { ref, useAttrs } from "vue";
import { QTooltip, useQuasar } from "quasar";
import { checkPermission } from "@/utils/permissions";
import type { PersonData } from "@/modules/05_placement/interface/index/Main";
const $q = useQuasar();
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
@ -115,6 +116,7 @@ const emit = defineEmits([
"update:inputvisibleFilter",
"update:containfilter",
"update-modaladdlist",
"update-modaladdSendPerson",
]);
function paginationLabel(start: string, end: string, total: string) {
@ -153,19 +155,27 @@ function resetFilter() {
function updateModaladdlist() {
emit("update-modaladdlist", true);
}
/** ส่งรายชื่อไปยังหน่วยงาน */
function openModalOrder() {
emit("update-modaladdSendPerson", true);
}
</script>
<template>
<div class="q-px-md q-pb-md">
<div class="col-12 row q-py-sm">
<q-toggle
<q-btn
v-if="roleAdmin === false"
class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
:model-value="containStatus"
color="blue"
label="แสดงสถานะบรรจุแล้ว"
@update:model-value="updateContain"
/>
@click="openModalOrder()"
flat
round
color="add"
icon="mdi-account-arrow-right"
>
<q-tooltip>งไปออกคำส</q-tooltip>
</q-btn>
<div>
<q-btn
flat
@ -179,7 +189,16 @@ function updateModaladdlist() {
</q-btn>
</div>
<q-space />
<div class="items-center" style="display: flex">
<q-toggle
v-if="roleAdmin === false"
class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
:model-value="containStatus"
color="blue"
label="แสดงสถานะบรรจุแล้ว"
@update:model-value="updateContain"
/>
<q-input
standout
dense

View file

@ -291,6 +291,58 @@ interface DataEducation {
graduation: string;
}
interface PersonData {
personalId: string;
avatar: string;
name: string;
fullName: string;
idCard: string;
examNumber: number;
root: string;
rootId: string;
rootShortName: string;
child1: string;
child1Id: string;
child1ShortName: string;
child2: string | null;
child2Id: string | null;
child2ShortName: string | null;
child3: string | null;
child3Id: string | null;
child3ShortName: string | null;
child4: string | null;
child4Id: string | null;
child4ShortName: string | null;
node: number;
nodeName: string;
nodeId: string;
nodeShortName: string;
orgRevisionId: string;
positionId: string;
posMasterNo: number;
positionName: string;
positionField: string;
posTypeId: string;
posTypeName: string;
posLevelId: string;
posLevelName: string;
positionCandidate: string;
positionCandidateId: string;
reportingDate: string;
bmaOfficer: string;
statusId: string;
draft: string;
typeCommand: string;
posTypeCandidateId: string | null;
posLevelCandidateId: string | null;
posmasterId: string;
statusNameCheck: string;
deferment: boolean;
statusName: string;
organizationName: string;
}
export type {
DataOption,
DataOptionInsignia,
@ -316,6 +368,7 @@ export type {
ListDataText,
ListMenu,
DataEducation,
PersonData
};
export { AddressDataDefualt, FamilyDataDefualt };

View file

@ -940,7 +940,7 @@ onMounted(async () => {
{{ props.row.salary.toLocaleString() }}
</div>
<div v-else>
{{ col.value ? col.value:'-' }}
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>

View file

@ -238,8 +238,8 @@ function clearValue() {
commandYear.value = new Date().getFullYear();
selectCreate.value = "NEW";
selected.value = []
filter.value = ''
selected.value = [];
filter.value = "";
}
const selectCreate = ref<string | null>("NEW");