865 lines
28 KiB
Vue
865 lines
28 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import axios from "axios";
|
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
|
|
import { usePagination } from "@/composables/usePagination";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
import type { QTableProps } from "quasar";
|
|
import type {
|
|
DataFileDownload,
|
|
DataDirector,
|
|
DataAuthority,
|
|
} from "@/modules/18_command/interface/response/Main";
|
|
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
import PerviewPDF from "@/modules/18_command/components/Step/PerviewPDF.vue";
|
|
|
|
const $q = useQuasar();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const store = useCommandDetail();
|
|
const {
|
|
showLoader,
|
|
hideLoader,
|
|
messageError,
|
|
dialogConfirm,
|
|
dialogMessageNotify,
|
|
} = useCounterMixin();
|
|
const { pagination, params, onRequest } = usePagination("", fetchListDirector);
|
|
|
|
const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
|
|
|
|
const { fetchData } = defineProps({
|
|
fetchData: { type: Function, require: true },
|
|
});
|
|
const step = defineModel<number>("step", { required: true }); //ขั้นตอนการลงนาม
|
|
|
|
//แบบร่าง
|
|
const isCheckDraft = defineModel<boolean>("isDraft", { required: true });
|
|
|
|
// แบบร่าง
|
|
const isAttachment = defineModel<boolean>("isAttachment", { required: true }); //เช็คบัญชีแนบท้าย
|
|
const fileUploadOrder = ref<any>(null); //ไฟล์คำสั่ง
|
|
const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
|
|
const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
|
|
const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
|
|
const isDirector = ref<boolean>(true); //ผู้บังคับบัญชา
|
|
const isAct = ref<boolean>(false); //รักษาการแทน
|
|
const dataFile = ref<DataFileDownload>(); //ข้อมูลไฟล์คำสั่งที่ดาวน์โหลดมา
|
|
|
|
const modalSelect = ref<boolean>(false); //popup เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
|
|
const search = ref<string>("");
|
|
const rows = ref<DataDirector[]>([]); //รายชื่อผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
|
|
const selected = ref<DataDirector[]>([]); //เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
|
|
const columns = ref<QTableProps["columns"]>([
|
|
{
|
|
name: "citizenId",
|
|
align: "left",
|
|
label: "เลขประจำตัวประชาชน",
|
|
sortable: true,
|
|
field: "citizenId",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "posNo",
|
|
align: "left",
|
|
label: "เลขที่ตำแหน่ง",
|
|
sortable: true,
|
|
field: "posNo",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
|
|
{
|
|
name: "firstName",
|
|
align: "left",
|
|
label: "ชื่อ-นามสกุล",
|
|
sortable: true,
|
|
field: "fullName",
|
|
format(val, row) {
|
|
return `${row.prefix}${row.firstName} ${row.lastName}`;
|
|
},
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
|
|
{
|
|
name: "position",
|
|
align: "left",
|
|
label: "ตำแหน่ง",
|
|
sortable: true,
|
|
field: "position",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "posType",
|
|
align: "left",
|
|
label: "ประเภทตำแหน่ง",
|
|
sortable: true,
|
|
field: "posType",
|
|
format(val, row) {
|
|
return `${row.posType} ${row.posLevel ? `(${row.posLevel})` : ""} `;
|
|
},
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
|
|
{
|
|
name: "actFullName",
|
|
align: "left",
|
|
label: "รักษาการแทน",
|
|
sortable: true,
|
|
field: "actFullName",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
]);
|
|
|
|
//รอผู้มีอำนาจลงนามอนุมัติ
|
|
const commandSignId = ref<string>("");
|
|
const isSignatory = ref<boolean>(false);
|
|
const rowsAuthority = ref<DataAuthority[]>([]); //รายชื่อผู้อำนาจลงนามอนุมัติ
|
|
const modalComment = ref<boolean>(false); //popup แสดงความเห็น
|
|
const reason = ref<string>("");
|
|
|
|
//รอออกคำสั่ง
|
|
const isLoad = ref<boolean>(false); //แสดงโหลด
|
|
const isPersonSign = ref<boolean>(false); //ผู้มีอำนาจลงนาม
|
|
const modalPerView = ref<boolean>(false);
|
|
|
|
/** ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ*/
|
|
function onConfirmDraft() {
|
|
if (
|
|
store?.dataCommand?.commandNo !== "" &&
|
|
store?.dataCommand?.commandExcecuteDate !== null
|
|
) {
|
|
modalSelect.value = true;
|
|
fetchListDirector();
|
|
} else {
|
|
dialogMessageNotify(
|
|
$q,
|
|
"ไม่สามารถดำเนินการต่อได้ กรุณากรอกเลขที่คำสั่ง และวันที่คำสั่งมีผลให้ครบ"
|
|
);
|
|
}
|
|
}
|
|
|
|
/** ฟังก์ชันดึงข้อมูลผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง */
|
|
async function fetchListDirector() {
|
|
showLoader();
|
|
await http
|
|
.post(config.API.commandDirector, {
|
|
isDirector: isDirector.value, // fix ค่านี้เป็น true
|
|
isAct: isAct.value,
|
|
keyword: search.value,
|
|
...params.value,
|
|
})
|
|
.then((res) => {
|
|
const result = res.data.result;
|
|
pagination.value.rowsNumber = result.total;
|
|
rows.value = result.data;
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** ฟังก์ชันค้นหาข้อมูล */
|
|
function onSearchData() {
|
|
pagination.value.page = 1;
|
|
fetchListDirector();
|
|
}
|
|
|
|
/** ฟังก์ชันยืนยันการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ */
|
|
function onConfirmSendToCommander() {
|
|
dialogConfirm(
|
|
$q,
|
|
async () => {
|
|
showLoader();
|
|
await http
|
|
.put(config.API.command + `/step-add/${commandId.value}`, {
|
|
profileId: selected.value[0].id,
|
|
isSignatory: isPersonSign.value, // เป็นผู้มีอำนาจลงนามไหม
|
|
})
|
|
.then(async () => {
|
|
await Promise.all([fetchData?.(), fetchListAuthority()]);
|
|
onCloseDialog();
|
|
isCheckDraft.value = true;
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
},
|
|
"ยืนยันการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ",
|
|
"คุณต้องการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจใช่หรือไม่?"
|
|
);
|
|
}
|
|
|
|
/** ฟังก์ชันแสดง popup แสดงความเห็น */
|
|
function onComment(id: string, isStatus: boolean) {
|
|
modalComment.value = true;
|
|
commandSignId.value = id;
|
|
isSignatory.value = isStatus;
|
|
}
|
|
|
|
/** ฟังก์ชันบันทึกความคิดเห็น */
|
|
function onSubmitComment() {
|
|
dialogConfirm($q, async () => {
|
|
showLoader();
|
|
await http
|
|
.put(config.API.command + `/step-comment/${commandSignId.value}`, {
|
|
comment: reason.value,
|
|
})
|
|
.then(async () => {
|
|
if (isSignatory.value) {
|
|
onCloseDialog();
|
|
await router.push(`/command/view/${commandId.value}`);
|
|
} else {
|
|
await Promise.all([fetchData?.(), fetchListAuthority()]);
|
|
}
|
|
onCloseDialog();
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
/** ฟังก์ชันปิด dialog และ reset ค่า */
|
|
function onCloseDialog() {
|
|
isAct.value = false;
|
|
isDirector.value = true;
|
|
modalSelect.value = false;
|
|
modalComment.value = false;
|
|
isPersonSign.value = false;
|
|
rows.value = [];
|
|
selected.value = [];
|
|
search.value = "";
|
|
pagination.value = {
|
|
page: 1,
|
|
rowsPerPage: 10,
|
|
rowsNumber: 0,
|
|
sortBy: "",
|
|
descending: false,
|
|
};
|
|
|
|
reason.value = "";
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันดึงข้อมูลเอกสารคำสั่ง
|
|
* @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
|
|
*/
|
|
async function fetchDoc(group: string) {
|
|
showLoader();
|
|
let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
|
|
await http
|
|
.get(config.API.file("ระบบออกคำสั่ง", type, commandId.value))
|
|
.then((res) => {
|
|
const data = res.data[0];
|
|
if (group === "order") {
|
|
fileOrder.value = data;
|
|
} else {
|
|
fileTailer.value = data;
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันอัพโหลดไฟล์คำสั่ง
|
|
* @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
|
|
*/
|
|
function onUploadFile(group: string) {
|
|
showLoader();
|
|
let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
|
|
let file = group === "order" ? fileUploadOrder.value : fileUploadTailer.value;
|
|
const fileName = { fileName: type };
|
|
http
|
|
.post(config.API.file("ระบบออกคำสั่ง", type, commandId.value), {
|
|
replace: true,
|
|
fileList: fileName,
|
|
})
|
|
.then(async (res) => {
|
|
const foundKey: string | undefined = Object.keys(res.data).find(
|
|
(key) =>
|
|
res.data[key]?.fileName !== undefined &&
|
|
res.data[key]?.fileName !== ""
|
|
);
|
|
foundKey &&
|
|
(await uploadFileDoc(res.data[foundKey]?.uploadUrl, file, group));
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันอัพโหลดไฟล์คำสั่ง
|
|
* @param uploadUrl ลิงค์อัพโหลดไฟล์
|
|
* @param file ไฟล์ที่อัพโหลด
|
|
* @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
|
|
*/
|
|
async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
|
|
const formData = new FormData();
|
|
formData.append("file", file);
|
|
showLoader();
|
|
await axios
|
|
.put(uploadUrl, file, {
|
|
headers: {
|
|
"Content-Type": file.type,
|
|
},
|
|
})
|
|
.then(async () => {
|
|
await fetchDoc(group);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
if (group === "order") {
|
|
fileUploadOrder.value = null;
|
|
} else {
|
|
fileUploadTailer.value = null;
|
|
}
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันดาวน์โหลดไฟล์
|
|
* @param file ข้อมูลไฟล์
|
|
* @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
|
|
* @param isView ดูไฟล์ในหน้าใหม่ไหม (default=false)
|
|
*/
|
|
function downloadFile(file: any, group: string, isView: boolean = false) {
|
|
let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
|
|
showLoader();
|
|
http
|
|
.get(
|
|
config.API.fileByFile(
|
|
"ระบบออกคำสั่ง",
|
|
type,
|
|
commandId.value,
|
|
file.fileName
|
|
)
|
|
)
|
|
.then((res) => {
|
|
const data = res.data;
|
|
dataFile.value = data;
|
|
if (isView) {
|
|
modalPerView.value = true;
|
|
} else {
|
|
window.open(data.downloadUrl, "_blank");
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** ฟังก์ชันดึงข้อมูลรายการผู้มีอำนาจ */
|
|
async function fetchListAuthority() {
|
|
await http
|
|
.get(config.API.command + `/step/${commandId.value}`)
|
|
.then(async (res) => {
|
|
const data = res.data.result;
|
|
rowsAuthority.value = data;
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
});
|
|
}
|
|
|
|
/** ฟังก์ชันแสดงเฉพาะรักษาการแทน */
|
|
function onAct() {
|
|
isDirector.value = !isDirector.value;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
isLoad.value = false;
|
|
let promises = [fetchDoc("order")];
|
|
if (isAttachment.value) {
|
|
promises.push(fetchDoc("tailer"));
|
|
}
|
|
if (step.value > 1) {
|
|
promises.push(fetchListAuthority());
|
|
}
|
|
|
|
await Promise.all(promises).finally(() => {
|
|
isLoad.value = true;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="q-px-lg q-py-md" v-if="isLoad">
|
|
<q-timeline :color="store.status === 'CANCEL' ? 'grey-4' : 'blue-5'">
|
|
<!-- แบบร่าง -->
|
|
<q-timeline-entry
|
|
title="แบบร่าง"
|
|
:icon="step === 1 ? 'mdi-pencil' : step > 1 ? 'done' : 'mdi-numeric-1'"
|
|
>
|
|
<div class="row q-col-gutter-sm">
|
|
<div class="row col-12 q-col-gutter-sm">
|
|
<div class="col-12 text-header">
|
|
อัปโหลดเอกสารสแกนกลับเข้าสู่ระบบ
|
|
</div>
|
|
<div class="col-6">
|
|
<q-card
|
|
bordered
|
|
class="row col-12"
|
|
style="border: 1px solid #d6dee1"
|
|
>
|
|
<div
|
|
class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
|
|
>
|
|
คำสั่ง
|
|
<q-space />
|
|
<q-btn
|
|
v-if="fileOrder"
|
|
rounded
|
|
flat
|
|
dense
|
|
color="primary"
|
|
icon="mdi-eye"
|
|
@click.prevent="downloadFile(fileOrder, 'order', true)"
|
|
>
|
|
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
v-if="fileOrder"
|
|
rounded
|
|
flat
|
|
dense
|
|
color="red"
|
|
icon="mdi-download"
|
|
@click.prevent="downloadFile(fileOrder, 'order')"
|
|
>
|
|
<q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="col-12 q-pa-md" v-if="step === 1">
|
|
<q-file
|
|
outlined
|
|
dense
|
|
v-model="fileUploadOrder"
|
|
label="เลือกไฟล์คำสั่ง"
|
|
hide-bottom-space
|
|
accept=".pdf"
|
|
:readonly="store.readonly"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="attach_file" />
|
|
</template>
|
|
|
|
<template v-slot:after>
|
|
<q-btn
|
|
@click.prevent="onUploadFile('order')"
|
|
flat
|
|
round
|
|
icon="mdi-upload"
|
|
:color="fileUploadOrder == null ? 'grey-5' : 'blue-5'"
|
|
:disable="fileUploadOrder == null"
|
|
/>
|
|
</template>
|
|
</q-file>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div
|
|
class="col-6"
|
|
v-if="
|
|
isAttachment ||
|
|
(store.dataCommand &&
|
|
store.dataCommand.commandCode == 'C-PM-38')
|
|
"
|
|
>
|
|
<q-card
|
|
bordered
|
|
class="row col-12"
|
|
style="border: 1px solid #d6dee1"
|
|
>
|
|
<div
|
|
class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
|
|
>
|
|
เอกสารแนบท้าย
|
|
<q-space />
|
|
<q-btn
|
|
v-if="fileTailer"
|
|
rounded
|
|
flat
|
|
dense
|
|
color="primary"
|
|
icon="mdi-eye"
|
|
@click.prevent="downloadFile(fileTailer, 'tailer', true)"
|
|
>
|
|
<q-tooltip>ดูไฟล์เอกสารแนบท้าย</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
v-if="fileTailer"
|
|
rounded
|
|
flat
|
|
dense
|
|
color="red"
|
|
icon="mdi-download"
|
|
@click.prevent="downloadFile(fileTailer, 'tailer')"
|
|
>
|
|
<q-tooltip>ดาวน์โหลดไฟล์แนบท้าย</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="col-12 q-pa-md" v-if="step === 1">
|
|
<q-file
|
|
outlined
|
|
dense
|
|
v-model="fileUploadTailer"
|
|
label="เลือกไฟล์เอกสารแนบท้าย"
|
|
hide-bottom-space
|
|
accept=".pdf"
|
|
:readonly="store.readonly"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="attach_file" />
|
|
</template>
|
|
|
|
<template v-slot:after>
|
|
<q-btn
|
|
@click.prevent="onUploadFile('tailer')"
|
|
flat
|
|
round
|
|
icon="mdi-upload"
|
|
:color="fileUploadTailer == null ? 'grey-5' : 'blue-5'"
|
|
:disable="fileUploadTailer == null"
|
|
/>
|
|
<q-tooltip>อัปโหลดไฟล์เอกสารแนบท้าย</q-tooltip>
|
|
</template>
|
|
</q-file>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="col-12"
|
|
v-if="!isCheckDraft && fileOrder && (!isAttachment || fileTailer)"
|
|
>
|
|
<q-btn
|
|
v-if="!store.readonly"
|
|
@click.prevent="onConfirmDraft"
|
|
label="เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง"
|
|
:color="
|
|
fileOrder === null || (isAttachment && fileTailer === null)
|
|
? 'grey-5'
|
|
: 'public'
|
|
"
|
|
:disable="
|
|
fileOrder === null || (isAttachment && fileTailer === null)
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-timeline-entry>
|
|
|
|
<!-- รอผู้มีอำนาจลงนามอนุมัติ -->
|
|
<q-timeline-entry
|
|
title="รอผู้มีอำนาจลงนามอนุมัติ"
|
|
:icon="step === 2 ? 'mdi-pencil' : step > 2 ? 'done' : 'mdi-numeric-2'"
|
|
:color="step < 2 ? 'grey-4' : ''"
|
|
>
|
|
<div class="row q-col-gutter-sm" v-if="isCheckDraft">
|
|
<div class="">
|
|
<q-list bordered separator>
|
|
<q-item v-for="(item, index) in rowsAuthority" :key="index">
|
|
<q-item-section>
|
|
<q-item-label
|
|
>{{ `${item.prefix}${item.firstName} ${item.lastName}` }}
|
|
{{ `(${item.position})` }}</q-item-label
|
|
>
|
|
<q-item-label caption lines="2">{{
|
|
item.comment
|
|
}}</q-item-label>
|
|
</q-item-section>
|
|
|
|
<q-item-section
|
|
side
|
|
top
|
|
v-if="
|
|
index === rowsAuthority.length - 1 && item.comment === null
|
|
"
|
|
>
|
|
<q-item-label caption v-if="!store.readonly">
|
|
<q-btn
|
|
unelevated
|
|
rounded
|
|
@click.prevent="onComment(item.id, item.isSignatory)"
|
|
label="แสดงความเห็น"
|
|
color="blue"
|
|
/>
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
|
|
<div
|
|
class="col-12"
|
|
v-if="
|
|
rowsAuthority[rowsAuthority.length - 1].comment !== null &&
|
|
step === 2 &&
|
|
!store.readonly
|
|
"
|
|
>
|
|
<q-btn
|
|
@click.prevent="onConfirmDraft"
|
|
label="เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง"
|
|
color="public"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-timeline-entry>
|
|
|
|
<!-- รอออกคำสั่ง -->
|
|
<q-timeline-entry
|
|
title="รอออกคำสั่ง"
|
|
:icon="step === 3 ? 'mdi-pencil' : step > 3 ? 'done' : 'mdi-numeric-3'"
|
|
:color="step < 3 ? 'grey-4' : ''"
|
|
>
|
|
<!-- <div class="row q-col-gutter-sm" v-if="isCheckAuthority">
|
|
<div class="col-12">รอออกคำสั่ง</div>
|
|
</div> -->
|
|
</q-timeline-entry>
|
|
|
|
<!-- รอออกคำสั่ง -->
|
|
<q-timeline-entry
|
|
title="ออกคำสั่งเสร็จสิ้น"
|
|
:icon="step === 4 ? 'mdi-pencil' : step > 4 ? 'done' : 'mdi-numeric-4'"
|
|
:color="step < 4 ? 'grey-4' : ''"
|
|
>
|
|
<div class="row q-col-gutter-sm" v-if="step === 4">
|
|
<div class="q-pa-md q-gutter-sm">
|
|
<q-btn
|
|
color="blue-5"
|
|
icon-right="mdi-download"
|
|
label="ดาวน์โหลดคำสั่งที่เซ็นต์แล้ว"
|
|
/>
|
|
<q-btn
|
|
color="blue-5"
|
|
icon-right="mdi-download"
|
|
label="ดาวน์โหลดบัญชีแนบท้ายที่เซ็นต์แล้ว"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-timeline-entry>
|
|
</q-timeline>
|
|
</div>
|
|
|
|
<div class="full-width row flex-center text-accent q-gutter-sm" v-else>
|
|
<span
|
|
><div
|
|
style="
|
|
height: 50vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
"
|
|
class="text-grey-5"
|
|
>
|
|
<q-spinner color="primary" size="3em" :thickness="10" />
|
|
</div>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง -->
|
|
<q-dialog v-model="modalSelect" persistent>
|
|
<q-card style="min-width: 70%">
|
|
<DialogHeader
|
|
:tittle="'เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง'"
|
|
:close="onCloseDialog"
|
|
/>
|
|
<q-separator />
|
|
|
|
<q-card-section>
|
|
<div class="col-12 q-col-gutter-sm">
|
|
<div class="col-12 row q-col-gutter-md items-start">
|
|
<div class="col-12 col-sm-4 col-md-4">
|
|
<q-input
|
|
v-model="search"
|
|
outlined
|
|
clearable
|
|
hide-bottom-space
|
|
dense
|
|
label="คำค้น"
|
|
@clear="search = ''"
|
|
/>
|
|
</div>
|
|
<q-checkbox
|
|
keep-color
|
|
v-model="isAct"
|
|
label="แสดงเฉพาะรักษาการแทน"
|
|
color="primary"
|
|
@update:model-value="onAct"
|
|
>
|
|
<q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
|
|
</q-checkbox>
|
|
<q-space />
|
|
|
|
<div class="col-12 col-sm-6 col-md-3">
|
|
<q-btn
|
|
color="primary"
|
|
icon="search"
|
|
label="ค้นหา"
|
|
class="full-width q-pa-sm"
|
|
@click.prevent="onSearchData"
|
|
>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<p-table
|
|
flat
|
|
:columns="columns"
|
|
:rows="rows"
|
|
row-key="key"
|
|
dense
|
|
selection="single"
|
|
v-model:selected="selected"
|
|
:rows-per-page-options="[10, 25, 50, 100]"
|
|
v-model:pagination="pagination"
|
|
@request="onRequest"
|
|
>
|
|
<template v-slot:header-selection="scope">
|
|
<q-checkbox
|
|
keep-color
|
|
color="primary"
|
|
dense
|
|
v-model="scope.checkBox"
|
|
/>
|
|
</template>
|
|
<template v-slot:header="props">
|
|
<q-tr :props="props">
|
|
<q-th class="text-center"> </q-th>
|
|
|
|
<q-th
|
|
v-for="col in props.cols"
|
|
:key="col.name"
|
|
:props="props"
|
|
>
|
|
<span class="text-weight-medium">{{ col.label }}</span>
|
|
</q-th>
|
|
</q-tr>
|
|
</template>
|
|
<template v-slot:body="props">
|
|
<q-tr :props="props">
|
|
<q-td class="text-center">
|
|
<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>
|
|
{{ col.value ?? "-" }}
|
|
</div>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</p-table>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<q-checkbox v-model="isPersonSign" label="ผู้มีอำนาจลงนาม" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-card-actions align="right">
|
|
<q-btn
|
|
:disable="selected.length === 0"
|
|
@click.prevent="onConfirmSendToCommander"
|
|
label="ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ"
|
|
color="public"
|
|
/>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<!-- แสดงความเห็น -->
|
|
<q-dialog v-model="modalComment" persistent>
|
|
<q-card style="min-width: 40%">
|
|
<q-form greedy @submit.prevent @validation-success="onSubmitComment">
|
|
<DialogHeader :tittle="'รับทราบคำสั่ง'" :close="onCloseDialog" />
|
|
<q-separator />
|
|
|
|
<q-card-section>
|
|
<div class="row col-12 q-col-gutter-sm">
|
|
<div class="col-12">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
v-model="reason"
|
|
label="ความเห็น"
|
|
type="textarea"
|
|
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกความเห็น'}`]"
|
|
hide-bottom-space
|
|
lazy-rules
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-card-actions align="right">
|
|
<q-btn color="secondary" label="รับทราบ" type="onSubmit" />
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<PerviewPDF v-model:modal="modalPerView" v-model:data-file="dataFile" />
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.text-header {
|
|
color: #34373c;
|
|
font-size: 1rem;
|
|
font-weight: 300;
|
|
}
|
|
</style>
|