import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Form, Row, Col, Input, InputNumber, Select, DatePicker, notification, Checkbox, Radio, Tooltip, Icon } from 'antd'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import options from '@/store/options.js'
|
import { formRule } from '@/utils/option.js'
|
import Utils from '@/utils/utils.js'
|
import CustomSwitch from './customSwitch'
|
import asyncComponent from '@/utils/asyncComponent'
|
import CheckCard from './checkCard'
|
import './index.scss'
|
|
const {MonthPicker} = DatePicker
|
const { TextArea } = Input
|
const FileUpload = asyncComponent(() => import('../fileupload'))
|
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
|
|
class MainSearch extends Component {
|
static propTpyes = {
|
menuType: PropTypes.object, // 菜单类型，是否为HS
|
action: PropTypes.object, // 按钮信息、表单列表
|
dict: PropTypes.object, // 字典项
|
data: PropTypes.any, // 表格数据
|
BID: PropTypes.any, // 主表ID
|
BData: PropTypes.any, // 主表数据
|
inputSubmit: PropTypes.func // input回车提交
|
}
|
|
state = {
|
cols: 2, // 显示为多少列
|
datatype: null, // 数据类型
|
readtype: null, // 是否只读
|
readin: null, // 行数据是否写入
|
writein: null, // 执行时是否填入默认sql
|
fieldlen: null, // 字段长度
|
formlist: [], // 表单项
|
encrypts: [], // 加密字段
|
intercepts: [], // 截取字段
|
record: {} // 记录下拉表单关联字段，用于数据写入
|
}
|
|
UNSAFE_componentWillMount () {
|
let cols = 2
|
if (this.props.action.setting && this.props.action.setting.cols) {
|
cols = parseInt(this.props.action.setting.cols)
|
if (cols > 4 || cols < 1) {
|
cols = 2
|
}
|
}
|
|
this.setState({
|
cols: cols
|
})
|
}
|
|
componentDidMount () {
|
const { data, BData } = this.props
|
let action = fromJS(this.props.action).toJS()
|
|
let datatype = {}
|
let readtype = {}
|
let readin = {}
|
let writein = {}
|
let fieldlen = {}
|
let formlist = []
|
let encrypts = []
|
let intercepts = []
|
let _inputfields = []
|
|
if (action.groups.length > 0) {
|
action.groups.forEach(group => {
|
if (group.sublist.length === 0) return
|
|
if (!group.default) {
|
formlist.push({
|
type: 'title',
|
label: group.label,
|
uuid: group.uuid
|
})
|
}
|
|
formlist.push(...group.sublist)
|
})
|
} else {
|
formlist = action.fields
|
}
|
|
let linkFields = {} // 关联菜单
|
let supItemVal = {} // 上级菜单初始值
|
let deForms = [] // 需要动态获取下拉菜单的表单
|
|
formlist.forEach(item => {
|
if (item.type === 'text' || item.type === 'number') { // 用于过滤下拉菜单关联表单
|
_inputfields.push(item.field)
|
} else if (item.type === 'textarea' && item.encryption === 'true') { // 加密字段
|
encrypts.push(item.field)
|
} else if (item.type === 'link') {
|
linkFields[item.linkField] = linkFields[item.linkField] || []
|
linkFields[item.linkField].push(item.field)
|
}
|
if (item.interception === 'true') { // 字符截取字段
|
intercepts.push(item.field)
|
}
|
})
|
|
formlist = formlist.map(item => {
|
if (item.type === 'title') return item
|
|
// 数据自动填充
|
let _readin = item.readin !== 'false'
|
if (item.type === 'linkMain' || item.type === 'funcvar') {
|
_readin = false
|
}
|
|
let _fieldlen = item.fieldlength || 50
|
if (item.type === 'textarea' || item.type === 'fileupload' || item.type === 'multiselect') {
|
_fieldlen = item.fieldlength || 512
|
} else if (item.type === 'number') {
|
_fieldlen = item.decimal ? item.decimal : 0
|
}
|
|
datatype[item.field] = item.type
|
readtype[item.field] = item.readonly === 'true'
|
readin[item.field] = _readin
|
writein[item.field] = item.writein !== 'false'
|
fieldlen[item.field] = _fieldlen
|
|
if (item.setAll === 'true' && (item.type === 'select' || item.type === 'link' || item.type === 'radio')) { // 添加空值
|
item.options.unshift({
|
key: Utils.getuuid(),
|
Value: '',
|
Text: item.emptyText || '空',
|
ParentID: ''
|
})
|
}
|
|
item.oriOptions = item.options ? fromJS(item.options).toJS() : null // 保存初始列表，用于联动菜单控制
|
|
// 下级表单控制-字段写入
|
if ((item.type === 'select' || item.type === 'radio') && item.linkSubField && item.linkSubField.length > 0) {
|
item.linkSubField = item.linkSubField.filter(_item => _inputfields.includes(_item))
|
}
|
if (item.linkSubField && item.linkSubField.length === 0) {
|
item.linkSubField = null
|
}
|
|
let newval = ''
|
|
if (item.type === 'linkMain') {
|
newval = BData && BData[item.field] ? BData[item.field] : ''
|
} else if (_readin && !/^date/.test(item.type) && this.props.data && this.props.data.hasOwnProperty(item.field)) {
|
newval = this.props.data[item.field]
|
} else if (item.type === 'date') { // 时间搜索
|
if (_readin && this.props.data && this.props.data.hasOwnProperty(item.field)) {
|
newval = this.props.data[item.field]
|
}
|
if (newval) {
|
newval = moment(newval, 'YYYY-MM-DD')
|
newval = newval.format('YYYY-MM-DD') === 'Invalid date' ? '' : newval
|
}
|
if (!newval && item.initval) {
|
newval = moment().subtract(item.initval, 'days')
|
} else if (!newval) {
|
newval = null
|
}
|
} else if (item.type === 'datemonth') {
|
if (_readin && this.props.data && this.props.data.hasOwnProperty(item.field)) {
|
newval = this.props.data[item.field]
|
}
|
if (newval) {
|
newval = moment(newval, 'YYYY-MM')
|
newval = newval.format('YYYY-MM') === 'Invalid date' ? '' : newval
|
}
|
if (!newval && item.initval) {
|
newval = moment().subtract(item.initval, 'month')
|
} else if (!newval) {
|
newval = null
|
}
|
} else if (item.type === 'datetime') {
|
if (_readin && this.props.data && this.props.data.hasOwnProperty(item.field)) {
|
newval = this.props.data[item.field]
|
}
|
if (newval) {
|
newval = moment(newval, 'YYYY-MM-DD HH:mm:ss')
|
newval = newval.format('YYYY-MM-DD HH:mm:ss') === 'Invalid date' ? '' : newval
|
}
|
if (!newval && item.initval) {
|
newval = moment(moment().subtract(item.initval, 'days').format('YYYY-MM-DD') + ' 00:00:00', 'YYYY-MM-DD HH:mm:ss')
|
} else if (!newval) {
|
newval = null
|
}
|
}
|
|
// 加密字段，解密处理
|
if (item.type === 'textarea' && item.encryption === 'true' && newval !== '') {
|
try {
|
newval = window.decodeURIComponent(window.atob(newval))
|
} catch (e) {
|
console.warn(e)
|
}
|
} else if (item.type === 'switch' && newval !== '') { // 开关只接收固定值
|
if (newval !== item.closeVal && newval !== item.openVal) {
|
newval = ''
|
} else if (newval === item.openVal) {
|
newval = true
|
} else {
|
newval = false
|
}
|
}
|
|
// 读取表格数据或设有时间的初始值
|
item.initval = newval !== '' ? newval : item.initval
|
|
// 下拉表单，存在上级菜单时，生成显示值列表，优先以数字判断
|
if (item.supvalue) {
|
let supvals = []
|
item.supvalue.split(',').forEach(val => {
|
supvals.push(val)
|
if (/^([-]?(0|[1-9][0-9]*)(\.[0-9]+)?)$/.test(val)) {
|
supvals.push(+val)
|
}
|
})
|
item.supvalue = supvals
|
}
|
|
if (linkFields[item.field]) {
|
item.linkFields = linkFields[item.field]
|
}
|
supItemVal[item.field] = item.initval
|
|
if (['select', 'link', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type) && item.resourceType === '1') {
|
deForms.push(item)
|
}
|
|
return item
|
})
|
|
formlist = formlist.map(item => {
|
if (item.type === 'link') {
|
item.supInitVal = ''
|
|
if (supItemVal[item.linkField]) {
|
item.supInitVal = supItemVal[item.linkField]
|
} else if (data && data.hasOwnProperty(item.linkField)) {
|
item.supInitVal = data[item.linkField]
|
}
|
|
item.options = item.oriOptions.filter(option => option.ParentID === item.supInitVal || option.Value === '')
|
}
|
return item
|
})
|
|
this.setState({
|
readtype: readtype,
|
datatype: datatype,
|
readin: readin,
|
writein: writein,
|
fieldlen: fieldlen,
|
encrypts: encrypts,
|
intercepts: intercepts,
|
formlist: formlist
|
}, () => {
|
if (action.setting && action.setting.focus) {
|
this.selectInput(action.setting.focus, 'init')
|
}
|
// 用来更新state，防止受控表单初始时不显示
|
this.setState({
|
loaded: true
|
})
|
this.improveActionForm(deForms)
|
})
|
}
|
|
selectInput = (selectId, type) => {
|
try {
|
let _form = document.getElementById('main-form-box')
|
let _inputs = _form.getElementsByTagName('input')
|
_inputs = [..._inputs]
|
_inputs.forEach(input => {
|
if (!input || input.id !== selectId) return
|
|
if (input.className === 'ant-select-search__field' && type !== 'init') {
|
let div = input.parentNode
|
while (div && div.parentNode) {
|
div = div.parentNode
|
if (div.id === selectId) {
|
div && div.click && div.click()
|
div = null
|
}
|
}
|
} else if (input.select) {
|
input.select()
|
} else if (input.focus) {
|
input.focus()
|
}
|
})
|
} catch {
|
console.warn('focus error！')
|
}
|
}
|
|
/**
|
* @description 获取下拉表单选项信息
|
*/
|
improveActionForm = (deForms) => {
|
const { BID, menuType } = this.props
|
const { formlist } = this.state
|
|
if (deForms.length === 0) {
|
return
|
} else if (menuType !== 'HS' && options.sysType === 'local' && !window.GLOB.systemType) {
|
this.improveSimpleActionForm(deForms)
|
return
|
}
|
|
let deffers = []
|
let mainItems = [] // 云端或单点数据
|
let localItems = [] // 本地数据
|
|
deForms.forEach(item => {
|
if (item.database === 'sso') {
|
mainItems.push(`select '${item.field}' as obj_name,'${item.arr_field}' as arr_field,'${item.base_sql}' as LText`)
|
} else {
|
localItems.push(`select '${item.field}' as obj_name,'${item.arr_field}' as arr_field,'${item.base_sql}' as LText`)
|
}
|
})
|
|
if (menuType !== 'HS' && window.GLOB.systemType !== 'production') {
|
localItems = [...localItems, ...mainItems]
|
mainItems = []
|
}
|
|
// 本地请求
|
let param = {
|
func: 'sPC_Get_SelectedList',
|
LText: localItems.join(' union all '),
|
obj_name: '',
|
arr_field: '',
|
table_type: 'Y'
|
}
|
|
if (BID) {
|
param.BID = BID
|
}
|
|
if (param.LText) {
|
param.LText = Utils.formatOptions(param.LText)
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.secretkey = Utils.encrypt(param.LText, param.timestamp)
|
|
if (menuType === 'HS') { // 云端数据验证
|
param.open_key = Utils.encryptOpenKey(param.secretkey, param.timestamp)
|
}
|
|
deffers.push(
|
new Promise(resolve => {
|
Api.getSystemCacheConfig(param).then(res => {
|
if (!res.status) {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
resolve(res)
|
})
|
})
|
)
|
}
|
|
// 系统请求
|
let mainparam = {
|
func: 'sPC_Get_SelectedList',
|
LText: mainItems.join(' union all '),
|
obj_name: '',
|
arr_field: '',
|
table_type: 'Y'
|
}
|
|
if (BID) {
|
mainparam.BID = BID
|
}
|
|
if (mainparam.LText) {
|
mainparam.LText = Utils.formatOptions(mainparam.LText)
|
mainparam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
mainparam.secretkey = Utils.encrypt(mainparam.LText, mainparam.timestamp)
|
|
if (menuType === 'HS') { // 云端数据验证
|
mainparam.open_key = Utils.encryptOpenKey(mainparam.secretkey, mainparam.timestamp)
|
if (options.cloudServiceApi) {
|
mainparam.rduri = options.cloudServiceApi
|
mainparam.userid = sessionStorage.getItem('CloudUserID') || ''
|
mainparam.LoginUID = sessionStorage.getItem('CloudLoginUID') || ''
|
}
|
} else if (window.GLOB.mainSystemApi) {
|
mainparam.rduri = window.GLOB.mainSystemApi
|
}
|
|
deffers.push(
|
new Promise(resolve => {
|
Api.getSystemCacheConfig(mainparam).then(res => {
|
if (!res.status) {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
resolve(res)
|
})
|
})
|
)
|
}
|
|
Promise.all(deffers).then(response => {
|
let result = {...response[0], ...(response[1] || {})}
|
|
delete result.ErrCode
|
delete result.ErrMesg
|
delete result.message
|
delete result.status
|
|
let _formlist = formlist.map(item => {
|
if (['select', 'link', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type) && result[item.field] && result[item.field].length > 0) {
|
let options = []
|
result[item.field].forEach(cell => {
|
let _cell = { key: Utils.getuuid() }
|
|
if (item.type !== 'checkcard') {
|
_cell.Value = cell[item.valueField]
|
_cell.Text = cell[item.valueText]
|
if ((!_cell.Value && _cell.Value !== 0) || (!_cell.Text && _cell.Text !== 0)) return
|
} else {
|
_cell.$value = cell[item.valueField]
|
_cell = {..._cell, ...cell}
|
if (!_cell.$value && _cell.$value !== 0) return
|
}
|
|
if (item.type === 'link') {
|
_cell.ParentID = cell[item.linkField] === undefined ? '' : cell[item.linkField]
|
} else if (item.linkSubField) {
|
item.linkSubField.forEach(_field => {
|
_cell[_field] = (cell[_field] || cell[_field] === 0) ? cell[_field] : ''
|
})
|
}
|
|
options.push(_cell)
|
})
|
|
item.oriOptions = [...item.oriOptions, ...options]
|
}
|
return item
|
})
|
|
this.setState({
|
formlist: _formlist.map(item => {
|
if (item.type === 'link') {
|
item.options = item.oriOptions.filter(option => option.ParentID === item.supInitVal || option.Value === '')
|
} else if (['select', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type)) {
|
item.options = item.oriOptions
|
}
|
return item
|
})
|
})
|
})
|
}
|
|
/**
|
* @description 测试系统获取下拉表单选项信息
|
*/
|
improveSimpleActionForm = (deForms) => {
|
const { formlist } = this.state
|
|
let deffers = deForms.map(form => {
|
let param = {
|
func: 'sPC_Get_SelectedList',
|
LText: form.data_sql,
|
obj_name: form.field,
|
arr_field: form.arr_field
|
}
|
|
if (this.props.BID) {
|
param.BID = this.props.BID
|
}
|
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.secretkey = Utils.encrypt(param.LText, param.timestamp)
|
|
return (
|
new Promise(resolve => {
|
Api.getSystemCacheConfig(param).then(res => {
|
if (!res.status) {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
resolve(res)
|
})
|
})
|
)
|
})
|
|
Promise.all(deffers).then(response => {
|
let result = {}
|
response.forEach(res => {
|
result = {...result, ...res}
|
})
|
|
delete result.ErrCode
|
delete result.ErrMesg
|
delete result.message
|
delete result.status
|
|
let _formlist = formlist.map(item => {
|
if (['select', 'link', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type) && result[item.field] && result[item.field].length > 0) {
|
let options = []
|
result[item.field].forEach(cell => {
|
let _cell = { key: Utils.getuuid() }
|
|
if (item.type !== 'checkcard') {
|
_cell.Value = cell[item.valueField]
|
_cell.Text = cell[item.valueText]
|
if ((!_cell.Value && _cell.Value !== 0) || (!_cell.Text && _cell.Text !== 0)) return
|
} else {
|
_cell.$value = cell[item.valueField]
|
_cell = {..._cell, ...cell}
|
if (!_cell.$value && _cell.$value !== 0) return
|
}
|
|
if (item.type === 'link') {
|
_cell.ParentID = cell[item.linkField] === undefined ? '' : cell[item.linkField]
|
} else if (item.linkSubField) {
|
item.linkSubField.forEach(_field => {
|
_cell[_field] = (cell[_field] || cell[_field] === 0) ? cell[_field] : ''
|
})
|
}
|
|
options.push(_cell)
|
})
|
|
item.oriOptions = [...item.oriOptions, ...options]
|
}
|
return item
|
})
|
|
this.setState({
|
formlist: _formlist.map(item => {
|
if (item.type === 'link') {
|
item.options = item.oriOptions.filter(option => option.ParentID === item.supInitVal || option.Value === '')
|
} else if (['select', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type)) {
|
item.options = item.oriOptions
|
}
|
return item
|
})
|
})
|
})
|
}
|
|
resetform = (formlist, supfields, index, fieldsvalue) => {
|
index++
|
let subfields = []
|
|
supfields.forEach(supfield => {
|
formlist = formlist.map(item => {
|
if (item.type === 'link' && item.linkField === supfield.field) {
|
|
item.options = item.oriOptions.filter(option => option.ParentID === supfield.initval || option.Value === '')
|
item.initval = item.options[0] ? item.options[0].Value : ''
|
|
if (this.props.form.getFieldValue(item.field) !== undefined) {
|
fieldsvalue[item.field] = item.initval
|
}
|
|
subfields.push(item)
|
}
|
return item
|
})
|
})
|
|
if (subfields.length === 0 || index > 6) {
|
return {formlist: formlist, fieldsvalue: fieldsvalue}
|
} else {
|
return this.resetform(formlist, subfields, index, fieldsvalue)
|
}
|
}
|
|
selectChange = (_field, value) => {
|
const { record } = this.state
|
let formlist = fromJS(this.state.formlist).toJS()
|
let subfields = []
|
let fieldsvalue = {}
|
let _record = {}
|
|
formlist = formlist.map(item => {
|
if (item.type === 'link' && item.linkField === _field.field) {
|
item.options = item.oriOptions.filter(option => option.ParentID === value || option.Value === '')
|
item.initval = item.options[0] ? item.options[0].Value : ''
|
|
if (this.props.form.getFieldValue(item.field) !== undefined) {
|
fieldsvalue[item.field] = item.initval
|
}
|
|
subfields.push(item)
|
}
|
return item
|
})
|
|
// 表单切换时，更新关联字段
|
if (_field.linkSubField) {
|
let _data = _field.options.filter(op => op.Value === value)[0]
|
|
if (_data) {
|
_field.linkSubField.forEach(subfield => {
|
if (this.props.form.getFieldValue(subfield) !== undefined) {
|
fieldsvalue[subfield] = (_data[subfield] || _data[subfield] === 0) ? _data[subfield] : ''
|
} else {
|
_record[subfield] = (_data[subfield] || _data[subfield] === 0) ? _data[subfield] : ''
|
}
|
})
|
}
|
}
|
|
if (subfields.length === 0) {
|
if (Object.keys(fieldsvalue).length > 0) {
|
this.props.form.setFieldsValue(fieldsvalue)
|
}
|
if (Object.keys(_record).length > 0) {
|
this.setState({
|
record: {...record, ..._record}
|
})
|
}
|
} else {
|
let result = this.resetform(formlist, subfields, 0, fieldsvalue)
|
|
if (Object.keys(result.fieldsvalue).length > 0) {
|
this.props.form.setFieldsValue(fieldsvalue)
|
}
|
|
let _param = {
|
formlist: result.formlist
|
}
|
|
if (Object.keys(_record).length > 0) {
|
_param.record = {...record, ..._record}
|
}
|
|
this.setState(_param)
|
}
|
|
this.setState({}, () => {
|
if (!_field.enter || _field.enter === 'false') return
|
|
if (_field.enter === 'tab') {
|
this.selectInput(_field.tabField)
|
} else if (_field.enter === 'sub') {
|
this.handleSubmit()
|
}
|
})
|
}
|
|
handleConfirmPassword = (rule, value, callback, item) => {
|
let val = parseFloat(value)
|
|
if (!isNaN(val)) {
|
if (typeof(item.min) === 'number' && val < item.min) {
|
callback(item.label + '最小值为 ' + item.min)
|
} else if (typeof(item.max) === 'number' && val > item.max) {
|
callback(item.label + '最大值为 ' + item.max)
|
}
|
}
|
callback()
|
}
|
|
handleChange = (e, item) => {
|
let val = e.target.value
|
|
if (item.enter === 'false') return
|
if (!val || !/\n/ig.test(val)) return
|
if (item.enter === 'tab') {
|
this.selectInput(item.tabField)
|
} else {
|
this.handleSubmit(e)
|
this.selectInput(item.tabField || item.field)
|
}
|
}
|
|
handleInputSubmit = (e, item) => {
|
if (item.enter === 'false') return
|
if (item.enter === 'tab') {
|
this.selectInput(item.tabField)
|
} else {
|
this.handleSubmit(e)
|
this.selectInput(item.tabField || item.field)
|
}
|
}
|
|
getFields() {
|
const { getFieldDecorator } = this.props.form
|
const { cols, formlist } = this.state
|
|
const fields = []
|
let filtration = {}
|
|
formlist.forEach((item, index) => {
|
if ((!item.field && item.type !== 'title' && item.type !== 'hint') || item.hidden === 'true' || item.type === 'funcvar') return
|
if (item.supField) { // 多层表单控制
|
let _supVal = this.props.form.getFieldValue(item.supField)
|
|
if (_supVal === undefined && filtration[item.supField]) {
|
_supVal = filtration[item.supField]
|
}
|
|
if (item.supvalue.includes(_supVal)) {
|
let _subVal = this.props.form.getFieldValue(item.field)
|
filtration[item.field] = _subVal === undefined ? item.initval : _subVal
|
} else {
|
return
|
}
|
}
|
|
let _colspan = 24 / cols
|
if (item.entireLine === 'true') {
|
_colspan = 24
|
}
|
|
if (item.type === 'title') {
|
fields.push(
|
<Col span={24} key={index}>
|
<p>{item.label}</p>
|
</Col>
|
)
|
} else if (item.type === 'hint') {
|
fields.push(
|
<Col span={24} key={index}>
|
<Form.Item colon={!!item.label} label={item.label || ' '} className="hint">
|
<div className="message">{item.message}</div>
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'text') {
|
let _max = item.fieldlength || 50
|
let _rules = [{
|
pattern: /^[^']*$/ig,
|
message: formRule.input.quotemsg
|
}]
|
if (item.regular) {
|
if (item.regular === 'number') {
|
_rules = [{
|
pattern: /^[0-9]*$/ig,
|
message: formRule.input.numbermsg
|
}]
|
} else if (item.regular === 'letter') {
|
_rules = [{
|
pattern: /^[a-zA-Z]*$/ig,
|
message: formRule.input.lettermsg
|
}]
|
} else if (item.regular === 'letter&number') {
|
_rules = [{
|
pattern: /^[a-zA-Z0-9]*$/ig,
|
message: formRule.input.letternummsg
|
}]
|
} else if (item.regular === 'funcname') {
|
_rules = [{
|
pattern: /^[\u4E00-\u9FA50-9a-zA-Z_]*$/ig,
|
message: formRule.input.funcname
|
}]
|
}
|
}
|
fields.push(
|
<Col span={_colspan} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.field, {
|
initialValue: item.initval,
|
rules: [
|
{
|
required: item.required === 'true',
|
message: this.props.dict['form.required.input'] + item.label + '!'
|
},
|
{
|
max: _max,
|
message: formRule.input.formMessage.replace('@max', _max)
|
},
|
..._rules
|
]
|
})(<Input placeholder="" autoComplete="off" disabled={item.readonly === 'true'} onChange={(e) => this.handleChange(e, item)} onPressEnter={(e) => this.handleInputSubmit(e, item)} />)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'number') { // 数字
|
let _initval = item.initval
|
let precision = (item.decimal || item.decimal === 0) ? item.decimal : null
|
|
fields.push(
|
<Col span={_colspan} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.field, {
|
initialValue: _initval,
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.input'] + item.label + '!'
|
},
|
{
|
validator: (rule, value, callback) => this.handleConfirmPassword(rule, value, callback, item)
|
}
|
]
|
})(
|
precision === null ?
|
<InputNumber disabled={item.readonly === 'true'} onPressEnter={(e) => this.handleInputSubmit(e, item)} /> :
|
<InputNumber precision={precision} disabled={item.readonly === 'true'} onPressEnter={(e) => this.handleInputSubmit(e, item)} />
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'color') { // 颜色选择
|
fields.push(
|
<Col span={_colspan} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.field, {
|
initialValue: item.initval || 'transparent',
|
rules: [
|
{
|
required: item.required === 'true',
|
message: this.props.dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<ColorSketch />
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'checkcard') { // 多选框
|
fields.push(
|
<Col span={24} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
} className="checkcard">
|
{getFieldDecorator(item.field, {
|
initialValue: item.initval,
|
rules: [
|
{
|
required: item.required === 'true',
|
message: this.props.dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(<CheckCard card={item} />)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'switch') { // 多选框
|
fields.push(
|
<Col span={_colspan} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.field, {
|
initialValue: item.initval,
|
rules: [
|
{
|
required: item.required === 'true',
|
message: this.props.dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(<CustomSwitch Item={item} />)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'checkbox') { // 多选框
|
let _initval = item.initval ? item.initval.split(',').filter(Boolean) : []
|
|
fields.push(
|
<Col span={_colspan} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.field, {
|
initialValue: _initval,
|
rules: [
|
{
|
required: item.required === 'true',
|
message: this.props.dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<Checkbox.Group disabled={item.readonly === 'true'}>
|
{item.options.map(option => <Checkbox key={option.key} title={option.Text} value={option.Value}>{option.Text}</Checkbox>)}
|
</Checkbox.Group>
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'radio') { // 单选框
|
fields.push(
|
<Col span={_colspan} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.field, {
|
initialValue: item.initval,
|
rules: [
|
{
|
required: item.required === 'true',
|
message: this.props.dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<Radio.Group disabled={item.readonly === 'true'} onChange={(e) => {this.selectChange(item, e.target.value)}}>
|
{item.options.map(option => <Radio key={option.key} value={option.Value}>{option.Text}</Radio>)}
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'select' || item.type === 'link') { // 下拉搜索
|
fields.push(
|
<Col span={_colspan} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.field, {
|
initialValue: item.initval,
|
rules: [
|
{
|
required: item.required === 'true',
|
message: this.props.dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
allowClear={true}
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
onSelect={(value) => {this.selectChange(item, value)}}
|
disabled={item.readonly === 'true'}
|
>
|
{item.options.map(option =>
|
<Select.Option id={option.key} title={option.Text} key={option.key} value={option.Value}>{option.Text}</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'multiselect') { // 多选
|
let _initval = item.initval ? item.initval.split(',').filter(Boolean) : []
|
fields.push(
|
<Col span={_colspan} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.field, {
|
initialValue: _initval,
|
rules: [
|
{
|
required: item.required === 'true',
|
message: this.props.dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
mode="multiple"
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
disabled={item.readonly === 'true'}
|
>
|
{item.options.map(option =>
|
<Select.Option id={option.key} title={option.Text} key={option.key} value={option.Value}>{option.Text}</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'date') { // 时间搜索
|
fields.push(
|
<Col span={_colspan} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.field, {
|
initialValue: item.initval,
|
rules: [
|
{
|
required: item.required === 'true',
|
message: this.props.dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<DatePicker disabled={item.readonly === 'true'} />
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'datemonth') {
|
fields.push(
|
<Col span={_colspan} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.field, {
|
initialValue: item.initval,
|
rules: [
|
{
|
required: item.required === 'true',
|
message: this.props.dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<MonthPicker disabled={item.readonly === 'true'} />
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'datetime') {
|
fields.push(
|
<Col span={_colspan} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.field, {
|
initialValue: item.initval,
|
rules: [
|
{
|
required: item.required === 'true',
|
message: this.props.dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<DatePicker showTime disabled={item.readonly === 'true'} />
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'fileupload') {
|
let filelist = this.props.data ? this.props.data[item.field] : item.initval
|
if (filelist && this.state.readin[item.field]) {
|
try {
|
filelist = filelist.split(',').map((url, index) => {
|
return {
|
uid: `${index}`,
|
name: url.slice(url.lastIndexOf('/') + 1),
|
status: 'done',
|
url: url,
|
origin: true
|
}
|
})
|
} catch {
|
filelist = []
|
}
|
} else {
|
filelist = []
|
}
|
|
fields.push(
|
<Col span={_colspan} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.field, {
|
initialValue: filelist,
|
rules: [
|
{
|
required: item.required === 'true',
|
message: this.props.dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<FileUpload maxFile={item.maxfile} fileType={item.fileType || 'text'} />
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'linkMain') {
|
fields.push(
|
<Col span={_colspan} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.field, {
|
initialValue: item.initval,
|
rules: [
|
{
|
required: item.required === 'true',
|
message: this.props.dict['form.required.input'] + item.label + '!'
|
}
|
]
|
})(<Input placeholder="" autoComplete="off" disabled={item.readonly === 'true'} />)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'funcvar') {
|
// 函数变量字段，默认不显示
|
} else if (item.type === 'textarea') {
|
let _max = item.fieldlength || 512
|
let _rules = []
|
if (item.encryption !== 'true') {
|
_rules = [{
|
pattern: /^[^']*$/ig,
|
message: formRule.input.quotemsg
|
}]
|
}
|
fields.push(
|
<Col span={24} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.field, {
|
initialValue: item.initval,
|
rules: [
|
{
|
required: item.required === 'true',
|
message: this.props.dict['form.required.input'] + item.label + '!'
|
},
|
{
|
max: _max,
|
message: formRule.input.formMessage.replace('@max', _max)
|
},
|
..._rules
|
]
|
})(<TextArea autoSize={{ minRows: 2, maxRows: item.maxRows || 6 }} disabled={item.readonly === 'true'} />)}
|
</Form.Item>
|
</Col>
|
)
|
}
|
})
|
|
return fields
|
}
|
|
handleConfirm = () => {
|
const { record, intercepts, writein } = this.state
|
let _encrypts = fromJS(this.state.encrypts).toJS()
|
let _format = {
|
date: 'YYYY-MM-DD',
|
datemonth: 'YYYY-MM',
|
datetime: 'YYYY-MM-DD HH:mm:ss'
|
}
|
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
let search = []
|
// 隐藏表单
|
this.state.formlist.forEach(item => {
|
if (!item.field) return
|
|
let _item = null
|
if (item.type === 'funcvar') {
|
_item = {
|
type: 'funcvar',
|
readonly: 'true',
|
readin: false,
|
writein: writein[item.field],
|
fieldlen: this.state.fieldlen[item.field],
|
key: item.field,
|
value: ''
|
}
|
} else if (item.hidden === 'true') {
|
let _val = item.initval
|
if (record.hasOwnProperty(item.field)) {
|
_val = record[item.field]
|
_encrypts = _encrypts.filter(_field => _field !== item.field) // 隐藏字段，不参与加密处理
|
}
|
|
_item = {
|
type: this.state.datatype[item.field],
|
readonly: this.state.readtype[item.field],
|
readin: this.state.readin[item.field],
|
writein: writein[item.field],
|
fieldlen: this.state.fieldlen[item.field],
|
key: item.field,
|
value: _val
|
}
|
} else if (item.supField && !item.supvalue.includes(this.props.form.getFieldValue(item.supField))) {
|
_item = {
|
type: this.state.datatype[item.field],
|
readonly: this.state.readtype[item.field],
|
readin: this.state.readin[item.field],
|
writein: writein[item.field],
|
fieldlen: this.state.fieldlen[item.field],
|
key: item.field,
|
value: item.initval
|
}
|
}
|
|
if (!_item) return
|
|
if (item.type === 'date' || item.type === 'datemonth' || item.type === 'datetime') {
|
if (_item.value && _item.value.format) {
|
_item.value = _item.value.format(_format[item.type])
|
} else if (!_item.value) {
|
_item.value = ''
|
}
|
}
|
|
search.push(_item)
|
})
|
|
Object.keys(values).forEach(key => {
|
if (values[key] === undefined) { // 表单异常？？？
|
if (search.filter(s => s.key === key).length === 0) {
|
search.push({
|
type: this.state.datatype[key],
|
readonly: this.state.readtype[key],
|
readin: this.state.readin[key],
|
writein: writein[key],
|
fieldlen: this.state.fieldlen[key],
|
key: key,
|
value: ''
|
})
|
}
|
return
|
}
|
|
let _value = ''
|
if (this.state.datatype[key] === 'datetime') {
|
_value = values[key] ? moment(values[key]).format('YYYY-MM-DD HH:mm:ss') : ''
|
} else if (this.state.datatype[key] === 'datemonth') {
|
_value = values[key] ? moment(values[key]).format('YYYY-MM') : ''
|
} else if (this.state.datatype[key] === 'date') {
|
_value = values[key] ? moment(values[key]).format('YYYY-MM-DD') : ''
|
} else if (this.state.datatype[key] === 'number') {
|
_value = values[key]
|
|
} else if (this.state.datatype[key] === 'multiselect' || this.state.datatype[key] === 'checkbox') {
|
_value = values[key] ? values[key].join(',') : ''
|
|
} else if (this.state.datatype[key] === 'fileupload') {
|
let vals = []
|
|
if (values[key] && values[key].length > 0) {
|
values[key].forEach(_val => {
|
if (_val.origin && _val.url) {
|
vals.push(_val.url)
|
} else if (!_val.origin && _val.status === 'done' && _val.response) {
|
vals.push(Utils.getrealurl(_val.response))
|
}
|
})
|
}
|
|
_value = vals.join(',')
|
} else if (this.state.datatype[key] === 'text' || this.state.datatype[key] === 'textarea') {
|
_value = values[key].replace(/\t*|\v*/g, '') // 去除制表符
|
|
if (intercepts.includes(key)) { // 去除首尾空格
|
_value = _value.replace(/(^\s*|\s*$)/g, '')
|
}
|
} else {
|
_value = values[key]
|
|
}
|
|
search.push({
|
type: this.state.datatype[key],
|
readonly: this.state.readtype[key],
|
readin: this.state.readin[key],
|
writein: writein[key],
|
fieldlen: this.state.fieldlen[key],
|
key: key,
|
value: _value
|
})
|
})
|
|
// 含有加密字段时，对表单值进行加密
|
if (_encrypts && _encrypts.length > 0) {
|
search = search.map(item => {
|
let _value = item.value
|
if (_encrypts.includes(item.key)) {
|
try {
|
_value = window.btoa(window.encodeURIComponent(_value))
|
} catch (e) {
|
console.warn(e)
|
}
|
}
|
item.value = _value
|
|
return item
|
})
|
}
|
resolve(search)
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
handleSubmit = (e) => {
|
e && e.preventDefault()
|
this.props.inputSubmit()
|
}
|
|
render() {
|
const { cols } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<Form {...formItemLayout} className="ant-advanced-search-form main-form-field" id="main-form-box">
|
<Row className={'cols' + cols} gutter={24}>{this.getFields()}</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(MainSearch)
|
