86 lines
2.7 KiB
JavaScript
86 lines
2.7 KiB
JavaScript
import React from 'react'
|
|
import { Icon, message } from "antd"
|
|
import { WeaSelect } from 'ecCom'
|
|
import { inject, observer } from 'mobx-react';
|
|
import CanDeleteItem from '../../../components/canDeleteItem'
|
|
|
|
@inject('ledgerStore')
|
|
@observer
|
|
export default class UserInfoSelected extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
list: [],
|
|
showSelect: false
|
|
}
|
|
}
|
|
|
|
handleSelectChange(value) {
|
|
const { ledgerStore: {empBrowserList, userSelectedList}} = this.props;
|
|
let list = [...userSelectedList]
|
|
let selectedItem = {}
|
|
empBrowserList.map(item => {
|
|
if(item.key == value) {
|
|
selectedItem = item
|
|
}
|
|
})
|
|
let flag = false;
|
|
list.map(item => {
|
|
if(item.key == value) {
|
|
flag = true
|
|
}
|
|
})
|
|
if(!flag) {
|
|
list.push(selectedItem)
|
|
}
|
|
if(flag) {
|
|
message.warning("该信息已存在")
|
|
this.setState({showSelect: false})
|
|
return
|
|
}
|
|
const { ledgerStore: {empFields, addEmpFields, setUserSelectedList}} = this.props;
|
|
addEmpFields(value)
|
|
this.setState({showSelect: false})
|
|
|
|
}
|
|
|
|
handleItemDelete(item) {
|
|
const { ledgerStore: {userSelectedList, setUserSelectedList, empFields, setEmpFields}} = this.props;
|
|
let list = [...userSelectedList]
|
|
let fields = [...empFields]
|
|
if(item.canDelete === false) {
|
|
message.warning("该项不可删除");
|
|
return
|
|
}
|
|
|
|
fields = fields.filter(i => item.fieldId != i.fieldId)
|
|
fields.map((item, index) => {
|
|
item.sortedIndex = index
|
|
})
|
|
setEmpFields(fields)
|
|
setUserSelectedList(list.filter(i => item.fieldId != i.fieldId))
|
|
}
|
|
|
|
render() {
|
|
const { ledgerStore: {empBrowserList, userSelectedList} } = this.props;
|
|
return (
|
|
<div className="userInfoSelected">
|
|
{
|
|
userSelectedList.map(item => (
|
|
<CanDeleteItem title={item.showname} item={item} onDelete={(item) => {
|
|
this.handleItemDelete(item)
|
|
}}/>
|
|
))
|
|
}
|
|
<Icon type="plus" style={{marginLeft: "10px", marginRight: "10px", cursor: "pointer"}} onClick={() => {
|
|
this.setState({showSelect: true})
|
|
}}/>
|
|
{
|
|
this.state.showSelect && empBrowserList.length > 0 && <WeaSelect showSearch options={empBrowserList} onChange={(value) => {
|
|
this.handleSelectChange(value)
|
|
}}/>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
} |