ปรับ ui ตาราง,Layout ระบบ วินัย เพิ่มเติม

This commit is contained in:
Tanyalak 2023-10-20 16:50:28 +07:00
parent 7367123a09
commit 708c4c318c
9 changed files with 305 additions and 303 deletions

View file

@ -116,7 +116,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
</script>
<template>
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-sm">
<div class="col-2">
<datepicker
menu-class-name="modalfix"

View file

@ -85,7 +85,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
</script>
<template>
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-sm">
<div class="col-2">
<q-select
emit-value

View file

@ -62,53 +62,55 @@ function redirectToPageadd() {
<template>
<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
id="addComplaints"
flat
dense
round
color="primary"
icon="mdi-plus"
@click="redirectToPageadd()"
><q-tooltip>เพมเรองรองเรยน </q-tooltip></q-btn
>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div>
<q-btn
id="addComplaints"
size="12px"
flat
round
color="primary"
icon="mdi-plus"
@click="redirectToPageadd()"
><q-tooltip>เพมเรองรองเรยน </q-tooltip></q-btn
>
</div>
<q-space />
<div class="col-2">
<q-input
id="filterTable"
for="filterTable"
dense
outlined
v-model="filterTable"
label="ค้นหา"
/>
</div>
<div class="col-2">
<q-select
id="visibleColumns"
for="visibleColumns"
v-model="complainstStore.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="complainstStore.columns"
option-value="name"
options-cover
/>
</div>
</q-toolbar>
<q-input
class="col-xs-12 col-sm-3 col-md-2"
id="filterTable"
for="filterTable"
dense
outlined
v-model="filterTable"
label="ค้นหา"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
id="visibleColumns"
for="visibleColumns"
v-model="complainstStore.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="complainstStore.columns"
option-value="name"
options-cover
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<TableComplaint :filterTable="filterTable" />
</div>
</q-card>
</div>
</q-card>
</template>
<style scoped></style>

View file

@ -87,115 +87,117 @@ onMounted(() => {
รายการสบสวนขอเทจจร
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div>
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพมรายการสบสวนขอเทจจร</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="dataInvestigate.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="dataInvestigate.columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<d-table
ref="table"
:columns="dataInvestigate.columns"
:rows="dataInvestigate.rows"
:filter="filterKeyword"
row-key="interrogated"
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div>
<q-btn
@click="clickAdd()"
size="12px"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="dataInvestigate.visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
round
color="add"
icon="mdi-plus"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
style="padding: 10px; color: #35373c; font-weight: 500"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<q-td v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</q-td>
<div>
{{ col.value }}
</div>
<q-tooltip>เพมรายการสบสวนขอเทจจร</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="dataInvestigate.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="dataInvestigate.columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<d-table
ref="table"
:columns="dataInvestigate.columns"
:rows="dataInvestigate.rows"
:filter="filterKeyword"
row-key="interrogated"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="dataInvestigate.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"
style="color: #000000; font-weight: 500"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<q-td v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</q-td>
<q-td auto-width style="font-size: 14px; width: 10rem">
{{ props.row.active }}
</q-td>
<q-td auto-width>
<div>
{{ col.value }}
</div>
</q-td>
<q-td auto-width style="font-size: 14px; width: 10%;">
{{ props.row.active }}
</q-td>
<q-td auto-width>
<div>
<q-btn
v-if="props.row.status === 'ยุติเรื่อง'"
class="q-px-xl q-py-xs text-white no-shadow"
style="background-color: #00aa86; border-radius: 6px"
dense
outline
color="deep-orange-7"
class="q-px-sm"
>ยกเลกยเรอง</q-btn
>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</q-card>
</template>

View file

@ -103,7 +103,9 @@ const clickAdd = () => {
<q-btn
v-if="props.row.active === 'ยืนยันผล'"
color="primary"
class="q-px-md q-py-xs"
class="q-px-md"
dense
unelevated
>นยนผล</q-btn
>
<span v-else>{{ props.row.active }}</span>

View file

@ -14,7 +14,6 @@
</q-btn>
</div>
<q-space />
<div class="items-center q-gutter-sm" style="display: flex">
<!-- นหาขอความใน table -->
<q-input
standout
@ -26,6 +25,7 @@
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="col-xs-12 col-sm-3 col-md-2"
>
<template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" />
@ -50,12 +50,10 @@
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs"
class="col-xs-12 col-sm-3 col-md-2 gt-xs"
>
<template> </template>
</q-select>
</div>
</div>
<d-table
ref="table"

View file

@ -60,51 +60,53 @@ function redirectToPageadd() {
<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
id="addDisciplineOrder"
flat
dense
round
color="primary"
icon="mdi-plus"
@click="redirectToPageadd()"
><q-tooltip>เพมรายการออกคำสงลงโทษทางว </q-tooltip></q-btn
>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div>
<q-btn
id="addDisciplineOrder"
flat
size="12px"
round
color="primary"
icon="mdi-plus"
@click="redirectToPageadd()"
><q-tooltip>เพมรายการออกคำสงลงโทษทางว </q-tooltip></q-btn
>
</div>
<q-space />
<div class="col-2">
<q-input
for="filterTable"
dense
outlined
v-model="filterTable"
label="ค้นหา"
/>
</div>
<div class="col-2">
<q-select
for="visibleColumns"
v-model="OrderStore.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="OrderStore.columns"
option-value="name"
options-cover
/>
</div>
</q-toolbar>
<q-input
class="col-xs-12 col-sm-3 col-md-2"
for="filterTable"
dense
outlined
v-model="filterTable"
label="ค้นหา"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
for="visibleColumns"
class="col-xs-12 col-sm-3 col-md-2"
v-model="OrderStore.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="OrderStore.columns"
option-value="name"
options-cover
/>
</div>
<div class="col-12">
<tableOrder :filterTable="filterTable" />
</div>
</q-card>
</div>
</template>
<style scoped></style>

View file

@ -111,114 +111,112 @@ onMounted(() => {});
รายการชองทางการรองเรยน
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div>
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพมชองทางการรองเรยน</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div>
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-tooltip>เพมชองทางการรองเรยน</q-tooltip>
</q-btn>
</div>
<q-space />
<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
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<d-table
:columns="columns"
:rows="rows"
row-key="id"
:filter="filterKeyword"
: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-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="subject" :props="props">
{{ props.row.subject }}
</q-td>
<q-td>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบขอม</q-tooltip>
</q-btn>
</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-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<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
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<d-table
:columns="columns"
:rows="rows"
row-key="id"
:filter="filterKeyword"
: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-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="subject" :props="props">
{{ props.row.subject }}
</q-td>
<q-td>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบขอม</q-tooltip>
</q-btn>
</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>
</template>

View file

@ -84,8 +84,7 @@ function clickDelete(id: string) {
รายการชอกรรมการ
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div>
<q-btn @click="$router.push(`/discipline/director/add`)" size="12px" flat round color="add" icon="mdi-plus">
<q-tooltip>เพมรายชอกรรมการ</q-tooltip>
@ -138,6 +137,5 @@ function clickDelete(id: string) {
</d-table>
</div>
</div>
</q-card>
</template>