382 lines
11 KiB
JavaScript
382 lines
11 KiB
JavaScript
import React from 'react'
|
|
import { connect } from 'dva/index'
|
|
import { Input, Icon } from 'antd'
|
|
import FormModal from '../form/FormModal'
|
|
import {
|
|
extendFilterGroup,
|
|
extendGroupRule,
|
|
extendInclude,
|
|
extendOrder,
|
|
initFilter,
|
|
initFilterGroup
|
|
} from '../utils/common'
|
|
import moment from 'moment'
|
|
|
|
class ScannerComponent extends React.Component {
|
|
constructor (props) {
|
|
super(props)
|
|
this.state = {
|
|
data: {
|
|
Data: []
|
|
},
|
|
value: '',
|
|
oldValue: ''
|
|
}
|
|
this.handleAutoCompleteKeyDown = this.handleAutoCompleteKeyDown.bind(this)
|
|
};
|
|
|
|
componentDidMount () {
|
|
const { value } = this.props
|
|
this.updateStateData({
|
|
value: value,
|
|
oldValue: value,
|
|
isUpdateValue: false
|
|
})
|
|
}
|
|
|
|
UNSAFE_componentWillReceiveProps (NextProps) {
|
|
const { value } = NextProps
|
|
if (this.state.oldValue !== value || this.state.isUpdateValue) {
|
|
this.updateStateData({
|
|
value: value,
|
|
oldValue: value,
|
|
isUpdateValue: false
|
|
})
|
|
}
|
|
}
|
|
|
|
handleFetchAutoFilterEvent = (params) => {
|
|
const { data } = this.props
|
|
const { onFilter } = data || {}
|
|
if (typeof onFilter === 'function') {
|
|
onFilter({
|
|
params: params,
|
|
colConfig: this.props.colConfig,
|
|
thisRef: this.props.thisRef
|
|
})
|
|
}
|
|
};
|
|
|
|
updateStateData = (data, onComplete) => {
|
|
if (this.updateStateDataFunc) {
|
|
this.setState(data, () => {
|
|
this.updateStateDataFunc(data, onComplete)
|
|
})
|
|
} else {
|
|
this.setState(data, () => {
|
|
if (typeof onComplete === 'function') {
|
|
onComplete()
|
|
}
|
|
})
|
|
}
|
|
};
|
|
|
|
regUpdateStateData = (regFunc) => {
|
|
this.updateStateDataFunc = regFunc
|
|
};
|
|
|
|
getAutoCompleteLoadParam = (params = {}, e) => {
|
|
const { data } = this.props
|
|
const { filterField, sortField, sortOrder, navField, extIncludeFields } = data || {}
|
|
const sortName = filterField ? filterField.split(',') : ['NAME', 'CODE']
|
|
const initParams = initFilter(this.props.login.OrgId, '', sortName[0], 0)
|
|
const sortFields = sortField ? sortField.split(',') : []
|
|
const sortOrders = sortOrder ? sortOrder.split(',') : []
|
|
|
|
if (e) {
|
|
if (e.target.value) {
|
|
const group = initFilterGroup(false)
|
|
sortName.forEach((i, n) => {
|
|
extendGroupRule(group, i, 9, e.target.value)
|
|
})
|
|
extendFilterGroup(initParams, group)
|
|
}
|
|
this.updateStateData({
|
|
autoChangeValue: e.target.value
|
|
})
|
|
}
|
|
const loadParam = { ...initParams, ...params }
|
|
// 添加自定义排序
|
|
if (sortFields && sortOrders && sortFields.length && sortFields.length && sortOrders.length) {
|
|
loadParam['Sort'] = ''
|
|
sortFields.forEach((n, i) => {
|
|
extendOrder(loadParam, n, sortOrders[i])
|
|
})
|
|
}
|
|
const navFields = []
|
|
// 添加导航属性
|
|
const tmpNavFields = navField ? navField.split(',') : ['ID']
|
|
if (tmpNavFields && tmpNavFields.length > 0) {
|
|
tmpNavFields.forEach(t => {
|
|
if (t && t.indexOf('.') > 0) {
|
|
const pos = t.lastIndexOf('.')
|
|
const includeField = t.substring(0, pos)
|
|
navFields.push(includeField)
|
|
}
|
|
})
|
|
}
|
|
// 填充导航属性
|
|
if (extIncludeFields) {
|
|
extIncludeFields.forEach(t => {
|
|
navFields.push(t)
|
|
})
|
|
}
|
|
|
|
// 去重添加
|
|
if (navFields.length) {
|
|
const tmp = [...new Set(navFields)]
|
|
tmp.forEach((n, i) => {
|
|
extendInclude(loadParam, n)
|
|
})
|
|
}
|
|
return loadParam
|
|
};
|
|
|
|
fetchAutoComData = (params = {}, e) => { // 获取autocomplete数据
|
|
const { api, data } = this.props
|
|
if (!api) {
|
|
return
|
|
}
|
|
const loadParam = this.getAutoCompleteLoadParam(params, e)
|
|
if (data && data.filterOrgType) {
|
|
loadParam.OrgType = data.filterOrgType
|
|
}
|
|
this.handleFetchAutoFilterEvent(loadParam)
|
|
this.updateStateData({
|
|
loadParam
|
|
})
|
|
this.props.dispatch({
|
|
type: 'app/getDataByPost',
|
|
payload: loadParam,
|
|
url: api,
|
|
onlyData: false,
|
|
onComplete: (ret) => {
|
|
this.updateStateData({ data: ret }, () => {
|
|
if (ret && ret.Data && ret.Data.length) {
|
|
this.selectAutoItem(ret.Data[0].ID)
|
|
}
|
|
else {
|
|
this.selectAutoItem(null)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
};
|
|
|
|
// autoComDataPage = ( num) => {
|
|
// const { data } = this.props;
|
|
// const {filterField }=data?data:{};
|
|
// const arrOBj = filterField ? filterField.split(','):['NAME','CODE'];
|
|
// const sortName = filterField ? filterField.split(',') : ['NAME','CODE'];
|
|
// let params = initFilter(this.props.login.OrgId,'',sortName[0],0,num);
|
|
// if (this.state.autoChangeValue) {
|
|
// let group=initFilterGroup(false);
|
|
// arrOBj.forEach((i,n) => {
|
|
// extendGroupRule(group,i,9,this.state.autoChangeValue);
|
|
// });
|
|
// extendFilterGroup(params,group);
|
|
// }
|
|
// this.fetchAutoComData( params);
|
|
// };
|
|
// getState=()=> {
|
|
// return this.state;
|
|
// };
|
|
|
|
handleFieldChangeEvent = (value) => {
|
|
const { data } = this.props
|
|
const { onChange } = data || {}
|
|
if (typeof onChange === 'function') {
|
|
onChange({
|
|
value,
|
|
colConfig: this.props.colConfig,
|
|
thisRef: this.props.thisRef
|
|
})
|
|
}
|
|
this.updateStateData({
|
|
value: value
|
|
})
|
|
if (!value) {
|
|
this.selectAutoItem(null)
|
|
}
|
|
else {
|
|
if (!this.isSelectItem) {
|
|
if (value.toString().indexOf('-') === -1) {
|
|
this.isCheckAutoComplete = true
|
|
}
|
|
}
|
|
}
|
|
|
|
// this.props.dispatch({
|
|
// type: 'app/save',
|
|
// payload: {
|
|
// drawerComponent: {
|
|
// open: true,
|
|
// content: 20,
|
|
// position: "top",
|
|
// selfData: {
|
|
// data: this.state.data,
|
|
// disabled: this.props.disabled,
|
|
// loadParam: this.state.loadParam,
|
|
// autoChangeValue: this.state.autoChangeValue,
|
|
// selectAutoItem: this.selectAutoItem,
|
|
// handleChangeAuto: this.handleChangeAuto,
|
|
// autoComDataPage: this.autoComDataPage
|
|
// }
|
|
// },
|
|
// },
|
|
// });
|
|
};
|
|
|
|
getDataByScannerValue = (value) => {
|
|
const { api, onScan } = this.props
|
|
if (!api) {
|
|
if (typeof onScan === 'function') {
|
|
onScan({ value })
|
|
}
|
|
return
|
|
}
|
|
if (this.isSelectItem) {
|
|
return
|
|
}
|
|
const { data } = this.props
|
|
const { filterField, onChangeHandle } = data || {}
|
|
const arrOBj = filterField ? filterField.split(',') : ['NAME', 'CODE']
|
|
const sortName = filterField ? filterField.split(',') : ['NAME', 'CODE']
|
|
const params = initFilter(this.props.login.OrgId, '', sortName[0], 0)
|
|
if (value) {
|
|
const group = initFilterGroup(false)
|
|
arrOBj.forEach((i, n) => {
|
|
extendGroupRule(group, i, 9, value)
|
|
})
|
|
extendFilterGroup(params, group)
|
|
}
|
|
const nowT = moment().format('x')
|
|
if (!this.autoCompleteChangeT || nowT - this.autoCompleteChangeT > 200) {
|
|
this.fetchAutoComData(params)
|
|
}
|
|
this.updateStateData({
|
|
autoChangeValue: value
|
|
})
|
|
this.autoCompleteChangeT = moment().format('x')
|
|
this.handleFieldChangeEvent(value)
|
|
if (onChangeHandle && typeof onChangeHandle === 'function') {
|
|
onChangeHandle(value)
|
|
}
|
|
};
|
|
|
|
handleAutoCompleteKeyDown (event) {
|
|
if (event.keyCode === 13) {
|
|
this.isCheckAutoComplete = true
|
|
// this.checkAutoComplete();
|
|
this.getDataByScannerValue(this.state.autoChangeValue)
|
|
}
|
|
}
|
|
|
|
checkAutoComplete = () => {
|
|
if (this.isCheckAutoComplete) {
|
|
this.getDataByScannerValue(this.state.autoChangeValue)
|
|
}
|
|
};
|
|
|
|
selectAutoItem = (value, option) => {
|
|
const { data, onSelect } = this.props
|
|
const { navField } = data || {}
|
|
this.isSelectItem = true
|
|
this.isCheckAutoComplete = false
|
|
if (typeof onSelect === 'function') {
|
|
if (value) {
|
|
if (this.state.data && this.state.data.Data) {
|
|
const navFields = navField ? navField.split(',') : ['ID']
|
|
this.state.data.Data.forEach(t => {
|
|
if (value === t.ID) {
|
|
const saveValues = []
|
|
for (let j = 0; j < navFields.length; j++) {
|
|
saveValues.push(t[navFields[j]])
|
|
}
|
|
onSelect({
|
|
data: saveValues,
|
|
record: t,
|
|
complete: () => {
|
|
this.isSelectItem = false
|
|
},
|
|
colConfig: this.props.colConfig,
|
|
thisRef: this.props.thisRef
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
else {
|
|
onSelect({
|
|
data: [],
|
|
record: null,
|
|
isClear: true,
|
|
complete: () => {
|
|
this.isSelectItem = false
|
|
},
|
|
colConfig: this.props.colConfig,
|
|
thisRef: this.props.thisRef
|
|
})
|
|
this.updateStateData({
|
|
isUpdateValue: true
|
|
})
|
|
}
|
|
}
|
|
};
|
|
|
|
render () {
|
|
const { disabled, onChange, onBlur, placeholder, showFormCode, showFormId } = this.props
|
|
const isShowSrcBtn = showFormCode && showFormId
|
|
const value = this.state.value
|
|
return (
|
|
<>
|
|
<Input
|
|
placeholder={placeholder}
|
|
clear
|
|
value={value}
|
|
disabled={disabled}
|
|
style={isShowSrcBtn ? { width: '80%' } : { width: '100%' }}
|
|
onBlur={() => {
|
|
if (typeof onBlur === 'function') {
|
|
onBlur()
|
|
}
|
|
this.checkAutoComplete()
|
|
}}
|
|
onChange={(e) => {
|
|
if (e !== null && e !== undefined) {
|
|
const tmpValue = (e && e.target && e.target.value ? e.target.value : (typeof e === 'object' ? null : e))
|
|
// if(tmpValue&&caseType&&caseType===1){
|
|
// tmpValue=tmpValue.toString().toUpperCase();
|
|
// }
|
|
// else if(tmpValue&&caseType&&caseType===2){
|
|
// tmpValue=tmpValue.toString().toLowerCase();
|
|
// }
|
|
this.isCheckAutoComplete = true
|
|
this.updateStateData({
|
|
autoChangeValue: tmpValue
|
|
})
|
|
if (typeof onChange === 'function') {
|
|
onChange({
|
|
value: tmpValue
|
|
})
|
|
}
|
|
}
|
|
}}
|
|
onKeyDown={(e) => { this.handleAutoCompleteKeyDown(e) }}
|
|
addonAfter={<Icon type='enter' onClick={() => { this.checkAutoComplete() }} />}
|
|
/>
|
|
{
|
|
isShowSrcBtn
|
|
? (
|
|
<FormModal formCode={showFormCode} data={{ id: showFormId, isShow: true }}>
|
|
<Icon type='info-circle' style={{ marginLeft: 8, fontSize: 20 }} />
|
|
</FormModal>
|
|
) : null
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default connect(({ app, loading, login }) => ({ app, loading, login }))(ScannerComponent)
|