This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-11-22 16:56:40 +07:00
parent 7f3eb5225f
commit 4c35662eed
22 changed files with 632 additions and 343 deletions

View file

@ -10,6 +10,7 @@
dense
:pagination-label="paginationLabel"
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]"
>
<template v-slot:pagination="scope">
งหมด {{ attrs.rows.length }} รายการ
@ -42,7 +43,6 @@ const props = defineProps({
},
});
const pagination = ref({
sortBy: "desc",
descending: false,

View file

@ -73,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "createdAt",
align: "center",
align: "left",
label: "วันที่สร้าง",
sortable: true,
field: "createdAt",
@ -85,7 +85,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "lastUpdatedAt",
align: "center",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "lastUpdatedAt",
@ -308,7 +308,6 @@ onMounted(async () => {
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
/>
</div>
@ -382,7 +381,7 @@ onMounted(async () => {
/>
</div>
<div v-else>
{{ col.value }}
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
@ -397,7 +396,9 @@ onMounted(async () => {
<q-card style="max-width: 350px">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<dialog-header
:tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
:tittle="
dialogStatus == 'edit' ? 'แก้ไขเครื่องราชฯ' : 'เพิ่มเครื่องราชฯ'
"
:close="closeDialog"
/>

View file

@ -82,6 +82,7 @@ const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก
const dialogStatus = ref<string>(""); // ,
const personalName = ref<string>("เขต/อำเภอ"); //label input
const rows = ref<FormDistrict[]>([]); // /
const provinceName = ref<string>(""); //
/**
* fetch อมลรายการ ระดบการเขต/อำเภอ ตาม id ของจงหว
@ -94,6 +95,7 @@ async function fetchData() {
.get(config.API.orgProvince + `/${id.value}`)
.then(async (res) => {
const data = await res.data.result.districts;
provinceName.value = await res.data.result.name;
const list = data.map((e: FormDistrict) => ({
...e,
@ -187,7 +189,7 @@ onMounted(async () => {
class="q-mr-sm"
@click="router.go(-1)"
/>
เขต/อำเภอ
เขต/อำเภอ {{ `(${provinceName})` }}
</div>
<q-card flat bordered>
@ -227,7 +229,6 @@ onMounted(async () => {
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
/>
</div>
@ -283,7 +284,7 @@ onMounted(async () => {
@click="nextPage(props.row.id)"
>
<div>
{{ col.value }}
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>

View file

@ -95,6 +95,7 @@ const subDistrict = ref<string>(""); //แขวง / ตำบล;
const zipCode = ref<string>(""); //
const dialogStatus = ref<string>(""); // ,
const personalName = ref<string>("แขวง/ตำบล"); //label input
const subdistrict = ref<string>(""); ///
/**
* fetch อมลรายการ ระดบการเขต/อำเภอ ตาม id ของแขวง/ตำบล
@ -107,6 +108,7 @@ async function fetchData() {
.get(config.API.orgDistrict + `/${id.value}`)
.then(async (res) => {
const data = await res.data.result.subDistricts;
subdistrict.value = await res.data.result.name;
const list = data.map((e: FormSubDistrict) => ({
...e,
createdAt: e.createdAt ? date2Thai(new Date(e.createdAt)) : "",
@ -192,7 +194,7 @@ onMounted(async () => {
class="q-mr-sm"
@click="router.go(-1)"
/>
แขวง/ตำบล
แขวง/ตำบล {{ `(${subdistrict})` }}
</div>
<q-card flat bordered>
@ -233,7 +235,6 @@ onMounted(async () => {
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
/>
</div>
@ -286,7 +287,7 @@ onMounted(async () => {
</q-td>
<q-td v-for="col in props.cols" :key="col.id">
<div>
{{ col.value }}
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>

View file

@ -68,12 +68,42 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdAt",
align: "left",
label: "วันที่สร้าง",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "lastUpdatedAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "lastUpdatedAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "lastUpdateFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "lastUpdateFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumns = ref<string[]>([
"no",
"posDictName",
"posTypeName",
"posLevelName",
"createdAt",
"lastUpdatedAt",
"lastUpdateFullName",
]);
//
const optionFilter = ref<DataOption[]>([
@ -269,8 +299,58 @@ onMounted(async () => {
});
</script>
<template>
<div class="row col-12 q-mb-sm">
<div class="col-md-2">
<div class="row col-12 q-mb-sm q-col-gutter-sm">
<div class="row col-12">
<q-space />
<div class="row col-md-10 q-col-gutter-sm">
<div class="col-md-4">
<q-select
label="ค้นหาจาก"
v-model="formQuery.type"
:options="optionFilter"
emit-value
dense
map-options
outlined
option-label="name"
option-value="id"
/>
</div>
<div class="col-md-6">
<q-input
ref="searchRef"
v-model="formQuery.keyword"
outlined
dense
lazy-rules
label="คำค้น"
hide-bottom-space
@keydown.enter="fetchData()"
>
<template v-slot:append>
<q-icon
v-if="formQuery.keyword"
name="cancel"
@click="(formQuery.keyword = ''), fetchData()"
class="cursor-pointer"
></q-icon>
</template>
</q-input>
</div>
<div class="row col-md-2">
<q-btn
color="primary"
icon="search"
label="ค้นหา"
class="full-width"
@click="fetchData()"
/>
</div>
</div>
</div>
<div class="row col-12">
<q-btn
id="addComplaints"
for="addComplaints"
@ -282,54 +362,21 @@ onMounted(async () => {
@click="onClickOpenDialog()"
><q-tooltip>เพมตำเเหน </q-tooltip></q-btn
>
</div>
<q-space />
<div class="row col-md-10 q-col-gutter-sm">
<div class="col-md-4">
<q-select
label="ค้นหาจาก"
v-model="formQuery.type"
:options="optionFilter"
emit-value
dense
map-options
outlined
option-label="name"
option-value="id"
/>
</div>
<div class="col-md-6">
<q-input
ref="searchRef"
v-model="formQuery.keyword"
outlined
dense
lazy-rules
label="คำค้น"
hide-bottom-space
@keydown.enter="fetchData()"
>
<template v-slot:append>
<q-icon
v-if="formQuery.keyword"
name="cancel"
@click="(formQuery.keyword = ''), fetchData()"
class="cursor-pointer"
></q-icon>
</template>
</q-input>
</div>
<div class="row col-md-2">
<q-btn
color="primary"
icon="search"
label="ค้นหา"
class="full-width"
@click="fetchData()"
/>
</div>
<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"
style="min-width: 140px"
/>
</div>
</div>

View file

@ -57,11 +57,41 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdAt",
align: "left",
label: "วันที่สร้าง",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "lastUpdatedAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "lastUpdatedAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "lastUpdateFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "lastUpdateFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumns = ref<string[]>([
"posTypeName",
"posTypeShortName",
"posTypeRank",
"createdAt",
"lastUpdatedAt",
"lastUpdateFullName",
]);
//
@ -204,7 +234,6 @@ onMounted(async () => {
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
/>
</div>

View file

@ -70,12 +70,42 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdAt",
align: "left",
label: "วันที่สร้าง",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "lastUpdatedAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "lastUpdatedAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "lastUpdateFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "lastUpdateFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumns = ref<string[]>([
"no",
"posLevelName",
"posTypeName",
"posLevelAuthority",
"createdAt",
"lastUpdatedAt",
"lastUpdateFullName",
]);
const posTypeId = ref<string>(route.params.id.toString()); // id
@ -248,7 +278,6 @@ onMounted(() => {
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
/>
</div>
@ -298,7 +327,7 @@ onMounted(() => {
{{ col.value ? convertPosLevelAuthority(col.value) : "-" }}
</div>
<div v-else>
{{ col.value }}
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
@ -365,7 +394,6 @@ onMounted(() => {
outlined
dense
bg-color="white"
hide-bottom-space
readonly
/>

View file

@ -94,6 +94,33 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdAt",
align: "left",
label: "วันที่สร้าง",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "lastUpdatedAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "lastUpdatedAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "lastUpdateFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "lastUpdateFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumns = ref<string[]>([
"no",
@ -104,6 +131,9 @@ const visibleColumns = ref<string[]>([
"posExecutiveName",
"positionExecutiveField",
"positionArea",
"createdAt",
"lastUpdatedAt",
"lastUpdateFullName",
]);
//
@ -254,8 +284,60 @@ onMounted(async () => {
<template>
<q-form @submit.prevent="fetchData()">
<div class="row col-12 q-mb-sm">
<div class="col-md-2">
<div class="row col-12 q-mb-sm q-col-gutter-sm">
<div class="row col-12">
<q-space />
<div class="row col-md-10 q-col-gutter-sm">
<div class="col-md-4">
<q-select
label="ค้นหาจาก"
v-model="type"
:options="optionFilter"
emit-value
dense
map-options
outlined
option-label="name"
option-value="id"
:clearable="type !== 'ALL'"
@clear="type = 'ALL'"
/>
</div>
<div class="col-md-6">
<q-input
:class="inputEdit(isReadonly)"
v-model="search"
outlined
dense
lazy-rules
label="คำค้น"
hide-bottom-space
>
<template v-slot:append>
<q-icon
v-if="search"
name="cancel"
@click="search = ''"
class="cursor-pointer"
></q-icon>
</template>
</q-input>
</div>
<div class="row col-md-2">
<q-btn
color="primary"
icon="search"
label="ค้นหา"
class="full-width"
type="submit"
/>
</div>
</div>
</div>
<div class="row col-12">
<q-btn
id="addComplaints"
for="addComplaints"
@ -267,55 +349,21 @@ onMounted(async () => {
@click="popupAdd()"
><q-tooltip>เพมตำเเหน </q-tooltip></q-btn
>
</div>
<q-space />
<div class="row col-md-10 q-col-gutter-sm">
<div class="col-md-4">
<q-select
label="ค้นหาจาก"
v-model="type"
:options="optionFilter"
emit-value
dense
map-options
outlined
option-label="name"
option-value="id"
:clearable="type !== 'ALL'"
@clear="type = 'ALL'"
/>
</div>
<div class="col-md-6">
<q-input
:class="inputEdit(isReadonly)"
v-model="search"
outlined
dense
lazy-rules
label="คำค้น"
hide-bottom-space
>
<template v-slot:append>
<q-icon
v-if="search"
name="cancel"
@click="search = ''"
class="cursor-pointer"
></q-icon>
</template>
</q-input>
</div>
<div class="row col-md-2">
<q-btn
color="primary"
icon="search"
label="ค้นหา"
class="full-width"
type="submit"
/>
</div>
<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"
style="min-width: 140px"
/>
</div>
</div>
</q-form>

View file

@ -77,7 +77,13 @@ const columns = [
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
] as const satisfies QTableProps["columns"];
const visibleColumns = ref<string[]>(["posTypeName", "posTypeRank"]);
const visibleColumns = ref<string[]>([
"posTypeName",
"posTypeRank",
"createdAt",
"lastUpdatedAt",
"lastUpdateFullName",
]);
const editId = ref<string>(""); // id
const dialog = ref<boolean>(false); // modal popu ,
@ -201,7 +207,6 @@ onMounted(async () => {
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
/>
</div>
@ -257,7 +262,7 @@ onMounted(async () => {
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.id">
{{ col.value }}
{{ col.value ?? "-" }}
</q-td>
</q-tr>
</template>

View file

@ -21,6 +21,9 @@ const visibleColumns = ref<string[]>([
"no",
"posExecutiveName",
"posExecutivePriority",
"createdAt",
"lastUpdatedAt",
"lastUpdateFullName",
]);
const columns = ref<QTableProps["columns"]>([
{
@ -50,6 +53,33 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdAt",
align: "left",
label: "วันที่สร้าง",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "lastUpdatedAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "lastUpdatedAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "lastUpdateFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "lastUpdateFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const dataEdit = ref<RowListForm>(); //
@ -130,7 +160,6 @@ onMounted(async () => {
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
/>
</div>
@ -197,7 +226,7 @@ onMounted(async () => {
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value }}
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>

View file

@ -126,6 +126,9 @@ const visibleColumns = ref<string[]>([
"posLevelName",
"posLevelRank",
"posLevelAuthority",
"createdAt",
"lastUpdatedAt",
"lastUpdateFullName",
]);
const id = ref<string>(route.params.id.toString()); //
@ -295,7 +298,6 @@ onMounted(async () => {
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
/>
</div>
@ -376,7 +378,7 @@ onMounted(async () => {
{{ posName }}
</div>
<div v-else>
{{ col.value }}
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
@ -458,7 +460,6 @@ onMounted(async () => {
outlined
dense
bg-color="white"
hide-bottom-space
readonly
/>

View file

@ -20,8 +20,8 @@ export const usePositionDataStore = defineStore("PositionData", () => {
posTypeId: e.posTypes?.id,
posTypeName: e.posTypes?.posTypeName,
posTypeRank: e.posTypes?.posTypeRank,
createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
createdAt: e.createdAt ? date2Thai(e.createdAt) : "-",
lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "-",
posLevelAuthority: e.posLevelAuthority
? storeOption.posLevelAuthorityConvert(e.posLevelAuthority)
: "-",

View file

@ -22,8 +22,8 @@ export const usePositionTypeDataStore = defineStore("PositionTypeData", () => {
...e,
posTypes: undefined,
posTypeId: e.posTypes?.id,
createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
createdAt: e.createdAt ? date2Thai(e.createdAt) : "-",
lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "-",
})) satisfies DataRow[];
row.value = list;
}

View file

@ -34,7 +34,7 @@ const columns = ref<QTableProps["columns"]>([
},
{
name: "createdAt",
align: "center",
align: "left",
label: "วันที่สร้าง",
sortable: true,
field: "createdAt",
@ -45,7 +45,7 @@ const columns = ref<QTableProps["columns"]>([
},
{
name: "lastUpdatedAt",
align: "center",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "lastUpdatedAt",
@ -214,7 +214,6 @@ onMounted(async () => {
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
/>
</div>
@ -300,7 +299,11 @@ onMounted(async () => {
<q-card style="max-width: 350px">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<dialog-header
:tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
:tittle="
dialogStatus === 'edit'
? 'แก้ไขประเภทเครื่องราชฯ'
: 'เพิ่มประเภทเครื่องราชฯ'
"
:close="closeDialog"
/>

View file

@ -193,7 +193,7 @@ watch(
dense
v-model="qurey.searchField"
:options="store.searchFieldOption"
label="เลือกที่ต้องการค้นหา"
label="ค้นหาจาก"
emit-value
map-options
option-label="name"
@ -206,7 +206,7 @@ watch(
outlined
dense
v-model="qurey.searchKeyword"
label="คำค้นหา"
label="คำค้น"
clearable
>
<template v-slot:append v-if="!qurey.searchKeyword">

View file

@ -315,8 +315,8 @@ watch(
</script>
<template>
<q-dialog v-model="modal" persistent full-width>
<q-card>
<q-dialog v-model="modal" persistent>
<q-card style="min-width: 80vw">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader
:tittle="isStatusEdit ? 'แก้ไขผู้ใช้งาน' : 'เพิ่มผู้ใช้งาน'"
@ -324,219 +324,222 @@ watch(
/>
<q-separator />
<q-card-section :horizontal="$q.screen.gt.xs">
<!-- รายช -->
<q-card-section class="col-md-8 col-xs-12">
<div class="row q-col-gutter-sm">
<div class="col-12 col-sm-6 col-md-3">
<q-select
label="ค้นหาจาก"
v-model="searchType"
:options="searchTypeOption"
outlined
emit-value
dense
emit-option
option-label="name"
option-value="id"
map-options
/>
</div>
<div class="col-12 col-sm-6 col-md-9">
<q-input
ref="searchRef"
v-model="keyword"
outlined
clearable
hide-bottom-space
dense
label="คำค้น"
>
<template v-slot:after>
<q-btn
color="primary"
icon="search"
label="ค้นหา"
class="full-width q-py-sm q-px-md"
@click="(query.page = 1), fetchListUser()"
>
</q-btn>
</template>
</q-input>
</div>
</div>
<div class="col-12 q-pt-sm">
<d-table
ref="table"
:columns="columns"
:rows="rows"
row-key="id"
flat
bordered
:paging="true"
dense
:rows-per-page-options="[10, 25, 50, 100]"
selection="single"
v-model:selected="selected"
@update:pagination="updatePagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width></q-th>
<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">
<q-td>
<q-checkbox
keep-color
<q-card-section :horizontal="$q.screen.gt.md" style="padding: 0px">
<div class="row col-12 q-gutter-sm">
<!-- รายช -->
<div class="q-pa-md col-md-8 col-xs-12">
<div class="row q-col-gutter-sm">
<div class="col-12 col-sm-6 col-md-3">
<q-select
label="ค้นหาจาก"
v-model="searchType"
:options="searchTypeOption"
outlined
emit-value
dense
emit-option
option-label="name"
option-value="id"
map-options
/>
</div>
<div class="col-12 col-sm-6 col-md-9">
<q-input
ref="searchRef"
v-model="keyword"
outlined
clearable
hide-bottom-space
dense
label="คำค้น"
>
<template v-slot:after>
<q-btn
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
งหมด {{ total }} รายการ
<q-pagination
v-model="query.page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="fetchListUser"
></q-pagination>
</template>
</d-table>
</div>
</q-card-section>
<q-separator vertical />
<!-- input -->
<q-card-section class="col-md-4 col-xs-12">
<div class="row q-col-gutter-md">
<div class="col-12">
<q-input
v-model="formData.username"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผู้ใช้งาน'}`,]"
lazy-rules
hide-bottom-space
class="inputgreen"
label="ชื่อผู้ใช้งาน"
readonly
>
</q-input>
icon="search"
label="ค้นหา"
class="full-width q-py-sm q-px-md"
@click="(query.page = 1), fetchListUser()"
>
</q-btn>
</template>
</q-input>
</div>
</div>
<div class="col-12" v-if="!isStatusEdit">
<q-input
v-model="formData.password"
outlined
<div class="col-12 q-pt-sm">
<d-table
ref="table"
:columns="columns"
:rows="rows"
row-key="id"
flat
bordered
:paging="true"
dense
:type="isPwd ? 'password' : 'text'"
:rules="[(val:string) => !!val || `${'กรุณากรอกรหัสผู้ใช้งาน'}`,]"
lazy-rules
label="รหัสผู้ใช้งาน"
hide-bottom-space
class="inputgreen"
:rows-per-page-options="[10, 25, 50, 100]"
selection="single"
v-model:selected="selected"
@update:pagination="updatePagination"
>
<template v-slot:append>
<q-icon
:name="isPwd ? 'visibility_off' : 'visibility'"
class="cursor-pointer"
@click="isPwd = !isPwd"
/>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width></q-th>
<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>
</q-input>
</div>
<div class="col-12">
<q-input
v-model="formData.firstName"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ'}`,]"
lazy-rules
hide-bottom-space
class="inputgreen"
label="ชื่อ"
readonly
>
</q-input>
</div>
<div class="col-12">
<q-input
v-model="formData.lastName"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกนามสกุล'}`,]"
lazy-rules
hide-bottom-space
class="inputgreen"
label="นามสกุล"
readonly
>
</q-input>
</div>
<div class="col-12">
<q-input
v-model="formData.email"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอก Email'}`,]"
lazy-rules
hide-bottom-space
class="inputgreen"
label="Email"
type="email"
>
</q-input>
</div>
<div class="col-12" v-if="!isStatusEdit">
<q-select
v-model="roles"
outlined
label="role"
dense
option-label="name"
option-value="id"
:options="roleOptions"
class="inputgreen"
map-options
hide-bottom-space
lazy-rules
use-chips
multiple
use-input
:rules="[(val:string) => !!val && val.length > 0|| `${'กรุณาเลือก Role'}`,]"
/>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
งหมด {{ total }} รายการ
<q-pagination
v-model="query.page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="fetchListUser"
></q-pagination>
</template>
</d-table>
</div>
</div>
</q-card-section>
<q-separator vertical />
<!-- input -->
<div class="q-pa-md col">
<div class="row q-col-gutter-md">
<div class="col-12">
<q-input
v-model="formData.username"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผู้ใช้งาน'}`,]"
lazy-rules
hide-bottom-space
class="inputgreen"
label="ชื่อผู้ใช้งาน"
readonly
>
</q-input>
</div>
<div class="col-12" v-if="!isStatusEdit">
<q-input
v-model="formData.password"
outlined
dense
:type="isPwd ? 'password' : 'text'"
:rules="[(val:string) => !!val || `${'กรุณากรอกรหัสผู้ใช้งาน'}`,]"
lazy-rules
label="รหัสผู้ใช้งาน"
hide-bottom-space
class="inputgreen"
>
<template v-slot:append>
<q-icon
:name="isPwd ? 'visibility_off' : 'visibility'"
class="cursor-pointer"
@click="isPwd = !isPwd"
/>
</template>
</q-input>
</div>
<div class="col-12">
<q-input
v-model="formData.firstName"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ'}`,]"
lazy-rules
hide-bottom-space
class="inputgreen"
label="ชื่อ"
readonly
>
</q-input>
</div>
<div class="col-12">
<q-input
v-model="formData.lastName"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกนามสกุล'}`,]"
lazy-rules
hide-bottom-space
class="inputgreen"
label="นามสกุล"
readonly
>
</q-input>
</div>
<div class="col-12">
<q-input
v-model="formData.email"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอก อีเมล'}`,]"
lazy-rules
hide-bottom-space
class="inputgreen"
label="อีเมล"
type="email"
>
</q-input>
</div>
<div class="col-12" v-if="!isStatusEdit">
<q-select
v-model="roles"
outlined
label="role"
dense
option-label="name"
option-value="id"
:options="roleOptions"
class="inputgreen"
map-options
hide-bottom-space
lazy-rules
use-chips
multiple
use-input
:rules="[(val:string) => !!val && val.length > 0|| `${'กรุณาเลือก Role'}`,]"
/>
</div>
</div>
</div>
</div>
</q-card-section>
<q-separator />

View file

@ -62,7 +62,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "email",
align: "left",
label: "Email",
label: "อีเมล",
sortable: true,
field: "email",
headerStyle: "font-size: 14px",

View file

@ -6,6 +6,7 @@ import http from "@/plugins/http";
import config from "@/app.config";
import { usePermissionsStore } from "@/modules/02_users/stores/permissions";
import { useCounterMixin } from "@/stores/mixin";
import { tokenParsed } from "@/plugins/auth";
/** importType*/
import type { QTableProps } from "quasar";
@ -69,6 +70,15 @@ const expanded = ref<string[]>([]); // แสดงข้อมูลในโ
const nodeId = ref<string>(""); // id
/** Table*/
const visibleColumns = ref<string[]>([
"no",
"posMasterNo",
"positionName",
"posTypeName",
"posLevelName",
"positionIsSelected",
"authRoleName",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -277,6 +287,11 @@ async function fetchOrganizationActive() {
* @param id id โครงสราง
*/
async function fetchDataTree(id: string) {
const tokenParsedData = await tokenParsed();
const isSuperAdmin = tokenParsedData.role.includes("SUPER_ADMIN");
if (!isSuperAdmin) {
nodes.value = [];
}
showLoader();
await http
.get(config.API.orgByid(id.toString()))
@ -284,6 +299,7 @@ async function fetchDataTree(id: string) {
const data = await res.data.result;
nodes.value.push(...data);
nodes.value[0].orgRevisionId = id;
nodeId.value = nodes.value[0].orgTreeId;
await fetchDataTable(reqMaster.id, id, reqMaster.type);
})
.catch((err) => {
@ -622,6 +638,22 @@ onMounted(() => {
</template>
</q-input>
</div>
<div>
<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"
style="min-width: 140px"
/>
</div>
</div>
</q-toolbar>
<d-table
@ -636,6 +668,7 @@ onMounted(() => {
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
v-model:pagination="pagination"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">

View file

@ -6,6 +6,7 @@ import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStoreUser } from "@/modules/02_users/stores/main";
import { tokenParsed } from "@/plugins/auth";
import type { QTableProps } from "quasar";
import type {
@ -59,6 +60,12 @@ const personId = ref<string>("");
* เกบขอมลโครงสรางไวใน nodeTree
*/
async function fatchOrg() {
const tokenParsedData = await tokenParsed();
const isSuperAdmin = tokenParsedData.role.includes("SUPER_ADMIN");
if (!isSuperAdmin) {
nodeTree.value = [];
}
showLoader();
await http
.get(config.API.permissionOrg)
@ -127,6 +134,7 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
]);
const visibleColumns = ref<string[]>(["fullName", "orgNew"]);
const modalAdd = ref<boolean>(false); // modal
/**
@ -363,6 +371,23 @@ onMounted(async () => {
</div>
</div>
<div class="row col-12 q-mt-sm">
<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"
style="min-width: 140px"
/>
</div>
<div class="col-12 q-mt-sm">
<d-table
:columns="columns"
@ -374,6 +399,7 @@ onMounted(async () => {
dense
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">

View file

@ -5,6 +5,7 @@ import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { tokenParsed } from "@/plugins/auth";
/** importType*/
import type { QTableProps } from "quasar";
@ -66,6 +67,15 @@ const nodeId = ref<string>(""); // id โหนด
const isOfficer = ref<boolean>(false); // columns .
/** Table*/
const visibleColumns = ref<string[]>([
"no",
"posMasterNo",
"positionName",
"posTypeName",
"posLevelName",
"positionIsSelected",
"isPosMasterAssign",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -260,6 +270,11 @@ async function fetchOrganizationActive() {
* @param id id โครงสราง
*/
async function fetchDataTree(id: string) {
const tokenParsedData = await tokenParsed();
const isSuperAdmin = tokenParsedData.role.includes("SUPER_ADMIN");
if (!isSuperAdmin) {
nodes.value = [];
}
showLoader();
await http
.get(config.API.orgByid(id.toString()))
@ -267,6 +282,7 @@ async function fetchDataTree(id: string) {
const data = await res.data.result;
nodes.value.push(...data);
nodes.value[0].orgRevisionId = id;
nodeId.value = nodes.value[0].orgTreeId;
await fetchDataTable(reqMaster.id, id, reqMaster.type);
})
.catch((err) => {
@ -553,6 +569,22 @@ onMounted(() => {
</template>
</q-input>
</div>
<div>
<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"
style="min-width: 140px"
/>
</div>
</div>
</q-toolbar>
<d-table
@ -567,6 +599,7 @@ onMounted(() => {
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
v-model:pagination="pagination"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -744,7 +777,7 @@ onMounted(() => {
</div>
<div v-else class="text-body2">
{{ col.value }}
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>

View file

@ -143,7 +143,7 @@ onMounted(async () => {
<q-card flast bordered class="q-pa-md">
<div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
<q-btn flat round dense color="primary" icon="add" @click="openDialog">
<q-tooltip>เพ Role </q-tooltip>
<q-tooltip>เพทธ </q-tooltip>
</q-btn>
<q-space />

View file

@ -314,6 +314,7 @@ onMounted(async () => {
dense
@click="onDialogEdit(item)"
/>
<q-tooltip>แกไข</q-tooltip>
</q-item-section>
</q-item>
</q-list>