updated role detail

This commit is contained in:
Warunee Tamkoo 2024-05-31 16:40:06 +07:00
parent 60dd477afe
commit fc575094ee
2 changed files with 158 additions and 110 deletions

View file

@ -2,7 +2,8 @@ const ListsPageUser = () => import("@/modules/02_users/views/listsUser.vue");
const PageManagementRole = () => const PageManagementRole = () =>
import("@/modules/02_users/views/managementRoleUser.vue"); import("@/modules/02_users/views/managementRoleUser.vue");
const ListsPageRole = () => import("@/modules/02_users/views/listsRole.vue"); const ListsPageRole = () => import("@/modules/02_users/views/listsRole.vue");
const ListsRoleDetail = () => import("@/modules/02_users/views/roleDetail.vue"); const ListsPage2Role = () =>
import("@/modules/02_users/views/permissionDetail.vue");
export default [ export default [
{ {
@ -44,7 +45,7 @@ export default [
{ {
path: "/roles/:id", path: "/roles/:id",
name: "manageRolesId", name: "manageRolesId",
component: ListsRoleDetail, component: ListsPage2Role,
meta: { meta: {
Auth: true, Auth: true,
Key: [7], Key: [7],

View file

@ -1,14 +1,17 @@
<script setup> <script setup lang="ts">
import { id } from "date-fns/locale";
import { off } from "process";
import { reactive, ref } from "vue"; import { reactive, ref } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import type { FormRole } from "@/modules/02_users/interface/request/Main";
const router = useRouter(); const router = useRouter();
const formData = reactive<FormRole>({
role: "",
description: "",
});
const columns = []; const columns = ref<any>([]);
const systemLists = ref([ const systemLists = ref<any>([
{ {
key: "SYS_METADATA_KPI", key: "SYS_METADATA_KPI",
name: "ข้อมูลการประเมิน", name: "ข้อมูลการประเมิน",
@ -1052,6 +1055,8 @@ const systemLists = ref([
], ],
}, },
]); ]);
function onSubmit() {}
</script> </script>
<template> <template>
@ -1069,106 +1074,141 @@ const systemLists = ref([
ดการสทธบทบาท ดการสทธบทบาท
</div> </div>
<q-card flast bordered class=""> <q-form greedy @submit.prevent @validation-success="onSubmit">
<div class="col-12"> <q-card flast bordered class="">
<q-table <div class="col-12">
flat <q-card>
bordered <q-card-section>
:rows="systemLists" <div class="row q-col-gutter-md">
:columns="columns" <div class="col-4">
separator="cell" <q-input
:pagination="{ v-model="formData.role"
page: 1, outlined
rowsPerPage: 100, dense
}" :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อบทบาท'}`,]"
hide-bottom lazy-rules
> hide-bottom-space
<template v-slot:header> class="inputgreen"
<q-tr> label="ชื่อบทบาท"
<q-th rowspan="2" colspan="3" style="font-size: 1rem" />
>รายการระบบ</q-th </div>
<div class="col-8">
<q-input
v-model="formData.description"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกคำอิบาย'}`,]"
lazy-rules
hide-bottom-space
class="inputgreen"
label="คำอิบาย"
type="textarea"
/>
</div>
</div>
</q-card-section>
</q-card>
</div>
<div class="col-12">
<q-table
flat
bordered
:rows="systemLists"
:columns="columns"
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="2" style="font-size: 1rem"
>ทธการเขาถงขอม</q-th
>
<q-th colspan="5" style="text-align: center; font-size: 1rem"
>ทธการใชงาน</q-th
>
</q-tr>
<q-tr>
<q-th
>OWNER<br />
เจาของระบบ</q-th
>
<q-th>OFFICER <br />(การเจาหนาท)</q-th>
<q-th>CREATE <br />(ทธในการสรางขอม)</q-th>
<q-th>LIST<br />(ทธในการดรายการขอม)</q-th>
<q-th>GET<br />(ทธในการดรายละเอยดขอม)</q-th>
<q-th>UPDATE<br />(ทธในการแกไขขอม)</q-th>
<q-th>DELETE<br />(ทธในการลบขอม)</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" />
<strong>{{ props.row.name }}</strong>
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="props.row.owner" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="props.row.officer" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="props.row.create" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="props.row.list" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="props.row.get" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="props.row.update" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="props.row.delete" />
</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-th colspan="2" style="font-size: 1rem" <q-td></q-td>
>ทธการเขาถงขอม</q-th <q-td auto-width colspan="2">
> <q-checkbox v-model="item.selected" />
<q-th colspan="5" style="text-align: center; font-size: 1rem" {{ item.name }}
>ทธการใชงาน</q-th </q-td>
> <q-td style="text-align: center">
</q-tr> <q-checkbox v-model="item.owner" />
<q-tr> </q-td>
<q-th <q-td style="text-align: center">
>OWNER<br /> <q-checkbox v-model="item.officer" />
เจาของระบบ</q-th </q-td>
> <q-td style="text-align: center">
<q-th>OFFICER <br />(การเจาหนาท)</q-th> <q-checkbox v-model="item.create" />
<q-th>CREATE <br />(ทธในการสรางขอม)</q-th> </q-td>
<q-th>LIST<br />(ทธในการดรายการขอม)</q-th> <q-td style="text-align: center">
<q-th>GET<br />(ทธในการดรายละเอยดขอม)</q-th> <q-checkbox v-model="item.list" />
<q-th>UPDATE<br />(ทธในการแกไขขอม)</q-th> </q-td>
<q-th>DELETE<br />(ทธในการลบขอม)</q-th> <q-td style="text-align: center">
</q-tr> <q-checkbox v-model="item.get" />
</template> </q-td>
<template v-slot:body="props"> <q-td style="text-align: center">
<q-tr> <q-checkbox v-model="item.update" />
<q-td auto-width colspan="3"> </q-td>
<q-checkbox v-model="props.row.selected" /> <q-td style="text-align: center">
<strong>{{ props.row.name }}</strong> <q-checkbox v-model="item.delete" />
</q-td> </q-td>
<q-td style="text-align: center"> </q-tr>
<q-checkbox v-model="props.row.owner" /> <!-- <q-tr
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="props.row.officer" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="props.row.create" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="props.row.list" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="props.row.get" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="props.row.update" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="props.row.delete" />
</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" />
{{ item.name }}
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="item.owner" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="item.officer" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="item.create" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="item.list" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="item.get" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="item.update" />
</q-td>
<q-td style="text-align: center">
<q-checkbox v-model="item.delete" />
</q-td>
</q-tr>
<!-- <q-tr
v-if="item.children" v-if="item.children"
v-for="(item3, index) in item.children" v-for="(item3, index) in item.children"
:key="index" :key="index"
@ -1200,8 +1240,15 @@ const systemLists = ref([
<q-checkbox v-model="item3.delete" /> <q-checkbox v-model="item3.delete" />
</q-td> </q-td>
</q-tr> --> </q-tr> -->
</template> </template>
</q-table> </q-table>
</div> </div>
</q-card>
<!-- <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> </template>