<script lang="ts" setup>
|
import { reactive, toRefs } from 'vue';
|
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import { cloneDeep } from 'lodash-es';
|
import draggable from 'vuedraggable';
|
|
const emit = defineEmits(['register', 'confirm']);
|
const [registerModal, { closeModal }] = useModalInner(init);
|
const state = reactive({
|
dataForm: {} as any,
|
fields: [] as any[],
|
});
|
const { dataForm, fields } = toRefs(state);
|
|
function collectFields(source: any[], result: any[]) {
|
for (const field of source || []) {
|
const config = field?.__config__;
|
if (!config) continue;
|
if (field.__vModel__) {
|
result.push({
|
formId: config.formId,
|
label: config.label || field.__vModel__,
|
field: field.__vModel__,
|
visible: true,
|
readonly: false,
|
width: config.columnWidth || 180,
|
});
|
}
|
if (config.jnpfKey !== 'table' && Array.isArray(config.children)) collectFields(config.children, result);
|
}
|
}
|
|
function init(data: any) {
|
const defaults = {
|
enabled: false,
|
maxRows: 20,
|
defaultRows: 1,
|
layout: 'table',
|
allowCreate: true,
|
allowEdit: true,
|
allowCopy: true,
|
pageSize: 20,
|
};
|
state.dataForm = { ...defaults, ...cloneDeep(data?.config || {}) };
|
const available: any[] = [];
|
collectFields(data?.drawingList || [], available);
|
const overrideMap = new Map<string, any>((state.dataForm.fieldOverrides || []).map((item: any) => [item.formId, item]));
|
state.fields = available
|
.map((item) => ({ ...item, ...overrideMap.get(item.formId) }))
|
.sort((left, right) => (left.order ?? Number.MAX_SAFE_INTEGER) - (right.order ?? Number.MAX_SAFE_INTEGER));
|
}
|
|
function handleSubmit() {
|
const maxRows = Math.min(Math.max(Number(state.dataForm.maxRows) || 20, 1), 100);
|
emit('confirm', {
|
...state.dataForm,
|
defaultRows: Math.min(Math.max(Number(state.dataForm.defaultRows) || 1, 1), maxRows),
|
maxRows,
|
pageSize: Math.min(Math.max(Number(state.dataForm.pageSize) || 20, 1), 100),
|
fieldOverrides: state.fields.map((item, order) => ({
|
formId: item.formId,
|
visible: item.visible,
|
readonly: item.readonly,
|
width: item.width,
|
order,
|
})),
|
});
|
closeModal();
|
}
|
</script>
|
|
<template>
|
<BasicModal v-bind="$attrs" title="批量表单设置" :width="900" destroy-on-close @register="registerModal" @ok="handleSubmit">
|
<a-form :model="dataForm" layout="vertical">
|
<a-row :gutter="16">
|
<a-col :span="6">
|
<a-form-item label="启用批量表单"><a-switch v-model:checked="dataForm.enabled" /></a-form-item>
|
</a-col>
|
<a-col :span="6">
|
<a-form-item label="布局模式">
|
<jnpf-radio
|
v-model:value="dataForm.layout"
|
:options="[
|
{ id: 'table', fullName: '表格' },
|
{ id: 'list', fullName: '列表' },
|
]" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="6">
|
<a-form-item label="最大行数"><jnpf-input-number v-model:value="dataForm.maxRows" :min="1" :max="100" /></a-form-item>
|
</a-col>
|
<a-col :span="6">
|
<a-form-item label="默认行数"><jnpf-input-number v-model:value="dataForm.defaultRows" :min="1" :max="100" /></a-form-item>
|
</a-col>
|
</a-row>
|
<a-space class="mb-[12px]">
|
<a-checkbox v-model:checked="dataForm.allowCreate">允许批量新增</a-checkbox>
|
<a-checkbox v-model:checked="dataForm.allowEdit">允许批量编辑</a-checkbox>
|
<a-checkbox v-model:checked="dataForm.allowCopy">允许复制行</a-checkbox>
|
</a-space>
|
<div class="batch-field-header"><span>字段</span><span>显示</span><span>只读</span><span>列宽</span></div>
|
<draggable v-model="fields" item-key="formId" handle=".batch-field-drag" :animation="200" class="batch-field-list">
|
<template #item="{ element }">
|
<div class="batch-field-row">
|
<span class="batch-field-name"><i class="icon-ym icon-ym-darg batch-field-drag"></i>{{ element.label }}（{{ element.field }}）</span>
|
<a-switch v-model:checked="element.visible" size="small" class="batch-field-switch" />
|
<a-switch v-model:checked="element.readonly" size="small" class="batch-field-switch" />
|
<jnpf-input-number v-model:value="element.width" :min="80" :max="800" />
|
</div>
|
</template>
|
</draggable>
|
</a-form>
|
</BasicModal>
|
</template>
|
|
<style scoped>
|
.batch-field-header,
|
.batch-field-row {
|
display: grid;
|
grid-template-columns: minmax(280px, 1fr) 80px 80px 120px;
|
gap: 12px;
|
align-items: center;
|
min-height: 42px;
|
padding: 0 12px;
|
}
|
|
.batch-field-header {
|
color: var(--text-color-secondary);
|
background: var(--component-background);
|
border-bottom: 1px solid var(--border-color-base);
|
}
|
|
.batch-field-list {
|
max-height: 420px;
|
overflow: auto;
|
}
|
|
.batch-field-row {
|
border-bottom: 1px solid var(--border-color-base);
|
}
|
|
.batch-field-name {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.batch-field-switch {
|
justify-self: start;
|
}
|
|
.batch-field-drag {
|
margin-right: 8px;
|
cursor: move;
|
}
|
</style>
|
