ui รายละเอียดคำสั่ง => tab ประมาลผลคำสั่ง
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
e89eeeaba3
commit
336a7cefa9
5 changed files with 928 additions and 4 deletions
|
|
@ -9,7 +9,7 @@ import config from "@/app.config";
|
||||||
|
|
||||||
/** importType*/
|
/** importType*/
|
||||||
import type { QTableProps } from "quasar";
|
import type { QTableProps } from "quasar";
|
||||||
import type { Director } from "@/modules/11_discipline/interface/request/Disciplinary";
|
import type { Director } from "@/modules/11_discipline/interface/request/disciplinary";
|
||||||
import type { Directors } from "@/modules/12_evaluatePersonal/interface/response/Main";
|
import type { Directors } from "@/modules/12_evaluatePersonal/interface/response/Main";
|
||||||
|
|
||||||
/** importComponents*/
|
/** importComponents*/
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ import type {
|
||||||
typeOp,
|
typeOp,
|
||||||
ResponsePreson,
|
ResponsePreson,
|
||||||
tableType,
|
tableType,
|
||||||
} from "@/modules/11_discipline/interface/request/Director";
|
} from "@/modules/11_discipline/interface/request/director";
|
||||||
import type { Pagination } from "@/modules/12_evaluatePersonal/interface/index/Main";
|
import type { Pagination } from "@/modules/12_evaluatePersonal/interface/index/Main";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,174 @@
|
||||||
<script setup lang="ts"></script>
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
<template>ประมวลผลคำสั่ง</template>
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
import LiveView from "@/modules/18_command/components/Step/View0_Live.vue";
|
||||||
|
import DigitalView from "@/modules/18_command/components/Step/View0_Digital.vue";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const { showLoader, hideLoader, messageError, dialogConfirm } =
|
||||||
|
useCounterMixin();
|
||||||
|
|
||||||
|
const step = ref<number>(2);
|
||||||
|
const isStatus = ref<boolean>(false); //สถานะของคำสั่ง
|
||||||
|
const signature = ref<string>(""); //วิธีการลงนาม
|
||||||
|
const isSignature = ref<boolean>(false); //การลงนาม
|
||||||
|
|
||||||
|
function onConfirmSignature() {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
() => {
|
||||||
|
isSignature.value = true;
|
||||||
|
},
|
||||||
|
"ยืนยันวิธีลงนาม",
|
||||||
|
"เมื่อยืนยันวิธีลงนามแล้วจะไม่สามารถเปลี่ยนวิธีการได้ คุณต้องการยืนยันใช่หรือไม่?"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-card-section>
|
||||||
|
<div class="col-12 q-col-gutter-md">
|
||||||
|
<!-- สถานะของคำสั่ง -->
|
||||||
|
<div class="col-12">
|
||||||
|
<q-card bordered>
|
||||||
|
<div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
|
||||||
|
สถานะของคำสั่ง <spen v-if="isStatus" class="text-red"> (ลบ) </spen>
|
||||||
|
</div>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<div class="col-12 q-pa-md">
|
||||||
|
<q-stepper
|
||||||
|
v-model="step"
|
||||||
|
color="primary"
|
||||||
|
animated
|
||||||
|
header-class="bg-grey-1"
|
||||||
|
class="step"
|
||||||
|
bordered
|
||||||
|
:active-color="isStatus ? 'grey-6' : 'primary'"
|
||||||
|
:done-color="isStatus ? 'grey-6' : 'primary'"
|
||||||
|
>
|
||||||
|
<q-step
|
||||||
|
:name="1"
|
||||||
|
title="แบบร่าง"
|
||||||
|
prefix="1"
|
||||||
|
:done="step > 1"
|
||||||
|
:header-nav="step > 1"
|
||||||
|
/>
|
||||||
|
<q-step
|
||||||
|
:name="2"
|
||||||
|
title="รอผู้มีอำนาจลงนามอนุมัติ"
|
||||||
|
prefix="2"
|
||||||
|
:done="step > 2"
|
||||||
|
:header-nav="step > 2"
|
||||||
|
/>
|
||||||
|
<q-step
|
||||||
|
:name="3"
|
||||||
|
title="รอออกคำสั่ง"
|
||||||
|
prefix="3"
|
||||||
|
:done="step > 3"
|
||||||
|
:header-nav="step > 3"
|
||||||
|
/>
|
||||||
|
<q-step
|
||||||
|
:name="4"
|
||||||
|
title="ออกคำสั่งเสร็จสิ้น"
|
||||||
|
prefix="4"
|
||||||
|
:done="step > 4"
|
||||||
|
:header-nav="step > 4"
|
||||||
|
/>
|
||||||
|
</q-stepper>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- เลือกวิธีการลงนาม -->
|
||||||
|
<div class="col-12">
|
||||||
|
<q-card bordered class="col-12">
|
||||||
|
<div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
|
||||||
|
เลือกวิธีการลงนาม
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-list bordered separator>
|
||||||
|
<q-item tag="label" v-ripple>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<q-radio
|
||||||
|
v-model="signature"
|
||||||
|
val="Live"
|
||||||
|
color="primary"
|
||||||
|
:disable="isSignature || isStatus"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label>เซ็นสด</q-item-label>
|
||||||
|
<q-item-label caption
|
||||||
|
>ดาวน์โหลดเอกสารเป็นไฟล์ word หรือ pdf นำไป Print
|
||||||
|
แล้วเสนอผู้มีอำนาจลงนาม
|
||||||
|
จากนั้นสแกนเอกสารและอัปโหลดกลับเข้าสู่ระบบ
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
|
||||||
|
<q-item tag="label" v-ripple>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<q-radio
|
||||||
|
v-model="signature"
|
||||||
|
val="Digital"
|
||||||
|
color="primary"
|
||||||
|
:disable="isSignature || isStatus"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label>Digital Signature</q-item-label>
|
||||||
|
<q-item-label caption
|
||||||
|
>เสนอผู้มีอำนาจลงนานด้วยกระบวนการ Digital Signature
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
|
||||||
|
<div class="row q-pa-sm" v-if="!isSignature">
|
||||||
|
<q-btn
|
||||||
|
label="ยืนยันวิธีการลงนาม"
|
||||||
|
type="submit"
|
||||||
|
:color="signature === '' ? 'grey-5' : 'primary'"
|
||||||
|
:disable="signature === ''"
|
||||||
|
@click.prevent="onConfirmSignature"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span class="q-py-sm q-px-md text-red">
|
||||||
|
*เมื่อยืนยันวิธีลงนามแล้วจะไม่สามารถเปลี่ยนวิธีการได้</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- กรณีลงนามเลือกเซ็นสด -->
|
||||||
|
<div class="col-12" v-if="signature === 'Live' && isSignature">
|
||||||
|
<LiveView />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- กรณี Digital Signature -->
|
||||||
|
<div
|
||||||
|
class="col-12"
|
||||||
|
v-else-if="signature === 'Digital' && isSignature"
|
||||||
|
>
|
||||||
|
<DigitalView />
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.q-stepper {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.q-stepper--horizontal .q-stepper__step-inner {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step .q-stepper__header--standard-labels .q-stepper__tab {
|
||||||
|
min-height: 60px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
504
src/modules/18_command/components/Step/View0_Digital.vue
Normal file
504
src/modules/18_command/components/Step/View0_Digital.vue
Normal file
|
|
@ -0,0 +1,504 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
import type { DataOption } from "@/modules/18_command/interface/index/Main";
|
||||||
|
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const { dialogConfirm, dialogMessageNotify } = useCounterMixin();
|
||||||
|
|
||||||
|
const step = ref<number>(4); //ขั้นตอนการลงนาม
|
||||||
|
|
||||||
|
//แบบร่าง
|
||||||
|
const isDraft = ref<boolean>(false); //ทำแบบร่างเสร็จสิ้น
|
||||||
|
|
||||||
|
// แบบร่าง
|
||||||
|
const isCheckDraft = ref<boolean>(true); //เช็คทำแบบร่างเสร็จสิ้น
|
||||||
|
const isAttachment = ref<boolean>(true); //เช็คบัญชีแนบท้าย
|
||||||
|
const fileUploadOrder = ref<any>(null); //ไฟล์คำสั่ง
|
||||||
|
const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
|
||||||
|
const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
|
||||||
|
const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
|
||||||
|
const orderNo = ref<string>(""); //เลขที่คำสั่ง
|
||||||
|
const affectDate = ref<Date | null>(null); //วันที่ลงนาม
|
||||||
|
const excecuteDate = ref<Date | null>(null); //วันที่คำสั่งมีผล
|
||||||
|
const modalSelect = ref<boolean>(false); //popup เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
|
||||||
|
const typeFilter = ref<string>("firstname");
|
||||||
|
const search = ref<string>("");
|
||||||
|
const typeFilterOp = ref<DataOption[]>([
|
||||||
|
{ id: "citizenId", name: "เลขประจำตัวประชาชน" },
|
||||||
|
{ id: "firstname", name: "ชื่อ" },
|
||||||
|
{ id: "lastname", name: "นามสกุล" },
|
||||||
|
]);
|
||||||
|
const rows = ref<any[]>([
|
||||||
|
{
|
||||||
|
citizenId: "6796519798790",
|
||||||
|
firstName: "ว่าที่ร้อยตรีวรรนิมมามานา วงศ์วโรทัย",
|
||||||
|
},
|
||||||
|
]); //รายชื่อผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
|
||||||
|
const selected = ref<any[]>([]); //เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "citizenId",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขประจำตัวประชาชน",
|
||||||
|
sortable: true,
|
||||||
|
field: "citizenId",
|
||||||
|
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: "position",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "position",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
//รอผู้มีอำนาจลงนามอนุมัติ
|
||||||
|
const rowsAuthority = ref<any[]>([
|
||||||
|
{
|
||||||
|
fullName: "ว่าที่ร้อยตรีวรรนิมมามานา วงศ์วโรทัย",
|
||||||
|
comment: "ความคิดเห็น",
|
||||||
|
position: "หัวหน้าสำนัก",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fullName: "นายศรัณย์ ศิลาดี",
|
||||||
|
comment: "",
|
||||||
|
position: "ผู้อำนวนการ",
|
||||||
|
},
|
||||||
|
]); //รายชื่อผู้อำนาจลงนามอนุมัติ
|
||||||
|
const modalComment = ref<boolean>(false); //popup แสดงความเห็น
|
||||||
|
const reason = ref<string>("");
|
||||||
|
|
||||||
|
//รอออกคำสั่ง
|
||||||
|
const isCheckOrder = ref<boolean>(true); //เช็ครอออกคำสั่ง
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
|
||||||
|
*/
|
||||||
|
function onConfirmDraft() {
|
||||||
|
if (
|
||||||
|
orderNo.value !== "" ||
|
||||||
|
affectDate.value !== null ||
|
||||||
|
excecuteDate.value !== null
|
||||||
|
) {
|
||||||
|
} else {
|
||||||
|
dialogMessageNotify(
|
||||||
|
$q,
|
||||||
|
"ไม่สามารถดำเนินการต่อได้ กรุณากรอกเลขที่คำสั่ง วันที่ลงนาม และวันที่คำสั่งมีผลให้ครบ"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSearchData() {}
|
||||||
|
|
||||||
|
function onConfirmSendToCommander() {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
() => {
|
||||||
|
step.value++;
|
||||||
|
isCheckDraft.value = true;
|
||||||
|
onCloseDialog();
|
||||||
|
},
|
||||||
|
"ยืนยันการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ",
|
||||||
|
"คุณต้องการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจใช่หรือไม่?"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSelect() {
|
||||||
|
search.value = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
function onComment() {
|
||||||
|
modalComment.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSubmitComment() {
|
||||||
|
dialogConfirm($q, () => {
|
||||||
|
rowsAuthority.value[1].comment = reason.value;
|
||||||
|
onCloseDialog();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function onCloseDialog() {
|
||||||
|
modalSelect.value = false;
|
||||||
|
modalComment.value = false;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="q-px-lg q-py-md">
|
||||||
|
<q-timeline color="blue-5">
|
||||||
|
<!-- แบบร่าง -->
|
||||||
|
<q-timeline-entry
|
||||||
|
title="แบบร่าง"
|
||||||
|
:icon="step === 1 ? 'mdi-pencil' : step > 1 ? 'done' : ''"
|
||||||
|
>
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<div :class="isAttachment ? 'col-12' : 'col-6'">
|
||||||
|
<fieldset class="border q-px-lg q-py-sm">
|
||||||
|
<legend class="text-header q-px-sm">
|
||||||
|
อัปโหลดเอกสารสแกนกลับเข้าสู่ระบบ
|
||||||
|
</legend>
|
||||||
|
<div class="row q-col-gutter-md q-mb-md">
|
||||||
|
<!-- คำสั่ง -->
|
||||||
|
<div :class="isAttachment ? 'col-6' : 'col-12'">
|
||||||
|
<label class="text-file">คำสั่ง</label>
|
||||||
|
<div class="text-right" v-if="fileOrder">
|
||||||
|
<q-btn flat dense color="primary" icon="mdi-eye" rounded>
|
||||||
|
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<!-- :href="OrderPDFUpload" -->
|
||||||
|
<q-btn
|
||||||
|
rounded
|
||||||
|
type="a"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color="red"
|
||||||
|
icon="mdi-download"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
<q-file
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
v-model="fileUploadOrder"
|
||||||
|
label="เลือกไฟล์คำสั่ง"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[(val) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']"
|
||||||
|
accept=".pdf"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- เอกสารแนบท้าย -->
|
||||||
|
<div v-if="isAttachment" class="col-6">
|
||||||
|
<label class="text-file">เอกสารแนบท้าย</label>
|
||||||
|
<div class="text-right" v-if="fileTailer">
|
||||||
|
<q-btn flat dense color="primary" icon="mdi-eye" rounded>
|
||||||
|
<q-tooltip>ดูเอกสารแนบท้าย</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<!-- :href="TailerPDFUpload" -->
|
||||||
|
<q-btn
|
||||||
|
type="a"
|
||||||
|
rounded
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color="red"
|
||||||
|
icon="mdi-download"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-file
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
v-model="fileUploadTailer"
|
||||||
|
label="เลือกไฟล์เอกสารแนบท้าย"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
|
||||||
|
accept=".pdf"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12" v-if="!isCheckDraft">
|
||||||
|
<q-btn
|
||||||
|
@click.prevent="onConfirmDraft"
|
||||||
|
label="เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง"
|
||||||
|
color="public"
|
||||||
|
:disable="fileOrder === null || fileTailer === null"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-timeline-entry>
|
||||||
|
|
||||||
|
<!-- รอผู้มีอำนาจลงนามอนุมัติ -->
|
||||||
|
<q-timeline-entry
|
||||||
|
title="รอผู้มีอำนาจลงนามอนุมัติ"
|
||||||
|
:icon="step === 2 ? 'mdi-pencil' : step > 2 ? 'done' : ''"
|
||||||
|
: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.fullName }}
|
||||||
|
{{ `(${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 === ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<q-item-label caption>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color="info"
|
||||||
|
icon="info"
|
||||||
|
round
|
||||||
|
@click.prevent="onComment"
|
||||||
|
>
|
||||||
|
<q-tooltip>แสดงความเห็น </q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="col-12"
|
||||||
|
v-if="rowsAuthority[rowsAuthority.length - 1].comment !== ''"
|
||||||
|
>
|
||||||
|
<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' : ''"
|
||||||
|
: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' : ''"
|
||||||
|
:color="step < 4 ? 'grey-4' : ''"
|
||||||
|
>
|
||||||
|
<div class="row q-col-gutter-sm" v-if="isCheckOrder">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง -->
|
||||||
|
<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-6 col-md-3">
|
||||||
|
<q-select
|
||||||
|
label="ค้นหาจาก"
|
||||||
|
v-model="typeFilter"
|
||||||
|
:options="typeFilterOp"
|
||||||
|
emit-value
|
||||||
|
dense
|
||||||
|
@update:model-value="updateSelect"
|
||||||
|
map-options
|
||||||
|
outlined
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
v-model="search"
|
||||||
|
outlined
|
||||||
|
clearable
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
label="คำค้น"
|
||||||
|
@clear="search = ''"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
<d-table
|
||||||
|
flat
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
row-key="id"
|
||||||
|
dense
|
||||||
|
selection="single"
|
||||||
|
v-model:selected="selected"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</d-table>
|
||||||
|
</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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.border {
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #e9eaec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-header {
|
||||||
|
color: #34373c;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
249
src/modules/18_command/components/Step/View0_Live.vue
Normal file
249
src/modules/18_command/components/Step/View0_Live.vue
Normal file
|
|
@ -0,0 +1,249 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const { dialogConfirm, dialogMessageNotify } = useCounterMixin();
|
||||||
|
|
||||||
|
const step = ref<number>(1); //ขั้นตอนการลงนาม
|
||||||
|
|
||||||
|
//แบบร่าง
|
||||||
|
const isDraft = ref<boolean>(false); //ทำแบบร่างเสร็จสิ้น
|
||||||
|
const isCheckDraft = ref<boolean>(false); //เช็คทำแบบร่างเสร็จสิ้น
|
||||||
|
|
||||||
|
// รอผู้มีอำนาจลงนามอนุมัติ
|
||||||
|
const isAuthority = ref<boolean>(false); //ผู้มีอำนาจลงนามอนุมัติแล้ว
|
||||||
|
const isCheckAuthority = ref<boolean>(false); //เช็ครอผู้มีอำนาจลงนามอนุมัติ
|
||||||
|
const isAttachment = ref<boolean>(true); //เช็คบัญชีแนบท้าย
|
||||||
|
const fileUploadOrder = ref<any>(null); //ไฟล์คำสั่ง
|
||||||
|
const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
|
||||||
|
const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
|
||||||
|
const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
|
||||||
|
const orderNo = ref<string>(""); //เลขที่คำสั่ง
|
||||||
|
const affectDate = ref<Date | null>(null); //วันที่ลงนาม
|
||||||
|
const excecuteDate = ref<Date | null>(null); //วันที่คำสั่งมีผล
|
||||||
|
|
||||||
|
//รอออกคำสั่ง
|
||||||
|
const isCheckOrder = ref<boolean>(false); //เช็ครอออกคำสั่ง
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
|
||||||
|
*/
|
||||||
|
function onConfirmDraft() {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
() => {
|
||||||
|
isCheckDraft.value = true;
|
||||||
|
step.value++;
|
||||||
|
},
|
||||||
|
"ยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ",
|
||||||
|
"คุณต้องการยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติใช่หรือไม่?"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันยืนยันการส่งออกคำสั่ง
|
||||||
|
*/
|
||||||
|
function onConfirmOrder() {
|
||||||
|
if (
|
||||||
|
orderNo.value !== "" ||
|
||||||
|
affectDate.value !== null ||
|
||||||
|
excecuteDate.value !== null
|
||||||
|
) {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
() => {
|
||||||
|
isCheckAuthority.value = true;
|
||||||
|
step.value++;
|
||||||
|
},
|
||||||
|
"ยืนยันการส่งออกคำสั่ง",
|
||||||
|
"คุณต้องการยืนยันการส่งออกคำสั่งใช่หรือไม่?"
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
dialogMessageNotify(
|
||||||
|
$q,
|
||||||
|
"ไม่สามารถดำเนินการต่อได้ กรุณากรอกเลขที่คำสั่ง วันที่ลงนาม และวันที่คำสั่งมีผลให้ครบ"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="q-px-lg q-py-md">
|
||||||
|
<q-timeline color="blue-5">
|
||||||
|
<!-- แบบร่าง -->
|
||||||
|
<q-timeline-entry
|
||||||
|
title="แบบร่าง"
|
||||||
|
:icon="step === 1 ? 'mdi-pencil' : step > 1 ? 'done' : ''"
|
||||||
|
>
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<div class="col-12">
|
||||||
|
<q-checkbox
|
||||||
|
v-model="isDraft"
|
||||||
|
label="ทำแบบร่างเสร็จสิ้น: Print เอกสารเพื่อส่งเสนอผู้มีอำนาจลงนาม"
|
||||||
|
:disable="isCheckDraft"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12" v-if="!isCheckDraft">
|
||||||
|
<q-btn
|
||||||
|
@click.prevent="onConfirmDraft"
|
||||||
|
label="ส่งให้ผู้มีอำนาจลงนามอนุมัติ"
|
||||||
|
color="public"
|
||||||
|
:disable="!isDraft"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-timeline-entry>
|
||||||
|
|
||||||
|
<!-- รอผู้มีอำนาจลงนามอนุมัติ -->
|
||||||
|
<q-timeline-entry
|
||||||
|
title="รอผู้มีอำนาจลงนามอนุมัติ"
|
||||||
|
:icon="step === 2 ? 'mdi-pencil' : step > 2 ? 'done' : ''"
|
||||||
|
:color="step < 2 ? 'grey-4' : ''"
|
||||||
|
>
|
||||||
|
<div class="row q-col-gutter-sm" v-if="isCheckDraft">
|
||||||
|
<div class="col-12">
|
||||||
|
<q-checkbox
|
||||||
|
v-model="isAuthority"
|
||||||
|
label="ผู้มีอำนาจลงนามอนุมัติแล้ว"
|
||||||
|
:disable="step > 2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
:class="isAttachment ? 'col-12' : 'col-6'"
|
||||||
|
style="padding-left: 50px"
|
||||||
|
v-if="isAuthority"
|
||||||
|
>
|
||||||
|
<fieldset class="border q-px-lg q-py-sm">
|
||||||
|
<legend class="text-header q-px-sm">
|
||||||
|
อัปโหลดเอกสารสแกนกลับเข้าสู่ระบบ
|
||||||
|
</legend>
|
||||||
|
<div class="row q-col-gutter-md q-mb-md">
|
||||||
|
<!-- คำสั่ง -->
|
||||||
|
<div :class="isAttachment ? 'col-6' : 'col-12'">
|
||||||
|
<label class="text-file">คำสั่ง</label>
|
||||||
|
<div class="text-right" v-if="fileOrder">
|
||||||
|
<q-btn flat dense color="primary" icon="mdi-eye" rounded>
|
||||||
|
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<!-- :href="OrderPDFUpload" -->
|
||||||
|
<q-btn
|
||||||
|
rounded
|
||||||
|
type="a"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color="red"
|
||||||
|
icon="mdi-download"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
<q-file
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
v-model="fileUploadOrder"
|
||||||
|
label="เลือกไฟล์คำสั่ง"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[(val) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']"
|
||||||
|
accept=".pdf"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- เอกสารแนบท้าย -->
|
||||||
|
<div v-if="isAttachment" class="col-6">
|
||||||
|
<label class="text-file">เอกสารแนบท้าย</label>
|
||||||
|
<div class="text-right" v-if="fileTailer">
|
||||||
|
<q-btn flat dense color="primary" icon="mdi-eye" rounded>
|
||||||
|
<q-tooltip>ดูเอกสารแนบท้าย</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<!-- :href="TailerPDFUpload" -->
|
||||||
|
<q-btn
|
||||||
|
type="a"
|
||||||
|
rounded
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color="red"
|
||||||
|
icon="mdi-download"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-file
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
v-model="fileUploadTailer"
|
||||||
|
label="เลือกไฟล์เอกสารแนบท้าย"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
|
||||||
|
accept=".pdf"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12" v-if="!isCheckAuthority">
|
||||||
|
<q-btn
|
||||||
|
@click.prevent="onConfirmOrder"
|
||||||
|
label="ยืนยันออกคำสั่ง"
|
||||||
|
color="public"
|
||||||
|
:disable="
|
||||||
|
!isAuthority || fileOrder === null || fileTailer === null
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-timeline-entry>
|
||||||
|
|
||||||
|
<!-- รอออกคำสั่ง -->
|
||||||
|
<q-timeline-entry
|
||||||
|
title="รอออกคำสั่ง"
|
||||||
|
:icon="step === 3 ? 'mdi-pencil' : step > 3 ? 'done' : ''"
|
||||||
|
: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' : ''"
|
||||||
|
:color="step < 4 ? 'grey-4' : ''"
|
||||||
|
>
|
||||||
|
<div class="row q-col-gutter-sm" v-if="isCheckOrder">
|
||||||
|
<div class="col-12">รอออกคำสั่ง</div>
|
||||||
|
</div>
|
||||||
|
</q-timeline-entry>
|
||||||
|
</q-timeline>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.border {
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #e9eaec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-header {
|
||||||
|
color: #34373c;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue