Merge branch 'develop' into nice_dev
# Conflicts: # src/modules/11_discipline/router.ts
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
commit
5b210fca60
26 changed files with 4121 additions and 648 deletions
|
|
@ -1,9 +1,232 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
// importStroe
|
||||
import { useOrderStore } from "../../stroes/OrderStore";
|
||||
|
||||
const router = useRouter();
|
||||
const OrderStore = useOrderStore();
|
||||
const { fecthOrder } = OrderStore;
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "subject",
|
||||
align: "left",
|
||||
label: "เรื่อง",
|
||||
sortable: true,
|
||||
field: "subject",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "ordernumber",
|
||||
align: "left",
|
||||
label: "เลขที่คำสั่ง",
|
||||
sortable: true,
|
||||
field: "ordernumber",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "dateOrder",
|
||||
align: "left",
|
||||
label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
|
||||
sortable: true,
|
||||
field: "dateOrder",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "orderby",
|
||||
align: "left",
|
||||
label: "คำสั่งโดย",
|
||||
sortable: true,
|
||||
field: "orderby",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "signer",
|
||||
align: "left",
|
||||
label: "ผู้ลงนาม",
|
||||
sortable: true,
|
||||
field: "signer",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "statusorder",
|
||||
align: "left",
|
||||
label: "สถานะของคำสั่ง",
|
||||
sortable: true,
|
||||
field: "statusorder",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"subject",
|
||||
"ordernumber",
|
||||
"dateOrder",
|
||||
"orderby",
|
||||
"signer",
|
||||
"statusorder",
|
||||
]);
|
||||
|
||||
const filterTable = ref<string>("");
|
||||
|
||||
onMounted(async () => {
|
||||
await fecthListOrder();
|
||||
});
|
||||
|
||||
async function fecthListOrder() {
|
||||
const listData = [
|
||||
{
|
||||
subject: "ทุจริตในหน้าที่",
|
||||
ordernumber: "1/2556",
|
||||
dateOrder: "1 ธ.ค. 2565",
|
||||
orderby: "สำนักงานคณพกรรมการข้าราชการกรุงเทพฯ",
|
||||
signer: "นางศิรินภา คงน้อย",
|
||||
statusorder: "เสร็จสิ้นแล้ว",
|
||||
},
|
||||
{
|
||||
subject: "ทุจริตในหน้าที่",
|
||||
ordernumber: "4/2556",
|
||||
dateOrder: "1 ธ.ค. 2565",
|
||||
orderby: "สำนักงานคณพกรรมการข้าราชการกรุงเทพฯ",
|
||||
signer: "นางศิรินภา คงน้อย",
|
||||
statusorder: "เสร็จสิ้นแล้ว",
|
||||
},
|
||||
{
|
||||
subject: "ทุจริตในหน้าที่",
|
||||
ordernumber: "2/2556",
|
||||
dateOrder: "1 ธ.ค. 2565",
|
||||
orderby: "สำนักงานคณพกรรมการข้าราชการกรุงเทพฯ",
|
||||
signer: "นางศิรินภา คงน้อย",
|
||||
statusorder: "เสร็จสิ้นแล้ว",
|
||||
},
|
||||
];
|
||||
await fecthOrder(listData);
|
||||
}
|
||||
|
||||
function redirectToPageadd() {
|
||||
router.push(`/discipline-order/add`);
|
||||
}
|
||||
|
||||
//pagination
|
||||
const pagination = ref({
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
const paging = ref<boolean>(true);
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>ออกคำสั่ง</h1>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการออกคำสั่งลงโทษทางวินัย
|
||||
</div>
|
||||
<div class="col-12 q-mt-sm">
|
||||
<q-card flat bordered>
|
||||
<div class="q-pa-md">
|
||||
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-plus"
|
||||
@click="redirectToPageadd()"
|
||||
><q-tooltip>เพิ่มรายการออกคำสั่งลงโทษทางวินัย </q-tooltip></q-btn
|
||||
>
|
||||
<q-space />
|
||||
<div class="col-2">
|
||||
<q-input dense outlined v-model="filterTable" label="ค้นหา" />
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<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
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="OrderStore.rows"
|
||||
:filter="filterTable"
|
||||
row-key="subject"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
: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-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer" style="height: 40px">
|
||||
<q-td key="subject" :props="props">
|
||||
{{ props.row.subject }}
|
||||
</q-td>
|
||||
<q-td key="ordernumber" :props="props">
|
||||
{{ props.row.ordernumber }}
|
||||
</q-td>
|
||||
<q-td key="dateOrder" :props="props">
|
||||
{{ props.row.dateOrder }}
|
||||
</q-td>
|
||||
<q-td key="orderby" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ props.row.orderby }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td key="signer" :props="props">
|
||||
{{ props.row.signer }}
|
||||
</q-td>
|
||||
<q-td key="statusorder" :props="props">
|
||||
{{ props.row.statusorder }}
|
||||
</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>
|
||||
</d-table>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
73
src/modules/11_discipline/components/4_Order/OrderPage.vue
Normal file
73
src/modules/11_discipline/components/4_Order/OrderPage.vue
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import step01 from "./Step01.vue";
|
||||
import step02 from "./Step02.vue";
|
||||
import step03 from "./Step03.vue";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const step = ref<number>(1);
|
||||
|
||||
const nextStep = async () => {
|
||||
localStorage.setItem("currentStep", step.value.toString());
|
||||
step.value++;
|
||||
};
|
||||
const previousStep = async () => {
|
||||
localStorage.setItem("currentStep", step.value.toString());
|
||||
step.value--;
|
||||
};
|
||||
</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(`/discipline-order`)"
|
||||
/>
|
||||
ออกคำสั่งลงโทษทางวินัย
|
||||
</div>
|
||||
<div class="col-12 q-mt-sm">
|
||||
<q-card flat bordered>
|
||||
<q-stepper
|
||||
v-model="step"
|
||||
ref="stepper"
|
||||
animated
|
||||
active-color="pirmary"
|
||||
active-icon="none"
|
||||
header-class="bg-grey-1 "
|
||||
>
|
||||
<q-step
|
||||
:name="1"
|
||||
prefix="1"
|
||||
title="รายละเอียดการออกคำสั่ง"
|
||||
:done="step > 1"
|
||||
>
|
||||
<step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
|
||||
</q-step>
|
||||
|
||||
<q-step :name="2" prefix="2" title="เลือกรายชื่อ" :done="step > 2">
|
||||
<step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
|
||||
</q-step>
|
||||
|
||||
<q-step
|
||||
:name="3"
|
||||
prefix="3"
|
||||
title="รายละเอียดคำสั่งและแนบท้าย"
|
||||
:done="step > 3"
|
||||
>
|
||||
<step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
|
||||
</q-step>
|
||||
</q-stepper>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
221
src/modules/11_discipline/components/4_Order/Step01.vue
Normal file
221
src/modules/11_discipline/components/4_Order/Step01.vue
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
// importStroe
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dialogConfirm } = 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 typeOrder = ref<string>("");
|
||||
const dateYear = ref<number>(2023);
|
||||
const date = ref<Date | null>(null);
|
||||
|
||||
function onSubmit() {
|
||||
next();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-form @submit.prevent="onSubmit">
|
||||
<div class="col-12 row q-pa-lg">
|
||||
<div class="col-xs-12 col-sm-12 q-col-gutter-x-lg row q-col-gutter-y-xs">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
ประเภทคำสั่ง
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="typeOrder"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
|
||||
lazy-rules
|
||||
use-input
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
คำสั่งโดย
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="typeOrder"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
|
||||
lazy-rules
|
||||
use-input
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
เลือกรายการสอบสวนความผิดทางวินัย
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="typeOrder"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกรายการสอบสวนความผิดทางวินัย'}`,
|
||||
]"
|
||||
lazy-rules
|
||||
use-input
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
ผู้มีอำนาจลงนาม
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="typeOrder"
|
||||
placeholder="กรอกผู้มีอำนาจลงนาม"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="row col-xs-7 col-sm-3">
|
||||
<div class="col-6">
|
||||
คำสั่งที่
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="typeOrder"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอรคำสั่งที่'}`]"
|
||||
lazy-rules
|
||||
>
|
||||
</q-input>
|
||||
</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"
|
||||
>
|
||||
<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-sm-3">
|
||||
วันที่มีผลคำสั่ง
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="date"
|
||||
: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="date != null ? date2Thai(date) : null"
|
||||
: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-sm-6">
|
||||
ตำแหน่งผู้มีอำนาจลงนาม
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="typeOrder"
|
||||
placeholder="กรอกตำแหน่งผู้มีอำนาจลงนาม"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
คำสั่งเรื่อง
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="typeOrder"
|
||||
placeholder="กรอกคำสั่งเรื่อง"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
รายละเอียดการกระทำความผิด
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="typeOrder"
|
||||
placeholder="กรอกรายละเอียดการกระทำความผิด"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
|
||||
lazy-rules
|
||||
type="textarea"
|
||||
rows="5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
label="next"
|
||||
color="public"
|
||||
type="submit"
|
||||
class="q-px-md"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
38
src/modules/11_discipline/components/4_Order/Step02.vue
Normal file
38
src/modules/11_discipline/components/4_Order/Step02.vue
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<script setup lang="ts">
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div><h1>step02</h1></div>
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
label="back"
|
||||
color="public"
|
||||
@click="previous()"
|
||||
class="q-px-md"
|
||||
/>
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
label="next"
|
||||
color="public"
|
||||
@click="next()"
|
||||
class="q-px-md"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
30
src/modules/11_discipline/components/4_Order/Step03.vue
Normal file
30
src/modules/11_discipline/components/4_Order/Step03.vue
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<script setup lang="ts">
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div><h1>step03</h1></div>
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
label="back"
|
||||
color="public"
|
||||
@click="previous()"
|
||||
class="q-px-md"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue