<script lang="ts" setup>
|
import { nextTick, reactive, toRefs } from 'vue';
|
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
const emit = defineEmits(['register', 'confirm']);
|
|
interface State {
|
columnList: any[];
|
list: any[];
|
activeIndex: number;
|
activeKey: String;
|
sheetList: any[];
|
sheetIndex: number;
|
}
|
|
const state = reactive<State>({
|
columnList: [],
|
list: [],
|
activeIndex: 0,
|
activeKey: '',
|
sheetList: [],
|
sheetIndex: 0,
|
});
|
const { columnList, activeKey } = toRefs(state);
|
const [registerModal, { closeModal }] = useModalInner(init);
|
|
function init(data: any) {
|
state.columnList = getColumnList(data);
|
state.activeKey = state.columnList[0].sheet;
|
}
|
|
function getColumnList(data) {
|
const sheetList = data.sheetList.map((item) => ({
|
sheet: item.id,
|
sheetName: item.fullName,
|
columnList: {
|
columnState: false,
|
columnStyle: 'col',
|
columnType: '1',
|
maxCol: 0,
|
rowCount: 0,
|
maxRow: 0,
|
colCount: 0,
|
columnData: null,
|
copyCol: null,
|
copyRow: null,
|
fillEmptyRows: false,
|
},
|
}));
|
|
if (!data.columnList?.length) return sheetList;
|
for (const element of sheetList) {
|
for (let i = 0; i < data.columnList.length; i++) {
|
const el = data.columnList[i];
|
if (element.sheet == el.sheet) element.columnList = el.columnList || [];
|
}
|
}
|
return sheetList;
|
}
|
|
function handleSubmit() {
|
emit('confirm', state.columnList);
|
nextTick(() => closeModal());
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" width="1000px" class="jnpf-parameter-modal" @register="registerModal" title="分栏配置" @ok="handleSubmit" destroy-on-close>
|
<a-tabs v-model:active-key="activeKey">
|
<a-tab-pane v-for="item in columnList" :key="item.sheet" :tab="item.sheetName">
|
<a-form class="column-form-wrap" :model="item.columnList" :label-col="{ style: { width: '86px' } }" :colon="false">
|
<a-form-item label="启用分栏">
|
<a-switch v-model:checked="item.columnList.columnState" />
|
</a-form-item>
|
<template v-if="item.columnList.columnState">
|
<a-form-item label="样式">
|
<a-radio-group class="column-style-radio-wrap" v-model:value="item.columnList.columnStyle">
|
<a-radio value="col">行分栏</a-radio>
|
<a-radio value="row">列分栏</a-radio>
|
</a-radio-group>
|
</a-form-item>
|
<div class="column-style-marks">
|
<img src="@/assets/images/report/col_column_mark.png" alt="行分栏图示" />
|
<img class="row-column-mark-img" src="@/assets/images/report/row_column_mark.png" alt="列分栏图示" />
|
</div>
|
<a-form-item label="类型" v-if="item.columnList.columnStyle === 'col'">
|
<a-radio-group class="column-type-radio-wrap" v-model:value="item.columnList.columnType">
|
<a-radio value="1">
|
<span>超过</span>
|
<a-input-number v-model:value="item.columnList.maxCol" min="0" />
|
<span>行分栏</span>
|
</a-radio>
|
<a-radio value="2">
|
<span>分栏成</span>
|
<a-input-number v-model:value="item.columnList.rowCount" min="0" />
|
<span>列</span>
|
</a-radio>
|
</a-radio-group>
|
</a-form-item>
|
<a-form-item label="类型" v-if="item.columnList.columnStyle === 'row'">
|
<a-radio-group class="column-type-radio-wrap" v-model:value="item.columnList.columnType">
|
<a-radio value="1">
|
<span>超过</span>
|
<a-input-number v-model:value="item.columnList.maxRow" min="0" />
|
<span>列分栏</span>
|
</a-radio>
|
<a-radio value="2">
|
<span>分栏成</span>
|
<a-input-number v-model:value="item.columnList.colCount" min="0" />
|
<span>行</span>
|
</a-radio>
|
</a-radio-group>
|
</a-form-item>
|
<a-form-item label="分栏数据">
|
<div class="input-item-tip-wrap">
|
<a-input v-model:value="item.columnList.columnData" placeholder="请输入" :maxlength="256" allow-clear />
|
<span class="tip-text">格式 A2:D10</span>
|
</div>
|
</a-form-item>
|
<a-form-item label="复制行号" v-if="item.columnList.columnStyle === 'col'">
|
<div class="input-item-tip-wrap">
|
<a-input v-model:value="item.columnList.copyCol" placeholder="请输入" :maxlength="256" allow-clear />
|
<span class="tip-text">格式 1,2-3,6,20</span>
|
</div>
|
</a-form-item>
|
<a-form-item label="复制列号" v-if="item.columnList.columnStyle === 'row'">
|
<div class="input-item-tip-wrap">
|
<a-input v-model:value="item.columnList.copyRow" placeholder="请输入" :maxlength="256" allow-clear />
|
<span class="tip-text">格式 1,2-3,6,20</span>
|
</div>
|
</a-form-item>
|
<a-form-item label="补充空白行">
|
<a-switch v-model:checked="item.columnList.fillEmptyRows" />
|
</a-form-item>
|
</template>
|
</a-form>
|
</a-tab-pane>
|
</a-tabs>
|
</BasicModal>
|
</template>
|
|
<style lang="scss" scoped>
|
.ant-tabs {
|
height: 50vh;
|
|
:deep(.ant-tabs-content) {
|
height: 100%;
|
overflow: auto;
|
}
|
}
|
|
.column-form-wrap {
|
padding: 15px 15px 10px;
|
|
.column-style-radio-wrap {
|
.ant-radio-wrapper {
|
width: 200px;
|
}
|
}
|
|
.column-style-marks {
|
display: flex;
|
margin: -20px 0 24px 86px;
|
|
img {
|
display: block;
|
width: 200px;
|
}
|
|
.row-column-mark-img {
|
margin-left: 8px;
|
}
|
}
|
|
.column-type-radio-wrap {
|
:deep(.ant-radio-wrapper) {
|
& > span:nth-child(2) {
|
display: flex;
|
align-items: center;
|
|
.ant-input-number {
|
width: 80px;
|
margin: 0 9px;
|
}
|
}
|
}
|
}
|
|
.input-item-tip-wrap {
|
display: flex;
|
align-items: center;
|
|
.ant-input-affix-wrapper {
|
width: 320px;
|
}
|
|
.tip-text {
|
margin-left: 8px;
|
color: #aaa;
|
}
|
}
|
}
|
</style>
|
