Skip to content

X
xform
Commit 56de3529 authored by 田翔's avatar 田翔
Browse files
Options

增加业务表单与自动计算的控制规则

parent 8c996669
Show whitespace changes
Inline Side-by-side
Showing with 400 additions and 210 deletions
package.json
View file @ 56de3529
{ {
"name": "panda-xform", "name": "panda-xform",
"version": "2.0.0", "version": "2.0.1",
"description": "2.0.0: 增加自动计算形态", "description": "2.0.1: 增加业务表单与自动计算的控制规则",
"keywords": [ "keywords": [
"panda-xform" "panda-xform"
], ],
......
src/apis/process.js
View file @ 56de3529
...@@ -22,6 +22,21 @@ export function getSelectName(nodeName) { ...@@ -22,6 +22,21 @@ export function getSelectName(nodeName) {
}); });
} }
//关联表单显示隐藏控制规则
export function ruleValidation(ruleContent) {
return request({
url: `/PandaOMS/OMS/WorkFlow/RuleValidation${ruleContent ? `?ruleContent=${ruleContent}` : ''}`,
method: 'get',
});
}
export function getTableNumberList(tableName) {
return request({
url: `/PandaOMS/OMS/CaseManage/GetTableNumberList${tableName ? `?tableName=${tableName}` : ''}`,
method: 'get',
});
}
// 选择器选项的子节点查询 // 选择器选项的子节点查询
export function getSelectChildName(nodeName) { export function getSelectChildName(nodeName) {
return request({ return request({
......
src/core/FormDesigner/config/settings.js
View file @ 56de3529
...@@ -2761,6 +2761,7 @@ const advancedWidgets = [ ...@@ -2761,6 +2761,7 @@ const advancedWidgets = [
type: 'string', type: 'string',
widget: 'RelationForm', widget: 'RelationForm',
width: '100%', width: '100%',
controlShow: '',
}, },
setting: { setting: {
groupBase: { groupBase: {
...@@ -2851,7 +2852,7 @@ const advancedWidgets = [ ...@@ -2851,7 +2852,7 @@ const advancedWidgets = [
type: 'string', type: 'string',
displayType: 'row', displayType: 'row',
labelWidth: 80, labelWidth: 80,
widget: 'ControlShow', widget: 'ControlRules',
}, },
groupStyle: { groupStyle: {
title: '控件样式', title: '控件样式',
......
src/core/FormRender/watch.js
View file @ 56de3529
...@@ -41,7 +41,6 @@ export const jsonToValues = (data, paths) => { ...@@ -41,7 +41,6 @@ export const jsonToValues = (data, paths) => {
}) })
}) })
} }
console.log('paths', paths)
return { return {
formValue: values, formValue: values,
relationForm: data.relationForm relationForm: data.relationForm
...@@ -112,6 +111,7 @@ const setValue = debounce(automaticComputation) ...@@ -112,6 +111,7 @@ const setValue = debounce(automaticComputation)
export const getWatch = (schema, form) => { export const getWatch = (schema, form) => {
let watch = {} let watch = {}
let { rules, calculateRule, filedName } = getRules(schema) let { rules, calculateRule, filedName } = getRules(schema)
console.log('getRules', getRules(schema))
let paths = [] let paths = []
if (Array.isArray(rules)) { if (Array.isArray(rules)) {
let item = rules.find(v => v.tableName === schema.tableName) let item = rules.find(v => v.tableName === schema.tableName)
......
src/core/widgets/settings/groupSource/CalculateRule/index.js
View file @ 56de3529
import React, { useState } from 'react' import React, { useEffect, useState, useRef } from 'react'
import { Input, Modal, message } from 'antd' import { Modal, Input, Form, message, Dropdown, Menu, Tree } from 'antd'
import { getFormFieldAnalysisDtos } from '../../../../../apis/process' import styles from './index.less'
import { getTableNumberList, getFormFieldAnalysisDtos } from '../../../../../apis/process'
import { isObject } from '../../../../../utils'
const { TextArea } = Input const { TextArea } = Input
const CalculateRule = (props) => { const ControlRules = (props) => {
const { value, onChange, addons } = props const { value, onChange, addons } = props
const { parent, name } = addons.formData
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false)
const [text, setText] = useState() const [fieldList, setFieldList] = useState([])
const [rule, setRule] = useState([])
const [currentSelectId, setCurrentSelectId] = useState('')
const ruleText = useRef()
const getFieldList = async () => {
let { code, data, msg } = await getTableNumberList(parent.tableName)
if (code === 0) {
let array = []
if (isObject(data)) {
for (let key in data) {
array.push({
title: key,
key: key,
children: Array.isArray(data[key]) ? data[key].map(v => { return { title: `${v.Name}(${v.Shape})`, key: `${key}.${v.Name}` } }) : []
})
}
}
setFieldList(array)
} else {
message.error(msg)
}
}
const inputClick = () => { const inputClick = () => {
setVisible(true) setVisible(true)
setText(value) getFieldList()
setRule(value || '')
if (value) {
setTimeout(() => {
document
.getElementById('calculateRule')
.setSelectionRange(value.length, value.length)
}, 200)
}
}
const onSelect = (prop, treeNode) => {
if (!treeNode.node.children) {
insert(`{${treeNode.node.key}}`)
}
setCurrentSelectId(prop[0]);
} }
const onOk = async () => { const onOk = async () => {
const { code, data, msg } = await getFormFieldAnalysisDtos(text) if (rule) {
const { code, data, msg } = await getFormFieldAnalysisDtos(rule)
if (code === 0) { if (code === 0) {
addons.setValue('rules', data) addons.setValue('rules', data)
setVisible(false) setVisible(false)
onChange(text) onChange(rule)
} else { } else {
message.error(msg) message.error(msg)
} }
} }
onChange(rule)
setVisible(false)
}
const onCancel = () => { const onCancel = () => {
setVisible(false) setVisible(false)
} }
const insert = text => {
let ednIndex = document.getElementById('calculateRule').selectionEnd
let rangeIndex = document.getElementById('calculateRule').selectionStart
setRule(`${rule.slice(0, rangeIndex)}${text}${rule.slice(rangeIndex)}`)
rangeIndex += text.toString().length
ruleText.current.focus()
}
return ( return (
<div> <div>
<Input value={value} onClick={inputClick} /> <Input
value={value}
onClick={inputClick}
/>
<Modal <Modal
title='计算规则' title="规则配置"
visible={visible} visible={visible}
onOk={onOk} onOk={onOk}
width="740px"
onCancel={onCancel} onCancel={onCancel}
maskClosable={false}
destroyOnClose
getContainer={false}
> >
<div className={styles.configContent}>
<div className={styles.leftTree}>
<Tree
blockNode
defaultExpandedKeys={[parent.tableName]}
autoExpandParent={true}
onSelect={onSelect}
selectedKeys={[currentSelectId]}
treeData={fieldList}
/>
</div>
<div className={styles.rightContent}>
<div className={styles.textAreaBox}>
<TextArea <TextArea
value={text} id="calculateRule"
onChange={e => setText(e.target.value)} autoSize={{ minRows: 19, maxRows: 19 }}
value={rule}
rows={4}
ref={ruleText}
onChange={e => setRule(e.target.value)}
/> />
</div>
<ul className={styles.tipBox}>
<li>
<p>请从左侧面板选择字段或选项</p>
<p>
{'支持'} <i>英文</i> {'模式下运算符（+、-、*、/）'}
</p>
</li>
<li>{`示例：{表名.缴费次数} + {表名.缴费金额}`}</li>
</ul>
</div>
</div>
</Modal> </Modal>
</div> </div>
) )
} }
export default CalculateRule export default ControlRules
\ No newline at end of file
src/core/widgets/settings/groupSource/CalculateRule/index.less 0 → 100644
View file @ 56de3529
.configContent {
height: 500px;
display: flex;
.leftTree {
width: 180px;
height: 100%;
margin-right: 10px;
overflow-y: auto;
}
.rightContent {
flex: 1;
.title {
width: 100%;
background-color: #E6F3FF;
color: #1890FF;
font-size: 14px;
padding: 5px 10px;
border: 1px solid #EEF6FE;
}
.textAreaBox {
position: relative;
.insertFn {
position: absolute;
bottom: 10px;
right: 10px;
border: 1px solid #1890FF;
padding: 2px 15px;
border-radius: 5px;
z-index: 1;
cursor: pointer;
}
textArea {
max-height: 360px !important;
min-height: 360px !important;
border: 1px solid transparent;
background-color: #F0F2F6;
}
}
.tipBox {
padding-top: 12px;
padding-left: 25px;
li {
list-style: disc;
color: #AEAEAE;
}
em {
font-style: normal;
color: #1890FF;
}
i {
font-style: normal;
color: red;
}
p {
margin-bottom: 0;
color: #AEAEAE;
}
}
}
}
\ No newline at end of file
src/core/widgets/settings/groupSource/ControlRules/index.js 0 → 100644
View file @ 56de3529
import React, { useEffect, useState, useRef } from 'react'
import { Modal, Input, Form, message, Dropdown, Menu, Tree } from 'antd'
import styles from './index.less'
import { ReloadTableFields, ruleValidation } from '../../../../../apis/process'
const { TextArea } = Input
const fnList = [
{ label: '是否为工作日', value: '$fn.isWorkDay()' },
{ label: '是否为工作时间', value: '$fn.isWorkTime()' },
]
const ControlRules = (props) => {
const { value, onChange, addons } = props
const { parent, name } = addons.formData
const [visible, setVisible] = useState(false)
const [fieldList, setFieldList] = useState([])
const [rule, setRule] = useState([])
const [currentSelectId, setCurrentSelectId] = useState('')
const ruleText = useRef()
const getFieldList = async () => {
let { code, data, msg } = await ReloadTableFields({ tableName: parent.tableName })
if (code === 0) {
setFieldList([
{
title: parent.tableName,
key: parent.tableName,
children: data.root.map(v => { return { title: v.name, key: `${parent.tableName}.${v.name}` } })
}
])
} else {
message.error(msg)
}
}
const inputClick = () => {
setVisible(true)
getFieldList()
setRule(value || '')
if (value) {
setTimeout(() => {
document
.getElementById('ruleText')
.setSelectionRange(value.length, value.length)
}, 200)
}
}
const onSelect = (prop, treeNode) => {
if (!treeNode.node.children) {
insert(`{${treeNode.node.key}}`)
}
setCurrentSelectId(prop[0]);
}
const onOk = async () => {
if (rule) {
const { code, data } = await ruleValidation(rule)
if (!data) {
return message.error('校验不通过!')
}
}
onChange(rule)
setVisible(false)
}
const onCancel = () => {
setVisible(false)
}
const insert = text => {
let ednIndex = document.getElementById('ruleText').selectionEnd
let rangeIndex = document.getElementById('ruleText').selectionStart
setRule(`${rule.slice(0, rangeIndex)}${text}${rule.slice(rangeIndex)}`)
rangeIndex += text.toString().length
ruleText.current.focus()
}
const insertFn = value => {
insert(value)
}
const fnListRender = (
<Menu>
{fnList.map(item => (
<Menu.Item key={item.value} onClick={() => insertFn(item.value)}>
{item.label}
</Menu.Item>
))}
</Menu>
)
return (
<div>
<Input
value={value}
onClick={inputClick}
/>
<Modal
title="规则配置"
visible={visible}
onOk={onOk}
width="740px"
onCancel={onCancel}
maskClosable={false}
destroyOnClose
getContainer={false}
>
<div className={styles.configContent}>
<div className={styles.leftTree}>
<Tree
blockNode
defaultExpandedKeys={[parent.tableName]}
autoExpandParent={true}
onSelect={onSelect}
selectedKeys={[currentSelectId]}
treeData={fieldList}
/>
</div>
<div className={styles.rightContent}>
<div className={styles.textAreaBox}>
<Dropdown overlay={fnListRender} placement="bottom" arrow>
<div className={styles.insertFn}>插入函数</div>
</Dropdown>
<TextArea
id="ruleText"
autoSize={{ minRows: 19, maxRows: 19 }}
value={rule}
rows={4}
ref={ruleText}
onChange={e => setRule(e.target.value)}
/>
</div>
<ul className={styles.tipBox}>
<li>
<p>请从左侧面板选择字段或选项</p>
<p>
{'支持'} <i>英文</i> {'模式下运算符（+、-、*、/、>、<、==、!=、<=、>=）'}
</p>
</li>
<li>{`示例：{表名.是否缴费} = ‘是’ and {表名.缴费金额} > 1000`}</li>
</ul>
</div>
</div>
</Modal>
</div>
)
}
export default ControlRules
src/core/widgets/settings/groupSource/ControlRules/index.less 0 → 100644
View file @ 56de3529
.configContent {
height: 500px;
display: flex;
.leftTree {
width: 180px;
height: 100%;
margin-right: 10px;
overflow-y: auto;
}
.rightContent {
flex: 1;
.title {
width: 100%;
background-color: #E6F3FF;
color: #1890FF;
font-size: 14px;
padding: 5px 10px;
border: 1px solid #EEF6FE;
}
.textAreaBox {
position: relative;
.insertFn {
position: absolute;
bottom: 10px;
right: 10px;
border: 1px solid #1890FF;
padding: 2px 15px;
border-radius: 5px;
z-index: 1;
cursor: pointer;
}
textArea {
max-height: 360px !important;
min-height: 360px !important;
border: 1px solid transparent;
background-color: #F0F2F6;
}
}
.tipBox {
padding-top: 12px;
padding-left: 25px;
li {
list-style: disc;
color: #AEAEAE;
}
em {
font-style: normal;
color: #1890FF;
}
i {
font-style: normal;
color: red;
}
p {
margin-bottom: 0;
color: #AEAEAE;
}
}
}
}
\ No newline at end of file
src/core/widgets/settings/groupSource/ControlShow/RuleConfig.js deleted 100644 → 0
View file @ 8c996669
import React, { useEffect, useState, useRef } from 'react';
// import { RuleValidation } from '@/services/workflow/workflow';
import { Modal, Input, Form, message, Dropdown, Menu, Tree } from 'antd';
import styles from './index.less';
// import Tree from '@/components/ExpendableTree';
const { TextArea } = Input;
const fnList = [
{ label: '是否为工作日', value: '$fn.isWorkDay()' },
{ label: '是否为工作时间', value: '$fn.isWorkTime()' },
];
const RuleConfig = props => {
const { visible, handleCancel, fieldList, onSubumit, RuleContent, flag } = props;
const [rule, setRule] = useState([]);
const [expandedKey, setExpandedKey] = useState(''); // 默认展开项
const [currentSelectId, setCurrentSelectId] = useState(''); // 选中得节点
const ruleText = useRef();
const chooseIndex = useRef(0);
const [form] = Form.useForm();
useEffect(() => {
if (visible) {
setExpandedKey(fieldList[0].TableName);
setRule(RuleContent);
setTimeout(() => {
console.log(document.getElementById('ruleText'));
console.log(ruleText.current);
document
.getElementById('ruleText')
.setSelectionRange(RuleContent.length, RuleContent.length); // 重新定位光标
}, 0);
} else {
chooseIndex.current = 0;
setExpandedKey('');
setCurrentSelectId('');
setRule('');
}
}, [visible]);
// 保存线配置
const onSave = () => {
console.log('rule', rule)
// RuleValidation({ ruleContent: rule }).then(res => {
// if (res.data) {
// onSubumit(rule);
// } else {
// message.error('请检查规则是否正确');
// }
// });
};
// 处理树数据
const mapTree = (val, index) => ({
title: val.TableName,
key: val.TableName,
children: val.TableFieldNames.map(item => ({
title: item,
key: `${val.TableName}.${item}`,
})),
});
const onSelect = (prop, treeNode) => {
console.log(prop, treeNode);
if (!treeNode.node.children) {
insert(`{${treeNode.node.key}}`);
}
setCurrentSelectId(prop[0]);
};
const insert = text => {
let ednIndex = document.getElementById('ruleText').selectionEnd;
let rangeIndex = document.getElementById('ruleText').selectionStart;
console.log(ednIndex, rangeIndex, 'endene');
setRule(`${rule.slice(0, rangeIndex)}${text}${rule.slice(rangeIndex)}`);
rangeIndex += text.toString().length;
ruleText.current.focus();
};
const insertFn = value => {
insert(value);
};
const fnListRender = (
<Menu>
{fnList.map(item => (
<Menu.Item key={item.value} onClick={() => insertFn(item.value)}>
{item.label}
</Menu.Item>
))}
</Menu>
);
return (
<Modal
title="规则配置"
visible={visible}
onOk={onSave}
width="740px"
onCancel={handleCancel}
maskClosable={false}
destroyOnClose
getContainer={false}
>
<div className={styles.configContent}>
<div className={styles.leftTree}>
<Tree
blockNode
autoExpandParent
onSelect={onSelect}
selectedKeys={[currentSelectId]}
expandedKeys={expandedKey}
treeData={fieldList.map((item, index) => mapTree(item, index))}
/>
</div>
<div className={styles.rightContent}>
{flag == 1 && <div className={styles.title}>符合以下条件时工单扭转到对应的节点</div>}
<div className={styles.textAreaBox}>
<Dropdown overlay={fnListRender} placement="bottom" arrow>
<div className={styles.insertFn}>插入函数</div>
</Dropdown>
<TextArea
id="ruleText"
autoSize={{ minRows: 19, maxRows: 19 }}
value={rule}
rows={4}
ref={ruleText}
onChange={e => setRule(e.target.value)}
/>
</div>
<ul className={styles.tipBox}>
<li>
<p>请从左侧面板选择字段或选项</p>
<p>
{'支持'} <i>英文</i> {'模式下运算符（+、-、*、/、>、<、==、!=、<=、>=）'}
</p>
</li>
{flag === 1 ? (
<>
<li>
<p>参考场景：</p>
<p>当报销金额大于1000时，才能进入所选节点，则可将流转条件设置为：</p>
<p>
<em>{'报销金额 > 1000'}</em>
</p>
</li>
</>
) : (
<li>{`示例：{表名.是否缴费} = ‘是’ and {表名.缴费金额} > 1000`}</li>
)}
</ul>
</div>
</div>
</Modal>
)
}
export default RuleConfig;
src/core/widgets/settings/groupSource/ControlShow/index.js deleted 100644 → 0
View file @ 8c996669
import React, { useEffect, useState, useRef } from 'react';
// import { RuleValidation } from '@/services/workflow/workflow';
import { Modal, Input, Form, message, Dropdown, Menu, Tree } from 'antd';
import styles from './index.less';
// import Tree from '@/components/ExpendableTree';
const { TextArea } = Input;
// import RuleConfig from './RuleConfig';
const ControlShow = (props) => {
const { value, onChange } = props
const inputChange = (e) => {
onChange(e.target.value)
}
return (
<div>
<Input
// onClick={inputClick}
onChange={inputChange}
/>
{/* <RuleConfig
fieldList={fieldList}
RuleContent={123}
visible={visible}
handleCancel={() => { }}
onSubumit={() => { }}
flag={2}
/> */}
</div>
)
}
export default ControlShow
src/core/widgets/settings/groupSource/index.js
View file @ 56de3529
...@@ -2,7 +2,7 @@ import Dictionary from './Dictionary' ...@@ -2,7 +2,7 @@ import Dictionary from './Dictionary'
import AccountName from './AccountName' import AccountName from './AccountName'
import Fieldshine from './Fieldshine' import Fieldshine from './Fieldshine'
import MappedField from './MappedField' import MappedField from './MappedField'
import ControlShow from './ControlShow' import ControlRules from './ControlRules'
import SoruceType from './SoruceType' import SoruceType from './SoruceType'
import TableName from './TableName' import TableName from './TableName'
import FieldName from './FieldName' import FieldName from './FieldName'
...@@ -13,7 +13,7 @@ const groupSource = { ...@@ -13,7 +13,7 @@ const groupSource = {
AccountName, AccountName,
Fieldshine, Fieldshine,
MappedField, MappedField,
ControlShow, ControlRules,
SoruceType, SoruceType,
TableName, TableName,
FieldName, FieldName,
......
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