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

UI ออกคำสั่ง

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-09-10 18:03:01 +07:00
parent a750c4924c
commit 884fab1560
15 changed files with 1828 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

105
src/modules/18_command/components/Main/DialogCopyCommand.vue Normal file
View file

@ -0,0 +1,105 @@
<script setup lang="ts">
import { ref } from "vue";
import { useQuasar } from "quasar";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const { dialogConfirm } = useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const commandNo = ref<string>("");
const commandYear = ref<string>("");
function onSubmit() {
dialogConfirm($q, () => {
console.log(commandNo.value);
console.log(commandYear.value);
onClose();
});
}
function onClose() {
modal.value = false;
commandNo.value = "";
commandYear.value = "";
}
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card style="max-width: 50%">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader :tittle="'ทำสำเนาคำสั่ง'" :close="onClose" />
<q-separator />
<q-card-section>
<div class="row q-col-gutter-sm">
<div class="col-6">
<q-input
class="inputgreen"
outlined
dense
v-model="commandNo"
hide-bottom-space
:label="`${'คำสั่งเลขที่'}`"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเลขที่'}`]"
/>
</div>
<label class="col-1 flex justify-center items-center text-bold"
>/</label
>
<div class="col-5">
<q-input
class="inputgreen"
outlined
dense
v-model="commandYear"
hide-bottom-space
:label="`${'พ.ศ.'}`"
mask="####"
:rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
/>
<!-- <datepicker
v-model="commandYear"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
class="inputgreen"
:model-value="
commandYear !== null ? commandYear + 543 : null
"
:rules="[(val) => !!val || `${'กรุณาเลือก พ.ศ.'}`]"
:label="`${'พ.ศ.'}`"
dense
hide-bottom-space
outlined
>
</q-input>
</template>
</datepicker> -->
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn label="บันทึก" color="public" type="submit" />
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped></style>

245
src/modules/18_command/components/Main/TableMain.vue Normal file
View file

