Skip to content

X
xform
Commit 12f95d8d authored by 田翔's avatar 田翔
Browse files
Options

增加单选多选框，去掉显示方式概念

parent 185c28c1
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 308 additions and 39 deletions
examples/base/index.html
View file @ 12f95d8d
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" /> <head>
<title>Base example</title> <meta charset="utf-8" />
<link rel="stylesheet" href="./index.css" /> <title>panda-xform</title>
</head> <link rel="stylesheet" href="./index.css" />
<body> </head>
<div id="app"></div>
<script src="/__build__/base.js"></script> <body>
</body> <div id="app"></div>
</html> <script src="/__build__/base.js"></script>
</body>
</html>
\ No newline at end of file
examples/server.js
View file @ 12f95d8d
...@@ -28,7 +28,8 @@ app.use(['/admin', '/manager'], admin); ...@@ -28,7 +28,8 @@ app.use(['/admin', '/manager'], admin);
app.use(webpackHotMiddleware(compiler)); app.use(webpackHotMiddleware(compiler));
app.use(express.static(__dirname)); app.use(express.static(__dirname));
// app.use('/', createProxyMiddleware('/', { target: 'http://127.0.0.1:8880', changeOrigin: true })); // app.use('/', createProxyMiddleware('/', { target: 'http://127.0.0.1:8880', changeOrigin: true }));
app.use('/', createProxyMiddleware('/', { target: 'http://192.168.10.178:8082', changeOrigin: true })); // app.use('/', createProxyMiddleware('/', { target: 'http://192.168.10.178:8082', changeOrigin: true }));
app.use('/', createProxyMiddleware('/', { target: 'http://192.168.10.167:8088/', changeOrigin: true }));
const port = process.env.PORT || 8888; const port = process.env.PORT || 8888;
module.exports = app.listen(port, () => { module.exports = app.listen(port, () => {
console.log(`Server listening on http://localhost:${port}, Ctrl+C to stop`); console.log(`Server listening on http://localhost:${port}, Ctrl+C to stop`);
......
src/apis/process.js
View file @ 12f95d8d
...@@ -187,9 +187,17 @@ export function DeleteTableDataInfo(data) { ...@@ -187,9 +187,17 @@ export function DeleteTableDataInfo(data) {
} }
//获取数据字典 //获取数据字典
export function GetDataDictionaryList() { export function GetDataDictionaryList(params) {
return request({ return request({
url: `/PandaOMS/OMS/DataManger/GetDataDictionaryList`, url: `/PandaOMS/OMS/DataManger/GetDataDictionaryList${params.nodeID ? `?nodeID=${params.nodeID}` : ''}`,
method: 'get',
})
}
//获取数据字典子项
export function GetSelectItemList({ nodeName }) {
return request({
url: `PandaWorkFlow/WorkFlow/AccountManage/GetSelectItemList${nodeName ? `?nodeName=${nodeName}` : ''}`,
method: 'get', method: 'get',
}) })
} }
......
src/core/FormDesigner/config/settings.js
View file @ 12f95d8d
This diff is collapsed.
src/core/widgets/select/CheckBox/index.js 0 → 100644
View file @ 12f95d8d
import React, { useState, useEffect, useMemo } from 'react'
import { Checkbox } from 'antd'
import { GetSelectItemList } from '../../../../apis/process'
const CheckBox = (props) => {
const { value, onChange, schema } = props
const { presetValue, disabled, soruceType, options, dictionary } = schema
const [dictionaryList, setDictionaryList] = useState([])
const enums = useMemo(() => {
switch (soruceType) {
case '手动输入':
return Array.isArray(options) ? options.map(v => v.value) : []
case '数据字典':
return Array.isArray(dictionaryList) ? Array.from([...new Set(dictionaryList.map(v => v.nodeName))]) : []
default:
return []
}
}, [soruceType, options, dictionaryList])
useEffect(() => {
onChange(presetValue ? presetValue.split(',') : [])
}, [presetValue])
const onFocus = async () => {
const { data } = await GetSelectItemList({ nodeName: dictionary })
if (Array.isArray(data)) {
setDictionaryList(data)
}
}
useEffect(() => {
if (soruceType === '数据字典' && dictionary) {
onFocus()
}
}, [soruceType, dictionary])
return (
<Checkbox.Group
disabled={disabled}
onChange={value => onChange(value.join(','))}
value={value}
>
{enums.map(v => <Checkbox key={v} value={v}>{v}</Checkbox>)}
</Checkbox.Group>
)
}
export default CheckBox
\ No newline at end of file
src/core/widgets/select/ValueSelect/index.js → src/core/widgets/select/ComboBox/index.js
View file @ 12f95d8d
// 选择器，值选择器 // 选择器，值选择器
import React, { useState, useMemo } from 'react' import React, { useState, useMemo, useEffect } from 'react'
import { Select, Checkbox, Radio } from 'antd' import { Select, Checkbox, Radio } from 'antd'
import styels from './index.less' import styels from './index.less'
import { GetSelectItemList } from '../../../../apis/process'
const { Option } = Select const { Option } = Select
const ValueSelect = ({ value, onChange, schema }) => { const ComboBox = ({ value, onChange, schema }) => {
const { placeholder, disabled, options, presetValue, showType, isMultiple, isEdit } = schema const { placeholder, disabled, soruceType, options, dictionary, presetValue, showType, isMultiple, isEdit } = schema
console.log('options', options) console.log('schema', schema)
const [dictionaryList, setDictionaryList] = useState()
const valueShow = useMemo(() => { const valueShow = useMemo(() => {
if (isMultiple) { if (isMultiple) {
...@@ -20,12 +23,15 @@ const ValueSelect = ({ value, onChange, schema }) => { ...@@ -20,12 +23,15 @@ const ValueSelect = ({ value, onChange, schema }) => {
}, [presetValue, value]) }, [presetValue, value])
const enums = useMemo(() => { const enums = useMemo(() => {
switch (soruceType) {
return Array.isArray(options) ? options.map(v => v.value) : [] case '手动输入':
// if (options) { return Array.isArray(options) ? options.map(v => v.value) : []
// return options.split(',') case '数据字典':
// } return Array.isArray(dictionaryList) ? dictionaryList.map(v => v.nodeName) : []
}, [options]) default:
return []
}
}, [soruceType, options, dictionaryList])
const handleChange = value => { const handleChange = value => {
if (isEdit) { if (isEdit) {
...@@ -39,16 +45,21 @@ const ValueSelect = ({ value, onChange, schema }) => { ...@@ -39,16 +45,21 @@ const ValueSelect = ({ value, onChange, schema }) => {
} }
} }
// console.log('valueShow', valueShow, disabled) const onFocus = async () => {
const { data } = await GetSelectItemList({ nodeName: dictionary })
if (Array.isArray(data)) {
setDictionaryList(data)
}
}
if (showType === '下拉') { if (showType === '下拉') {
return ( return (
<Select <Select
onFocus={onFocus}
style={{ width: '100%' }} style={{ width: '100%' }}
mode={isMultiple ? 'multiple' : ''} mode={isMultiple ? 'multiple' : ''}
disabled={disabled} disabled={disabled}
showArrow={!disabled} showArrow={!disabled}
// optionFilterProp="children"
value={valueShow} value={valueShow}
placeholder={placeholder} placeholder={placeholder}
onChange={handleChange} onChange={handleChange}
...@@ -83,4 +94,4 @@ const ValueSelect = ({ value, onChange, schema }) => { ...@@ -83,4 +94,4 @@ const ValueSelect = ({ value, onChange, schema }) => {
} }
export default ValueSelect export default ComboBox
src/core/widgets/select/RadioButton/index.js 0 → 100644
View file @ 12f95d8d
import React, { useState, useEffect, useMemo } from 'react'
import { Radio } from 'antd'
import { GetSelectItemList } from '../../../../apis/process'
const RadioButton = (props) => {
const { value, onChange, schema } = props
const { presetValue, disabled, soruceType, options, dictionary } = schema
const [dictionaryList, setDictionaryList] = useState([])
useEffect(() => {
onChange(presetValue)
}, [presetValue])
const onFocus = async () => {
const { data } = await GetSelectItemList({ nodeName: dictionary })
if (Array.isArray(data)) {
setDictionaryList(data)
}
}
useEffect(() => {
if (soruceType === '数据字典' && dictionary) {
onFocus()
}
}, [soruceType, dictionary])
const enums = useMemo(() => {
switch (soruceType) {
case '手动输入':
return Array.isArray(options) ? options.map(v => v.value) : []
case '数据字典':
return Array.isArray(dictionaryList) ? dictionaryList.map(v => v.nodeName) : []
default:
return []
}
}, [soruceType, options, dictionaryList])
return (
<Radio.Group onChange={e => onChange(e.target.value)} value={value} disabled={disabled}>
{enums.map(v => <Radio key={v} value={v}>{v}</Radio>)}
</Radio.Group>
)
}
export default RadioButton
\ No newline at end of file
src/core/widgets/select/index.js
View file @ 12f95d8d
import ComboBox from './ComboBox'
import RadioButton from './RadioButton'
import CheckBox from './CheckBox'
import CitySelect from './CitySelect' import CitySelect from './CitySelect'
import EditSelect from './EditSelect' import EditSelect from './EditSelect'
import MultiSelect from './MultiSelect' import MultiSelect from './MultiSelect'
...@@ -12,9 +15,11 @@ import PullStaff from './PersonSelect/pullStaff' ...@@ -12,9 +15,11 @@ import PullStaff from './PersonSelect/pullStaff'
import StaffSelect from './PersonSelect/staffSelect' import StaffSelect from './PersonSelect/staffSelect'
import TableAccount from './TableAccount' import TableAccount from './TableAccount'
import TileSelect from './TileSelect' import TileSelect from './TileSelect'
import ValueSelect from './ValueSelect'
const select = { const select = {
ComboBox,
RadioButton,
CheckBox,
CitySelect, CitySelect,
EditSelect, EditSelect,
MultiSelect, MultiSelect,
...@@ -29,7 +34,6 @@ const select = { ...@@ -29,7 +34,6 @@ const select = {
StaffSelect, StaffSelect,
TableAccount, TableAccount,
TileSelect, TileSelect,
ValueSelect,
} }
export default select export default select
\ No newline at end of file
src/core/widgets/settings/groupSource/Dictionary/index.js
View file @ 12f95d8d
import React, { useState } from 'react' import React, { useState } from 'react'
import { Input, Modal } from 'antd' import { Input, Modal, Select, Button, Table } from 'antd'
import { GetDataDictionaryList } from '../../../../../apis/process' import { EyeOutlined } from '@ant-design/icons'
import './index.less'
import { GetDataDictionaryList, GetSelectItemList } from '../../../../../apis/process'
const columns = [
{
title: '序号',
render: (t, r, i) => i + 1,
width: 60
},
{
title: '名称',
dataIndex: 'nodeName',
},
{
title: '值',
dataIndex: 'nodeValue',
}
]
const Dictionary = (props) => { const Dictionary = (props) => {
const { value, shame, onChange } = props const { value, shame, onChange } = props
const [options, setOptions] = useState([])
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false)
const [dataSource, setDataSource] = useState([])
const onClick = () => { const iconClick = () => {
setVisible(true) setVisible(true)
getDictionary() getDataSource()
}
const getDataSource = async () => {
// let option = options.find(v => v.nodeName === value)
// console.log('option', options, option, value)
// if (!option) return
const { data } = await GetSelectItemList({ nodeName: value })
if (Array.isArray(data)) {
setDataSource(data)
}
} }
const getDictionary = async () => { const getDictionary = async () => {
const res = await GetDataDictionaryList() const { data } = await GetDataDictionaryList({})
console.log('res', res) if (Array.isArray(data)) {
setOptions(data)
return data
}
return []
}
const selectChange = (value) => {
onChange(value)
} }
return ( return (
<div className='dictionary'> <div className='dictionary'>
<Input onClick={onClick} value={value} /> <Select
value={value}
style={{ maxWidth: '208px', width: '100%' }}
onChange={selectChange}
onFocus={() => getDictionary()}
showSearch
allowClear
>
{
options.map(v => {
return (
<Select.Option key={v.nodeName} value={v.nodeName} >
{v.nodeName}
</Select.Option>
)
})
}
</Select>
<div className='dictionary-icons' style={{ display: value ? 'block' : 'none' }}><EyeOutlined onClick={iconClick} /></div>
<Modal <Modal
width={'50%'}
onCancel={() => setVisible(false)} onCancel={() => setVisible(false)}
onOk={() => setVisible(true)} onOk={() => setVisible(false)}
title='数据字典' title={'数据字典' + `【${value}】`}
visible={visible} visible={visible}
getContainer={false}
> >
<Table
size='small'
bordered
dataSource={dataSource}
columns={columns}
/>
</Modal> </Modal>
</div> </div>
) )
......
src/core/widgets/settings/groupSource/Dictionary/index.less 0 → 100644
View file @ 12f95d8d
.dictionary {
display: flex;
.dictionary-icons {
width: 37px;
height: 32px;
line-height: 32px;
color: rgba(0, 0, 0, 0.85);
background: #fafafa;
border: 1px solid #d9d9d9;
border-left: none;
text-align: center;
}
}
\ No newline at end of file
src/core/widgets/settings/groupSource/TableName/index.js 0 → 100644
View file @ 12f95d8d
import React from 'react'
import { Cascader } from 'antd'
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
code: 752100,
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
code: 453400,
},
],
},
],
},
];
const TableName = (props) => {
const { value, onChange } = props
const selectChange = (value) => {
onChange(value.join(','))
}
return (
<Cascader
onChange={selectChange}
style={{ width: '208px' }}
options={options}
/>
)
}
export default TableName
\ No newline at end of file
src/core/widgets/settings/groupSource/index.js
View file @ 12f95d8d
import Dictionary from './Dictionary' import Dictionary from './Dictionary'
import TableName from './TableName'
const groupSource = { const groupSource = {
Dictionary, Dictionary,
TableName,
} }
export default groupSource export default groupSource
\ 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