/* eslint-disable guard-for-in */ /* eslint-disable no-restricted-syntax */ import React, { useEffect, useState } from 'react'; import { Button, Space, notification, Modal, Popconfirm, Empty, Spin, Tooltip } from 'antd'; import { BarcodeOutlined, UserOutlined, CalendarOutlined, PlusOutlined, CheckOutlined, } from '@ant-design/icons'; import styles from './DatabaseInitialization.less'; import { GetLicenseDifference, InitEditDataBase, GetProductList } from '@/services/database/api'; const AppendModal = props => { const { callBackSubmit = () => {}, visible, onCancel, value, keepHistroy } = props; const [data, setData] = useState([]); const [allLength, setAllLength] = useState(''); const [flag, setFlag] = useState(); const [loading, setLoading] = useState(false); const [code, setCode] = useState(''); const [project, setProject] = useState(''); const [name, setName] = useState(''); const [number, setNumber] = useState(''); const [much, setMuch] = useState([]); const [code1, setCode1] = useState(''); const [project1, setProject1] = useState(''); const [name1, setName1] = useState(''); const [number1, setNumber1] = useState(''); const [allValue, setAllValue] = useState([]); useEffect(() => { if (visible) { getProduct(); console.log(value); console.log(keepHistroy); let aa = []; keepHistroy.map((i, j) => { if (i.license != '已使用' && j != keepHistroy.length - 1) { aa.push(i); } }); if (aa.length > 0) { let a = []; let b = []; let c = []; aa.map(k => { a.push(k.license); b.push(k.projectName); c.push(`${k.applicantName}(${k.jobNumber})`); }); setCode1(a.toString()); setProject1(b.toString()); setName1(c.toString()); } setMuch(aa); setCode(keepHistroy[keepHistroy.length - 1].license); setProject(keepHistroy[keepHistroy.length - 1].projectName); setName(keepHistroy[keepHistroy.length - 1].applicantName); setNumber(keepHistroy[keepHistroy.length - 1].jobNumber); } else { setData([]); setFlag(); setAllLength(''); } }, [visible]); const getProduct = () => { setLoading(true); GetLicenseDifference({ ...value, password: btoa(value.password) }).then(res => { setLoading(false); if (res.code === 0) { let aab = []; res.data.map(k => { if (k.status == 0) { aab.push(k.name); } }); setAllValue(aab); let arr = formateArrDataA(res.data, 'productName'); let aa = Object.keys(arr); aa.map(i => { let list = []; arr[i].map(j => { list.push(j.name); }); arr[i] = list; }); console.log(arr); setData(arr); if (res.data.length == 0) { setFlag(1); } else { setFlag(0); } setAllLength(res.data.length); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }); }; const formateArrDataA = (initialArr, name) => { // 判定传参是否符合规则 if (!(initialArr instanceof Array)) { return '请传入正确格式的数组'; } if (!name) { return '请传入对象属性'; } // 先获取一下这个数组中有多少个"name" let nameArr = []; for (let i in initialArr) { if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) { nameArr.push(initialArr[i][`${name}`]); } } // 新建一个包含多个list的结果对象 let tempObj = {}; // 根据不同的"name"生成多个数组 for (let k in nameArr) { for (let j in initialArr) { if (initialArr[j][`${name}`] == nameArr[k]) { // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变 tempObj[nameArr[k]] = tempObj[nameArr[k]] || []; tempObj[nameArr[k]].push(initialArr[j]); } } } for (let keys in tempObj) { let arr = []; tempObj[keys].map((item, index) => { tempObj[keys] = arr; item.key = index; arr.push(item); }); } return tempObj; }; const Submit = () => { if (allValue.length > 0) { callBackSubmit(); } }; const title = e => { let aa = []; data[e].map(i => { if (allValue.indexOf(i) != -1) { aa.push(i); } }); console.log(aa); return aa.length; }; const title1 = () => { if (allValue.length == 0) { return <span style={{ color: 'red' }}>license下产品已全被初始化,无需再次追加!!!</span>; } return <span style={{ color: 'rgb(24 144 255)' }}>是否确认追加!</span>; }; return ( <Modal title="产品追加" width="1000px" visible={visible} onCancel={onCancel} destroyOnClose maskClosable={false} bodyStyle={{ height: '500px', overflowY: 'scroll', }} footer={ <Space> <Button onClick={onCancel}>取消</Button> <Popconfirm placement="topLeft" title={title1} okText="确认" cancelText="取消" onConfirm={() => { Submit(); }} > <Button type="primary">追加</Button> </Popconfirm> </Space> } > <Spin spinning={loading}> {flag == 1 ? ( <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={<span>当前授权码下产品已全部初始化,无需再次追加</span>} /> ) : ( <> {allLength > 0 && ( <div style={{ height: '50px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px', }} > {much.length > 0 ? ( <Tooltip title={code1}> <div style={{ display: 'inline-block', backgroundColor: 'aliceblue' }}> <BarcodeOutlined style={{ color: 'rgb(227 168 96)', marginRight: '5px' }} /> 授权码: {code ? <>{code}</> : <span>--</span>} <span>...</span> </div> </Tooltip> ) : ( <div style={{ display: 'inline-block', backgroundColor: 'aliceblue' }}> <BarcodeOutlined style={{ color: 'rgb(227 168 96)', marginRight: '5px' }} /> 授权码: {code ? <>{code}</> : <span>--</span>} </div> )} {much.length > 0 ? ( <Tooltip title={project1}> <div style={{ display: 'inline-block', backgroundColor: 'aliceblue' }}> <CalendarOutlined style={{ color: '#8466cb', marginRight: '5px' }} /> 项目名:{project ? <>{project}</> : '--'} <span>...</span> </div> </Tooltip> ) : ( <div style={{ display: 'inline-block', backgroundColor: 'aliceblue' }}> <CalendarOutlined style={{ color: '#8466cb', marginRight: '5px' }} /> 项目名:{project ? <>{project}</> : '--'} </div> )} {much.length > 0 ? ( <Tooltip title={name1}> <div style={{ display: 'inline-block', backgroundColor: 'aliceblue' }}> <UserOutlined style={{ color: 'green', marginRight: '5px' }} /> 授权人:{name ? <>{name}</> : '-'} {number ? <>({number})</> : '-'} {much.length > 0 ? <span>...</span> : <></>} </div> </Tooltip> ) : ( <div style={{ display: 'inline-block', backgroundColor: 'aliceblue' }}> <UserOutlined style={{ color: 'green', marginRight: '5px' }} /> 授权人:{name ? <>{name}</> : '-'} {number ? <>({number})</> : '-'} </div> )} <div style={{ display: 'inline-block', backgroundColor: 'aliceblue' }}> <div style={{ float: 'right' }}> <strong> 追加产品列表(共 <span style={{ color: 'rgb(24 144 255)' }}> {allValue && allValue.length > 0 ? allValue.length : 0} </span> <span>/</span> <span style={{ color: 'rgb(24 144 255)' }}>{allLength}</span> 个) </strong> </div> </div> </div> )} {data && Object.keys(data).map((i, j) => ( <div style={{ border: '2px solid #c2cdfd', borderRadius: '5px', marginBottom: '20px', position: 'relative', paddingTop: '30px', }} > <div style={{ position: 'absolute', left: '13px', top: '-12px', backgroundColor: 'white', paddingLeft: '10px', paddingRight: '10px', }} > <> <span>{i}</span> <span> (共 <span style={{ color: 'rgb(24, 144, 255)' }}>{title(i)}</span> <span>/</span> <span style={{ color: 'rgb(24, 144, 255)' }}>{data[i].length}</span>个) </span> </> </div> {data[i].map(j => ( <span style={{ width: '150px', marginLeft: '24px', display: 'inline-block', marginBottom: '20px', }} > {allValue.indexOf(j) != -1 ? ( <span> {' '} <PlusOutlined style={{ color: 'rgb(24, 144, 255)', marginRight: '5px' }} /> {j} </span> ) : ( <span> <CheckOutlined style={{ color: 'green', marginRight: '5px' }} /> {j} </span> )} </span> ))} </div> ))} </> )} </Spin> </Modal> ); }; export default AppendModal;