<script lang="ts" setup>
|
import { computed, onMounted, reactive, toRefs, unref, watch } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
|
import { useClipboard } from '@vueuse/core';
|
import { cloneDeep } from 'lodash-es';
|
|
import { SelectInterface } from '#/components/Interface';
|
import { useBaseStore } from '#/store';
|
import { systemFieldOptions } from '#/utils/define';
|
|
import HeaderContainer from './components/HeaderContainer.vue';
|
|
defineOptions({ inheritAttrs: false });
|
|
const props = defineProps(['formFieldsOptions', 'formConf', 'updateJnpfData', 'bpmn', 'updateBpmnProperties', 'dataSourceForm', 'prevNodeList', 'element']);
|
|
interface State {
|
activeKey: number;
|
templateJson: any;
|
tableActiveKey: string;
|
}
|
const baseStore = useBaseStore();
|
const interFaceOptions = [
|
{
|
key: 'formData',
|
value: '表单数据',
|
},
|
{
|
key: 'eventId ',
|
value: '外部回调ID',
|
},
|
];
|
const getGroupOptions = computed(() => {
|
const jnpfData: any = props.bpmn?.get('jnpfData');
|
const global = jnpfData.getValue('global');
|
const globalFormId = global.formId;
|
const formId = props.prevNodeList.find((o) => o.id === state.tableActiveKey)?.formId || global.formId;
|
const list: any[] = [];
|
|
const newPrevNodeList = props.prevNodeList.filter((o) => o.type != 'start'); // 过滤开始节点
|
if (formId && global.allFormMap && global.allFormMap[`form_${formId}`] && newPrevNodeList?.length) {
|
let formList = cloneDeep(global.allFormMap[`form_${formId}`]) || [];
|
formList = formList.filter((o) => !o?.__config__?.isSubTable && o.__config__.jnpfKey !== 'table' && o.type != 'start');
|
formList = formList.map((o) => ({ ...o, id: `${o.id}|${formId}` }));
|
const sysFieldList = [{ id: '@prevNodeFormId', fullName: '上节点表单Id' }];
|
list.push({ fullName: '上节点表单', children: [...sysFieldList, ...formList] });
|
}
|
|
if (globalFormId && global.allFormMap && global.allFormMap[`form_${globalFormId}`]) {
|
let globalList = cloneDeep(global.allFormMap[`form_${globalFormId}`]) || [];
|
globalList = globalList.filter((o) => !o?.__config__?.isSubTable && o.__config__.jnpfKey !== 'table');
|
globalList = globalList.map((o) => ({ ...o, id: `${o.id}|${globalFormId}` }));
|
const sysFieldList = [{ id: '@startNodeFormId', fullName: '发起节点表单Id' }];
|
list.push({ fullName: '发起节点表单', children: [...sysFieldList, ...globalList] });
|
}
|
|
return list;
|
});
|
|
const getSysConfig = computed(() => baseStore.sysConfigInfo);
|
const getTabOptions: any = computed(() => {
|
const newPrevNodeList: any = [];
|
props.prevNodeList.map((o: any) => {
|
// 过滤重复节点
|
if (!newPrevNodeList.some((i: any) => i.id === o.id)) {
|
newPrevNodeList.push({ id: o.id, value: o.fullName });
|
}
|
return o;
|
});
|
return newPrevNodeList;
|
});
|
|
const getJnpfGlobalData = computed(() => {
|
const jnpfData: any = props.bpmn.get('jnpfData');
|
return jnpfData?.getValue('global') || {};
|
});
|
const getGlobalOptions = computed(() => unref(getJnpfGlobalData).globalParameterList);
|
const state = reactive<State>({
|
activeKey: 1,
|
templateJson: undefined,
|
tableActiveKey: '',
|
});
|
const { activeKey } = toRefs(state);
|
const { copy } = useClipboard({ legacy: true });
|
const { createMessage } = useMessage();
|
|
watch(
|
() => props.formConf,
|
() => props.updateJnpfData(),
|
{ deep: true, immediate: true },
|
);
|
|
function handleNull() {
|
props.formConf.formName = '';
|
props.formConf.formId = '';
|
props.formConf.outsideOptions = {};
|
props.formConf.content = '';
|
props.updateBpmnProperties('elementBodyName', '');
|
}
|
function onFormIdChange(id, item) {
|
if (!id) return handleNull();
|
if (props.formConf.formId === id) return;
|
props.formConf.formName = item.fullName;
|
props.formConf.formId = id;
|
const list = getTabOptions.value || [];
|
const outsideOptions = {};
|
const templateJson = (item.templateJson || []).map((o) => ({ ...o, sourceType: 1, relationField: '' }));
|
list.forEach((i) => {
|
outsideOptions[i.id] = cloneDeep(templateJson);
|
});
|
state.templateJson = templateJson;
|
props.formConf.outsideOptions = outsideOptions;
|
props.formConf.defaultTemplateJson = templateJson;
|
props.formConf.content = `执行[${props.formConf.formName}]数据接口`;
|
props.updateBpmnProperties('elementBodyName', props.formConf.content);
|
}
|
function handleCopy(text) {
|
copy(text);
|
createMessage.success('复制成功');
|
}
|
function addItem() {
|
props.formConf.formFieldList.push({ id: '', fullName: '', label: '' });
|
}
|
function onItemChange(item) {
|
item.label = item.fullName ? `${item.id}(${item.fullName})` : item.id;
|
const jnpfData: any = props.bpmn.get('jnpfData');
|
const global = jnpfData.getValue('global');
|
global.allFormMap[`outsideForm_${props.formConf?.nodeId}`] = props.formConf?.formFieldList;
|
jnpfData.setValue('global', global);
|
}
|
function delItem(index) {
|
props.formConf.formFieldList.splice(index, 1);
|
}
|
function onTabChange(key) {
|
const jnpfData: any = props.bpmn?.get('jnpfData');
|
const element = jnpfData.getValue(props.element.id);
|
const templateJson = element?.outsideOptions[key];
|
state.tableActiveKey = key;
|
let defaultTemplateJson = element.defaultTemplateJson;
|
defaultTemplateJson = element.defaultTemplateJson.map((i) => {
|
return {
|
...i,
|
sourceType: 1,
|
relationField: '',
|
};
|
});
|
state.templateJson = templateJson || defaultTemplateJson;
|
}
|
function init() {
|
const jnpfData: any = props.bpmn?.get('jnpfData');
|
const element = jnpfData.getValue(props.element.id);
|
const id = props.prevNodeList[0]?.id;
|
state.tableActiveKey = id;
|
let defaultTemplateJson = [];
|
if (element.defaultTemplateJson?.length) {
|
defaultTemplateJson = element.defaultTemplateJson.map((o) => {
|
return {
|
...o,
|
sourceType: 1,
|
relationField: '',
|
};
|
});
|
}
|
const templateJson = (element?.outsideOptions && element?.outsideOptions[id]) || defaultTemplateJson;
|
state.templateJson = getTabOptions.value?.length > 0 ? templateJson : null;
|
if (id && element?.outsideOptions && !element?.outsideOptions[id]) {
|
props.formConf.outsideOptions = { ...props.formConf.outsideOptions, [id]: defaultTemplateJson };
|
}
|
}
|
function onRelationFieldChange(val) {
|
if (!val) return;
|
props.formConf.outsideOptions = { ...props.formConf.outsideOptions, [state.tableActiveKey]: state.templateJson };
|
}
|
|
onMounted(() => {
|
init();
|
});
|
</script>
|
<template>
|
<HeaderContainer :form-conf="formConf" @on-node-name-change="updateBpmnProperties('nodeName', $event)" />
|
<a-tabs v-model:active-key="activeKey" size="small" class="pane-tabs approver-pane-tabs">
|
<a-tab-pane :key="1" tab="输出设置" />
|
<a-tab-pane :key="2" tab="回调设置" />
|
</a-tabs>
|
<a-form :colon="false" :model="formConf" class="config-content" layout="vertical">
|
<template v-if="activeKey === 1">
|
<a-form-item label="数据接口">
|
<p class="mb-[10px]">数据传递给第三方系统，流程进入第三方系统审批。</p>
|
<SelectInterface
|
:value="formConf.formId"
|
:title="formConf.formName"
|
:template-json="state.templateJson"
|
:group-options="getGroupOptions"
|
:global-options="getGlobalOptions"
|
:show-system-form-id="false"
|
:source-type="3"
|
:allow-clear="false"
|
:tab-options="getTabOptions"
|
is-flow
|
show-system-full-label
|
:system-options="[
|
...systemFieldOptions,
|
{ id: '@formData', fullName: '表单数据', label: '@formData(表单数据)' },
|
{ id: '@eventId', fullName: '外部回调id', label: '@eventId(外部回调id)' },
|
]"
|
@on-source-type-change="onRelationFieldChange"
|
@on-tab-change="onTabChange"
|
@field-change="onRelationFieldChange"
|
@change="onFormIdChange" />
|
</a-form-item>
|
</template>
|
|
<template v-if="activeKey === 2">
|
<a-form-item>
|
<p class="common-tip mb-[10px]">本系统URL，用来接收第三方系统审批完成后的回调数据。</p>
|
<a-input :value="`${getSysConfig.jnpfDomain}/api/workflow/task/Hooks`" readonly>
|
<template #addonAfter>
|
<span class="cursor-pointer" @click="handleCopy(`${getSysConfig.jnpfDomain}/api/workflow/task/Hooks`)">复制链接</span>
|
</template>
|
</a-input>
|
</a-form-item>
|
<a-form-item label="接口参数">
|
<div class="condition-main">
|
<a-input-group class="mb-[6px]" v-for="item in interFaceOptions" :key="item.key" :value="item.value" compact>
|
<a-input v-model:value="item.key" style="width: 30%" readonly />
|
<a-input v-model:value="item.value" style="width: 70%" readonly />
|
</a-input-group>
|
</div>
|
</a-form-item>
|
<a-form-item label="添加接口字段">
|
<div class="mb-[10px]">
|
<span class="link-text mr-[20px] inline-block" @click="addItem"><i class="icon-ym icon-ym-btn-add text-[14px]mr-[4px]"></i>自定义添加</span>
|
</div>
|
<div class="condition-main">
|
<div class="condition-list">
|
<a-row :gutter="8" v-for="(item, index) in formConf.formFieldList" :key="index" class="mt-[10px]">
|
<a-col :span="10">
|
<a-input v-model:value="item.id" placeholder="字段" @change="onItemChange(item)" />
|
</a-col>
|
<a-col :span="13">
|
<a-input v-model:value="item.fullName" placeholder="字段说明" @change="onItemChange(item)" />
|
</a-col>
|
<a-col :span="1" class="text-center">
|
<i class="icon-ym icon-ym-btn-clearn" @click="delItem(index)"></i>
|
</a-col>
|
</a-row>
|
</div>
|
</div>
|
</a-form-item>
|
</template>
|
</a-form>
|
</template>
|
