一、MessageHub
请求出现异常时，提供”点对点“的通讯能力
二、何时使用
错误提示是用户体验中特别重要的组成部分，大部分的错误体现在整页级别，字段级别，按钮级别。友好的错误提示应该是怎么样的呢？我们假设他是这样的
- 与用户操作精密契合
- 当字段输入异常时，错误展示在错误框底部
- 按钮触发服务时异常，错误展示在按钮底部
- 区分不同的类型
- 错误
- 成功
- 警告
- 提示
- 调试
- 简洁易懂的错误信息
在oinone平台中，我们怎么做到友好的错误提示呢？接下来介绍我们的MessageHub，它为自定义错误提示提供无限的可能。
三、如何使用
订阅
import { useMessageHub, ILevel } from "@kunlun/dependencies"
const messageHub = useMessageHub('当前视图的唯一标识');
/* 订阅错误信息 */
messageHub.subscribe((errorResult) => {
console.log(errorResult)
})
/* 订阅成功信息 */
messageHub.subscribe((errorResult) => {
console.log(errorResult)
}, ILevel.SUCCESS)销毁
/**
* 在适当的时机销毁它
* 如果页面逻辑运行时都不需要销毁，在页面destroyed是一定要销毁，重要！！！
*/
messageHub.unsubscribe()四、实战
让我们把3.5.7.5【自定义视图-表单】一文中的自定义表单进行改造，加入我们的messageHub，模拟在表单提交时，后端报错信息在字段下方给予提示。
Step1 （后端）重写PetType的创建函数
重写PetType的创建函数，在创建逻辑中通过MessageHub返回错误信息，返回错误信息的同时要设置paths信息方便前端处理
@Action.Advanced(name = FunctionConstants.create, managed = true)
@Action(displayName = "确定", summary = "创建", bindingType = ViewTypeEnum.FORM)
@Function(name = FunctionConstants.create)
@Function.fun(FunctionConstants.create)
public PetType create(PetType data){
List<Object> paths = new ArrayList<>();
paths.add("demo.PetType");
paths.add("kind");
PamirsSession.getMessageHub().msg(new Message().msg("kind error").setPath(paths).setLevel(InformationLevelEnum.ERROR).setErrorType(ErrorTypeEnum.BIZ_ERROR));
List<Object> paths2 = new ArrayList<>();
paths2.add("demo.PetType");
paths2.add("name");
PamirsSession.getMessageHub().msg(new Message().msg("name error").setPath(paths2).setLevel(InformationLevelEnum.ERROR).setErrorType(ErrorTypeEnum.BIZ_ERROR));
// data.create();
return data;
}Step 2 修改PetForm.vue
<template>
<div class="petFormWrapper">
<form :model="formState" @finish="onFinish">
<a-form-item label="品种种类" id="name" name="kind" :rules="[{ required: true, message: '请输入品种种类!', trigger: 'focus' }]">
<a-input v-model:value="formState.kind" @input="(e) => onNameChange(e, 'kind')" />
<span style="color: red">{{ getServiceError('kind') }}</span>
</a-form-item>
<a-form-item label="品种名" id="name" name="name" :rules="[{ required: true, message: '请输入品种名!', trigger: 'focus' }]">
<a-input v-model:value="formState.name" @input="(e) => onNameChange(e, 'name')" />
<span style="color: red">{{ getServiceError('name') }}</span>
</a-form-item>
</form>
</div>
</template>-
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { Form } from 'ant-design-vue';
export default defineComponent({
props: ['onChange', 'reloadData', 'serviceErrors'],
components: { Form },
setup(props) {
const formState = reactive({
kind: '',
name: '',
});
const onFinish = () => {
console.log(formState);
};
const onNameChange = (event, name) => {
props.onChange(name, event.target.value);
};
const reloadData = async () => {
await props.reloadData();
};
// 提示服务器异常消息
const getServiceError = (name: string) => {
const error = props.serviceErrors.find(error => error.name === name);
return error ? error.error : '';
}
return {
formState,
reloadData,
onNameChange,
onFinish,
getServiceError
};
}
});
</script>Step3 PetFormViewWidget.ts
import { constructOne, FormWidget, queryOne, SPI, ViewWidget, Widget, IModel, getModelByUrl, getModel, getIdByUrl, FormWidgetV3, CustomWidget, MessageHub, useMessageHub, ILevel, CallChaining } from '@kunlun/dependencies';
import PetFormView from './PetForm.vue';
@SPI.ClassFactory(CustomWidget.Token({ widget: 'PetForm' }))
export class PetFormViewWidget extends FormWidgetV3 {
public initialize(props) {
super.initialize(props);
this.setComponent(PetFormView);
return this;
}
/**
* 数据提交
* @protected
*/
@Widget.Reactive()
@Widget.Inject()
protected callChaining: CallChaining | undefined;
private modelInstance!: IModel;
// MessageHub相关逻辑
private messageHub!: MessageHub;
@Widget.Reactive()
private serviceErrors: Record<string, unknown>[] = [];
/**
* 重要！！！！
* 当字段改变时修改formData
* */
@Widget.Method()
public onFieldChange(fieldName: string, value) {
this.setDataByKey(fieldName, value);
}
/**
* 表单编辑时查询数据
* */
public async fetchData(content: Record<string, unknown>[] = [], options: Record<string, unknown> = {}, variables: Record<string, unknown> = {}) {
this.setBusy(true);
const context: typeof options = { sourceModel: this.modelInstance.model, ...options };
const fields = this.modelInstance?.modelFields;
try {
const id = getIdByUrl();
const data = (await queryOne(this.modelInstance.model, (content[0] || { id }) as Record<string, string>, fields, variables, context)) as Record<string, unknown>;
this.loadData(data);
this.setBusy(false);
return data;
} catch (e) {
console.error(e);
} finally {
this.setBusy(false);
}
}
/**
* 新增数据时获取表单默认值
* */
@Widget.Method()
public async constructData(content: Record<string, unknown>[] = [], options: Record<string, unknown> = {}, variables: Record<string, unknown> = {}) {
this.setBusy(true);
const context: typeof options = { sourceModel: this.modelInstance.model, ...options };
const fields = this.modelInstance.modelFields;
const reqData = content[0] || {};
const data = await constructOne(this.modelInstance!.model, reqData, fields, variables, context);
return data as Record<string, unknown>;
}
@Widget.Method()
private async reloadData() {
const data = await this.constructData();
// 覆盖formData
this.setData(data);
}
@Widget.Method()
public onChange(name, value) {
this.formData[name] = value;
}
protected async mounted() {
super.mounted();
const modelModel = getModelByUrl();
this.modelInstance = await getModel(modelModel);
this.fetchData();
this.messageHub = useMessageHub('messageHubCode');
this.messageHub.subscribe((result) => {
this.serviceErrors = [];
// 收集错误信息
if (Array.isArray(result)) {
const errors = result.map((res) => {
const path = res.path[1],
error = res.message;
return {
name: path,
error
};
});
this.serviceErrors = errors;
}
});
this.messageHub.subscribe((result) => {
console.log(result);
}, ILevel.SUCCESS);
// 数据提交钩子函数！！！
this.callChaining?.callBefore(() => {
return this.formData;
});
}
}
Step4 刷新页面看效果
Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9303.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
