<script lang="ts" setup>
|
import { computed, ref, unref } from 'vue';
|
|
import { ModalClose } from '@jnpf/ui/modal';
|
|
import { Modal as AModal } from 'ant-design-vue';
|
import { cloneDeep } from 'lodash-es';
|
|
import { interfaceSystemOptions, sourceTypeFlowOptions, sourceTypeOptions, systemFieldOptions, templateJsonColumns } from '#/utils/define';
|
|
defineOptions({ inheritAttrs: false });
|
const props = defineProps({
|
// 参数json
|
templateJson: { type: Array, default: () => [] },
|
// 字段options
|
fieldOptions: { type: Array, default: () => [] },
|
// 参数来源类型 1：全部参数来源 2：参数来源不回显字段 3:参数来源不显示系统变量
|
type: { type: Number, default: 1 },
|
// 系统字段显示表单id
|
showSystemFormId: { type: Boolean, default: true },
|
// 系统字段显示完整名称
|
showSystemFullLabel: { type: Boolean, default: false },
|
showFieldFullLabel: { type: Boolean, default: false },
|
isFlow: { type: Boolean, default: false },
|
// 全局参数options
|
globalOptions: { type: Array, default: () => [] },
|
});
|
const emit = defineEmits(['update:value', 'change', 'fieldChange']);
|
const visible = ref(false);
|
const templateList = ref<any[]>([]);
|
|
const getSystemFieldOptions = computed(() => {
|
const list = props.isFlow ? systemFieldOptions : interfaceSystemOptions;
|
const option = list.map((o) => ({ ...o, label: o.fullName ? `${o.id}(${o.fullName})` : o.id }));
|
return props.showSystemFormId ? option : option.filter((o) => o.id != '@formId');
|
});
|
const getSourceTypeOptions = computed(() => {
|
const options = props.isFlow ? sourceTypeFlowOptions : sourceTypeOptions;
|
return props.type == 2 ? options.filter((o) => o.id != 1) : props.type == 3 ? options.filter((o) => o.id != 4) : options;
|
});
|
const getNotNullSourceTypeOptions = computed(() => unref(getSourceTypeOptions).filter((o) => o.id != 3));
|
|
function openSelectModal() {
|
visible.value = true;
|
templateList.value = cloneDeep(props.templateJson) || [];
|
}
|
function handleCancel() {
|
visible.value = false;
|
}
|
function onFieldChange(e, row) {
|
emit('fieldChange', e, row);
|
}
|
function handleSubmit() {
|
for (let i = 0; i < templateList.value.length; i++) {
|
for (let j = 0; j < props.templateJson.length; j++) {
|
if ((props.templateJson[j] as any)?.id == templateList.value[i].id) {
|
props.templateJson[j] = templateList.value[i];
|
}
|
}
|
}
|
handleCancel();
|
}
|
function onSourceTypeChange(record) {
|
record.relationField = record.sourceType == 4 ? unref(getSystemFieldOptions)[0]?.id : '';
|
}
|
</script>
|
|
<template>
|
<a-button class="!w-full" @click="openSelectModal">设置</a-button>
|
<AModal
|
class="interface-template-json-modal"
|
v-model:open="visible"
|
title="参数设置"
|
:width="600"
|
@ok="handleSubmit"
|
@cancel="handleCancel"
|
:mask-closable="false"
|
centered>
|
<template #closeIcon>
|
<ModalClose :can-fullscreen="false" @cancel="handleCancel" />
|
</template>
|
<div class="jnpf-content-wrapper">
|
<a-table
|
class="w-full"
|
:data-source="templateList"
|
:columns="templateJsonColumns"
|
size="small"
|
:pagination="false"
|
:scroll="{ x: 'max-content', y: 'calc(40vh - 39px)' }">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'field'">
|
<span class="required-sign">{{ record.required ? '*' : '' }}</span>
|
{{ record.field }}{{ record.fieldName ? `(${record.fieldName})` : '' }}
|
</template>
|
<template v-if="column.key === 'sourceType'">
|
<jnpf-select
|
v-if="record.required"
|
v-model:value="record.sourceType"
|
:options="getNotNullSourceTypeOptions"
|
class="!w-[100px]"
|
@change="onSourceTypeChange(record)" />
|
<jnpf-select v-else v-model:value="record.sourceType" :options="getSourceTypeOptions" class="!w-[100px]" @change="onSourceTypeChange(record)" />
|
</template>
|
<template v-if="column.key === 'relationField'">
|
<jnpf-select
|
v-model:value="record.relationField"
|
:options="fieldOptions"
|
allow-clear
|
show-search
|
:field-names="{ label: showFieldFullLabel ? 'label' : 'fullName', options: 'options1' }"
|
:option-label-prop="showFieldFullLabel ? 'label' : 'fullName'"
|
class="!w-[204px]"
|
@change="onFieldChange($event, record)"
|
v-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 />
|
</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
|
class="!w-[204px]"
|
v-else-if="record.sourceType === 4" />
|
<jnpf-select
|
v-model:value="record.relationField"
|
:options="globalOptions"
|
:field-names="{ label: 'fieldName', value: 'fieldName', options: 'options1' }"
|
class="!w-[204px]"
|
allow-clear
|
v-else-if="record.sourceType === 5" />
|
</template>
|
</template>
|
<template #emptyText>
|
<p class="leading-[60px]">暂无数据</p>
|
</template>
|
</a-table>
|
</div>
|
</AModal>
|
</template>
|
