<script lang="ts" setup>
|
import { computed, inject, reactive, toRefs, unref, watch } from 'vue';
|
|
import { bpmnTask, typeConfig } from '@jnpf/bpmn/config';
|
import { NodeUtils } from '@jnpf/bpmn/utils';
|
import { useModal } from '@jnpf/ui/modal';
|
import { buildBitUUID, formatToDateTime } from '@jnpf/utils';
|
|
import { TreeSelect } from 'ant-design-vue';
|
import draggable from 'vuedraggable';
|
|
import { InterfaceModal } from '#/components/CommonModal';
|
import { SelectInterface, SelectInterfaceBtn } from '#/components/Interface';
|
import { systemFieldOptions } from '#/utils/define';
|
|
import { defaultStep, keyMap, nodeOverTimeMsgOptions, overTimeOptions, printConditionTypeOptions, typeOptions } from '../helper/define';
|
import AuxiliaryMessageModal from './components/AuxiliaryMessage.vue';
|
import ConditionModal from './components/ConditionModal.vue';
|
import HeaderContainer from './components/HeaderContainer.vue';
|
import NoticeConfig from './components/NoticeConfig.vue';
|
import StyleScript from './components/StyleScript.vue';
|
import ValidateInterfaceConfig from './components/ValidateInterfaceConfig.vue';
|
|
interface State {
|
activeKey: number;
|
assignList: any[];
|
userLabel: string;
|
readAllChecked: boolean;
|
writeAllChecked: boolean;
|
requiredAllChecked: boolean;
|
isReadIndeterminate: boolean;
|
isWriteIndeterminate: boolean;
|
isRequiredIndeterminate: boolean;
|
conditionType: string;
|
currentBtnIndex: number;
|
jsJson: string;
|
formLoading: boolean;
|
}
|
|
defineOptions({ inheritAttrs: false });
|
const props = defineProps([
|
'formConf',
|
'printTplOptions',
|
'prevNodeList',
|
'beforeNodeOptions',
|
'funcOptions',
|
'noticeOptions',
|
'formFieldsOptions',
|
'usedFormItems',
|
'getFormFieldList',
|
'initFormOperates',
|
'updateJnpfData',
|
'nodeOptions',
|
'flowState',
|
'type',
|
'updateFormFieldList',
|
'updateBpmnProperties',
|
'element',
|
]);
|
const state = reactive<State>({
|
activeKey: 1,
|
assignList: [],
|
userLabel: '',
|
readAllChecked: false,
|
writeAllChecked: false,
|
requiredAllChecked: false,
|
isReadIndeterminate: false,
|
isWriteIndeterminate: false,
|
isRequiredIndeterminate: false,
|
conditionType: '',
|
currentBtnIndex: 0,
|
jsJson: '({ flowInfo, formData, taskInfo, onlineUtils }) => {\n // 在此编写代码\n \n}',
|
formLoading: false,
|
});
|
defineExpose({ getContent, updateCheckStatus });
|
const { activeKey, readAllChecked, writeAllChecked, requiredAllChecked, isReadIndeterminate, isWriteIndeterminate, isRequiredIndeterminate } = toRefs(state);
|
const [registerConditionModal, { openModal: openConditionModal }] = useModal();
|
const [registerStyleScriptModal, { openModal: openStyleScriptModal }] = useModal();
|
const [registerAuxiliaryMessageModal, { openModal: openAuxiliaryModal }] = useModal();
|
const bpmn: (() => string | undefined) | undefined = inject('bpmn');
|
const overTimeRuleOptions = [
|
{ id: 7, fullName: '同一角色' },
|
{ id: 2, fullName: '同一部门' },
|
{ id: 3, fullName: '同一岗位' },
|
{ id: 8, fullName: '同一分组' },
|
];
|
const formOperatesColumns = [
|
{ title: '表单字段', dataIndex: 'name', key: 'name' },
|
{ title: '操作', dataIndex: 'write', key: 'write', align: 'center', width: 250 },
|
];
|
const conditionTypeOptions = [
|
{ id: 1, fullName: '字段' },
|
{ id: 2, fullName: '自定义' },
|
{ id: 3, fullName: '系统参数' },
|
];
|
const transferTypeOptions = [
|
{ fullName: '指定成员', id: 6 },
|
{ fullName: '超时审批人', id: 11 },
|
{ fullName: '数据接口', id: 9 },
|
];
|
const getBpmn = computed(() => (bpmn as () => any)());
|
const getJnpfGlobalData = computed(() => {
|
const jnpfData: any = unref(getBpmn).get('jnpfData');
|
return jnpfData?.getValue('global') || {};
|
});
|
const getBindValue = computed(() => ({
|
funcOptions: props.noticeOptions,
|
isApprover: true,
|
}));
|
const backNodeCodeOptions = computed(() => {
|
let options = [...defaultStep, ...props.beforeNodeOptions];
|
if (props.formConf.backType == 2) options = options.filter((o) => o.id != 1);
|
return options;
|
});
|
const getPrintConditionsContent = computed(() => NodeUtils.getConditionsContent(props.formConf.printConfig.conditions, props.formConf.printConfig.matchLogic));
|
const getSystemFieldOptions = computed(() => systemFieldOptions.map((o) => ({ ...o, label: o.fullName ? `${o.id}(${o.fullName})` : o.id })));
|
const getParameterList = computed(() => unref(getJnpfGlobalData).globalParameterList || []);
|
const getApprovalFieldOptions = computed(() => unref(getJnpfGlobalData).approvalFieldList || []);
|
|
watch(
|
() => props.formConf,
|
() => props.updateJnpfData(props.formConf),
|
{ deep: true, immediate: true },
|
);
|
watch(
|
() => state.activeKey,
|
(val) => {
|
val == 3 && updateCheckStatus();
|
},
|
);
|
|
function onBackTypeChange(e) {
|
if (e?.target?.value == 2 && props.formConf.backNodeCode == 1) props.formConf.backNodeCode = 0;
|
}
|
function getContent() {
|
let content = typeConfig[bpmnTask].renderer.bodyDefaultText;
|
content =
|
props.formConf.assigneeType == 6
|
? state.userLabel || typeConfig[bpmnTask].renderer.bodyDefaultText
|
: typeOptions.find((o) => o.id === props.formConf.assigneeType)?.fullName || typeConfig[bpmnTask].renderer.bodyDefaultText;
|
props.formConf.content = content;
|
return content;
|
}
|
function onOverTimeConfigInterfaceChange(val, row) {
|
if (!val) {
|
props.formConf.overTimeConfig.interfaceId = '';
|
props.formConf.overTimeConfig.interfaceName = '';
|
props.formConf.overTimeConfig.templateJson = [];
|
return;
|
}
|
if (props.formConf.overTimeConfig.interfaceId === val) return;
|
props.formConf.overTimeConfig.interfaceId = val;
|
props.formConf.overTimeConfig.interfaceName = row.fullName;
|
props.formConf.overTimeConfig.templateJson = row.templateJson.map((o) => ({ ...o, sourceType: 1 })) || [];
|
}
|
function onRelationFieldChange(val, row) {
|
if (!val) return;
|
const list = props.funcOptions.filter((o) => o.id === val);
|
if (!list.length) return;
|
const item = list[0];
|
row.isSubTable = item.__config__ && item.__config__.isSubTable ? item.__config__.isSubTable : false;
|
}
|
function handleCheckAllChange(e, type) {
|
const val = e.target.checked;
|
if (type == 1) state.isReadIndeterminate = false;
|
if (type == 2) state.isWriteIndeterminate = false;
|
if (type == 3) state.isRequiredIndeterminate = false;
|
props.formConf.formOperates.forEach((item) => {
|
if (type == 1) item.read = val;
|
if (type == 2) item.write = val;
|
if (type == 3 && !item.requiredDisabled) item.required = val;
|
});
|
}
|
function handleCheckedChange() {
|
updateCheckStatus();
|
}
|
function updateCheckStatus() {
|
const formOperatesLen = props.formConf.formOperates.length;
|
const requiredDisabledCount = props.formConf.formOperates.filter((o) => !o.requiredDisabled).length;
|
let readCount = 0;
|
let writeCount = 0;
|
let requiredCount = 0;
|
props.formConf.formOperates.forEach((item) => {
|
if (item.read) readCount++;
|
if (item.write) writeCount++;
|
if (item.required && !item.requiredDisabled) requiredCount++;
|
});
|
state.readAllChecked = formOperatesLen ? formOperatesLen === readCount : false;
|
state.writeAllChecked = formOperatesLen ? formOperatesLen === writeCount : false;
|
state.requiredAllChecked = formOperatesLen ? requiredDisabledCount === requiredCount : false;
|
state.isReadIndeterminate = !!readCount && readCount < formOperatesLen;
|
state.isWriteIndeterminate = !!writeCount && writeCount < formOperatesLen;
|
state.isRequiredIndeterminate = !!requiredCount && requiredCount < requiredDisabledCount;
|
}
|
function handlePrintConfig() {
|
state.conditionType = 'print';
|
openConditionModal(true, { usedFormItems: props.usedFormItems, formFieldsOptions: props.formFieldsOptions, ...props.formConf.printConfig });
|
}
|
function updatePrintConfig(data) {
|
const form = state.conditionType == 'print' ? 'printConfig' : state.conditionType == 'audit' ? 'autoAuditRule' : 'autoRejectRule';
|
props.formConf[form] = { ...props.formConf[form], ...data };
|
}
|
function handlePrintConfigRemove() {
|
props.formConf.printConfig.matchLogic = 'and';
|
props.formConf.printConfig.conditions = [];
|
}
|
function handleAddParameter() {
|
props.formConf.parameterList.push({
|
field: '',
|
fieldValueType: 2,
|
fieldValue: '',
|
});
|
}
|
function onFieldValueChange(item, val, data) {
|
item.fieldLabel = val ? data.fullName : '';
|
item.fieldValueJnpfKey = val ? data.__config__.jnpfKey : '';
|
}
|
function onConditionDateChange(val, item) {
|
if (!val) return (item.fieldLabel = '');
|
const format = item.format || 'YYYY-MM-DD HH:mm:ss';
|
item.fieldLabel = formatToDateTime(val, format);
|
}
|
function onConditionListChange(item, val, data) {
|
if (!val) return (item.fieldLabel = '');
|
const labelList = data.map((o) => o.fullName);
|
item.fieldLabel = labelList.join('/');
|
}
|
function onConditionOrganizeChange(item, val, data) {
|
if (!val) return (item.fieldLabel = '');
|
item.fieldLabel = data.orgNameTree || '';
|
}
|
function onConditionObjChange(item, val, data) {
|
if (!val) return (item.fieldLabel = '');
|
item.fieldLabel = data.fullName || '';
|
}
|
function handleDelItem(index) {
|
props.formConf.parameterList.splice(index, 1);
|
}
|
function onFieldValueTypeChange(item) {
|
item.fieldValue = '';
|
item.fieldLabel = '';
|
}
|
function onTimeLimitChange(val) {
|
if (val == 0) props.formConf.overTimeConfig.on = 0;
|
}
|
function onFuncChange(key, val, row) {
|
if (!val) {
|
props.formConf[key].interfaceId = '';
|
props.formConf[key].interfaceName = '';
|
props.formConf[key].templateJson = [];
|
return;
|
}
|
if (props.formConf[key].interfaceId === val) return;
|
props.formConf[key].interfaceId = val;
|
props.formConf[key].interfaceName = row.fullName;
|
props.formConf[key].templateJson = row.templateJson.map((o) => ({ ...o, sourceType: 1 })) || [];
|
}
|
function onOverAutoTransferChange(value) {
|
if (value) props.formConf.overTimeConfig.overAutoApprove = false;
|
}
|
function addCustomBtn() {
|
const data = {
|
value: `btn_${buildBitUUID()}`,
|
label: getFieldName(),
|
jsJson: state.jsJson,
|
};
|
props.formConf.customBtns.push(data);
|
}
|
function setDefaultValue(e) {
|
if (e.element.label === '') {
|
const data = {
|
...e.element,
|
label: getFieldName(),
|
};
|
props.formConf.customBtns[e.index] = data;
|
}
|
}
|
// 生成参数名称
|
function getFieldName() {
|
if (!props.formConf.customBtns.length) return '按钮1';
|
let maxNumber = 0;
|
const regex = /按钮(\d+)/;
|
props.formConf.customBtns.map((o) => {
|
const match = o.label.match(regex);
|
if (match) {
|
const number = Number.parseInt(match[1]);
|
if (number > maxNumber) maxNumber = number;
|
}
|
return o;
|
});
|
return `按钮${++maxNumber}`;
|
}
|
function editStyle(element, index) {
|
state.currentBtnIndex = index;
|
openStyleScriptModal(true, { text: element.jsJson || state.jsJson });
|
}
|
function updateStyleScript(data) {
|
props.formConf.customBtns[state.currentBtnIndex].jsJson = data;
|
}
|
function openAuxiliaryMessageModal() {
|
openAuxiliaryModal(true, { auxiliaryInfo: props.formConf.auxiliaryInfo, formFieldsOptions: props.formFieldsOptions });
|
}
|
function updateAuxiliaryMessage(data) {
|
props.formConf.auxiliaryInfo = data;
|
}
|
function handleSelectChange(value, fieldPath, min) {
|
const keys = fieldPath.split('.');
|
let obj = props.formConf;
|
while (keys.length > 1) {
|
const key = keys.shift();
|
obj = obj[key];
|
}
|
const lastKey = keys[0];
|
obj[lastKey] = value || min;
|
}
|
function onFreeTypeChange() {
|
props.formConf.approvalNumber = props.formConf.approvalNumber || 1
|
props.updateBpmnProperties('elementBodyName', props.formConf.oneSelfEndApproval ? '审批人员自行结束' : `审批节点流转${props.formConf.approvalNumber}次结束`);
|
}
|
function onHasOpinionChange() {
|
if (!props.formConf.hasOpinion) props.formConf.opinionRequired = false;
|
}
|
</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-tab-pane :key="3" tab="表单权限" />
|
<a-tab-pane :key="4" tab="节点事件" />
|
<a-tab-pane :key="5" tab="流程通知" />
|
<a-tab-pane :key="6" tab="超时设置" />
|
</a-tabs>
|
<template v-if="activeKey !== 3">
|
<a-form :colon="false" :model="formConf" class="config-content" layout="vertical">
|
<template v-if="activeKey === 1">
|
<a-form-item label="结束条件">
|
<a-checkbox v-model:checked="formConf.oneSelfEndApproval" @change="onFreeTypeChange">允许审批人员自行结束审批</a-checkbox>
|
<div class="countersign-cell mt-[12px]">
|
<span class="inline-block w-[85px]">审批节点流转</span>
|
<a-input-number
|
v-model:value="formConf.approvalNumber"
|
@change="onFreeTypeChange()"
|
:min="1"
|
:max="50"
|
:precision="0"
|
class="!w-[90px]" />
|
<span>次，审批结束（不包含转审）</span>
|
</div>
|
</a-form-item>
|
<a-form-item label="审批意见">
|
<a-checkbox v-model:checked="formConf.hasOpinion" @change="onHasOpinionChange">启用审批意见</a-checkbox>
|
<div class="mt-[10px]" v-if="formConf.hasOpinion">
|
<a-checkbox v-model:checked="formConf.opinionRequired">审批意见必填</a-checkbox>
|
</div>
|
<div class="mt-[10px]">
|
<a-checkbox v-model:checked="formConf.hasSign">启用签名</a-checkbox>
|
</div>
|
<div class="mt-[10px]">
|
<a-checkbox v-model:checked="formConf.hasFile">启用附件</a-checkbox>
|
</div>
|
<div class="mt-[10px]">
|
<a-checkbox v-model:checked="formConf.hasApprovalField">启用拓展字段</a-checkbox>
|
</div>
|
<jnpf-select
|
v-if="formConf.hasApprovalField"
|
v-model:value="formConf.approvalField"
|
:options="getApprovalFieldOptions"
|
:field-names="{ label: 'fieldName', options: 'options1' }"
|
multiple
|
class="mt-[10px]" />
|
</a-form-item>
|
</template>
|
<template v-if="activeKey === 2">
|
<a-form-item label="处置操作">
|
<div class="btn-cell">
|
<a-checkbox v-model:checked="formConf.hasAuditBtn">同意</a-checkbox>
|
<a-input v-model:value="formConf.auditBtnText" placeholder="请输入" />
|
</div>
|
<div class="btn-cell">
|
<a-checkbox v-model:checked="formConf.hasRejectBtn">拒绝</a-checkbox>
|
<a-input v-model:value="formConf.rejectBtnText" placeholder="请输入" />
|
</div>
|
<div class="btn-cell">
|
<a-checkbox v-model:checked="formConf.hasBackBtn">退回</a-checkbox>
|
<a-input v-model:value="formConf.backBtnText" placeholder="请输入" />
|
</div>
|
<div class="btn-cell">
|
<a-checkbox v-model:checked="formConf.hasTransferBtn">转审</a-checkbox>
|
<a-input v-model:value="formConf.transferBtnText" placeholder="请输入" />
|
</div>
|
<div class="btn-cell">
|
<a-checkbox v-model:checked="formConf.hasAssistBtn">协办</a-checkbox>
|
<a-input v-model:value="formConf.assistBtnText" placeholder="请输入" />
|
</div>
|
<div class="btn-cell">
|
<a-checkbox v-model:checked="formConf.hasSaveAuditBtn">暂存</a-checkbox>
|
<a-input v-model:value="formConf.saveAuditBtnText" placeholder="请输入" />
|
</div>
|
</a-form-item>
|
<a-form-item v-if="formConf.hasBackBtn">
|
<template #label>退回设置<BasicHelp text="纯表单流程设置退回到发起节点无效" /></template>
|
<div class="form-item-content"></div>
|
<a-form-item label="被退回的节点重新提交时">
|
<a-radio-group v-model:value="formConf.backType" class="counterSign-radio" @change="onBackTypeChange">
|
<a-radio :value="1">重新审批<BasicHelp text="若流程为A->B->C，C退回至A，则C->A->B->C" /></a-radio>
|
<a-radio :value="2">从当前节点审批<BasicHelp text="若流程为A->B->C，C退回至A，则C->A->C" /></a-radio>
|
<a-radio :value="3">自定义审批<BasicHelp text="由用户选择重新审批或从当前节点审批" /></a-radio>
|
</a-radio-group>
|
</a-form-item>
|
<a-form-item label="设置退回到的节点" class="!mb-[0px]">
|
<jnpf-select v-model:value="formConf.backNodeCode" :options="backNodeCodeOptions" show-search />
|
</a-form-item>
|
</a-form-item>
|
<a-divider><text class="approver-text">自定义按钮区</text></a-divider>
|
<a-form-item class="custom-draggable-list">
|
<draggable v-model="formConf.customBtns" :animation="300" group="selectItem" handle=".option-drag" item-key="value">
|
<template #item="{ element: e, index }">
|
<div class="custom-draggable-item mb-[10px]">
|
<div class="custom-line-icon option-drag">
|
<i class="icon-ym icon-ym-darg"></i>
|
</div>
|
<a-input-group class="btn-cell !mb-0 ml-[10px] mr-[10px]" compact>
|
<a-input v-model:value="e.label" :maxlength="4" @blur="setDefaultValue({ element: e, index })" />
|
<a-button @click="editStyle(e, index)">事件</a-button>
|
</a-input-group>
|
<div class="close-btn custom-line-icon" @click="formConf.customBtns.splice(index, 1)">
|
<i class="icon-ym icon-ym-btn-clearn"></i>
|
</div>
|
</div>
|
</template>
|
</draggable>
|
<div class="add-btn" v-if="formConf.customBtns?.length < 5">
|
<a-button type="link" pre-icon="icon-ym icon-ym-btn-add" @click="addCustomBtn()">添加按钮</a-button>
|
</div>
|
</a-form-item>
|
<a-form-item label="节点打印">
|
<a-checkbox class="leading-[32px]" v-model:checked="formConf.printConfig.on">节点打印</a-checkbox>
|
<template v-if="formConf.printConfig.on">
|
<a-form-item label="请选择打印模板" class="!mt-[12px]">
|
<jnpf-tree-select
|
v-model:value="formConf.printConfig.printIds"
|
:options="printTplOptions"
|
multiple
|
last-level
|
:show-checked-strategy="TreeSelect.SHOW_CHILD" />
|
</a-form-item>
|
<a-form-item label="打印条件">
|
<jnpf-select v-model:value="formConf.printConfig.conditionType" :options="printConditionTypeOptions" />
|
</a-form-item>
|
<template v-if="formConf.printConfig.conditionType == 4">
|
<a-button @click="handlePrintConfig">设置打印条件</a-button>
|
<div class="conditions-content" v-if="formConf.printConfig.conditions.length">
|
<span @click="handlePrintConfig"> {{ getPrintConditionsContent }}</span>
|
<i class="icon-ym icon-ym-delete" @click="handlePrintConfigRemove"></i>
|
</div>
|
</template>
|
</template>
|
</a-form-item>
|
<a-form-item label="节点参数">
|
<div class="parameter-content">
|
<span>参数设置</span>
|
<i class="icon-ym icon-ym-btn-add" @click="handleAddParameter"></i>
|
</div>
|
<a-row :gutter="8" class="condition-main mt-[10px]" v-for="(item, index) in formConf.parameterList" :key="index">
|
<a-col :span="8" class="overflow-auto">
|
<jnpf-select
|
v-model:value="item.field"
|
:options="getParameterList"
|
:field-names="{ label: 'fieldName', value: 'fieldName', options: 'options1' }" />
|
</a-col>
|
<a-col :span="5" class="overflow-auto">
|
<jnpf-select v-model:value="item.fieldValueType" :options="conditionTypeOptions" @change="onFieldValueTypeChange(item)" />
|
</a-col>
|
<a-col :span="9" class="overflow-auto">
|
<jnpf-select
|
v-model:value="item.fieldValue"
|
:options="usedFormItems"
|
allow-clear
|
show-search
|
:field-names="{ options: 'options1' }"
|
class="w-100%"
|
@change="(val, data) => onFieldValueChange(item, val, data)"
|
v-if="item.fieldValueType === 1" />
|
<div class="w-100%" v-if="item.fieldValueType === 2">
|
<template v-if="item.jnpfKey === 'inputNumber'">
|
<a-input-number v-model:value="item.fieldValue" placeholder="请输入" :precision="item.precision" />
|
</template>
|
<template v-else-if="item.jnpfKey === 'calculate'">
|
<a-input-number v-model:value="item.fieldValue" placeholder="请输入" :precision="2" />
|
</template>
|
<template v-else-if="['rate', 'slider'].includes(item.jnpfKey)">
|
<a-input-number v-model:value="item.fieldValue" placeholder="请输入" />
|
</template>
|
<template v-else-if="item.jnpfKey === 'switch'">
|
<jnpf-switch v-model:value="item.fieldValue" />
|
</template>
|
<template v-else-if="item.jnpfKey === 'timePicker'">
|
<jnpf-time-picker v-model:value="item.fieldValue" :format="item.format || 'HH:mm:ss'" allow-clear />
|
</template>
|
<template v-else-if="['datePicker', 'createTime', 'modifyTime'].includes(item.jnpfKey)">
|
<jnpf-date-picker v-model:value="item.fieldValue" :format="item.format" allow-clear @change="onConditionDateChange($event, item)" />
|
</template>
|
<template v-else-if="['organizeSelect', 'currOrganize'].includes(item.jnpfKey)">
|
<jnpf-organize-select v-model:value="item.fieldValue" allow-clear @change="(val, data) => onConditionOrganizeChange(item, val, data)" />
|
</template>
|
<template v-else-if="item.jnpfKey === 'roleSelect'">
|
<jnpf-role-select v-model:value="item.fieldValue" allow-clear @change="(val, data) => onConditionObjChange(item, val, data)" />
|
</template>
|
<template v-else-if="item.jnpfKey === 'groupSelect'">
|
<jnpf-group-select v-model:value="item.fieldValue" allow-clear @change="(val, data) => onConditionObjChange(item, val, data)" />
|
</template>
|
<template v-else-if="['posSelect', 'currPosition'].includes(item.jnpfKey)">
|
<jnpf-pos-select v-model:value="item.fieldValue" allow-clear @change="(val, data) => onConditionOrganizeChange(item, val, data)" />
|
</template>
|
<template v-else-if="['userSelect', 'createUser', 'modifyUser'].includes(item.jnpfKey)">
|
<jnpf-user-select v-model:value="item.fieldValue" has-sys allow-clear @change="(val, data) => onConditionObjChange(item, val, data)" />
|
</template>
|
<template v-else-if="item.jnpfKey === 'usersSelect'">
|
<jnpf-users-select v-model:value="item.fieldValue" allow-clear @change="(val, data) => onConditionOrganizeChange(item, val, data)" />
|
</template>
|
<template v-else-if="item.jnpfKey === 'areaSelect'">
|
<jnpf-area-select
|
v-model:value="item.fieldValue"
|
:level="item.level"
|
allow-clear
|
@change="(val, data) => onConditionListChange(item, val, data)" />
|
</template>
|
<template v-else>
|
<a-input v-model:value="item.fieldValue" placeholder="请输入" allow-clear />
|
</template>
|
</div>
|
<jnpf-select
|
v-model:value="item.fieldValue"
|
:options="getSystemFieldOptions"
|
:field-names="{ label: 'label', options: 'options1' }"
|
allow-clear
|
class="w-100%"
|
v-else-if="item.fieldValueType === 3" />
|
</a-col>
|
<a-col :span="2" class="text-center">
|
<i class="icon-ym icon-ym-btn-clearn" @click="handleDelItem(index)"></i>
|
</a-col>
|
</a-row>
|
</a-form-item>
|
<a-form-item label="辅助信息">
|
<a-button pre-icon="icon-ym icon-ym-btn-add" @click="openAuxiliaryMessageModal">辅助信息设置</a-button>
|
</a-form-item>
|
</template>
|
<template v-if="activeKey === 4">
|
<a-form-item label="同意事件" class="normal-item-content">
|
<a-switch v-model:checked="formConf.approveFuncConfig.on" />
|
</a-form-item>
|
<a-form-item class="!-mt-[12px]" v-if="formConf.approveFuncConfig.on">
|
<div class="ant-form-item-label"><label class="ant-form-item-no-colon">数据接口</label></div>
|
<SelectInterface
|
:value="formConf.approveFuncConfig.interfaceId"
|
:title="formConf.approveFuncConfig.interfaceName"
|
:template-json="formConf.approveFuncConfig.templateJson"
|
:field-options="funcOptions"
|
:source-type="3"
|
:global-options="getParameterList"
|
show-system-full-label
|
is-flow
|
field-width="60px"
|
@change="(val, data) => onFuncChange(keyMap.approveFuncConfig, val, data)"
|
@field-change="onRelationFieldChange" />
|
<ValidateInterfaceConfig
|
:form-conf="formConf"
|
event-key="approveFuncConfig"
|
:func-options="funcOptions"
|
:global-options="getParameterList"
|
@field-change="onRelationFieldChange" />
|
</a-form-item>
|
<a-form-item label="拒绝事件" class="normal-item-content">
|
<a-switch v-model:checked="formConf.rejectFuncConfig.on" />
|
</a-form-item>
|
<a-form-item class="!-mt-[12px]" v-if="formConf.rejectFuncConfig.on">
|
<div class="ant-form-item-label"><label class="ant-form-item-no-colon">数据接口</label></div>
|
<SelectInterface
|
:value="formConf.rejectFuncConfig.interfaceId"
|
:title="formConf.rejectFuncConfig.interfaceName"
|
:template-json="formConf.rejectFuncConfig.templateJson"
|
:field-options="funcOptions"
|
:source-type="3"
|
show-system-full-label
|
:global-options="getParameterList"
|
is-flow
|
field-width="60px"
|
@change="(val, data) => onFuncChange(keyMap.rejectFuncConfig, val, data)"
|
@field-change="onRelationFieldChange" />
|
<ValidateInterfaceConfig
|
:form-conf="formConf"
|
event-key="rejectFuncConfig"
|
:func-options="funcOptions"
|
:global-options="getParameterList"
|
@field-change="onRelationFieldChange" />
|
</a-form-item>
|
<a-form-item label="退回事件" class="normal-item-content">
|
<a-switch v-model:checked="formConf.backFuncConfig.on" />
|
</a-form-item>
|
<a-form-item class="!-mt-[12px]" v-if="formConf.backFuncConfig.on">
|
<div class="ant-form-item-label"><label class="ant-form-item-no-colon">数据接口</label></div>
|
<SelectInterface
|
:value="formConf.backFuncConfig.interfaceId"
|
:title="formConf.backFuncConfig.interfaceName"
|
:template-json="formConf.backFuncConfig.templateJson"
|
:field-options="funcOptions"
|
:source-type="3"
|
show-system-full-label
|
:global-options="getParameterList"
|
is-flow
|
field-width="60px"
|
@change="(val, data) => onFuncChange(keyMap.backFuncConfig, val, data)"
|
@field-change="onRelationFieldChange" />
|
<ValidateInterfaceConfig
|
:form-conf="formConf"
|
event-key="backFuncConfig"
|
:func-options="funcOptions"
|
:global-options="getParameterList"
|
@field-change="onRelationFieldChange" />
|
</a-form-item>
|
<a-form-item label="撤回事件" class="normal-item-content">
|
<a-switch v-model:checked="formConf.recallFuncConfig.on" />
|
</a-form-item>
|
<a-form-item class="!-mt-[12px]" v-if="formConf.recallFuncConfig.on">
|
<div class="ant-form-item-label"><label class="ant-form-item-no-colon">数据接口</label></div>
|
<SelectInterface
|
:value="formConf.recallFuncConfig.interfaceId"
|
:title="formConf.recallFuncConfig.interfaceName"
|
:template-json="formConf.recallFuncConfig.templateJson"
|
:field-options="funcOptions"
|
:source-type="3"
|
show-system-full-label
|
:global-options="getParameterList"
|
is-flow
|
field-width="60px"
|
@change="(val, data) => onFuncChange(keyMap.recallFuncConfig, val, data)"
|
@field-change="onRelationFieldChange" />
|
<ValidateInterfaceConfig
|
:form-conf="formConf"
|
event-key="recallFuncConfig"
|
:func-options="funcOptions"
|
:global-options="getParameterList"
|
@field-change="onRelationFieldChange" />
|
</a-form-item>
|
</template>
|
<template v-if="activeKey === 5">
|
<a-alert message="自定义通知以“消息中心-发送配置”为主，请移步设置；关闭：表示不提醒，默认：表示站内提醒" type="warning" show-icon class="!mb-[10px]" />
|
<!-- 节点同意 -->
|
<NoticeConfig :notice-config="formConf.approveMsgConfig" type="approve" v-bind="getBindValue" />
|
<!-- 节点同意 -->
|
<NoticeConfig :notice-config="formConf.rejectMsgConfig" type="reject" v-bind="getBindValue" />
|
<!-- 节点退回 -->
|
<NoticeConfig :notice-config="formConf.backMsgConfig" type="back" v-bind="getBindValue" />
|
<!-- 节点超时 -->
|
<NoticeConfig :notice-config="formConf.overTimeMsgConfig" type="overTime" v-bind="getBindValue" />
|
<!-- 节点提醒 -->
|
<NoticeConfig :notice-config="formConf.noticeMsgConfig" type="notice" v-bind="getBindValue" />
|
</template>
|
<template v-if="activeKey === 6">
|
<a-form-item label="限时设置">
|
<jnpf-select v-model:value="formConf.timeLimitConfig.on" :options="nodeOverTimeMsgOptions" @change="onTimeLimitChange" />
|
<template v-if="formConf.timeLimitConfig.on === 1">
|
<a-form-item class="!mt-[12px]" label="节点处理截止时间">
|
<div class="flex items-center">
|
<jnpf-select v-model:value="formConf.timeLimitConfig.nodeLimit" :options="overTimeOptions" />
|
<span class="!ml-[10px] flex-shrink-0">开始</span>
|
</div>
|
<div class="mt-[10px]" v-if="formConf.timeLimitConfig.nodeLimit === 2">
|
<jnpf-select
|
v-model:value="formConf.timeLimitConfig.formField"
|
:options="usedFormItems"
|
:field-names="{ options: 'options1' }"
|
show-search
|
allow-clear />
|
</div>
|
<div class="countersign-cell mt-[12px]">
|
<span class="inline-block w-[85px]">流程到达节点</span>
|
<a-input-number
|
v-model:value="formConf.timeLimitConfig.duringDeal"
|
@change="handleSelectChange($event, 'timeLimitConfig.duringDeal', 1)"
|
:min="1"
|
:precision="0"
|
class="!w-[90px]" />
|
<span>小时后，视为超时</span>
|
</div>
|
</a-form-item>
|
<a-form-item label="限时提醒规则" class="!mt-[12px]">
|
<jnpf-select v-model:value="formConf.noticeConfig.on" :options="nodeOverTimeMsgOptions" />
|
</a-form-item>
|
<a-form-item v-if="formConf.noticeConfig.on === 1">
|
<div class="countersign-cell">
|
<span class="inline-block w-[85px]">流程到达节点</span>
|
<a-input-number
|
v-model:value="formConf.noticeConfig.firstOver"
|
:min="1"
|
@change="handleSelectChange($event, 'noticeConfig.firstOver', 1)"
|
:precision="0"
|
class="!w-[90px]" />
|
<span>小时，开始提醒通知</span>
|
</div>
|
<div class="countersign-cell mt-[12px]">
|
<span class="inline-block w-[85px]">每间隔</span>
|
<a-input-number
|
v-model:value="formConf.noticeConfig.overTimeDuring"
|
@change="handleSelectChange($event, 'noticeConfig.overTimeDuring', 1)"
|
:min="1"
|
:precision="0"
|
class="!w-[90px]" />
|
<span>小时，提醒通知一次</span>
|
</div>
|
<div class="ant-form-item-label !mt-[12px]"><label class="ant-form-item-no-colon">提醒事务</label></div>
|
<a-row class="block leading-[32px]">
|
<a-checkbox v-model:checked="formConf.noticeConfig.overNotice">
|
提醒通知<BasicHelp text="勾选后才能进行提醒消息发送（站内信系统默认发送，第三方超时消息需在节点通知内配置）" />
|
</a-checkbox>
|
</a-row>
|
<a-row class="block leading-[32px]" v-if="false">
|
<a-checkbox v-model:checked="formConf.noticeConfig.overEvent">提醒事件<BasicHelp text="请在节点事件内配置提醒事件" /></a-checkbox>
|
</a-row>
|
<div class="countersign-cell mt-[12px]" v-if="formConf.noticeConfig.overEvent">
|
<span class="inline-block w-[85px]">在提醒通知第</span>
|
<a-input-number
|
v-model:value="formConf.noticeConfig.overEventTime"
|
@change="handleSelectChange($event, 'noticeConfig.overEventTime', 1)"
|
:min="1"
|
:precision="0"
|
class="!w-[90px]" />
|
<span>次时，执行提醒事件</span>
|
</div>
|
</a-form-item>
|
</template>
|
</a-form-item>
|
<a-form-item label="超时设置">
|
<jnpf-select v-model:value="formConf.overTimeConfig.on" :options="nodeOverTimeMsgOptions" :disabled="formConf.timeLimitConfig.on == 0" />
|
</a-form-item>
|
<a-form-item v-if="formConf.overTimeConfig.on === 1">
|
<div class="countersign-cell">
|
<span class="inline-block w-[85px]">超时</span>
|
<a-input-number
|
v-model:value="formConf.overTimeConfig.firstOver"
|
@change="handleSelectChange($event, 'overTimeConfig.firstOver', 0)"
|
:min="0"
|
:precision="0"
|
class="!w-[90px]" />
|
<span>小时，开始超时通知</span>
|
</div>
|
<div class="countersign-cell mt-[12px]">
|
<span class="inline-block w-[85px]">每间隔</span>
|
<a-input-number
|
v-model:value="formConf.overTimeConfig.overTimeDuring"
|
@change="handleSelectChange($event, 'overTimeConfig.overTimeDuring', 1)"
|
:min="1"
|
:precision="0"
|
class="!w-[90px]" />
|
<span>小时，超时通知一次</span>
|
</div>
|
<div class="ant-form-item-label !mt-[12px]"><label class="ant-form-item-no-colon">超时事务</label></div>
|
<a-row class="block leading-[32px]">
|
<a-checkbox v-model:checked="formConf.overTimeConfig.overNotice">
|
超时通知<BasicHelp text="勾选后才能进行提醒消息发送（站内信系统默认发送，第三方超时消息需在节点通知内配置）" />
|
</a-checkbox>
|
</a-row>
|
<a-row class="block leading-[32px]" v-if="false">
|
<a-checkbox v-model:checked="formConf.overTimeConfig.overEvent">超时事件<BasicHelp text="请在节点事件内配置提醒事件" /></a-checkbox>
|
</a-row>
|
<div class="countersign-cell" v-if="formConf.overTimeConfig.overEvent">
|
<span class="inline-block w-[85px]">在超时通知</span>
|
<a-input-number
|
v-model:value="formConf.overTimeConfig.overEventTime"
|
@change="handleSelectChange($event, 'overTimeConfig.overEventTime', 1)"
|
:min="1"
|
:precision="0"
|
class="!w-[90px]" />
|
<span>次时，执行超时事件</span>
|
</div>
|
<a-row class="block leading-[32px]">
|
<a-checkbox v-model:checked="formConf.overTimeConfig.overAutoTransfer" @change="onOverAutoTransferChange(formConf.overTimeConfig.overAutoTransfer)">
|
超时自动转审
|
</a-checkbox>
|
</a-row>
|
<template v-if="formConf.overTimeConfig.overAutoTransfer">
|
<div class="countersign-cell">
|
<span class="inline-block w-[85px]">在超时通知</span>
|
<a-input-number
|
v-model:value="formConf.overTimeConfig.overAutoTransferTime"
|
@change="handleSelectChange($event, 'overTimeConfig.overAutoTransferTime', 1)"
|
:min="1"
|
:precision="0"
|
class="!w-[90px]" />
|
<span>次，执行超时自动转审</span>
|
</div>
|
<div class="transfer-tip !mt-[12px]">转审人设置</div>
|
<jnpf-radio v-model:value="formConf.overTimeConfig.overTimeType" :options="transferTypeOptions" />
|
<div v-if="formConf.overTimeConfig.overTimeType === 6" class="common-tip !mt-[12px]">指定转审人处理审批单</div>
|
<div v-if="formConf.overTimeConfig.overTimeType === 9" class="common-tip !mt-[12px]">从目标接口中获取审批人</div>
|
<div v-if="formConf.overTimeConfig.overTimeType === 11" class="common-tip !mt-[12px]">选择与超时审批人相关的设置</div>
|
</template>
|
</a-form-item>
|
<template v-if="formConf.overTimeConfig.overAutoTransfer && formConf.overTimeConfig.on === 1">
|
<a-form-item v-if="formConf.overTimeConfig.overTimeType === 6">
|
<jnpf-user-select v-model:value="formConf.overTimeConfig.reApprovers" button-type="button" modal-title="添加转审人" />
|
</a-form-item>
|
<a-form-item class="!mt-[10px]" v-if="formConf.overTimeConfig.overTimeType === 11">
|
<jnpf-select v-model:value="formConf.overTimeConfig.overTimeExtraRule" :options="overTimeRuleOptions" />
|
</a-form-item>
|
<a-form-item v-if="formConf.overTimeConfig.overTimeType === 9">
|
<div class="ant-form-item-label">
|
<label class="ant-form-item-no-colon">数据接口</label>
|
<BasicHelp text="请求自带参数：taskId、taskNodeId，返回结构：JSON对象{"'handleId'":"'id1,id2'"}" />
|
</div>
|
<InterfaceModal
|
:value="formConf.overTimeConfig.interfaceId"
|
:title="formConf.overTimeConfig.interfaceName"
|
@change="onOverTimeConfigInterfaceChange" />
|
<template v-if="formConf.overTimeConfig.templateJson?.length">
|
<div class="ant-form-item-label !mt-[12px]"><label class="ant-form-item-no-colon">参数设置</label></div>
|
<SelectInterfaceBtn
|
:template-json="formConf.overTimeConfig.templateJson"
|
:field-options="funcOptions"
|
:global-options="getParameterList"
|
is-flow
|
show-field-full-label
|
show-system-full-label
|
@field-change="onRelationFieldChange" />
|
</template>
|
</a-form-item>
|
</template>
|
</template>
|
</a-form>
|
</template>
|
<!-- 表单权限 -->
|
<template v-else>
|
<a-table :data-source="formConf.formOperates" :columns="formOperatesColumns" size="small" :pagination="false" :scroll="{ y: 'calc(100vh - 197px)' }">
|
<template #headerCell="{ column }">
|
<template v-if="column.key === 'write'">
|
<a-checkbox v-model:checked="readAllChecked" :indeterminate="isReadIndeterminate" @change="handleCheckAllChange($event, 1)">查看</a-checkbox>
|
<a-checkbox v-model:checked="writeAllChecked" :indeterminate="isWriteIndeterminate" @change="handleCheckAllChange($event, 2)">编辑</a-checkbox>
|
<a-checkbox v-model:checked="requiredAllChecked" :indeterminate="isRequiredIndeterminate" @change="handleCheckAllChange($event, 3)">
|
必填
|
</a-checkbox>
|
</template>
|
</template>
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'write'">
|
<a-checkbox v-model:checked="record.read" @change="handleCheckedChange">查看</a-checkbox>
|
<a-checkbox v-model:checked="record.write" @change="handleCheckedChange">编辑</a-checkbox>
|
<a-checkbox v-model:checked="record.required" :disabled="record.requiredDisabled" @change="handleCheckedChange">必填</a-checkbox>
|
</template>
|
</template>
|
</a-table>
|
</template>
|
<ConditionModal @register="registerConditionModal" @confirm="updatePrintConfig" />
|
<StyleScript type="workflow" @register="registerStyleScriptModal" @confirm="updateStyleScript" />
|
<AuxiliaryMessageModal @register="registerAuxiliaryMessageModal" @confirm="updateAuxiliaryMessage" />
|
</template>
|
