zhongze-admin/src/pages/Product/ProductManage/page/carModels.tsx

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<string>();

  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) => <img src={record?.pcImgUrl} style={{ height:'110px'}}/>,
    },
    {
      title: intl.formatMessage({id:'public.action'}),
      dataIndex: '',
      align: 'center',
      width:160,
      render: (text,record) => {
        return <Space size="middle"><Button type='text' onClick={()=>revise(record)}>{intl.formatMessage({id:'public.update'})}</Button><Button type='text' onClick={()=>deleteCar(record)}>{intl.formatMessage({id:'public.delete'})}</Button></Space>
      },
    },
  ];
  
  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 (
      <div className='carRight'>
        <div className='carTitle'>
          
          {intl.formatMessage({id:'public.carTypeList'})}
          <Popconfirm title={intl.formatMessage({id:'public.ifConfirmPublish'})+'?'} onConfirm={pushStatusPage}>
                <Button className='btn' type="primary">{intl.formatMessage({id:'public.publishAll'})}</Button>
          </Popconfirm>
          <Button className='btn' type="primary" onClick={addDom}>{intl.formatMessage({id:'public.add'})}</Button>
        </div>
        <Table
          columns={columns}
          dataSource={listData}
          rowKey={(record:any)=>record?.uuid}
        />
        <Modal title={modalTitle?intl.formatMessage({id:'public.newCarTypeInfo'}):intl.formatMessage({id:'public.updateCarTypeInfo'})} className='carModal' open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={880}>
        <Form
            form={form}
            labelCol={{ flex: '160px' }}
            labelAlign="left"
            labelWrap
            wrapperCol={{ flex: 1 }}
            colon={false}
            style={{ maxWidth: 880 }}
            onFinish={formSend}
          >
            <Form.Item label="uuid" name="uuid" hidden>
              <Input />
            </Form.Item>
            <Form.Item label={intl.formatMessage({id:'public.carTypeName'})} name="title" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
            {/* <Form.Item name="carType" label="类型" rules={[{ required: true }]}>
              <Select
                placeholder="请选择类型"
                onChange={onCarTypeChange}
                allowClear
              >
                <Option value="series">车系</Option>
                <Option value="overview">概览</Option>
              </Select>
            </Form.Item> */}
            <Form.Item label={intl.formatMessage({id:'public.sort'})} name="sort">
              <Input />
            </Form.Item>
            {/* <Form.Item label="关联节点" rules={[{ required: true }]}>
              <TreeSelect
                  showSearch
                  style={{ width: '100%' }}
                  value={nodes}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  placeholder="请选择"
                  allowClear
                  treeDefaultExpandAll
                  onChange={onChangeTreeSelect}
                  treeData={prop.treeDataMy}
                  fieldNames={{label:'title',value:'uuid'}}
                />
            </Form.Item> */}
            
            <Form.Item label={intl.formatMessage({id:'public.description'})} name="pText">
              <TextArea rows={4} />
            </Form.Item>
            <Form.Item label={intl.formatMessage({id:'public.keyword'})} name="key">
              <Input />
            </Form.Item>
            {pagePathShow&&
            <Form.Item label={intl.formatMessage({id:'public.pagePath'})} name="htmlUrl" rules={[{ required: true }]}
            validateStatus={(htmlPath==2||htmlPath==3)?"error":""} help={htmlPath==2?intl.formatMessage({id:'public.pagePathInfo'}):htmlPath==3?intl.formatMessage({id:'public.inputPlaceholder'})+intl.formatMessage({id:'public.pagePath'}):""}
            >
              <Input suffix={<Tooltip title={intl.formatMessage({id:'public.pagePathMess'})}>
          <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
        </Tooltip>} onChange={onPagePathChange} placeholder={intl.formatMessage({id:'public.inputPlaceholder'})+intl.formatMessage({id:'public.pagePath'})}/>
            </Form.Item>}

            <Form.Item label={intl.formatMessage({id:'public.img'})+'(PC)'} extra={intl.formatMessage({id:'public.pictureSize'})+'：1280*720'}>
                {imgPc.id && <div className='showImg'><img src={imgPc.url} /></div>}
                <div className='uploadBtn'>
                    <Upload
                        beforeUpload={(e)=>handleBeforeUpload(e,'pc')}
                        maxCount={1}
                        showUploadList={false}
                        accept={'.png, .jpg, .gif'}
                      >
                        <Button>{intl.formatMessage({id:'public.upload'})}</Button>
                    </Upload>
                </div>
                <div className='uploadBtn'><Button onClick={()=>{imgDele('pc')}} >{intl.formatMessage({id:'public.delete'})}</Button></div>
            </Form.Item>
            {/* <Form.Item label="图片(移动)">
                {imgM.id && <div className='showImg'><img src={imgM.url} /></div>}
                <div className='uploadBtn'>
                    <Upload
                        beforeUpload={(e)=>handleBeforeUpload(e,'m')}
                        maxCount={1}
                        showUploadList={false}
                        accept={'.png, .jpg, .gif'}
                      >
                        <Button>上传</Button>
                    </Upload>
                </div>
                <div className='uploadBtn'><Button onClick={()=>{imgDele('m')}}>删除</Button></div>
            </Form.Item> */}

          </Form>
        </Modal>
      </div>
  );
};

export default CarModelsTable;