Refactoring code module 02_users
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
7540311518
commit
c11ff006eb
12 changed files with 301 additions and 1363 deletions
|
|
@ -1,742 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type {
|
||||
DataOption,
|
||||
SystemList,
|
||||
DataSystem,
|
||||
} from "@/modules/02_users/interface/index/Main";
|
||||
import type { SysList } from "@/modules/02_users/interface/response/Main";
|
||||
import type { FormRole } from "@/modules/02_users/interface/request/Main";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const { dialogConfirm, messageError, showLoader, hideLoader, success } =
|
||||
useCounterMixin();
|
||||
|
||||
const attrPrivilegeOp = ref<DataOption[]>([
|
||||
{
|
||||
id: "ROOT",
|
||||
name: "มีสิทธิ์เข้าถึงข้อมูลในทุกระดับ",
|
||||
},
|
||||
{
|
||||
id: "CHILD",
|
||||
name: "มีสิทธิ์เข้าถึงข้อมูลเฉพาะระดับชั้นปัจจุบันของตัวเอง",
|
||||
},
|
||||
{
|
||||
id: "NORMAL",
|
||||
name: "มีสิทธิ์เข้าถึงข้อมูลเฉพาะในระดับชั้นตัวเองเท่านั้น",
|
||||
},
|
||||
{
|
||||
id: "SPECIFIC",
|
||||
name: "มีสิทธิ์เข้าถึงข้อมูลเฉพาะเจาะจง",
|
||||
},
|
||||
]);
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const roleId = ref<string>(route.params.id.toString());
|
||||
const formData = reactive<FormRole>({
|
||||
roleName: "",
|
||||
roleDescription: "",
|
||||
});
|
||||
|
||||
const sysListMain = ref<SysList[]>([]);
|
||||
const systemLists = ref<SystemList[]>([]);
|
||||
|
||||
function fetchSys() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.managementSysList)
|
||||
.then((res) => {
|
||||
sysListMain.value = res.data.result;
|
||||
fetchDataRole();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function fetchDataRole() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.managementAuth + `/${roleId.value}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
const sysList = data.roleAttributes;
|
||||
formData.roleName = data.roleName;
|
||||
formData.roleDescription = data.roleDescription;
|
||||
|
||||
const root: SystemList[] = [];
|
||||
const chil: SystemList[] = [];
|
||||
sysListMain.value.forEach((item: any) => {
|
||||
if (item.children.length !== 0) {
|
||||
item.children.forEach((q: SystemList) => {
|
||||
const findChil = sysList.find(
|
||||
(e: DataSystem) => e.authSysId === q.id
|
||||
);
|
||||
chil.push({
|
||||
...q,
|
||||
selected: findChil ? true : false,
|
||||
attrOwnership: findChil ? findChil.attrOwnership : "",
|
||||
attrIsCreate: findChil ? findChil.attrIsCreate : false,
|
||||
attrIsList: findChil ? findChil.attrIsList : false,
|
||||
attrIsGet: findChil ? findChil.attrIsGet : false,
|
||||
attrIsUpdate: findChil ? findChil.attrIsUpdate : false,
|
||||
attrIsDelete: findChil ? findChil.attrIsDelete : false,
|
||||
attrPrivilege: findChil ? findChil.attrPrivilege : "",
|
||||
});
|
||||
});
|
||||
const findMainRoot = sysList.find(
|
||||
(e: DataSystem) => e.parentNode === item.id
|
||||
);
|
||||
|
||||
const arrayChil = chil.filter((a) => a.parentId === item.id);
|
||||
if (arrayChil) {
|
||||
root.push({
|
||||
...item,
|
||||
selected: findMainRoot ? true : false,
|
||||
attrOwnership: "",
|
||||
attrIsCreate: false,
|
||||
attrIsList: false,
|
||||
attrIsGet: false,
|
||||
attrIsUpdate: false,
|
||||
attrIsDelete: false,
|
||||
attrPrivilege: "",
|
||||
children: arrayChil,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
const findRoot = sysList.find(
|
||||
(e: DataSystem) => e.authSysId === item.id
|
||||
);
|
||||
root.push({
|
||||
...item,
|
||||
selected: findRoot ? true : false,
|
||||
attrOwnership: findRoot ? findRoot.attrOwnership : "",
|
||||
attrIsCreate: findRoot ? findRoot.attrIsCreate : false,
|
||||
attrIsList: findRoot ? findRoot.attrIsList : false,
|
||||
attrIsGet: findRoot ? findRoot.attrIsGet : false,
|
||||
attrIsUpdate: findRoot ? findRoot.attrIsUpdate : false,
|
||||
attrIsDelete: findRoot ? findRoot.attrIsDelete : false,
|
||||
attrPrivilege: findRoot ? findRoot.attrPrivilege : "",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
systemLists.value = root;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
const filterList: any = systemLists.value.filter(
|
||||
(e: any) => e.selected === true
|
||||
);
|
||||
const arrayRoleAttrs = filterList.flatMap((e: any) => {
|
||||
if (e.children.length === 0) {
|
||||
return {
|
||||
parentNode: e.id,
|
||||
attrPrivilege: e.attrPrivilege,
|
||||
attrIsDelete: e.attrIsDelete,
|
||||
attrIsUpdate: e.attrIsUpdate,
|
||||
attrIsGet: e.attrIsGet,
|
||||
attrIsList: e.attrIsList,
|
||||
attrIsCreate: e.attrIsCreate,
|
||||
attrOwnership: e.attrOwnership,
|
||||
authSysId: e.id,
|
||||
};
|
||||
} else {
|
||||
const filterListChil = e.children.filter(
|
||||
(e: any) =>
|
||||
e.selected === true &&
|
||||
e.attrOwnership !== "" &&
|
||||
e.attrPrivilege !== ""
|
||||
);
|
||||
return filterListChil.map((i: any) => ({
|
||||
parentNode: e.id,
|
||||
attrPrivilege: i.attrPrivilege,
|
||||
attrIsDelete: i.attrIsDelete,
|
||||
attrIsUpdate: i.attrIsUpdate,
|
||||
attrIsGet: i.attrIsGet,
|
||||
attrIsList: i.attrIsList,
|
||||
attrIsCreate: i.attrIsCreate,
|
||||
attrOwnership: i.attrOwnership,
|
||||
authSysId: i.id,
|
||||
}));
|
||||
}
|
||||
});
|
||||
const body = {
|
||||
...formData,
|
||||
authRoleAttrs: arrayRoleAttrs,
|
||||
};
|
||||
http
|
||||
.patch(config.API.managementAuth + `/${roleId.value}`, body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
fetchDataRole();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchSys();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toptitle col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
จัดการบทบาทและสิทธิ์
|
||||
</div>
|
||||
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<q-card flast bordered>
|
||||
<div class="col-12">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
v-model="formData.roleName"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อบทบาท'}`,]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
label="ชื่อบทบาท"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<q-input
|
||||
v-model="formData.roleDescription"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
label="คำอธิบาย"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-table
|
||||
class="my-sticky-dynamic"
|
||||
virtual-scroll
|
||||
flat
|
||||
bordered
|
||||
:rows="systemLists"
|
||||
separator="cell"
|
||||
:pagination="{
|
||||
page: 1,
|
||||
rowsPerPage: 100,
|
||||
}"
|
||||
hide-bottom
|
||||
>
|
||||
<template v-slot:header>
|
||||
<q-tr>
|
||||
<q-th rowspan="2" colspan="3" style="font-size: 1rem"
|
||||
>รายการระบบ</q-th
|
||||
>
|
||||
<q-th colspan="3" style="font-size: 1rem"
|
||||
>ความเป็นเจ้าของ (Ownership)</q-th
|
||||
>
|
||||
<q-th colspan="5" style="text-align: center; font-size: 1rem"
|
||||
>สิทธิ์ดำเนินการ (Permission)</q-th
|
||||
>
|
||||
<q-th
|
||||
class="relative-position"
|
||||
colspan="2"
|
||||
rowspan="2"
|
||||
style="text-align: center; font-size: 1rem"
|
||||
>สิทธิ์การเข้าถึง<br />
|
||||
(Privilege)
|
||||
<q-btn
|
||||
class="absolute-customH"
|
||||
color="grey-4"
|
||||
round
|
||||
icon="info"
|
||||
flat
|
||||
size="12px"
|
||||
><q-tooltip class="text-body1">
|
||||
<div class="column">
|
||||
<div class="row no-wrap">
|
||||
<strong>ROOT</strong>-มีสิทธิ์เข้าถึงข้อมูลในทุกระดับ
|
||||
ตั้งแต่ระดับของตัวเองลงไปชั้นล่างสุด
|
||||
และขึ้นไปถึงชั้นบนสุด
|
||||
</div>
|
||||
<div class="row no-wrap">
|
||||
<strong>CHILD</strong
|
||||
>-มีสิทธิ์เข้าถึงข้อมูลเฉพาะระดับชั้นปัจจุบันของตัวเอง
|
||||
ลงไปถึงชั้นล่างสุด
|
||||
</div>
|
||||
<div class="row no-wrap">
|
||||
<strong>NORMAL</strong
|
||||
>-มีสิทธิ์เข้าถึงข้อมูลเฉพาะในระดับชั้นตัวเองเท่านั้น
|
||||
ไม่สามารถขึ้นหรือลงได้
|
||||
</div>
|
||||
<div class="row no-wrap">
|
||||
<strong>SPECIFIC</strong
|
||||
>-มีสิทธิ์เข้าถึงข้อมูลเฉพาะเจาะจง ซึ่งจะต้องกำหนด ID
|
||||
ของข้อมูลที่ต้องการเข้าถึงด้วย
|
||||
</div>
|
||||
</div>
|
||||
</q-tooltip></q-btn
|
||||
></q-th
|
||||
>
|
||||
</q-tr>
|
||||
<q-tr>
|
||||
<q-th class="relative-position"
|
||||
>OWNER
|
||||
<q-btn
|
||||
class="absolute-custom"
|
||||
color="grey-4"
|
||||
round
|
||||
icon="info"
|
||||
flat
|
||||
size="10px"
|
||||
><q-tooltip class="text-body2">
|
||||
เป็นเจ้าของระบบ มีสิทธิ์เต็มที่จะทำทุกอย่างในระบบนั้น ๆ
|
||||
ได้ทั้งหมดทุกหน่วยงานโดยไม่สนใจสิทธิ์และลำดับชั้นการเข้าถึง
|
||||
</q-tooltip></q-btn
|
||||
>
|
||||
</q-th>
|
||||
<q-th class="relative-position"
|
||||
>STAFF
|
||||
<q-btn
|
||||
class="absolute-custom"
|
||||
color="grey-4"
|
||||
round
|
||||
icon="info"
|
||||
flat
|
||||
size="10px"
|
||||
><q-tooltip class="text-body2">
|
||||
เป็นเจ้าหน้าที่
|
||||
ซึ่งอาจจะมีสิทธิ์ในการเข้าใช้ระบบได้เพียงอย่างใดอย่างหนึ่งหรือทั้งหมด
|
||||
ทั้งนี้ขึ้นกับสิทธิ์และลำดับชั้นการเข้าถึง
|
||||
</q-tooltip></q-btn
|
||||
></q-th
|
||||
>
|
||||
<q-th class="relative-position"
|
||||
>GUEST
|
||||
<q-btn
|
||||
class="absolute-custom"
|
||||
color="grey-4"
|
||||
round
|
||||
icon="info"
|
||||
flat
|
||||
size="10px"
|
||||
><q-tooltip class="text-body2">
|
||||
เป็นผู้มาเยือน ใช้ในกรณีกำหนดบทบาทชั่วคราว และบทบาทเฉพาะกิจ
|
||||
</q-tooltip></q-btn
|
||||
></q-th
|
||||
>
|
||||
<q-th class="relative-position"
|
||||
>CREATE
|
||||
<q-btn
|
||||
class="absolute-custom"
|
||||
color="grey-4"
|
||||
round
|
||||
icon="info"
|
||||
flat
|
||||
size="10px"
|
||||
><q-tooltip class="text-body2">
|
||||
มีสิทธิ์ในการสร้างข้อมูล
|
||||
</q-tooltip></q-btn
|
||||
></q-th
|
||||
>
|
||||
<q-th class="relative-position"
|
||||
>LIST
|
||||
<q-btn
|
||||
class="absolute-custom"
|
||||
color="grey-4"
|
||||
round
|
||||
icon="info"
|
||||
flat
|
||||
size="10px"
|
||||
><q-tooltip class="text-body2">
|
||||
มีสิทธิ์ในการดูรายการข้อมูล
|
||||
</q-tooltip></q-btn
|
||||
></q-th
|
||||
>
|
||||
<q-th class="relative-position"
|
||||
>GET
|
||||
<q-btn
|
||||
class="absolute-custom"
|
||||
color="grey-4"
|
||||
round
|
||||
icon="info"
|
||||
flat
|
||||
size="10px"
|
||||
><q-tooltip class="text-body2">
|
||||
มีสิทธิ์ในการดูรายละเอียดข้อมูล
|
||||
</q-tooltip></q-btn
|
||||
></q-th
|
||||
>
|
||||
<q-th class="relative-position"
|
||||
>UPDATE
|
||||
<q-btn
|
||||
class="absolute-custom"
|
||||
color="grey-4"
|
||||
round
|
||||
icon="info"
|
||||
flat
|
||||
size="10px"
|
||||
><q-tooltip class="text-body2">
|
||||
มีสิทธิ์ในการแก้ไขข้อมูล
|
||||
</q-tooltip></q-btn
|
||||
></q-th
|
||||
>
|
||||
<q-th class="relative-position"
|
||||
>DELETE
|
||||
<q-btn
|
||||
class="absolute-custom"
|
||||
color="grey-4"
|
||||
round
|
||||
icon="info"
|
||||
flat
|
||||
size="10px"
|
||||
><q-tooltip class="text-body2">
|
||||
มีสิทธิ์ในการลบข้อมูล
|
||||
</q-tooltip></q-btn
|
||||
></q-th
|
||||
>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr>
|
||||
<q-td auto-width colspan="3">
|
||||
<q-checkbox
|
||||
v-model="props.row.selected"
|
||||
@update:model-value="
|
||||
!props.row.selected && (props.row.attrOwnership = ''),
|
||||
(props.row.attrIsCreate = false),
|
||||
(props.row.attrIsList = false),
|
||||
(props.row.attrIsGet = false),
|
||||
(props.row.attrIsUpdate = false),
|
||||
(props.row.attrIsDelete = false),
|
||||
(props.row.attrPrivilege = '')
|
||||
"
|
||||
/>
|
||||
<strong>{{ props.row.sysName }}</strong>
|
||||
</q-td>
|
||||
<q-td style="text-align: center">
|
||||
<q-radio
|
||||
v-model="props.row.attrOwnership"
|
||||
val="OWNER"
|
||||
@update:model-value="
|
||||
props.row.attrOwnership === 'OWNER' &&
|
||||
(props.row.attrIsCreate = true),
|
||||
(props.row.attrIsList = true),
|
||||
(props.row.attrIsGet = true),
|
||||
(props.row.attrIsUpdate = true),
|
||||
(props.row.attrIsDelete = true),
|
||||
(props.row.attrPrivilege = 'ROOT')
|
||||
"
|
||||
v-if="props.row.children.length === 0"
|
||||
:disable="!props.row.selected"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td style="text-align: center">
|
||||
<q-radio
|
||||
v-model="props.row.attrOwnership"
|
||||
val="STAFF"
|
||||
v-if="props.row.children.length === 0"
|
||||
:disable="!props.row.selected"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td style="text-align: center">
|
||||
<q-radio
|
||||
v-model="props.row.attrOwnership"
|
||||
val="GUEST"
|
||||
v-if="props.row.children.length === 0"
|
||||
:disable="!props.row.selected"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td style="text-align: center">
|
||||
<q-checkbox
|
||||
v-model="props.row.attrIsCreate"
|
||||
v-if="props.row.children.length === 0"
|
||||
:disable="
|
||||
!props.row.selected ||
|
||||
(props.row.selected && props.row.attrOwnership === 'OWNER')
|
||||
"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td style="text-align: center">
|
||||
<q-checkbox
|
||||
v-model="props.row.attrIsList"
|
||||
v-if="props.row.children.length === 0"
|
||||
:disable="
|
||||
!props.row.selected ||
|
||||
(props.row.selected && props.row.attrOwnership === 'OWNER')
|
||||
"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td style="text-align: center">
|
||||
<q-checkbox
|
||||
v-model="props.row.attrIsGet"
|
||||
v-if="props.row.children.length === 0"
|
||||
:disable="
|
||||
!props.row.selected ||
|
||||
(props.row.selected && props.row.attrOwnership === 'OWNER')
|
||||
"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td style="text-align: center">
|
||||
<q-checkbox
|
||||
v-model="props.row.attrIsUpdate"
|
||||
v-if="props.row.children.length === 0"
|
||||
:disable="
|
||||
!props.row.selected ||
|
||||
(props.row.selected && props.row.attrOwnership === 'OWNER')
|
||||
"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td style="text-align: center">
|
||||
<q-checkbox
|
||||
v-model="props.row.attrIsDelete"
|
||||
v-if="props.row.children.length === 0"
|
||||
:disable="
|
||||
!props.row.selected ||
|
||||
(props.row.selected && props.row.attrOwnership === 'OWNER')
|
||||
"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td style="min-width: 120px">
|
||||
<q-select
|
||||
v-if="props.row.children.length === 0"
|
||||
v-model="props.row.attrPrivilege"
|
||||
:options="attrPrivilegeOp"
|
||||
option-value="id"
|
||||
option-label="id"
|
||||
emit-value
|
||||
map-options
|
||||
dense
|
||||
outlined
|
||||
:disable="
|
||||
!props.row.selected ||
|
||||
(props.row.selected && props.row.attrOwnership === 'OWNER')
|
||||
"
|
||||
label="สิทธิ์เข้าถึงข้อมูล"
|
||||
style="min-width: 120px"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกสิทธิ์เข้าถึงข้อมูล'}`,]"
|
||||
>
|
||||
</q-select>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
<q-tr
|
||||
v-if="props.row.selected && props.row.children"
|
||||
v-for="(item, index) in props.row.children"
|
||||
:key="index"
|
||||
>
|
||||
<q-td></q-td>
|
||||
<q-td auto-width colspan="2">
|
||||
<q-checkbox
|
||||
v-model="item.selected"
|
||||
@update:model-value="
|
||||
!item.selected && (item.attrOwnership = ''),
|
||||
(item.attrIsCreate = false),
|
||||
(item.attrIsList = false),
|
||||
(item.attrIsGet = false),
|
||||
(item.attrIsUpdate = false),
|
||||
(item.attrIsDelete = false),
|
||||
(item.attrPrivilege = '')
|
||||
"
|
||||
/>
|
||||
{{ item.sysName }}
|
||||
</q-td>
|
||||
<q-td style="text-align: center">
|
||||
<q-radio
|
||||
v-model="item.attrOwnership"
|
||||
val="OWNER"
|
||||
@update:model-value="
|
||||
item.attrOwnership === 'OWNER' &&
|
||||
(item.attrIsCreate = true),
|
||||
(item.attrIsList = true),
|
||||
(item.attrIsGet = true),
|
||||
(item.attrIsUpdate = true),
|
||||
(item.attrIsDelete = true),
|
||||
(item.attrPrivilege = 'ROOT')
|
||||
"
|
||||
:disable="!item.selected"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td style="text-align: center">
|
||||
<q-radio
|
||||
v-model="item.attrOwnership"
|
||||
val="STAFF"
|
||||
:disable="!item.selected"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td style="text-align: center">
|
||||
<q-radio
|
||||
v-model="item.attrOwnership"
|
||||
val="GUEST"
|
||||
:disable="!item.selected"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td style="text-align: center">
|
||||
<q-checkbox
|
||||
v-model="item.attrIsCreate"
|
||||
:disable="
|
||||
!item.selected ||
|
||||
(item.selected && item.attrOwnership === 'OWNER')
|
||||
"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td style="text-align: center">
|
||||
<q-checkbox
|
||||
v-model="item.attrIsList"
|
||||
:disable="
|
||||
!item.selected ||
|
||||
(item.selected && item.attrOwnership === 'OWNER')
|
||||
"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td style="text-align: center">
|
||||
<q-checkbox
|
||||
v-model="item.attrIsGet"
|
||||
:disable="
|
||||
!item.selected ||
|
||||
(item.selected && item.attrOwnership === 'OWNER')
|
||||
"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td style="text-align: center">
|
||||
<q-checkbox
|
||||
v-model="item.attrIsUpdate"
|
||||
:disable="
|
||||
!item.selected ||
|
||||
(item.selected && item.attrOwnership === 'OWNER')
|
||||
"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td style="text-align: center">
|
||||
<q-checkbox
|
||||
v-model="item.attrIsDelete"
|
||||
:disable="
|
||||
!item.selected ||
|
||||
(item.selected && item.attrOwnership === 'OWNER')
|
||||
"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td style="min-width: 120px">
|
||||
<q-select
|
||||
v-model="item.attrPrivilege"
|
||||
:options="attrPrivilegeOp"
|
||||
option-value="id"
|
||||
option-label="id"
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
:disable="
|
||||
!item.selected ||
|
||||
(item.selected && item.attrOwnership === 'OWNER')
|
||||
"
|
||||
label="สิทธิ์เข้าถึงข้อมูล"
|
||||
style="min-width: 100px"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกสิทธิ์เข้าถึงข้อมูล'}`,]"
|
||||
>
|
||||
</q-select
|
||||
></q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-form>
|
||||
</template>
|
||||
<style scoped>
|
||||
.absolute-custom {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
}
|
||||
.absolute-customH {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
}
|
||||
|
||||
.my-sticky-dynamic {
|
||||
/* Large screens and up */
|
||||
|
||||
height: 65vh;
|
||||
|
||||
.q-table__top,
|
||||
.q-table__bottom,
|
||||
thead tr:first-child th {
|
||||
/* bg color is important for th; just specify one */
|
||||
background-color: #fff; /* Replace with your desired color */
|
||||
}
|
||||
|
||||
thead tr th {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0; /* Default top position for all th elements */
|
||||
background-color: #fff; /* Replace with your desired color */
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px; /* Adjust this value based on the cumulative height of previous header rows */
|
||||
}
|
||||
|
||||
thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* prevent scrolling behind sticky top row on focus */
|
||||
tbody {
|
||||
/* height of all previous header rows */
|
||||
scroll-margin-top: 48px; /* Adjust this value based on the cumulative height of previous header rows */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue