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

Merge branch 'anandadev' into develop

Browse source
This commit is contained in:
AnandaTon 2023-06-23 12:19:15 +07:00
commit 1feff32e35
8 changed files with 24 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

492
src/modules/05_placement/components/OrderPlacement/step/step01.vue Normal file
View file

@ -0,0 +1,492 @@
<template>
<div>
<div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">
<q-form ref="myForm">
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="typeOrder"
:rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
hide-bottom-space
:label="`${'ประเภทคำสั่ง'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="typeOrderOption"
option-value="id"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
) "
/>
</div>
<div class="col-xs-12 col-md-6">
<!-- :readonly="!edit"
:borderless="!edit" -->
<q-input
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="nameOrder"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
:label="`${'คำสั่งเรื่อง'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</div>
<div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
<div class="col-6">
<q-input
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="command"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
:label="`${'คำสั่ง'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
type="number"
/>
</div>
<label class="col-1 flex justify-center items-center text-bold"
>/</label
>
<div class="col-5">
<datepicker
v-model="dateYear"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:modelValue="clickEditRow"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:model-value="dateYear + 543"
:rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
:label="`${'พ.ศ.'}`"
dense
outlined
>
</q-input>
</template>
</datepicker>
</div>
</div>
<div class="col-xs-5 col-md-3">
<datepicker
menu-class-name="modalfix"
v-model="dateCommand"
:locale="'th'"
autoApply
borderless
: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
class="full-width datepicker"
:model-value="
dateCommand != null ? date2Thai(dateCommand) : null
"
:label="`${'วันที่มีผลออกคำสั่ง'}`"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="byOrder"
:rules="[(val:string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
hide-bottom-space
:label="`${'คำสั่งโดย'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="byOrderOption"
option-value="id"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
) "
/>
</div>
<div class="col-xs-12 col-md-6">
<!-- :readonly="!edit"
:borderless="!edit" -->
<q-input
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="nameCommand"
:rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
:label="`${'ผู้มีอำนาจลงนาม'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-md-6">
<!-- :readonly="!edit"
:borderless="!edit" -->
<q-input
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="positionCommand"
:rules="[
(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`,
]"
:label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</div>
<div class="col-12">
<q-separator />
</div>
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="register"
:rules="[(val:string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
hide-bottom-space
:label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="registerOption"
option-value="id"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
) "
/>
</div>
<div class="col-xs-12 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="dateRegister"
:locale="'th'"
autoApply
borderless
: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
class="full-width datepicker"
:model-value="
dateRegister != null ? date2Thai(dateRegister) : null
"
:label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="announce"
:rules="[(val:string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
hide-bottom-space
:label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="announceOption"
option-value="id"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
) "
/>
</div>
<div class="col-xs-12 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="dateAnnounce"
:locale="'th'"
autoApply
borderless
: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
class="full-width datepicker"
:model-value="
dateAnnounce != null ? date2Thai(dateAnnounce) : null
"
:label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
:rules="[
(val) =>
!!val ||
`${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="position"
:rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]"
hide-bottom-space
:label="`${'ตำแหน่งรับสมัคร'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="positionOption"
option-value="id"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'positionOption'
) "
/>
</div>
</div>
</q-form>
</div>
<q-separator />
<div class="flex justify-end q-px-md q-gutter-sm">
<q-btn
flat
round
color="public"
icon="mdi-content-save-outline"
@click="next"
>
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
<!-- <q-btn flat round color="primary" icon="chevron_left" @click="previous">
<q-tooltip>ย้อนกลับ</q-tooltip>
</q-btn> -->
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
<q-tooltip>ต่อไป</q-tooltip>
</q-btn> -->
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import type { DataOption } from "@/modules/05_placement/interface/index/Main.ts";
import { useCounterMixin } from "@/stores/mixin";
import type { QForm } from "quasar";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const props = defineProps({
next: {
type: Function,
default: () => console.log("not function"),
},
previous: {
type: Function,
default: () => console.log("not function"),
},
});
const next = () => props.next();
const previous = () => props.previous();
const myForm = ref<QForm>();
const editRow = ref<boolean>(false);
const nameOrder = ref<string>("");
const nameCommand = ref<string>("");
const positionCommand = ref<string>("");
const dateYear = ref<number>(new Date().getFullYear());
const command = ref<string>("");
const dateCommand = ref<Date>(new Date());
const dateRegister = ref<Date>(new Date());
const dateAnnounce = ref<Date>(new Date());
const typeOrder = ref<string>("");
const typeOrderOption = ref<DataOption[]>([]);
const typeOrderOptionFilter = ref<DataOption[]>([]);
const byOrder = ref<string>("");
const byOrderOption = ref<DataOption[]>([]);
const byOrderOptionFilter = ref<DataOption[]>([]);
const register = ref<string>("");
const registerOption = ref<DataOption[]>([]);
const registerOptionFilter = ref<DataOption[]>([]);
const announce = ref<string>("");
const announceOption = ref<DataOption[]>([]);
const announceOptionFilter = ref<DataOption[]>([]);
const position = ref<string>("");
const positionOption = ref<DataOption[]>([]);
const positionOptionFilter = ref<DataOption[]>([]);
const clickEditRow = () => (editRow.value = true);
const filterSelector = (val: any, update: Function, filtername: string) => {
switch (filtername) {
case "typeOrderOption":
update(() => {
typeOrderOption.value = typeOrderOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "byOrderOption":
update(() => {
byOrderOption.value = byOrderOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "registerOption":
update(() => {
registerOption.value = registerOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "announceOption":
update(() => {
announceOption.value = announceOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "positionOption":
update(() => {
positionOption.value = positionOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
};
const submit = async () => {
await myForm.value!.validate().then((result: boolean) => {
if (result == false) {
}
});
};
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
*/
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<style>
.q-field--with-bottom {
padding-bottom: 0px;
}
</style>

227
src/modules/05_placement/components/OrderPlacement/step/step02.vue Normal file
View file

@ -0,0 +1,227 @@
<template>
<div>
<div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">
<Table
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:nornmalData="true"
:refreshBtn="true"
selection="multiple"
v-model:selected="selected"
>
<template #columns="props">
<q-tr :props="props"
><q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props.row)"
class="cursor-pointer"
>
<div v-if="col.name == 'no'" class="table_ellipsis">
{{ props.rowIndex }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td></q-tr
>
</template>
</Table>
</div>
<q-separator />
<div class="flex justify-end q-px-md q-gutter-sm">
<q-btn
flat
round
color="public"
icon="mdi-content-save-outline"
@click="next"
>
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
<q-btn flat round color="primary" icon="chevron_left" @click="previous">
<q-tooltip>ย้อนกลับ</q-tooltip>
</q-btn>
<q-btn flat round color="primary" icon="chevron_right" @click="next">
<q-tooltip>ต่อไป</q-tooltip>
</q-btn>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Table from "@/modules/05_placement/components/pass/TableView.vue";
const props = defineProps({
next: {
type: Function,
default: () => console.log("not function"),
},
previous: {
type: Function,
default: () => console.log("not function"),
},
});
const next = () => props.next();
const previous = () => props.previous();
const filter = ref<string>("");
const visibleColumns = ref<String[]>([
"name",
"calories",
"fat",
"carbs",
"protein",
"sodium",
"calcium",
"iron",
]);
const columns = [
{
name: "desc",
required: true,
label: "Dessert (100g serving)",
align: "left",
field: (row) => row.name,
format: (val) => `${val}`,
sortable: true,
},
{
name: "calories",
align: "center",
label: "Calories",
field: "calories",
sortable: true,
},
{ name: "fat", label: "Fat (g)", field: "fat", sortable: true },
{ name: "carbs", label: "Carbs (g)", field: "carbs" },
{ name: "protein", label: "Protein (g)", field: "protein" },
{ name: "sodium", label: "Sodium (mg)", field: "sodium" },
{
name: "calcium",
label: "Calcium (%)",
field: "calcium",
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
},
{
name: "iron",
label: "Iron (%)",
field: "iron",
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
},
];
const rows = [
{
name: "Frozen Yogurt",
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
sodium: 87,
calcium: "14%",
iron: "1%",
},
{
name: "Ice cream sandwich",
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
sodium: 129,
calcium: "8%",
iron: "1%",
},
{
name: "Eclair",
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
sodium: 337,
calcium: "6%",
iron: "7%",
},
{
name: "Cupcake",
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
sodium: 413,
calcium: "3%",
iron: "8%",
},
{
name: "Gingerbread",
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
sodium: 327,
calcium: "7%",
iron: "16%",
},
{
name: "Jelly bean",
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
sodium: 50,
calcium: "0%",
iron: "0%",
},
{
name: "Lollipop",
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
sodium: 38,
calcium: "0%",
iron: "2%",
},
{
name: "Honeycomb",
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
sodium: 562,
calcium: "0%",
iron: "45%",
},
{
name: "Donut",
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
sodium: 326,
calcium: "2%",
iron: "22%",
},
{
name: "KitKat",
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
sodium: 54,
calcium: "12%",
iron: "6%",
},
];
const selected = ref([]);
const selectData = (row: any) => {};
</script>

40
src/modules/05_placement/components/OrderPlacement/step/step03.vue Normal file
View file

@ -0,0 +1,40 @@
<template>
<div>
<div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">03</div>
<q-separator />
<div class="flex justify-end q-px-md q-gutter-sm">
<q-btn
flat
round
color="public"
icon="mdi-content-save-outline"
@click="next"
>
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
<q-btn flat round color="primary" icon="chevron_left" @click="previous">
<q-tooltip>ย้อนกลับ</q-tooltip>
</q-btn>
<q-btn flat round color="primary" icon="chevron_right" @click="next">
<q-tooltip>ต่อไป</q-tooltip>
</q-btn>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const props = defineProps({
next: {
type: Function,
default: () => console.log("not function"),
},
previous: {
type: Function,
default: () => console.log("not function"),
},
});
const next = () => props.next();
const previous = () => props.previous();
</script>

40
src/modules/05_placement/components/OrderPlacement/step/step04.vue Normal file
View file

@ -0,0 +1,40 @@
<template>
<div>
<div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">04</div>
<q-separator />
<div class="flex justify-end q-px-md q-gutter-sm">
<q-btn
flat
round
color="public"
icon="mdi-content-save-outline"
@click="next"
>
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
<q-btn flat round color="primary" icon="chevron_left" @click="previous">
<q-tooltip>ย้อนกลับ</q-tooltip>
</q-btn>
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
<q-tooltip>ต่อไป</q-tooltip>
</q-btn> -->
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const props = defineProps({
next: {
type: Function,
default: () => console.log("not function"),
},
previous: {
type: Function,
default: () => console.log("not function"),
},
});
const next = () => props.next();
const previous = () => props.previous();
</script>