<script setup lang="ts">
|
import { computed, onMounted, reactive, toRefs, unref, watch } from 'vue';
|
|
import { ScrollContainer } from '@jnpf/ui';
|
|
import { cloneDeep } from 'lodash-es';
|
|
import { globalSysField } from '#/utils/constants/organize';
|
|
import ReportCharBarProperties from './ReportCharBarProperties.vue';
|
import ReportCharColorProperties from './ReportCharColorProperties.vue';
|
import ReportChartCommonProperties from './ReportChartCommonProperties.vue';
|
import ReportChartDataProperties from './ReportChartDataProperties.vue';
|
import ReportChartLabelProperties from './ReportChartLabelProperties.vue';
|
import ReportChartLegendProperties from './ReportChartLegendProperties.vue';
|
import ReportChartMainTitleProperties from './ReportChartMainTitleProperties.vue';
|
import ReportChartMarginProperties from './ReportChartMarginProperties.vue';
|
import ReportCharTooltipProperties from './ReportCharTooltipProperties.vue';
|
import ReportChartProperties from './ReportChartProperties.vue';
|
import ReportChartSubtitleProperties from './ReportChartSubtitleProperties.vue';
|
import ReportChartXAxisProperties from './ReportChartXAxisProperties.vue';
|
import ReportChartYAxisProperties from './ReportChartYAxisProperties.vue';
|
import ReportDataProperties from './ReportDataProperties.vue';
|
import ReportImageProperties from './ReportImageProperties.vue';
|
import ReportJsBarcodeProperties from './ReportJsBarcodeProperties.vue';
|
import ReportParamProperties from './ReportParamProperties.vue';
|
import ReportQrCodeProperties from './ReportQrcodeProperties.vue';
|
import ReportTextProperties from './ReportTextProperties.vue';
|
|
interface State {
|
activeKey: Number;
|
}
|
|
const props = defineProps([
|
'activeSheetId',
|
'activeData',
|
'dataSetList',
|
'queryList',
|
'defaultEchartOptions',
|
'jnpfUniverRef',
|
'imageConfig',
|
'cellFromDialogValue',
|
]);
|
|
const emits = defineEmits(['clearCellRelevanceValue']);
|
|
const state = reactive<State>({
|
activeKey: 1,
|
});
|
const { activeKey } = toRefs(state);
|
|
const options = [
|
{ id: 'text', fullName: '文本' },
|
{ id: 'dataSource', fullName: '数据集' },
|
{ id: 'chart', fullName: '图表' },
|
{ id: 'parameter', fullName: '参数' },
|
// { id: 'chart', fullName: '图表' },
|
// { id: 'link', fullName: '链接' },
|
{ id: 'jsbarcode', fullName: '条形码' },
|
{ id: 'qrCode', fullName: '二维码' },
|
];
|
|
const systemParameters = [
|
{
|
id: 'system',
|
fullName: '系统参数',
|
children: [...globalSysField],
|
},
|
];
|
|
const getCommonBind = computed(() => ({
|
dataSetList: props.dataSetList,
|
queryList: unref(getQueryList),
|
getCustomRowNameList: props.activeData.getCustomRowNameList,
|
getMaxRows: props.activeData.getMaxRows,
|
jnpfUniverRef: props.jnpfUniverRef,
|
startColumn: props.activeData.startColumn,
|
startRow: props.activeData.startRow,
|
cellFromDialogValue: props.cellFromDialogValue,
|
}));
|
const getChartBind = computed(() => ({
|
dataSetList: props.dataSetList,
|
chart: props.activeData.chart,
|
}));
|
|
const getQueryList = computed(() => {
|
const treeData = { id: 'query', fullName: '查询参数' };
|
|
const children = (props.queryList || [])
|
.filter((item) => item.sheet === props.activeSheetId)
|
.flatMap((item) =>
|
(item.queryList || []).map((option) => ({
|
id: option.vModel,
|
fullName: `${option.vModel}（${option.label}）`,
|
})),
|
);
|
|
return children?.length ? [...systemParameters, { ...treeData, children }] : [...systemParameters];
|
});
|
|
watch(
|
() => props.activeData.type,
|
() => {
|
state.activeKey = 1;
|
},
|
{ deep: true },
|
);
|
|
function updateDefaultChart(type) {
|
const newChart = {
|
...props.defaultEchartOptions[type],
|
classifyNameField: props.activeData.chart.classifyNameField,
|
seriesNameField: props.activeData.chart.seriesNameField,
|
seriesDataField: props.activeData.chart.seriesDataField,
|
maxField: props.activeData.chart.maxField,
|
summaryType: props.activeData.chart.summaryType,
|
chartType: type,
|
title: props.activeData.chart.title,
|
tooltip: props.activeData.chart.tooltip,
|
isFloat: props.activeData.chart.isFloat,
|
};
|
props.activeData.chart = cloneDeep(newChart);
|
}
|
function onTypeChange() {
|
props.activeData.cellData.v = '';
|
}
|
|
function clearCellRelevanceValue() {
|
emits('clearCellRelevanceValue');
|
}
|
|
onMounted(() => {
|
state.activeKey = 1;
|
});
|
</script>
|
|
<template>
|
<div class="field-box">
|
<ScrollContainer class="!pt-[0px]">
|
<a-form :model="activeData" layout="vertical" :colon="false">
|
<a-collapse v-model:active-key="activeKey" accordion ghost expand-icon-position="end">
|
<template v-if="activeData.type == 'chart'">
|
<a-collapse-panel :key="1">
|
<template #header>基础设置</template>
|
<a-form-item v-if="!activeData.chart.isFloat" name="type" label="单元类型">
|
<jnpf-select v-model:value="activeData.type" :options="options" @change="onTypeChange" />
|
</a-form-item>
|
<ReportChartProperties v-bind="getChartBind" @update-default-chart="updateDefaultChart" />
|
</a-collapse-panel>
|
<ReportChartCommonProperties :key="2" v-bind="getChartBind" />
|
<ReportCharBarProperties :key="3" v-bind="getChartBind" v-if="activeData.chart.chartType == 'bar'" />
|
<ReportChartDataProperties :key="4" v-bind="getChartBind" />
|
<ReportChartMainTitleProperties :key="5" v-bind="getChartBind" />
|
<ReportChartSubtitleProperties :key="6" v-bind="getChartBind" />
|
<ReportChartXAxisProperties :key="7" v-bind="getChartBind" v-if="['bar', 'line'].includes(activeData.chart.chartType)" />
|
<ReportChartYAxisProperties :key="8" v-bind="getChartBind" v-if="['bar', 'line'].includes(activeData.chart.chartType)" />
|
<ReportChartLabelProperties :key="9" v-bind="getChartBind" />
|
<ReportCharTooltipProperties :key="10" v-bind="getChartBind" />
|
<ReportChartMarginProperties :key="11" v-bind="getChartBind" />
|
<ReportChartLegendProperties :key="12" v-bind="getChartBind" />
|
<ReportCharColorProperties :key="13" v-bind="getChartBind" />
|
</template>
|
|
<template v-else-if="activeData.type == 'floatImage'">
|
<ReportImageProperties :key="1" :float-image="activeData.floatImage" />
|
</template>
|
|
<template v-else>
|
<a-collapse-panel :key="1" header="基础设置">
|
<a-form-item name="type" label="单元类型">
|
<jnpf-select v-model:value="activeData.type" :options="options" @change="onTypeChange" />
|
</a-form-item>
|
<template v-if="activeData.type === 'text'">
|
<ReportTextProperties :text="activeData.text" v-bind="getCommonBind" @clear-cell-relevance-value="clearCellRelevanceValue" />
|
</template>
|
<template v-if="activeData.type === 'dataSource'">
|
<ReportDataProperties :data-source="activeData.dataSource" v-bind="getCommonBind" @clear-cell-relevance-value="clearCellRelevanceValue" />
|
</template>
|
<template v-if="activeData.type === 'parameter'">
|
<ReportParamProperties :parameter="activeData.parameter" v-bind="getCommonBind" @clear-cell-relevance-value="clearCellRelevanceValue" />
|
</template>
|
<template v-if="activeData.type === 'qrCode'">
|
<ReportQrCodeProperties :qr-code="activeData.qrCode" v-bind="getCommonBind" />
|
</template>
|
<template v-if="activeData.type === 'jsbarcode'">
|
<ReportJsBarcodeProperties :jsbarcode="activeData.jsbarcode" v-bind="getCommonBind" />
|
</template>
|
</a-collapse-panel>
|
</template>
|
</a-collapse>
|
</a-form>
|
</ScrollContainer>
|
</div>
|
</template>
|
