จัดการสิทธิ์ => UI Dialog จัดการสิทธิ์
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
9ce059949c
commit
0531cf2bb3
5 changed files with 364 additions and 51 deletions
162
src/modules/02_users/components/Permissions/DialogAdd.vue
Normal file
162
src/modules/02_users/components/Permissions/DialogAdd.vue
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { FilterReqMaster } from "@/modules/02_users/interface/request/Main";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
messageError,
|
||||
success,
|
||||
dialogMessageNotify,
|
||||
} = useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const reqMaster = defineModel<FilterReqMaster>("reqMaster", { required: true });
|
||||
|
||||
const props = defineProps({
|
||||
fetchDataTable: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const rows = ref<any[]>([{ name: "ชื่อ", description: "คำอธิบาย" }]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ชื่อ",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "description",
|
||||
align: "left",
|
||||
label: "คำอธิบาย",
|
||||
sortable: true,
|
||||
field: "description",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>(["name", "description"]);
|
||||
|
||||
const keyword = ref<string>("");
|
||||
const selected = ref<any[]>([]);
|
||||
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
selected.value = [];
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
if (selected.value.length === 0) {
|
||||
dialogMessageNotify($q, "กรุณาเลือกสิทธิ์อย่างน้อง 1 สิทธิ์");
|
||||
} else {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
closeDialog();
|
||||
props.fetchDataTable(
|
||||
reqMaster.value.id,
|
||||
reqMaster.value.revisionId,
|
||||
reqMaster.value.type
|
||||
);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 50%">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader tittle="จัดการสิทธิ์" :close="closeDialog" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-input outlined dense v-model="keyword" label="ค้นหา">
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" color="grey-5" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="scope.selected"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
interface Pagination {
|
||||
page: number;
|
||||
rowsPerPage: number;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,4 +16,14 @@ interface Roles {
|
|||
id: string;
|
||||
name: string;
|
||||
}
|
||||
export type { FormUser, FormRole, Roles };
|
||||
|
||||
interface FilterReqMaster {
|
||||
id: string;
|
||||
type: number;
|
||||
isAll: boolean;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
keyword: string;
|
||||
revisionId: string;
|
||||
}
|
||||
export type { FormUser, FormRole, Roles, FilterReqMaster };
|
||||
|
|
|
|||
|
|
@ -16,4 +16,84 @@ interface Roles {
|
|||
name: string;
|
||||
}
|
||||
|
||||
export type { Users, Roles };
|
||||
interface NodeTree {
|
||||
labelName: string;
|
||||
orgCode: string;
|
||||
orgLevel: number;
|
||||
orgName: string;
|
||||
orgRevisionId: string;
|
||||
orgRootName: string;
|
||||
orgTreeCode: string;
|
||||
orgTreeFax: string;
|
||||
orgTreeId: string;
|
||||
orgTreeName: string;
|
||||
orgTreeOrder: number;
|
||||
orgTreePhoneEx: string;
|
||||
orgTreePhoneIn: string;
|
||||
orgTreeRank: string;
|
||||
orgTreeRankSub: string | null;
|
||||
orgTreeShortName: string;
|
||||
responsibility: string | null;
|
||||
totalPosition: number;
|
||||
totalPositionCurrentUse: number;
|
||||
totalPositionCurrentVacant: number;
|
||||
totalPositionNextUse: number;
|
||||
totalPositionNextVacant: number;
|
||||
totalRootPosition: number;
|
||||
totalRootPositionCurrentUse: number;
|
||||
totalRootPositionCurrentVacant: number;
|
||||
totalRootPositionNextUse: number;
|
||||
totalRootPositionNextVacant: number;
|
||||
children: NodeTree;
|
||||
}
|
||||
|
||||
interface PosMaster {
|
||||
fullNameCurrentHolder: null | string;
|
||||
fullNameNextHolder: string;
|
||||
id: string;
|
||||
isSit: boolean;
|
||||
isSpecial: boolean;
|
||||
orgChild1Id: null | string;
|
||||
orgChild2Id: null | string;
|
||||
orgChild3Id: null | string;
|
||||
orgChild4Id: null | string;
|
||||
orgRootId: string;
|
||||
orgShortname: string;
|
||||
posExecutiveId: string;
|
||||
posExecutiveName: string;
|
||||
posLevelId: string;
|
||||
posLevelName: string;
|
||||
posMasterNo: 1;
|
||||
posMasterNoPrefix: null | string;
|
||||
posMasterNoSuffix: null | string;
|
||||
posTypeId: string;
|
||||
posTypeName: string;
|
||||
positionArea: string;
|
||||
positionExecutiveField: string;
|
||||
positionField: string;
|
||||
positionIsSelected: boolean;
|
||||
positionName: string;
|
||||
profilePosition: string;
|
||||
profilePoslevel: null | string;
|
||||
profilePostype: null | string;
|
||||
reason: null | string;
|
||||
positions: Position[];
|
||||
}
|
||||
|
||||
interface Position {
|
||||
id: string;
|
||||
isSpecial: boolean;
|
||||
posExecutiveId: string;
|
||||
posExecutiveName: string;
|
||||
posLevelId: string;
|
||||
posLevelName: string;
|
||||
posTypeId: string;
|
||||
posTypeName: string;
|
||||
positionArea: string;
|
||||
positionExecutiveField: string;
|
||||
positionField: string;
|
||||
positionIsSelected: boolean;
|
||||
positionName: string;
|
||||
}
|
||||
|
||||
export type { Users, Roles, NodeTree, PosMaster, Position };
|
||||
|
|
|
|||
|
|
@ -4,8 +4,18 @@ import { useQuasar } from "quasar";
|
|||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogAdd from "@/modules/02_users/components/Permissions/DialogAdd.vue";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { Pagination } from "@/modules/02_users/interface/index/Main";
|
||||
import type { FilterReqMaster } from "@/modules/02_users/interface/request/Main";
|
||||
import type {
|
||||
NodeTree,
|
||||
PosMaster,
|
||||
Position,
|
||||
} from "@/modules/02_users/interface/response/Main";
|
||||
|
||||
/** importStore*/
|
||||
import { usePermissionsStore } from "@/modules/02_users/stores/permissions";
|
||||
|
|
@ -13,11 +23,11 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
|
||||
const $q = useQuasar();
|
||||
const store = usePermissionsStore();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||
|
||||
/** Tree*/
|
||||
const filter = ref<string>("");
|
||||
const nodes = ref<Array<any>>([]);
|
||||
const nodes = ref<Array<NodeTree[]>>([]);
|
||||
const lazy = ref(nodes);
|
||||
const expanded = ref<string[]>([]);
|
||||
const nodeId = ref<string>("");
|
||||
|
|
@ -45,7 +55,8 @@ const columns = ref<QTableProps["columns"]>([
|
|||
row.orgShortname +
|
||||
(row.posMasterNoPrefix ? row.posMasterNoPrefix : "") +
|
||||
(row.posMasterNo ? row.posMasterNo : "") +
|
||||
(row.posMasterNoSuffix ? row.posMasterNoSuffix : ""),
|
||||
(row.posMasterNoSuffix ? row.posMasterNoSuffix : "") +
|
||||
(row.isSit ? "(ทับที่)" : ""),
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -91,6 +102,15 @@ const columns = ref<QTableProps["columns"]>([
|
|||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "role",
|
||||
align: "left",
|
||||
label: "สิทธิ์การจัดการ",
|
||||
sortable: false,
|
||||
field: "role",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const columnsExpand = ref<QTableProps["columns"]>([
|
||||
{
|
||||
|
|
@ -166,7 +186,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const reqMaster = reactive<any>({
|
||||
const reqMaster = reactive<FilterReqMaster>({
|
||||
id: "",
|
||||
type: 0,
|
||||
isAll: false,
|
||||
|
|
@ -177,7 +197,14 @@ const reqMaster = reactive<any>({
|
|||
});
|
||||
const maxPage = ref<number>(0);
|
||||
const totalRow = ref<number>(0);
|
||||
const posMaster = ref<any[]>([]);
|
||||
const posMaster = ref<PosMaster[]>([]);
|
||||
const pagination = ref<Pagination>({
|
||||
page: reqMaster.page,
|
||||
rowsPerPage: reqMaster.pageSize,
|
||||
});
|
||||
|
||||
/** Dialog*/
|
||||
const modalDialogAdd = ref<boolean>(false);
|
||||
|
||||
/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
|
||||
async function fetchOrganizationActive() {
|
||||
|
|
@ -209,9 +236,9 @@ async function fetchOrganizationActive() {
|
|||
* function fetch ข้อมูลของ Tree
|
||||
* @param id id โครงสร้าง
|
||||
*/
|
||||
async function fetchDataTree(id: string) {
|
||||
function fetchDataTree(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
http
|
||||
.get(config.API.orgByid(id.toString()))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
|
|
@ -230,26 +257,26 @@ async function fetchDataTree(id: string) {
|
|||
* @param id idTree
|
||||
* @param level levelTree
|
||||
*/
|
||||
async function fetchDataTable(id: string, revisionId: string, level: number) {
|
||||
function fetchDataTable(id: string, revisionId: string, level: number) {
|
||||
showLoader();
|
||||
reqMaster.id = id;
|
||||
reqMaster.revisionId = revisionId;
|
||||
reqMaster.type = level;
|
||||
await http
|
||||
http
|
||||
.post(config.API.orgPosMasterList, reqMaster)
|
||||
.then(async (res) => {
|
||||
posMaster.value = [];
|
||||
const dataMain: any = [];
|
||||
const dataMain: PosMaster[] = [];
|
||||
maxPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
|
||||
totalRow.value = res.data.result.total;
|
||||
|
||||
res.data.result.data.forEach((e: any) => {
|
||||
res.data.result.data.forEach((e: PosMaster) => {
|
||||
const p = e.positions;
|
||||
if (p.length !== 0) {
|
||||
const a = p.find((el: any) => el.positionIsSelected === true);
|
||||
const a = p.find((el: Position) => el.positionIsSelected === true);
|
||||
const { id, ...rest } = a ? a : p[0];
|
||||
const test = { ...e, ...rest };
|
||||
dataMain.push(test);
|
||||
const pos = { ...e, ...rest };
|
||||
dataMain.push(pos);
|
||||
}
|
||||
});
|
||||
posMaster.value = dataMain;
|
||||
|
|
@ -263,40 +290,53 @@ async function fetchDataTable(id: string, revisionId: string, level: number) {
|
|||
});
|
||||
}
|
||||
|
||||
function updateSelected(data: any) {
|
||||
/**
|
||||
* function เลือกข้อมูลโครางสร่้าง
|
||||
* @param data
|
||||
*/
|
||||
function updateSelected(data: NodeTree) {
|
||||
nodeId.value = data.orgTreeId;
|
||||
fetchDataTable(data.orgTreeId, data.orgRevisionId, data.orgLevel);
|
||||
}
|
||||
|
||||
const pagination = ref({
|
||||
page: reqMaster.page,
|
||||
rowsPerPage: reqMaster.pageSize,
|
||||
});
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: any) {
|
||||
function updatePagination(newPagination: Pagination) {
|
||||
reqMaster.pageSize = newPagination.rowsPerPage;
|
||||
reqMaster.page = 1;
|
||||
}
|
||||
|
||||
function onClickAddRole(data: PosMaster) {
|
||||
modalDialogAdd.value = true;
|
||||
}
|
||||
|
||||
/** callblck function ทำการ fetch ข้อมูล tree เมื่อมีการเปลี่ยน Tab ปัจจับัน,แบบร่าง*/
|
||||
watch(
|
||||
() => store.typeOrganizational,
|
||||
() => {
|
||||
const id =
|
||||
store.typeOrganizational === "current" ? store.activeId : store.draftId;
|
||||
nodeId.value = "";
|
||||
posMaster.value = [];
|
||||
reqMaster.id = "";
|
||||
reqMaster.type = 0;
|
||||
reqMaster.isAll = false;
|
||||
reqMaster.page = 1;
|
||||
reqMaster.pageSize = 10;
|
||||
reqMaster.keyword = "";
|
||||
reqMaster.revisionId = "";
|
||||
fetchDataTree(id);
|
||||
}
|
||||
);
|
||||
|
||||
/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
|
||||
watch([() => reqMaster.pageSize], () => {
|
||||
fetchDataTable(reqMaster.id, reqMaster.revisionId, reqMaster.type);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => store.typeOrganizational,
|
||||
() => {
|
||||
const id =
|
||||
store.typeOrganizational === "current" ? store.activeId : store.draftId;
|
||||
fetchDataTree(id);
|
||||
posMaster.value = []
|
||||
}
|
||||
);
|
||||
|
||||
/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนจำนวนต่อแแแถว*/
|
||||
watch(
|
||||
() => reqMaster.isAll,
|
||||
() => {
|
||||
|
|
@ -415,9 +455,9 @@ onMounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
<div class="col-xs-12 col-sm-9 q-pa-md row">
|
||||
<div class="col-12">
|
||||
<!-- TOOLBAR -->
|
||||
<q-toolbar style="padding: 0">
|
||||
<q-space />
|
||||
<div class="row q-gutter-md">
|
||||
|
|
@ -501,27 +541,41 @@ onMounted(() => {
|
|||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<!-- <div v-else-if="col.name === 'posMasterNo'">
|
||||
{{
|
||||
props.row.isSit
|
||||
? col.value + " " + "(ทับที่)"
|
||||
: col.value
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'posLevelName'">
|
||||
{{
|
||||
props.row.posLevelName
|
||||
? props.row.isSpecial == true
|
||||
? `${props.row.posLevelName} (ฉ)`
|
||||
: props.row.posLevelName
|
||||
: "-"
|
||||
}}
|
||||
</div> -->
|
||||
<div>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td> </q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
icon="mdi-dots-vertical"
|
||||
class="q-pa-none q-ml-xs"
|
||||
color="grey-13"
|
||||
size="12px"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list dense style="min-width: 150px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="onClickAddRole(props.row)"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="row items-center">
|
||||
<q-icon
|
||||
color="blue-9"
|
||||
size="17px"
|
||||
name="mdi-account-group"
|
||||
/>
|
||||
<div class="q-pl-md">จัดการสิทธิ์</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
|
||||
<q-tr v-show="props.expand" :props="props">
|
||||
|
|
@ -623,6 +677,12 @@ onMounted(() => {
|
|||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<DialogAdd
|
||||
v-model:modal="modalDialogAdd"
|
||||
v-model:reqMaster="reqMaster"
|
||||
:fetchDataTable="fetchDataTable"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue