import React, { useState, useCallback, useEffect, useLayoutEffect } from 'react'
import { Checkbox, DatePicker, Tabs, Table, Select } from "antd";
import moment from 'moment';
import locale from "antd/es/date-picker/locale/zh_CN";
import Title from '../../components/Title'
import TableList from '../../components/TableList';
import CheckedList from "../../components/CheckedList";
import XLSX from 'xlsx'
import { SearchOutlined } from '@ant-design/icons';
import MyReport from './MyReport';
import VisualReport from './visual_report/VisualReport';
import VisualReportForBu from './visual_report/BuVisualReport';
import AlertUtil from "../../utils/AlertUtil";
import ApiUtils from '../../utils/ApiUtils';
import Utils from '../../utils/Utils';
import PageNav from "../navigation/PageNav";
import History from "../historical_changes/Historicalchanges";
import FileUpload from '../../components/FileUpload';
const CheckboxGroup = Checkbox.Group;
const columns = [
{ title: '指标编码', sort: 'indexCode', key: 'indexCode' },
{ title: '指标名称', sort: 'indexName', key: 'indexName' },
{ title: '指标主题', sort: 'indexTheme', key: 'indexTheme' },
{ title: '指标类型', sort: 'indexType', key: 'indexType' },
{ title: '计量单位', sort: 'unit', key: 'unit' },
// { title: '指标口径', sort: 'caliber', key: 'caliber'},
// { title: '规口管理部门', sort: 'centralizedManagement', key: 'centralizedManagement'},
// { title: '统计频率', sort: 'statisticalFrequency', key: 'statisticalFrequency'},
// { title: '统计时间', sort: 'statisticalTime', key: 'statisticalTime'},
// { title: '数据来源', sort: 'dataSources', key: 'dataSources'},
// { title: '指标状态', sort: 'indexState', key: 'indexState'},
// { title: '是否PKI', sort: 'isKpi', key: 'isKpi'},
{ title: '操作历史', sort: 'viewhis', key: 'viewhis' },
// {
// title: 'Action',
// dataIndex: '',
// key: 'x',
// render: () => <a>Delete</a>,
// width:'150rem'
// },
];
const datasource = [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
},
{
key: 2,
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
},
{
key: 3,
name: 'Not Expandable',
age: 29,
address: 'Jiangsu No. 1 Lake Park',
description: 'This not expandable',
},
{
key: 4,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
},
];
export default function ReportManagement(props: any) {
useEffect(() => {
localStorageUpdated()
GetReportInit();
getBU()
search_click(null)
props.history.location.state&&props.history.location.state.option&&setOpenStates(props.history.location.state.option)
}, []);
const localStorageUpdated = () => {
var _this = localStorage.getItem("localstorage-status")
_this == "false" ? setFontColor("#302F2C") : setFontColor('rgb(244 76 76)')
window.addEventListener("setItemEvent", (e: any) => {
if (e.key == 'localstorage-status') {
var _this = localStorage.getItem("localstorage-status")
console.log(e.newValue)
e.newValue == "false" ? setFontColor("#302F2C") : setFontColor('rgb(244 76 76)')
}
});
}
/* --- 数据 ----*/
const [rendreport, setRendreport] = useState<any>(0);
const [tabledata, setTabledata] = useState<any>([]);
const [tablecolumns, setTablecolumns] = useState<any>(columns)
const [condtiontime, setCondtiontime] = useState<any>({ stime: '', etime: '' });
const [tasktype, setTasktype] = useState<any>({
核保: false, 理赔: false, 保全: false, 通用: false,
});
const [CollectList, setCollectList] = useState<any>()
const [extract, setExtract] = useState<any>({
"rid": "",
"reportCode": "",
reportModule: null,
"reportStatus": "",
"reportName": "",
"reportTheme": "",
"reportPurpose": "",
"keyIndicators": "",
"reportRange": "",
"presentationDimension": "",
"reportType": "",
"centralizedManagement": "",
"userDepartment": "",
"usageFrequency": "",
"originalReport": "",
"userId": "",
starttime: '',
endtime: '',
SSO: null,
BU: null,
CITY: null,
});
const [checkedList, setCheckedList] = useState<any>({
SSO: ["S-SSO", "N-SSO"],
BU: [],
CITY: [],
})
const [viewHistory, setViewHistory] = useState<any>({
tunon: false,
rootId: ''
});
//search 的条件
const [queryCondtion, setQueryCondtion] = useState<any>(
{
rid: "",
reportCode: "",
reportModule: "",
reportStatus: "",
reportName: "",
reportTheme: "",
reportPurpose: "",
keyIndicators: "",
reportRange: "",
presentationDimension: "",
reportType: null,
centralizedManagement: null,
userDepartment: null,
usageFrequency: "",
originalReport: "",
userId: "",
sso: '',
bu: '',
city: ''
}
);
//信息和修改的载体
const [editCondtion, setEditCondtion] = useState<any>(
{
rid: "",
reportCode: "",
reportModule: "",
reportStatus: "",
reportName: "",
reportTheme: "",
reportPurpose: "",
keyIndicators: "",
reportRange: "",
presentationDimension: "",
reportType: null,
centralizedManagement: null,
userDepartment: null,
usageFrequency: null,
originalReport: "",
userId: "",
belongingDepartment: "",
sso: '',
bu: '',
city: ''
}
);
const [quotaConfig, setQuotaConfig] = useState<any>();
const [authlist, setAuthlist] = useState<any>()
const [open, setOpen] = useState<any>(props.history.location.state ? true : false)
const [openStates, setOpenStates] = useState<any>("UNI")
const [xFontColor, setFontColor] = useState<any>("#000")
const { Option } = Select;
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
//多选框状态
const [checked, setChecked] = useState<any>({
reportModule: false,
centralizedManagement: false,
userDepartment: false,
edit_userDepartment: false,
usageFrequency: false,
extract_reportModule: false,
extract_SSO: false,
extract_BU: false,
extract_CITY: false
})
// 复选框下拉框初始化数据
const GetReportInit = () => {
ApiUtils.ReportInit().then((res: any) => {
if (res && res.code == 0) {
setQuotaConfig(res.data.data)
} else {
AlertUtil.warningMsg(res.msg)
}
})
}
//BU
const getBU = () => {
ApiUtils.getBuByOrg().then((res: any) => {
res && setCheckedList({
...checkedList,
BU: res.data,
})
})
console.log(checkedList)
}
//CITY
const getCITY = (data: any) => {
let jsonDate = data != null ? data.join(',') : ''
ApiUtils.getCityByBu(jsonDate).then((res: any) => {
res && setCheckedList({
...checkedList,
CITY: res.data,
})
})
}
/* --- 方法----*/
const table_rowclick = (rowitem: any) => {
// console.log(rowitem,e,"sso2-quota")
// if(!e.target.matches('span')){
setRendreport(1)
if (rowitem != '') {
setEditCondtion({
rid: rowitem.rid,
reportCode: rowitem.reportCode,
reportModule: rowitem.reportModule,
reportName: rowitem.reportName,
reportStatus: rowitem.reportStatus,
reportPurpose: rowitem.reportPurpose,
keyIndicators: rowitem.keyIndicators,
reportRange: rowitem.reportRange,
presentationDimension: rowitem.presentationDimension,
reportType: rowitem.reportType,
caliber: rowitem.caliber,
centralizedManagement: rowitem.centralizedManagement,
userDepartment: rowitem.userDepartment ? rowitem.userDepartment.split(',') : rowitem.userDepartment,
usageFrequency: rowitem.usageFrequency ? rowitem.usageFrequency.split('/') : rowitem.usageFrequency,
originalReport: rowitem.originalReport,
userId: rowitem.userId,
belongingDepartment: rowitem.belongingDepartment
})
}
}
const RowDoubleClick = (record: any) => {
table_rowclick(record)
}
const TableRowClick = () => {
let RowElement: any = document.getElementsByClassName('table_container')
if (RowElement.length) {
console.log(RowElement[0].children, "sso2-rep")
}
}
const search_click = async (type: any) => {
let search_condtion: any
if (type === 'page') {
//页面条件
search_condtion = {
reportCode: queryCondtion.reportCode,
reportName: queryCondtion.reportName,
reportTheme: queryCondtion.indexTheme,
centralizedManagement: queryCondtion.centralizedManagement != null ? queryCondtion.centralizedManagement.join(',') : '',
userDepartment: queryCondtion.userDepartment != null ? queryCondtion.userDepartment.join(',') : '',
// reportModule: Object.entries(tasktype).filter((el: any) => el[1] == true).map((el: any) => el[0]).join(','),
reportModule: queryCondtion.reportModule ? queryCondtion.reportModule.join(',') : '',
userId: ApiUtils.userInfo.userId
}
} else {
search_condtion = {
reportCode: '',
reportName: '',
reportTheme: '',
centralizedManagement: '',
userDepartment: '',
reportModule: '',
userId: ApiUtils.userInfo.userId
}
}
// if (type == "4") {
// await ApiUtils.CollectList(ApiUtils.userInfo.userId).then((res: any) => {
// if (res && res.code == 0) {
// setCollectList(res.data)
// }
// })
// }
await ApiUtils.GetReportList(search_condtion).then((res: any) => {
if (res && res.code == 0) {
// console.log(res,"sso2-quota")
//format thead
let arr: any = []
let column: any
let attributeName: any
let columnrow = {
"reportCode": queryCondtion.reportCode,
"reportName": queryCondtion.reportName,
// "indexTheme": queryCondtion.reportName,
"reportPurpose": queryCondtion.reportPurpose,
"reportModule": queryCondtion.reportModule,
"reportStatus": queryCondtion.reportStatus,
"reportType": queryCondtion.reportType,
"centralizedManagement": queryCondtion.centralizedManagement,
}
Object.keys(columnrow).map((el: any) => {
// console.log(el,"sso2-dic")
switch (el) {
case 'reportCode':
attributeName = '报表编码'
break;
case 'reportName':
attributeName = '报表名称'
break;
case 'reportModule':
attributeName = '任务类型'
break;
case 'reportStatus':
attributeName = '报表状态'
break;
case 'reportPurpose':
attributeName = '报表用途概述'
break;
case 'keyIndicators':
attributeName = '所含关键指标'
break;
case 'reportRange':
attributeName = '报表范围框定条件'
break;
case 'presentationDimension':
attributeName = '报表数据列示维度'
break;
case 'reportType':
attributeName = '报表类型'
break;
// case 'caliber':
// attributeName='报表口径'
// break;
case 'centralizedManagement':
attributeName = '归口管理部门'
break
case 'userDepartment':
attributeName = '报表使用部门'
break
case 'usageFrequency':
attributeName = '报表使用频率'
break
case 'originalReport':
attributeName = '原报表名称'
break
case 'userId':
attributeName = '用户id'
break
case 'belongingDepartment':
attributeName = '报表所在系统'
break
}
if (attributeName == '报表名称' || attributeName == '报表用途概述') {
arr.push({
"title": attributeName,
"sort": el,
"width": "250",
"align": "center"
})
} else if(attributeName=="报表编码"){
arr.push({
"title": attributeName,
"sort": el,
"width": "156",
"align": "center"
})
}else{
arr.push({
"title": attributeName,
"sort": el,
"width": "100",
"align": "center"
})
}
})
setTablecolumns([...arr, { title: '操作', sort: 'viewhis', "width": "250", key: 'viewhis' },])
setTabledata(res.data.map((item: any) => {
item = {
"reportCode": item.reportCode,
"rid": item.rid,
// "taskType": queryCondtion.taskType,
"reportName": item.reportName,
// "indexCategory": queryCondtion.indexCategory,
// "indexSubclass": queryCondtion.indexSubclass,
"indexTheme": item.reportName,
// "indexDefinition": queryCondtion.indexDefinition,
// "formula": queryCondtion.formula,
"reportPurpose": item.reportPurpose,
"reportModule": item.reportModule,
"reportStatus": item.reportStatus,
"keyIndicators": item.keyIndicators,
"reportRange": item.reportRange,
"presentationDimension": item.presentationDimension,
"reportType": item.reportType,
"centralizedManagement": item.centralizedManagement,
"userDepartment": item.userDepartment,
"usageFrequency": item.usageFrequency,
"originalReport": item.originalReport,
"userId": item.userId,
belongingDepartment: item.belongingDepartment,
"viewhis": [<a title='查看操作历史' key={'history' + item.rid} onClick={() => setViewHistory({ tunon: true, rootId: item.rid })}>操作历史</a>, <a key={'extract' + item.rid} title='抽取' onClick={() => extractRow(item)}>抽取</a>, <a title='报表修改' key={'modfly' + item.rid} onClick={() => modfly(item)}>修改</a>]
}
return item
}))
}
})
}
const search_tasktype = (type: any, value: any, e: any) => {
console.log(type, value, e.target, "sso2-dic")
setTasktype({
...tasktype,
[type]: value
})
}
const clear_click = () => {
setQueryCondtion({
"rid": null,
"reportCode": '',
"reportModule": null,
"reportStatus": null,
"reportName": '',
"reportTheme": null,
"reportPurpose": null,
"keyIndicators": null,
"reportRange": null,
"presentationDimension": null,
"reportType": null,
"centralizedManagement": null,
"userDepartment": null,
"usageFrequency": null,
"originalReport": null,
"userId": null,
})
setTasktype({
核保: false, 理赔: false, 保全: false, 通用: false,
})
}
const clear_extract = () => {
setExtract({
"rid": null,
"reportCode": null,
"reportModule": '',
"reportStatus": null,
"reportName": null,
"reportTheme": null,
"reportPurpose": null,
"keyIndicators": null,
"reportRange": null,
"presentationDimension": null,
"reportType": null,
"centralizedManagement": null,
"userDepartment": null,
"usageFrequency": null,
"originalReport": null,
"userId": null,
model: '',
starttime: null,
endtime: null,
SSO: null,
BU: null,
CITY: null,
})
setCondtiontime({ ...condtiontime, stime: '', etime: '' })
// setCheckedList({ SSO: [], BU: [], CITY: [] })
}
const checkbox_click = (quota: any, value: any) => {
setEditCondtion({
...editCondtion,
[quota]: value,
})
}
const checkbox_click_select = (value: any, quota: any) => {
setEditCondtion({
...editCondtion,
[quota]: value,
})
}
const checkbox_click_search = (quota: any, value: any) => {
setQueryCondtion({
...queryCondtion,
[quota]: value,
})
}
//时间组件触发函数
const EnddisabledDate = (current: any) => {
return current && current < moment(`${JSON.stringify(condtiontime.stime)}}`, 'YYYY-MM-DD')
}
const StartdisabledDate = (current: any) => {
return current && current > moment(`${JSON.stringify(condtiontime.etime)}}`, 'YYYY-MM-DD')
}
const cstime = (value: any, dateString: any) => {
setCondtiontime({ ...condtiontime, stime: dateString })
console.log(dateString, condtiontime, "sso2-report")
}
const cetime = (value: any, dateString: any) => {
setCondtiontime({ ...condtiontime, etime: dateString })
console.log(dateString, condtiontime, "sso2-report")
}
const modfily_comit = async () => {
let reqlist = {
"rid": editCondtion.rid,
"reportCode": editCondtion.reportCode ? editCondtion.reportCode : (AlertUtil.errorMsg('编码不能为空'), null),
"reportModule": editCondtion.reportModule,//
"reportStatus": editCondtion.reportStatus ? editCondtion.reportStatus : (AlertUtil.errorMsg('报表状态不能为空'), null),
"reportName": editCondtion.reportName ? editCondtion.reportName : (AlertUtil.errorMsg('报表名称不能为空'), null),
"reportTheme": editCondtion.reportTheme,
"reportPurpose": !editCondtion.reportPurpose ? (AlertUtil.errorMsg('报表用途概述不能为空')) : editCondtion.reportPurpose.length > 60 ? (AlertUtil.errorMsg('报表用途概述长度超过“60个字符!”'), null) : editCondtion.reportPurpose,
"keyIndicators": editCondtion.keyIndicators ? editCondtion.keyIndicators : (AlertUtil.errorMsg('所含关键指标不能为空'), null),
"reportRange": editCondtion.reportRange ? editCondtion.reportRange : (AlertUtil.errorMsg('报表范围框定条件不能为空'), null),
"presentationDimension": editCondtion.presentationDimension,
"reportType": editCondtion.reportType ? editCondtion.reportType : (AlertUtil.errorMsg('报表类型不能为空'), null),
"centralizedManagement": editCondtion.centralizedManagement ? editCondtion.centralizedManagement : (AlertUtil.errorMsg('归口管理部门不能为空'), null),
"userDepartment": editCondtion.userDepartment != null ? editCondtion.userDepartment.join(',') : (AlertUtil.errorMsg('报表使用部门不能为空'), null),
"usageFrequency": editCondtion.usageFrequency != null ? editCondtion.usageFrequency.join(',') : (AlertUtil.errorMsg('报表使用频率不能为空'), null),
"originalReport": editCondtion.originalReport,
"userId": ApiUtils.userInfo.userId,
belongingDepartment: !editCondtion.belongingDepartment ? (AlertUtil.errorMsg('报表所在系统不能为空')) : editCondtion.belongingDepartment.length > 100 ? (AlertUtil.errorMsg('报表所在系统长度超过“100个字符!”'), null) : editCondtion.belongingDepartment,
sso: '',
bu: '',
city: ''
}
if (!reqlist.reportCode || !reqlist.reportName || !reqlist.centralizedManagement || !reqlist.reportType || !reqlist.reportStatus || !reqlist.userDepartment || !reqlist.usageFrequency || !reqlist.belongingDepartment || !reqlist.reportPurpose || !reqlist.keyIndicators || !reqlist.reportRange) {
return
}
await ApiUtils.UpdateReport(reqlist).then((res: any) => {
if (res && res.code == 0) {
AlertUtil.showMsg('修改成功!')
} else {
AlertUtil.warningMsg(res.msg)
}
})
search_click(null)
setRendreport(2)
}
const modfly = (rowitem: any) => {
console.log(rowitem)
ApiUtils.isPurview("F1501") ? setRendreport(2) : AlertUtil.errorMsg('您没报表修改权限！')
if (rowitem != '') {
setEditCondtion({
rid: rowitem.rid,
reportCode: rowitem.reportCode,
reportModule: rowitem.reportModule,
reportStatus: rowitem.reportStatus,
reportName: rowitem.reportName,
reportPurpose: rowitem.reportPurpose,
keyIndicators: rowitem.keyIndicators,
reportRange: rowitem.reportRange,
presentationDimension: rowitem.presentationDimension,
reportType: rowitem.reportType,
centralizedManagement: rowitem.centralizedManagement,
userDepartment: rowitem.userDepartment ? rowitem.userDepartment.split('/') : rowitem.userDepartment,
usageFrequency: rowitem.usageFrequency ? rowitem.usageFrequency.split('/') : rowitem.usageFrequency,
originalReport: rowitem.originalReport,
userId: ApiUtils.userInfo.userId,
belongingDepartment: rowitem.belongingDepartment
})
}
}
const scribeReport = () => {
let userid = ApiUtils.userInfo.userId
ApiUtils.CollectReport(editCondtion.rid, ApiUtils.userInfo.userId).then((res: any) => {
if (res && res.code == 0) {
AlertUtil.showMsg('收藏成功!')
} else {
AlertUtil.showMsg(res.msg)
}
})
ApiUtils.CollectList(ApiUtils.userInfo.userId).then((res: any) => {
if (res && res.code == 0) {
setCollectList(res.data)
}
})
search_click(null)
}
const Extract = (item: any) => {
}
const BuildReport = () => {
let reqlist = {
reportCode: extract.reportCode,
reportModule: extract.reportModule ? extract.reportModule.join(',') : '',
frequency: extract.frequency,
startDate: condtiontime.stime,
endDate: condtiontime.etime,
zoneflg: extract.SSO ? extract.SSO.join(',') : '',
model: extract.model,
bu: extract.BU ? extract.BU.join(',') : '',
city: extract.CITY ? extract.CITY.join(',') : '',
name: extract.name
// frequency 适用频率 false
// startDate 起始时间 false
// endDate 终止时间 false
// zoneflg SSO false
// model 任务类型 false
// bu
// city
}
if (reqlist.startDate == '') {
AlertUtil.showMsg('请先选择起始日期！')
} else if (reqlist.endDate == '') {
AlertUtil.showMsg('请先选择终止日期！')
} else if (reqlist.model == '') {
AlertUtil.showMsg('请先选择任务类型!')
}
// else if (reqlist.zoneflg == '') {
// AlertUtil.showMsg('请先选择SS0！')
// } else if (reqlist.bu == '') {
// AlertUtil.showMsg('请先选择BU！')
// } else if (reqlist.city == '') {
// AlertUtil.showMsg('请先选择CITY！')
// }
else {
ApiUtils.ExtractReport(reqlist)
}
}
//Excel导出
const onExportExcel = (file: any) => {
let workbook: any = {
SheetNames: [],
Sheets: {}
};
if (tabledata != undefined && tabledata.length) {
let ws = XLSX.utils.json_to_sheet([...tabledata]);
let wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, '指标查询') // 工作簿名称
XLSX.writeFile(wb, '.\指标查询.xlsx') // 保存的文件名
} else {
AlertUtil.errorMsg('当前无表格数据!')
}
// ApiUtils.downloadFile(`/index/manage/getTemplate`, null, '参数导入模板.xlsx')
}
const extractRow = (itemrow: any) => {
let authlist = ApiUtils.userInfo
let coecode = ['002', '00200', '00201', '00202', '003', '004', '005', '006', '00600', '0060000', '00602', '0060200']
console.log(authlist, "sso2-report")
// if (authlist.orgCategory == 'CHO' || coecode.includes(authlist.orgCode) && itemrow.userDepartment.includes('SSO' || 'BU') || authlist.orgCategory == 'BU') {
setRendreport(3)
setExtract({
"reportCode": itemrow.reportCode,
"reportModule":itemrow.reportModule? itemrow.reportModule.split(','):null,
"frequency": itemrow.usageFrequency,
"startDate": condtiontime.stime,
"endDate": condtiontime.etime,
SSO: null,
"model": itemrow.reportType,
BU: null,
CITY: null,
name: itemrow.reportName
})
// }
// else {
// AlertUtil.errorMsg('您无权抽取该报表!')
// }
}
const render_report = () => {
// if (ApiUtils.isPurview("F1500") && rendreport == 1 || ApiUtils.isPurview("F1501") && rendreport == 2){
if (rendreport == 1 || rendreport == 2) {
return <div className='base_report'>
<div className='report_basic'>
<div className='lab_sp'>
<div className='search_resul_rectangle'></div>
<span>报表基本信息</span>
</div>
<div className="close" onClick={() => setRendreport(0)}>
<span></span>
<img src={(window.rootUrl + "/images/deletebtn.svg")} alt="" />
</div>
<div className='report_basic_line1'>
<div >
<span>编码</span>
{
rendreport == 1 &&
<input className="disable" value={editCondtion.reportCode} disabled />
}
{
rendreport == 2 &&
<input className="disable" type="text" value={editCondtion.reportCode} onChange={(e: any) => checkbox_click('reportCode', e.target.value)} disabled />
}
</div>
<div >
<span>报表名称</span>
{
rendreport == 1 &&
<Select defaultValue={editCondtion.reportName} className="disable" allowClear disabled>
{quotaConfig.reportName.map((item: any, index: any) => {
return <Option key={`reportName${index}`} value={item}>{item}</Option>
})}
</Select>
}
{
rendreport == 2 &&
<Select defaultValue={editCondtion.reportName} style={{ background: '#f8f8f8' }} onChange={(e: any) => checkbox_click_select(e, 'reportName')} allowClear >
{quotaConfig.reportName.map((item: any, index: any) => {
return <Option key={`reportName${index}`} value={item}>{item}</Option>
})}
</Select>
// <input type="text" value={editCondtion.reportName} onChange={(e: any) => checkbox_click('reportName', e.target.value)} />
}
</div>
{/* <div >
<span>报表主题</span>
{
rendreport == 1 &&
<input type="text" style={{ background: '#f8f8f8' }} value={editCondtion.reportName} disabled />
}
{
rendreport == 2 &&
<input type="text" value={editCondtion.reportName} onChange={(e: any) => checkbox_click('reportName', e.target.value)} />
}
</div> */}
<div >
<span>报表状态</span>
{
rendreport == 1 &&
<Select defaultValue={editCondtion.reportStatus} className="disable" allowClear disabled>
{quotaConfig.reportStatus.map((item: any, index: any) => {
return <Option key={`reportStatus${index}`} value={item}>{item}</Option>
})}
</Select>
}
{
rendreport == 2 &&
<Select defaultValue={editCondtion.reportStatus} style={{ background: '#f8f8f8' }} onChange={(e: any) => checkbox_click_select(e, 'reportStatus')} allowClear>
{quotaConfig.reportStatus.map((item: any, index: any) => {
return <Option key={`reportStatus${index}`} value={item}>{item}</Option>
})}
</Select>
}
</div>
</div>
<div className='report_basic_line2'>
<div >
<span>报表类型</span>
{
rendreport == 1 &&
<Select defaultValue={editCondtion.reportType} className="disable" allowClear disabled>
{quotaConfig.reportType.map((item: any, index: any) => {
return <Option key={`reportType${index}`} value={item}>{item}</Option>
})}
</Select>
// <input type="text" style={{ background: '#f8f8f8' }} value={editCondtion.reportType} disabled />
}
{
rendreport == 2 &&
<Select defaultValue={editCondtion.reportType} style={{ background: '#f8f8f8' }} onChange={(e: any) => checkbox_click_select(e, 'reportType')} allowClear>
{quotaConfig.reportType.map((item: any, index: any) => {
return <Option key={`reportType${index}`} value={item}>{item}</Option>
})}
</Select>
// <input type="text" value={editCondtion.reportType} onChange={(e: any) => checkbox_click('reportType', e.target.value)} />
}
</div>
<div >
<span>归口管理部门</span>
{
rendreport == 1 &&
<Select defaultValue={editCondtion.centralizedManagement} className="disable" disabled allowClear>
{quotaConfig.centralizedManagement.map((item: any, index: any) => {
return <Option key={`centralizedManagement${index}`} value={item}>{item}</Option>
})}
</Select>
// <input type="text" style={{ background: '#f8f8f8' }} value={editCondtion.centralizedManagement} disabled />
}
{
rendreport == 2 &&
<Select defaultValue={editCondtion.centralizedManagement} style={{ background: '#f8f8f8' }} onChange={(e: any) => checkbox_click_select(e, 'centralizedManagement')} allowClear>
{quotaConfig.centralizedManagement.map((item: any, index: any) => {
return <Option key={`centralizedManagement${index}`} value={item}>{item}</Option>
})}
</Select>
// <input type="text" value={editCondtion.centralizedManagement} onChange={(e: any) => checkbox_click('centralizedManagement', e.target.value)} />
}
</div>
<div>
<span>报表使用部门:</span>
{
rendreport == 1 &&
<div className='DivInput disable'>
{
editCondtion.userDepartment ? (editCondtion.userDepartment.length <= 2 ? editCondtion.userDepartment.map((value: React.ReactNode, index: string | number | undefined) => {
return <p key={index}>{value}</p>
}) :
<Title data={editCondtion.userDepartment} shu={2} />
) : <span style={{ color: "#b2b2b2" }}>请选择</span>
}
<SearchOutlined className='svg' />
</div>
}
{
rendreport == 2 &&
<div className='DivInput'>
{
editCondtion.userDepartment ? (editCondtion.userDepartment.length <= 2 ? editCondtion.userDepartment.map((value: React.ReactNode, index: string | number | undefined) => {
return <p key={index}>{value}</p>
}) :
<Title data={editCondtion.userDepartment} shu={2} />
) : <span style={{ color: "#b2b2b2" }}>请选择</span>
}
<SearchOutlined className='svg' onClick={() => checkcall('edit_userDepartment')} />
</div>
}
</div>
</div>
<div className='report_basic_line3'>
<div >
<span>统计频率</span>
{
rendreport == 1 &&
<div className='DivInput disable'>
{
editCondtion.usageFrequency ? (editCondtion.usageFrequency.length <= 2 ? editCondtion.usageFrequency.map((value: React.ReactNode, index: string | number | undefined) => {
return <p key={index}>{value}</p>
}) :
<Title data={editCondtion.usageFrequency} shu={2} />
) : <span style={{ color: "#b2b2b2" }}>请选择</span>
}
<SearchOutlined className='svg' />
</div>
}
{
rendreport == 2 &&
<div className='DivInput'>
{
editCondtion.usageFrequency ? (editCondtion.usageFrequency.length <= 2 ? editCondtion.usageFrequency.map((value: React.ReactNode, index: string | number | undefined) => {
return <p key={index}>{value}</p>
}) :
<Title data={editCondtion.usageFrequency} shu={2} />
) : <span style={{ color: "#b2b2b2" }}>请选择</span>
}
<SearchOutlined className='svg' onClick={() => checkcall('usageFrequency')} />
</div>
}
</div>
<div >
<span>报表所在系统</span>
{
rendreport == 1 &&
<input type="text" className="disable" value={editCondtion.belongingDepartment} disabled />
}
{
rendreport == 2 &&
<input type="text" value={editCondtion.belongingDepartment} onChange={(e: any) => checkbox_click('belongingDepartment', e.target.value)} />
}
</div>
<div></div>
</div>
<div className='report_basic_line4'>
<div >
<span>报表用途概述</span>
{
rendreport == 1 &&
<textarea className="disable" value={editCondtion.reportPurpose} disabled />
}
{
rendreport == 2 &&
<textarea value={editCondtion.reportPurpose} onChange={(e: any) => checkbox_click('reportPurpose', e.target.value)} />
}
</div>
<div >
<span>报表范围框定条件</span>
{
rendreport == 1 &&
<textarea className="disable" value={editCondtion.reportRange} disabled />
}
{
rendreport == 2 &&
<textarea className='disable' style={{ background: '#f8f8f8' }} value={editCondtion.reportRange} disabled onChange={(e: any) => checkbox_click('reportRange', e.target.value)} />
}
</div>
</div>
<div className='report_basic_line6'>
<div >
<span>所含关键指标</span>
{
rendreport == 1 &&
<textarea className="disable" value={editCondtion.keyIndicators} disabled />
}
{
rendreport == 2 &&
<textarea className='disable' style={{ background: '#f8f8f8' }} value={editCondtion.keyIndicators} onChange={(e: any) => checkbox_click('keyIndicators', e.target.value)} disabled />
}
</div>
</div>
{
rendreport == 1 &&
<div className='cancel'>
<button className='btn_white hoverBorder2' onClick={() => { setRendreport(0) }} >取消</button>
<button className={CollectList != null && CollectList.filter((el: any) => el.rid == editCondtion.rid).length > 0 ? 'btn_white disable btn_return' : 'btn_white hoverBorder2 btn_return'} onClick={() => CollectList != null && CollectList.filter((el: any) => el.rid == editCondtion.rid).length > 0 ? null : scribeReport()} >收藏</button>
<button style={{ marginLeft: "15rem" }} className='btn_return btn_white hoverBorder2' onClick={() => { ApiUtils.isPurview("F1501") ? setRendreport(2) : AlertUtil.errorMsg('您没报表修改权限！') }}>修改</button>
</div>
}
{
rendreport == 2 &&
<div className='cancel'>
<button className='btn_white hoverBorder2' onClick={() => { setRendreport(0) }} >取消</button>
<button className={CollectList != null && CollectList.filter((el: any) => el.rid == editCondtion.rid).length > 0 ? 'btn_white disable btn_return' : 'btn_white hoverBorder2 btn_return'} onClick={() => CollectList != null && CollectList.filter((el: any) => el.rid == editCondtion.rid).length > 0 ? null : scribeReport()} >收藏</button>
<button style={{ marginLeft: "15rem" }} className='btn_return btn_red hoverBorder2' onClick={modfily_comit}>提交</button>
</div>
}
<div style={{ clear: 'both' }}></div>
</div>
</div>
}
}
//多选框点击弹出
const checkcall = (val: any) => {
setChecked({
...checked,
[val]: true
})
}
const reportModule_callback = (val: any, list: any, chk: any) => {
console.log(list)
setChecked({
...checked,
reportModule: val
})
setQueryCondtion({
...queryCondtion,
reportModule: list ? list : null
})
}
const extract_reportModule_callback = (val: any, list: any, chk: any) => {
console.log(list)
setChecked({
...checked,
extract_reportModule: val
})
setQueryCondtion({
...extract,
reportModule: list ? list : null
})
}
const extract_SSO_callback = (val: any, list: any, chk: any) => {
console.log(list)
setChecked({
...checked,
extract_SSO: val
})
setExtract({
...extract,
SSO: list ? list : null
})
}
const extract_BU_callback = (val: any, list: any, chk: any) => {
let BU_list: any = [];
setChecked({
...checked,
extract_BU: val
})
if (list) {
checkedList.BU.forEach((item: any) => {
list.forEach((i: any) => {
if (i == item.ORG_NAME) {
BU_list.push(item.ORG_ENGNAME)
}
})
})
getCITY(BU_list)
setExtract({
...extract,
BU: list
})
}
}
const extract_CITY_callback = (val: any, list: any, chk: any) => {
let CITY_list: any = [];
setChecked({
...checked,
extract_CITY: val
})
list ? setExtract({
...extract,
CITY: list
}) : setExtract({
...extract
})
}
const centralizedManagement_callback = (val: any, list: any, chk: any) => {
setChecked({
...checked,
centralizedManagement: val
})
setQueryCondtion({
...queryCondtion,
centralizedManagement: list ? list : null
})
}
const userDepartment_callback = (val: any, list: any, chk: any) => {
setChecked({
...checked,
userDepartment: val
})
setQueryCondtion({
...queryCondtion,
userDepartment: list ? list : null
})
}
const edit_userDepartment_callback = (val: any, list: any, chk: any) => {
setChecked({
...checked,
edit_userDepartment: val
})
list ? setEditCondtion({
...editCondtion,
userDepartment: list
}) : setEditCondtion({
...editCondtion
})
}
const usageFrequency_callback = (val: any, list: any, chk: any) => {
setChecked({
...checked,
usageFrequency: val
})
list ? setEditCondtion({
...editCondtion,
usageFrequency: list
}) : setEditCondtion({
...editCondtion
})
}
const header = () => {
console.log(openStates)
}
return (
// <div style={{height: 'calc(100vh - 72rem)'}}>
<div style={{ width: '100%', height: 'calc(100vh - 72rem)', display: 'flex', flexDirection: 'column' }}>
<PageNav {...props} />
<div className='report_management'>
<div style={{
display: open ? "flex" : "none",
zIndex: 1000,
position: "absolute",
right: '22rem',
top: "0",
alignContent: 'center'
}}>
{
ApiUtils.isPurview('F2101') ?
<span style={{ color: openStates == 'UNI' ? xFontColor : "#D6D8DA", marginRight: "15rem" }}
onClick={() => setOpenStates('UNI')}>核保 </span>
: ""
}
{
(ApiUtils.isPurview('F2101') && ApiUtils.isPurview('F2103')) ?
<span style={{ marginRight: "15rem" }}>| </span>
: ""
}
{
ApiUtils.isPurview('F2103') ?
<span style={{ color: openStates == 'CLM' ? xFontColor : "#D6D8DA", marginRight: "15rem" }}
onClick={() => setOpenStates('CLM')}> 理赔 </span>
: ""
}
{
((ApiUtils.isPurview('F2103') && ApiUtils.isPurview('F2102')) || (ApiUtils.isPurview('F2101') && ApiUtils.isPurview('F2102'))) ?
<span style={{ marginRight: "15rem" }}>| </span>
: ""
}
{
ApiUtils.isPurview('F2102') ?
<span style={{ color: openStates == 'POS' ? xFontColor : "#D6D8DA", marginRight: "15rem" }}
onClick={() => setOpenStates('POS')}> 保全</span>
: ""
}
</div>
<Tabs className='tabs' defaultActiveKey={props.history.location.state ? (props.history.location.state.keys) : "1"} centered={true} onChange={(e: any) => {
if (e == 1) {
search_click(null)
}
}}>
<TabPane
tab={
<div onClick={() => { setOpen(false) }}>
<span className='tabs_triangle'></span>
<span >格式报表管理</span>
</div>
}
key="1"
style={{ position: "relative" }}
// locale={locale}
>
<div className='page_big'>
<div className='search_condtion'>
<div className='sp_lab'>
<div className='search_resul_rectangle'></div>
<span>查询条件</span>
</div>
<div className='search_condtion_top'>
<div>
<span>编码:</span>
<input type="text" value={queryCondtion.reportCode} onChange={(e: any) => checkbox_click_search('reportCode', e.target.value)} />
</div>
<div>
<span>报表名称:</span>
<input type="text" value={queryCondtion.reportName || ''} onChange={(e: any) => checkbox_click_search('reportName', e.target.value)} />
</div>
<div>
<span>任务类型:</span>
<div className='DivInput'>
{
queryCondtion.reportModule ? (queryCondtion.reportModule.length <= 2 ? queryCondtion.reportModule.map((value: React.ReactNode, index: string | number | undefined) => {
return <p key={index}>{value}</p>
}) :
<Title data={queryCondtion.reportModule} shu={2} />
) : <span style={{ color: "#b2b2b2" }}>请选择</span>
}
<SearchOutlined className='svg' onClick={() => checkcall('reportModule')} />
</div>
</div>
<div>
<span>归口管理部门:</span>
<div className='DivInput'>
{
queryCondtion.centralizedManagement ? (queryCondtion.centralizedManagement.length <= 2 ? queryCondtion.centralizedManagement.map((value: React.ReactNode, index: string | number | undefined) => {
return <p key={index}>{value}</p>
}) :
<Title data={queryCondtion.centralizedManagement} shu={2} />
) : <span style={{ color: "#b2b2b2" }}>请选择</span>
}
<SearchOutlined className='svg' onClick={() => checkcall('centralizedManagement')} />
</div>
</div>
<div>
<span>报表使用部门:</span>
<div className='DivInput'>
{
queryCondtion.userDepartment ? (queryCondtion.userDepartment.length <= 2 ? queryCondtion.userDepartment.map((value: React.ReactNode, index: string | number | undefined) => {
return <p key={index}>{value}</p>
}) :
<Title data={queryCondtion.userDepartment} shu={2} />
) : <span style={{ color: "#b2b2b2" }}>请选择</span>
}
<SearchOutlined className='svg' onClick={() => checkcall('userDepartment')} />
</div>
</div>
<div></div>
</div>
<div className='search_condtion_btn'>
<button className='btn_white hoverBorder2' onClick={clear_click}>清空</button>
<button className='btn_red btn_return hoverBorder2' onClick={() => search_click('page')} >查询</button>
</div>
</div>
<div id="hisHead">
{
viewHistory.tunon && <History rootIdData={viewHistory.rootId} guan={() => setViewHistory({ ...viewHistory, tunon: !viewHistory.tunon })} getHistoricalList={viewHistory.tunon}></History>
}
</div>
<div className='search_resul'>
<div className='search_resul_table'>
{
// tabledata != undefined && tablecolumns != undefined ?
<TableList flag={true} theadList={tablecolumns} tbodyList={tabledata} isBig={false} isCheckBox={false} changesTHlist={Extract} getWorkteamId={RowDoubleClick} title="查询结果" />
// :null
}
</div>
{
ApiUtils.isPurview("F1502") &&
<div className='search_resul_btn'>
<div className="itableList_inData btn_icon btn_back hoverBorder2" onClick={onExportExcel}>
<i className="bg_imgIcon_daochu" />
<span>导出</span>
{/* <FileUpload uploadType={"DictionaryQuota"} /> */}
</div>
</div>
}
</div>
{
rendreport == 3 &&
<div className='condtion_extract'>
<div className='condtion_select'>
<div className="close" onClick={() => setRendreport(0)}>
<span></span>
<img src={(window.rootUrl + "/images/deletebtn.svg")} alt="" />
</div>
<div className='sp_lab'>
<div className='search_resul_rectangle'></div>
<span>条件框定</span>
</div>
<div className='condtion_select_line1'>
<div>
<span>起始日期:</span>
<DatePicker format="YYYY-MM-DD" value={condtiontime.stime ? moment(condtiontime.stime, 'YYYY-MM-DD') : null} disabledDate={StartdisabledDate} onChange={cstime} />
</div>
<div>
<span>终止日期:</span>
<DatePicker format="YYYY-MM-DD" value={condtiontime.etime ? moment(condtiontime.etime, 'YYYY-MM-DD') : null} disabledDate={EnddisabledDate} onChange={cetime} />
</div>
<div style={{ width: "350rem" }}>
<span>任务类型:</span>
<div className='DivInput'>
{
extract.reportModule ? (extract.reportModule.length <= 2 ? extract.reportModule.map((value: React.ReactNode, index: string | number | undefined) => {
return <p key={index}>{value}</p>
}) :
<Title data={extract.reportModule} shu={2} />
) : <span style={{ color: "#b2b2b2" }}>请选择</span>
}
<SearchOutlined className='svg' onClick={() => checkcall('extract_reportModule')} />
</div>
</div>
</div>
<div className='condtion_select_line2'>
<div>
<span>SSO:</span>
<div className='DivInput'>
{
extract.SSO ? (extract.SSO.length <= 2 ? extract.SSO.map((value: React.ReactNode, index: string | number | undefined) => {
return <p key={index}>{value}</p>
}) :
<Title data={extract.SSO} shu={2} />
) : <span style={{ color: "#b2b2b2" }}>请选择</span>
}
<SearchOutlined className='svg' onClick={() => checkcall('extract_SSO')} />
</div>
{/* <CheckboxGroup value={checkedList.SSO} onChange={(e: any) => { GenerateReport('SSO', e) }}>
<Checkbox value={"S-SSO"}>S-SSO</Checkbox>
<Checkbox value={"N-SSO"}>N-SSO</Checkbox>
</CheckboxGroup> */}
</div>
<div>
<span>BU:</span>
<div className='DivInput'>
{
extract.BU ? (extract.BU.length <= 2 ? extract.BU.map((value: React.ReactNode, index: string | number | undefined) => {
return <p key={index}>{value}</p>
}) :
<Title data={extract.BU} shu={2} />
) : <span style={{ color: "#b2b2b2" }}>请选择</span>
}
<SearchOutlined className='svg' onClick={() => checkcall('extract_BU')} />
</div>
{/* <CheckboxGroup value={checkedList.BU} onChange={(e: any) => { GenerateReport('BU', e) }}>
<Checkbox value={"上海BU"}>上海BU</Checkbox>
<Checkbox value={"北京BU"}>北京BU</Checkbox>
</CheckboxGroup> */}
</div>
<div>
<span>CITY:</span>
<div className='DivInput'>
{
extract.CITY ? (extract.CITY.length <= 2 ? extract.CITY.map((value: React.ReactNode, index: string | number | undefined) => {
return <p key={index}>{value}</p>
}) :
<Title data={extract.CITY} shu={2} />
) : <span style={{ color: "#b2b2b2" }}>请选择</span>
}
<SearchOutlined className='svg' onClick={() => checkcall('extract_CITY')} />
</div>
{/* <CheckboxGroup value={checkedList.CITY} onChange={(e: any) => { GenerateReport('CITY', e) }}>
<Checkbox value={"上海"}>上海</Checkbox>
<Checkbox value={"北京"}>北京</Checkbox>
<Checkbox value={"广州"}>广州</Checkbox>
</CheckboxGroup> */}
</div>
</div>
<div className='condtion_select_btn'>
<button className='btn_white hoverBorder2' onClick={() => clear_extract()}>清空</button>
<button className='btn_red btn_return hoverBorder2' onClick={BuildReport}>生成</button>
</div>
</div>
</div>
}
</div>
<div>
{
render_report()
}
</div>
</TabPane>
{/* <TabPane
tab={
<div>
<span className='tabs_triangle'></span>
<span >自定义报表</span>
</div>
}
key="2"
style={{ position: "relative" }}
// locale={locale}
>
<ReportCustom />
</TabPane>
<TabPane
tab={
// <div style={{height: 'calc(100vh - 15rem)',overflow: 'auto'}}>
<div>
<span className='tabs_triangle'></span>
<span >报表订阅</span>
</div>
}
key="3"
style={{ position: "relative" }}
// locale={locale}
>
<ReportSubscribe />
</TabPane> */}
<TabPane
tab={
<div onClick={() => { setOpen(false) }}>
<span className='tabs_triangle'></span>
<span >我的报表</span>
</div>
}
key="4"
style={{ position: "relative" }}
// locale={locale}
>
<MyReport CollectList={CollectList} />
</TabPane>
<TabPane
tab={
<div onClick={() => { setOpen(true) }}>
<span className='tabs_triangle'></span>
<span>可视化报表</span>
</div>
}
key="5" style={{ position: "relative" }}>
<VisualReport openStates={openStates} xFontColor={xFontColor} />
</TabPane>
<TabPane
tab={
<div onClick={() => { setOpen(true) }}>
<span className='tabs_triangle'></span>
<span>BU可视化报表</span>
</div>
}
key="6" style={{ position: "relative" }}>
<VisualReportForBu openStates={openStates} xFontColor={xFontColor} />
</TabPane>
</Tabs>
</div>
{/* 引入所有的多选框弹出框 */}
{
checked.reportModule && <CheckedList title="选择任务类型" data={quotaConfig.reportModule.map((item: any) => item = { code: item, title: item })} titlelist={queryCondtion.reportModule} flag={7} callBack={reportModule_callback} />
}
{
checked.extract_reportModule && <CheckedList title="选择任务类型" data={quotaConfig.reportModule.map((item: any) => item = { code: item, title: item })} titlelist={extract.reportModule} flag={7} callBack={extract_reportModule_callback} />
}
{
checked.centralizedManagement && <CheckedList title="选择归口管理部门" data={quotaConfig.centralizedManagement.map((item: any) => item = { code: item, title: item })} titlelist={queryCondtion.centralizedManagement} flag={7} callBack={centralizedManagement_callback} />
}
{
checked.userDepartment && <CheckedList title="选择报表使用部门" data={quotaConfig.userDepartment.map((item: any) => item = { code: item, title: item })} titlelist={queryCondtion.userDepartment} flag={7} callBack={userDepartment_callback} />
}
{
checked.edit_userDepartment && <CheckedList title="选择报表使用部门" data={quotaConfig.userDepartment.map((item: any) => item = { code: item, title: item })} titlelist={editCondtion.userDepartment} flag={7} callBack={edit_userDepartment_callback} />
}
{
checked.usageFrequency && <CheckedList title="选择统计频率" data={quotaConfig.usageFrequency.map((item: any) => item = { code: item, title: item })} titlelist={editCondtion.usageFrequency} flag={7} callBack={usageFrequency_callback} />
}
{
checked.extract_SSO && <CheckedList title="选择SSO" data={checkedList.SSO.map((item: any) => item = { code: item, title: item })} titlelist={extract.SSO} flag={7} callBack={extract_SSO_callback} />
}{
checked.extract_BU && <CheckedList title="选择BU" data={checkedList.BU.map((item: any) => item = { code: item.ORG_NAME, title: item.ORG_NAME })} titlelist={extract.BU} flag={7} callBack={extract_BU_callback} />
}{
checked.extract_CITY && <CheckedList title="选择CITY" data={checkedList.CITY.map((item: any) => item = { code: item.CITYNAME, title: item.CITYNAME })} titlelist={extract.CITY} flag={7} callBack={extract_CITY_callback} />
}
</div>
)
}
