---初始化后台管理web页面项目

src/views/dataconfig/liteFlow/components/liteFLowModal.vue

@@ -0,0 +1,142 @@
+<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>