Commit 79b905ae authored by 田翔's avatar 田翔

附件控件优化

parent 6905ba0b
{ {
"name": "panda-xform", "name": "panda-xform",
"version": "1.4.0", "version": "1.4.1",
"description": "1.4.0: 统一表单配置信息", "description": "1.4.1: 附件控件优化",
"keywords": [ "keywords": [
"panda-xform" "panda-xform"
], ],
......
...@@ -137,7 +137,7 @@ const globalSettings = { ...@@ -137,7 +137,7 @@ const globalSettings = {
title: '整体布局', title: '整体布局',
type: 'number', type: 'number',
enum: [1, 2, 3], enum: [1, 2, 3],
default: 1, default: 3,
enumNames: ['一行一列', '一行两列', '一行三列'], enumNames: ['一行一列', '一行两列', '一行三列'],
widget: 'select', widget: 'select',
props: { props: {
...@@ -167,8 +167,6 @@ const globalSettings = { ...@@ -167,8 +167,6 @@ const globalSettings = {
}, },
}, },
}, },
} }
export { export {
......
This diff is collapsed.
import React, { useEffect, useMemo, useState } from 'react' import React, { useEffect, useMemo, useState } from 'react'
import styles from './index.less' import styles from './index.less'
import { Upload, Button, message, Modal } from 'antd' import { Upload, Button, message, Modal } from 'antd'
import { UploadOutlined, FileOutlined } from '@ant-design/icons' import { UploadOutlined, FileOutlined, ArrowDownOutlined } from '@ant-design/icons'
import FileViewer from 'react-file-viewer' import FileViewer from 'react-file-viewer'
import { uploadFileUrl, downloadFileUrl, downloadFile } from '../../../../apis/process' import { uploadFileUrl, downloadFileUrl, downloadFile } from '../../../../apis/process'
import { downloadFunc, filenameVerification } from '../../../../utils/utils' import { downloadFunc, filenameVerification } from '../../../../utils/utils'
const accepts = { const accepts = {
'全部': [],
'图片': ['.bmp', '.gif', '.jpeg', 'tiff', '.png', '.svg', '.jpg'], '图片': ['.bmp', '.gif', '.jpeg', 'tiff', '.png', '.svg', '.jpg'],
// '文档': ['.docx', '.xlsx', '.pdf'], '文档': ['.docx', '.xlsx', '.pdf'],
'文档': [],
'视频': ['.mp4'], '视频': ['.mp4'],
'音频': ['.mp3'], '音频': ['.mp3'],
} }
...@@ -51,7 +51,7 @@ const getFileType = (fileName) => { ...@@ -51,7 +51,7 @@ const getFileType = (fileName) => {
const FileUpload = (props) => { const FileUpload = (props) => {
const { value, schema, onChange } = props const { value, schema, onChange } = props
const { disabled, fileType, listType, presetValue, placeholder } = schema const { disabled, fileType, showType, presetValue, placeholder, preview, download } = schema
const [showList, setShowList] = useState('') const [showList, setShowList] = useState('')
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false)
...@@ -60,8 +60,13 @@ const FileUpload = (props) => { ...@@ -60,8 +60,13 @@ const FileUpload = (props) => {
const option = { const option = {
name: 'file', name: 'file',
action: `${window.location.origin}${uploadFileUrl}`, action: `${window.location.origin}${uploadFileUrl}`,
listType: listType, listType: showType,
withCredentials: true, withCredentials: true,
showUploadList: download ?
{
showDownloadIcon: '下载',
downloadIcon: <ArrowDownOutlined />,
} : {},
beforeUpload(file, fileList) { beforeUpload(file, fileList) {
/** @Tips: 解决提交文件中存在特殊字符的问题 */ /** @Tips: 解决提交文件中存在特殊字符的问题 */
let _continueUpload = true; let _continueUpload = true;
...@@ -104,6 +109,7 @@ const FileUpload = (props) => { ...@@ -104,6 +109,7 @@ const FileUpload = (props) => {
} }
}, },
onPreview: (file) => { onPreview: (file) => {
if (!preview) return message.info('该附件禁止预览')
let fileType = getFileType(file.name) let fileType = getFileType(file.name)
if (fileType) { if (fileType) {
setShowFile({ name: file.name, fileType: fileType, filePath: file.url }) setShowFile({ name: file.name, fileType: fileType, filePath: file.url })
...@@ -161,7 +167,11 @@ const FileUpload = (props) => { ...@@ -161,7 +167,11 @@ const FileUpload = (props) => {
iconRender={iconRender} iconRender={iconRender}
{...option} {...option}
> >
{listType !== 'picture-card' ? <Button icon={<UploadOutlined />}>{placeholder || '上传'}</Button> : (disabled ? null : (placeholder || '+ 上传'))} {
showType !== 'picture-card' ?
<Button icon={<UploadOutlined />}>{placeholder || '上传'}</Button>
: (disabled ? null : (placeholder || '+ 上传'))
}
</Upload> </Upload>
<Modal <Modal
width={'70%'} width={'70%'}
......
...@@ -33,12 +33,12 @@ const VerifyTextInput = (props) => { ...@@ -33,12 +33,12 @@ const VerifyTextInput = (props) => {
}, [value]) }, [value])
const selectChange = (value) => { const selectChange = (value) => {
if (value) {
const item = options.find(v => v.value === value) const item = options.find(v => v.value === value)
onChange([{ pattern: value, message: item.message }])
onChange([{ } else {
pattern: value, onChange([])
message: item.message, }
}])
} }
return ( return (
......
...@@ -9,34 +9,29 @@ const options = [ ...@@ -9,34 +9,29 @@ const options = [
const InputDefault = (props) => { const InputDefault = (props) => {
console.log('props', props)
const { value, onChange } = props const { value, onChange } = props
const [visible, setVisible] = useState(false)
const style = useMemo(() => { const style = useMemo(() => {
let paths = ['【本人姓名】', '【本人部门】']
},) if (paths.includes(value)) {
return { color: 'blue' }
const iconClick = () => {
setVisible(true)
} }
return null
}, [value])
const onOk = () => { const selectChange = (value) => {
onChange(value)
} }
const onCancel = () => {
setVisible(false)
}
const selectChange = (value) => { const inputChange = (e) => {
onChange(value) onChange(e.target.value)
} }
const content = ( const content = (
<Select <Select
allowClear
placeholder='请选择环境变量'
style={{ width: '100%' }} style={{ width: '100%' }}
options={options} options={options}
onChange={selectChange} onChange={selectChange}
...@@ -48,13 +43,13 @@ const InputDefault = (props) => { ...@@ -48,13 +43,13 @@ const InputDefault = (props) => {
<div className='InputDefault'> <div className='InputDefault'>
<Input <Input
value={value} value={value}
onChange={(e) => onChange(e.target.value)} onChange={inputChange}
style={style} style={style}
addonAfter={ addonAfter={
<Popover <Popover
placement="topRight" placement="topRight"
content={content} content={content}
title="数据将从环境变量读取" title="环境变量"
trigger="click" trigger="click"
> >
<EllipsisOutlined /> <EllipsisOutlined />
......
...@@ -6,6 +6,8 @@ const Placeholder = (props) => { ...@@ -6,6 +6,8 @@ const Placeholder = (props) => {
const { value, addons, onChange } = props const { value, addons, onChange } = props
const { title } = addons.formData const { title } = addons.formData
console.log('props', props)
const inputChange = (e) => { const inputChange = (e) => {
onChange(e.target.value) onChange(e.target.value)
} }
......
import InputDefault from "./InputDefault" import InputDefault from './InputDefault'
import Placeholder from './Placeholder'
const base = { const base = {
InputDefault, InputDefault,
Placeholder,
} }
export default base export default base
\ No newline at end of file
...@@ -3,7 +3,6 @@ import BooleanSwitch from './BooleanSwitch' ...@@ -3,7 +3,6 @@ import BooleanSwitch from './BooleanSwitch'
import EnumOptions from './EnumOptions' import EnumOptions from './EnumOptions'
import FieldNames from './FieldNames' import FieldNames from './FieldNames'
import InputAddon from './InputAddon' import InputAddon from './InputAddon'
import Placeholder from './Placeholder'
import CascadeField from './CascadeField' import CascadeField from './CascadeField'
import DateSelect from './DateSelect' import DateSelect from './DateSelect'
import DataSource from './DataSource' import DataSource from './DataSource'
...@@ -15,7 +14,6 @@ const settings = { ...@@ -15,7 +14,6 @@ const settings = {
EnumOptions, EnumOptions,
FieldNames, FieldNames,
InputAddon, InputAddon,
Placeholder,
CascadeField, CascadeField,
DateSelect, DateSelect,
DataSource, DataSource,
......
...@@ -4,7 +4,7 @@ import style from '../../style' ...@@ -4,7 +4,7 @@ import style from '../../style'
const NumberInput = ({ value, onChange, schema }) => { const NumberInput = ({ value, onChange, schema }) => {
const { disabled, presetValue } = schema const { disabled, presetValue, placeholder } = schema
const valueShow = useMemo(() => { const valueShow = useMemo(() => {
return presetValue || value return presetValue || value
...@@ -12,6 +12,7 @@ const NumberInput = ({ value, onChange, schema }) => { ...@@ -12,6 +12,7 @@ const NumberInput = ({ value, onChange, schema }) => {
return ( return (
<InputNumber <InputNumber
placeholder={placeholder}
disabled={disabled} disabled={disabled}
value={valueShow} value={valueShow}
onChange={value => onChange(value)} onChange={value => onChange(value)}
......
...@@ -25,31 +25,6 @@ const RichText = forwardRef(({ schema, onChange, value }, ref) => { ...@@ -25,31 +25,6 @@ const RichText = forwardRef(({ schema, onChange, value }, ref) => {
return value || presetValue return value || presetValue
}, [presetValue, value]) }, [presetValue, value])
// 图片上传
const uploadImg = file => {
const formData = new FormData();
formData.append('file', file);
setLoading(true);
request({
url: uploadFileAPI,
method: 'POST',
data: formData,
})
.then(res => {
if (!res.data) return;
// eslint-disable-next-line no-useless-escape
const img = res.data.replace(/[\\ \/=]/g, '/');
const imgHtml = `
<img contenteditable="false" style="display: block;" width="50%" src="${downFileAPI}?filePath=${img}" >
`;
editor.cmd.do('insertHTML', imgHtml);
setLoading(false);
})
.catch(err => {
setLoading(false);
});
}
const editorChange = (editor) => { const editorChange = (editor) => {
onChange(editor.getHtml()) onChange(editor.getHtml())
} }
......
...@@ -5,7 +5,7 @@ const TextArea = ({ value, onChange, schema }) => { ...@@ -5,7 +5,7 @@ const TextArea = ({ value, onChange, schema }) => {
console.log('多行文本', schema) console.log('多行文本', schema)
const { disabled, placeholder, presetValue } = schema const { disabled, placeholder, presetValue, maxLength, rows } = schema
const valueShow = useMemo(() => { const valueShow = useMemo(() => {
return presetValue || value return presetValue || value
...@@ -18,9 +18,10 @@ const TextArea = ({ value, onChange, schema }) => { ...@@ -18,9 +18,10 @@ const TextArea = ({ value, onChange, schema }) => {
return ( return (
<Input.TextArea <Input.TextArea
maxLength={maxLength}
disabled={disabled} disabled={disabled}
value={valueShow} value={valueShow}
rows={5} rows={rows}
placeholder={placeholder} placeholder={placeholder}
onChange={handleChange} onChange={handleChange}
/> />
......
...@@ -7,21 +7,35 @@ const iconList = Object.keys(icons).filter((item) => typeof icons[item] === 'obj ...@@ -7,21 +7,35 @@ const iconList = Object.keys(icons).filter((item) => typeof icons[item] === 'obj
const TextInput = (props) => { const TextInput = (props) => {
const userInfo = window?.globalConfig?.userInfo || { fullName: '【本人姓名】', depart: { name: '【本人部门】' } }
const { value, onChange, schema } = props const { value, onChange, schema } = props
const { disabled, placeholder, presetValue, prefix, suffix, maxLength, rules } = schema const { disabled, placeholder, presetValue, prefix, suffix, maxLength, rules } = schema
const valueShow = useMemo(() => { const valueShow = useMemo(() => {
return presetValue || value return value || presetValue
}, [presetValue, value]) }, [value, presetValue])
const style = useMemo(() => {
let paths = ['【本人姓名】', '【本人部门】']
if (paths.includes(presetValue)) {
if (presetValue === '【本人姓名】') {
onChange(userInfo.fullName)
} else if (presetValue === '【本人部门】') {
onChange(userInfo.depart.name)
}
return { color: 'blue' }
}
return null
}, [presetValue])
const handleChange = (e) => { const handleChange = (e) => {
onChange(e.target.value) onChange(e.target.value)
} }
console.log('rules', rules)
return ( return (
<Input <Input
style={style}
rules={rules} rules={rules}
disabled={disabled} disabled={disabled}
value={valueShow} value={valueShow}
......
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