import React, { useState, useEffect } from "react"
import { Card, Form, Row, Col, Input, TreeSelect, Button, Table, Tag, Divider, Modal, TimePicker, Tooltip, Select, message, Popconfirm, DatePicker, Badge } from "antd"
import { PlusOutlined, RightOutlined, LeftOutlined, SearchOutlined, ArrowUpOutlined, ArrowDownOutlined } from "@ant-design/icons"
import moment from "moment"
import classnames from "classnames"
import { history, connect } from 'umi'
import { dicFindUtils, DictBizType } from '@/utils/utils'
import { dispatchHandle } from "@/utils/publicHandle";
import useFormTable from '@/useHooks/useFormTable';
import DicTreeSelect from '../DictTreeSelect'
import style from "../index.less"
const { Option } = Select
const TransferTable = (props) => {
const {
dispatch,
loading,
systemData,
setLeftList,
leftList,
setRightList,
rightList,
getListItem,
rightTableProps,
rightSearch,
rForm,
dict: {
dicTotalsList
},
opsDevice: {
leftDeviceList,
groupDeviceList
}
} = props;
/**
* @左边列表
*/
const [leftKeys, setLeftKeys] = useState([])
const [leftRows, setLeftRows] = useState([])
const [form] = Form.useForm()
const leftRowSelection = {
selectedRowKeys: leftKeys,
onChange: (keys, rows) => {
setLeftKeys(keys)
setLeftRows(rows);
}
}
const leftValuesChange = (a, b) => {
let arr = []
console.log(leftDeviceList, `leftDeviceList`, b)
if (b.system !== undefined && b.type === undefined && (b.search === '' || b.search === undefined)) {
arr = leftDeviceList.filter(item => item?.systemNodeId === b.system)
console.log(true , false , false , arr)
}
if (b.system === undefined && b.type !== undefined && (b.search === '' || b.search === undefined)) {
arr = leftList.filter(item => item.typeId === b.type)
console.log(false , true , false , arr)
}
if (b.system === undefined && b.type === undefined && (b.search !== '' && b.search !== undefined)) {
arr = leftList.filter(item => (
b?.search.indexOf(item?.name) > -1 ||
b?.search.indexOf(item?.code) > -1
))
console.log(false , false , true , arr)
}
if (b.system !== undefined && b.type !== undefined && (b.search === '' || b.search === undefined)) {
arr = leftList.filter(item => (
item?.systemNodeId === b.system &&
item.typeId === b.type
))
console.log(true , true , false , arr)
}
if (b.system !== undefined && b.type === undefined && (b.search !== '' && b.search !== undefined)) {
arr = leftList.filter(item => (
item?.systemNodeId === b.system &&
(b?.search.indexOf(item?.name) > -1 ||
b?.search.indexOf(item?.code) > -1
)
))
console.log(true , false , true , arr)
}
if (b.system === undefined && b.type !== undefined && (b.search !== '' && b.search !== undefined)) {
arr = leftList.filter(item => (
item.typeId === b.type &&
(b?.search.indexOf(item?.name) > -1 ||
b?.search.indexOf(item?.code) > -1
)
))
console.log(false , true , true , arr)
}
if (b.system !== undefined && b.type !== undefined && (b.search !== '' && b.search !== undefined)) {
arr = leftList.filter(item => (
item?.systemNodeId === b.system &&
item.typeId === b.type &&
(b?.search.indexOf(item?.name) > -1 ||
b?.search.indexOf(item?.code) > -1
)
))
console.log(true , true , true , arr)
}
setLeftList(arr)
if (b.system === undefined && b.type === undefined && (b.search === '' || b.search === undefined)) {
setLeftList(leftDeviceList)
}
}
// 删除
const deleteAction = (id) => {
const arr = leftList.filter(item => item.id !== id)
setLeftList(arr)
message.success('操作成功！')
}
/**
* @右边列表
*/
const [rightKeys, setRightKeys] = useState([])
const [rightRows, setRightRows] = useState([])
// const [rForm] = Form.useForm()
const rightRowSelection = {
selectedRowKeys: rightKeys,
onChange: (keys, rows) => {
setRightKeys(keys)
setRightRows(rows)
}
}
// 右边列表
// const getDeviceList = (payload = {}) => {
// // payload.planNumber = planId
// dispatchHandle(
// dispatch,
// 'opsDevice/device_service_device_post_group',
// payload,
// res => {
// if (res) {
// setRightList(res)
// }
// }
// )
// }
const rightOnValuesChange = (a, b) => {
if (typeof b.typeIdLike === 'string') {
const id = b?.typeIdLike?.replace('user-', '')
delete b?.typeIdLike
const payload = {
...b,
typeIdLike: id,
}
rightSearch.submit(payload)
}else{
rightSearch.submit(b)
}
}
const addStandardAction = () => {// 添加设备标准
if (rightKeys.length > 0) {
setLeftList([...leftList, ...rightRows])
const arr = rightList.filter(item => rightKeys.indexOf(item.id) === -1)
setRightList(arr)
dispatch({
type: 'opsDevice/setModelsState',
payload: {
leftDeviceList: [...leftList, ...rightRows],
}
});
setRightKeys([])
}
}
const deleteStandardAction = () => {// 删除设备标准
if (leftKeys.length > 0) {
setRightList([...rightList, ...leftRows])
const arr = leftList.filter(item => leftKeys.indexOf(item.id) === -1)
setLeftList(arr)
dispatch({
type: 'opsDevice/setModelsState',
payload: {
leftDeviceList: arr,
}
});
setLeftKeys([])
}
}
// useEffect(() => {
// getDeviceList()
// }, [])
// 设备类型
const deviceType = dicFindUtils(dicTotalsList, DictBizType.deviceType);
const leftColumns = [
{
title: '设备编号',
dataIndex: 'code',
},
{
title: '财产编码',
dataIndex: 'belongingsCode',
},
{
title: '设备名称',
dataIndex: 'name',
},
{
title: '设备类型',
dataIndex: 'typeName',
},
{
title: '设备系统',
dataIndex: ['systemNode', 'name'],
},
{
title: '建筑',
dataIndex: 'buildingName',
},
{
title: '操作',
dataIndex: 'action',
render: (text, record) => <Popconfirm title="确认移除此设备？" onConfirm={() => deleteAction(record.id)}>
<a>移除</a>
</Popconfirm>
}
];
const rightColumns = [
{
title: '设备编号',
dataIndex: 'code',
},
{
title: '财产编码',
dataIndex: 'belongingsCode',
},
{
title: '设备名称',
dataIndex: 'name',
},
{
title: '设备类型',
dataIndex: 'typeName',
},
{
title: '设备系统',
dataIndex: ['systemNode', 'name'],
},
{
title: '建筑',
dataIndex: 'buildingName',
},
];
// console.log(groupDeviceList.pagination)
return <div
>
<Row justify="space-between" gutter={{ md: 8, xxl: 16 }}>
<Col md={{ span: 11 }} xxl={{ span: 11 }}>
<Form form={form} onValuesChange={leftValuesChange}>
<Row gutter={{ md: 8, xxl: 16 }}>
<Col span={12}>
<Form.Item name="system" label="设备系统">
<TreeSelect
allowClear
placeholder="请选择"
treeData={systemData}
showSearch
treeNodeFilterProp="title"
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item name="type" label="设备类型">
<DicTreeSelect treeData={deviceType} parSelectable={true} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item name="search" label="查询">
<Input placeholder="请输入设备名称/设备编号" allowClear suffix={<SearchOutlined style={{ color: '#EDEDED' }} />} />
</Form.Item>
</Col>
</Row>
</Form>
<Divider style={{ margin: '0 0 5px' }} />
<Table
rowSelection={leftRowSelection}
columns={leftColumns}
dataSource={leftList || []}
// {...standardTableProps}
pagination={false}
rowKey={record => record.id}
scroll={{
y: 400,
x: 1000
}}
/>
</Col>
<Col
md={{ span: 2 }}
xxl={{ span: 2 }}
style={{
display: 'flex',
flexDirection: "column",
alignItems: 'center',
justifyContent: 'center'
}}
>
<Button onClick={addStandardAction} type={rightKeys.length === 0 ? 'default' : 'primary'} size="small" icon={<LeftOutlined />} style={{ marginBottom: 10 }}>添加</Button>
<Button onClick={deleteStandardAction} size="small" type={leftKeys.length === 0 ? 'default' : 'primary'}>移除<RightOutlined style={{ marginLeft: 8 }} /></Button>
</Col>
<Col md={{ span: 11 }} xxl={{ span: 11 }}>
<Form form={rForm} onValuesChange={rightOnValuesChange}>
<Row gutter={{ md: 8, xxl: 16 }}>
<Col span={12}>
<Form.Item name="systemNodeIdLike" label="设备系统">
<TreeSelect
allowClear
placeholder="请选择"
treeData={systemData}
showSearch
treeNodeFilterProp="title"
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item name="typeIdLike" label="设备类型">
<DicTreeSelect treeData={deviceType} parSelectable={true} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item name="blurQuery" label="查询">
<Input placeholder="请输入设备名称/设备编号" allowClear suffix={<SearchOutlined style={{ color: '#EDEDED' }} />} />
</Form.Item>
</Col>
</Row>
</Form>
<Divider style={{ margin: '0 0 5px' }} />
<Table
loading={loading || false}
rowSelection={rightRowSelection}
columns={rightColumns}
dataSource={rightList || []}
{...rightTableProps}
pagination={groupDeviceList.pagination}
rowKey={record => record.id}
scroll={{
y: 400,
x: 1000
}}
/>
</Col>
</Row>
</div>
}
export default connect(({ opsDevice, dict, loading }) => ({
dict,
opsDevice,
loading: loading.effects['opsDevice/device_service_device_post_group']
}))(TransferTable)