<script lang="ts" setup>
|
import { useModal } from '@jnpf/ui/modal';
|
|
import { alignOptions } from '#/utils/constants';
|
|
import NoticeColumnModal from './RNoticeColumnModal.vue';
|
import Refresh from './RRefresh.vue';
|
|
const props = defineProps(['activeData', 'showType']);
|
const [registerColumn, { openModal: openColumnModal }] = useModal();
|
const appStyleTypeOptions = [
|
{ fullName: '纵向1', id: 1 },
|
{ fullName: '纵向2', id: 2 },
|
{ fullName: '横向', id: 3 },
|
];
|
const styleTypeOptions = [
|
{ fullName: '表格', id: 1 },
|
{ fullName: '列表（横向）', id: 2 },
|
{ fullName: '列表（纵向）', id: 3 },
|
];
|
|
function renderKeyChange() {
|
props.activeData.renderKey = Date.now();
|
}
|
function showColumnData(val, type?) {
|
openColumnModal(true, { data: val, type: type || '', showType: props.showType });
|
}
|
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>
|
<a-form-item label="风格类型">
|
<jnpf-select
|
v-model:value="activeData.option[showType == 'pc' ? 'styleType' : 'appStyleType']"
|
:options="showType == 'pc' ? styleTypeOptions : appStyleTypeOptions"
|
placeholder="请选择"
|
show-search
|
@change="renderKeyChange" />
|
</a-form-item>
|
<template v-if="showType == 'pc'">
|
<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.noticeCount" placeholder="请输入" :min="1" :max="50" @change="renderKeyChange" />
|
</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>
|
<template v-if="activeData.option.styleType != 1">
|
<a-form-item label="显示图片">
|
<a-switch v-model:checked="activeData.option.showImage" />
|
</a-form-item>
|
<a-form-item label="显示条数">
|
<a-input-number v-model:value="activeData.option.noticeCount" placeholder="请输入" :min="1" :max="50" @change="renderKeyChange" />
|
</a-form-item>
|
</template>
|
<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="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>
|
<Refresh v-if="activeData.propsApi" :refresh="activeData.refresh" />
|
</template>
|
<template v-else>
|
<a-form-item label="显示图片" v-if="activeData.option.appStyleType != 3">
|
<a-switch v-model:checked="activeData.option.showImage" />
|
</a-form-item>
|
<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" @change="renderKeyChange" />
|
</a-form-item>
|
</template>
|
<NoticeColumnModal @register="registerColumn" @change="handleRefreshColumn" />
|
</a-collapse-panel>
|
</template>
|
