ปรับ css หน้าจัดการเพิ่มเติม

This commit is contained in:
Tanyalak 2023-07-27 13:36:02 +07:00
parent 1b4465bf36
commit 1fb7bfd1e6
3 changed files with 84 additions and 50 deletions

View file

@ -1,21 +1,39 @@
<!-- tab เขต/อำเภอ หนาจดการขอมลหล/อมลเกยวกบบคคล --> <!-- tab เขต/อำเภอ หนาจดการขอมลหล/อมลเกยวกบบคคล -->
<template> <template>
<div class="row items-center q-mb-sm q-mr-md q-ml-sm"> <div class="row items-center q-mb-sm q-mr-md q-ml-sm">
<q-btn icon="chevron_left" color="grey" flat dense @click="goToManage()"> <q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="goToManage()"
>
<q-tooltip>กล</q-tooltip> <q-tooltip>กล</q-tooltip>
</q-btn> </q-btn>
<div class="text-body1 text-weight-bold">การจดการขอมลเขต</div> <div class="text-h6 text-dark text-weight-bold">การจดการขอมลเขต</div>
<q-space /> <q-space />
<div @click="goToManage()" class="cursor-pointer"> <q-breadcrumbs class="text-grey" active-color="blue">
การจดการขอมลจงหว <template v-slot:separator>
<span class="text-primary text-weight-bold"> {{ provinceName }}</span> <q-icon
</div> size="1.2em"
name="chevron_right"
color="blue"
/>
</template>
<q-breadcrumbs-el to="/metadata" label="การจัดการข้อมูลจังหวัด" />
<q-breadcrumbs-el label="การจัดการข้อมูลเขต" />
</q-breadcrumbs>
</div> </div>
<q-form ref="myForm"> <q-form ref="myForm">
<q-card flat bordered class="q-pa-md row col-12"> <q-card flat bordered class=" row col-12">
<div class="col-xs-12"> <div class="col-xs-12">
<div class="q-mt-md"> <div class="q-mt-sm">
<data-table <data-table
:rows="rows" :rows="rows"
:columns="columns" :columns="columns"
@ -80,7 +98,7 @@
/> />
<q-icon <q-icon
size="30px" size="30px"
color="grey-8" color="grey-7"
name="chevron_right" name="chevron_right"
@click="clickRow(props.row.id)" @click="clickRow(props.row.id)"
/> />

View file

@ -1,23 +1,38 @@
<!-- tab แขวง/ตำบล หนาจดการขอมลหล/อมลเกยวกบบคคล --> <!-- tab แขวง/ตำบล หนาจดการขอมลหล/อมลเกยวกบบคคล -->
<template> <template>
<div class="row items-center q-mb-sm q-mr-md q-ml-sm"> <div class="row items-center q-mb-sm q-mr-md q-ml-sm">
<q-btn icon="chevron_left" color="grey" flat dense @click="goToProvince()"> <q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="goToProvince()"
>
<q-tooltip>กล</q-tooltip> <q-tooltip>กล</q-tooltip>
</q-btn> </q-btn>
<div class="text-body1 text-weight-bold">การจดการขอมลแขวง/ตำบล</div> <div class="text-h6 text-dark text-weight-bold">การจดการขอมลแขวง/ตำบล</div>
<q-space /> <q-space />
<div @click="goToManage()" class="cursor-pointer"> <q-breadcrumbs class="text-grey" active-color="blue">
การจดการขอมลจงหว / <template v-slot:separator>
</div> <q-icon
<div @click="goToProvince()" class="cursor-pointer"> size="1.2em"
ดการขอมลเขต/อำเภอ name="chevron_right"
<span class="text-primary text-weight-bold"> {{ districtName }}</span> color="blue"
</div> />
</template>
<q-breadcrumbs-el to="/metadata" label="การจัดการข้อมูลจังหวัด" />
<q-breadcrumbs-el @click="goToProvince()" class="cursor-pointer" label="การจัดการข้อมูลเขต" />
<q-breadcrumbs-el label="การจัดการข้อมูลแขวง/ตำบล" />
</q-breadcrumbs>
</div> </div>
<q-card flat bordered class="q-pa-md row col-12"> <q-card flat bordered class="row col-12">
<div class="col-xs-12"> <div class="col-xs-12">
<div class="q-mt-md"> <div class="q-mt-sm">
<q-form ref="myForm"> <q-form ref="myForm">
<data-table <data-table
:rows="rows" :rows="rows"

