<script lang="ts" setup>
|
import type { FormInstance } from 'ant-design-vue';
|
|
import { reactive, ref, toRefs } from 'vue';
|
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
import { cloneDeep } from '@jnpf/utils';
|
|
interface State {
|
dataForm: any;
|
loading: boolean;
|
oneSelfEndApproval: boolean;
|
}
|
|
const emit = defineEmits(['register', 'confirm']);
|
|
const formElRef = ref<FormInstance>();
|
const defaultDataForm = {
|
isEnd: false,
|
approvers: [],
|
counterSign: 0,
|
counterSignConfig: {
|
auditType: 1, // 1:按百分比 2:按人数
|
auditRatio: 100,
|
auditNum: 1,
|
rejectType: 0,
|
rejectRatio: 10,
|
rejectNum: 1,
|
calculateType: 1, // 会签计算规则 1：实时计算 2：延后计算
|
},
|
};
|
const state = reactive<State>({
|
dataForm: cloneDeep(defaultDataForm),
|
loading: false,
|
oneSelfEndApproval: false,
|
});
|
const { dataForm, loading } = toRefs(state);
|
const [registerModal, { changeOkLoading }] = useModalInner(init);
|
const auditTypeOptions = [
|
{ id: 1, fullName: '按百分比' },
|
{ id: 2, fullName: '按人数' },
|
];
|
const calculateTypeOptions = [
|
{ id: 1, fullName: '实时计算' },
|
{ id: 2, fullName: '延后计算' },
|
];
|
const rejectTypeOptions = [{ id: 0, fullName: '无' }, ...auditTypeOptions];
|
function init(data) {
|
state.dataForm = cloneDeep(defaultDataForm);
|
state.oneSelfEndApproval = data.oneSelfEndApproval;
|
}
|
async function handleSubmit() {
|
try {
|
const values = await formElRef.value?.validate();
|
if (!values) return;
|
changeOkLoading(true);
|
emit('confirm', {
|
freeFlowConfig: dataForm.value,
|
});
|
} catch {}
|
}
|
function onClose() {
|
state.dataForm = cloneDeep(defaultDataForm);
|
}
|
function onSignNumberChange(val, key) {
|
if (val) return;
|
dataForm.value.formConf.counterSignConfig[key] = 1;
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" title="下个审批人设置" @ok="handleSubmit" :min-height="52" destroy-on-close @cancel="onClose">
|
<a-form :colon="false" :label-col="{ style: { width: '80px' } }" class="free-modal-form" :model="dataForm" ref="formElRef" v-if="!loading">
|
<a-form-item v-if="state.oneSelfEndApproval" class="ml-[80px] flex">
|
<a-radio-group v-model:value="dataForm.isEnd" button-style="solid">
|
<a-radio-button class="free-radio-label" :value="false">指定成员</a-radio-button>
|
<a-radio-button class="free-radio-label" :value="true">直接结束审批</a-radio-button>
|
</a-radio-group>
|
</a-form-item>
|
<template v-if="!dataForm.isEnd">
|
<a-form-item label="审批人" name="approvers" :rules="[{ required: true, message: '请选择审批人' }]">
|
<jnpf-user-select v-model:value="dataForm.approvers" multiple allow-clear />
|
</a-form-item>
|
<a-form-item label="审批方式" name="counterSign">
|
<a-radio-group v-model:value="dataForm.counterSign">
|
<a-radio :value="0">或签</a-radio>
|
<a-radio :value="1">会签</a-radio>
|
<a-radio :value="2">依次审批</a-radio>
|
</a-radio-group>
|
</a-form-item>
|
<a-form-item v-if="dataForm.counterSign == 1">
|
<div class="countersign-label mb-[10px]">设置会签流转规则</div>
|
<div class="countersign-cell mb-[10px]">
|
<span class="inline-block w-[72px]">同意规则</span>
|
<jnpf-select v-model:value="dataForm.counterSignConfig.auditType" :options="auditTypeOptions" class="!w-[120px]" />
|
<a-select v-model:value="dataForm.counterSignConfig.auditRatio" class="!w-[120px]" v-if="dataForm.counterSignConfig.auditType === 1">
|
<a-select-option v-for="item in 10" :key="item" :value="item * 10">{{ `${item * 10}%` }}</a-select-option>
|
</a-select>
|
<a-input-number
|
class="!w-[120px]"
|
v-model:value="dataForm.counterSignConfig.auditNum"
|
placeholder="请输入"
|
:precision="0"
|
:min="1"
|
@change="onSignNumberChange($event, 'auditNum')"
|
v-if="dataForm.counterSignConfig.auditType === 2" />
|
<span class="ml-[8px]">进入下一节点</span>
|
</div>
|
<div class="countersign-cell">
|
<span class="inline-block w-[72px]">不同意规则</span>
|
<jnpf-select v-model:value="dataForm.counterSignConfig.rejectType" :options="rejectTypeOptions" class="!w-[120px]" />
|
<a-select v-model:value="dataForm.counterSignConfig.rejectRatio" class="!w-[120px]" v-if="dataForm.counterSignConfig.rejectType === 1">
|
<a-select-option v-for="item in 10" :key="item" :value="item * 10">{{ `${item * 10}%` }}</a-select-option>
|
</a-select>
|
<a-input-number
|
class="!w-[120px]"
|
v-model:value="dataForm.counterSignConfig.rejectNum"
|
placeholder="请输入"
|
:precision="0"
|
:min="1"
|
@change="onSignNumberChange($event, 'rejectNum')"
|
v-if="dataForm.counterSignConfig.rejectType === 2" />
|
<span class="ml-[8px]" v-if="dataForm.counterSignConfig.rejectType">时拒绝</span>
|
</div>
|
</a-form-item>
|
<a-form-item v-if="dataForm.counterSign == 1">
|
<template #label>计算方式<BasicHelp :text="['实时计算：审批过程中实时进行规则判断', '延后计算：在所有审批人审批完成后进行规则判断']" /></template>
|
<jnpf-radio v-model:value="dataForm.counterSignConfig.calculateType" :options="calculateTypeOptions" />
|
</a-form-item>
|
</template>
|
</a-form>
|
</BasicModal>
|
</template>
|
