|
|
@@ -1,5 +1,5 @@
|
|
|
import { Button, Modal } from 'antd';
|
|
|
-import { createForm } from '@formily/core';
|
|
|
+import { createForm, Field, registerValidateRules } from '@formily/core';
|
|
|
import { createSchemaField } from '@formily/react';
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
import * as ICONS from '@ant-design/icons';
|
|
|
@@ -16,6 +16,7 @@ import {
|
|
|
import type { ISchema } from '@formily/json-schema';
|
|
|
import service from '@/pages/link/DataCollect/service';
|
|
|
import { onlyMessage } from '@/utils/util';
|
|
|
+import { action } from '@formily/reactive';
|
|
|
|
|
|
interface Props {
|
|
|
data: Partial<PointItem>;
|
|
|
@@ -25,9 +26,13 @@ interface Props {
|
|
|
|
|
|
export default (props: Props) => {
|
|
|
const [data, setData] = useState<Partial<PointItem>>(props.data);
|
|
|
-
|
|
|
useEffect(() => {
|
|
|
- setData(props.data);
|
|
|
+ setData({
|
|
|
+ ...props.data,
|
|
|
+ accessModes: props.data?.accessModes
|
|
|
+ ? (props.data?.accessModes || []).map((item) => item.value)
|
|
|
+ : [],
|
|
|
+ });
|
|
|
}, [props.data]);
|
|
|
|
|
|
const form = createForm({
|
|
|
@@ -52,6 +57,39 @@ export default (props: Props) => {
|
|
|
},
|
|
|
});
|
|
|
|
|
|
+ const getCodecProvider = () => service.queryCodecProvider();
|
|
|
+
|
|
|
+ const useAsyncDataSource = (services: (arg0: Field) => Promise<any>) => (field: Field) => {
|
|
|
+ field.loading = true;
|
|
|
+ services(field).then(
|
|
|
+ action.bound!((resp: any) => {
|
|
|
+ field.dataSource = (resp?.result || []).map((item: any) => ({
|
|
|
+ label: item.name,
|
|
|
+ value: item.id,
|
|
|
+ }));
|
|
|
+ field.loading = false;
|
|
|
+ }),
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ registerValidateRules({
|
|
|
+ checkLength(value) {
|
|
|
+ if (String(value).length > 64) {
|
|
|
+ return {
|
|
|
+ type: 'error',
|
|
|
+ message: '最多可输入64个字符',
|
|
|
+ };
|
|
|
+ }
|
|
|
+ if (!(value % 1 === 0)) {
|
|
|
+ return {
|
|
|
+ type: 'error',
|
|
|
+ message: '请输入非0正整数',
|
|
|
+ };
|
|
|
+ }
|
|
|
+ return '';
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
const schema: ISchema = {
|
|
|
type: 'object',
|
|
|
properties: {
|
|
|
@@ -124,11 +162,14 @@ export default (props: Props) => {
|
|
|
},
|
|
|
{
|
|
|
max: 255,
|
|
|
- message: '请输入0-255之间的整整数',
|
|
|
+ message: '请输入0-255之间的正整数',
|
|
|
},
|
|
|
{
|
|
|
min: 0,
|
|
|
- message: '请输入0-255之间的整整数',
|
|
|
+ message: '请输入0-255之间的正整数',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ checkLength: true,
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
@@ -147,6 +188,13 @@ export default (props: Props) => {
|
|
|
required: true,
|
|
|
message: '请输入起始位置',
|
|
|
},
|
|
|
+ {
|
|
|
+ min: 0,
|
|
|
+ message: '请输入非0正整数',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ checkLength: true,
|
|
|
+ },
|
|
|
],
|
|
|
},
|
|
|
'configuration.parameter.quantity': {
|
|
|
@@ -164,6 +212,13 @@ export default (props: Props) => {
|
|
|
required: true,
|
|
|
message: '请输入寄存器数量',
|
|
|
},
|
|
|
+ {
|
|
|
+ min: 0,
|
|
|
+ message: '请输入非0正整数',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ checkLength: true,
|
|
|
+ },
|
|
|
],
|
|
|
},
|
|
|
'configuration.codec.provider': {
|
|
|
@@ -176,7 +231,7 @@ export default (props: Props) => {
|
|
|
'x-component-props': {
|
|
|
placeholder: '请选择数据类型',
|
|
|
},
|
|
|
- enum: [],
|
|
|
+ 'x-reactions': '{{useAsyncDataSource(getCodecProvider)}}',
|
|
|
'x-validator': [
|
|
|
{
|
|
|
required: true,
|
|
|
@@ -195,7 +250,6 @@ export default (props: Props) => {
|
|
|
'x-component-props': {
|
|
|
placeholder: '请输入缩放因子',
|
|
|
},
|
|
|
- enum: [],
|
|
|
'x-validator': [
|
|
|
{
|
|
|
required: true,
|
|
|
@@ -205,6 +259,7 @@ export default (props: Props) => {
|
|
|
},
|
|
|
accessModes: {
|
|
|
title: '访问类型',
|
|
|
+ type: 'array',
|
|
|
'x-component': 'Select',
|
|
|
'x-decorator': 'FormItem',
|
|
|
'x-decorator-props': {
|
|
|
@@ -212,6 +267,7 @@ export default (props: Props) => {
|
|
|
},
|
|
|
'x-component-props': {
|
|
|
placeholder: '请选择访问类型',
|
|
|
+ mode: 'multiple',
|
|
|
},
|
|
|
enum: [
|
|
|
{ label: '读', value: 'read' },
|
|
|
@@ -232,10 +288,18 @@ export default (props: Props) => {
|
|
|
'x-decorator-props': {
|
|
|
gridSpan: 2,
|
|
|
},
|
|
|
- default: 3,
|
|
|
+ default: 3000,
|
|
|
+ 'x-reactions': {
|
|
|
+ dependencies: ['..accessModes'],
|
|
|
+ fulfill: {
|
|
|
+ state: {
|
|
|
+ visible: '{{($deps[0] || []).includes("subscribe")}}',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
'x-component-props': {
|
|
|
placeholder: '请输入采集频率',
|
|
|
- addonAfter: '秒',
|
|
|
+ addonAfter: '毫秒',
|
|
|
style: {
|
|
|
width: '100%',
|
|
|
},
|
|
|
@@ -245,16 +309,27 @@ export default (props: Props) => {
|
|
|
required: true,
|
|
|
message: '请输入采集频率',
|
|
|
},
|
|
|
+ {
|
|
|
+ checkLength: true,
|
|
|
+ },
|
|
|
],
|
|
|
},
|
|
|
features: {
|
|
|
- title: '采集特性',
|
|
|
+ title: '',
|
|
|
type: 'array',
|
|
|
'x-component': 'Checkbox.Group',
|
|
|
'x-decorator': 'FormItem',
|
|
|
'x-decorator-props': {
|
|
|
gridSpan: 2,
|
|
|
},
|
|
|
+ 'x-reactions': {
|
|
|
+ dependencies: ['.accessModes'],
|
|
|
+ fulfill: {
|
|
|
+ state: {
|
|
|
+ visible: '{{($deps[0] || []).includes("subscribe")}}',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
enum: [
|
|
|
{
|
|
|
label: '只推送变化的数据',
|
|
|
@@ -262,6 +337,20 @@ export default (props: Props) => {
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
+ description: {
|
|
|
+ title: '说明',
|
|
|
+ 'x-component': 'Input.TextArea',
|
|
|
+ 'x-decorator': 'FormItem',
|
|
|
+ 'x-decorator-props': {
|
|
|
+ gridSpan: 2,
|
|
|
+ },
|
|
|
+ 'x-component-props': {
|
|
|
+ rows: 3,
|
|
|
+ showCount: true,
|
|
|
+ maxLength: 200,
|
|
|
+ placeholder: '请输入说明',
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
@@ -269,6 +358,7 @@ export default (props: Props) => {
|
|
|
|
|
|
const save = async () => {
|
|
|
const value = await form.submit<PointItem>();
|
|
|
+ console.log(value);
|
|
|
const response: any = props.data?.id
|
|
|
? await service.updatePoint(props.data?.id, { ...props.data, ...value })
|
|
|
: await service.savePoint({ ...props.data, ...value });
|
|
|
@@ -301,7 +391,7 @@ export default (props: Props) => {
|
|
|
]}
|
|
|
>
|
|
|
<Form form={form} layout="vertical">
|
|
|
- <SchemaField schema={schema} />
|
|
|
+ <SchemaField schema={schema} scope={{ useAsyncDataSource, getCodecProvider }} />
|
|
|
</Form>
|
|
|
</Modal>
|
|
|
);
|