<script lang="ts" setup>
|
import { useModal } from '@jnpf/ui/modal';
|
|
import { InterfaceModal } from '#/components/CommonModal';
|
import { SelectInterfaceBtn } from '#/components/Interface';
|
import { alignOptions } from '#/utils/constants';
|
|
import { dataTypeList } from '../helper/dataMap';
|
import ColumnModal from './RColumnModal.vue';
|
import JsonModal from './RJsonModal.vue';
|
import Refresh from './RRefresh.vue';
|
|
const props = defineProps(['activeData', 'showType', 'mapOptions']);
|
const styleTypeOptions = [
|
{ fullName: '表格', id: 1 },
|
{ fullName: '列表（横向）', id: 2 },
|
{ fullName: '列表（纵向）', id: 3 },
|
];
|
const [registerJson, { openModal: openJsonModal }] = useModal();
|
const [registerColumn, { openModal: openColumnModal }] = useModal();
|
|
function renderKeyChange() {
|
props.activeData.renderKey = Date.now();
|
}
|
function dataTypeChange() {
|
props.activeData.propsApi = '';
|
props.activeData.propsName = '';
|
props.activeData.option.defaultValue = [];
|
props.activeData.templateJson = [];
|
renderKeyChange();
|
}
|
function onPropsApiChange(val, item) {
|
if (val) {
|
props.activeData.propsApi = val;
|
props.activeData.propsName = item.fullName;
|
props.activeData.refresh.autoRefresh = false;
|
props.activeData.templateJson = item.parameterJson ? JSON.parse(item.parameterJson).map((o) => ({ ...o, relationField: '', sourceType: 2 })) : [];
|
} else {
|
props.activeData.propsApi = '';
|
props.activeData.propsName = '';
|
props.activeData.templateJson = [];
|
}
|
renderKeyChange();
|
}
|
function showData(val) {
|
openJsonModal(true, { value: JSON.stringify(val) });
|
}
|
function showColumnData(val, type?) {
|
openColumnModal(true, { data: val, type: type || '', showType: props.showType, interfaceId: props.activeData.propsApi });
|
}
|
function handleRefreshData(data) {
|
props.activeData.option.defaultValue = data ? JSON.parse(data) : [];
|
renderKeyChange();
|
}
|
function handleRefreshColumn(data) {
|
if (!data) return;
|
if (props.showType === 'app') {
|
props.activeData.option.appColumnList = data;
|
} else {
|
if (props.activeData.option.styleType == 1) {
|
props.activeData.option.columnData = data;
|
} else {
|
props.activeData.option.rowData = data;
|
}
|
}
|
renderKeyChange();
|
}
|
</script>
|
<template>
|
<a-collapse-panel>
|
<template #header>表格列表设置</template>
|
<template v-if="showType == 'pc'">
|
<a-form-item label="风格类型">
|
<jnpf-select v-model:value="activeData.option.styleType" :options="styleTypeOptions" placeholder="请选择" show-search @change="renderKeyChange" />
|
</a-form-item>
|
<template v-if="activeData.option.styleType == 1">
|
<a-form-item label="显示边框">
|
<a-switch v-model:checked="activeData.option.border" />
|
</a-form-item>
|
<a-form-item>
|
<template #label>溢出省略<BasicHelp :text="['启用：溢出省略号显示；', '禁用：显示全部信息，溢出换行显示']" /></template>
|
<a-switch v-model:checked="activeData.option.showOverflow" />
|
</a-form-item>
|
<a-divider>表头设置</a-divider>
|
<a-form-item label="显示表头">
|
<a-switch v-model:checked="activeData.option.showHeader" @change="renderKeyChange" />
|
</a-form-item>
|
<template v-if="activeData.option.showHeader">
|
<a-form-item label="字体大小">
|
<a-input-number v-model:value="activeData.option.headerFontSize" placeholder="请输入" :min="12" :max="25" />
|
</a-form-item>
|
<a-form-item label="字体加粗">
|
<a-switch v-model:checked="activeData.option.headerFontWeight" />
|
</a-form-item>
|
<a-form-item label="字体颜色">
|
<jnpf-color-picker v-model:value="activeData.option.headerFontColor" size="small" />
|
</a-form-item>
|
<a-form-item label="字体位置">
|
<jnpf-radio v-model:value="activeData.option.headerLeft" :options="alignOptions" option-type="button" button-style="solid" class="right-radio" />
|
</a-form-item>
|
<a-form-item label="背景色">
|
<jnpf-color-picker v-model:value="activeData.option.headerBgColor" size="small" />
|
</a-form-item>
|
</template>
|
<a-divider>表格设置</a-divider>
|
<a-form-item label="显示序号">
|
<a-switch v-model:checked="activeData.option.tableIndex" />
|
</a-form-item>
|
<a-form-item label="字体大小">
|
<a-input-number v-model:value="activeData.option.tableFontSize" placeholder="请输入" :min="12" :max="25" />
|
</a-form-item>
|
<a-form-item label="字体颜色">
|
<jnpf-color-picker v-model:value="activeData.option.tableFontColor" size="small" />
|
</a-form-item>
|
</template>
|
<a-form-item label="显示描述" v-if="activeData.option.styleType == 3">
|
<a-switch v-model:checked="activeData.option.describe" />
|
</a-form-item>
|
<a-form-item label="显示条数">
|
<a-input-number v-model:value="activeData.option.tableCount" placeholder="请输入" :min="1" :max="50" @change="renderKeyChange" />
|
</a-form-item>
|
<a-form-item label="背景色">
|
<jnpf-color-picker v-model:value="activeData.option.tableBgColor" size="small" />
|
</a-form-item>
|
<a-form-item label="奇行颜色">
|
<jnpf-color-picker v-model:value="activeData.option.tableOddLineColor" size="small" />
|
</a-form-item>
|
<a-form-item label="偶行颜色">
|
<jnpf-color-picker v-model:value="activeData.option.tableEvenLineColor" size="small" />
|
</a-form-item>
|
<a-divider v-if="activeData.option.styleType == 1">列数据设置</a-divider>
|
<a-form-item label="数据类型">
|
<jnpf-radio v-model:value="activeData.dataType" :options="dataTypeList" option-type="button" button-style="solid" @change="dataTypeChange" />
|
</a-form-item>
|
<a-form-item label="数据设置" v-if="activeData.dataType === 'static'">
|
<a-button @click="showData(activeData.option.defaultValue)">设置</a-button>
|
</a-form-item>
|
<template v-if="activeData.dataType === 'dynamic'">
|
<a-form-item label="数据接口">
|
<InterfaceModal :value="activeData.propsApi" :title="activeData.propsName" popup-title="数据接口" @change="onPropsApiChange" />
|
</a-form-item>
|
<a-form-item label="参数设置" v-if="activeData.templateJson?.length">
|
<SelectInterfaceBtn :template-json="activeData.templateJson" :show-system-form-id="false" :type="2" />
|
</a-form-item>
|
<Refresh v-if="activeData.propsApi" :refresh="activeData.refresh" />
|
</template>
|
<a-form-item :label="activeData.option.styleType == 1 ? '列数据' : '行数据'">
|
<a-button
|
@click="showColumnData(activeData.option.styleType == 1 ? activeData.option.columnData : activeData.option.rowData, activeData.option.styleType)">
|
设置
|
</a-button>
|
</a-form-item>
|
</template>
|
<template v-else>
|
<a-form-item label="显示名称">
|
<a-switch v-model:checked="activeData.option.showName" />
|
</a-form-item>
|
<a-form-item label="数据类型">
|
<jnpf-radio v-model:value="activeData.dataType" :options="dataTypeList" option-type="button" button-style="solid" @change="dataTypeChange" />
|
</a-form-item>
|
<a-form-item label="数据设置" v-if="activeData.dataType === 'static'">
|
<a-button @click="showData(activeData.option.defaultValue)">设置</a-button>
|
</a-form-item>
|
<template v-if="activeData.dataType === 'dynamic'">
|
<a-form-item label="数据接口">
|
<InterfaceModal :value="activeData.propsApi" :title="activeData.propsName" popup-title="数据接口" @change="onPropsApiChange" />
|
</a-form-item>
|
<a-form-item label="参数设置" v-if="activeData.templateJson?.length">
|
<SelectInterfaceBtn :template-json="activeData.templateJson" :show-system-form-id="false" :type="2" />
|
</a-form-item>
|
</template>
|
<Refresh v-if="activeData.propsApi" :refresh="activeData.refresh" />
|
<a-form-item label="行数据">
|
<a-button @click="showColumnData(activeData.option.appColumnList)">设置</a-button>
|
</a-form-item>
|
<a-form-item label="显示条数">
|
<a-input-number v-model:value="activeData.option.appCount" placeholder="请输入" :min="1" :max="50" />
|
</a-form-item>
|
<template v-if="activeData.option.showName">
|
<a-form-item label="名称大小">
|
<a-input-number v-model:value="activeData.option.nameFontSize" placeholder="请输入" :min="12" :max="25" />
|
</a-form-item>
|
<a-form-item label="名称加粗">
|
<a-switch v-model:checked="activeData.option.nameFontWeight" />
|
</a-form-item>
|
<a-form-item label="名称颜色">
|
<jnpf-color-picker v-model:value="activeData.option.nameFontColor" size="small" />
|
</a-form-item>
|
</template>
|
<a-form-item label="数据大小">
|
<a-input-number v-model:value="activeData.option.dataFontSize" :min="12" :max="25" placeholder="请输入" />
|
</a-form-item>
|
<a-form-item label="数据加粗">
|
<a-switch v-model:checked="activeData.option.dataFontWeight" />
|
</a-form-item>
|
<a-form-item label="数据颜色">
|
<jnpf-color-picker v-model:value="activeData.option.dataFontColor" size="small" />
|
</a-form-item>
|
</template>
|
<JsonModal @register="registerJson" @change="handleRefreshData" />
|
<ColumnModal @register="registerColumn" @change="handleRefreshColumn" />
|
</a-collapse-panel>
|
</template>
|
