403 lines
11 KiB
Vue
403 lines
11 KiB
Vue
<template>
|
||
<NuxtLayout name="default" :menu="adminMenu">
|
||
<div class="pages role-page px-3 pb-0 pt-2">
|
||
<sub-header-with-select
|
||
canCreate="roles_new"
|
||
@open-form="toggleRolesPanel"
|
||
:showProjectSelect="$attrs.showProjectSelect"
|
||
title="نقش ها"
|
||
></sub-header-with-select>
|
||
|
||
<div class="pages-content pb-0 pt-2">
|
||
<template v-if="canView">
|
||
<my-table
|
||
:tableActions="tableActions"
|
||
height="auto"
|
||
maxHeight="calc(100vh - 9em)"
|
||
class="my-table"
|
||
ref="rolesTable"
|
||
:hasSearch="false"
|
||
:paginationInfo="pagination"
|
||
:sortingInfo="sorting"
|
||
:items="roles"
|
||
:fetchingData="fetchingData"
|
||
:tableColumns="tableColumns"
|
||
:totalPages="pagination.pages"
|
||
@delete-table-item="deleteItem"
|
||
@edit-table-item="toggleRolesPanel"
|
||
@page-changed="pageChanged"
|
||
@page-limit-changed="pageLimitChanged"
|
||
@sort-changed="sortChanged"
|
||
></my-table>
|
||
</template>
|
||
<NoData v-else>
|
||
<the-content-loading v-if="fetchingData"></the-content-loading>
|
||
|
||
<div v-else class="d-flex justify-content-center align-items-center">
|
||
<div
|
||
class="alert alert-warning d-flex justify-content-center align-items-center"
|
||
>
|
||
<span
|
||
class="tavasi tavasi-warning-circle color-inherit ms-1 text__32"
|
||
></span>
|
||
عدم دسترسی
|
||
</div>
|
||
</div>
|
||
</NoData>
|
||
<div class="side-panel" v-if="showPanel">
|
||
<div class="side-panel-header">
|
||
<h6 class="">مدیریت نقش ها</h6>
|
||
</div>
|
||
|
||
<div class="side-panel-content">
|
||
<form class="section-form" role="section" @submit.prevent="save()">
|
||
<div class="form-group">
|
||
<label for="title">عنوان نقش</label>
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
id="title"
|
||
name="title"
|
||
v-model="selectedItemClone.title"
|
||
/>
|
||
</div>
|
||
|
||
<div class="side-panel-footer mt-4">
|
||
<div>
|
||
<button
|
||
type="submit"
|
||
class="btn btn-outline-primary"
|
||
:disabled="loading"
|
||
@click.prevent="save()"
|
||
>
|
||
<the-button-loading
|
||
v-if="loading"
|
||
:style="{ transform: 'scale(0.5)' }"
|
||
></the-button-loading>
|
||
ثبت
|
||
</button>
|
||
<button
|
||
:disabled="loading"
|
||
@click.prevent="showPanel = false"
|
||
type="button"
|
||
class="btn btn-default"
|
||
data-dismiss="modal"
|
||
>
|
||
لغو
|
||
</button>
|
||
</div>
|
||
|
||
<div>
|
||
<button
|
||
v-if="selectedItemClone.id"
|
||
@click="deleteItem(selectedItemClone.id)"
|
||
title="حذف"
|
||
class="btn delete-btn btn-outline-danger"
|
||
type="button"
|
||
>
|
||
<svg class="icon icon-Component-295--1">
|
||
<use xlink:href="#icon-Component-295--1"></use>
|
||
</svg>
|
||
حذف
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</NuxtLayout>
|
||
</template>
|
||
|
||
<script>
|
||
// import permitApi from "@permission/permitApi";
|
||
import apis from "~/apis/permitApi";
|
||
import adminMenu from "~/json/admin/json/menu.json";
|
||
// import { mapGetters, mapMutations, mapActions } from "vuex";
|
||
import { defineAsyncComponent } from "vue";
|
||
import { mapActions, mapState } from "pinia";
|
||
import { useCommonStore } from "~/stores/commonStore";
|
||
import { usePermitStore } from "~/stores/permitStore";
|
||
|
||
export default {
|
||
name: "Roles",
|
||
setup() {
|
||
definePageMeta({
|
||
name: "Roles",
|
||
layout: false,
|
||
});
|
||
},
|
||
mounted() {
|
||
this.checkPermisionBeforGetList();
|
||
},
|
||
created() {
|
||
this.httpService = useNuxtApp()["$http"];
|
||
},
|
||
watch: {
|
||
projectGetter() {
|
||
this.showPanel = false;
|
||
this.checkPermisionBeforGetList();
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
adminMenu:adminMenu,
|
||
httpService: {},
|
||
tableActions: [
|
||
{
|
||
showOutside: true,
|
||
show: true,
|
||
icon: "Component-242--1",
|
||
title: "ویرایش",
|
||
to: {
|
||
name: "undefined",
|
||
},
|
||
selected: false,
|
||
disabled: false,
|
||
howToOpen: "",
|
||
href: "",
|
||
class: "edit-btn",
|
||
action: "edit-table-item",
|
||
can: "item-info_edit",
|
||
},
|
||
{
|
||
showOutside: true,
|
||
show: true,
|
||
icon: "Component-295--1",
|
||
title: "حذف",
|
||
to: {
|
||
name: "undefined",
|
||
},
|
||
selected: false,
|
||
disabled: false,
|
||
howToOpen: "",
|
||
href: "",
|
||
class: "delete-btn",
|
||
action: "delete-table-item",
|
||
can: "item-list_delete",
|
||
},
|
||
],
|
||
canView: false,
|
||
fetchingData: false,
|
||
tableColumns: [
|
||
{
|
||
isLink: true,
|
||
key: "title",
|
||
title: "عنوان",
|
||
width: "2",
|
||
},
|
||
],
|
||
pagination: {
|
||
page: 1,
|
||
pages: 0,
|
||
total: 0,
|
||
offset: 0, // page * per_page
|
||
limit: 10, //per_page
|
||
},
|
||
sorting: {
|
||
sortby: "id",
|
||
sortorder: "asc", // asc | desc | none
|
||
},
|
||
roles: [],
|
||
loading: false,
|
||
showPanel: false,
|
||
selectedItemClone: {
|
||
title: "",
|
||
id: undefined,
|
||
// project_id: undefined,
|
||
},
|
||
prevSelectedItemIndex: undefined,
|
||
};
|
||
},
|
||
computed: {
|
||
// ...mapGetters("permit", ["projectGetter"]),
|
||
...mapState(usePermitStore, ["projectGetter"]),
|
||
},
|
||
methods: {
|
||
// ...mapActions(["checkPermissions"]),
|
||
// ...mapMutations("permit", ["SET_PROJECT"]),
|
||
...mapActions(useCommonStore, ["checkPermissions"]),
|
||
...mapActions(usePermitStore, ["SET_PROJECT"]),
|
||
|
||
async getRoles() {
|
||
this.fetchingData = true;
|
||
const payload = {
|
||
// project_id: this.projectGetter?.id,
|
||
isown: 3,
|
||
...this.sorting,
|
||
...this.pagination,
|
||
};
|
||
return await ApiService.formData(permitApi.roles.list, payload)
|
||
.then((res) => {
|
||
this.roles = res.data.data;
|
||
this.pagination = { ...this.pagination, ...res.data.pagination };
|
||
})
|
||
|
||
.finally(() => {
|
||
this.fetchingData = false;
|
||
this.changeDetectionCounter++;
|
||
});
|
||
},
|
||
save() {
|
||
const url = this.selectedItemClone.id
|
||
? permitApi.roles.edit
|
||
: permitApi.roles.add;
|
||
|
||
ApiService.formData(url, this.selectedItemClone).then((res) => {
|
||
this.getRoles();
|
||
|
||
this.mySwalToast({
|
||
title: "تبریک",
|
||
html: res.data.message,
|
||
icon: "success",
|
||
});
|
||
|
||
this.showPanel = false;
|
||
this.resetForm();
|
||
});
|
||
},
|
||
deleteItem(index) {
|
||
let sectionId = this.roles[index].id;
|
||
const data = {
|
||
// project_id: this.projectGetter?.id,
|
||
id: sectionId,
|
||
};
|
||
|
||
this.mySwalConfirm({
|
||
title: "هشدار",
|
||
html: "از حذف این بخش مطمئن هستید؟",
|
||
icon: "warning",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
ApiService.formData(permitApi.roles.delete, data).then((res) => {
|
||
this.getRoles();
|
||
|
||
this.mySwalToast({
|
||
title: "تبریک",
|
||
html: res.data.message,
|
||
icon: "success",
|
||
});
|
||
});
|
||
}
|
||
});
|
||
},
|
||
updateList() {
|
||
this.resetPagination();
|
||
this.getRoles();
|
||
},
|
||
resetPagination() {
|
||
this.pagination = {
|
||
pages: 0,
|
||
total: 0,
|
||
page: 1,
|
||
offset: 0,
|
||
limit: 10,
|
||
};
|
||
},
|
||
pageLimitChanged(paging) {
|
||
this.resetPagination();
|
||
this.pagination.limit = paging.limit;
|
||
|
||
this.getRoles();
|
||
},
|
||
pageChanged(paging) {
|
||
let page = paging.pageNumber;
|
||
page -= 1;
|
||
this.pagination.offset = page * paging.limit;
|
||
this.pagination.limit = paging.limit;
|
||
this.pagination.page = paging.pageNumber;
|
||
|
||
this.getRoles();
|
||
},
|
||
sortChanged(sorting) {
|
||
// keep limit status.
|
||
// reset page and offset values.
|
||
|
||
this.pagination.page = this.pagination.offset = 0;
|
||
this.sorting = sorting;
|
||
|
||
this.getRoles();
|
||
},
|
||
toggleRolesPanel(index = undefined) {
|
||
if (index !== undefined) {
|
||
if (this.prevSelectedItemIndex !== undefined)
|
||
this.roles[this.prevSelectedItemIndex].active = false;
|
||
|
||
this.prevSelectedItemIndex = index;
|
||
this.roles[index].active = true;
|
||
|
||
this.selectedItemClone = structuredClone(this.roles[index]);
|
||
} else this.resetForm();
|
||
|
||
this.showPanel = true;
|
||
},
|
||
resetForm() {
|
||
this.selectedItemClone = {
|
||
title: "",
|
||
id: undefined,
|
||
// project_id: this.projectGetter?.id,
|
||
};
|
||
},
|
||
checkPermisionBeforGetList() {
|
||
if (this.fetchingData) return;
|
||
this.fetchingData = true;
|
||
|
||
this.checkPermissions({ permission: "roles_view", _this: this })
|
||
.then(() => {
|
||
if (this.projectGetter) {
|
||
this.getRoles()
|
||
.then(() => {
|
||
this.canView = true;
|
||
this.fetchingData = false;
|
||
})
|
||
.catch(() => {
|
||
this.canView = false;
|
||
this.fetchingData = false;
|
||
});
|
||
} else {
|
||
this.getProjects().then(() => {
|
||
this.getRoles()
|
||
.then(() => {
|
||
this.canView = true;
|
||
this.fetchingData = false;
|
||
})
|
||
.catch(() => {
|
||
this.canView = false;
|
||
this.fetchingData = false;
|
||
});
|
||
});
|
||
}
|
||
})
|
||
.catch(() => {
|
||
this.canView = false;
|
||
this.fetchingData = false;
|
||
});
|
||
},
|
||
async getProjects() {
|
||
return await ApiService.formData(permitApi.projects.list).then((res) => {
|
||
this.SET_PROJECT(res.data.data[0]);
|
||
});
|
||
},
|
||
},
|
||
components: {
|
||
// SubHeaderWithSelect: defineAsyncComponent(() =>
|
||
// import("@/components/global/SubHeaderWithSelect.vue")
|
||
// ),
|
||
// TheContentLoading: defineAsyncComponent(() =>
|
||
// import("@/components/global/TheContentLoading.vue")
|
||
// ),
|
||
// MyTable: defineAsyncComponent(() =>
|
||
// import("@/components/global/MyTable.vue")
|
||
// ),
|
||
// NoData: defineAsyncComponent(() =>
|
||
// import("@/components/global/NoData.vue")
|
||
// ),
|
||
// TheButtonLoading: defineAsyncComponent(() =>
|
||
// import("@/components/global/TheButtonLoading.vue")
|
||
// ),
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss"></style>
|