Skip to content

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

选择器支持搜索，可编辑功能，日期，时间选择器支持配置

parent 00d395c0
Hide whitespace changes
Inline Side-by-side
Showing with 503 additions and 579 deletions
examples/server.js
View file @ a007dc7c
...@@ -27,7 +27,8 @@ admin.get('/', function (req, res) { ...@@ -27,7 +27,8 @@ admin.get('/', function (req, res) {
app.use(['/admin', '/manager'], admin); 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.167:8088/', 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 })); // app.use('/', createProxyMiddleware('/', { target: 'http://192.168.10.167:8088/', changeOrigin: true }));
const port = process.env.PORT || 8888; const port = process.env.PORT || 8888;
......
package.json
View file @ a007dc7c
{ {
"name": "panda-xform", "name": "panda-xform",
"version": "1.4.9", "version": "1.5.0",
"description": "1.4.9: 下拉框形态修复", "description": "1.5.0: 选择器支持搜索，可编辑功能，日期，时间选择器支持配置",
"keywords": [ "keywords": [
"panda-xform" "panda-xform"
], ],
...@@ -47,9 +47,9 @@ ...@@ -47,9 +47,9 @@
"@babel/plugin-syntax-jsx": "^7.12.13", "@babel/plugin-syntax-jsx": "^7.12.13",
"@babel/plugin-transform-modules-amd": "^7.14.5", "@babel/plugin-transform-modules-amd": "^7.14.5",
"@umijs/fabric": "^2.0.7", "@umijs/fabric": "^2.0.7",
"@wisdom-map/amap": "^1.0.49--27.11", "@wisdom-map/amap": "1.1.0-beta.42",
"@wisdom-map/arcgismap": "1.4.0-75", "@wisdom-map/arcgismap": "1.4.0-92",
"@wisdom-map/basemap": "1.1.0-14", "@wisdom-map/basemap": "1.1.0-18",
"babel-loader": "^8.2.2", "babel-loader": "^8.2.2",
"babel-plugin-import": "^1.13.3", "babel-plugin-import": "^1.13.3",
"check-prettier": "^1.0.3", "check-prettier": "^1.0.3",
......
src/core/FormDesigner/config/settings.js
View file @ a007dc7c
...@@ -652,6 +652,9 @@ const selectWidgets = [ ...@@ -652,6 +652,9 @@ const selectWidgets = [
required: true, required: true,
displayType: 'row', displayType: 'row',
labelWidth: 80, labelWidth: 80,
// props: {
// disabled: true
// }
}, },
title: { title: {
title: '标题', title: '标题',
...@@ -1632,7 +1635,28 @@ const selectWidgets = [ ...@@ -1632,7 +1635,28 @@ const selectWidgets = [
props: { props: {
placeholder: '示例：部门="XX部门"' placeholder: '示例：部门="XX部门"'
} }
} },
groupStyle: {
title: '控件样式',
type: 'object',
properties: {}
},
width: {
title: '元素宽度',
type: 'string',
widget: 'percentSlider',
},
labelWidth: {
title: '标签宽度',
description: '默认值110',
default: 110,
type: 'number',
widget: 'slider',
max: 400,
props: {
hideNumber: true,
},
},
} }
} }
] ]
...@@ -1674,32 +1698,24 @@ const dateWidgets = [ ...@@ -1674,32 +1698,24 @@ const dateWidgets = [
type: 'string', type: 'string',
displayType: 'row', displayType: 'row',
labelWidth: 80, labelWidth: 80,
default: '请选择日期',
}, },
presetValue: { presetValue: {
title: '默认值', title: '默认值',
type: 'string', type: 'string',
widget: 'DateDefault', widget: 'DateDefault',
format: '{{formData.format}}', dateFormat: '{{formData.format}}',
displayType: 'row', displayType: 'row',
labelWidth: 80, labelWidth: 80,
description: '勾选默认当前日期此处配置无效'
}, },
groupSetting: { groupVerify: {
title: '控件设置', title: '数据校验',
type: 'object', type: 'object',
properties: {} properties: {}
}, },
format: { required: {
title: '日期格式', title: '必填',
type: 'string',
// enum: ['date', 'dateTime', 'year', 'month', 'quarter', 'week'],
enum: ['date', 'dateTime', 'year', 'month'],
default: 'date',
enumNames: ['日期', '日期时间', '日期年份', '日期月份'],
displayType: 'row',
labelWidth: 80,
},
disabled: {
title: '只读',
type: 'boolean', type: 'boolean',
widget: 'checkbox', widget: 'checkbox',
default: false, default: false,
...@@ -1710,51 +1726,88 @@ const dateWidgets = [ ...@@ -1710,51 +1726,88 @@ const dateWidgets = [
} }
} }
}, },
required: { currentDate: {
title: '必填', title: '不超过当前日期',
type: 'boolean', type: 'boolean',
widget: 'checkbox', widget: 'checkbox',
default: false, default: false,
width: '33%', width: '66%',
props: { props: {
style: { style: {
marginLeft: '10px', marginLeft: '10px',
} }
} }
}, },
hidden: { groupSetting: {
title: '隐藏', title: '控件设置',
type: 'object',
properties: {}
},
format: {
title: '日期格式',
type: 'string',
enum: ['date', 'dateTime', 'year', 'month', 'week', 'quarter'],
default: 'date',
enumNames: ['日期', '日期时间', '日期年份', '日期月份', '日期周', '日期季度'],
displayType: 'row',
labelWidth: 80,
},
disabled: {
title: '只读',
type: 'boolean', type: 'boolean',
widget: 'checkbox', widget: 'checkbox',
default: false, default: false,
width: '33%', width: '30%',
props: { props: {
style: { style: {
marginLeft: '10px', marginLeft: '10px',
} }
} }
}, },
hidden: {
title: '隐藏',
type: 'boolean',
widget: 'checkbox',
default: false,
width: '25%',
// props: {
// style: {
// marginLeft: '10px',
// }
// }
},
defaultCurrent: {
title: '默认当前日期',
type: 'boolean',
widget: 'checkbox',
default: false,
width: '45%',
// props: {
// style: {
// marginLeft: '10px',
// }
// }
},
groupStyle: { groupStyle: {
title: '控件样式', title: '控件样式',
type: 'object', type: 'object',
properties: { properties: {}
width: { },
title: '元素宽度', width: {
type: 'string', title: '元素宽度',
widget: 'percentSlider', type: 'string',
}, widget: 'percentSlider',
labelWidth: { },
title: '标签宽度', labelWidth: {
description: '默认值110', title: '标签宽度',
default: 110, description: '默认值110',
type: 'number', default: 110,
widget: 'slider', type: 'number',
max: 400, widget: 'slider',
props: { max: 400,
hideNumber: true, props: {
}, hideNumber: true,
}, },
}
}, },
}, },
}, },
...@@ -1795,6 +1848,7 @@ const dateWidgets = [ ...@@ -1795,6 +1848,7 @@ const dateWidgets = [
type: 'string', type: 'string',
displayType: 'row', displayType: 'row',
labelWidth: 80, labelWidth: 80,
default: '请选择时间',
}, },
presetValue: { presetValue: {
title: '默认值', title: '默认值',
...@@ -1803,28 +1857,97 @@ const dateWidgets = [ ...@@ -1803,28 +1857,97 @@ const dateWidgets = [
format: '{{formData.format}}', format: '{{formData.format}}',
displayType: 'row', displayType: 'row',
labelWidth: 80, labelWidth: 80,
description: '勾选默认当前时间此处配置无效'
},
groupVerify: {
title: '数据校验',
type: 'object',
properties: {},
},
required: {
title: '必填',
type: 'boolean',
widget: 'checkbox',
default: false,
width: '33%',
props: {
style: {
marginLeft: '10px',
}
}
},
currentDate: {
title: '不超过当前时间',
type: 'boolean',
widget: 'checkbox',
default: false,
width: '66%',
props: {
style: {
marginLeft: '10px',
}
}
},
groupSetting: {
title: '控件设置',
type: 'object',
properties: {},
},
format: {
title: '日期格式',
type: 'string',
enum: ['date', 'dateTime', 'year', 'month', 'week', 'quarter'],
default: 'date',
enumNames: ['日期', '日期时间', '日期年份', '日期月份', '日期周', '日期季度'],
displayType: 'row',
labelWidth: 80,
},
disabled: {
title: '只读',
type: 'boolean',
widget: 'checkbox',
default: false,
width: '30%',
props: {
style: {
marginLeft: '10px',
}
}
},
hidden: {
title: '隐藏',
type: 'boolean',
widget: 'checkbox',
default: false,
width: '25%',
},
defaultCurrent: {
title: '默认当前时间',
type: 'boolean',
widget: 'checkbox',
default: false,
width: '45%',
}, },
groupStyle: { groupStyle: {
title: '控件样式', title: '控件样式',
type: 'object', type: 'object',
properties: { properties: {}
width: { },
title: '元素宽度', width: {
type: 'string', title: '元素宽度',
widget: 'percentSlider', type: 'string',
}, widget: 'percentSlider',
labelWidth: { },
title: '标签宽度', labelWidth: {
description: '默认值110', title: '标签宽度',
default: 110, description: '默认值110',
type: 'number', default: 110,
widget: 'slider', type: 'number',
max: 400, widget: 'slider',
props: { max: 400,
hideNumber: true, props: {
}, hideNumber: true,
}, },
}
}, },
} }
}, },
...@@ -1883,7 +2006,8 @@ const fileWidgets = [ ...@@ -1883,7 +2006,8 @@ const fileWidgets = [
enumNames: ['全部', '图片', '文档', '音频', '视频'], enumNames: ['全部', '图片', '文档', '音频', '视频'],
default: '全部', default: '全部',
displayType: 'row', displayType: 'row',
labelWidth: 80, labelWidth: 100,
// description: "{{formData.fileType === '图片' ? '支持bmp、gif、jpeg、tiff、png、svg、jpg格式': (formData.fileType === '文档' ? '支持docx，xlsx，pdf格式':(formData.fileType === '音频' ? '支持mp3格式' : (formData.fileType === '视频' ? '支持mp4格式'：null )))}}",
}, },
disabled: { disabled: {
title: '只读', title: '只读',
......
src/core/widgets/coord/Device/index.js
View file @ a007dc7c
import React, { useState, useRef, useEffect } from 'react' import React, { useState, useRef, useEffect, useContext } from 'react'
import { Input, Modal } from 'antd' import { Input, Modal } from 'antd'
import { CompassOutlined, CloseOutlined } from '@ant-design/icons' import { CompassOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import { ArcGISSceneMap, ClickQuery, geomUtils } from '@wisdom-map/arcgismap' import {
import './index.less' ArcGISSceneMap,
ClickQuery,
geomUtils,
GraphicsLayer,
Graphic
} from '@wisdom-map/arcgismap'
// import { GlobalStore } from "../../../../index";
import point from './img/point.png'
let geometrystr = '' let geometrystr = ''
let gisInfo = {}
let layer = 0
const Device = ({ value, onChange, schema }) => { const initMapConfig = [
{
"basemaps": [
{
"id": "高德地形",
"title": "高德地形",
"thumbnailUrl": "assets/images/thumbnail/thumbnail_1.jpg",
"baseLayers": [
{
"title": "高德地形",
"icon": "assets/images/thumbnail/thumbnail_1.jpg",
"layerType": "amap-v",
"url": "",
"opacity": 1,
"visible": false,
"useProxy": false,
"proxyUrl": "",
"style": null,
"extent": "",
"baseLayer": "",
"levelStart": "",
"levelEnd": "",
"levelEndEnlarge": false,
"resolution": "",
"origin": "",
"tileMatrix": "",
"zoom": 0
}
]
}
],
"id": "wlgcs",
"title": "wlgcs",
"icon": "",
"layerType": "PipenetLayer",
"url": "CityInterface/rest/services/MapServer.svc/wlgcs",
"opacity": 1,
"showLegend": true,
"visible": true,
"useProxy": true,
"proxyUrl": "",
"extent": "12733684.9026203,3560132.6351416963,12734623.874243027,3560857.1781486557",
"baseLayer": "",
"levelStart": null,
"levelEnd": null,
"resolution": "",
"origin": "",
"tileMatrix": "",
"wmtsUrl": "",
"schemename": "物联港",
"roles": "15,27,28,1015,1035,1036,1040,1041,1042,1037,1038,1039,43,57,60,61,62,63,64,65,1003,1004",
"areaName": "江夏区",
"boundColor": "#86C8F8",
"backgroundColor": "#009688",
"boundWidth": "5px",
"backgroundOpacity": "0.6",
"exportScheme": "pandagis"
},
{
"basemaps": [
{
"id": "高德地形",
"title": "高德地形",
"thumbnailUrl": "assets/images/thumbnail/thumbnail_1.jpg",
"baseLayers": [
{
"title": "高德地形",
"icon": "assets/images/thumbnail/thumbnail_1.jpg",
"layerType": "amap-v",
"url": "",
"opacity": 1,
"visible": false,
"useProxy": false,
"proxyUrl": "",
"style": null,
"extent": "",
"baseLayer": "",
"levelStart": "",
"levelEnd": "",
"levelEndEnlarge": false,
"resolution": "",
"origin": "",
"tileMatrix": "",
"zoom": 0
}
]
}
],
"id": "luanzhou",
"title": "luanzhou",
"icon": "",
"layerType": "dynamic",
"url": "CityInterface/rest/services/MapServer.svc/luanzhou",
"opacity": 1,
"showLegend": true,
"visible": true,
"useProxy": true,
"proxyUrl": "",
"extent": "13209667.350188782,4825282.3802740965,13220086.323771724,4831701.695887157",
"baseLayer": "",
"levelStart": null,
"levelEnd": null,
"resolution": "",
"origin": "",
"tileMatrix": "",
"wmtsUrl": "",
"schemename": "前端绘制管网测试方案",
"roles": null,
"areaName": "滦州市",
"boundColor": "#7de825",
"backgroundColor": "#000000",
"boundWidth": "10px",
"backgroundOpacity": "0.6",
"exportScheme": "arcgis"
},
{
"basemaps": [
{
"id": "高德地形",
"title": "高德地形",
"thumbnailUrl": "assets/images/thumbnail/thumbnail_1.jpg",
"baseLayers": [
{
"title": "高德地形",
"icon": "assets/images/thumbnail/thumbnail_1.jpg",
"layerType": "amap-v",
"url": "",
"opacity": 1,
"visible": false,
"useProxy": false,
"proxyUrl": "",
"style": null,
"extent": "",
"baseLayer": "",
"levelStart": "",
"levelEnd": "",
"levelEndEnlarge": false,
"resolution": "",
"origin": "",
"tileMatrix": "",
"zoom": 0
}
]
}
],
"id": "luanzhouZS",
"title": "luanzhouZS",
"icon": "",
"layerType": "dynamic",
"url": "CityInterface/rest/services/MapServer.svc/luanzhouZS",
"opacity": 1,
"showLegend": true,
"visible": true,
"useProxy": true,
"proxyUrl": "",
"extent": "13210364.94854749,4824486.87832399,13222264.608150885,4831691.679813754",
"baseLayer": "",
"levelStart": null,
"levelEnd": null,
"resolution": "",
"origin": "",
"tileMatrix": "",
"wmtsUrl": "",
"schemename": "业务平台",
"roles": null,
"areaName": "滦州市",
"boundColor": "#86C8F8",
"backgroundColor": "#000000",
"boundWidth": "5px",
"backgroundOpacity": "0.6",
"exportScheme": "pandagis"
}
]
const Device = ({ addons, value, onChange, schema }) => {
const mapConfig = window.globalConfig.mapsettings?.layers || initMapConfig
const mapConfig = window.globalConfig.mapsettings?.layers || null
const { placeholder, disabled } = schema const { placeholder, disabled } = schema
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false)
// const { paths } = useContext(GlobalStore)
const layersConifg = { layers: mapConfig } const layersConifg = { layers: mapConfig }
let clickref = useRef(null) let clickref = useRef(null)
let view = useRef(null) let view = useRef(null)
const close = () => {
clickref.current.closetip()
}
const confirm = (geometry) => {
const { x, y } = geometry
if (x && y) {
onChange(`${x},${y}`)
setVisible(false)
}
}
const tip = (data) => {
if (!Array.isArray(data)) return null
const { displayFieldName, fields, attributes, geometry } = data[0]
if (geometry) {
geometrystr = `${geometry.x},${geometry.y}`
}
useEffect(() => {
if (clickref.current) {
view.current.goTo({
center: geomUtils.toGeometry({ x: geometry.x, y: geometry.y + 400 }),
zoom: 15
})
}
}, [data])
return (
<div className='tip'>
<div className='tip-header'>
<div>{displayFieldName}</div>
<span className='tip-close' onClick={() => close()}><CloseOutlined /></span>
</div>
<div className='tip-content'>
{
fields?.map(v => {
if (v.editTypeMobile !== '隐藏') {
return (
<div className='tip-list'>
<div className='tip-list-left'>{v.name || v.alias}</div>
<div className='tip-list-right'>{attributes[v.name]}</div>
</div>
)
}
return null
})
}
</div>
<div className='tip-footer'>
<span className='confirm' onClick={() => confirm(geometry)}>确定</span>
<div className='triangle'></div>
<div className='angle'></div>
</div>
</div>
);
};
const getMapInfo = (mapObj, Map) => { const getMapInfo = (mapObj, Map) => {
setTimeout(() => { setTimeout(() => {
if (mapObj) { if (mapObj) {
view.current = mapObj view.current = mapObj
let arr = (value && value.split(',')) || []
let obj = (arr.length === 2) ? { point: { x: Number(arr[0]), y: Number(arr[1]) } } : {}
if (arr.length === 2) {
view.current.goTo({
center: geomUtils.toGeometry({ x: Number(arr[0]), y: Number(arr[1]) }),
zoom: 15
})
}
clickref.current = new ClickQuery({
view: view.current,
offsetX: -150,
offsetY: -310,
continuous: true,
...obj,
callback: ({ clickPoint, matchPoint, data }) => {
gisInfo = {}
if (layer) {
view.current.map.remove(layer)
}
if (matchPoint) {
geometrystr = `${matchPoint.x},${matchPoint.y}`
gisInfo = { layerName: data.layerName, gisCode: data.attributes.code }
} else if (clickPoint) {
geometrystr = `${clickPoint.x},${clickPoint.y}`
layer = new GraphicsLayer({
id: 'ok-layers',
})
if (geometrystr) {
const polypointGraphic = new Graphic({
geometry: geomUtils.toGeometry({
x: Number(geometrystr.split(',')[0]),
y: Number(geometrystr.split(',')[1])
}),
symbol: {
type: "picture-marker",
url: point,
width: "20px",
height: "20px"
},
})
layer.add(polypointGraphic)
view.current.map.add(layer)
}
}
}
})
} }
let arr = value && value.split(',')
let obj = (arr.length === 2) ? { point: { x: Number(arr[0]), y: Number(arr[1]) } } : {}
clickref.current = new ClickQuery({
view: view.current,
tipcontent: tip,
offsetX: -150,
offsetY: -310,
continuous: true,
...obj
})
}, 500) }, 500)
} }
...@@ -100,6 +262,16 @@ const Device = ({ value, onChange, schema }) => { ...@@ -100,6 +262,16 @@ const Device = ({ value, onChange, schema }) => {
const onOk = () => { const onOk = () => {
onChange(geometrystr) onChange(geometrystr)
// if (Array.isArray(paths)) {
// paths.forEach(v => {
// if (v.fileName === 'GIS编码' && gisInfo.layerName) {
// addons.setValue(v.path, gisInfo.gisCode)
// }
// if (v.fileName === 'GIS图层' && gisInfo.layerName) {
// addons.setValue(v.path, gisInfo.layerName)
// }
// })
// }
setVisible(false) setVisible(false)
} }
...@@ -113,6 +285,7 @@ const Device = ({ value, onChange, schema }) => { ...@@ -113,6 +285,7 @@ const Device = ({ value, onChange, schema }) => {
disabled={disabled} disabled={disabled}
value={value} value={value}
placeholder={placeholder} placeholder={placeholder}
onClick={iconClick}
addonAfter={disabled ? null : <CompassOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} onClick={iconClick} />} addonAfter={disabled ? null : <CompassOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} onClick={iconClick} />}
style={{ width: '100%' }} style={{ width: '100%' }}
/> />
......
src/core/widgets/date/DateTime/index.js
View file @ a007dc7c
...@@ -7,36 +7,34 @@ import locale from 'antd/lib/date-picker/locale/zh_CN' ...@@ -7,36 +7,34 @@ import locale from 'antd/lib/date-picker/locale/zh_CN'
const DateTime = (props) => { const DateTime = (props) => {
const { value, onChange, schema } = props const { value, onChange, schema } = props
const { disabled, format, presetValue, placeholder, currentDate, defaultCurrent } = schema
const { disabled, format, presetValue, placeholder, groupStyle } = schema
console.log('日期时间', props)
const valueShow = useMemo(() => { const valueShow = useMemo(() => {
// console.log('value+presetValue', value, presetValue) if (defaultCurrent) {
return (value || new Date()) ? moment(value || new Date()) : null
}
return (value || presetValue) ? moment(value || presetValue) : null return (value || presetValue) ? moment(value || presetValue) : null
}, [presetValue, value]) }, [presetValue, defaultCurrent, value])
const disabledDate = (current) => { const disabledDate = (current) => {
if (schema.config === '不超过当前时间') { if (currentDate) {
return current && current > moment(); return current && current > moment()
} else { } else {
return false return false
} }
} }
const dateChange = (date, dateStr) => { const dateChange = (date, dateStr) => {
onChange(dateStr) if (date && date._d) {
} onChange(moment(date._d).format('YYYY-MM-DD HH:ss:mm'))
} else {
const onOk = (value) => { onChange(null)
console.log('value', value) }
} }
// console.log('valueShow', valueShow)
return ( return (
<DatePicker <DatePicker
disabledDate={disabledDate}
picker={format} picker={format}
disabled={disabled} disabled={disabled}
placeholder={placeholder} placeholder={placeholder}
...@@ -46,7 +44,6 @@ const DateTime = (props) => { ...@@ -46,7 +44,6 @@ const DateTime = (props) => {
showTime={format === 'dateTime'} showTime={format === 'dateTime'}
style={{ width: '100%' }} style={{ width: '100%' }}
locale={locale} locale={locale}
onOk={onOk}
/> />
); );
......
src/core/widgets/date/Time/index.js
View file @ a007dc7c
...@@ -7,20 +7,37 @@ const Time = (props) => { ...@@ -7,20 +7,37 @@ const Time = (props) => {
console.log('props', props) console.log('props', props)
const { value, onChange, schema, addons } = props const { value, onChange, schema, addons } = props
const { presetValue } = schema const { presetValue, currentDate, defaultCurrent } = schema
const valueShow = useMemo(() => { const valueShow = useMemo(() => {
if (defaultCurrent) {
return (value || new Date()) ? moment(value || new Date(), 'HH:mm:ss') : null
}
return (value || presetValue) ? moment(value || presetValue, 'HH:mm:ss') : null return (value || presetValue) ? moment(value || presetValue, 'HH:mm:ss') : null
}, [presetValue, value]) }, [presetValue, value, defaultCurrent])
const disabledDate = (current) => {
if (currentDate) {
return current && current.format('HH:mm:ss') > moment().format('HH:mm:ss')
} else {
return false
}
}
const timeChange = (time, timeStr) => { const timeChange = (time, timeStr) => {
onChange(timeStr) onChange(timeStr)
} }
return ( return (
<TimePicker style={{ width: '100%' }} value={valueShow} onChange={timeChange} /> <TimePicker
style={{ width: '100%' }}
value={valueShow}
onChange={timeChange}
disabledDate={disabledDate}
/>
) )
} }
export default Time export default Time
\ No newline at end of file
src/core/widgets/select/ComboBox/index.js
View file @ a007dc7c
...@@ -13,12 +13,12 @@ const ComboBox = ({ value, onChange, schema }) => { ...@@ -13,12 +13,12 @@ const ComboBox = ({ value, onChange, schema }) => {
const [site, setSite] = useState([]) const [site, setSite] = useState([])
const valueShow = useMemo(() => { const valueShow = useMemo(() => {
if (isMultiple) { if (isMultiple || isEdit) {
return (value || presetValue) ? (value || presetValue).split(',') : [] return (value || presetValue) ? (value || presetValue).split(',') : []
} else { } else {
return value || presetValue || null return value || presetValue || null
} }
}, [presetValue, value]) }, [isEdit, isMultiple, presetValue, value])
const enums = useMemo(() => { const enums = useMemo(() => {
switch (soruceType) { switch (soruceType) {
...@@ -35,15 +35,21 @@ const ComboBox = ({ value, onChange, schema }) => { ...@@ -35,15 +35,21 @@ const ComboBox = ({ value, onChange, schema }) => {
} }
}, [soruceType, options, dictionaryList, tableData, site]) }, [soruceType, options, dictionaryList, tableData, site])
const handleChange = value => { const children = useMemo(() => {
if (isEdit) { let children = []
if (Array.isArray(enums)) {
enums.forEach(v => {
children.push(<Option key={v}>{v}</Option>)
})
}
return children
}, [enums])
const handleChange = value => {
if (isMultiple || isEdit) {
onChange(value.join(','))
} else { } else {
if (isMultiple) { onChange(value)
onChange(value.join(','))
} else {
onChange(value)
}
} }
} }
...@@ -93,15 +99,16 @@ const ComboBox = ({ value, onChange, schema }) => { ...@@ -93,15 +99,16 @@ const ComboBox = ({ value, onChange, schema }) => {
<Select <Select
onFocus={onFocus} onFocus={onFocus}
style={{ width: '100%' }} style={{ width: '100%' }}
mode={isMultiple ? 'multiple' : ''} mode={isEdit ? 'tags' : (isMultiple ? 'multiple' : '')}
disabled={disabled} disabled={disabled}
showArrow={!disabled} showArrow={!disabled}
showSearch
value={valueShow} value={valueShow}
placeholder={placeholder} placeholder={placeholder}
onChange={handleChange} onChange={handleChange}
allowClear allowClear
> >
{enums.map(v => <Option value={v} key={v}>{v}</Option>)} {children}
</Select> </Select>
) )
......
src/core/widgets/select/TableAccount/index.js deleted 100644 → 0
View file @ 00d395c0
// 台账选择器
/*
** 台账选择器
** 功能路径：src\core\components\tableAccount\tableAccount.js
** 菜单参数列表：*变量名*(变量说明，数据类型，是否必填，取值范围)
** 更新日志：
** edit by ChenLong on 2021/12/23: ***** 1.修改无法点击选择的bug；2.现在初始化状态下，不显示其他台账；3.文件类字段不显示 *****
** edit by ChenLong on 2022/02/28: ***** 1.使用btoa来给condition转码;转码 window.btoa(encodeURIComponent('aaa'))；恢复 decodeURIComponent(window.atob('bbb')) *****
** edit by ChenLong on 2022/08/02: ***** 1.台账接口需要sortFields才能开启排序 *****
*/
import React, { useState } from 'react';
import { Modal, Button, Radio, Input, Table, Space, ConfigProvider, message } from 'antd';
import BasicTable from '@wisdom-components/basictable';
import { SnippetsOutlined } from '@ant-design/icons';
import zhCN from 'antd/es/locale/zh_CN';
import Empty from '@wisdom-components/empty/lib';
import { GetAccountConfigInfo, GetAccountPageList } from '../../../../apis/process';
import './index.less';
const { Column } = Table;
const { Search } = Input;
const FILE_TYPE = ['文件', '可预览文件', '图片', '可预览图片', '录音', '视频'];
class TableAccount extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false,
columns: [],
tableData: [],
tableAccountValue: '',
searchVal: '',
loading: true,
pagination: {
current: 1,
pageSize: 20,
total: 0,
size: 'default',
},
isInit: true,
selectionType: 'radio',
selectedRowKeys: [...props.value.split(',')],
rowSelection: {
onChange: (selectedRowKeys, record) => {
console.log('selectedRowKeys', selectedRowKeys)
this.setState({
tableAccountValue: selectedRowKeys.join(','),
showString: record.map(item => item[this.state.showKey]).join(','),
selectedRowKeys,
});
},
},
showString: props.value, //edit by Chenlong 2022年10月28日 修复初始加载无法填充值的问题
accountName: '',
condition: '',
// 新增rowKey、showKey
rowKey: '',
showKey: '',
// 用showKey来显示
};
}
componentDidMount() {
this.handleConfig(
() => {
this.getAccountConfig(
() => this.getAccountPageListFn(this.state.info, this.state.info ? '' : this.state.condition),
);
},
);
}
returnSelectType(selectionTypeStr) {
const typeObj = {
'台账选择器': 'radio',
'多选台账选择器': 'checkbox',
};
return typeObj[selectionTypeStr];
}
/**
* @Description: 获取配置
* @Params: 传递callback，看情况是否需要调用
* @Date: 2021/12/27
* */
getAccountConfig(callback) {
GetAccountConfigInfo(this.state.accountName).then(res => {
if (res.code === 0) {
const colArr = [];
const arr = res.data.webShowFieldGroup.split(',');
arr.forEach(item => {
if (!item) {
return;
}
colArr.push({
key: new Date().getTime(),
title: item,
dataIndex: item,
});
});
this.setState(
{
columns: colArr,
total: res.data.totalCount,
}, () => {
if (callback) {
callback();
}
});
} else {
this.props.onChange(`出错了！${res.msg}`);
}
});
}
async getAccountPageListFn(info, condition) {
this.setState({
loading: true,
});
const arrWrap = [];
let showStringArray = [];
let getAllData = async () => {
let _infoList = info.split(',');
await Promise.all(_infoList.map(async currentInfo => {
await GetAccountPageList({
pageIndex: this.state.pagination.current,
pageSize: this.state.pagination.pageSize,
accountName: this.state.accountName,
sortFields: '录入时间',
info: currentInfo,
condition: condition ? window.btoa(encodeURIComponent(condition)) : ''
}).then(
response => {
if (response.code === 0) {
response.data.list.forEach(item => {
const obj = this.handleItem(item);
obj.key = obj[this.state.rowKey];
if (this.state.isInit && this.state.info) {
if (currentInfo === obj[this.state.rowKey]) {
arrWrap.push(obj);
showStringArray.push(obj[this.state.showKey]);
}
} else {
arrWrap.push(obj);
}
});
} else {
this.props.onChange(`出错了！${response.msg}`);
}
},
).catch(err => {
this.setState({
loading: false,
});
});
}));
};
await getAllData();
this.setState({
loading: false,
tableData: arrWrap,
showString: showStringArray.join(','),
});
}
handleConfig(callback) {
// 判断是否有 ?
const _configArray = this.props.schema.config.split('?');
const condition = _configArray[1];
// 台账名称.台账字段|显示字段.n
const _accountInfo = _configArray[0].split('.');
// 是否多选
this.setState({
selectionType: _accountInfo.includes('n') ? 'checkbox' : 'radio',
});
// 台账名称
const accountName = _accountInfo[0];
let rowKey = '';
let showKey = '';
if (_accountInfo[1] && _accountInfo[1].indexOf('|') > -1) {
const keyArr = _accountInfo[1].split('|');
rowKey = keyArr[0];
showKey = keyArr[1];
} else {
rowKey = _accountInfo[1];
showKey = _accountInfo[1];
}
// this.state.searchVal || 初始化时候的值
const info = this.props.value || this.state.searchVal || '';
this.setState({
accountName,
rowKey,
showKey,
condition,
info,
}, () => {
if (callback) callback();
});
}
handleItem(obj) {
const dataObj = obj;
const objarr = [];
const objobj = {};
let fieldValue = [];
dataObj.webRow.forEach((item, index) => {
if (FILE_TYPE.includes(item.shape)) {
fieldValue.push(item.fieldName);
} else {
objarr.push(item.fieldValue);
}
});
let _columns = [...this.state.columns];
_columns = _columns.filter(item => !fieldValue.includes(item.dataIndex));
for (let i = 0; i < _columns.length; i++) {
for (let j = 0; j < objarr.length; j++) {
if (i === j) {
objobj[_columns[i].dataIndex] = objarr[j];
}
}
}
this.setState({
columns: _columns,
});
return objobj;
}
handleInputClick(e) {
this.setState({
visible: true,
}, () => {
if (this.state.tableData.length === 0) {
}
});
}
onOk() {
this.setState(
{
visible: false,
searchVal: '',
},
() => {
this.props.onChange(this.state.tableAccountValue);
},
);
}
onCancel() {
this.setState({
visible: false,
searchVal: '',
isInit: true,
});
}
onSearch(val) {
this.setState(
{
searchVal: val,
},
() => {
this.getAccountPageListFn(val, this.state.condition);
},
);
}
handleInputChange(e) {
console.log(e);
}
tableChange(pagination) {
this.setState(
{
pagination,
},
() => {
this.getAccountPageListFn(this.state.searchVal, this.state.condition);
},
);
}
render() {
return (
<div className="tableAccount-wrapper" style={{ width: '100%' }} ref={'modal'}>
<Input
disabled={this.props.schema.disabled}
value={this.state.showString}
placeholder={this.props.schema.disabled ? null : '点击选择台账'}
addonAfter={
!this.props.schema.disabled ? <SnippetsOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }}
onClick={this.handleInputClick.bind(this)} /> : ''
}
/>
<Modal
title="台账信息"
visible={this.state.visible}
onCancel={this.onCancel.bind(this)}
onOk={this.onOk.bind(this)}
cancelText={'取消'}
okText={'确定'}
width={'60%'}
bodyStyle={{ height: 505, overflowY: 'auto' }}
wrapClassName="tableAccountClass"
destroyOnClose
>
{
this.state.isInit ?
<Button style={{ width: 120, marginBottom: 20 }} type={'primary'}
onClick={() => this.setState(({ isInit: false }))}>点击搜索、更换</Button> :
<Search
placeholder="请输入检索内容"
allowClear
onSearch={this.onSearch.bind(this)}
enterButton
size={'middle'}
style={{ width: '400px', marginBottom: '10px' }}
/>
}
{!this.state.columns.length && (
<div className={'tableAccountEmpty'}>
<Empty />
</div>
) || <ConfigProvider locale={zhCN}>
{/* <BasicTable
rowSelection={{
type: this.state.selectionType,
...this.state.rowSelection,
selectedRowKeys: this.state.selectedRowKeys,
fixed: 'left',
}}
bordered
size="small"
columns={this.state.columns}
dataSource={this.state.tableData}
rowClassName="rowClassName"
style={{ width: '100%' }}
sticky
loading={this.state.loading}
scroll={{ x: 1500, y: 340 }}
pagination={this.state.pagination}
onChange={this.tableChange.bind(this)}
/> */}
<Table
rowSelection={{
type: this.state.selectionType,
...this.state.rowSelection,
selectedRowKeys: this.state.selectedRowKeys,
fixed: 'left',
}}
bordered
size="small"
columns={this.state.columns}
dataSource={this.state.tableData}
rowClassName="rowClassName"
style={{ width: '100%' }}
sticky
loading={this.state.loading}
scroll={{ x: 1500, y: 340 }}
pagination={this.state.pagination}
onChange={this.tableChange.bind(this)}
/>
</ConfigProvider>}
</Modal>
</div>
);
}
}
export default TableAccount;
src/core/widgets/select/TableAccount/index.less deleted 100644 → 0
View file @ 00d395c0
@import '~antd/es/style/themes/default.less';
.tableAccountClass {
.@{ant-prefix}-modal-body {
display: flex;
flex-direction: column;
padding: 15px 24px 0 24px;
.tableAccountEmpty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
}
}
src/core/widgets/settings/groupBase/DateDefault/index.js
View file @ a007dc7c
...@@ -5,28 +5,23 @@ import locale from 'antd/lib/date-picker/locale/zh_CN' ...@@ -5,28 +5,23 @@ import locale from 'antd/lib/date-picker/locale/zh_CN'
const DateDefault = (props) => { const DateDefault = (props) => {
console.log('props', props)
const { onChange, addons, schema } = props const { onChange, addons, schema } = props
const { format } = schema const { dateFormat } = schema
const dateChange = (date, dateStr) => { const dateChange = (date, dateStr) => {
onChange(dateStr) if (date && date._d) {
} onChange(moment(date._d).format('YYYY-MM-DD HH:ss:mm'))
} else {
const onOk = (value) => { onChange(null)
console.log('value', value) }
} }
if (dateFormat === 'dateTime') {
console.log('format', format)
if (format === 'dateTime') {
return ( return (
<DatePicker <DatePicker
picker={format} picker={dateFormat}
// value={valueShow} // value={valueShow}
onChange={dateChange} onChange={dateChange}
onOk={onOk} // onOk={onOk}
showNow showNow
showTime showTime
style={{ width: '100%' }} style={{ width: '100%' }}
...@@ -37,15 +32,15 @@ const DateDefault = (props) => { ...@@ -37,15 +32,15 @@ const DateDefault = (props) => {
return ( return (
<DatePicker <DatePicker
picker={format} picker={dateFormat}
// value={valueShow} // value={valueShow}
onChange={dateChange} onChange={dateChange}
onOk={onOk} // onOk={onOk}
style={{ width: '100%' }} style={{ width: '100%' }}
locale={locale} // locale={locale}
/> />
) )
} }
export default DateDefault export default DateDefault
src/core/widgets/settings/groupSource/AccountName/index.js
View file @ a007dc7c
...@@ -4,8 +4,6 @@ import { LoadLedgers } from '../../../../../apis/process' ...@@ -4,8 +4,6 @@ import { LoadLedgers } from '../../../../../apis/process'
const AccountName = (props) => { const AccountName = (props) => {
console.log('props', props)
const { value, onChange } = props const { value, onChange } = props
const [options, setOptions] = useState([]) const [options, setOptions] = useState([])
......
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