import React,{Ref,useEffect,useState,useRef } from 'react'; import {Button,Tree,Tabs,Table,Modal,Space,Form, Input,TreeSelect,Select,Upload, message,Popconfirm,Tooltip } from 'antd' import { PlusOutlined,LoadingOutlined,InfoCircleOutlined } from '@ant-design/icons'; import { upload } from '@/services/news/news'; import { FormattedMessage,useIntl } from 'umi'; import { getCarList,editProductTree,getDeleteTree,pushProducts, } from '@/services/product'; import '../index.less'; import { trim } from 'lodash'; const { Option } = Select; const { TextArea } = Input; const CarModelsTable: React.FC<{id:any,upTree:any,treeDataAll:any}> = (prop:any) => { let intl = useIntl() const [listData, setListData] = useState([]); //列表数据 const [isModalOpen, setIsModalOpen] = useState(false); //弹框 const [modalTitle, setModalTitle] = useState(true); //弹框标题 const [form] = Form.useForm(); // const [nodes, setNodes] = useState(); const [loading, setLoading] = useState(false); const [imgPc, setImgPc] = useState({id:undefined,url:''}); //pc图片 const [imgM, setImgM] = useState({id:undefined,url:''}); //移动端图片 const [htmlPath, setHtmlPath] = useState(1); //页面路径,为1成功,为2失败不能保存 // 页面路径是否显示 const [pagePathShow, setPagePathShow] = useState(true); //弹框确定 const handleOk = () => { let dataNow=form.getFieldsValue(); if(dataNow.htmlUrl==undefined||trim(dataNow.htmlUrl).length==0){ setHtmlPath(3) } form.submit(); }; //弹框取消 const handleCancel = () => { setIsModalOpen(false); }; //删除数据 const deleteCar = async (e:any) => { console.log('删除:',e); let res:any=await getDeleteTree(e.uuid); if(res.code==200){ getListData(); prop.upTree(); message.success(res.msg); }else{ message.error(res.msg) } }; //修改数据 const revise = (e:any) => { console.log('修改',e); form.setFieldsValue(e); setHtmlPath(1); // setNodes(e?.nodes); setImgPc({id:e?.pcImg,url:e?.pcImgUrl}); // setImgM({id:e?.mImg,url:e?.mImgUrl}); setIsModalOpen(true); setModalTitle(false); }; //新增 const addDom = ()=>{ form.resetFields(); form.setFieldsValue({ carType: undefined, pText: undefined, title:undefined, sort:undefined, uuid:undefined, key:undefined, htmlUrl:undefined, }); setHtmlPath(1); // setNodes(undefined); setImgPc({id:undefined,url:''}); // setImgM({id:undefined,url:''}); setIsModalOpen(true); setModalTitle(true); } //表单数据保存 const formSend = ()=>{ form.validateFields(); let dataNow=form.getFieldsValue(); if(pagePathShow)dataNow.htmlUrl=trim(dataNow.htmlUrl); dataNow={ ...dataNow, // nodes, pcImg:imgPc.id?imgPc.id:'', // mImg:imgM.id?imgM.id:'', fatherId:prop.id, carType:'model' } if(pagePathShow&&htmlPath!=1){ return } editProductTree(dataNow).then((res:any)=>{ if(res.code == 200){ getListData(); prop.upTree(); setIsModalOpen(false); message.success(res.msg); }else{ message.error(res.msg); } }); } //树形选择 const onChangeTreeSelect = (newValue: string) => { console.log(newValue,'newValue'); // setNodes(newValue); }; //类型选择 const onCarTypeChange = (value: string) => { form.setFieldsValue({ carType: value }); }; //图片上传 const handleBeforeUpload = async (file: any,type:any) => { const formData = new FormData(); formData.append('file', file, file.name); const res = await upload(formData); if (res?.data?.uuid) { if(type == 'pc'){ setImgPc({id:res.data.uuid,url:res.data.url}) }else{ setImgM({id:res.data.uuid,url:res.data.url}) } } return false; }; //图片删除 const imgDele = (value: string) => { if(value == 'pc'){ setImgPc({id:undefined,url:''}) }else{ setImgM({id:undefined,url:''}) } }; //表格列设置 const columns: any = [ { title: intl.formatMessage({id:'public.title'}), dataIndex: 'title', key: 'title', width:200, }, { title: intl.formatMessage({id:'public.sort'}), dataIndex: 'sort', key: 'sort', align: 'center', width:100, }, { title: intl.formatMessage({id:'public.desctiption'}), dataIndex: 'pText', key: 'pText', align: 'center', width:400, }, { title: intl.formatMessage({id:'public.img'}), dataIndex: 'carImg', key: 'carImg', align: 'center', width:150, render: (text,record:any) => , }, { title: intl.formatMessage({id:'public.action'}), dataIndex: '', align: 'center', width:160, render: (text,record) => { return }, }, ]; const getListData:any =()=>{ if(prop.id=='')return; let showPage=true; prop.treeDataAll.map((e:any)=>{ if(e.uuid =="9a99b2abf66e45269306c3c34bd64d8c"){ if(e.children.filter((item:any)=>item.uuid==prop.id).length>0){ showPage=false; } } }); setPagePathShow(showPage); getCarList(prop.id).then((res)=>{ if(res.code==200){ if(res.rows.length>0){ setListData(res.rows); }else{ setListData([]); } }else{ message.error(res.msg); } }) } //发布静态化 const pushStatusPage:any =()=>{ if(prop.id==''){ message.error('没有id'); return; } pushProducts(prop.id).then((res:any)=>{ if(res.code==200){ message.success(res.msg) }else{ message.error(res.msg); } }) } useEffect(() => { getListData(); }, [prop.id]); //路径校验 const onPagePathChange=(val:any)=>{ let str=trim(val.target.value); if(str.length==0||str==undefined||str==null){ setHtmlPath(3) }else if(str.indexOf('?')!==-1||str.indexOf('*')!==-1||str.indexOf(':')!==-1||str.indexOf('"')!==-1||str.indexOf('<')!==-1||str.indexOf('>')!==-1||str.indexOf('|')!==-1||str.indexOf('\\')!==-1){ setHtmlPath(2) } else{ setHtmlPath(1) } } return (
{intl.formatMessage({id:'public.carTypeList'})}
record?.uuid} />
{/* */} {/* */}