<script lang="ts" setup>
|
import { computed } from 'vue';
|
|
import { SelectInterface } from '#/components/Interface';
|
|
const props = defineProps({
|
formConf: { type: Object, required: true },
|
eventKey: { type: String, required: true },
|
funcOptions: { type: Array, default: () => [] },
|
globalOptions: { type: Array, default: () => [] },
|
});
|
const emit = defineEmits(['field-change']);
|
|
const defaultValidateFuncConfig = () => ({
|
on: false,
|
interfaceId: '',
|
interfaceName: '',
|
templateJson: [],
|
});
|
|
const validateFuncConfig = computed(() => {
|
if (!props.formConf[props.eventKey]) {
|
props.formConf[props.eventKey] = {
|
on: false,
|
interfaceId: '',
|
interfaceName: '',
|
templateJson: [],
|
};
|
}
|
const eventConfig = props.formConf[props.eventKey];
|
if (!eventConfig.validateFuncConfig) eventConfig.validateFuncConfig = defaultValidateFuncConfig();
|
return eventConfig.validateFuncConfig;
|
});
|
|
function onValidateFuncChange(val, row) {
|
const config = validateFuncConfig.value;
|
if (!val) {
|
config.interfaceId = '';
|
config.interfaceName = '';
|
config.templateJson = [];
|
return;
|
}
|
if (config.interfaceId === val) return;
|
config.interfaceId = val;
|
config.interfaceName = row.fullName;
|
config.templateJson = row.templateJson?.map((o) => ({ ...o, relationField: '', sourceType: 1 })) || [];
|
}
|
</script>
|
|
<template>
|
<div class="mt-[12px]">
|
<div class="ant-form-item-label"><label class="ant-form-item-no-colon">自定义验证接口</label></div>
|
<div class="leading-[32px]">
|
<a-switch v-model:checked="validateFuncConfig.on" />
|
</div>
|
<template v-if="validateFuncConfig.on">
|
<div class="ant-form-item-label !mt-[12px]"><label class="ant-form-item-no-colon">数据接口</label></div>
|
<div>
|
<SelectInterface
|
:value="validateFuncConfig.interfaceId"
|
:title="validateFuncConfig.interfaceName"
|
:template-json="validateFuncConfig.templateJson"
|
:field-options="funcOptions"
|
:source-type="3"
|
:global-options="globalOptions"
|
show-system-full-label
|
is-flow
|
field-width="60px"
|
@change="onValidateFuncChange"
|
@field-change="(val, row) => emit('field-change', val, row)" />
|
</div>
|
</template>
|
</div>
|
</template>
|