View file

@ -34,13 +34,12 @@
<q-slide-transition> <q-slide-transition>
<q-card class="row col-12 q-mb-sm" v-show="visible"> <q-card class="row col-12 q-mb-sm" v-show="visible">
<div class="col-12 row"> <div class="col-12 row">
<div class="q-py-md row col-12 no-wrap"> <div class="q-pa-md row col-12 no-wrap">
<!-- การดแสดงจำนวนขอม --> <!-- การดแสดงจำนวนขอม -->
<div class="col-12 row"> <div class="col-12 row">
<div class="text-grey-7 row text-weight-medium col-12 q-pl-md"> <div class="text-grey-7 q-pb-sm row text-weight-medium col-12 items-center">
สรปจำนวนผสมครคดเลอก <!-- สรปจำนวนผสมครคดเลอก -->
<datepicker <datepicker
class="q-pl-sm"
v-model="dateFilter" v-model="dateFilter"
:locale="'th'" :locale="'th'"
autoApply autoApply
@ -76,22 +75,22 @@
</template> </template>
</datepicker> </datepicker>
<q-btn <q-btn
size="md"
icon="mdi-download" icon="mdi-download"
round round
flat flat
color="primary" color="primary"
@click="downloadFileDashboard" @click="downloadFileDashboard"
class="q-ml-sm"
> >
<q-tooltip>ดาวนโหลดสรปขอมลสมครสอบ</q-tooltip> <q-tooltip>ดาวนโหลดสรปขอมลสมครสอบ</q-tooltip>
</q-btn> </q-btn>
<q-btn <q-btn
dense dense
size="12px"
flat flat
round round
color="green" color="green"
class="q-ml-sm"
@click.stop.prevent="clickCandidateList()" @click.stop.prevent="clickCandidateList()"
icon="mdi-clipboard-arrow-down" icon="mdi-clipboard-arrow-down"
> >
@ -100,40 +99,42 @@
<q-btn <q-btn
dense dense
size="12px"
flat flat
round round
color="indigo" color="indigo"
class="q-ml-sm"
@click.stop.prevent="clickPassExam()" @click.stop.prevent="clickPassExam()"
icon="mdi-clipboard-arrow-down" icon="mdi-clipboard-arrow-down"
> >
<q-tooltip>ดาวนโหลดรายชอผสอบแขงขนได</q-tooltip> <q-tooltip>ดาวนโหลดรายชอผสอบแขงขนได</q-tooltip>
</q-btn> </q-btn>
</div> </div>
<div class="row col-12 q-col-gutter-md fit q-pa-md"> <div class="col-12">
<div <div class="row col-12 q-col-gutter-sm fit">
style="width: 25%" <div
v-for="(num, index) in dataNum" style="width: 25%"
:key="index" v-for="(num, index) in dataNum"
> :key="index"
<q-card bordered flat class="row fit cardNum items-center"> >
<div class="col-12 row items-center q-pa-sm"> <q-card bordered flat class="row fit cardNum items-center">
<div <div class="col-12 row items-center q-pa-sm">
:class=" <div
'col-12 text-h5 text-weight-bold text-' + `${num.color}` :class="
" 'col-12 text-h5 text-weight-bold text-' + `${num.color}`
> "
{{ >
num.count != null {{
? num.count.toLocaleString("en-US") num.count != null
: "" ? num.count.toLocaleString("en-US")
}} : ""
}}
</div>
<div class="col-12 text-dark ellipsis">
{{ num.name }}
</div>
</div> </div>
<div class="col-12 text-dark ellipsis"> </q-card>
{{ num.name }} </div>
</div>
</div>
</q-card>
</div> </div>
</div> </div>
</div> </div>