<script lang="ts" setup>
|
import type { FormInstance } from 'ant-design-vue';
|
|
import { computed, nextTick, reactive, ref, toRefs, unref } from 'vue';
|
|
import { useAttrs, useMessage } from '@jnpf/hooks';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
import { formValidate } from '@jnpf/utils';
|
|
import { LoadingOutlined } from '@ant-design/icons-vue';
|
|
import { create, getAiInfo } from '#/api/workFlow/template';
|
import { colorPredefine } from '#/utils/constants';
|
|
interface State {
|
dataForm: any;
|
content: string;
|
loading: boolean;
|
categoryOptions: any[];
|
showForm: boolean;
|
}
|
|
const emit = defineEmits(['register', 'reload']);
|
const { createMessage } = useMessage();
|
const [registerModal, { changeOkLoading, closeModal }] = useModalInner(init);
|
const formElRef = ref<FormInstance>();
|
const state = reactive<State>({
|
dataForm: {},
|
content: '',
|
loading: false,
|
categoryOptions: [],
|
showForm: false,
|
});
|
const { dataForm, content, loading, categoryOptions, showForm } = toRefs(state);
|
const attrs = useAttrs({ excludeDefaultKeys: false });
|
const rules = {
|
fullName: [{ required: true, message: '必填', trigger: 'blur' }],
|
enCode: [{ validator: formValidate('enCode'), trigger: 'blur' }],
|
category: [{ required: true, message: '必填', trigger: 'change' }],
|
icon: [{ required: true, trigger: 'change', message: '必填' }],
|
};
|
const showTypeOptions = [
|
{ fullName: '都显示', id: 0 },
|
{ fullName: '仅发起流程显示', id: 1 },
|
{ fullName: '仅菜单显示', id: 2 },
|
];
|
const typeOptions = [{ fullName: '标准流程', id: 0 }];
|
|
const getBindValue = computed(() => {
|
const attr: any = {
|
...unref(attrs),
|
title: 'AI建流程',
|
okButtonProps: {
|
disabled: state.loading,
|
},
|
};
|
if (!state.showForm) attr.footer = null;
|
return attr;
|
});
|
|
function init(data) {
|
state.categoryOptions = data.categoryList || [];
|
resetData();
|
nextTick(() => {
|
formElRef.value?.clearValidate();
|
});
|
}
|
function resetData() {
|
state.content = '';
|
state.loading = false;
|
state.showForm = false;
|
state.dataForm = {};
|
}
|
function handleAiSubmit() {
|
if (!state.content) return;
|
state.loading = true;
|
getAiInfo({ keyword: state.content })
|
.then((res) => {
|
state.showForm = true;
|
state.loading = false;
|
state.dataForm = { ...state.dataForm, ...res.data };
|
})
|
.catch(() => {
|
state.loading = false;
|
});
|
}
|
async function handleSubmit() {
|
try {
|
const values = await formElRef.value?.validate();
|
if (!values) return;
|
changeOkLoading(true);
|
create(state.dataForm)
|
.then((res) => {
|
changeOkLoading(false);
|
closeModal();
|
createMessage.success(res.msg);
|
emit('reload', { ...state.dataForm, id: res.data });
|
})
|
.catch(() => {
|
changeOkLoading(false);
|
});
|
} catch {}
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="getBindValue" @register="registerModal" @ok="handleSubmit" class="jnpf-ai-create-modal" destroy-on-close>
|
<div class="text-tips">通过AI生成流程 ，根据文字描述智能生成推荐流程</div>
|
<div class="ai-textarea">
|
<jnpf-textarea v-model:value="content" placeholder="输入你的需求描述" :maxlength="100" />
|
<div class="ai-button">
|
<LoadingOutlined class="mr-[5px]" v-if="loading" />
|
<i class="ym-custom ym-custom-send cursor-pointer" :class="{ 'icon-selected': content }" v-else @click="handleAiSubmit"></i>
|
</div>
|
</div>
|
<a-form :colon="false" :label-col="{ style: { width: '77px' } }" :model="dataForm" :rules="rules" ref="formElRef" v-if="showForm">
|
<div class="text-tips">流程已生成 ，请继续确认流程名称、编码等配置</div>
|
<a-form-item label="流程类型" name="type">
|
<jnpf-radio v-model:value="dataForm.type" option-type="button" button-style="solid" :options="typeOptions" />
|
</a-form-item>
|
<a-form-item label="流程名称" name="fullName">
|
<jnpf-input v-model:value="dataForm.fullName" placeholder="请输入" :maxlength="100" />
|
</a-form-item>
|
<a-form-item label="流程编码" name="enCode">
|
<jnpf-input v-model:value="dataForm.enCode" placeholder="请输入" :maxlength="50" />
|
</a-form-item>
|
<a-form-item label="流程分类" name="category">
|
<jnpf-select v-model:value="dataForm.category" :options="categoryOptions" show-search />
|
</a-form-item>
|
<a-form-item label="流程图标" name="icon">
|
<div class="flex">
|
<div class="mr-[10px] flex-1">
|
<jnpf-icon-picker v-model:value="dataForm.icon" placeholder="请选择" />
|
</div>
|
<a-form-item-rest>
|
<jnpf-color-picker v-model:value="dataForm.iconBackground" size="small" :predefine="colorPredefine" />
|
</a-form-item-rest>
|
</div>
|
</a-form-item>
|
<a-form-item label="显示位置" name="showType">
|
<jnpf-radio v-model:value="dataForm.showType" option-type="button" button-style="solid" :options="showTypeOptions" />
|
</a-form-item>
|
</a-form>
|
</BasicModal>
|
</template>
|
