Skip to content

S
szse
Commit 1abc39fe by zhaochengxiang
Options

编辑规则库

parent dab0abfd
Showing with 299 additions and 92 deletions
src/view/Manage/ModelConfig/Component/rule-template.jsx
import React from 'react'
import { Input, Space, Modal } from 'antd'
import { Input, Space, Modal, Divider, Tooltip, Typography } from 'antd'
import { dispatch } from '../../../../model'
import PermissionButton from '../../../../util/Component/PermissionButton'
......@@ -35,23 +35,101 @@ const FC = (props) => {
{
title: '规则编号',
dataIndex: 'number',
render: (text, record) => (
<Tooltip title={text}>
<Typography.Text ellipsis={true}>
{ text }
</Typography.Text>
</Tooltip>
)
},
{
title: '规则中文名称',
dataIndex: 'name',
render: (text, record) => (
<Tooltip title={text}>
<Typography.Text ellipsis={true}>
<a onClick={() => {
setUpdateParams({
visible: true,
type: 'detail',
item: record
})
}}>
{ text }
</a>
</Typography.Text>
</Tooltip>
)
},
{
title: '规则描述',
dataIndex: 'remark',
render: (text, record) => (
<Tooltip title={text}>
<Typography.Text ellipsis={true}>
{ text }
</Typography.Text>
</Tooltip>
)
},
{
title: '检查类型',
dataIndex: 'checkTypeName',
render: (text, record) => (
<Tooltip title={text}>
<Typography.Text ellipsis={true}>
{ text }
</Typography.Text>
</Tooltip>
)
},
{
title: '引用次数',
dataIndex: 'referenceCount',
},
{
title: '操作',
key: 'action',
width: 120,
render: (text, record) => {
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
<PermissionButton
type='link'
size='small'
onClick={() => {
setUpdateParams({
visible: true,
type: 'edit',
item: record,
})
}}
style={{ padding: 0 }}
// permissionKey='编辑'
// permissions={permissions}
defaultPermission={true}
>
编辑
</PermissionButton>
<div style={{ margin: '0 5px' }}>
<Divider type='vertical' />
</div>
<PermissionButton
type='link'
size='small'
onClick={() => { onDeteteClick(record); }}
style={{ padding: 0 }}
// permissionKey='删除'
// permissions={permissions}
defaultPermission={true}
>
删除
</PermissionButton>
</div>
)
}
}
])
}, [])
......@@ -157,6 +235,7 @@ const FC = (props) => {
/>
</div>
<Table
extraColWidth={32}
loading={loading}
columns={cols??[]}
dataSource={_data}
......
src/view/Manage/ModelConfig/Component/update-rule-template.jsx
import React from "react"
import { Modal, Button, Spin, Form, Input, Select, Space, InputNumber } from "antd"
import { Modal, Button, Spin, Form, Input, Select, Space, InputNumber, Row, Col } from "antd"
import { dispatch } from '../../../../model'
import { IsArr } from "../../../../util"
const FC = (props) => {
const { visible, type, item, onCancel } = props
......@@ -11,7 +12,7 @@ const FC = (props) => {
const title = React.useMemo(() => {
if (type === 'add') return '新增检查规则'
if (type === 'update') return '修改检查规则'
if (type === 'edit') return '修改检查规则'
if (type === 'detail') return '检查规则详情'
return ''
......@@ -43,7 +44,7 @@ const FC = (props) => {
dispatch({
type: 'datamodel.updateRuleTemplate',
payload: {
data: {...item, rows}
data: {...item, ...rows}
},
callback: data => {
close(true)
......@@ -81,7 +82,7 @@ const FC = (props) => {
onCancel={() => { close() }}
>
<Spin spinning={waiting}>
<Basic ref={basicRef} item={item} />
<Basic ref={basicRef} type={type} item={item} />
</Spin>
</Modal>
)
......@@ -89,7 +90,7 @@ const FC = (props) => {
export default FC
export const Basic = React.forwardRef(function ({ item }, ref) {
export const Basic = React.forwardRef(function ({ type, item }, ref) {
const [loadingCheckTypes, setLoadingCheckTypes] = React.useState(false)
const [checkTypes, setCheckTypes] = React.useState()
const [checkTypeValue, setCheckTypeValue] = React.useState()
......@@ -98,7 +99,7 @@ export const Basic = React.forwardRef(function ({ item }, ref) {
React.useImperativeHandle(ref, () => ({
validate: async () => {
return await form.validateFields()
return await form?.validateFields()
},
}), [form])
......@@ -106,6 +107,39 @@ export const Basic = React.forwardRef(function ({ item }, ref) {
getCheckTypes()
}, [])
React.useEffect(() => {
if (item) {
form?.setFieldsValue(item)
setCheckTypeValue(item.checkType)
}
}, [item])
const [checkPropertyDescription, preCheckPropertyDescription] = React.useMemo(() => {
if (item) {
let newCheckPropertyDescription = `${item?.checkProperty?.propertyCnName??''} ${item?.checkProperty?.expressionTypeCnName??''} ${item?.checkProperty?.verifyExpression?.cnName??''}`
if (IsArr(item?.checkProperty?.verifyExpression?.value)) {
newCheckPropertyDescription = `${newCheckPropertyDescription} ${item?.checkProperty?.verifyExpression?.value.join(';')}`
} else {
newCheckPropertyDescription = `${newCheckPropertyDescription} ${item?.checkProperty?.verifyExpression?.value}`
}
let newPreCheckPropertyDescription = `${item?.preCheckProperty?.propertyCnName??''} ${item?.preCheckProperty?.expressionTypeCnName??''} ${item?.preCheckProperty?.verifyExpression?.cnName??''}`
if (IsArr(item?.preCheckProperty?.verifyExpression?.value)) {
newPreCheckPropertyDescription = `${newPreCheckPropertyDescription} ${item?.preCheckProperty?.verifyExpression?.value.join(';')}`
} else {
newPreCheckPropertyDescription = `${newPreCheckPropertyDescription} ${item?.preCheckProperty?.verifyExpression?.value}`
}
return [newCheckPropertyDescription, newPreCheckPropertyDescription]
}
return ['', '']
}, [item])
const marginBottom = React.useMemo(() => {
return type === 'detail' ? 5 : 15
}, [type])
const getCheckTypes = () => {
setLoadingCheckTypes(true)
dispatch({
......@@ -125,6 +159,29 @@ export const Basic = React.forwardRef(function ({ item }, ref) {
setCheckTypeValue(changedValues.checkType)
}
}
const validatorCheckProperty = (_, value) => {
console.log('value', value)
if (!value?.propertyEnName) {
return Promise.reject(new Error('请选择检查对象!'));
}
if (!value?.expressionTypeEnName) {
return Promise.reject(new Error('请选择检查属性!'));
}
if (!value?.verifyExpression?.enName) {
return Promise.reject(new Error('请选择表达式!'));
}
if (value?.verifyExpression?.valueType !== 'none') {
if (value?.verifyExpression?.valueType === 'List<String>' && (value?.verifyExpression?.value??[]).length === 0) {
return Promise.reject(new Error('请输入表达式的值!'));
} else if (value?.verifyExpression?.value==null||value?.verifyExpression?.value==undefined) {
return Promise.reject(new Error('请输入表达式的值!'));
}
}
return Promise.resolve();
};
return (
<Form
......@@ -134,49 +191,87 @@ export const Basic = React.forwardRef(function ({ item }, ref) {
autoComplete="off"
onValuesChange={onValuesChange}
>
{
type !== 'add' && <Form.Item label='规则编号' style={{ marginBottom }}>
<span>{item?.number}</span>
</Form.Item>
}
<Form.Item name='name' label='规则中文名称'
style={{ marginBottom }}
rules={[{ required: true, message: '请输入规则中文名称!' }]}
>
<Input placeholder='请输入规则中文名称' allowClear />
{
type === 'detail' ? <span>{item?.name}</span> : <Input placeholder='请输入规则中文名称' allowClear />
}
</Form.Item>
<Form.Item name='remark' label='规则描述'
style={{ marginBottom }}
>
<Input placeholder='请输入规则描述' allowClear />
{
type === 'detail' ? <span>{item?.remark}</span> : <Input placeholder='请输入规则描述' allowClear />
}
</Form.Item>
<Form.Item name='alertContent' label='规则提示'
style={{ marginBottom }}
rules={[{ required: true, message: '请输入规则提示!' }]}
>
<Input placeholder='请输入规则提示' allowClear />
{
type === 'detail' ? <span>{item?.alertContent}</span> : <Input placeholder='请输入规则提示' allowClear />
}
</Form.Item>
<Form.Item name='checkType' label='检查类型'
style={{ marginBottom }}
rules={[{ required: true, message: '请选择检查类型!' }]}
>
<Select allowClear loading={loadingCheckTypes}
placeholder='请选择检查类型'
>
{ (checkTypes??[]).map((item, index) => (
<Select.Option key={item.type} value={item.type}>{item.name}</Select.Option>
)) }
</Select>
{
type === 'detail' ? <span>{item?.checkTypeName}</span> : <Select allowClear loading={loadingCheckTypes}
placeholder='请选择检查类型'
>
{ (checkTypes??[]).map((item, index) => (
<Select.Option key={item.type} value={item.type}>{item.name}</Select.Option>
)) }
</Select>
}
</Form.Item>
{
checkTypeValue === 'single' && <Form.Item name='checkProperty' label='检查规则'
rules={[{ required: true, message: '请选择检查规则!' }]}
style={{ marginBottom }}
rules={[
{
validator: validatorCheckProperty,
},
]}
>
<CheckItem />
{
type === 'detail' ? <span>{checkPropertyDescription}</span> : <CheckItem />
}
</Form.Item>
}
{
checkTypeValue === 'preCheck' && <Form.Item label='检查规则'>
<Form.Item name='preCheckProperty' label='满足条件'
rules={[{ required: true, message: '请选择检查规则!' }]}
style={{ marginBottom }}
rules={[
{
validator: validatorCheckProperty,
},
]}
>
<CheckItem />
{
type === 'detail' ? <span>{preCheckPropertyDescription}</span> : <CheckItem />
}
</Form.Item>
<Form.Item name='checkProperty' label='检查内容'
rules={[{ required: true, message: '请选择检查规则!' }]}
style={{ marginBottom }}
rules={[
{
validator: validatorCheckProperty,
},
]}
>
<CheckItem />
{
type === 'detail' ? <span>{checkPropertyDescription}</span> : <CheckItem />
}
</Form.Item>
</Form.Item>
}
......@@ -196,6 +291,9 @@ const CheckItem = ({ value, onChange }) => {
const [currentCheckPropertyType, setCurrentCheckPropertyType] = React.useState()
const [currentExpressionType, setCurrentExpressionType] = React.useState()
const [currentExpression, setCurrentExpression] = React.useState()
const [currentExpressionValue, setCurrentExpressionValue] = React.useState()
const mountRef = React.useRef(true)
React.useEffect(() => {
getCheckPropertyTypes()
......@@ -204,6 +302,21 @@ const CheckItem = ({ value, onChange }) => {
}, [])
React.useEffect(() => {
if (mountRef.current && value) {
setCurrentCheckPropertyType(value)
setCurrentExpressionType(value)
setCurrentExpression(value.verifyExpression)
if (IsArr(value.verifyExpression?.value)) {
setCurrentExpressionValue(value.verifyExpression?.value.join(';'))
} else {
setCurrentExpressionValue(value.verifyExpression?.value)
}
}
mountRef.current = false
}, [])
React.useEffect(() => {
onChange?.({...currentCheckPropertyType||{}, ...currentExpressionType||{}, verifyExpression: currentExpression})
}, [currentCheckPropertyType, currentExpressionType, currentExpression])
......@@ -258,80 +371,94 @@ const CheckItem = ({ value, onChange }) => {
}
return (
<Space>
<Select allowClear loading={loadingCheckPropertyTypes}
value={currentCheckPropertyType?.propertyEnName}
onChange={(val) => {
if (val) {
const index = (checkPropertyTypes??[]).findIndex(item => item.propertyEnName === val)
if (index !== -1) {
setCurrentCheckPropertyType(checkPropertyTypes[index])
<Row gutter={10}>
<Col span={6}>
<Select allowClear loading={loadingCheckPropertyTypes}
value={currentCheckPropertyType?.propertyEnName}
onChange={(val) => {
if (val) {
const index = (checkPropertyTypes??[]).findIndex(item => item.propertyEnName === val)
if (index !== -1) {
setCurrentCheckPropertyType(checkPropertyTypes[index])
}
} else {
setCurrentCheckPropertyType()
}
} else {
setCurrentCheckPropertyType()
}
}}
placeholder='请选择检查对象'
>
{ (checkPropertyTypes??[]).map((item, index) => (
<Select.Option key={item.propertyEnName} value={item.propertyEnName}>{item.propertyCnName}</Select.Option>
)) }
</Select>
<Select allowClear loading={loadingExpressionTypes}
value={currentExpressionType?.expressionTypeEnName}
onChange={(val) => {
if (val) {
const index = (expressionTypes??[]).findIndex(item => item.expressionTypeEnName === val)
if (index !== -1) {
setCurrentExpressionType(expressionTypes[index])
}}
placeholder='请选择检查对象'
>
{ (checkPropertyTypes??[]).map((item, index) => (
<Select.Option key={item.propertyEnName} value={item.propertyEnName}>{item.propertyCnName}</Select.Option>
)) }
</Select>
</Col>
<Col span={6}>
<Select allowClear loading={loadingExpressionTypes}
value={currentExpressionType?.expressionTypeEnName}
onChange={(val) => {
if (val) {
const index = (expressionTypes??[]).findIndex(item => item.expressionTypeEnName === val)
if (index !== -1) {
setCurrentExpressionType(expressionTypes[index])
}
} else {
setCurrentExpressionType()
}
} else {
setCurrentExpressionType()
}
setCurrentExpression()
}}
placeholder='请选择检查属性'
>
{ (expressionTypes??[]).map((item, index) => (
<Select.Option key={item.expressionTypeEnName} value={item.expressionTypeEnName}>{item.expressionTypeCnName}</Select.Option>
)) }
</Select>
<Select allowClear loading={loadingExpressionMapping}
value={currentExpression?.enName}
onChange={(val) => {
if (val) {
const index = (visibleExpressions??[]).findIndex(item => item.enName === val)
if (index !== -1) {
setCurrentExpression(visibleExpressions[index])
}
} else {
setCurrentExpression()
}
}}
placeholder='请选择表达式'
>
{ (visibleExpressions??[]).map((item, index) => (
<Select.Option key={item.enName} value={item.enName}>{item.cnName}</Select.Option>
)) }
</Select>
{ (currentExpression?.valueType === 'string') && <Input
onChange={(e) => {
setCurrentExpression({
...currentExpression, value: e.target.value
})
}}/> }
{ (currentExpression?.valueType === 'int') && <InputNumber
onChange={(e) => {
setCurrentExpressionValue()
}}
placeholder='请选择检查属性'
>
{ (expressionTypes??[]).map((item, index) => (
<Select.Option key={item.expressionTypeEnName} value={item.expressionTypeEnName}>{item.expressionTypeCnName}</Select.Option>
)) }
</Select>
</Col>
<Col span={6}>
<Select allowClear loading={loadingExpressionMapping}
value={currentExpression?.enName}
onChange={(val) => {
if (val) {
const index = (visibleExpressions??[]).findIndex(item => item.enName === val)
if (index !== -1) {
setCurrentExpression(visibleExpressions[index])
}
} else {
setCurrentExpression()
}
setCurrentExpressionValue()
}}
placeholder='请选择表达式'
>
{ (visibleExpressions??[]).map((item, index) => (
<Select.Option key={item.enName} value={item.enName}>{item.cnName}</Select.Option>
)) }
</Select>
</Col>
<Col span={6}>
{ (currentExpression?.valueType === 'string') && <Input value={currentExpressionValue}
onChange={(e) => {
setCurrentExpressionValue(e.target.value)
setCurrentExpression({
...currentExpression, value: e.target.value
})
}}/> }
{ (currentExpression?.valueType === 'int') && <InputNumber value={currentExpressionValue}
onChange={(e) => {
setCurrentExpressionValue(e.target.value)
setCurrentExpression({
...currentExpression, value: e.target.value
})
}}/> }
{ (currentExpression?.valueType === 'List<String>') && <Input placeholder='枚举值用;隔开 如高;中;低' value={currentExpressionValue} onChange={(e) => {
setCurrentExpressionValue(e.target.value)
setCurrentExpression({
...currentExpression, value: e.target.value
...currentExpression, value: e.target.value?e.target.value.split(';'):[]
})
}}/> }
{ (currentExpression?.valueType === 'List<String>') && <Input placeholder='枚举值用;隔开 如高;中;低' onChange={(e) => {
setCurrentExpression({
...currentExpression, value: (e.target.value??'').split(';')
})
}} /> }
</Space>
}} /> }
</Col>
</Row>
)
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment