143 lines
3.7 KiB
Vue
143 lines
3.7 KiB
Vue
<template>
|
||
<BasicModal
|
||
v-bind="$attrs"
|
||
destroyOnClose
|
||
@register="registerDrawer"
|
||
showFooter
|
||
:title="getTitle"
|
||
width="40%"
|
||
@ok="handleSubmit"
|
||
>
|
||
<BasicForm @register="registerForm" :style="{ 'margin-right': '10px' }" />
|
||
</BasicModal>
|
||
</template>
|
||
<script lang="ts">
|
||
import { defineComponent, ref, computed, unref } from 'vue';
|
||
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
|
||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||
import { useMessage } from '/@/hooks/web/useMessage';
|
||
|
||
import { addLiteflow, updateLiteflow } from '/@/api/liteflow/index';
|
||
import { useI18n } from '/@/hooks/web/useI18n';
|
||
const { t } = useI18n();
|
||
export const formSchema: FormSchema[] = [
|
||
{
|
||
field: 'applicationName',
|
||
label: t('应用名称'),
|
||
component: 'Input',
|
||
required: true,
|
||
componentProps: {
|
||
placeholder: t('请输入应用名称'),
|
||
},
|
||
colProps: { lg: 24, md: 24 },
|
||
},
|
||
|
||
{
|
||
field: 'chainName',
|
||
label: t('规则名称'),
|
||
component: 'Input',
|
||
required: true,
|
||
componentProps: {
|
||
placeholder: t('请输入规则名称'),
|
||
},
|
||
colProps: { lg: 24, md: 24 },
|
||
},
|
||
{
|
||
field: 'elData',
|
||
label: t('执行规则'),
|
||
component: 'CodeTextArea',
|
||
required: true,
|
||
componentProps: {
|
||
rows: 8,
|
||
placeholder: t('请输入执行规则，例如：THEN(a,WHEN(b, c, d),e);'),
|
||
},
|
||
colProps: { lg: 24, md: 24 },
|
||
},
|
||
{
|
||
field: 'chainDesc',
|
||
label: t('备注'),
|
||
component: 'InputTextArea',
|
||
componentProps: {
|
||
placeholder: t('请输入备注'),
|
||
},
|
||
colProps: { lg: 24, md: 24 },
|
||
},
|
||
];
|
||
|
||
export default defineComponent({
|
||
name: 'LogModal',
|
||
components: {
|
||
BasicModal,
|
||
BasicForm,
|
||
},
|
||
emits: ['success', 'register'],
|
||
setup(_, { emit }) {
|
||
const isUpdate = ref(true);
|
||
const { notification } = useMessage();
|
||
const rowId = ref('');
|
||
|
||
const { t } = useI18n();
|
||
|
||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
|
||
labelWidth: 100,
|
||
schemas: formSchema,
|
||
showActionButtonGroup: false,
|
||
baseColProps: { lg: 12, md: 24 },
|
||
});
|
||
|
||
const [registerDrawer, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||
resetFields();
|
||
setModalProps({ confirmLoading: false });
|
||
isUpdate.value = !!data?.isUpdate;
|
||
|
||
if (unref(isUpdate)) {
|
||
rowId.value = data.record.id;
|
||
|
||
setFieldsValue({
|
||
...data.record,
|
||
});
|
||
}
|
||
});
|
||
|
||
const getTitle = computed(() => (!unref(isUpdate) ? t('新增规则') : t('编辑规则')));
|
||
|
||
async function handleSubmit() {
|
||
try {
|
||
const values = await validate();
|
||
|
||
setModalProps({ confirmLoading: true });
|
||
// TODO custom api
|
||
if (!unref(isUpdate)) {
|
||
//false 新增
|
||
await addLiteflow(values);
|
||
notification.success({
|
||
message: t('提示'),
|
||
description: t('新增成功'),
|
||
}); //提示消息
|
||
} else {
|
||
values.id = rowId.value;
|
||
await updateLiteflow(values);
|
||
notification.success({
|
||
message: t('提示'),
|
||
description: t('编辑成功'),
|
||
}); //提示消息
|
||
}
|
||
closeModal();
|
||
emit('success');
|
||
} catch (error) {
|
||
setModalProps({ confirmLoading: false });
|
||
}
|
||
}
|
||
|
||
return {
|
||
registerDrawer,
|
||
registerForm,
|
||
getTitle,
|
||
handleSubmit,
|
||
t,
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style scoped></style>
|