ui ออกคำสั่ง
This commit is contained in:
Thanit Konmek
parent
fb1ab7669a
commit
70fb166d89
10 changed files with 1338 additions and 385 deletions
|
|
@ -408,7 +408,7 @@ onMounted(async () => {
|
|||
// ดูรายการสอบแข่งขัน หน้าต่อไป
|
||||
const redirectToPage = (id?: number) => {
|
||||
// router.push({ name: 'placementDetail'});
|
||||
router.push(`/orderPlacement/detail`);
|
||||
router.push(`/placement/order/detail`);
|
||||
};
|
||||
|
||||
const clickDelete = (id: string) => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
<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)"
|
||||
/>
|
||||
ออกคำสั่งบรรจุ
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-my-sm q-mt-sm">
|
||||
<q-stepper
|
||||
v-model="step"
|
||||
ref="stepper"
|
||||
color="primary"
|
||||
animated
|
||||
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"
|
||||
: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 } from "vue";
|
||||
import type { QStepper } from "quasar";
|
||||
|
||||
const step01 = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/OrderReplace/step/step01.vue")
|
||||
);
|
||||
const step02 = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/OrderReplace/step/step02.vue")
|
||||
);
|
||||
const step03 = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/OrderReplace/step/step03.vue")
|
||||
);
|
||||
const step04 = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/OrderReplace/step/step04.vue")
|
||||
);
|
||||
|
||||
const router = useRouter();
|
||||
const step = ref<number>(1);
|
||||
const stepper = ref<QStepper>();
|
||||
|
||||
const nextStep = () => {
|
||||
stepper.value!.next();
|
||||
};
|
||||
|
||||
const previousStep = () => {
|
||||
stepper.value!.previous();
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.q-stepper--horizontal .q-stepper__step-inner {
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
492
src/modules/05_placement/components/OrderReplace/step/step01.vue
Normal file
492
src/modules/05_placement/components/OrderReplace/step/step01.vue
Normal 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/OrderReplace/step/step02.vue
Normal file
227
src/modules/05_placement/components/OrderReplace/step/step02.vue
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,61 +1,160 @@
|
|||
<template>
|
||||
<div class="q-px-md q-pb-md">
|
||||
<div class="col-12 row q-py-sm" v-if="nornmalData == false">
|
||||
<q-btn size="12px" v-if="!editvisible" flat round :disabled="editvisible"
|
||||
:color="editvisible ? 'grey-7' : 'primary'" @click="clickEdit" icon="mdi-pencil-outline">
|
||||
<q-btn
|
||||
size="12px"
|
||||
v-if="!editvisible"
|
||||
flat
|
||||
round
|
||||
:disabled="editvisible"
|
||||
:color="editvisible ? 'grey-7' : 'primary'"
|
||||
@click="clickEdit"
|
||||
icon="mdi-pencil-outline"
|
||||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn size="12px" flat round v-if="editvisible" :disabled="!editvisible" :color="!editvisible ? 'grey-7' : 'red'"
|
||||
@click="clickCancel" icon="mdi-undo">
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
v-if="editvisible"
|
||||
:disabled="!editvisible"
|
||||
:color="!editvisible ? 'grey-7' : 'red'"
|
||||
@click="clickCancel"
|
||||
icon="mdi-undo"
|
||||
>
|
||||
<q-tooltip>ยกเลิก</q-tooltip>
|
||||
</q-btn>
|
||||
<div class="q-px-sm">
|
||||
<q-btn flat round :disabled="editvisible == false" :color="editvisible == false ? 'grey-7' : 'public'"
|
||||
@click="add" icon="mdi-content-save-outline">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
:disabled="editvisible == false"
|
||||
:color="editvisible == false ? 'grey-7' : 'public'"
|
||||
@click="add"
|
||||
icon="mdi-content-save-outline"
|
||||
>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<div class="row items-center" style="display: flex" v-if="publicData == false && publicNoBtn == false"></div>
|
||||
<div
|
||||
class="row items-center"
|
||||
style="display: flex"
|
||||
v-if="publicData == false && publicNoBtn == false"
|
||||
></div>
|
||||
|
||||
<q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined
|
||||
debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm">
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="inputfilter == ''" name="search" />
|
||||
<q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
|
||||
<q-icon
|
||||
v-if="inputfilter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดง table ใน คอลัมน์ -->
|
||||
<q-select :model-value="inputvisible" @update:model-value="updateVisible" :display-value="$q.lang.table.columns"
|
||||
multiple outlined dense :options="attrs.columns" options-dense option-value="name" map-options emit-value
|
||||
style="min-width: 150px" class="gt-xs q-ml-sm" />
|
||||
<q-select
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.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 row q-py-sm items-center" v-if="nornmalData == true">
|
||||
<span class="text-subtitle1">{{ titleText }}</span>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
@click="refresh"
|
||||
icon="mdi-refresh"
|
||||
v-if="props.refreshBtn"
|
||||
>
|
||||
<q-tooltip>อัปเดตข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined
|
||||
debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm">
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="inputfilter == ''" name="search" />
|
||||
<q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
|
||||
<q-icon
|
||||
v-if="inputfilter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select :model-value="inputvisible" @update:model-value="updateVisible" :display-value="$q.lang.table.columns"
|
||||
multiple outlined dense :options="attrs.columns" options-dense option-value="name" map-options emit-value
|
||||
style="min-width: 150px" class="gt-xs q-ml-sm" />
|
||||
<q-select
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-table ref="table" flat bordered class="custom-header-table" v-bind="attrs" virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48" dense :pagination-label="paginationLabel" :pagination="initialPagination"
|
||||
:rows-per-page-options="[0]">
|
||||
<q-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
:pagination-label="paginationLabel"
|
||||
:pagination="initialPagination"
|
||||
:rows-per-page-options="[0]"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
|
|
@ -132,6 +231,10 @@ const props = defineProps({
|
|||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
refreshBtn: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
add: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
|
|
@ -160,7 +263,13 @@ const props = defineProps({
|
|||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
refresh: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
|
||||
const refresh = () => props.refresh();
|
||||
const initialPagination = ref<any>({
|
||||
// descending: false,
|
||||
rowsPerPage: props.paging == true ? 25 : 0,
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@ const addOrderReplace = () =>
|
|||
import("@/modules/05_placement/components/OrderReplace/addOrderReplace.vue");
|
||||
const MainOrderPlacement = () =>
|
||||
import("@/modules/05_placement/components/OrderReplace/MainOrderReplace.vue");
|
||||
const detailOrderReplace = () =>
|
||||
import(
|
||||
"@/modules/05_placement/components/OrderReplace/detailOrderReplace.vue"
|
||||
);
|
||||
export default [
|
||||
{
|
||||
path: "/placement/Sorkorcho",
|
||||
|
|
@ -26,7 +30,7 @@ export default [
|
|||
},
|
||||
},
|
||||
{
|
||||
path: "/placement/OrderPlacement",
|
||||
path: "/placement/order",
|
||||
name: "Orderplacement",
|
||||
component: MainOrderPlacement,
|
||||
meta: {
|
||||
|
|
@ -35,6 +39,16 @@ export default [
|
|||
Role: "placement",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/placement/order/detail",
|
||||
name: "OrderplacementDetail",
|
||||
component: detailOrderReplace,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [7],
|
||||
Role: "placement",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/placement/detail",
|
||||
name: "placementDetail",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue