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