จัดการสิทธิ์ => 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
|
|
@ -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