1000 lines
34 KiB
Vue
1000 lines
34 KiB
Vue
<template>
|
||
<div>
|
||
<BasicTable @register="registerTable">
|
||
<template #tableTitle>
|
||
<a-space>
|
||
<a-button type="primary" @click="openCreate" v-auth="'print:bizBind:add'">新增绑定</a-button>
|
||
<a-button @click="openPrintBizWhitelist" :loading="whitelistLoading" v-auth="'print:bizBind:whitelist'">
|
||
打印业务白名单
|
||
</a-button>
|
||
</a-space>
|
||
</template>
|
||
<template #action="{ record }">
|
||
<TableAction
|
||
:actions="[
|
||
{
|
||
label: '编辑',
|
||
onClick: () => openEdit(record),
|
||
auth: 'print:bizBind:edit',
|
||
},
|
||
{
|
||
label: '删除',
|
||
color: 'error',
|
||
popConfirm: {
|
||
title: '确认删除该绑定？',
|
||
confirm: () => handleDelete(record),
|
||
},
|
||
auth: 'print:bizBind:delete',
|
||
},
|
||
]"
|
||
/>
|
||
</template>
|
||
</BasicTable>
|
||
|
||
<BasicModal
|
||
@register="registerModal"
|
||
:title="modalTitle"
|
||
width="1000px"
|
||
@ok="submitModal"
|
||
:confirm-loading="modalSubmitLoading"
|
||
destroy-on-close
|
||
wrap-class-name="biz-bind-modal-wrap"
|
||
>
|
||
<a-spin :spinning="modalDataLoading || parseLoading">
|
||
<div class="biz-bind-form">
|
||
<a-alert
|
||
type="info"
|
||
show-icon
|
||
class="bind-alert"
|
||
message="配置说明"
|
||
description="按卡片顺序操作：先选业务与模板 → 点击「解析模板占位字段」→ 主表参数映射主实体字段 → 若模板含多个明细表，在「明细与表格」标签页中逐表选择与模板明细键对应的业务明细集合，再映射列字段。业务字段下拉第一项为「空占位符」，表示不参与业务 JSON。明细列占位多为「模板明细键.列」（如 List2.Field1），业务侧选「明细属性.列」（如 lineList.qty），打印时会按数组展开。"
|
||
/>
|
||
|
||
<a-card title="基础信息" size="small" :bordered="true" class="bind-card">
|
||
<a-form layout="vertical" class="bind-card-form">
|
||
<a-row :gutter="16">
|
||
<a-col :span="12">
|
||
<a-form-item
|
||
label="业务"
|
||
required
|
||
extra="业务编码为菜单 id；业务字段优先从缓存表读取（启动任务根据 print_biz_perm_entity 异步写入 mes_xsl_biz_entity_field_*），无缓存时再反射实体类。"
|
||
>
|
||
<a-select
|
||
v-model:value="form.bizCode"
|
||
:options="bizSelectOptions"
|
||
placeholder="选择业务"
|
||
show-search
|
||
option-filter-prop="label"
|
||
:disabled="isEditMode"
|
||
@change="onBizCodeChange"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="打印模板" required extra="请选择已发布的原生打印模板">
|
||
<a-select
|
||
v-model:value="form.templateId"
|
||
:options="tplSelectOptions"
|
||
placeholder="选择模板"
|
||
show-search
|
||
option-filter-prop="label"
|
||
@change="onTemplateChange"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-form-item label="备注">
|
||
<a-input v-model:value="form.remark" placeholder="可选" />
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-card>
|
||
|
||
<a-card size="small" :bordered="true" class="bind-card bind-card--mapping">
|
||
<template #title>
|
||
<span class="bind-card-head">字段映射</span>
|
||
</template>
|
||
<template #extra>
|
||
<a-space wrap>
|
||
<a-button type="primary" ghost size="small" @click="reloadTemplateFields" :loading="parseLoading">
|
||
解析模板占位字段
|
||
</a-button>
|
||
<a-button
|
||
size="small"
|
||
@click="autoMatchFields"
|
||
:disabled="(!bizFields.length && !hasAnyDetailBizFields()) || !tplFields.length"
|
||
>
|
||
同名自动匹配
|
||
</a-button>
|
||
</a-space>
|
||
</template>
|
||
|
||
<div v-if="!form.templateId" class="bind-placeholder">请先在上方的「基础信息」中选择打印模板</div>
|
||
|
||
<template v-else-if="tplFields.length">
|
||
<div class="bind-map-section">
|
||
<div class="bind-section-bar">
|
||
<span class="bind-section-title">① 主表参数</span>
|
||
<span class="bind-section-hint">对应模板 dataBinding.params / 画布参数；请选择主实体 JSON 字段</span>
|
||
</div>
|
||
<a-table
|
||
v-if="mappingRowsParam.length"
|
||
size="small"
|
||
row-key="templateField"
|
||
:pagination="false"
|
||
:columns="mapTableColumnsParam"
|
||
:data-source="mappingRowsParam"
|
||
bordered
|
||
class="bind-map-table"
|
||
>
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.key === 'bizField'">
|
||
<a-select
|
||
v-model:value="record.bizField"
|
||
:options="bizFieldOptionsMain"
|
||
allow-clear
|
||
show-search
|
||
option-filter-prop="label"
|
||
style="width: 100%"
|
||
placeholder="选择主表业务字段"
|
||
/>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
<a-empty v-else class="bind-empty" description="本模板未解析到「参数」类占位" />
|
||
</div>
|
||
|
||
<div class="bind-map-section bind-map-section--detail">
|
||
<div class="bind-section-bar">
|
||
<span class="bind-section-title">② 明细与表格列</span>
|
||
<span class="bind-section-hint">
|
||
按模板明细表（tableKey）分页配置：每个标签页先选业务明细集合，再映射列；多表明细互不影响
|
||
</span>
|
||
</div>
|
||
<template v-if="detailTablesStructure.length">
|
||
<a-tabs v-model:activeKey="detailTabKey" type="card" size="small" class="bind-detail-tabs">
|
||
<a-tab-pane v-for="dt in detailTablesStructure" :key="dt.tableKey" :tab="detailTabTitle(dt)">
|
||
<p class="bind-card-desc">
|
||
模板明细键 <code>{{ dt.tableKey }}</code>
|
||
对应画布表格等组件的数据源；请选择主实体上要绑定到该明细表的业务集合（或嵌套对象）。
|
||
</p>
|
||
<a-select
|
||
v-model:value="detailSlotByTable[dt.tableKey]"
|
||
allow-clear
|
||
show-search
|
||
option-filter-prop="label"
|
||
placeholder="选择业务明细属性（如 lineList）"
|
||
:options="detailSlotSelectOptions"
|
||
:loading="!!detailFieldsLoadingMap[dt.tableKey]"
|
||
style="width: 100%; margin-bottom: 12px"
|
||
@change="(v) => onDetailSlotChangeForTable(dt.tableKey, v as string | undefined)"
|
||
/>
|
||
<a-table
|
||
v-if="mappingRowsForDetailTable(dt).length"
|
||
size="small"
|
||
row-key="templateField"
|
||
:pagination="false"
|
||
:columns="mapTableColumnsDetail"
|
||
:data-source="mappingRowsForDetailTable(dt)"
|
||
bordered
|
||
class="bind-map-table"
|
||
>
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.key === 'tplKind'">
|
||
{{ templateFieldKindLabel(record.elementType) }}
|
||
</template>
|
||
<template v-if="column.key === 'bizField'">
|
||
<a-select
|
||
v-model:value="record.bizField"
|
||
:options="bizFieldOptionsForTable(dt.tableKey)"
|
||
allow-clear
|
||
show-search
|
||
option-filter-prop="label"
|
||
style="width: 100%"
|
||
placeholder="选择业务字段"
|
||
/>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
<a-empty v-else class="bind-empty" description="该模板明细表下暂无占位字段（可在设计器中维护 dataBinding.detailTables）" />
|
||
</a-tab-pane>
|
||
</a-tabs>
|
||
</template>
|
||
<a-empty v-else class="bind-empty" description="本模板未解析到明细/表格列占位" />
|
||
</div>
|
||
</template>
|
||
|
||
<a-empty
|
||
v-else-if="form.templateId && !parseLoading"
|
||
class="bind-empty"
|
||
description="请点击右上角「解析模板占位字段」或切换模板"
|
||
/>
|
||
</a-card>
|
||
|
||
<a-card title="映射预览（可选）" size="small" :bordered="true" class="bind-card">
|
||
<a-textarea
|
||
v-model:value="previewBizJson"
|
||
placeholder='粘贴业务 JSON，例如：{"barcode":"TEST001","materialName":"胶料A"}'
|
||
:rows="4"
|
||
/>
|
||
<div style="margin-top: 10px">
|
||
<a-button type="dashed" @click="runPreview" :loading="previewLoading">生成打印数据预览</a-button>
|
||
</div>
|
||
<pre v-if="previewResult" class="preview-pre">{{ previewResult }}</pre>
|
||
</a-card>
|
||
</div>
|
||
</a-spin>
|
||
</BasicModal>
|
||
|
||
<BasicModal
|
||
@register="registerWhitelistModal"
|
||
title="打印业务白名单"
|
||
width="760px"
|
||
@ok="submitWhitelistModal"
|
||
:confirm-loading="whitelistSubmitLoading"
|
||
destroy-on-close
|
||
>
|
||
<a-spin :spinning="whitelistLoading">
|
||
<a-alert
|
||
type="info"
|
||
show-icon
|
||
style="margin-bottom: 12px"
|
||
message="说明"
|
||
description="勾选允许的菜单 id，保存时会写入 print_biz_perm_entity（能推断出实体类的菜单）。打开弹窗已优化为不再加载全量业务目录。白名单为空时「新增绑定」下拉仅展示表里已有映射；白名单非空时展示勾选中且能解析的菜单。"
|
||
/>
|
||
<a-space style="margin-bottom: 8px">
|
||
<a-button size="small" @click="expandWhitelistTree(true)">展开全部</a-button>
|
||
<a-button size="small" @click="expandWhitelistTree(false)">折叠全部</a-button>
|
||
<a-button size="small" @click="checkedKeysWhitelist = []">清空勾选</a-button>
|
||
</a-space>
|
||
<BasicTree
|
||
ref="whitelistTreeRef"
|
||
checkable
|
||
:treeData="whitelistTreeData"
|
||
:checkedKeys="checkedKeysWhitelist"
|
||
:expandedKeys="expandedKeysWhitelist"
|
||
:selectedKeys="selectedKeysWhitelist"
|
||
:clickRowToExpand="false"
|
||
:checkStrictly="true"
|
||
title="系统菜单（权限树）"
|
||
@check="onWhitelistCheck"
|
||
>
|
||
<template #title="{ slotTitle, ruleFlag }">
|
||
{{ slotTitle }}
|
||
<Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left: 5px; color: red" />
|
||
</template>
|
||
</BasicTree>
|
||
</a-spin>
|
||
</BasicModal>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { computed, reactive, ref, unref } from 'vue';
|
||
import { BasicTable, TableAction, useTable } from '/@/components/Table';
|
||
import { BasicModal, useModal } from '/@/components/Modal';
|
||
import { BasicTree, TreeItem } from '/@/components/Tree';
|
||
import { Icon } from '/@/components/Icon';
|
||
import { useMessage } from '/@/hooks/web/useMessage';
|
||
import { useI18n } from '/@/hooks/web/useI18n';
|
||
import { columns } from './bizTemplateBind.data';
|
||
import * as Api from './bizTemplateBind.api';
|
||
import { list as tplList } from '../template/printTemplate.api';
|
||
import { queryTreeListForRole } from '/@/views/system/role/role.api';
|
||
|
||
const { createMessage } = useMessage();
|
||
const { t } = useI18n();
|
||
|
||
/** 下拉「空占位符」选项值（落库 fieldMappingJson 的 bizField 转为 ''） */
|
||
const EMPTY_BIZ_FIELD_SENTINEL = '__PRINT_BIND_EMPTY_BIZ__';
|
||
|
||
interface BizTypeItem {
|
||
bizCode: string;
|
||
bizName: string;
|
||
fields: { fieldKey: string; label: string; description?: string }[];
|
||
}
|
||
|
||
interface TplFieldItem {
|
||
bindField: string;
|
||
elementType?: string;
|
||
titleHint?: string;
|
||
}
|
||
|
||
interface MappingRow {
|
||
templateField: string;
|
||
bizField?: string;
|
||
elementType?: string;
|
||
titleHint?: string;
|
||
}
|
||
|
||
interface DetailSlotItem {
|
||
propertyName: string;
|
||
itemEntityClassFqn: string;
|
||
slotKind: string;
|
||
label: string;
|
||
}
|
||
|
||
interface TemplateDetailTableItem {
|
||
tableKey: string;
|
||
label?: string;
|
||
fields: TplFieldItem[];
|
||
}
|
||
|
||
const bizTypesRef = ref<BizTypeItem[]>([]);
|
||
const tplListRef = ref<{ id: string; templateCode: string; templateName: string }[]>([]);
|
||
/** 弹窗内：业务列表 + 模板下拉并行加载中（不再阻塞 openModal，避免点按钮好几秒才出框） */
|
||
const modalDataLoading = ref(false);
|
||
const parseLoading = ref(false);
|
||
const modalSubmitLoading = ref(false);
|
||
const previewLoading = ref(false);
|
||
const previewBizJson = ref('');
|
||
const previewResult = ref('');
|
||
|
||
const form = ref({
|
||
id: '' as string | undefined,
|
||
bizCode: undefined as string | undefined,
|
||
bizName: '' as string | undefined,
|
||
templateId: undefined as string | undefined,
|
||
remark: '' as string | undefined,
|
||
});
|
||
|
||
const tplFields = ref<TplFieldItem[]>([]);
|
||
const bizFields = ref<BizTypeItem['fields']>([]);
|
||
const mappingRows = ref<MappingRow[]>([]);
|
||
const detailSlots = ref<DetailSlotItem[]>([]);
|
||
const detailTablesStructure = ref<TemplateDetailTableItem[]>([]);
|
||
const detailTabKey = ref('');
|
||
/** 每个模板明细表键对应选中的业务明细属性名 */
|
||
const detailSlotByTable = reactive<Record<string, string | undefined>>({});
|
||
const detailBizFieldsMap = reactive<Record<string, BizTypeItem['fields']>>({});
|
||
const detailFieldsLoadingMap = reactive<Record<string, boolean>>({});
|
||
|
||
const isEditMode = ref(false);
|
||
const modalTitle = computed(() => (unref(isEditMode) ? '编辑业务打印绑定' : '新增业务打印绑定'));
|
||
|
||
const bizSelectOptions = computed(() =>
|
||
unref(bizTypesRef).map((b) => ({
|
||
label: `${b.bizName}（${b.bizCode}）`,
|
||
value: b.bizCode,
|
||
})),
|
||
);
|
||
|
||
const tplSelectOptions = computed(() =>
|
||
unref(tplListRef).map((t) => ({
|
||
label: `${t.templateName}（${t.templateCode}）`,
|
||
value: t.id,
|
||
})),
|
||
);
|
||
|
||
const detailSlotSelectOptions = computed(() =>
|
||
unref(detailSlots).map((s) => ({
|
||
label: `${s.label}（${s.propertyName} · ${s.slotKind}）`,
|
||
value: s.propertyName,
|
||
})),
|
||
);
|
||
|
||
const bizFieldOptionsMain = computed(() => {
|
||
const head = [{ label: '— 空占位符（不参与业务 JSON）—', value: EMPTY_BIZ_FIELD_SENTINEL }];
|
||
const rest = unref(bizFields).map((f) => ({
|
||
label: f.label ? `${f.label}（${f.fieldKey}）` : f.fieldKey,
|
||
value: f.fieldKey,
|
||
}));
|
||
return [...head, ...rest];
|
||
});
|
||
|
||
/** 某一模板明细表标签页：主表字段 + 该表选中的业务明细前缀字段 */
|
||
function bizFieldOptionsForTable(tableKey: string) {
|
||
const head = [{ label: '— 空占位符（不参与业务 JSON）—', value: EMPTY_BIZ_FIELD_SENTINEL }];
|
||
const main = unref(bizFields).map((f) => ({
|
||
label: f.label ? `${f.label}（${f.fieldKey}）` : f.fieldKey,
|
||
value: f.fieldKey,
|
||
}));
|
||
const detail = (detailBizFieldsMap[tableKey] || []).map((f) => ({
|
||
label: f.label ? `${f.label}（${f.fieldKey}）` : f.fieldKey,
|
||
value: f.fieldKey,
|
||
}));
|
||
return [...head, ...main, ...detail];
|
||
}
|
||
|
||
function hasAnyDetailBizFields(): boolean {
|
||
for (const k in detailBizFieldsMap) {
|
||
if ((detailBizFieldsMap[k] || []).length) {
|
||
return true;
|
||
}
|
||
}
|
||
return false;
|
||
}
|
||
|
||
function detailTabTitle(dt: TemplateDetailTableItem) {
|
||
const hint = dt.label || '';
|
||
return hint ? `${hint}（${dt.tableKey}）` : dt.tableKey;
|
||
}
|
||
|
||
/** 属于某一模板明细表的映射行（与后端分组一致） */
|
||
function mappingRowsForDetailTable(dt: TemplateDetailTableItem): MappingRow[] {
|
||
const keys = new Set((dt.fields || []).map((f) => (f.bindField || '').trim()).filter(Boolean));
|
||
return unref(mappingRows).filter((r) => keys.has((r.templateField || '').trim()));
|
||
}
|
||
|
||
/** 根据已保存映射推断业务明细属性（编辑时用） */
|
||
function inferDetailSlotForTable(tableKey: string): string | undefined {
|
||
const dt = unref(detailTablesStructure).find((d) => d.tableKey === tableKey);
|
||
if (!dt?.fields?.length) {
|
||
return undefined;
|
||
}
|
||
const keySet = new Set(dt.fields.map((f) => (f.bindField || '').trim()).filter(Boolean));
|
||
const counts = new Map<string, number>();
|
||
for (const r of unref(mappingRows)) {
|
||
if (!keySet.has((r.templateField || '').trim())) {
|
||
continue;
|
||
}
|
||
const bf = r.bizField;
|
||
if (!bf || bf === EMPTY_BIZ_FIELD_SENTINEL) {
|
||
continue;
|
||
}
|
||
const s = String(bf);
|
||
const dot = s.indexOf('.');
|
||
if (dot <= 0) {
|
||
continue;
|
||
}
|
||
const head = s.slice(0, dot);
|
||
counts.set(head, (counts.get(head) || 0) + 1);
|
||
}
|
||
let best: string | undefined;
|
||
let bestN = 0;
|
||
counts.forEach((n, h) => {
|
||
if (n > bestN) {
|
||
bestN = n;
|
||
best = h;
|
||
}
|
||
});
|
||
return best;
|
||
}
|
||
|
||
async function loadBizFieldsForTableSlot(tableKey: string, propertyName: string | undefined) {
|
||
if (!propertyName || !form.value.bizCode) {
|
||
detailBizFieldsMap[tableKey] = [];
|
||
return;
|
||
}
|
||
const slot = unref(detailSlots).find((s) => s.propertyName === propertyName);
|
||
const kind = slot?.slotKind || 'LIST';
|
||
detailFieldsLoadingMap[tableKey] = true;
|
||
try {
|
||
const list = await Api.bizFieldsForDetailSlot({
|
||
bizCode: form.value.bizCode,
|
||
detailProperty: propertyName,
|
||
slotKind: kind,
|
||
});
|
||
detailBizFieldsMap[tableKey] = (list || []) as BizTypeItem['fields'];
|
||
} catch {
|
||
detailBizFieldsMap[tableKey] = [];
|
||
} finally {
|
||
detailFieldsLoadingMap[tableKey] = false;
|
||
}
|
||
}
|
||
|
||
async function onDetailSlotChangeForTable(tableKey: string, propertyName: string | undefined) {
|
||
detailSlotByTable[tableKey] = propertyName;
|
||
await loadBizFieldsForTableSlot(tableKey, propertyName);
|
||
}
|
||
|
||
async function restoreDetailSlotsFromMapping() {
|
||
for (const dt of unref(detailTablesStructure)) {
|
||
const tk = dt.tableKey;
|
||
const existing = detailSlotByTable[tk];
|
||
if (existing) {
|
||
await loadBizFieldsForTableSlot(tk, existing);
|
||
continue;
|
||
}
|
||
const inferred = inferDetailSlotForTable(tk);
|
||
if (inferred && unref(detailSlots).some((s) => s.propertyName === inferred)) {
|
||
detailSlotByTable[tk] = inferred;
|
||
await loadBizFieldsForTableSlot(tk, inferred);
|
||
}
|
||
}
|
||
}
|
||
|
||
function resetDetailTableUiState() {
|
||
detailTablesStructure.value = [];
|
||
detailTabKey.value = '';
|
||
Object.keys(detailSlotByTable).forEach((k) => delete detailSlotByTable[k]);
|
||
Object.keys(detailBizFieldsMap).forEach((k) => delete detailBizFieldsMap[k]);
|
||
Object.keys(detailFieldsLoadingMap).forEach((k) => delete detailFieldsLoadingMap[k]);
|
||
}
|
||
|
||
/** 已保存的空字符串映射为下拉哨兵，便于展示「空占位符」项 */
|
||
function normalizeBizFieldForUi(raw?: string) {
|
||
if (raw === undefined || raw === null || raw === '') {
|
||
return EMPTY_BIZ_FIELD_SENTINEL;
|
||
}
|
||
return raw;
|
||
}
|
||
|
||
/** 提交前哨兵还原为空字符串 */
|
||
function denormalizeBizFieldForSave(v?: string) {
|
||
if (v === EMPTY_BIZ_FIELD_SENTINEL || v === undefined || v === null || v === '') {
|
||
return '';
|
||
}
|
||
return v;
|
||
}
|
||
|
||
/** 主表参数行：模板 elementType 为 param */
|
||
const mappingRowsParam = computed(() =>
|
||
unref(mappingRows).filter((r) => (r.elementType || '') === 'param'),
|
||
);
|
||
|
||
function templateFieldKindLabel(t?: string) {
|
||
const m: Record<string, string> = {
|
||
param: '主表·参数',
|
||
detailField: '模板·明细',
|
||
column: '表格列',
|
||
};
|
||
return m[t || ''] || (t || '—');
|
||
}
|
||
|
||
const mapTableColumnsParam = [
|
||
{ title: '模板参数占位（bindField）', dataIndex: 'templateField', width: 220 },
|
||
{ title: '标题/提示', dataIndex: 'titleHint', ellipsis: true },
|
||
{ title: '业务字段（主表）', key: 'bizField', width: 280 },
|
||
];
|
||
|
||
const mapTableColumnsDetail = [
|
||
{ title: '模板类型', key: 'tplKind', width: 104, ellipsis: true },
|
||
{ title: '模板占位（bindField）', dataIndex: 'templateField', width: 188 },
|
||
{ title: '标题/提示', dataIndex: 'titleHint', ellipsis: true },
|
||
{ title: '业务字段', key: 'bizField', width: 260 },
|
||
];
|
||
|
||
const [registerTable, { reload }] = useTable({
|
||
title: '业务打印绑定',
|
||
api: Api.list,
|
||
columns,
|
||
useSearchForm: false,
|
||
showTableSetting: true,
|
||
bordered: true,
|
||
showIndexColumn: true,
|
||
// 必须与模板插槽 #action 对应，否则操作列不会渲染（useTable 无 useListPage 的默认 slots）
|
||
actionColumn: {
|
||
width: 160,
|
||
title: '操作',
|
||
fixed: 'right',
|
||
dataIndex: 'action',
|
||
slots: { customRender: 'action' },
|
||
},
|
||
});
|
||
|
||
const [registerModal, { openModal, closeModal }] = useModal();
|
||
const [registerWhitelistModal, { openModal: openWhitelistDlg, closeModal: closeWhitelistDlg }] = useModal();
|
||
|
||
const whitelistLoading = ref(false);
|
||
const whitelistSubmitLoading = ref(false);
|
||
const whitelistTreeRef = ref<InstanceType<typeof BasicTree> | null>(null);
|
||
const whitelistTreeData = ref<TreeItem[]>([]);
|
||
const allWhitelistTreeKeys = ref<string[]>([]);
|
||
const checkedKeysWhitelist = ref<any>([]);
|
||
const expandedKeysWhitelist = ref<any>([]);
|
||
const selectedKeysWhitelist = ref<any>([]);
|
||
|
||
/** 将菜单树标题中的 t('...') 表达式转为文案（与角色授权树一致） */
|
||
function translateWhitelistTitle(data: TreeItem[] | undefined): TreeItem[] {
|
||
if (data?.length) {
|
||
data.forEach((item) => {
|
||
if (item.slotTitle && typeof item.slotTitle === 'string' && item.slotTitle.includes("t('")) {
|
||
try {
|
||
item.slotTitle = new Function('t', `return ${item.slotTitle}`)(t) as string;
|
||
} catch {
|
||
/* 忽略解析失败 */
|
||
}
|
||
}
|
||
if (item.children?.length) {
|
||
translateWhitelistTitle(item.children as TreeItem[]);
|
||
}
|
||
});
|
||
}
|
||
return data ?? [];
|
||
}
|
||
|
||
function expandWhitelistTree(expand: boolean) {
|
||
expandedKeysWhitelist.value = expand ? [...unref(allWhitelistTreeKeys)] : [];
|
||
}
|
||
|
||
function onWhitelistCheck(o: { checked?: any } | any) {
|
||
checkedKeysWhitelist.value = o?.checked !== undefined ? o.checked : o;
|
||
}
|
||
|
||
/** 树勾选键转为字符串数组（兼容 checkStrictly） */
|
||
function normalizeCheckedKeys(keys: unknown): string[] {
|
||
if (Array.isArray(keys)) {
|
||
return keys.map((k) => String(k));
|
||
}
|
||
if (keys && typeof keys === 'object' && 'checked' in (keys as object)) {
|
||
const c = (keys as { checked?: unknown }).checked;
|
||
if (Array.isArray(c)) {
|
||
return c.map((k) => String(k));
|
||
}
|
||
}
|
||
return [];
|
||
}
|
||
|
||
async function openPrintBizWhitelist() {
|
||
whitelistLoading.value = true;
|
||
try {
|
||
const [treeResult, wl] = await Promise.all([queryTreeListForRole(), Api.getPermWhitelist()]);
|
||
whitelistTreeData.value = translateWhitelistTitle(treeResult.treeList);
|
||
allWhitelistTreeKeys.value = treeResult.ids || [];
|
||
expandedKeysWhitelist.value = treeResult.ids || [];
|
||
checkedKeysWhitelist.value = wl?.permIds?.length ? [...wl.permIds] : [];
|
||
openWhitelistDlg(true);
|
||
} finally {
|
||
whitelistLoading.value = false;
|
||
}
|
||
}
|
||
|
||
async function submitWhitelistModal() {
|
||
whitelistSubmitLoading.value = true;
|
||
try {
|
||
const tree = unref(whitelistTreeRef) as any;
|
||
let raw = tree?.getCheckedKeys?.() ?? unref(checkedKeysWhitelist);
|
||
const permIds = normalizeCheckedKeys(raw);
|
||
await Api.savePermWhitelist({ permIds });
|
||
createMessage.success('保存成功');
|
||
closeWhitelistDlg();
|
||
} finally {
|
||
whitelistSubmitLoading.value = false;
|
||
}
|
||
}
|
||
|
||
async function loadBizTypes() {
|
||
const res = await Api.bizTypesForBinding();
|
||
bizTypesRef.value = res || [];
|
||
}
|
||
|
||
async function loadAllTemplates() {
|
||
const res = await tplList({ pageNo: 1, pageSize: 500 });
|
||
tplListRef.value = res?.records ?? [];
|
||
}
|
||
|
||
async function refreshDetailSlots(code: string | undefined) {
|
||
detailSlots.value = [];
|
||
if (!code) {
|
||
return;
|
||
}
|
||
try {
|
||
detailSlots.value = (await Api.detailSlots(code)) || [];
|
||
} catch {
|
||
detailSlots.value = [];
|
||
}
|
||
}
|
||
|
||
async function onBizCodeChange(code: string) {
|
||
const hit = unref(bizTypesRef).find((b) => b.bizCode === code);
|
||
bizFields.value = hit?.fields ?? [];
|
||
form.value.bizName = hit?.bizName;
|
||
Object.keys(detailSlotByTable).forEach((k) => delete detailSlotByTable[k]);
|
||
Object.keys(detailBizFieldsMap).forEach((k) => delete detailBizFieldsMap[k]);
|
||
await refreshDetailSlots(code);
|
||
if (form.value.templateId && unref(detailTablesStructure).length) {
|
||
await restoreDetailSlotsFromMapping();
|
||
}
|
||
}
|
||
|
||
async function onTemplateChange() {
|
||
resetDetailTableUiState();
|
||
tplFields.value = [];
|
||
mappingRows.value = [];
|
||
await reloadTemplateFields();
|
||
}
|
||
|
||
async function reloadTemplateFields() {
|
||
const tid = form.value.templateId;
|
||
if (!tid) {
|
||
tplFields.value = [];
|
||
mappingRows.value = [];
|
||
detailTablesStructure.value = [];
|
||
detailTabKey.value = '';
|
||
return;
|
||
}
|
||
parseLoading.value = true;
|
||
try {
|
||
const structure = await Api.parseTemplateStructure(tid);
|
||
detailTablesStructure.value = structure?.detailTables ?? [];
|
||
const params = structure?.params ?? [];
|
||
const flatDetail = (structure?.detailTables ?? []).flatMap((d) => d.fields ?? []);
|
||
tplFields.value = [...params, ...flatDetail];
|
||
detailTabKey.value = detailTablesStructure.value[0]?.tableKey ?? '';
|
||
rebuildMappingRows();
|
||
await restoreDetailSlotsFromMapping();
|
||
} finally {
|
||
parseLoading.value = false;
|
||
}
|
||
}
|
||
|
||
function rebuildMappingRows() {
|
||
const saved = unref(savedMappingRef);
|
||
const tplList = unref(tplFields);
|
||
const tplByField = new Map(tplList.map((t) => [t.bindField, t]));
|
||
|
||
// 先按已保存 JSON 的顺序收录键（含「模板未再声明」的占位如 Parameter3 + 空 bizField），避免仅依赖解析结果而丢行
|
||
const orderedKeys: string[] = [];
|
||
const seen = new Set<string>();
|
||
for (const s of saved) {
|
||
const k = (s.templateField || '').trim();
|
||
if (!k || seen.has(k)) continue;
|
||
seen.add(k);
|
||
orderedKeys.push(k);
|
||
}
|
||
for (const t of tplList) {
|
||
const k = (t.bindField || '').trim();
|
||
if (!k || seen.has(k)) continue;
|
||
seen.add(k);
|
||
orderedKeys.push(k);
|
||
}
|
||
|
||
mappingRows.value = orderedKeys.map((templateField) => {
|
||
const t = tplByField.get(templateField);
|
||
const hit = saved.find((x) => x.templateField === templateField);
|
||
return {
|
||
templateField,
|
||
bizField: hit !== undefined ? normalizeBizFieldForUi(hit.bizField) : undefined,
|
||
elementType: t?.elementType || 'param',
|
||
titleHint:
|
||
t?.titleHint ||
|
||
(!t ? '已保存映射（当前模板 JSON 未声明该占位，仍可按空业务字段输出）' : ''),
|
||
};
|
||
});
|
||
}
|
||
|
||
const savedMappingRef = ref<{ templateField: string; bizField?: string }[]>([]);
|
||
|
||
function autoMatchFields() {
|
||
const merged = [...unref(bizFields)];
|
||
for (const k in detailBizFieldsMap) {
|
||
merged.push(...(detailBizFieldsMap[k] || []));
|
||
}
|
||
const set = new Map(merged.map((f) => [f.fieldKey, f.fieldKey]));
|
||
for (const row of unref(mappingRows)) {
|
||
if (set.has(row.templateField)) {
|
||
row.bizField = row.templateField;
|
||
}
|
||
}
|
||
mappingRows.value = [...unref(mappingRows)];
|
||
}
|
||
|
||
function buildFieldMappingJson() {
|
||
const arr = unref(mappingRows)
|
||
.filter((r) => r.templateField)
|
||
.map((r) => ({
|
||
templateField: r.templateField,
|
||
bizField: denormalizeBizFieldForSave(r.bizField),
|
||
}));
|
||
return JSON.stringify(arr);
|
||
}
|
||
|
||
async function openCreate() {
|
||
isEditMode.value = false;
|
||
savedMappingRef.value = [];
|
||
form.value = { id: undefined, bizCode: undefined, bizName: undefined, templateId: undefined, remark: undefined };
|
||
tplFields.value = [];
|
||
bizFields.value = [];
|
||
mappingRows.value = [];
|
||
detailSlots.value = [];
|
||
resetDetailTableUiState();
|
||
previewBizJson.value = '';
|
||
previewResult.value = '';
|
||
openModal(true);
|
||
modalDataLoading.value = true;
|
||
try {
|
||
await Promise.all([loadBizTypes(), loadAllTemplates()]);
|
||
} finally {
|
||
modalDataLoading.value = false;
|
||
}
|
||
}
|
||
|
||
async function openEdit(record: Recordable) {
|
||
isEditMode.value = true;
|
||
try {
|
||
savedMappingRef.value = JSON.parse(record.fieldMappingJson || '[]');
|
||
} catch {
|
||
savedMappingRef.value = [];
|
||
}
|
||
form.value = {
|
||
id: record.id,
|
||
bizCode: record.bizCode,
|
||
bizName: record.bizName,
|
||
templateId: record.templateId,
|
||
remark: record.remark,
|
||
};
|
||
previewBizJson.value = '';
|
||
previewResult.value = '';
|
||
tplFields.value = [];
|
||
mappingRows.value = [];
|
||
bizFields.value = [];
|
||
detailSlots.value = [];
|
||
resetDetailTableUiState();
|
||
openModal(true);
|
||
modalDataLoading.value = true;
|
||
try {
|
||
await Promise.all([loadBizTypes(), loadAllTemplates()]);
|
||
await onBizCodeChange(record.bizCode as string);
|
||
await reloadTemplateFields();
|
||
} finally {
|
||
modalDataLoading.value = false;
|
||
}
|
||
}
|
||
|
||
async function submitModal() {
|
||
if (!form.value.bizCode) {
|
||
createMessage.warning('请选择业务');
|
||
return Promise.reject();
|
||
}
|
||
if (!form.value.templateId) {
|
||
createMessage.warning('请选择打印模板');
|
||
return Promise.reject();
|
||
}
|
||
modalSubmitLoading.value = true;
|
||
try {
|
||
const payload = {
|
||
id: form.value.id,
|
||
bizCode: form.value.bizCode,
|
||
bizName: form.value.bizName,
|
||
templateId: form.value.templateId,
|
||
remark: form.value.remark,
|
||
fieldMappingJson: buildFieldMappingJson(),
|
||
};
|
||
if (unref(isEditMode)) {
|
||
await Api.edit(payload);
|
||
} else {
|
||
await Api.add(payload);
|
||
}
|
||
closeModal();
|
||
reload();
|
||
} finally {
|
||
modalSubmitLoading.value = false;
|
||
}
|
||
}
|
||
|
||
async function handleDelete(record: Recordable) {
|
||
await Api.deleteOne({ id: record.id }, () => reload());
|
||
}
|
||
|
||
async function runPreview() {
|
||
if (!form.value.bizCode) {
|
||
createMessage.warning('请先选择业务；预览读取的是服务器已保存的绑定配置');
|
||
return;
|
||
}
|
||
let obj: Record<string, unknown> = {};
|
||
try {
|
||
obj = previewBizJson.value ? (JSON.parse(previewBizJson.value) as Record<string, unknown>) : {};
|
||
} catch {
|
||
previewResult.value = '业务 JSON 格式不正确';
|
||
return;
|
||
}
|
||
previewLoading.value = true;
|
||
try {
|
||
const res = await Api.previewMappedData({ bizCode: form.value.bizCode, bizDataJson: obj });
|
||
previewResult.value = JSON.stringify(res, null, 2);
|
||
} catch (e: unknown) {
|
||
previewResult.value = e instanceof Error ? e.message : String(e);
|
||
} finally {
|
||
previewLoading.value = false;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.biz-bind-form {
|
||
max-height: calc(100vh - 220px);
|
||
overflow-y: auto;
|
||
padding-right: 4px;
|
||
}
|
||
|
||
.bind-alert {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.bind-card {
|
||
margin-bottom: 12px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.bind-card :deep(.ant-card-head) {
|
||
min-height: 42px;
|
||
padding: 0 12px;
|
||
}
|
||
|
||
.bind-card :deep(.ant-card-body) {
|
||
padding: 12px 16px;
|
||
}
|
||
|
||
.bind-card-form :deep(.ant-form-item) {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.bind-card-head {
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.bind-card-head-extra {
|
||
font-weight: 400;
|
||
font-size: 13px;
|
||
color: rgba(0, 0, 0, 0.45);
|
||
margin-left: 6px;
|
||
}
|
||
|
||
.bind-card-sub {
|
||
font-size: 12px;
|
||
color: rgba(0, 0, 0, 0.45);
|
||
}
|
||
|
||
.bind-card-desc {
|
||
margin: 0 0 10px;
|
||
font-size: 13px;
|
||
color: rgba(0, 0, 0, 0.65);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.bind-placeholder {
|
||
padding: 16px;
|
||
text-align: center;
|
||
color: rgba(0, 0, 0, 0.45);
|
||
background: #fafafa;
|
||
border-radius: 4px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.bind-map-section {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.bind-map-section--detail {
|
||
margin-bottom: 0;
|
||
padding-top: 8px;
|
||
border-top: 1px dashed #f0f0f0;
|
||
}
|
||
|
||
.bind-detail-tabs {
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.bind-detail-tabs :deep(.ant-tabs-nav) {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.bind-section-bar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: baseline;
|
||
gap: 8px 12px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.bind-section-title {
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
}
|
||
|
||
.bind-section-hint {
|
||
font-size: 12px;
|
||
color: rgba(0, 0, 0, 0.45);
|
||
}
|
||
|
||
.bind-map-table {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.bind-empty {
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.preview-pre {
|
||
background: #f5f5f5;
|
||
padding: 12px;
|
||
border-radius: 4px;
|
||
max-height: 240px;
|
||
overflow: auto;
|
||
font-size: 12px;
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|