<script lang="ts" setup>
|
import { computed, onMounted, reactive, toRefs } from 'vue';
|
|
import { ScrollContainer } from '@jnpf/ui';
|
|
import { getSelectorAll } from '#/api/system/menu';
|
|
import { chartList, layoutList, needDataSetList, needJumpSetList, systemList } from '../helper/dataMap';
|
import BarStyle from '../rightComponents/RBarStyle.vue';
|
import Card from '../rightComponents/RCard.vue';
|
import Color from '../rightComponents/RColor.vue';
|
import Common from '../rightComponents/RCommon.vue';
|
import CustomEcharts from '../rightComponents/RCustomEcharts.vue';
|
import Data from '../rightComponents/RData.vue';
|
import Jump from '../rightComponents/RJump.vue';
|
import Label from '../rightComponents/RLabel.vue';
|
import Legend from '../rightComponents/RLegend.vue';
|
import MainTitle from '../rightComponents/RMainTitle.vue';
|
import Margin from '../rightComponents/RMargin.vue';
|
import NoticeSet from '../rightComponents/RNoticeSet.vue';
|
import Refresh from '../rightComponents/RRefresh.vue';
|
import SubTitle from '../rightComponents/RSubTitle.vue';
|
import TableSet from '../rightComponents/RTableSet.vue';
|
import TabSet from '../rightComponents/RTabSet.vue';
|
import Tooltip from '../rightComponents/RTooltip.vue';
|
import XAxis from '../rightComponents/RXAxis.vue';
|
import YAxis from '../rightComponents/RYAxis.vue';
|
|
interface State {
|
activeKey: number;
|
activeName: number;
|
menuList: any[];
|
appMenuList: any[];
|
}
|
|
const props = defineProps(['activeData', 'showType', 'refresh']);
|
const state = reactive<State>({
|
activeKey: 1,
|
activeName: 0,
|
menuList: [],
|
appMenuList: [],
|
});
|
const { activeKey, activeName, menuList, appMenuList } = toRefs(state);
|
const noNeedTypeSetList = [...layoutList, ...systemList, 'tableList', 'customEcharts'];
|
|
const getVisibilityOptions = computed(() => {
|
return [
|
{ id: 'pc', fullName: 'Web' },
|
{ id: 'app', fullName: 'App', disabled: props.activeData?.jnpfKey === 'iframe' },
|
];
|
});
|
|
function init() {
|
getSelectorAll({ category: 'Web' }).then((res) => {
|
state.menuList = (res.data.list || []).filter((o) => o.children && o.children.length);
|
});
|
getSelectorAll({ category: 'App' }).then((res) => {
|
state.appMenuList = (res.data.list || []).filter((o) => o.children && o.children.length);
|
});
|
}
|
|
onMounted(() => init());
|
</script>
|
<template>
|
<div class="right-box">
|
<a-tabs v-model:active-key="activeKey" :tab-bar-gutter="10" class="average-tabs">
|
<a-tab-pane :key="1" tab="控件属性" />
|
<a-tab-pane :key="2" tab="门户属性" />
|
</a-tabs>
|
<div class="field-box">
|
<ScrollContainer class="p-[15px] !pt-[0px]">
|
<a-form :colon="false" layout="vertical" v-if="activeKey === 1 && activeData && activeData.jnpfKey">
|
<a-collapse v-model:active-key="activeName" accordion ghost expand-icon-position="end">
|
<Card
|
:key="1"
|
:active-data="activeData"
|
:show-type="showType"
|
:menu-list="menuList"
|
:app-menu-list="appMenuList"
|
v-if="activeData.jnpfKey != 'tab' && activeData.jnpfKey != 'collapse'" />
|
<Common
|
:key="2"
|
:active-data="activeData"
|
:show-type="showType"
|
:menu-list="menuList"
|
:app-menu-list="appMenuList"
|
v-if="!noNeedTypeSetList.includes(activeData.jnpfKey)" />
|
<template v-if="chartList.includes(activeData.jnpfKey) || activeData.jnpfKey == 'mapChart'">
|
<MainTitle :key="3" :active-data="activeData" :show-type="showType" />
|
<SubTitle :key="4" :active-data="activeData" :show-type="showType" />
|
<BarStyle :key="5" :active-data="activeData" :show-type="showType" v-if="activeData.jnpfKey == 'barChart'" />
|
</template>
|
<XAxis :key="6" :active-data="activeData" :show-type="showType" v-if="activeData.jnpfKey == 'barChart' || activeData.jnpfKey == 'lineChart'" />
|
<YAxis :key="7" :active-data="activeData" :show-type="showType" v-if="activeData.jnpfKey == 'barChart' || activeData.jnpfKey == 'lineChart'" />
|
<Label :key="8" :active-data="activeData" :show-type="showType" v-if="chartList.includes(activeData.jnpfKey)" />
|
<template v-if="chartList.includes(activeData.jnpfKey) || activeData.jnpfKey == 'mapChart'">
|
<Tooltip :key="9" :active-data="activeData" :show-type="showType" />
|
<Margin :key="10" :active-data="activeData" :show-type="showType" v-if="showType == 'pc'" />
|
</template>
|
<template v-if="chartList.includes(activeData.jnpfKey)">
|
<Legend :key="11" :active-data="activeData" :show-type="showType" />
|
<Color :key="12" :active-data="activeData" :show-type="showType" />
|
</template>
|
<Data :key="13" :active-data="activeData" :show-type="showType" v-if="needDataSetList.includes(activeData.jnpfKey)" />
|
<TableSet :key="14" :active-data="activeData" :show-type="showType" v-if="activeData.jnpfKey == 'tableList'" />
|
<Jump :key="19" :active-data="activeData" :show-type="showType" v-if="needJumpSetList.includes(activeData.jnpfKey)" />
|
<TabSet :key="15" :active-data="activeData" :show-type="showType" v-if="activeData.jnpfKey == 'tab'" />
|
<NoticeSet :key="17" :active-data="activeData" :show-type="showType" v-if="activeData.jnpfKey == 'notice'" />
|
<CustomEcharts :key="18" :active-data="activeData" :show-type="showType" v-if="activeData.jnpfKey == 'customEcharts'" />
|
</a-collapse>
|
<a-form-item label="多端显示" class="!mt-[10px]">
|
<jnpf-checkbox v-model:value="activeData.visibility" :options="getVisibilityOptions" />
|
</a-form-item>
|
</a-form>
|
<a-form :colon="false" label-align="left" layout="vertical" v-if="activeKey === 2">
|
<Refresh class="pt-[15px]" :refresh="refresh" />
|
</a-form>
|
</ScrollContainer>
|
</div>
|
</div>
|
</template>
|
