hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

step 4 ออกคำสั่ง

Browse source
This commit is contained in:
Warunee Tamkoo 2023-08-26 18:37:58 +07:00
parent 27340c9ca8
commit e8a4294ea1
8 changed files with 236 additions and 769 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/api/07_insignia/api.insignia.ts
View file

@ -49,4 +49,10 @@ export default {
insigniaManageOrg: (insigniaManageId: string) => `${insignia}/manage/org/${insigniaManageId}`,
insigniaManageOrgAdd: () => `${insignia}/manage/org`,
insigniaManageOrgDashboard: (insigniaManageId: string) => `${insignia}/manage/org/dashboard/${insigniaManageId}`,
// ยืม-คืนเครื่องราชฯ
insigniaManageBorrow: () => `${insignia}/manage/borrow`,
insigniaManageBorrowReturn: (insigniaManageProfileId: string) => `${insignia}/manage/return/${insigniaManageProfileId}`,
insigniaManageBorrowList: (year: number, insigniaTypeId: string) => `${insignia}/borrow/${year}/${insigniaTypeId}`,
insigniaManageBorrowById: (insigniaManageProfileId: string) => `${insignia}/manage/borrow/${insigniaManageProfileId}`,
};

8
src/api/reports/api.report.ts
View file

@ -6,10 +6,10 @@ const reportOrder = `${env.API_REPORT2_URI}/report/order`;
const reportRetire = `${env.API_REPORT2_URI}/report/retire`;
export default {
reportOrderCover: (fileType: string, id: string) =>
`${reportOrder}/cover/${fileType}/${id}`,
reportOrderAttachment: (fileType: string, id: string) =>
`${reportOrder}/attachment/${fileType}/${id}`,
reportOrderCover: (fileType: string, id: string, commandCode: string) =>
`${reportOrder}/${commandCode}/cover/${fileType}/${id}`,
reportOrderAttachment: (fileType: string, id: string, commandCode: string) =>
`${reportOrder}/${commandCode}/attachment/${fileType}/${id}`,
reportRetireList: (fileType: string, id: string) =>
`${reportRetire}/${fileType}/${id}`,

16
src/modules/07_insignia/components/5_Borrow/Main.vue
View file

@ -222,20 +222,8 @@ const columns = ref<QTableProps["columns"]>([
field: "",
},
]);
const rows = ref<any>([
// {
// no: "1",
// status: "รอบันทึกข้อมูล",
// name: "นางสาวรัชภรณ์ ภักดี",
// type: "ทั้งหมด",
// page: "8",
// number: "11",
// vatnumber: "5647833",
// datepay: null,
// typepay: null,
// address: "เลขที่ 2/3 หมู่ที่ 14 ถนนบ...",
// },
]);
const rows = ref<any>([]);
watch(tab, () => {
if (tab.value !== "doc") {
fecthlistInsignia();

173
src/modules/10_order/components/Add.vue
View file

@ -1,173 +0,0 @@
<!-- page:detail page รายการสอบทั้งหมด -->
<template>
<q-toolbar class="q-pa-sm text-center">
<q-toolbar-title class="text-dark">
{{ tittle }}
{{ `ครั้งที่${round}/${yearly == null ? "" : yearly + 543}` }}
</q-toolbar-title>
</q-toolbar>
<q-stepper
v-model="step"
ref="stepper"
alternative-labels
header-nav
animated
done-icon="check"
:active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye'"
>
<q-step
:done="step > 2"
:disable="stepRaw < 2"
:name="2"
title="รายละเอียดการออกคำสั่ง"
:icon="
stepRaw >= 2
? stepRaw == 2
? 'mdi-pencil'
: 'mdi-check-bold'
: 'mdi-account'
"
>
<q-card bordered class="q-pa-lg">
<q-card-actions
v-if="status === 'rejectRegister'"
class="q-pa-md q-mb-md text-left row bg-red-2"
>
<div class="col-12 text-red-12">
<li>{{ rejectMessage }}</li>
</div>
</q-card-actions>
</q-card>
</q-step>
<q-step
:done="step > 3"
:disable="stepRaw < 3"
:name="3"
title="เลือกรายชื่อ"
:icon="
stepRaw >= 3
? stepRaw == 3
? 'mdi-pencil'
: 'mdi-check-bold'
: 'mdi-receipt'
"
v-if="stepPayment"
>
<q-card bordered class="q-pa-lg"> </q-card>
</q-step>
<q-step
:done="step > 4"
:disable="stepRaw < 4"
:name="4"
title="เลือก"
:icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
>
<q-card bordered class="q-pa-lg"> </q-card>
</q-step>
<q-step
:done="step > 5"
:disable="stepRaw < 5"
:name="5"
title="รายละเอียดคำสั่งและแนบท้าย"
:icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
>
<q-card bordered class="q-pa-lg"> </q-card>
</q-step>
</q-stepper>
<q-dialog :model-value="modalConsend" persistent>
<q-card :style="$q.screen.gt.xs ? 'min-width: 55vw' : 'min-width: 80vw'">
<Consendform :ok="consendOk" />
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const mixin = useCounterMixin();
const { modalError, messageError, showLoader, hideLoader } = mixin;
const step = ref<number>(1);
const stepRaw = ref<number>(1);
const tittle = ref<string>("");
const route = useRoute();
const status = ref<string>("register");
const modalConsend = ref<boolean>(false);
const stepPayment = ref<boolean>(true);
const rejectMessage = ref<string>("");
const round = ref<number | null>(null);
const yearly = ref<number | null>(null);
onMounted(async () => {});
const consenClose = () => {
modalConsend.value = false;
};
const consendOk = () => {
modalConsend.value = false;
};
</script>
<style>
.q-stepper {
box-shadow: none;
background: transparent !important;
}
.q-stepper--horizontal .q-stepper__step-inner {
padding: 0px;
}
.q-stepper__header--alternative-labels .q-stepper__tab {
min-height: 0px;
padding: 1.5% 0% 1.5% 0%;
}
.q-stepper__header--border {
border-bottom: none;
}
.q-stepper__dot {
min-width: 35px;
height: 35px;
width: 35px;
font-size: 20px;
}
.q-stepper__title {
width: 100px;
}
.q-stepper__tab--done .q-stepper__title {
color: #62a00b;
}
.q-stepper__tab--done .q-stepper__dot {
color: #95d710;
border: 1px solid #62a00b;
}
.q-stepper__tab--active .q-stepper__title {
color: #318bae;
}
.q-stepper__tab--active .q-stepper__dot {
color: #1cb4ea;
border: 1px solid #218ab393;
}
.q-stepper__tab--disabled .q-stepper__title {
color: #92b4c8;
}
.q-stepper__tab--disabled .q-stepper__dot {
background: #def2fc !important;
border: 1px solid #92b4c876;
}
.q-stepper__tab--disabled .q-stepper__dot .q-icon {
color: #7692a3d0;
}
.q-stepper--horizontal .q-stepper__line:before,
.q-stepper--horizontal .q-stepper__line:after {
background: #92b4c847;
}
</style>

45
src/modules/10_order/components/Detail.vue
View file

@ -1,24 +1,3 @@
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
@click="router.go(-1), destroyLocalStorage()" />
ออกคำสั่ง
</div>
<q-card flat bordered class="col-12 q-my-sm q-mt-sm">
<q-stepper v-model="step" ref="stepper" color="primary" animated class="step" header-class="bg-grey-1">
<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" />
<template v-slot:message>
<step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
<step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
<step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
<step04 v-if="step === 4" :next="nextStep" :previous="previousStep" />
</template>
</q-stepper>
</q-card>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, defineAsyncComponent, onMounted, onUnmounted } from "vue";
@ -28,7 +7,6 @@ import http from "@/plugins/http";
import config from "@/app.config";
const route = useRoute();
const orderId_params = route.params.orderid;
const step01 = defineAsyncComponent(
@ -109,6 +87,29 @@ onMounted(() => {
}
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
@click="router.push('/order'), destroyLocalStorage()" />
ออกคำสั่ง
</div>
<q-card flat bordered class="col-12 q-my-sm q-mt-sm">
<q-stepper v-model="step" ref="stepper" color="primary" animated class="step" header-class="bg-grey-1">
<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" />
<template v-slot:message>
<step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
<step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
<step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
<step04 v-if="step === 4" :next="nextStep" :previous="previousStep" />
</template>
</q-stepper>
</q-card>
</template>
<style>
.q-stepper--horizontal .q-stepper__step-inner {
padding: 0px;

305
src/modules/10_order/components/Main.vue
View file

@ -1,113 +1,3 @@
<template>
<div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div>
<div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="fiscalyear" label="ปีงบประมาณ" dense emit-value
map-options :options="fiscalyearOP" option-value="id" option-label="name" lazy-rules hide-bottom-space
:readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
@update:model-value="searchFilterTable" />
<div>
<q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickAdd">
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
<!-- <q-menu>
<q-list style="min-width: 100px">
<q-item clickable @click="clickAdd">
<q-item-section>ลายเซ็นชื่อ (ออฟไลน์)</q-item-section>
</q-item>
<q-item clickable v-close-popup disable>
<q-item-section
>ลายเซ็นอิเล็กทรอนิกส์ (ออนไลน์)</q-item-section
>
</q-item>
</q-list>
</q-menu> -->
</q-btn>
</div>
<q-space />
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
debounce="300" placeholder="ค้นหา">
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
</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="col-xs-12 col-sm-3 col-md-2" />
</div>
<div class="col-12">
<q-card bordered class="col-12 filter-card q-pa-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderType" label="ประเภท" dense emit-value
map-options option-label="name" :options="OrderTypeOption" option-value="name" lazy-rules
hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
@update:model-value="searchFilterTable" />
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderStatus" label="สถานะ" dense emit-value
map-options option-label="name" :options="OrderStatusOption" option-value="name" lazy-rules
hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
@update:model-value="searchFilterTable" />
</div>
</q-card>
</div>
<div class="col-12">
<q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="Order" flat bordered
:paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
:pagination-label="paginationLabel" v-model:pagination="pagination">
<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">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer"
@click="redirectToPage(props.row.orderId, props.row.OrderStatus)">
<q-td key="Order" :props="props">
{{ props.row.Order }}
</q-td>
<q-td key="OrderNum" :props="props">
{{ props.row.OrderNum }}
</q-td>
<q-td key="OrderType" :props="props">
{{ props.row.OrderType }}
</q-td>
<q-td key="OrderDate" :props="props">
{{ props.row.OrderDate }}
</q-td>
<q-td key="OrderBy" :props="props">
{{ props.row.OrderBy }}
</q-td>
<q-td key="Signer" :props="props">
{{ props.row.Signer }}
</q-td>
<q-td key="OrderStatus" :props="props">
{{ props.row.OrderStatus }}
</q-td>
<q-td auto-width>
<q-btn dense size="12px" flat round color="red" @click.stop="clickDelete(props.row.orderId)"
icon="mdi-delete">
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
:max-pages="5" size="sm" boundary-links direction-links></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, useAttrs, computed } from "vue";
import type { QTableProps } from "quasar";
@ -240,18 +130,7 @@ const columns = ref<QTableProps["columns"]>([
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<FormOrderPlacementMainData[]>([
// {
// Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
// OrderNum: "1/2565",
// fiscalYear: 2565,
// OrderDate: "30 พ.ค. 2565",
// OrderBy: "สำนักงาน กทม.",
// Signer: "นาม สมคิด ยอดใจ ",
// OrderStatus: "จัดทำร่างคำสั่ง",
// OrderType: "คำสั่งย้าย",
// },
]);
const rows = ref<FormOrderPlacementMainData[]>([]);
let OriginalData = ref<FormOrderPlacementMainData[]>([]);
let UpdataData = ref<FormOrderPlacementMainData[]>([]);
@ -272,7 +151,7 @@ const OriginalDataFetch = async () => {
rows.value = res.data.result.map((e: any) => ({
orderId: e.orderId,
Order: e.orderName,
OrderNum: e.orderNo,
OrderNum: `${e.orderNo}/${Number(e.fiscalYear) + 543}`,
fiscalYear: Number(e.fiscalYear),
OrderDate: date2Thai(e.orderDate),
OrderBy: e.orderBy,
@ -334,6 +213,10 @@ const deleteData = async (id: string) => {
.finally(async () => {
hideLoader();
await OriginalDataFetch();
fiscalYearFilter();
searchFilterTable();
OrderStatusFilter();
OrderTypeFilter();
});
};
@ -358,38 +241,7 @@ const fiscalYearFilter = async () => {
// console.log(res);
const response = res.data.result;
fiscalyearOP.push(...response);
// const maxNumber = fiscalyearOP.reduce((max: any, e: any) => {
// return e.id > max ? e.id : max;
// }, "");
// fiscalyear.value = maxNumber;
});
// API
// await http
// .get(config.API.// ตัวอย่าง)
// .then((res: any) => {
// DataStore.DataMainYearSet(rows.value);
// fiscalyearOP.value = DataStore.DataMainYearGet;
// })
// .catch((e: any) => {
// messageError($q, e);
// })
// .finally(async () => {
// });
// for (let data of OriginalData.value) {
// console.log(OriginalData.value);
// const year = data.fiscalYear;
// console.log(year);
// if (fiscalyear.value === null || year > fiscalyear.value) {
// fiscalyear.value = year;
// }
// if (!addedfiscalYearValues.includes(year)) {
// fiscalyearOP.push({ id: year, name: year.toString() });
// addedfiscalYearValues.push(year);
// }
// }
};
const OrderType = ref<string>("");
@ -406,41 +258,6 @@ const OrderTypeFilter = async () => {
.catch((e) => {
messageError($q, e);
});
// API
// await http
// .get(config.API.// ตัวอย่าง)
// .then((res: any) => {
// DataStore.DataMainYearSet(rows.value);
// fiscalyearOP.value = DataStore.DataMainYearGet;
// })
// .catch((e: any) => {
// messageError($q, e);
// })
// .finally(async () => {
// });
// for (let data of OriginalData.value) {
// const OrderTypeValue = data.OrderType;
// console.log(OrderTypeValue);
// if (OrderTypeValue === null || OrderType > OrderTypeValue) {
// OrderTypeValue = OrderType;
// }
// if (!addedOrderTypeValues.includes(OrderTypeValue)) {
// OrderTypeOption.push({
// // id: OrderTypeValue ?? 0,
// id: OrderTypeOption.length,
// name: OrderTypeValue,
// });
// addedOrderTypeValues.push(OrderTypeValue);
// }
// if (!addedOrderTypeValues.includes(OrderTypeValue)) {
// OrderTypeOption.push({
// id: OrderTypeValue,
// name: OrderTypeValue.toString(),
// });
// addedOrderTypeValues.push(OrderTypeValue);
// }
// }
};
const OrderStatus = ref<string>("");
const OrderStatusText = ref<FormOrderPlacementMainData[]>(
@ -451,18 +268,6 @@ const OrderStatusOption = reactive<DataOption1[]>([
]);
const addedOrderStatusValues: string[] = [];
const OrderStatusFilter = async () => {
// API
// await http
// .get(config.API.// ตัวอย่าง)
// .then((res: any) => {
// DataStore.DataMainYearSet(rows.value);
// fiscalyearOP.value = DataStore.DataMainYearGet;
// })
// .catch((e: any) => {
// messageError($q, e);
// })
// .finally(async () => {
// });
for (let data of OriginalData.value) {
const OrderStatusValue = data.OrderStatus;
@ -525,6 +330,104 @@ const paginationLabel = (start: string, end: string, total: string) => {
};
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div>
<div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="fiscalyear" label="ปีงบประมาณ" dense emit-value
map-options :options="fiscalyearOP" option-value="id" option-label="name" lazy-rules hide-bottom-space
:readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
@update:model-value="searchFilterTable" />
<div>
<q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickAdd">
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
debounce="300" placeholder="ค้นหา">
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
</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="col-xs-12 col-sm-3 col-md-2" />
</div>
<div class="col-12">
<q-card bordered class="col-12 filter-card q-pa-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderType" label="ประเภท" dense emit-value
map-options option-label="name" :options="OrderTypeOption" option-value="name" lazy-rules
hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
@update:model-value="searchFilterTable" />
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderStatus" label="สถานะ" dense emit-value
map-options option-label="name" :options="OrderStatusOption" option-value="name" lazy-rules
hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
@update:model-value="searchFilterTable" />
</div>
</q-card>
</div>
<div class="col-12">
<q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="Order" flat bordered
:paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
:pagination-label="paginationLabel" v-model:pagination="pagination">
<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">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer"
@click="redirectToPage(props.row.orderId, props.row.OrderStatus)">
<q-td key="Order" :props="props">
{{ props.row.Order }}
</q-td>
<q-td key="OrderNum" :props="props">
{{ props.row.OrderNum }}
</q-td>
<q-td key="OrderType" :props="props">
{{ props.row.OrderType }}
</q-td>
<q-td key="OrderDate" :props="props">
{{ props.row.OrderDate }}
</q-td>
<q-td key="OrderBy" :props="props">
{{ props.row.OrderBy }}
</q-td>
<q-td key="Signer" :props="props">
{{ props.row.Signer }}
</q-td>
<q-td key="OrderStatus" :props="props">
{{ props.row.OrderStatus }}
</q-td>
<q-td auto-width>
<q-btn dense size="12px" flat round color="red" @click.stop="clickDelete(props.row.orderId)"
icon="mdi-delete">
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
:max-pages="5" size="sm" boundary-links direction-links></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
</div>
</template>
<style lang="scss" scope>
.filter-card {
background-color: #f1f1f1b0;

451
src/modules/10_order/components/step/step04.vue
View file

@ -38,19 +38,14 @@ const OrderPDFUpload = ref<string>("");
const TailerPDFUpload = ref<string>("");
const orderCoverPdf = ref<string>("");
const orderCoverDocs = ref<string>("");
const orderAttachmentPdf = ref<string>("");
const orderAttachmentXlsx = ref<string>("");
const statusOrder = ref<string>();
const orderName = ref<string>("")
const orderId = ref<string>(orderId_params.toString());
onMounted(async () => {
if (orderId.value) {
fetchReportCover("pdf", orderId.value);
fetchReportCover("docx", orderId.value);
fetchReportAttachment("pdf", orderId.value);
fetchReportAttachment("xlsx", orderId.value);
fetchAttachment(orderId.value);
fecthstatusOrder(orderId.value);
getType();
@ -65,6 +60,11 @@ const getType = async () => {
const data = res.data.result;
const orderTypeCode = data.orderTypeCode;
code.value = orderTypeCode ?? "";
orderName.value = res.data.result.orderTitle
fetchReportCover("pdf", orderId.value);
fetchReportAttachment("pdf", orderId.value);
})
.catch((e) => {
messageError($q, e);
@ -77,9 +77,11 @@ const getType = async () => {
const downloadCover = async (type: string) => {
showLoader();
await http
.get(config.API.fileCover(code.value, type, orderId.value))
.get(config.API.fileCover(code.value, type, orderId.value), {
responseType: "blob",
})
.then(async (res) => {
downloadFile(res, `คำสั่ง.${type}`);
downloadFile(res, `คำสั่ง ${orderName.value}.${type}`);
})
.catch((e) => {
messageError($q, e);
@ -92,9 +94,11 @@ const downloadCover = async (type: string) => {
const downloadAttachment = async (type: string) => {
showLoader();
await http
.get(config.API.fileCover(code.value, type, orderId.value))
.get(config.API.fileAttachment(code.value, type, orderId.value), {
responseType: "blob",
})
.then(async (res) => {
downloadFile(res, `เอกสารแนบท้าย.${type}`);
downloadFile(res, `เอกสารแนบท้าย ${orderName.value}.${type}`);
})
.catch((e) => {
messageError($q, e);
@ -107,14 +111,14 @@ const downloadAttachment = async (type: string) => {
const fetchReportCover = async (type: string, orderId: string) => {
showLoader();
await http
.get(config.API.reportOrderCover(type, orderId))
.get(config.API.reportOrderCover(type, orderId, code.value), {
responseType: "blob",
})
.then(async (res) => {
if (type == "pdf") {
orderCoverPdf.value = res.data.result;
viewPDF(orderCoverPdf.value);
} else {
orderCoverDocs.value = res.data.result;
}
const blob = new Blob([res.data]);
const objectUrl = URL.createObjectURL(blob);
orderCoverPdf.value = objectUrl;
viewPDF(orderCoverPdf.value);
})
.catch((e) => {
// messageError($q, e);
@ -127,13 +131,13 @@ const fetchReportCover = async (type: string, orderId: string) => {
const fetchReportAttachment = async (type: string, orderId: string) => {
showLoader();
await http
.get(config.API.reportOrderAttachment(type, orderId))
.get(config.API.reportOrderAttachment(type, orderId, code.value), {
responseType: "blob",
})
.then(async (res) => {
if (type == "pdf") {
orderAttachmentPdf.value = res.data.result;
} else {
orderAttachmentXlsx.value = res.data.result;
}
const blob = new Blob([res.data]);
const objectUrl = URL.createObjectURL(blob);
orderAttachmentPdf.value = objectUrl;
})
.catch((e) => {
// messageError($q, e);
@ -347,50 +351,28 @@ const viewFileUpload = async (url: string) => {
<template>
<div>
<div style="min-height: 70vh">
<q-splitter
v-model="splitterModel"
style="height: 70vh"
@update:model-value="onchangePage"
>
<q-splitter v-model="splitterModel" style="height: 70vh" @update:model-value="onchangePage">
<template v-slot:before>
<div class="space">
<div @click="setTab('main')" :class="getClass(tab == 'main')">
<div class="q-pr-sm">คำสั่ง</div>
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'main'"
:color="tab !== 'main' ? 'grey' : 'add'"
>
<q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'main'"
:color="tab !== 'main' ? 'grey' : 'add'">
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item
clickable
v-close-popup
@click="downloadCover('pdf')"
>
<q-item clickable v-close-popup @click="downloadCover('pdf')">
<!-- type="a"
:href="orderCoverPdf"
target="_blank" -->
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="downloadCover('docx')"
>
<q-item clickable v-close-popup @click="downloadCover('docx')">
<!-- type="a"
:href="orderCoverDocs"
target="_blank" -->
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
@ -399,41 +381,23 @@ const viewFileUpload = async (url: string) => {
</div>
<div @click="setTab('second')" :class="getClass(tab == 'second')">
<div class="q-pr-sm">เอกสารแนบท้าย</div>
<q-btn
size="12px"
flat
dense
:color="tab !== 'second' ? 'grey' : 'add'"
icon="mdi-download"
:disable="tab !== 'second'"
>
<q-btn size="12px" flat dense :color="tab !== 'second' ? 'grey' : 'add'" icon="mdi-download"
:disable="tab !== 'second'">
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item
clickable
v-close-popup
@click="downloadAttachment('pdf')"
>
<q-item clickable v-close-popup @click="downloadAttachment('pdf')">
<!-- type="a"
:href="orderAttachmentPdf"
target="_blank" -->
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="downloadAttachment('xlsx')"
>
<q-item clickable v-close-popup @click="downloadAttachment('xlsx')">
<!-- type="a"
:href="orderAttachmentXlsx"
target="_blank" -->
<q-item-section avatar
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
<q-item-section>ไฟล์ .xls</q-item-section>
</q-item>
</q-list>
@ -441,24 +405,12 @@ const viewFileUpload = async (url: string) => {
</q-btn>
</div>
<q-space />
<q-btn
class="text-dark"
flat
dense
icon="mdi-fullscreen"
color="add"
@click="dialog = true"
/>
<q-btn class="text-dark" flat dense icon="mdi-fullscreen" color="add" @click="dialog = true" />
</div>
<q-separator style="margin-top: -1px; z-index: 1" />
<q-card bordered class="card-pdf q-ma-md q-pa-md">
<div class="justify-between items-center align-center q-pb-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -466,12 +418,7 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
@ -480,12 +427,7 @@ const viewFileUpload = async (url: string) => {
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div>
<div class="justify-between items-center align-center q-pt-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -493,12 +435,7 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
@ -506,12 +443,7 @@ const viewFileUpload = async (url: string) => {
</template>
<template v-slot:separator>
<q-avatar
color="primary"
text-color="white"
size="30px"
icon="drag_indicator"
/>
<q-avatar color="primary" text-color="white" size="30px" icon="drag_indicator" />
</template>
<template v-slot:after>
@ -523,39 +455,17 @@ const viewFileUpload = async (url: string) => {
<div>
<label class="text-file">คำสั่ง</label>
<div class="text-right">
<q-btn
size="12px"
flat
dense
color="primary"
icon="mdi-eye"
@click="viewFileUpload(OrderPDFUpload)"
>
<q-btn size="12px" flat dense color="primary" icon="mdi-eye"
@click="viewFileUpload(OrderPDFUpload)">
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
</q-btn>
<q-btn
type="a"
:href="OrderPDFUpload"
size="12px"
flat
dense
color="red"
icon="mdi-download"
target="_blank"
>
<q-btn type="a" :href="OrderPDFUpload" size="12px" flat dense color="red" icon="mdi-download"
target="_blank">
<q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
</q-btn>
</div>
<q-file
outlined
dense
v-model="fileOrder"
label="เลือกไฟล์คำสั่ง"
hide-bottom-space
lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
accept=".pdf"
>
<q-file outlined dense v-model="fileOrder" label="เลือกไฟล์คำสั่ง" hide-bottom-space lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" accept=".pdf">
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
@ -564,40 +474,18 @@ const viewFileUpload = async (url: string) => {
<div>
<label class="text-file">เอกสารแนบท้าย</label>
<div class="text-right">
<q-btn
size="12px"
flat
dense
color="primary"
icon="mdi-eye"
@click="viewFileUpload(TailerPDFUpload)"
>
<q-btn size="12px" flat dense color="primary" icon="mdi-eye"
@click="viewFileUpload(TailerPDFUpload)">
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
</q-btn>
<q-btn
type="a"
:href="TailerPDFUpload"
size="12px"
flat
dense
color="red"
icon="mdi-download"
target="_blank"
>
<q-btn type="a" :href="TailerPDFUpload" size="12px" flat dense color="red" icon="mdi-download"
target="_blank">
<q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
</q-btn>
</div>
<q-file
outlined
dense
v-model="fileTailer"
label="เลือกไฟล์เอกสารแนบท้าย"
hide-bottom-space
lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
accept=".pdf"
>
<q-file outlined dense v-model="fileTailer" label="เลือกไฟล์เอกสารแนบท้าย" hide-bottom-space
lazy-rules :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" accept=".pdf">
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
@ -611,51 +499,24 @@ const viewFileUpload = async (url: string) => {
<div class="q-gutter-y-md q-mb-md">
<div>
<label class="text-file">เลขที่คำสั่ง</label>
<q-input
:outlined="true"
dense
lazy-rules
:readonly="!true"
:borderless="!true"
v-model="order"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
/>
<q-input :outlined="true" dense lazy-rules :readonly="!true" :borderless="!true" v-model="order"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`" />
</div>
<div>
<label class="text-file">ปีที่ออกคำสั่ง</label>
<datepicker
menu-class-name="modalfix"
v-model="years"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
week-start="0"
>
<datepicker menu-class-name="modalfix" v-model="years" :locale="'th'" autoApply year-picker
:enableTimePicker="false" week-start="0">
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
outlined
dense
lazy-rules
:model-value="years + 543"
:rules="[
(val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
]"
hide-bottom-space
:label="`${'ปีที่ออกคำสั่ง'}`"
>
<q-input outlined dense lazy-rules :model-value="years + 543" :rules="[
(val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
]" hide-bottom-space :label="`${'ปีที่ออกคำสั่ง'}`">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-grey)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-grey)">
</q-icon>
</template>
</q-input>
@ -664,15 +525,8 @@ const viewFileUpload = async (url: string) => {
</div>
<div>
<label class="text-file">วันที่ลงนาม</label>
<datepicker
menu-class-name="modalfix"
v-model="date"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<datepicker menu-class-name="modalfix" v-model="date" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -680,23 +534,12 @@ const viewFileUpload = async (url: string) => {
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker"
hide-bottom-space
:model-value="date != null ? date2Thai(date) : null"
:label="`${'วันที่ลงนาม'}`"
:rules="[
<q-input outlined dense class="full-width datepicker" hide-bottom-space
:model-value="date != null ? date2Thai(date) : null" :label="`${'วันที่ลงนาม'}`" :rules="[
(val) => !!val || `${'กรุณาเลือกวันที่ลงนาม'}`,
]"
>
]">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-grey)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-grey)">
</q-icon>
</template>
</q-input>
@ -706,20 +549,9 @@ const viewFileUpload = async (url: string) => {
</div>
</fieldset>
<div class="flex justify-around">
<q-btn
unelevated
label="ออกคำสั่ง"
:color="validateForm() ? 'public' : 'grey'"
:disable="statusOrder == 'N'"
@click="clickExecute(orderId)"
/>
<q-btn
class="text-dark"
unelevated
label="ส่งไปลงนาม"
color="grey"
:disable="statusOrder == 'N'"
/>
<q-btn unelevated label="ออกคำสั่ง" :color="validateForm() ? 'public' : 'grey'"
:disable="statusOrder == 'N'" @click="clickExecute(orderId)" />
<q-btn class="text-dark" unelevated label="ส่งไปลงนาม" color="grey" :disable="statusOrder == 'N'" />
</div>
</div>
</q-form>
@ -728,53 +560,23 @@ const viewFileUpload = async (url: string) => {
</div>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn
dense
outline
color="primary"
icon="chevron_left"
@click="previous"
class="q-pr-md"
label="เลือกรายชื่อส่งสำเนา"
>
<q-btn dense outline color="primary" icon="chevron_left" @click="previous" class="q-pr-md"
label="เลือกรายชื่อส่งสำเนา">
</q-btn>
<q-btn
unelevated
label="บันทึก"
:color="validateForm() ? 'public' : 'grey'"
:disable="!validateForm()"
@click="save"
>
<q-btn unelevated label="บันทึก" :color="validateForm() ? 'public' : 'grey'" :disable="!validateForm()"
@click="save">
</q-btn>
</div>
<q-dialog
v-model="dialog"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-dialog v-model="dialog" persistent :maximized="true" transition-show="slide-up" transition-hide="slide-down">
<q-card class="bg-white text-white">
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
<q-btn
icon="close"
unelevated
round
dense
style="color: #ff8080; background-color: #ffdede"
size="12px"
v-close-popup
/>
<q-btn icon="close" unelevated round dense style="color: #ff8080; background-color: #ffdede" size="12px"
v-close-popup />
</div>
<q-card-section bordered class="card-pdf q-ma-md q-pa-md">
<div class="justify-between items-center align-center q-pb-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -782,32 +584,16 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
<div class="pdfWidth">
<VuePDF
ref="vuePDFRef"
:pdf="pdfSrc"
:page="page"
fit-parent
:scale="0.1"
/>
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent :scale="0.1" />
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div>
<div class="justify-between items-center align-center q-pt-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -815,12 +601,7 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
@ -828,33 +609,16 @@ const viewFileUpload = async (url: string) => {
</q-card>
</q-dialog>
<q-dialog
v-model="dialogFileUpload"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-dialog v-model="dialogFileUpload" persistent :maximized="true" transition-show="slide-up"
transition-hide="slide-down">
<q-card class="bg-white text-white">
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
<q-btn
icon="close"
unelevated
round
dense
style="color: #ff8080; background-color: #ffdede"
size="12px"
v-close-popup
/>
<q-btn icon="close" unelevated round dense style="color: #ff8080; background-color: #ffdede" size="12px"
v-close-popup />
</div>
<q-card-section bordered class="card-pdf q-ma-md q-pa-md">
<div class="justify-between items-center align-center q-pb-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -862,32 +626,16 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
<div class="pdfWidth">
<VuePDF
ref="vuePDFRef"
:pdf="pdfFileUploadSrc"
:page="page"
fit-parent
:scale="0.1"
/>
<VuePDF ref="vuePDFRef" :pdf="pdfFileUploadSrc" :page="page" fit-parent :scale="0.1" />
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div>
<div class="justify-between items-center align-center q-pt-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -895,12 +643,7 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>

1
src/modules/10_order/router.ts
View file

@ -1,4 +1,3 @@
// const AddPage = () => import("@/modules/10_order/components/Add.vue");
const MainOrder = () => import("@/modules/10_order/components/Main.vue");
const DetailPage = () => import("@/modules/10_order/components/Detail.vue");