390 lines
12 KiB
Vue
390 lines
12 KiB
Vue
|
<!-- برای نمایش یک جزء از قانون استفاده می شود -->
|
||
|
|
|
||
|
|
<!-- don't change the class: problem-section__content,
|
||
|
|
otherwise the remove link will not work. -->
|
||
|
|
<template>
|
||
|
|
<main class="main" id="top">
|
||
|
|
<the-sidebar
|
||
|
|
:showUserAvatar="!isMajlesBuild"
|
||
|
|
:menu="sidbarMenu"
|
||
|
|
></the-sidebar>
|
||
|
|
|
||
|
|
<section
|
||
|
|
class="main-page__content"
|
||
|
|
:class="{ expanded: !isSidebarCollapsed }"
|
||
|
|
>
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div
|
||
|
|
:class="buildName + '-header-color'"
|
||
|
|
class="row align-items-center"
|
||
|
|
>
|
||
|
|
<div class="col col-lg-auto order-1">
|
||
|
|
<div class="d-flex align-items-center">
|
||
|
|
<button
|
||
|
|
name="button"
|
||
|
|
type="button"
|
||
|
|
class="toggle-mobile-nav dropdown-hamburger d-md-none"
|
||
|
|
@click.prevent="toggleSidebarMenu()"
|
||
|
|
>
|
||
|
|
<span class="sr-only">باز کردن منوی کنار</span>
|
||
|
|
<svg class="s18" data-testid="sidebar-icon">
|
||
|
|
<use href="assets/common/img/icons.svg#sidebar"></use>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<router-link
|
||
|
|
:to="{
|
||
|
|
name: 'defaultRoute',
|
||
|
|
}"
|
||
|
|
classes="btn me-3"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
:src="logoPhoto()"
|
||
|
|
:alt="appLongTitle"
|
||
|
|
class="img-fluid logo"
|
||
|
|
style="max-width: 2.5em"
|
||
|
|
/>
|
||
|
|
</router-link>
|
||
|
|
</div>
|
||
|
|
<!-- <div
|
||
|
|
class="d-flex align-items-center"
|
||
|
|
v-if="navigateChartSchemaGetter?.length"
|
||
|
|
>
|
||
|
|
<label for="repositories-desktop" class="ms-2 no-wrap">
|
||
|
|
بانک داده
|
||
|
|
</label>
|
||
|
|
<multiselect
|
||
|
|
:allow-empty="false"
|
||
|
|
:searchable="true"
|
||
|
|
:close-on-select="true"
|
||
|
|
:show-labels="false"
|
||
|
|
label="label"
|
||
|
|
track-by="key"
|
||
|
|
placeholder="انتخاب فهرست"
|
||
|
|
:value="selectedNavigation"
|
||
|
|
:options="navigateChartSchemaGetter"
|
||
|
|
@select="onSelectNavigation"
|
||
|
|
:hide-selected="false"
|
||
|
|
:max-height="200"
|
||
|
|
id="repositories-desktop"
|
||
|
|
>
|
||
|
|
</multiselect>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
<div class="col-12 col-lg order-3 order-lg-2">
|
||
|
|
<div class="nav-tabs-container nav-tabs">
|
||
|
|
<ul v-if="navList" class="nav">
|
||
|
|
<li
|
||
|
|
class="nav-item desktop"
|
||
|
|
v-for="(navItem, index) in navList"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
:title="navItem.title"
|
||
|
|
type="button"
|
||
|
|
class="btn nav-link"
|
||
|
|
@click.prevent="setActiveTab(navItem)"
|
||
|
|
:class="{
|
||
|
|
active: activeTabGetter?.key == navItem.key,
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
{{ navItem.title }}
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li
|
||
|
|
class="nav-item mobile tabs-more-btn d-lg-none"
|
||
|
|
v-if="navList?.length > 2"
|
||
|
|
>
|
||
|
|
<div class="dropdown">
|
||
|
|
<button
|
||
|
|
class="btn"
|
||
|
|
type="button"
|
||
|
|
id="dropdownMenuButton"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<svg class="icon icon-Component-81--1">
|
||
|
|
<use xlink:href="#icon-Component-81--1"></use>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<div
|
||
|
|
class="dropdown-menu"
|
||
|
|
aria-labelledby="dropdownMenuButton"
|
||
|
|
>
|
||
|
|
<!-- v-if="canSee(navItem.key + '_view') && index > 2" -->
|
||
|
|
|
||
|
|
<a
|
||
|
|
class="dropdown-item"
|
||
|
|
href="#"
|
||
|
|
v-for="(navItem, index) in navList"
|
||
|
|
:key="index"
|
||
|
|
@click.prevent="setActiveTab(navItem)"
|
||
|
|
:class="{
|
||
|
|
active: activeTabGetter?.key == navItem.key,
|
||
|
|
}"
|
||
|
|
v-if="index > 2"
|
||
|
|
>{{ navItem.title }}</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- <div
|
||
|
|
class="d-flex pt-2"
|
||
|
|
v-if="activeNavigateChartSchemaGetter?.info?.items"
|
||
|
|
>
|
||
|
|
<div class="ms-2">
|
||
|
|
<multiselect
|
||
|
|
:searchable="true"
|
||
|
|
:close-on-select="true"
|
||
|
|
:show-labels="false"
|
||
|
|
label="title"
|
||
|
|
track-by="name"
|
||
|
|
placeholder="انتخاب فیلتر"
|
||
|
|
v-model="
|
||
|
|
schemaFilters[activeNavigateChartSchemaGetter?.key]
|
||
|
|
"
|
||
|
|
:options="activeNavigateChartSchemaGetter?.info?.items"
|
||
|
|
@select="onComboChanged()"
|
||
|
|
@remove="onComboChanged()"
|
||
|
|
:hide-selected="false"
|
||
|
|
:max-height="200"
|
||
|
|
openDirection="rtl"
|
||
|
|
>
|
||
|
|
<span slot="noResult">موردی پیدا نشد.</span>
|
||
|
|
</multiselect>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
v-if="!isMajlesBuild"
|
||
|
|
class="col-auto col-lg-auto order-2 order-lg-3"
|
||
|
|
>
|
||
|
|
<user-avatar-dropdown
|
||
|
|
style="position: static"
|
||
|
|
class="user-avatar-component"
|
||
|
|
></user-avatar-dropdown>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mx-2">
|
||
|
|
<div class="col-12">
|
||
|
|
<component
|
||
|
|
v-if="mainComponentName"
|
||
|
|
:key="renderId"
|
||
|
|
:propText="mainComponentName"
|
||
|
|
:is="mainComponentName"
|
||
|
|
:slug="slug"
|
||
|
|
:schemaItems="tabSchemaItems"
|
||
|
|
:routeEntityid="myEntityid"
|
||
|
|
@changeEntityid="changeEntityid"
|
||
|
|
></component>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import sidbarMenuDefault from "~/json/entity/json/detailMenu.json";
|
||
|
|
import sidbarMenuMajles from "~/json/entity/json/detailMenuMajles.json";
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
import { mapActions, mapState } from "pinia";
|
||
|
|
import entityApi from "~/apis/entityApi";
|
||
|
|
import { useStorage } from "@vueuse/core";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name:'detail',
|
||
|
|
props: {
|
||
|
|
slug: {
|
||
|
|
default: "mqsection",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
beforeMount() {
|
||
|
|
this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL);
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getSchemas();
|
||
|
|
|
||
|
|
if (this.activeEntityViewSchemaGetter?.tabs) this.setActiveTab();
|
||
|
|
|
||
|
|
this.myEntityid =
|
||
|
|
this.myEntityid == "" ? this.$route.params?.id : this.myEntityid;
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
sidbarMenuDefault: sidbarMenuDefault,
|
||
|
|
sidbarMenuMajles: sidbarMenuMajles,
|
||
|
|
|
||
|
|
myEntityid: "",
|
||
|
|
renderId: 1,
|
||
|
|
mainComponentName: null,
|
||
|
|
tabSchemaItems: undefined,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState("entity", [
|
||
|
|
"selectedItemEntityGetter",
|
||
|
|
"entityViewSchemaGetter",
|
||
|
|
"activeEntityViewSchemaGetter",
|
||
|
|
"activeTabGetter",
|
||
|
|
]),
|
||
|
|
...mapState(["organNameGetter"]),
|
||
|
|
...mapState(["isSidebarCollapsed"]),
|
||
|
|
sidbarMenu() {
|
||
|
|
if (isMajlesBuild()) return this.sidbarMenuMajles;
|
||
|
|
else return this.sidbarMenuDefault;
|
||
|
|
},
|
||
|
|
navList() {
|
||
|
|
if (!isMajlesBuild()) return this.activeEntityViewSchemaGetter?.tabs;
|
||
|
|
|
||
|
|
if (this.activeEntityViewSchemaGetter?.tabs)
|
||
|
|
return this.activeEntityViewSchemaGetter?.tabs.slice(
|
||
|
|
0,
|
||
|
|
this.activeEntityViewSchemaGetter.tabs.length - 1
|
||
|
|
);
|
||
|
|
else return [];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions("entity", [
|
||
|
|
"activeEntityViewSchemaSetter",
|
||
|
|
"entityViewSchemaSetter",
|
||
|
|
"activeTabSetter",
|
||
|
|
]),
|
||
|
|
...mapActions(["checkPermissions"]),
|
||
|
|
|
||
|
|
changeEntityid(newEntityid) {
|
||
|
|
this.myEntityid = newEntityid;
|
||
|
|
// this.renderId++;
|
||
|
|
},
|
||
|
|
getSchemas() {
|
||
|
|
let localStoageSchema = useStorage("qaSchema", undefined).value;
|
||
|
|
|
||
|
|
if (localStoageSchema) {
|
||
|
|
let schema = JSON.parse(localStoageSchema);
|
||
|
|
this.activeEntityViewSchemaSetter(schema);
|
||
|
|
this.setActiveTab();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.httpService
|
||
|
|
.postRequest(entityApi.schema.list, {
|
||
|
|
organ: this.organNameGetter,
|
||
|
|
system: "entityView",
|
||
|
|
build_state: buildState(),
|
||
|
|
})
|
||
|
|
.then((response) => {
|
||
|
|
// console.log(response);
|
||
|
|
const routeParamsKey = this.$route.params.key;
|
||
|
|
let schemaBasedOnRouteKeyIndex = response.data.entityView.findIndex(
|
||
|
|
(item) => item.key == routeParamsKey
|
||
|
|
);
|
||
|
|
schemaBasedOnRouteKeyIndex =
|
||
|
|
schemaBasedOnRouteKeyIndex == -1 ? 0 : schemaBasedOnRouteKeyIndex;
|
||
|
|
this.entityViewSchemaSetter(response.data.entityView);
|
||
|
|
this.activeEntityViewSchemaSetter(
|
||
|
|
response.data.entityView[schemaBasedOnRouteKeyIndex]
|
||
|
|
);
|
||
|
|
this.setActiveTab();
|
||
|
|
// this.activeTabSetter(
|
||
|
|
// response.data.entityView[schemaBasedOnRouteKeyIndex].tabs[0]
|
||
|
|
// );
|
||
|
|
|
||
|
|
// this.updateMainContent();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
setActiveTab(tab = undefined) {
|
||
|
|
if (!tab) {
|
||
|
|
if (this.$route?.hash) {
|
||
|
|
let hash = this.$route?.hash.replace("#", "");
|
||
|
|
console.log(hash);
|
||
|
|
let index = this.activeEntityViewSchemaGetter?.tabs.findIndex(
|
||
|
|
(item) => item.key == hash
|
||
|
|
);
|
||
|
|
if (index != -1) tab = this.activeEntityViewSchemaGetter?.tabs[index];
|
||
|
|
} else tab = this.activeEntityViewSchemaGetter?.tabs[0];
|
||
|
|
}
|
||
|
|
if (!tab) return;
|
||
|
|
|
||
|
|
this.renderId++;
|
||
|
|
this.activeTabSetter(tab);
|
||
|
|
this.tabSchemaItems = undefined;
|
||
|
|
this.mainComponentName = "EntityQSection";
|
||
|
|
this.tabSchemaItems = tab.items
|
||
|
|
? tab.items
|
||
|
|
: this.activeEntityViewSchemaGetter.items;
|
||
|
|
|
||
|
|
if (tab.componentName) {
|
||
|
|
this.mainComponentName = tab.componentName;
|
||
|
|
}
|
||
|
|
|
||
|
|
// if (tab?.key == "content") {
|
||
|
|
// this.mainComponentName = "EntityQSection";
|
||
|
|
// this.tabSchemaItems = tab.items
|
||
|
|
// ? tab.items
|
||
|
|
// : this.activeEntityViewSchemaGetter.items;
|
||
|
|
// }
|
||
|
|
// if (tab?.key == "qmodel") {
|
||
|
|
// this.mainComponentName = "EntityQModel";
|
||
|
|
// this.tabSchemaItems = tab.items
|
||
|
|
// ? tab.items
|
||
|
|
// : this.activeEntityViewSchemaGetter.items;
|
||
|
|
// }
|
||
|
|
// if (tab?.key == "graph") {
|
||
|
|
// this.mainComponentName = "ChartGraph";
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.show-reports-button {
|
||
|
|
opacity: 0.6;
|
||
|
|
color: #92a2b2;
|
||
|
|
}
|
||
|
|
.problem-detail {
|
||
|
|
width: 98% !important;
|
||
|
|
margin: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-title-QSection1 {
|
||
|
|
color: #00abff !important;
|
||
|
|
&:hover {
|
||
|
|
// color: blue !important;
|
||
|
|
text-decoration: underline !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.text-title-nextItem {
|
||
|
|
color: #00abff !important;
|
||
|
|
&:hover {
|
||
|
|
color: #0575ad !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.text-title-prevItem {
|
||
|
|
color: #00abff !important;
|
||
|
|
&:hover {
|
||
|
|
color: #0575ad !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.text-title-QSection2 {
|
||
|
|
color: #00abff !important;
|
||
|
|
&:hover {
|
||
|
|
// color: blue !important;
|
||
|
|
text-decoration: underline !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.nav-tabs-container {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
</style>
|