@ -0,0 +1,245 @@
<script setup lang="ts">
import { ref } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useCommandListStore } from "@/modules/18_command/store/ListStore";
import DialogCopyCommand from "@/modules/18_command/components/Main/DialogCopyCommand.vue";
import type { QTableProps } from "quasar";
const $q = useQuasar();
const router = useRouter();
const store = useCommandListStore();
const { date2Thai, dialogRemove, dialogConfirm } = useCounterMixin();
const columns = ref<QTableProps["columns"]>([
{
name: "orderNo",
align: "left",
label: "เลขที่คำสั่ง",
sortable: false,
field: "orderNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "orderName",
align: "center",
label: "ชื่อคำสั่ง",
sortable: true,
field: "orderName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "signatoryDate",
align: "center",
label: "วันที่ลงนาม",
sortable: false,
field: (v) => date2Thai(v),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "orderDate",
align: "center",
label: "วันที่คำสั่งมีผล",
sortable: false,
field: (v) => date2Thai(v),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "orderBy",
align: "center",
label: "ผู้สร้าง",
sortable: false,
field: "orderBy",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "signatoryBy",
align: "center",
label: "ผู้ลงนาม",
sortable: false,
field: "signatoryBy",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const modalCopy = ref<boolean>(false);
const commandId = ref<string>("");
function onRedirectToDetail(type: string, id: string) {
router.push(`/command/${type}/${id}`);
}
function onCopy(id: string) {
commandId.value = id;
modalCopy.value = true;
}
function onCancel(id: string) {
dialogRemove(
$q,
() => {},
"ยืนยันการยกเลิกการออกคำสั่ง",
"ต้องการยืนยันการยกเลิกการออกคำสั่งนี้ใช่หรือไม่ ?"
);
}
function onReCommand(id: string) {
dialogConfirm(
$q,
() => {},
"ยืนยันการดึงไปทำคำสั่งใหม่",
"ต้องการยืนยืนยันการดึงไปทำคำสั่งใหม่ใช่หรือไม่ ?"
);
}
</script>
<template>
<d-table
ref="table"
:columns="columns"
:rows="store.rows"
row-key="id"
flat
dense
bordered
:paging="true"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width />
<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 auto-width>
<q-btn
flat
dense
round
color="secondary"
icon="mdi-dots-horizontal-circle-outline"
>
<q-menu>
<q-list dense style="min-width: 200px">
<!-- แก้ไขข้อมูล ไม่แสดง Tabs ยกเลิก -->
<q-item
clickable
v-close-popup
v-if="store.tabsMain !== 'list_cancel'"
@click.pervent="onRedirectToDetail('edit', props.row.id)"
>
<q-item-section>
<div class="row items-center">
<q-icon
color="edit"
size="xs"
name="edit
"
/>
<div class="q-pl-md">แก้ไขข้อมูล</div>
</div>
</q-item-section>
</q-item>
<!-- รายละเอียด -->
<q-item
clickable
v-close-popup
@click.pervent="onRedirectToDetail('view', props.row.id)"
>
<q-item-section>
<div class="row items-center">
<q-icon
color="info"
size="xs"
name="mdi-eye
"
/>
<div class="q-pl-md">รายละเอียด</div>
</div>
</q-item-section>
</q-item>
<!-- ทำสำเนาคำสั่ง -->
<q-item
clickable
v-close-popup
@click.pervent="onCopy(props.row.id)"
>
<q-item-section>
<div class="row items-center">
<q-icon
color="blue-6"
size="xs"
name="mdi-content-copy"
/>
<div class="q-pl-md">ทำสำเนาคำสั่ง</div>
</div>
</q-item-section>
</q-item>
<!-- ยกเลิก ไม่แสดง Tabs ยกเลิก -->
<q-item
clickable
v-close-popup
v-if="store.tabsMain !== 'list_cancel'"
@click.pervent="onCancel(props.row.id)"
>
<q-item-section>
<div class="row items-center">
<q-icon
color="red"
size="xs"
name="close
"
/>
<div class="q-pl-md">ยกเลิก</div>
</div>
</q-item-section>
</q-item>
<!-- ดึงไปทำคำสั่งใหม่ แสดงแค่ Tabs ยกเลิก -->
<q-item
clickable
v-close-popup
v-if="store.tabsMain === 'list_cancel'"
@click.pervent="onReCommand(props.row.id)"
>
<q-item-section>
<div class="row items-center">
<q-icon color="amber-5" size="xs" name="mdi-replay" />
<div class="q-pl-md">ดึงไปทำคำสั่งใหม่</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</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>
<DialogCopyCommand v-model:modal="modalCopy" />
</template>
<style scoped></style>

205
src/modules/18_command/components/Step/1_Detail.vue
View file

@ -1,5 +1,206 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
import DialogPerview from "@/modules/18_command/components/Step/Dialog1_Perview.vue";
const store = useCommandDetail();
const formData = reactive({
commandNo: "",
commandYear: "",
commandName: "",
commandHeader: "",
commandCenter: "",
commandFooter: "",
});
const modalPreview = ref<boolean>(false);
</script>
<template>
<div>รายละเอียดคำสั่ง</div>
<q-card-section>
<div class="row q-col-gutter-sm">
<!-- คำสั่งเลขที่ -->
<div class="col-4 row">
<div class="col-6">
<q-input
:class="store.classInput(!store.readonly)"
:readonly="store.readonly"
outlined
dense
v-model="formData.commandNo"
hide-bottom-space
:label="`${'คำสั่งเลขที่'}`"
/>
</div>
<label class="col-1 flex justify-center items-center text-bold">
/
</label>
<div class="col-5">
<q-input
:class="store.classInput(!store.readonly)"
:readonly="store.readonly"
outlined
dense
v-model="formData.commandYear"
hide-bottom-space
:label="`${'พ.ศ.'}`"
mask="####"
/>
</div>
</div>
<!-- คำสั่งเรื่อง -->
<div class="col-8">
<q-input
:class="store.classInput(!store.readonly)"
:readonly="store.readonly"
outlined
dense
v-model="formData.commandName"
hide-bottom-space
:label="`${'คำสั่งเรื่อง'}`"
/>
</div>
<!-- เนื้อหาคำสั่งส่วนต้น -->
<div class="col-12">
<q-card bordered flat>
<div class="bg-grey-2 row q-py-sm q-px-md text-bold">
เนื้อหาคำสั่งส่วนต้น
</div>
<q-separator />
<q-card-section>
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="formData.commandHeader"
borderless
hide-bottom-space
>
<template #control>
<q-editor
:readonly="store.readonly"
class="full-width"
v-model="formData.commandHeader"
min-height="5rem"
:toolbar="[
['left', 'center', 'right', 'justify'],
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['unordered', 'ordered'],
]"
/>
</template>
</q-field>
</q-card-section>
</q-card>
</div>
<!-- เนื้อหาคำสั่งส่วนกลาง -->
<div class="col-12">
<q-card bordered flat>
<div class="bg-grey-2 row q-py-sm q-px-md text-bold">
เนื้อหาคำสั่งส่วนกลาง
</div>
<q-separator />
<q-card-section>
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="formData.commandCenter"
borderless
hide-bottom-space
>
<template #control>
<q-editor
:readonly="store.readonly"
class="full-width"
v-model="formData.commandCenter"
min-height="5rem"
:toolbar="[
['left', 'center', 'right', 'justify'],
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['unordered', 'ordered'],
]"
/>
</template>
</q-field>
</q-card-section>
</q-card>
</div>
<!-- เนื้อหาคำสั่งส่วนท้าย -->
<div class="col-12">
<q-card bordered flat>
<div class="bg-grey-2 row q-py-sm q-px-md text-bold">
เนื้อหาคำสั่งส่วนท้าย
</div>
<q-separator />
<q-card-section>
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="formData.commandFooter"
borderless
hide-bottom-space
>
<template #control>
<q-editor
:readonly="store.readonly"
class="full-width"
v-model="formData.commandFooter"
min-height="5rem"
:toolbar="[
['left', 'center', 'right', 'justify'],
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['unordered', 'ordered'],
]"
/>
</template>
</q-field>
</q-card-section>
</q-card>
</div>
<div class="col-12 row justify-end">
<q-btn
label="แสดงตัวอย่าง"
color="info"
icon="mdi-eye"
@click.prevent="modalPreview = true"
/>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" v-if="!store.readonly">
<q-btn label="บันทึก" color="public" />
</q-card-actions>
<DialogPerview v-model:modal="modalPreview" />
</template>

