<script lang="ts" setup>
|
import { computed, reactive, unref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicForm, useForm } from '@jnpf/ui/form';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import dayjs, { Dayjs } from 'dayjs';
|
|
import { getReceiveUserList } from '#/api/permission/user';
|
import { create, getInfo, update } from '#/api/workFlow/flowDelegate';
|
import { QueryUserSelect } from '#/components/CommonModal';
|
import { $t } from '#/locales';
|
import { useBaseStore } from '#/store';
|
import FlowSelect from '#/views/workFlow/components/FlowSelect.vue';
|
|
const emit = defineEmits(['register', 'reload']);
|
const disabledDate = (current: Dayjs) => current && current < dayjs().endOf('day').subtract(1, 'day');
|
const checkStartTime = async (_rule, value) => {
|
if (!getFieldsValue().endTime) return;
|
if (getFieldsValue().endTime < value) throw new Error('开始时间应该小于结束时间');
|
validate(['endTime']);
|
};
|
const checkEndTime = async (_rule, value) => {
|
if (!getFieldsValue().startTime) return;
|
if (getFieldsValue().startTime > value) throw new Error('结束时间应该大于开始时间');
|
};
|
const [registerForm, { setFieldsValue, resetFields, getFieldsValue, validate }] = useForm({
|
labelWidth: 90,
|
});
|
const [registerModal, { closeModal, changeLoading, changeOkLoading }] = useModalInner(init);
|
const state = reactive({
|
dataForm: {
|
id: '',
|
toUserName: '',
|
toUserId: [],
|
userName: '',
|
type: 0,
|
flowId: '',
|
flowName: '全部流程',
|
},
|
flowId: [],
|
});
|
const { createMessage } = useMessage();
|
const baseStore = useBaseStore();
|
|
const getSysConfig = computed(() => baseStore.getSysConfig);
|
const getTitle = computed(() => (state.dataForm.id ? $t('common.editText') : $t('common.addText')));
|
const getSchemas = computed(() => {
|
const title = state.dataForm.type === 0 ? '委托' : '代理';
|
const schemas: any[] = [
|
{
|
field: 'toUserId',
|
label: state.dataForm.type === 0 ? '受委托人' : '代理人',
|
component: 'UserSelect',
|
slot: 'toUserId',
|
rules: [{ required: true, trigger: 'blur', message: '必填', type: 'array' }],
|
},
|
{
|
field: 'flowId',
|
label: `${title}流程`,
|
helpMessage: `未选择${title}流程默认全部流程进行${title}`,
|
component: 'Input',
|
slot: 'flowId',
|
},
|
{
|
field: 'startTime',
|
label: '开始时间',
|
component: 'DatePicker',
|
componentProps: { format: 'YYYY-MM-DD HH:mm:ss', disabledDate },
|
rules: [
|
{ required: true, message: '必填', trigger: 'change' },
|
{ validator: checkStartTime, trigger: 'change' },
|
],
|
},
|
{
|
field: 'endTime',
|
label: '结束时间',
|
component: 'DatePicker',
|
componentProps: { format: 'YYYY-MM-DD HH:mm:ss', disabledDate },
|
rules: [
|
{ required: true, message: '必填', trigger: 'change' },
|
{ validator: checkEndTime, trigger: 'change' },
|
],
|
},
|
{
|
field: 'description',
|
label: `${title}说明`,
|
component: 'Textarea',
|
componentProps: { placeholder: '请输入' },
|
},
|
];
|
return schemas;
|
});
|
|
function init(data) {
|
changeLoading(true);
|
resetFields();
|
state.flowId = [];
|
state.dataForm = {
|
id: '',
|
toUserName: '',
|
toUserId: [],
|
userName: '',
|
type: 0,
|
flowId: '',
|
flowName: '全部流程',
|
};
|
state.dataForm.type = data.type || 0;
|
state.dataForm.id = data.id;
|
if (state.dataForm.id) {
|
getInfo(state.dataForm.id).then((res) => {
|
setFieldsValue(res.data);
|
state.dataForm = res.data;
|
(state.flowId as string[]) = state.dataForm.flowId ? state.dataForm.flowId.split(',') : [];
|
changeLoading(false);
|
});
|
} else {
|
changeLoading(false);
|
}
|
}
|
function onToUserIdChange(id, data) {
|
if (!id) {
|
state.dataForm.toUserId = [];
|
state.dataForm.toUserName = '';
|
return;
|
}
|
state.dataForm.toUserId = id;
|
state.dataForm.toUserName = data.map((o) => o.fullName).join(',');
|
}
|
function onFlowIdChange(_ids, data) {
|
if (!data || !data.length) return (state.dataForm.flowName = '全部流程');
|
state.dataForm.flowName = data.map((o) => `${o.fullName}/${o.enCode}`).join(',');
|
}
|
function getTypeValue(type) {
|
return unref(getSysConfig)[type === 0 ? 'delegateScope' : 'proxyScope'];
|
}
|
async function handleSubmit() {
|
const values = await validate();
|
if (!values) return;
|
changeOkLoading(true);
|
const query = {
|
...values,
|
type: state.dataForm.type,
|
flowId: state.flowId.join(','),
|
flowName: state.dataForm.flowName,
|
userName: state.dataForm.userName,
|
toUserName: state.dataForm.toUserName,
|
};
|
const formMethod = state.dataForm.id ? update : create;
|
formMethod(query)
|
.then((res) => {
|
createMessage.success(res.msg);
|
changeOkLoading(false);
|
closeModal();
|
emit('reload');
|
})
|
.catch(() => {
|
changeOkLoading(false);
|
});
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
|
<BasicForm @register="registerForm" :schemas="getSchemas">
|
<template #toUserId="{ model, field }">
|
<JnpfUserSelect v-model:value="model[field]" multiple @change="onToUserIdChange" v-if="getTypeValue(state.dataForm.type) === 1" />
|
<QueryUserSelect
|
v-model:value="model[field]"
|
multiple
|
@change="onToUserIdChange"
|
:query="{ type: getTypeValue(state.dataForm.type) }"
|
:api="getReceiveUserList"
|
v-else />
|
</template>
|
<template #flowId>
|
<FlowSelect v-model:value="state.flowId" popup-title="委托流程" :entrust-type="state.dataForm.type" placeholder="全部流程" @change="onFlowIdChange" />
|
</template>
|
</BasicForm>
|
</BasicModal>
|
</template>
|
