<script lang="ts" setup>
|
import { computed, unref } from 'vue';
|
|
import { InterfaceModal } from '#/components/CommonModal';
|
import { interfaceSystemOptions, sourceTypeFlowOptions, systemFieldOptions, templateJsonColumns } from '#/utils/define';
|
|
const props = defineProps({
|
value: { type: String, default: '' },
|
title: { type: String, default: '' },
|
// 参数json
|
templateJson: { type: Array, default: () => [] },
|
// 字段options
|
fieldOptions: { type: Array, default: () => [] },
|
// 参数来源类型 1：全部参数来源 2：参数来源不回显字段 3:参数来源不显示系统变量 4:参数来源不显示全局变量
|
type: { type: Number, default: 1 },
|
// 是否流程
|
isFlow: { type: Boolean, default: false },
|
// 系统字段显示表单id
|
showSystemFormId: { type: Boolean, default: true },
|
// 系统字段显示完整名称
|
showSystemFullLabel: { type: Boolean, default: false },
|
fieldWidth: { type: String, default: 'full' },
|
globalOptions: { type: Array, default: () => [] },
|
tabOptions: { type: Array, default: () => [] },
|
groupOptions: { type: Array, default: () => [] },
|
systemOptions: { type: Array, default: () => [] },
|
});
|
const emit = defineEmits(['update:value', 'change', 'fieldChange', 'onTabChange', 'onSourceTypeChange']);
|
|
const getsourceTypeFlowOptions = computed(() => {
|
const filterId = { 2: 1, 3: 4, 4: 5 }[props.type];
|
return sourceTypeFlowOptions.filter((o) => o.id !== filterId);
|
});
|
const getNotNullsourceTypeFlowOptions = computed(() => unref(getsourceTypeFlowOptions).filter((o) => o.id != 3));
|
const getSystemFieldOptions = computed(() => {
|
if (props.systemOptions?.length) return props.systemOptions;
|
if (props.isFlow) return systemFieldOptions;
|
return props.showSystemFormId ? interfaceSystemOptions : interfaceSystemOptions.filter((o) => o.id != '@formId');
|
});
|
// 必填字段
|
const requiredFieldOptions = computed(() => {
|
const options: any[] = (props.fieldOptions as any[]).filter((o) => o.__config__ && o.__config__.required);
|
return options.map((o) => ({ ...o, label: o.fullName ? `${o.id}(${o.fullName})` : o.id }));
|
});
|
const tabList: any = computed(() => {
|
return props.tabOptions;
|
});
|
|
function onInterfaceChange(selectId, selectRow) {
|
emit('update:value', selectId);
|
emit('change', selectId, selectRow);
|
}
|
function onFieldChange(e, row) {
|
emit('fieldChange', e, row);
|
}
|
function onTabChange(e) {
|
emit('onTabChange', e);
|
}
|
function onSourceTypeChange(record) {
|
emit('onSourceTypeChange', record);
|
record.relationField = record.sourceType == 4 ? (unref(getSystemFieldOptions)[0] as any)?.id : '';
|
}
|
</script>
|
<template>
|
<InterfaceModal :value="value" :title="title" v-bind="$attrs" @change="onInterfaceChange" />
|
<div class="ant-form-item-label !mt-[12px]"><label class="ant-form-item-no-colon">参数设置:</label></div>
|
<a-tabs v-if="tabList?.length > 0" @change="onTabChange">
|
<a-tab-pane :key="item.id" :tab="item.value" v-for="item in tabList" />
|
</a-tabs>
|
<a-table :data-source="templateJson" :columns="templateJsonColumns" size="small" :pagination="false">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'field'">
|
<div class="interface-field-box" :class="`w-${fieldWidth}`" :title="record.field + (record.fieldName ? `(${record.fieldName})` : '')">
|
<span class="required-sign">{{ record.required ? '*' : '' }}</span>
|
<span>{{ record.field }}{{ record.fieldName ? `(${record.fieldName})` : '' }}</span>
|
</div>
|
</template>
|
<template v-if="column.key === 'sourceType'">
|
<jnpf-select
|
v-if="record.required"
|
v-model:value="record.sourceType"
|
:options="getNotNullsourceTypeFlowOptions"
|
placeholder="请选择"
|
class="!w-[100px]"
|
@change="onSourceTypeChange(record)" />
|
<jnpf-select v-else v-model:value="record.sourceType" :options="getsourceTypeFlowOptions" class="!w-[100px]" @change="onSourceTypeChange(record)" />
|
</template>
|
<template v-if="column.key === 'relationField'">
|
<jnpf-select
|
v-model:value="record.relationField"
|
@change="onFieldChange($event, record)"
|
:options="groupOptions"
|
style="width: 200px"
|
placeholder="请选择"
|
:field-names="{ label: 'fullName', options: 'children' }"
|
v-if="groupOptions?.length > 0 && record.sourceType === 1" />
|
<jnpf-select
|
v-model:value="record.relationField"
|
:options="record.required && isFlow ? requiredFieldOptions : fieldOptions"
|
allow-clear
|
show-search
|
:field-names="{ label: 'label', options: 'children' }"
|
option-label-prop="label"
|
class="!w-[204px]"
|
@change="onFieldChange($event, record)"
|
v-else-if="record.sourceType === 1" />
|
<template v-else-if="record.sourceType === 2">
|
<jnpf-input-number v-if="['int', 'decimal'].includes(record.dataType)" v-model:value="record.relationField" placeholder="请输入" allow-clear />
|
<jnpf-date-picker
|
v-else-if="record.dataType == 'datetime'"
|
class="!w-full"
|
v-model:value="record.relationField"
|
placeholder="请选择"
|
format="YYYY-MM-DD HH:mm:ss"
|
allow-clear />
|
<a-input v-else v-model:value="record.relationField" placeholder="请输入" allow-clear @change="isFlow ? onFieldChange($event, record) : ''" />
|
</template>
|
<jnpf-select
|
v-model:value="record.relationField"
|
:options="getSystemFieldOptions"
|
:field-names="{ label: showSystemFullLabel ? 'label' : 'fullName', options: 'options1' }"
|
:option-label-prop="showSystemFullLabel ? 'label' : 'fullName'"
|
allow-clear
|
@change="isFlow ? onFieldChange($event, record) : ''"
|
class="!w-[204px]"
|
v-else-if="record.sourceType === 4" />
|
<jnpf-select
|
v-model:value="record.relationField"
|
:options="globalOptions"
|
@change="isFlow ? onFieldChange($event, record) : ''"
|
:field-names="{ label: 'fieldName', value: 'fieldName', options: 'options1' }"
|
allow-clear
|
class="!w-[204px]"
|
v-else-if="record.sourceType === 5" />
|
</template>
|
</template>
|
<template #emptyText>
|
<p class="leading-[60px]">暂无数据</p>
|
</template>
|
</a-table>
|
</template>
|
<style scoped lang="scss">
|
.interface-field-box {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
</style>
|