308
src/modules/18_command/components/Step/2_ListPersons.vue
View file

@ -1,5 +1,309 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import { usePosSalaryDataStore } from "@/modules/18_command/store/PosSalary";
import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
import { useCounterMixin } from "@/stores/mixin";
import type { DataOption } from "@/modules/18_command/interface/index/Main";
import DialogAddPerson from "@/modules/18_command/components/Step/Dialog2_AddPerson.vue";
import DialogSalary from "@/modules/18_command/components/Step/Dialog2_Salary.vue";
const $q = useQuasar();
const storePosSalary = usePosSalaryDataStore();
const store = useCommandDetail();
const {
dialogMessageNotify,
dialogConfirm,
dialogRemove,
messageError,
showLoader,
hideLoader,
success,
} = useCounterMixin();
const posNoOptions = ref<DataOption[]>(storePosSalary.optionPos);
const templatePos = ref<string>("");
const position = ref<string>("");
const filter = ref<string>("");
const rows = ref<any[]>([
{
idCard: "6796519798790",
fullName: "ว่าที่ร้อยตรีวรรนิมมามานา วงศ์วโรทัย",
salaryAmount: 0,
},
{
idCard: "7707218775803",
fullName: "นายศรัณย์ ศิลาดี",
salaryAmount: 1,
},
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
field: (row) => rows.value.indexOf(row) + 1,
sortable: false,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "idCard",
align: "left",
label: "เลขประจำตัวประชาชน",
field: "idCard",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullName",
align: "left",
label: "ชื่อ-นามสกุล",
field: "fullName",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumns = ref<String[]>(["no", "idCard", "fullName"]);
const modalSalary = ref<boolean>(false);
const titleName = ref<string>("");
const modalPerson = ref<boolean>(false);
/**
* function เลือกต้นแบบ tamplate ตำแหน่ง
* @param val
*/
function updatePos(val: string) {
position.value = val;
}
function onSawpPos(val: any, type: string) {}
function onDelete(id: string) {
dialogRemove($q, () => {});
}
function selectModal(data: any) {
titleName.value = data.fullName;
modalSalary.value = true;
}
/**
* ฟิลเตอร์ข้อมูลจาก input
* @param val ค่าที่ป้อนให้ input
* @param update function จาก quasar
* @param filtername type ที่กำหนด ของ input นั้นๆ
*/
function filterSelector(val: string, update: Function, filtername: string) {
switch (filtername) {
case "pos":
update(() => {
posNoOptions.value = storePosSalary.optionPos.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
}
</script>
<template>
<div>รายชื่อผู้ถูกออกคำสั่ง</div>
<q-card-section>
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-select
:class="store.classInput(!store.readonly)"
:readonly="store.readonly"
outlined
dense
lazy-rules
borderless
clearable
v-model="templatePos"
:label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
option-label="name"
:options="posNoOptions"
option-value="name"
hide-bottom-space
emit-value
use-input
input-debounce="0"
@update:modelValue="updatePos"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
)"
/>
</div>
<div class="col-12">
<q-input
:class="store.classInput(!store.readonly)"
:readonly="store.readonly"
outlined
dense
v-model="position"
hide-bottom-space
:label="`${'ตำแหน่ง'}`"
type="textarea"
/>
</div>
<div class="col-12 row q-pb-sm items-center">
<q-btn
v-if="!store.readonly"
flat
round
color="primary"
icon="add"
@click="modalPerson = true"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
<q-space />
<div class="items-center" style="display: flex">
<!-- ค้นหาข้อความใน table -->
<q-input
standout
dense
v-model="filter"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
</template>
</q-input>
<!-- แสดงคอลัมน์ใน table -->
<q-select
v-model="visibleColumns"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<div class="col-12">
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width />
<q-th auto-width />
<q-th auto-width />
<q-th auto-width />
<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 auto-width>
<q-btn
v-if="!store.readonly"
dense
flat
round
:color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
:disable="props.rowIndex + 1 == 1"
@click="onSawpPos(props, 'up')"
icon="mdi-arrow-up-bold"
>
<q-tooltip>เลื่อนลำดับขึ้น</q-tooltip>
</q-btn>
</q-td>
<q-td auto-width>
<q-btn
v-if="!store.readonly"
dense
flat
round
:color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
:disable="rows.length == props.rowIndex + 1"
@click="onSawpPos(props, 'down')"
icon="mdi-arrow-down-bold"
>
<q-tooltip>เลื่อนลำดับลง</q-tooltip>
</q-btn>
</q-td>
<!-- v-if="statuscode !== true" -->
<q-td auto-width>
<q-btn
v-if="!store.readonly"
dense
flat
round
color="blue"
@click="selectModal(props.row)"
icon="mdi-cash-multiple"
>
<q-tooltip>เงินเดือน</q-tooltip>
</q-btn>
</q-td>
<q-td auto-width>
<q-btn
v-if="!store.readonly"
dense
flat
round
color="red"
@click="onDelete(props.row.personalId)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
{{ col.value ?? "-" }}
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" v-if="!store.readonly">
<q-btn label="บันทึก" color="public" />
</q-card-actions>
<DialogAddPerson v-model:modal="modalPerson" />
<DialogSalary v-model:modal="modalSalary" :title-name="titleName" />
</template>

243
src/modules/18_command/components/Step/3_ReceivedCopy.vue
View file

@ -1,5 +1,244 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
import type { DataOption } from "@/modules/18_command/interface/index/Main";
import DialogOrgSelectOneStep from "@/components/Dialogs/DialogOrgSelectOneStep.vue";
const store = useCommandDetail();
const filter = ref<string>("");
const rows = ref<any[]>([
{
idCard: "1",
name: "2",
position: "3",
unit: "4",
send: "5",
},
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
field: (row) => rows.value.indexOf(row) + 1,
sortable: false,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "idCard",
align: "left",
label: "เลขประจำตัวประชาชน",
field: "idCard",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ-นามสกุล",
field: "name",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่ง",
field: "position",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "unit",
align: "left",
label: "หน่วยงาน",
field: "unit",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "send",
align: "left",
label: "ช่องทางการส่งสำเนา",
field: "send",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumns = ref<String[]>([
"no",
"idCard",
"name",
"position",
"unit",
"send",
]);
const optionSelect = ref<DataOption[]>([
{ id: 1, name: "อีเมล" },
{ id: 2, name: "กล่องข้อความ" },
]);
const modal = ref<boolean>(false);
const selectedModal = ref<any[]>([]);
function onDelete(id: string) {}
function onSubmitPerson() {}
</script>
<template>
<div>รายชื่อผู้ได้รับสำเนาคำสั่ง</div>
<q-card-section>
<div class="row q-col-gutter-sm">
<div class="col-12 row items-center">
<q-btn
v-if="!store.readonly"
flat
round
color="primary"
@click="modal = true"
icon="mdi-plus"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
<q-space />
<div class="items-center" style="display: flex">
<!-- ค้นหาข้อความใน table -->
<q-input
standout
dense
v-model="filter"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
</template>
</q-input>
<!-- แสดงคอลัมน์ใน table -->
<q-select
v-model="visibleColumns"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<div class="col-12">
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="idCard"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width />
<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 auto-width>
<q-btn
v-if="!store.readonly"
dense
flat
round
color="red"
@click="onDelete(props.row.personalId)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name === 'send'">
<q-select
:readonly="store.readonly"
:class="store.classInput(!store.readonly)"
hide-bottom-space
multiple
:outlined="true"
dense
v-model="props.row.mutiselect"
:rules="[
(val) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
(val) =>
val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
]"
:label="`${'เลือกช่องทางการส่งสำเนา'}`"
emit-value
map-options
option-label="name"
:options="optionSelect"
option-value="id"
input-debounce="0"
color="primary"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-black">
ไม่พบข้อมูลที่ค้นหา
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div v-else>
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" v-if="!store.readonly">
<q-btn label="บันทึก" color="public" />
</q-card-actions>
<DialogOrgSelectOneStep
v-model:modal="modal"
:title="'เลือกรายชื่อตามหน่วยงาน'"
v-model:selectedModal="selectedModal"
:saveData="onSubmitPerson"
/>
</template>

144
src/modules/18_command/components/Step/Dialog1_Perview.vue Normal file
View file

@ -0,0 +1,144 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import axios from "axios";
import http from "@/plugins/http";
import config from "@/app.config";
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const { dialogConfirm } = useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const vuePDFRef = ref<any>(null);
function fetchPDF(type: string = "docx") {
axios
.post(
config.API.reportTemplate + `/${type}`,
{
template: "command_test",
reportName: "docx-report",
data: {
commandNo: "๑๒๓๔๕",
commandYear: "กระผม",
commandTitle: "นาย",
detailHeader: "Administrator",
detailBody: "detailBody",
detailFooter: "detailFooter",
commandDate: "",
name: "Chief Technology Officer",
position: "Chief Technology Officer",
},
},
{
headers: {
accept: "application/pdf",
"content-Type": "application/json",
},
responseType: "blob",
}
)
.then(async (res) => {
const blob = new Blob([res.data]);
const objectUrl = URL.createObjectURL(blob);
const pdfData = usePDF(`${objectUrl}`);
setTimeout(() => {
pdfSrc.value = pdfData.pdf.value;
numOfPages.value = pdfData.pages.value;
}, 1500);
})
.catch(async (e) => {
// messageError($q, e);
// hideLoader();
});
}
function onClose() {
modal.value = false;
}
onMounted(() => {
fetchPDF();
});
</script>
<template>
<q-dialog v-model="modal" persistent full-height full-width>
<q-card>
<DialogHeader :tittle="'ตัวอย่างคำสั่ง'" :close="onClose" />
<q-separator />
<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-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text text-black">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<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"
/>
</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-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text text-black">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<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>
</q-card-section>
</q-card>
</q-dialog>
</template>
<style scoped></style>

121
src/modules/18_command/components/Step/Dialog2_AddPerson.vue Normal file
View file

@ -0,0 +1,121 @@
<script setup lang="ts">
import { ref } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar();
const { dialogConfirm } = useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const selected = ref<any[]>([]);
const rows = ref<any[]>([
{
idCard: "6796519798790",
fullName: "ว่าที่ร้อยตรีวรรนิมมามานา วงศ์วโรทัย",
salaryAmount: 0,
},
{
idCard: "7707218775803",
fullName: "นายศรัณย์ ศิลาดี",
salaryAmount: 1,
},
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
field: (row) => rows.value.indexOf(row) + 1,
sortable: false,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "idCard",
align: "left",
label: "เลขประจำตัวประชาชน",
field: "idCard",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullName",
align: "left",
label: "ชื่อ-นามสกุล",
field: "fullName",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
function onSubmit() {
dialogConfirm($q, () => {
onClose();
});
}
function onClose() {
modal.value = false;
}
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card style="width: 50vw; max-width: 50vw">
<DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="onClose" />
<q-separator />
<q-card-section style="max-height: 60vh">
<d-table
:rows="rows"
:columns="columns"
row-key="name"
:selection="'multiple'"
v-model:selected="selected"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</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" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">{{
col.name == "no" ? props.rowIndex + 1 : col.value
}}</q-td>
</q-tr>
</template>
</d-table>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn label="บันทึก" color="public" @click="onSubmit"> </q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<style scoped></style>

113
src/modules/18_command/components/Step/Dialog2_Salary.vue Normal file
View file

@ -0,0 +1,113 @@
<script setup lang="ts">
import { reactive } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/components/DialogHeader.vue";
import CurruncyInput from "@/components/CurruncyInput.vue";
const $q = useQuasar();
const { dialogConfirm } = useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const titleName = defineModel<string>("titleName", { required: true });
const formData = reactive({
salaryAmount: 0,
positionSalaryAmount: 0,
monthSalaryAmount: 0,
remarkVertical: null,
remarkHorizontal: null,
});
function onSubmit() {
dialogConfirm($q, () => {
onClose();
});
}
function onClose() {
modal.value = false;
formData.salaryAmount = 0;
formData.positionSalaryAmount = 0;
formData.monthSalaryAmount = 0;
formData.remarkVertical = null;
formData.remarkHorizontal = null;
}
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card style="width: 50vw; max-width: 50vw">
<q-form q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader :tittle="titleName" :close="onClose" />
<q-separator />
<q-card-section>
<div class="row col-12 q-col-gutter-sm">
<div class="col-xs-6 col-sm-6 col-md-6">
<CurruncyInput
:edit="true"
:dense="true"
v-model="formData.salaryAmount"
:label="`${'เงินเดือน'}`"
:rules="[(val: any) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<CurruncyInput
:edit="true"
:dense="true"
v-model="formData.positionSalaryAmount"
:label="`${'เงินประจำตำแหน่ง'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<CurruncyInput
:edit="true"
:dense="true"
v-model="formData.monthSalaryAmount"
:label="`${'เงินค่าตอบแทนรายเดือน'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-12">
<q-input
dense
outlined
v-model="formData.remarkVertical"
label="หมายเหตุแนวตั้ง"
type="textarea"
rows="2"
class="inputgreen"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-12">
<q-input
dense
outlined
v-model="formData.remarkHorizontal"
type="textarea"
label="หมายเหตุแนวนอน"
rows="2"
class="inputgreen"
/>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn label="บันทึก" color="public" type="submit">
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped></style>