<script lang="ts" setup>
|
import { computed, onMounted, reactive, watch } from 'vue';
|
|
import { cloneDeep } from 'lodash-es';
|
|
import { getFlowFormInfo } from '#/api/workFlow/template';
|
import { systemComponentsList } from '#/components/FormGenerator/src/helper/config';
|
|
import { formFieldTypeOptions } from '../helper/define';
|
import FlowModal from './components/FlowModal.vue';
|
import HeaderContainer from './components/HeaderContainer.vue';
|
|
interface State {
|
selectFormList: any[];
|
}
|
defineOptions({ inheritAttrs: false });
|
const props = defineProps([
|
'formConf',
|
'updateJnpfData',
|
'dataSourceFormList',
|
'transformFormJson',
|
'transformFieldList',
|
'updateTransferList',
|
'updateBpmnProperties',
|
'usedFormItems',
|
'bpmn',
|
]);
|
|
const state = reactive<State>({
|
selectFormList: [],
|
});
|
|
defineExpose({ getFlowFormFieldList });
|
|
const sourceTypeOptions = [
|
{ id: 1, fullName: '字段' },
|
{ id: 2, fullName: '自定义' },
|
];
|
|
watch(
|
() => props.formConf,
|
() => props.updateJnpfData(),
|
{ deep: true, immediate: true },
|
);
|
|
const getDataSourceFormList = computed(() => cloneDeep(props.dataSourceFormList || []).filter((o) => o.id == props.formConf.dataSourceForm));
|
const getFormFieldOptions = computed(() => getFormField(state.selectFormList, props.formConf.formFieldType));
|
|
function onFlowIdChange(id, item) {
|
if (!id) return handleNull();
|
props.formConf.flowName = item.fullName;
|
props.formConf.flowId = id;
|
props.formConf.launchPermission = item.visibleType || 1;
|
props.formConf.content = `发起[${props.formConf.flowName}]流程`;
|
props.updateBpmnProperties('elementBodyName', props.formConf.content);
|
getFlowFormFieldList(true);
|
}
|
function getFlowFormFieldList(isInit = false) {
|
if (!props.formConf.flowId) return;
|
getFlowFormInfo(props.formConf.flowId).then((res) => {
|
const { type = 1, formData } = res.data;
|
let fieldList: any[] = [];
|
let formJson: any = {};
|
if (formData) formJson = JSON.parse(formData);
|
fieldList = type == 2 ? props.transformFormJson(formJson) : formJson.fields;
|
|
const list: any[] = props.transformFieldList(fieldList);
|
props.formConf.formFieldList = list.map((o) => ({ ...o, label: o.fullName ? `${o.id}(${o.fullName})` : o.id }));
|
isInit && props.updateTransferList('launchFlowForm');
|
});
|
}
|
function handleNull() {
|
props.formConf.flowName = '';
|
props.formConf.flowId = '';
|
props.formConf.launchPermission = 1;
|
props.formConf.content = '';
|
props.updateBpmnProperties('elementBodyName', '');
|
}
|
function getTargetOptions(index: number) {
|
const ignoreOptions: any[] = [];
|
for (let i = 0; i < props.formConf.transferList.length; i++) {
|
const e = props.formConf.transferList[i];
|
if (e.targetField && index !== i) ignoreOptions.push(e.targetField);
|
}
|
const list = props.formConf.formFieldList.filter(
|
(o) => !ignoreOptions.includes(o.id) && !['table', ...systemComponentsList].includes(o?.__config__?.jnpfKey),
|
);
|
return list.map((o) => ({ ...o, disabled: false }));
|
}
|
function addTransferItem() {
|
props.formConf.transferList.push({ targetField: '', targetFieldLabel: '', sourceType: 1, sourceValue: '', required: false });
|
}
|
function delTransferItem(index) {
|
props.formConf.transferList.splice(index, 1);
|
}
|
|
function getFormField(list, type) {
|
if (type === 2) return list.filter((o) => o.__config__.jnpfKey == 'organizeSelect');
|
if (type === 3) return list.filter((o) => o.__config__.jnpfKey == 'posSelect');
|
if (type === 4) return list.filter((o) => o.__config__.jnpfKey == 'roleSelect');
|
if (type === 5) return list.filter((o) => o.__config__.jnpfKey == 'groupSelect');
|
return list?.length ? list.filter((o) => o.__config__.jnpfKey == 'userSelect' || o.__config__.jnpfKey == 'usersSelect') : [];
|
}
|
function onFormFieldTypeChange() {
|
props.formConf.formField = '';
|
}
|
function onDataSourceFormChange(key) {
|
if (!key) {
|
props.formConf.formField = '';
|
state.selectFormList = [];
|
props.formConf.transferList = [];
|
return;
|
}
|
|
const jnpfData: any = props.bpmn?.get('jnpfData');
|
state.selectFormList = jnpfData?.data?.global?.allFormMap[`form_${jnpfData?.data[key].formId}`]?.filter((o) => !o?.__config__?.isSubTable);
|
}
|
onMounted(() => {
|
props.formConf?.dataSourceForm && onDataSourceFormChange(props.formConf.dataSourceForm);
|
});
|
</script>
|
<template>
|
<HeaderContainer :form-conf="formConf" @on-node-name-change="updateBpmnProperties('nodeName', $event)" />
|
<a-form :colon="false" :model="formConf" class="config-content" layout="vertical">
|
<a-form-item label="选择流程">
|
<div class="common-tip mb-[12px]">自动发起流程，第一个审批节点设置候选人时无法自动发起</div>
|
<FlowModal :value="formConf.flowId" :title="formConf.flowName" @change="onFlowIdChange" />
|
</a-form-item>
|
<a-form-item label="选择数据源">
|
<div class="countersign-cell">
|
<jnpf-select v-model:value="formConf.dataSourceForm" :options="dataSourceFormList" show-search allow-clear @change="onDataSourceFormChange" />
|
<span class="w-[220px]">的数据赋值给流程表单</span>
|
</div>
|
</a-form-item>
|
<a-form-item label="字段设置">
|
<div class="common-tip mb-[12px]">[必填]字段默认展示且不可删除，请至少设置一个字段</div>
|
<div class="condition-main mb-[10px]">
|
<a-row :gutter="8" v-for="(item, index) in formConf.transferList" :key="index" class="mt-[10px]">
|
<a-col :span="8">
|
<jnpf-select
|
v-model:value="item.targetField"
|
:options="getTargetOptions(index)"
|
placeholder="目标表单字段"
|
show-search
|
allow-clear
|
:disabled="item.required"
|
:field-names="{ options: 'options1' }" />
|
</a-col>
|
<a-col :span="2" class="leading-[32px]">设为</a-col>
|
<a-col :span="5">
|
<jnpf-select v-model:value="item.sourceType" :options="sourceTypeOptions" @change="item.sourceValue = ''" />
|
</a-col>
|
<a-col :span="8">
|
<jnpf-select
|
v-model:value="item.sourceValue"
|
:options="getDataSourceFormList"
|
placeholder="数据源字段"
|
show-search
|
allow-clear
|
:field-names="{ options: 'children' }"
|
v-if="item.sourceType === 1" />
|
<a-input v-model:value="item.sourceValue" placeholder="请输入" allow-clear v-if="item.sourceType === 2" />
|
</a-col>
|
<a-col :span="1" class="text-center" v-if="!item.required">
|
<i class="icon-ym icon-ym-btn-clearn" @click="delTransferItem(index)"></i>
|
</a-col>
|
</a-row>
|
</div>
|
<span class="link-text inline-block" @click="addTransferItem()"><i class="icon-ym icon-ym-btn-add mr-[4px] text-[14px]"></i>添加字段</span>
|
</a-form-item>
|
<a-form-item label="发起人">
|
<a-form-item v-if="formConf.launchPermission == 2">
|
<div class="flow-switch-flex">
|
<a-switch v-model:checked="formConf.hasPermission" />
|
<span class="common-tip ml-[10px]">校验发起权限（校验发起人是否有该流程的发起权限）</span>
|
</div>
|
</a-form-item>
|
<a-form-item>
|
<a-radio-group v-model:value="formConf.assigneeType" class="common-radio">
|
<a-radio :value="6">指定成员</a-radio>
|
<a-radio :value="4">表单变量</a-radio>
|
</a-radio-group>
|
</a-form-item>
|
<a-form-item v-if="formConf.assigneeType === 6">
|
<jnpf-users-select v-model:value="formConf.initiator" button-type="button" modal-title="添加发起人" />
|
</a-form-item>
|
<a-form-item v-if="formConf.assigneeType === 4">
|
<a-input-group compact>
|
<jnpf-select v-model:value="formConf.formFieldType" :options="formFieldTypeOptions" class="!w-[100px]" @change="onFormFieldTypeChange" />
|
<jnpf-select
|
v-model:value="formConf.formField"
|
:options="getFormFieldOptions"
|
:field-names="{ options: 'options1' }"
|
show-search
|
style="width: calc(100% - 100px)" />
|
</a-input-group>
|
</a-form-item>
|
</a-form-item>
|
</a-form>
|
</template>
|
