355 lines
10 KiB
Vue
355 lines
10 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: qruleActiveTabGetter?.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: qruleActiveTabGetter?.key == navItem.key,
|
||
|
|
}"
|
||
|
|
v-if="index > 2"
|
||
|
|
>{{ navItem.title }}</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</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"
|
||
|
|
@set-active-tab="setActiveTab"
|
||
|
|
></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:'qrule',
|
||
|
|
props: {
|
||
|
|
slug: {
|
||
|
|
default: "qmodel",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
beforeMount() {
|
||
|
|
this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL);
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getSchemas();
|
||
|
|
|
||
|
|
if (this.qruleActiveSchemaGetter?.tabs)
|
||
|
|
this.setActiveTab(this.qruleActiveSchemaGetter?.tabs[0]);
|
||
|
|
|
||
|
|
// if (this.qruleSchemaGetter) {
|
||
|
|
// let qModelRuleIndex = this.qruleSchemaGetter.findIndex(
|
||
|
|
// (item) => item.key == "qmodelrule"
|
||
|
|
// );
|
||
|
|
|
||
|
|
// this.setActiveTab(this.qruleSchemaGetter[qModelRuleIndex]?.tabs[0]);
|
||
|
|
// }
|
||
|
|
|
||
|
|
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",
|
||
|
|
"qruleSchemaGetter",
|
||
|
|
"qruleActiveSchemaGetter",
|
||
|
|
"qruleActiveTabGetter",
|
||
|
|
"breadCrumbGetter",
|
||
|
|
]),
|
||
|
|
...mapState(["organNameGetter"]),
|
||
|
|
...mapState(["isSidebarCollapsed"]),
|
||
|
|
sidbarMenu() {
|
||
|
|
if (isMajlesBuild()) return this.sidbarMenuMajles;
|
||
|
|
else return this.sidbarMenuDefault;
|
||
|
|
},
|
||
|
|
navList() {
|
||
|
|
if (!isMajlesBuild()) return this.qruleActiveSchemaGetter?.tabs;
|
||
|
|
|
||
|
|
if (this.qruleActiveSchemaGetter?.tabs)
|
||
|
|
return this.qruleActiveSchemaGetter?.tabs.slice(
|
||
|
|
0,
|
||
|
|
this.qruleActiveSchemaGetter.tabs.length - 1
|
||
|
|
);
|
||
|
|
else return [];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions("entity", [
|
||
|
|
"qruleActiveSchemaSetter",
|
||
|
|
"qruleSchemaSetter",
|
||
|
|
"qruleActiveTabSetter",
|
||
|
|
"breadCrumbSetter",
|
||
|
|
]),
|
||
|
|
...mapActions(["checkPermissions"]),
|
||
|
|
|
||
|
|
changeEntityid(newEntityid) {
|
||
|
|
this.myEntityid = newEntityid;
|
||
|
|
// this.renderId++;
|
||
|
|
},
|
||
|
|
getSchemas() {
|
||
|
|
let localStoageSchema = useStorage("qaSchema",undefined).value;
|
||
|
|
|
||
|
|
if (localStoageSchema) {
|
||
|
|
let schema = JSON.parse(localStoageSchema);
|
||
|
|
this.qruleActiveSchemaSetter(schema);
|
||
|
|
this.setActiveTab(this.qruleActiveSchemaGetter?.tabs[0]);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.httpService
|
||
|
|
.postRequest(entityApi.schema.list, {
|
||
|
|
organ: this.organNameGetter,
|
||
|
|
system: "entityView",
|
||
|
|
build_state: buildState(),
|
||
|
|
})
|
||
|
|
.then((response) => {
|
||
|
|
// console.log(response);
|
||
|
|
const routeParamsKey = this.$route.name;
|
||
|
|
let schemaBasedOnRouteKeyIndex = response.data.entityView.findIndex(
|
||
|
|
(item) => item.key == routeParamsKey
|
||
|
|
);
|
||
|
|
schemaBasedOnRouteKeyIndex =
|
||
|
|
schemaBasedOnRouteKeyIndex == -1 ? 0 : schemaBasedOnRouteKeyIndex;
|
||
|
|
this.qruleSchemaSetter(response.data.entityView);
|
||
|
|
this.qruleActiveSchemaSetter(
|
||
|
|
response.data.entityView[schemaBasedOnRouteKeyIndex]
|
||
|
|
);
|
||
|
|
this.setActiveTab(this.qruleActiveSchemaGetter?.tabs[0]);
|
||
|
|
// this.qruleActiveTabSetter(
|
||
|
|
// response.data.entityView[schemaBasedOnRouteKeyIndex].tabs[0]
|
||
|
|
// );
|
||
|
|
|
||
|
|
// this.updateMainContent();
|
||
|
|
})
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
setActiveTab(tab) {
|
||
|
|
this.renderId++;
|
||
|
|
this.qruleActiveTabSetter(tab);
|
||
|
|
this.tabSchemaItems = undefined;
|
||
|
|
this.mainComponentName = "EntityQModelRule";
|
||
|
|
this.tabSchemaItems = tab.items
|
||
|
|
? tab.items
|
||
|
|
: this.qruleActiveSchemaGetter.items;
|
||
|
|
|
||
|
|
if (tab.componentName) {
|
||
|
|
this.mainComponentName = tab.componentName;
|
||
|
|
}
|
||
|
|
this.resetBreadcrumb();
|
||
|
|
},
|
||
|
|
resetBreadcrumb() {
|
||
|
|
if (this.qruleActiveTabGetter.key == "rulelist") {
|
||
|
|
this.breadCrumbSetter();
|
||
|
|
} else if (this.qruleActiveTabGetter.key == "rulelogic") {
|
||
|
|
let bread = this.breadCrumbGetter;
|
||
|
|
bread.pop();
|
||
|
|
this.breadCrumbSetter(bread.length ?? undefined );
|
||
|
|
}
|
||
|
|
// else if(this.qruleActiveTabGetter.key == 'ruletriple')
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
};
|
||
|
|
</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>
|