944 lines
44 KiB
TypeScript
944 lines
44 KiB
TypeScript
import { connect } from "umi";
|
||
import type { CurrentUser } from "umi";
|
||
import type { ConnectState } from "@/models/connect";
|
||
import React, { useRef, useState } from "react";
|
||
import LeftSelectTree from "@/pages/reports/settlementAccount/component/leftSelectTree";
|
||
import ServerpartInfo from "./components/serverpartInfo";
|
||
import ProCard from "@ant-design/pro-card";
|
||
import { ExclamationCircleOutlined, MenuFoldOutlined } from "@ant-design/icons";
|
||
import { Button, Col, FormInstance, message, Modal, Row, Tree, Image, Menu, Avatar, Tabs } from "antd";
|
||
import LoadingBox from "@/pages/reports/Finance/businessAnalysis/components/loading";
|
||
import session from "@/utils/session";
|
||
import moment from 'moment'
|
||
import { handleSynchroSERVERPART } from "@/pages/newDataAnalysis/service";
|
||
import useRequest from "@ahooksjs/use-request";
|
||
import { getServerpartTree } from "@/services/options";
|
||
import { handleSynchroNOTICEINFO } from "@/pages/basicManage/highwayHeadlines/service";
|
||
import ProForm, { ProFormText, ProFormUploadButton } from "@ant-design/pro-form";
|
||
import { deletePicture, getPictureList, uploadPicture } from "@/services/picture";
|
||
import { handeGetPictureList } from "../service";
|
||
import SubMenu from "antd/lib/menu/SubMenu";
|
||
import Draggable from "react-draggable";
|
||
import searchIcon from '@/assets/ai/searchIcon.png'
|
||
import close from '@/assets/ai/close.png'
|
||
import './style.less'
|
||
import { handleSetlogSave } from "@/utils/format";
|
||
|
||
const beforeUpload = (file: any) => {
|
||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
||
if (!isJpgOrPng) {
|
||
message.error('请上传JPEG、jpg、png格式的图片文件!');
|
||
}
|
||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||
if (!isLt2M) {
|
||
message.error('图片大小不超过 5MB!');
|
||
}
|
||
return isJpgOrPng && isLt2M;
|
||
}
|
||
|
||
const serverpartInfo: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||
const { confirm } = Modal;
|
||
const { currentUser } = props
|
||
const searchTreeRef = useRef<FormInstance>();
|
||
const modalRef = useRef<FormInstance>();
|
||
const [collapsible, setCollapsible] = useState<boolean>(false)
|
||
const [treeView, setTreeView] = useState<any>()
|
||
// 树相关的属性和方法
|
||
const [selectedId, setSelectedId] = useState<string>()
|
||
// 显示右边的表单
|
||
const [showRightForm, setShowRightForm] = useState<boolean>(true)
|
||
const serverPartRef = useRef<any>()
|
||
const shopregionObj = session.get('shopregionObj')
|
||
// 显示上传图片的悬浮框
|
||
const [showUploadImgModal, setShowUploadImgModal] = useState<boolean>(false)
|
||
// 点击的按钮类型 1 服务区图片上传 2 母婴室图片上传 3 司机之家图片上传 4 住宿客房图片上传 5 便利店图片上传
|
||
const [showType, setShowType] = useState<number>(0)
|
||
// 悬浮框的点击确认的效果
|
||
const [confirmLoading, setConfirmLoading] = useState<boolean>(false)
|
||
// 文件列表
|
||
const [fileList, setFileList] = useState<any>([])
|
||
const [imagePreviewVisible, setImagePreviewVisible] = useState<boolean>(false) // 预览图片
|
||
const [currenRegion, setCurrenRegion] = useState<any>(); // 当前选中左侧菜单的片区节点
|
||
const [currenMenu, setCurrenMenu] = useState<any>(); // 当前选中左侧菜单的服务区节点
|
||
// 上传文件选择的tab
|
||
const [selectActiveKey, setSelectActiveKey] = useState<string>('1')
|
||
|
||
// 弹出框拖动效果
|
||
const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置
|
||
const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
|
||
const draggleRef = React.createRef<any>()
|
||
// 默认展开的菜单
|
||
const [defaultOpenKeys, setDefaultOpenKeys] = useState<any>();
|
||
// 显示服务区树搜索框
|
||
const [showServiceSearchBox, setShowServiceSearchBox] = useState<boolean>(false)
|
||
// 初始的最全的左侧菜单树 数据
|
||
const [menuData, setMenuData] = useState<any>();
|
||
// 判断左侧数据是否加载好了
|
||
const [showLeftTreeData, setShowLeftTreeData] = useState<boolean>(false)
|
||
|
||
const onDraggaleStart = (event, uiData) => {
|
||
const { clientWidth, clientHeight } = window.document.documentElement;
|
||
const targetRect = draggleRef.current?.getBoundingClientRect();
|
||
if (!targetRect) {
|
||
return;
|
||
}
|
||
setBounds({
|
||
left: -targetRect.left + uiData.x,
|
||
right: clientWidth - (targetRect.right - uiData.x),
|
||
top: -targetRect.top + uiData.y,
|
||
bottom: clientHeight - (targetRect.bottom - uiData.y),
|
||
});
|
||
};
|
||
|
||
const { loading: treeLoading, data: treeViews } = useRequest(async () => {
|
||
const data = await getServerpartTree(currentUser?.ProvinceCode, currentUser?.CityAuthority, true, true, true)
|
||
|
||
let list: any = []
|
||
data.forEach((item: any) => {
|
||
if (item.value !== 424) {
|
||
list.push(item)
|
||
}
|
||
})
|
||
|
||
setTreeView(list)
|
||
setMenuData(list)
|
||
|
||
let obj: any = handleGetTreeFirst(list)
|
||
if (obj && obj.length > 0) {
|
||
let defaultKey: any = []
|
||
if (obj && obj.length > 0) {
|
||
obj.forEach((item: any) => {
|
||
defaultKey.push(item.key)
|
||
})
|
||
}
|
||
setDefaultOpenKeys(defaultKey)
|
||
let lastObj: any = obj[obj.length - 1]
|
||
|
||
setCurrenMenu(lastObj.value)
|
||
setSelectedId('')
|
||
setCurrenRegion('')
|
||
// 只有修改服务区的时候 触发刷新
|
||
setShowRightForm(false)
|
||
setTimeout(() => {
|
||
setShowRightForm(true)
|
||
}, 10)
|
||
}
|
||
setShowLeftTreeData(true)
|
||
return data
|
||
})
|
||
// 根据左侧选中的菜单加载右侧数据
|
||
const loadSelectedId = (item?: any) => {
|
||
console.log('itemitemitem', item);
|
||
|
||
// 选中的子菜单key
|
||
const [type, value] = item.key.split('-')
|
||
|
||
if (type === '1') {
|
||
setCurrenMenu(value)
|
||
setSelectedId('')
|
||
setCurrenRegion('')
|
||
|
||
|
||
console.log('value', value);
|
||
let serverpartObj = session.get('serverpartObj')
|
||
handleSetlogSave(`${serverpartObj && value && serverpartObj[value] ? `查看${serverpartObj[value]}基础信息` : ""}`)
|
||
|
||
// 只有修改服务区的时候 触发刷新
|
||
setShowRightForm(false)
|
||
setTimeout(() => {
|
||
setShowRightForm(true)
|
||
}, 10)
|
||
}
|
||
else if (type === '2') {
|
||
setSelectedId(value)
|
||
setCurrenMenu('')
|
||
setCurrenRegion('')
|
||
}
|
||
else {
|
||
setCurrenRegion(value)
|
||
setSelectedId('')
|
||
setCurrenMenu('')
|
||
}
|
||
|
||
}
|
||
|
||
// 预览上传后的图片
|
||
const handlePreview = async () => {
|
||
setFileList(fileList)
|
||
setImagePreviewVisible(true)
|
||
};
|
||
const handleChangePreview = (val: any) => {
|
||
setImagePreviewVisible(val)
|
||
}
|
||
|
||
// 保存方法
|
||
const handleSubmitForm = async () => {
|
||
let res: any = serverPartRef.current?.formRef.current?.getFieldsValue()
|
||
console.log('res', res);
|
||
// 表单查到的详情 更新里面的全部数据
|
||
let detailObj: any = serverPartRef.current?.serverPartDetail
|
||
console.log('detailObj', detailObj);
|
||
let formDetailAll: any = serverPartRef.current?.formDetailAll
|
||
console.log('formDetailAll', formDetailAll);
|
||
|
||
|
||
// 把分区的数据取出来
|
||
let objA: any = {
|
||
SERVERPART_REGION: res?.currentArea,
|
||
SERVERPART_REGIONNAME: res?.currentArea ? shopregionObj[res?.currentArea] : '',
|
||
|
||
}
|
||
let objB: any = {
|
||
SERVERPART_REGION: res?.otherArea,
|
||
SERVERPART_REGIONNAME: res?.otherArea ? shopregionObj[res?.otherArea] : ''
|
||
}
|
||
for (let key in res) {
|
||
if (key.indexOf('_A') > 0) {
|
||
let newKey: string = key.split('_A')[0]
|
||
objA[newKey] = res[key]
|
||
} else if (key.indexOf('_B') > 0) {
|
||
let newKey: string = key.split('_B')[0]
|
||
objB[newKey] = res[key]
|
||
}
|
||
}
|
||
// 详情里面本身的服务区数组数据
|
||
let detailServerPartList: any = detailObj?.ServerPartInfo
|
||
if (detailServerPartList && detailServerPartList.length === 2) {
|
||
detailServerPartList.forEach((item: any) => {
|
||
if (Number(item.SERVERPART_REGION) === Number(objA.SERVERPART_REGION)) {
|
||
objA.SERVERPARTINFO_ID = item.SERVERPARTINFO_ID
|
||
objA.SERVERPART_ID = currenMenu
|
||
objA.GREENSPACEAREA = item.GREENSPACEAREA
|
||
objA.SCENICAREA = item.SCENICAREA
|
||
}
|
||
if (Number(item.SERVERPART_REGION) === Number(objB.SERVERPART_REGION)) {
|
||
objB.SERVERPARTINFO_ID = item.SERVERPARTINFO_ID
|
||
objB.SERVERPART_ID = currenMenu
|
||
objB.GREENSPACEAREA = item.GREENSPACEAREA
|
||
objB.SCENICAREA = item.SCENICAREA
|
||
}
|
||
})
|
||
} else {
|
||
if (objB.SERVERPART_REGION) {
|
||
objB.SERVERPARTINFO_ID = detailServerPartList.length[0].SERVERPARTINFO_ID
|
||
objB.SERVERPART_ID = currenMenu
|
||
objB.GREENSPACEAREA = detailServerPartList.length[0].GREENSPACEAREA
|
||
objB.SCENICAREA = detailServerPartList.length[0].SCENICAREA
|
||
}
|
||
}
|
||
|
||
console.log('objA', objA);
|
||
console.log('objB', objB);
|
||
|
||
|
||
|
||
const req: any = {
|
||
SERVERPART_ID: detailObj?.SERVERPART_ID,
|
||
SERVERPART_NAME: res?.SERVERPART_NAME,
|
||
SERVERPART_ADDRESS: res?.SERVERPART_ADDRESS,
|
||
SERVERPART_INDEX: res?.SERVERPART_INDEX,
|
||
EXPRESSWAY_NAME: res?.EXPRESSWAY_NAME,
|
||
SELLERCOUNT: detailObj?.SELLERCOUNT,
|
||
SERVERPART_AREA: res?.SERVERPART_AREA,
|
||
SERVERPART_X: res?.SERVERPART_X,
|
||
SERVERPART_Y: res?.SERVERPART_Y,
|
||
SERVERPART_TEL: detailObj?.SERVERPART_TEL,
|
||
SERVERPART_INFO: res?.SERVERPART_INFO,
|
||
PROVINCE_CODE: detailObj?.PROVINCE_CODE,
|
||
SERVERPART_CODE: res?.SERVERPART_CODE,
|
||
SERVERPART_TYPE: res?.SERVERPART_TYPE,
|
||
STARTDATE: res?.STARTDATE,
|
||
OWNEDCOMPANY: res?.OWNEDCOMPANY,
|
||
FLOORAREA: res?.FLOORAREA,
|
||
BUSINESSAREA: detailObj?.BUSINESSAREA,
|
||
SHAREAREA: res?.SHAREAREA,
|
||
MANAGERCOMPANY: res?.MANAGERCOMPANY,
|
||
SPREGIONTYPE_ID: detailObj?.SPREGIONTYPE_ID,
|
||
SPREGIONTYPE_NAME: detailObj?.SPREGIONTYPE_NAME,
|
||
SPREGIONTYPE_INDEX: detailObj?.SPREGIONTYPE_INDEX,
|
||
STATISTICS_TYPE: detailObj?.STATISTICS_TYPE,
|
||
FIELDENUM_ID: detailObj?.FIELDENUM_ID,
|
||
CITY_CODE: detailObj?.CITY_CODE,
|
||
COUNTY_CODE: detailObj?.COUNTY_CODE,
|
||
SERVERPART_IPADDRESS: detailObj?.SERVERPART_IPADDRESS,
|
||
DAYINCAR: detailObj?.DAYINCAR,
|
||
HKBL: detailObj?.HKBL,
|
||
TOTALPARKING: detailObj?.TOTALPARKING,
|
||
SHORTNAME: detailObj?.SHORTNAME,
|
||
REGIONTYPE_ID: detailObj?.REGIONTYPE_ID,
|
||
STATISTIC_TYPE: detailObj?.STATISTIC_TYPE,
|
||
PROVINCE_NAME: detailObj?.PROVINCE_NAME,
|
||
REGIONTYPE_NAME: detailObj?.REGIONTYPE_NAME,
|
||
STAFF_ID: currentUser?.ID,
|
||
STAFF_NAME: currentUser?.Name,
|
||
OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||
SERVERPART_DESC: detailObj?.SERVERPART_DESC,
|
||
OWNERUNIT_ID: detailObj?.OWNERUNIT_ID,
|
||
OWNERUNIT_NAME: detailObj?.OWNERUNIT_NAME,
|
||
RtServerPart: {
|
||
RTSERVERPART_ID: detailObj?.RtServerPart?.RTSERVERPART_ID,
|
||
SERVERPART_ID: detailObj?.RtServerPart?.SERVERPART_ID,
|
||
SERVERPART_ADDRESS: res?.SERVERPART_ADDRESS,
|
||
EXPRESSWAY_NAME: res?.EXPRESSWAY_NAME,
|
||
SELLERCOUNT: detailObj?.RtServerPart?.SELLERCOUNT,
|
||
SERVERPART_X: res?.SERVERPART_X,
|
||
SERVERPART_Y: res?.SERVERPART_Y,
|
||
SERVERPART_TEL: detailObj?.RtServerPart?.SERVERPART_TEL,
|
||
STARTDATE: res?.STARTDATE,
|
||
SERVERPART_AREA: res?.SERVERPART_AREA,
|
||
FLOORAREA: res?.FLOORAREA,
|
||
BUSINESSAREA: detailObj?.RtServerPart?.BUSINESSAREA,
|
||
SHAREAREA: res?.SHAREAREA,
|
||
TOTALPARKING: detailObj?.RtServerPart?.TOTALPARKING,
|
||
OWNEDCOMPANY: res?.OWNEDCOMPANY,
|
||
MANAGERCOMPANY: res?.MANAGERCOMPANY,
|
||
STAFF_ID: currentUser?.ID,
|
||
STAFF_NAME: currentUser?.Name,
|
||
OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||
SERVERPART_INFO: res?.SERVERPART_INFO,
|
||
CENTERSTAKE_NUM: res?.CENTERSTAKE_NUM,
|
||
TAXPAYER_IDENTIFYCODE: res?.TAXPAYER_IDENTIFYCODE,
|
||
WATERINTAKE_TYPE: res?.WATERINTAKE_TYPE,
|
||
SEWAGEDISPOSAL_TYPE: res?.SEWAGEDISPOSAL_TYPE,
|
||
BUSINESS_REGION: detailObj?.RtServerPart?.BUSINESS_REGION,
|
||
},
|
||
ServerPartInfo: objB.SERVERPART_REGION ? [objA, objB] : [objA]
|
||
}
|
||
console.log('req', req);
|
||
|
||
const data = await handleSynchroSERVERPART(req)
|
||
|
||
let serverpartObj = session.get('serverpartObj')
|
||
handleSetlogSave(`${serverpartObj && currenMenu && serverpartObj[currenMenu] ? `更新${serverpartObj[currenMenu]}的基础信息` : ""}`)
|
||
|
||
if (res.carryingCapacity) {
|
||
let carryReq: any = {}
|
||
if (formDetailAll?.carryingCapacity) {
|
||
carryReq = {
|
||
...formDetailAll.carryingCapacityObj,
|
||
NOTICEINFO_TYPE: "3020",
|
||
SERVERPART_ID: currenMenu,
|
||
FEEDBACK_CONTENT: res.carryingCapacity
|
||
}
|
||
} else {
|
||
carryReq = {
|
||
NOTICEINFO_TYPE: "3020",
|
||
SERVERPART_ID: currenMenu,
|
||
FEEDBACK_CONTENT: res.carryingCapacity
|
||
}
|
||
}
|
||
console.log('carryReq', carryReq);
|
||
const carryData = await handleSynchroNOTICEINFO(carryReq)
|
||
console.log('carryData', carryData);
|
||
} else {
|
||
if (formDetailAll?.carryingCapacity) {
|
||
let carryReq: any = {
|
||
...formDetailAll.carryingCapacity,
|
||
FEEDBACK_CONTENT: ""
|
||
}
|
||
console.log('carryReq2', carryReq);
|
||
const carryData = await handleSynchroNOTICEINFO(carryReq)
|
||
console.log('carryData2', carryData);
|
||
}
|
||
}
|
||
|
||
if (data.Result_Code === 100) {
|
||
message.success(data.Result_Desc)
|
||
setShowRightForm(false)
|
||
setTimeout(() => {
|
||
setShowRightForm(true)
|
||
}, 1000)
|
||
} else {
|
||
message.error(data.Result_Desc)
|
||
}
|
||
}
|
||
|
||
// 生成左侧菜单
|
||
const getMenuDom = (data: any[], callback: (item: any) => void) => {
|
||
return (data.map((element: any) => {
|
||
if (element.node) {
|
||
// 绑定当前节点的子集
|
||
if (element.node.children && element.node.children.length > 0) {
|
||
return (
|
||
<SubMenu title={element.node.desc !== '0' ? <><span>{element.node.label}</span>
|
||
{/* <span style={{ position: 'absolute', right: '10', top: '9px', lineHeight: '20px', padding: '2px 3px', color: 'red' }}>
|
||
[{element.node.desc}]</span> */}
|
||
</> : element.node.label}
|
||
icon={element.node.ico ? <Avatar src={element.node.ico} size={16} style={{ marginRight: 4 }} shape="square" /> : null}
|
||
key={`${element.node.key || element.node.value}`}
|
||
onTitleClick={(item) => {
|
||
// 选中一级菜单
|
||
if (!currenMenu || item.key !== `${currenMenu?.key}`) {
|
||
callback.call(callback, item)
|
||
}
|
||
item.domEvent.stopPropagation();
|
||
}}
|
||
>
|
||
{element.node.children && element.node.children.length > 0 && getMenuDom(element.node.children, callback)}
|
||
</SubMenu>
|
||
)
|
||
}
|
||
// 绑定嵌套树的子节点
|
||
if (element.children && element.children.length > 0) {
|
||
return (
|
||
<SubMenu title={element.node.label}
|
||
icon={element.node.ico ? <Avatar src={element.node.ico} size={16} style={{ marginRight: 4 }} shape="square" /> : null}
|
||
key={`${element.node.key || element.node.value}`}
|
||
onTitleClick={(item) => {
|
||
// 选中一级菜单
|
||
if (!currenMenu || item.key !== `${currenMenu?.key}`) {
|
||
callback.call(callback, item)
|
||
}
|
||
item.domEvent.stopPropagation();
|
||
}}
|
||
>
|
||
{element.children && element.children.length > 0 && getMenuDom(element.children, callback)}
|
||
</SubMenu>
|
||
)
|
||
}
|
||
return (<Menu.Item icon={element.node.ico ? <Avatar src={element.node.ico} size={16} shape="square" /> : null}
|
||
key={`${element.node.key || element.node.value}`}>
|
||
{element.node.desc !== '0' ? <><span>{element.node.label}</span>
|
||
{/* <span style={{ position: 'absolute', right: '10', top: '9px', lineHeight: '20px', padding: '2px 3px', color: 'red' }}>
|
||
[{element.node.desc}]</span> */}
|
||
</> : element.node.label}</Menu.Item>)
|
||
}
|
||
// 绑定嵌套树的子节点
|
||
if (element.children && element.children.length > 0) {
|
||
return (
|
||
<SubMenu title={element.desc !== '0' ? <><span>{element.label}</span>
|
||
{/* <span style={{ position: 'absolute', right: '10', top: '9px', lineHeight: '20px', padding: '2px 3px', color: 'red' }}>
|
||
[{element.desc}]</span> */}
|
||
</> : element.label}
|
||
icon={element.ico ? <Avatar src={element.ico} size={16} style={{ marginRight: 4 }} shape="square" /> : null}
|
||
key={`${element.key || element.value}`}
|
||
onTitleClick={(item) => {
|
||
// 选中一级菜单
|
||
if (!currenMenu || item.key !== `${currenMenu?.key}`) {
|
||
callback.call(callback, item)
|
||
}
|
||
item.domEvent.stopPropagation();
|
||
}}
|
||
>
|
||
{element.children && element.children.length > 0 && getMenuDom(element.children, callback)}
|
||
</SubMenu>
|
||
)
|
||
}
|
||
return (<Menu.Item icon={element.ico ? <Avatar src={element.ico} size={16} shape="square" /> : null}
|
||
key={`${element.key || element.value}`}>{element.desc !== '0' ? <><span>{element.label}</span>
|
||
{/* <span style={{ position: 'absolute', right: '10', top: '9px', lineHeight: '20px', padding: '2px 3px', color: 'red' }}>
|
||
[{element.desc}]</span> */}
|
||
</> : element.label}</Menu.Item>)
|
||
}))
|
||
}
|
||
|
||
// 拿到树形的第一个数据
|
||
interface TreeNode {
|
||
[key: string]: any;
|
||
children?: TreeNode[];
|
||
}
|
||
type TreeData = TreeNode | TreeNode[] | any;
|
||
const handleGetTreeFirst = (node: TreeData): TreeData[] => {
|
||
// 处理数组情况
|
||
if (Array.isArray(node)) {
|
||
return node.length > 0 ? handleGetTreeFirst(node[0]) : [];
|
||
}
|
||
// 处理对象情况
|
||
else if (typeof node === 'object' && node !== null) {
|
||
// 如果没有children或者children为空，返回包含当前节点的数组
|
||
if (!node.children || node.children.length === 0) {
|
||
return [node];
|
||
}
|
||
// 否则递归处理第一个子节点，并将当前节点添加到结果数组前面
|
||
const childResult = handleGetTreeFirst(node.children[0]);
|
||
return [node, ...childResult];
|
||
}
|
||
// 基本数据类型直接返回包含该值的数组
|
||
return [node];
|
||
};
|
||
|
||
// 筛选左侧的服务区树
|
||
const handleFilterServiceTree = async (value?: string) => {
|
||
if (value) {
|
||
setShowLeftTreeData(false)
|
||
setTreeView([])
|
||
setTimeout(() => {
|
||
let treeViewData: any = JSON.parse(JSON.stringify(menuData))
|
||
let res = handleSearch(treeViewData, value)
|
||
console.log('resresresres', res);
|
||
let keyList: any = []
|
||
if (res && res.length > 0) {
|
||
res.forEach((item: any) => {
|
||
keyList.push(item.key)
|
||
})
|
||
setDefaultOpenKeys(keyList)
|
||
setTreeView(res)
|
||
setCurrenMenu("")
|
||
setSelectedId('')
|
||
setCurrenRegion('')
|
||
setShowLeftTreeData(true)
|
||
}
|
||
}, 10)
|
||
} else {
|
||
setTreeView(menuData)
|
||
}
|
||
console.log('valuevaluevaluevalue', value);
|
||
console.log('treeView', treeView);
|
||
console.log('menuData', menuData);
|
||
|
||
}
|
||
|
||
|
||
// 搜索方法
|
||
const handleSearch = (tree: any, searchLabel: string): TreeNode[] => {
|
||
const results: TreeNode[] = [];
|
||
|
||
// 处理数组情况（遍历每棵树）
|
||
if (Array.isArray(tree)) {
|
||
for (const node of tree) {
|
||
const nodeResults = handleSearch(node, searchLabel);
|
||
if (nodeResults.length > 0) {
|
||
results.push(...nodeResults);
|
||
}
|
||
}
|
||
return results;
|
||
}
|
||
|
||
// 检查当前节点是否是叶子节点且label匹配
|
||
const isLeaf = !tree.children || tree.children.length === 0;
|
||
if (isLeaf && tree.label.includes(searchLabel)) {
|
||
return [{ ...tree }]; // 返回当前节点的副本（作为一条独立路径）
|
||
}
|
||
|
||
// 如果不是叶子节点，递归检查子节点
|
||
if (tree.children && tree.children.length > 0) {
|
||
const matchedChildren: TreeNode[] = [];
|
||
|
||
for (const child of tree.children) {
|
||
const childResults = handleSearch(child, searchLabel);
|
||
if (childResults.length > 0) {
|
||
matchedChildren.push(...childResults);
|
||
}
|
||
}
|
||
|
||
// 如果有匹配的子节点，构造当前节点 + 所有匹配的子路径
|
||
if (matchedChildren.length > 0) {
|
||
return [{
|
||
...tree,
|
||
children: matchedChildren, // 保留所有匹配的子节点（不拆分）
|
||
}];
|
||
}
|
||
}
|
||
|
||
return results; // 默认返回空数组（无匹配）
|
||
}
|
||
|
||
|
||
return (
|
||
<div >
|
||
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
|
||
<ProCard
|
||
style={{ width: !collapsible ? "300px" : "60px" }}
|
||
className="pageTable-leftnav"
|
||
bodyStyle={{ padding: 0, paddingTop: 20, paddingLeft: 20, width: !collapsible ? "300px" : "60px" }}
|
||
extra={<div className="leftSelectBox">
|
||
<img className="searchIcon" src={searchIcon} onClick={() => {
|
||
setShowServiceSearchBox(true)
|
||
}} />
|
||
<MenuFoldOutlined onClick={() => {
|
||
setCollapsible(!collapsible);
|
||
}} />
|
||
<div className="fixedBox" style={{ display: showServiceSearchBox ? 'flex' : 'none', width: '275px' }}>
|
||
<ProForm
|
||
formRef={searchTreeRef}
|
||
layout={'horizontal'}
|
||
submitter={{
|
||
render: () => {
|
||
return []
|
||
}
|
||
}}
|
||
isKeyPressSubmit
|
||
onFinish={(values: any) => {
|
||
return handleFilterServiceTree(values?.searchValue || '')
|
||
}}
|
||
>
|
||
<Row>
|
||
<Col span={15} className={'noBottom'}>
|
||
<ProFormText
|
||
name={'searchValue'}
|
||
fieldProps={{
|
||
placeholder: '请输入服务区名称'
|
||
}}
|
||
allowClear
|
||
/>
|
||
</Col>
|
||
<Col span={2}></Col>
|
||
<Col span={5}>
|
||
<Button type={'primary'} onClick={() => {
|
||
searchTreeRef.current?.submit()
|
||
}}>查询</Button>
|
||
</Col>
|
||
</Row>
|
||
|
||
</ProForm>
|
||
<img style={{ width: '20px', height: '20px', cursor: 'pointer', marginLeft: '5px' }} src={close} onClick={() => {
|
||
setShowServiceSearchBox(false)
|
||
}} />
|
||
</div>
|
||
</div>}
|
||
colSpan={!collapsible ? "300px" : "60px"}
|
||
title={!collapsible ? "请选择服务区" : ""}
|
||
headerBordered
|
||
collapsed={collapsible}
|
||
>
|
||
|
||
{showLeftTreeData && <Menu
|
||
mode="inline"
|
||
style={{ height: 'calc(100vh - 220px)', overflowY: 'auto', overflowX: 'hidden' }}
|
||
selectedKeys={selectedId
|
||
? [`2-${selectedId}`]
|
||
: currenMenu
|
||
? [`1-${currenMenu}`]
|
||
: currenRegion
|
||
? [`0-${currenRegion}`]
|
||
: []}
|
||
onSelect={(item, key, keyPath, selectedKeys, domEvent) => {
|
||
loadSelectedId(item)
|
||
}}
|
||
defaultOpenKeys={defaultOpenKeys}
|
||
>
|
||
{getMenuDom(treeView, loadSelectedId)}
|
||
</Menu>}
|
||
{/* {treeView && treeView.length > 0 ? <Tree
|
||
treeData={[{
|
||
label: '全部',
|
||
value: 0,
|
||
key: '0-0',
|
||
children: treeView
|
||
}]}
|
||
fieldNames={{
|
||
title: "label",
|
||
key: "key"
|
||
}}
|
||
blockNode
|
||
defaultExpandedKeys={['0-0']}
|
||
onSelect={(selectedKeys: any, info: any) => {
|
||
setShowRightForm(false)
|
||
const selectedIds = info.selectedNodes.filter((n: any) => n?.type === 1)
|
||
console.log('selectedIds', selectedIds);
|
||
|
||
setSelectedId(selectedIds.map(n => n?.value)?.toString() || '')
|
||
console.log('serverPartRef', serverPartRef.current?.formRef);
|
||
if (selectedIds && selectedIds.length > 0) {
|
||
setTimeout(() => {
|
||
setShowRightForm(true)
|
||
}, 1000)
|
||
} else {
|
||
setTimeout(() => {
|
||
setShowRightForm(true)
|
||
}, 1)
|
||
serverPartRef.current?.formRef.current?.setFieldsValue({})
|
||
}
|
||
|
||
}}
|
||
/> : ''} */}
|
||
</ProCard>
|
||
<div style={{
|
||
width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
|
||
height: "calc(100vh - 170px)",
|
||
paddingTop: 0,
|
||
paddingBottom: 0,
|
||
paddingRight: 0,
|
||
overflowY: "auto"
|
||
}}>
|
||
<div style={{ width: '100%', padding: '12px 18px 0 0', height: 'calc(100% - 60px)', overflowY: 'auto', boxSizing: "border-box" }}>
|
||
{
|
||
showRightForm ?
|
||
<ServerpartInfo pageType={2} onRef={serverPartRef} currentRow={{ SERVERPART_ID: currenMenu ? currenMenu : '' }} onShow={showRightForm} /> :
|
||
<LoadingBox />
|
||
}
|
||
</div>
|
||
<div style={{ height: '60px', width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', boxSizing: "border-box", padding: "0 16px" }}>
|
||
{/* 上传设施图片 */}
|
||
{/* 点击的按钮类型 1 服务区图片上传 2 母婴室图片上传 3 司机之家图片上传 4 住宿客房图片上传 5 便利店图片上传 */}
|
||
{
|
||
currenMenu ? <div>
|
||
<Button type={'primary'} style={{ marginRight: '8px' }} onClick={() => {
|
||
setShowType(0)
|
||
setShowUploadImgModal(true)
|
||
handleSetlogSave(`点击服务区设施图片上传`)
|
||
}}>服务区设施图片上传</Button>
|
||
|
||
{/* <Button type={'primary'} style={{ marginRight: '8px' }} onClick={() => {
|
||
setShowType(1)
|
||
setShowUploadImgModal(true)
|
||
}}>服务区图片上传</Button>
|
||
|
||
<Button type={'primary'} style={{ marginRight: '8px' }} onClick={() => {
|
||
setShowType(2)
|
||
setShowUploadImgModal(true)
|
||
}}>母婴室图片上传</Button>
|
||
|
||
<Button type={'primary'} style={{ marginRight: '8px' }} onClick={() => {
|
||
setShowType(3)
|
||
setShowUploadImgModal(true)
|
||
}}>司机之家图片上传</Button>
|
||
|
||
<Button type={'primary'} style={{ marginRight: '8px' }} onClick={() => {
|
||
setShowType(4)
|
||
setShowUploadImgModal(true)
|
||
}}>住宿客房图片上传</Button>
|
||
|
||
<Button type={'primary'} style={{ marginRight: '8px' }} onClick={() => {
|
||
setShowType(5)
|
||
setShowUploadImgModal(true)
|
||
}}>便利店图片上传</Button> */}
|
||
</div> : ""
|
||
}
|
||
{
|
||
currenMenu ?
|
||
<Button type="primary" onClick={() => {
|
||
handleSubmitForm()
|
||
}}>保存</Button> : ''
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
{/* 图片预览组件 */}
|
||
{fileList && fileList.length > 0 && <div style={{ display: 'none' }}>
|
||
<Image.PreviewGroup
|
||
preview={{
|
||
visible: imagePreviewVisible,
|
||
onVisibleChange: vis => {
|
||
handleChangePreview(vis)
|
||
}
|
||
}}>
|
||
{
|
||
fileList.map((n) => <Image src={n.url} key={n.url} />)
|
||
}
|
||
</Image.PreviewGroup>
|
||
</div>}
|
||
|
||
{/* */}
|
||
<Modal
|
||
title={
|
||
<div
|
||
className='scenicSpotConfig'
|
||
style={{
|
||
width: '100%',
|
||
cursor: 'move',
|
||
}}
|
||
onMouseOver={() => {
|
||
if (disabled) {
|
||
setDraggleDisabled(false)
|
||
}
|
||
}}
|
||
onMouseOut={() => {
|
||
setDraggleDisabled(true)
|
||
}}
|
||
|
||
onFocus={() => { }}
|
||
onBlur={() => { }}
|
||
>
|
||
服务区设施图片上传
|
||
{/* {showType === 1 ? '服务区图片' : showType === 2 ? '母婴室图片' : showType === 3 ? '司机之家图片' : showType === 4 ? '住宿客房图片' : showType === 5 ? '便利店图片' : ''} */}
|
||
</div>
|
||
}
|
||
destroyOnClose={true}
|
||
width={900}
|
||
bodyStyle={{
|
||
height: '700px', // 你可以根据需要调整高度
|
||
overflowY: 'auto',
|
||
}}
|
||
visible={showUploadImgModal}
|
||
confirmLoading={confirmLoading}
|
||
onCancel={() => {
|
||
setConfirmLoading(false)
|
||
setShowType(0)
|
||
setShowUploadImgModal(false);
|
||
setFileList([])
|
||
setSelectActiveKey('1')
|
||
}}
|
||
onOk={async () => {
|
||
console.log('file', fileList);
|
||
let form: any = await modalRef.current?.getFieldsValue({})
|
||
console.log('formDataformDataformData', form);
|
||
// 判断这次上传图片了没
|
||
if (form.SCENICAREA_Image && form.SCENICAREA_Image.length > 0) {
|
||
const formData = new FormData();
|
||
form.SCENICAREA_Image.forEach((file: any) => {
|
||
formData.append('files[]', file.originFileObj);
|
||
formData.append('ImageName', typeof file !== 'string' ? file?.name : '');
|
||
});
|
||
formData.append('TableId', currenMenu!);
|
||
formData.append('imageType', selectActiveKey === '1' ? '' : selectActiveKey === '2' ? '1001' : selectActiveKey === '3' ? '1002' : selectActiveKey === '4' ? '2001' : selectActiveKey === '5' ? '2002' : '');
|
||
formData.append('TableType', selectActiveKey === '1' ? '1123' : selectActiveKey === '2' ? '1131' : selectActiveKey === '3' ? '1131' : selectActiveKey === '4' ? '1131' : selectActiveKey === '5' ? '1131' : '');
|
||
|
||
console.log('formData', formData);
|
||
let res = await uploadPicture(formData)
|
||
console.log('resresresres', res);
|
||
let serverpartObj = session.get('serverpartObj')
|
||
if (res.Result_Code === 100) {
|
||
message.success("上传成功！")
|
||
handleSetlogSave(`更新【${serverpartObj && currenMenu && serverpartObj[currenMenu] ? `${serverpartObj[currenMenu]}基础信息` : ""}${selectActiveKey === '1' ? '服务区图片' : selectActiveKey === '2' ? '母婴室图片' : selectActiveKey === '3' ? '司机之家图片' : selectActiveKey === '4' ? '住宿客房图片' : selectActiveKey === '5' ? '便利店图片' : ''}】`)
|
||
setConfirmLoading(false)
|
||
setShowType(0)
|
||
setShowUploadImgModal(false);
|
||
setSelectActiveKey('1')
|
||
setFileList([])
|
||
setShowRightForm(false)
|
||
setTimeout(() => {
|
||
setShowRightForm(true)
|
||
}, 1000)
|
||
} else {
|
||
message.error(res.Result_Desc)
|
||
}
|
||
} else {
|
||
setConfirmLoading(false)
|
||
setShowType(0)
|
||
setShowUploadImgModal(false);
|
||
setFileList([])
|
||
setSelectActiveKey('1')
|
||
}
|
||
}}
|
||
modalRender={(modal) => {
|
||
return <Draggable
|
||
disabled={disabled}
|
||
bounds={bounds}
|
||
onStart={(event, uiData) => onDraggaleStart(event, uiData)}
|
||
handle='.scenicSpotConfig'
|
||
>
|
||
<div ref={draggleRef}>{modal}</div>
|
||
</Draggable>
|
||
}}
|
||
>
|
||
|
||
<Tabs
|
||
onChange={(e: any) => {
|
||
setSelectActiveKey(e)
|
||
}}
|
||
activeKey={selectActiveKey}
|
||
items={[
|
||
{
|
||
label: `服务区`,
|
||
key: '1',
|
||
},
|
||
{
|
||
label: `母婴室`,
|
||
key: '2',
|
||
},
|
||
{
|
||
label: `司机之家`,
|
||
key: '3',
|
||
},
|
||
{
|
||
label: `住宿客房`,
|
||
key: '4',
|
||
},
|
||
{
|
||
label: `便利店`,
|
||
key: '5',
|
||
},
|
||
]}
|
||
/>
|
||
|
||
<ProForm
|
||
key={selectActiveKey}
|
||
layout={'horizontal'}
|
||
formRef={modalRef}
|
||
submitter={false}
|
||
preserve={false}
|
||
request={async () => {
|
||
console.log('selectActiveKey', selectActiveKey);
|
||
|
||
let req: any = {
|
||
TableId: currenMenu,
|
||
TableName: selectActiveKey === '1' ? 'SERVERPART' : selectActiveKey === '2' ? 'SERVERPARTINFO' : selectActiveKey === '3' ? 'SERVERPARTINFO' : selectActiveKey === '4' ? 'SERVERPARTINFO' : selectActiveKey === '5' ? 'SERVERPARTINFO' : '',
|
||
TableType: selectActiveKey === '1' ? '1123' : selectActiveKey === '2' ? '1131' : selectActiveKey === '3' ? '1131' : selectActiveKey === '4' ? '1131' : selectActiveKey === '5' ? '1131' : '',
|
||
ImageType: selectActiveKey === '1' ? '' : selectActiveKey === '2' ? '1001' : selectActiveKey === '3' ? '1002' : selectActiveKey === '4' ? '2001' : selectActiveKey === '5' ? '2002' : '',
|
||
}
|
||
const data = await handeGetPictureList(req)
|
||
console.log('datadatadatadata', data);
|
||
let list: any = []
|
||
if (data.List && data.List.length > 0) {
|
||
data.List.forEach((item: any) => {
|
||
let obj = JSON.parse(JSON.stringify(item))
|
||
obj.url = obj.ImageUrl
|
||
obj.name = obj.ImageName
|
||
obj.uid = item.ImageId
|
||
obj.status = 'done'
|
||
list.push(obj)
|
||
})
|
||
}
|
||
setFileList(list);
|
||
return {
|
||
SCENICAREA_Image: list
|
||
}
|
||
}}
|
||
>
|
||
<Row>
|
||
<Col span={24}>
|
||
<ProFormUploadButton
|
||
name="SCENICAREA_Image"
|
||
label={selectActiveKey === '1' ? '服务区图片' : selectActiveKey === '2' ? '母婴室图片' : selectActiveKey === '3' ? '司机之家图片' : selectActiveKey === '4' ? '住宿客房图片' : selectActiveKey === '5' ? '便利店图片' : ''}
|
||
listType="picture-card"
|
||
accept="image/*"
|
||
fieldProps={{
|
||
beforeUpload,
|
||
onPreview: handlePreview,
|
||
fileList: fileList, // 绑定 fileList
|
||
onChange: async (info: any) => {
|
||
console.log('info', info);
|
||
console.log('fileList', fileList);
|
||
if (info.file.status === 'removed') {
|
||
const index = fileList.findIndex(n => n.uid === info.file.uid);
|
||
confirm({
|
||
title: '确认删除该文件吗？',
|
||
icon: <ExclamationCircleOutlined />,
|
||
async onOk() {
|
||
if (info.file.ImageId) {
|
||
const deleteLoading = message.loading('正在删除...')
|
||
const success = await deletePicture(info.file?.ImagePath, info.file?.uid, selectActiveKey === '1' ? 'SERVERPART' : selectActiveKey === '2' ? 'SERVERPARTINFO' : selectActiveKey === '3' ? 'SERVERPARTINFO' : selectActiveKey === '4' ? 'SERVERPARTINFO' : selectActiveKey === '5' ? 'SERVERPARTINFO' : '', selectActiveKey === '1' ? '1123' : selectActiveKey === '2' ? '1131' : selectActiveKey === '3' ? '1131' : selectActiveKey === '4' ? '1131' : selectActiveKey === '5' ? '1131' : '')
|
||
deleteLoading()
|
||
|
||
if (success) {
|
||
const files = [...fileList]
|
||
files.splice(index, 1)
|
||
setFileList(files)
|
||
message.success("删除成功")
|
||
}
|
||
else {
|
||
message.error("删除失败")
|
||
}
|
||
} else {
|
||
const files = [...fileList];
|
||
files.splice(index, 1);
|
||
setFileList(files);
|
||
}
|
||
},
|
||
onCancel() {
|
||
},
|
||
});
|
||
} else {
|
||
setFileList(info.fileList)
|
||
}
|
||
}
|
||
}}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
|
||
|
||
</ProForm>
|
||
</Modal>
|
||
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default connect(({ user }: ConnectState) => ({
|
||
currentUser: user.currentUser
|
||
}))(serverpartInfo);
|