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

แก้ไข merg ออกคำสั่ง

Browse source
This commit is contained in:
Thanit Konmek 2023-06-28 12:13:56 +07:00
parent f09079fc7d
commit 237ab389ad
1 changed files with 164 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

326
src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
View file

@ -1,11 +1,10 @@
<template> <template>
<div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div> <div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div>
<div> <div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md"> <q-card flat bordered class="col-12 q-mt-sm">
<div class="row q-col-gutter-md"> <div class="row q-pa-md">
<div class="row col-12 q-col-gutter-sm"> <div class="col-xs-12 col-sm-3 col-md-2">
<q-select <q-select
class="col-xs-10 col-sm-3 col-md-2"
v-model="fiscalyear" v-model="fiscalyear"
label="ปีงบประมาณ" label="ปีงบประมาณ"
dense dense
@ -42,7 +41,6 @@
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-2"> <div class="col-xs-12 col-sm-3 col-md-2">
<q-input <q-input
class="col-xs-12 col-sm-3 col-md-2"
standout standout
dense dense
v-model="filterKeyword" v-model="filterKeyword"
@ -50,6 +48,7 @@
outlined outlined
debounce="300" debounce="300"
placeholder="ค้นหา" placeholder="ค้นหา"
class="q-ml-sm"
> >
<template v-slot:append> <template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" /> <q-icon v-if="filterKeyword == ''" name="search" />
@ -61,8 +60,9 @@
/> />
</template> </template>
</q-input> </q-input>
</div>
<div class="col-xs-12 col-sm-3 col-md-2">
<q-select <q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="visibleColumns" v-model="visibleColumns"
multiple multiple
outlined outlined
@ -75,13 +75,15 @@
option-value="name" option-value="name"
options-cover options-cover
style="min-width: 150px" style="min-width: 150px"
class="gt-xs q-ml-sm"
/> />
</div> </div>
<div class="col-12"> </div>
<q-card bordered class="col-12 filter-card q-pa-sm"> <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
<div class="row col-12 q-col-gutter-sm"> <q-card bordered class="col-12 filter-card">
<div class="row q-pa-sm">
<div class="col-xs-12 col-sm-3 col-md- q-pl-sm">
<q-select <q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="OrderType" v-model="OrderType"
label="ประเภท" label="ประเภท"
dense dense
@ -98,8 +100,9 @@
:hide-dropdown-icon="false" :hide-dropdown-icon="false"
@update:model-value="searchFilterTable" @update:model-value="searchFilterTable"
/> />
</div>
<div class="col-xs-12 col-sm-3 col-md- q-pl-sm">
<q-select <q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="OrderStatus" v-model="OrderStatus"
label="สถานะ" label="สถานะ"
dense dense
@ -117,118 +120,117 @@
@update:model-value="searchFilterTable" @update:model-value="searchFilterTable"
/> />
</div> </div>
</q-card> </div>
</div> </q-card>
<div class="col-12"> </div>
<q-table <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
ref="table" <q-table
:columns="columns" ref="table"
:rows="UpdataData" :columns="columns"
:filter="filterKeyword" :rows="UpdataData"
row-key="Order" :filter="filterKeyword"
flat row-key="Order"
bordered flat
:paging="true" bordered
dense :paging="true"
class="custom-header-table" dense
v-bind="attrs" class="custom-header-table"
:visible-columns="visibleColumns" v-bind="attrs"
:pagination-label="paginationLabel" :visible-columns="visibleColumns"
v-model:pagination="pagination" :pagination-label="paginationLabel"
> v-model:pagination="pagination"
<template v-slot:header="props"> >
<q-tr :props="props"> <template v-slot:header="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props"> <q-tr :props="props">
<span class="text-weight-medium">{{ col.label }}</span> <q-th v-for="col in props.cols" :key="col.name" :props="props">
</q-th> <span class="text-weight-medium">{{ col.label }}</span>
<q-th auto-width /> </q-th>
</q-tr> <q-th auto-width />
</template> </q-tr>
<template v-slot:body="props"> </template>
<q-tr :props="props" class="cursor-pointer"> <template v-slot:body="props">
<q-td <q-tr :props="props" class="cursor-pointer">
key="Order" <q-td
:props="props" key="Order"
@click="redirectToPage(props.row.Order)" :props="props"
> @click="redirectToPage(props.row.Order)"
{{ props.row.Order }} >
</q-td> {{ props.row.Order }}
<q-td </q-td>
key="OrderNum" <q-td
:props="props" key="OrderNum"
@click="redirectToPage(props.row.Order)" :props="props"
> @click="redirectToPage(props.row.Order)"
{{ props.row.OrderNum }} >
</q-td> {{ props.row.OrderNum }}
<q-td </q-td>
key="OrderDate" <q-td
:props="props" key="OrderDate"
@click="redirectToPage(props.row.Order)" :props="props"
> @click="redirectToPage(props.row.Order)"
{{ props.row.OrderDate }} >
</q-td> {{ props.row.OrderDate }}
<q-td </q-td>
key="OrderBy" <q-td
:props="props" key="OrderBy"
@click="redirectToPage(props.row.Order)" :props="props"
> @click="redirectToPage(props.row.Order)"
{{ props.row.OrderBy }} >
</q-td> {{ props.row.OrderBy }}
<q-td </q-td>
key="Signer" <q-td
:props="props" key="Signer"
@click="redirectToPage(props.row.Order)" :props="props"
> @click="redirectToPage(props.row.Order)"
{{ props.row.Signer }} >
</q-td> {{ props.row.Signer }}
<q-td </q-td>
key="OrderStatus" <q-td
:props="props" key="OrderStatus"
@click="redirectToPage(props.row.Order)" :props="props"
> @click="redirectToPage(props.row.Order)"
<q-icon >
v-if="props.row.OrderStatus == 'ยังไม่ได้ออกคำสั่ง'" <q-icon
name="mdi-timer-sand" v-if="props.row.OrderStatus == 'ยังไม่ได้ออกคำสั่ง'"
color="orange" name="hourglass_top"
class="text-h6" color="orange"
/> class="text-h5"
<q-icon />
v-if="props.row.OrderStatus == 'ออกคำสั่งแล้ว'" <q-icon
name="mdi-check" v-if="props.row.OrderStatus == 'ออกคำสั่งแล้ว'"
color="positive" name="mdi-check"
class="text-h6" color="positive"
/> class="text-h5"
</q-td> />
</q-td>
<q-td auto-width> <q-td auto-width>
<q-btn <q-btn
dense dense
size="12px" size="12px"
flat flat
round round
color="red" color="red"
@click="clickDelete(props.row.id)" @click="clickDelete(props.row.id)"
icon="mdi-delete" icon="mdi-delete"
> >
<q-tooltip>ลบข้อมูล</q-tooltip> <q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn> </q-btn>
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
<template v-slot:pagination="scope"> <template v-slot:pagination="scope">
<q-pagination <q-pagination
v-model="pagination.page" v-model="pagination.page"
active-color="primary" color="primary"
color="dark" :max="scope.pagesNumber"
:max="scope.pagesNumber" :max-pages="5"
:max-pages="5" size="sm"
size="sm" boundary-links
boundary-links direction-links
direction-links ></q-pagination>
></q-pagination> </template>
</template> </q-table>
</q-table>
</div>
</div> </div>
</q-card> </q-card>
</div> </div>
@ -250,7 +252,7 @@ const pagination = ref({
sortBy: "desc", sortBy: "desc",
descending: false, descending: false,
page: 1, page: 1,
rowsPerPage: 5, rowsPerPage: 10,
}); });
const mixin = useCounterMixin(); const mixin = useCounterMixin();
@ -327,7 +329,7 @@ const columns = ref<QTableProps["columns"]>([
}, },
{ {
name: "OrderStatus", name: "OrderStatus",
align: "center", align: "left",
label: "สถานะคำสั่ง", label: "สถานะคำสั่ง",
sortable: false, sortable: false,
field: "OrderStatus", field: "OrderStatus",
@ -353,9 +355,9 @@ const columns = ref<QTableProps["columns"]>([
const rows = ref<FormOrderPlacementMainData[]>([ const rows = ref<FormOrderPlacementMainData[]>([
{ {
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้", Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2566", OrderNum: "1/2565",
fiscalYear: 2566, fiscalYear: 2565,
OrderDate: "30 พ.ค. 2566", OrderDate: "30 พ.ค. 2565",
OrderBy: "สำนักงาน กทม.", OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ", Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ยังไม่ได้ออกคำสั่ง", OrderStatus: "ยังไม่ได้ออกคำสั่ง",
@ -364,9 +366,39 @@ const rows = ref<FormOrderPlacementMainData[]>([
{ {
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้", Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2566", OrderNum: "1/2565",
fiscalYear: 2566, fiscalYear: 2565,
OrderDate: "30 พ.ค. 2566", OrderDate: "30 พ.ค. 2565",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ยังไม่ได้ออกคำสั่ง",
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2565",
fiscalYear: 2565,
OrderDate: "30 พ.ค. 2565",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ยังไม่ได้ออกคำสั่ง",
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2565",
fiscalYear: 2565,
OrderDate: "30 พ.ค. 2565",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ยังไม่ได้ออกคำสั่ง",
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2565",
fiscalYear: 2565,
OrderDate: "30 พ.ค. 2565",
OrderBy: "สำนักงาน กทม.", OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ", Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ยังไม่ได้ออกคำสั่ง", OrderStatus: "ยังไม่ได้ออกคำสั่ง",
@ -399,37 +431,7 @@ const rows = ref<FormOrderPlacementMainData[]>([
OrderDate: "30 พ.ค. 2565", OrderDate: "30 พ.ค. 2565",
OrderBy: "สำนักงาน กทม.", OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ", Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ออกคำสั่งแล้ว", OrderStatus: "ยังไม่ได้ออกคำสั่ง",
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2565",
fiscalYear: 2565,
OrderDate: "30 พ.ค. 2565",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ออกคำสั่งแล้ว",
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2565",
fiscalYear: 2565,
OrderDate: "30 พ.ค. 2565",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ออกคำสั่งแล้ว",
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2565",
fiscalYear: 2565,
OrderDate: "30 พ.ค. 2565",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ออกคำสั่งแล้ว",
OrderType: "คำสั่งบรรจุและแต่งตั้ง", OrderType: "คำสั่งบรรจุและแต่งตั้ง",
}, },
{ {
@ -701,7 +703,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
<style lang="scss" scope> <style lang="scss" scope>
.filter-card { .filter-card {
background-color: #f1f1f1b0; background-color: #ededed;
} }
.toggle-expired-account { .toggle-expired-account {