文件上传模块封装

src/components/Form/FileUpload/fileView.js

@@ -0,0 +1,104 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Select } from 'antd';
+import { DeleteOutlined, FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
+import moment from 'moment'
+import apiurl from '../../../service/apiurl';
+import PdfView from './pdfView';
+// import './index.less'
+const FileView = ({mode, fileList, setFileList}) => {
+    const childRef = useRef(null);
+
+
+    const download = (params) => {
+        let downloadLink = document.createElement("a");
+        downloadLink.href = process.env.REACT_APP_API_URL+apiurl.file.download+params
+        downloadLink.download = `${params.fileName}`;
+        downloadLink.style.display = "none";
+        // 将链接添加到页面中
+        document.body.appendChild(downloadLink);
+        // 模拟点击事件，开始下载
+        downloadLink.click();
+    }
+
+    const deleteFile = (fileId) => {
+        let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
+        setFileList(filterFile)
+    }
+
+    const viewPdf = (params) => {
+        if (childRef.current) {
+            childRef.current.callChildMethod(params);
+        }
+    }
+
+    return (
+        <>
+            <Row gutter={[16]}>
+                {
+                    fileList.map(file=>(
+                        <Col span={12}>
+                            <div className="file-item" style={{ width: "75%",marginTop:5 }}>
+                                <div className='file-description'>
+                                    {
+                                        (()=>{
+                                            if(file.name.indexOf('.doc') > -1){
+                                                return (
+                                                    <div
+                                                        onClick={() => { download(file.response?.data?.fileId) }}
+                                                        style={{ cursor: 'pointer' }}
+                                                    >
+                                                        <FileWordOutlined style={{ fontSize: 40 }}/>
+                                                    </div>
+                                                )
+                                            }else if(file.name.indexOf('.pdf') > -1){
+                                                return (
+                                                    <div
+                                                        onClick={() => { viewPdf(file.response?.data?.fileId) }}
+                                                        style={{ cursor: 'pointer' }}
+                                                    >
+                                                        <FilePdfOutlined style={{ fontSize: 40 }} />
+                                                    </div>
+                                                )
+                                            }else if(file.name.indexOf('.zip') > -1){
+                                                return (
+                                                    <div
+                                                        onClick={() => { download(file.response?.data?.fileId) }}
+                                                        style={{ cursor: 'pointer' }}
+                                                    >
+                                                        <FileZipOutlined style={{ fontSize: 40 }} />
+                                                    </div>
+                                                )
+                                            }else if(file.name.indexOf('.xls') > -1){
+                                                return (
+                                                    <div
+                                                        onClick={() => { download(file.response?.data?.fileId) }}
+                                                        style={{ cursor: 'pointer' }}
+                                                    >
+                                                        <FileExcelOutlined style={{ fontSize: 40 }} />
+                                                    </div>
+                                                )
+                                            }else{
+                                                return (
+                                                    <Image width={60} src={apiurl.file.view + file.response?.data?.filePath} alt='' />
+                                                )
+                                            }
+                                        })()
+                                    }
+                                    <span>{file.name}</span>
+                                </div>
+                                <div className={mode == "view" ? 'delete-icon disable-icon' : 'delete-icon'} onClick={() => {
+                                    deleteFile(file.response?.data?.fileId)
+                                }}>
+                                    <DeleteOutlined />
+                                </div>
+                            </div>
+                        </Col>
+                    ))
+                }
+            </Row>
+            <PdfView ref={childRef}/>
+        </>
+    )
+}
+
+export default FileView

src/components/Form/FileUpload/index.js

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from 'react'
+import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Select } from 'antd';
+import { DeleteOutlined, FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
+import moment from 'moment'
+import FileView from './fileView';
+import apiurl from '../../../service/apiurl';
+// import './index.less'
+
+const { RangePicker } = DatePicker
+const { Dragger } = Upload;
+const url = "http://223.75.53.141:9100/gs-tsg"
+
+const FileUpload = ({mode, fileNum=1, value, onChange}) => {
+  const [fileList, setFileList] = useState([]) //上传文件列表
+  const [loading, setLoading] = useState(false)
+  console.log(1111111,fileList);
+  
+
+  const fileChange = (info) => {
+    if (info.file.status === "done") {
+      setLoading(false);
+    }
+    if (info.file.status === "uploading") {
+      setLoading(true);
+    }
+    if (info.file.status === "error") {
+      message.error("文件上传失败")
+      setLoading(false);
+    }
+    setFileList(info.fileList)
+  }
+
+  useEffect(() => {
+    if (mode != 'save' ) {
+       const imgFile = value?.map(o => ({
+        name: o.fileName,
+        response: {
+          data: {
+            filePath: o.filePath,
+            fileId: o.fileId
+          }
+        },
+       }))
+      setFileList(imgFile)
+    }
+  }, [])
+
+  useEffect(()=>{
+    if(onChange && fileList){
+      let oldFiles = fileList.map(item => (item.response?.data??item))
+      onChange(oldFiles)
+    }
+  },[fileList])
+
+
+  return (
+    <>
+      {
+        mode!=='view' && 
+        <Dragger
+          name='file'
+          action={apiurl.file.upload}
+          onChange={fileChange}
+          onDrop={(info) => { console.log(info.dataTransfer.files); }}
+          fileList={fileList}
+          disabled={loading}
+          maxCount={fileNum}
+          // onSuccess={handleSuccess}
+        >
+          <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
+          <p className="ant-upload-hint">
+            支持扩展名：.doc .docx .xls .pdf .jpg .png .ppt
+          </p>
+        </Dragger>
+      }
+      <FileView fileList={fileList} setFileList={setFileList}/>
+    </>
+  )
+}
+
+export default FileUpload

src/components/Form/FileUpload/pdfView.js

@@ -0,0 +1,46 @@
+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react'
+import { Modal } from 'antd';
+import apiurl from '../../../service/apiurl';
+const PdfView = forwardRef((props,ref) => {
+    const [pdfViewOPen, setPdfViewOPen] = useState(false)
+    const [iframeSrc, setIframeSrc] = useState('')
+
+    useImperativeHandle(ref, () => ({
+        callChildMethod: showPdf
+    }));
+    
+    const showPdf = (url) => {
+        setIframeSrc(url)
+        setPdfViewOPen(true)
+    };
+    
+
+    
+    return (
+        <>
+            <Modal
+                open={pdfViewOPen}
+                width={1000}
+                title=""
+                footer={null}
+                style={{ marginTop: "-5%" }}
+                onCancel={() => {
+                    setPdfViewOPen(false)
+                    setIframeSrc('')
+                }}
+            >
+                <iframe
+                style={{
+                    height: '80vh',
+                    width: '100%',
+                    border: 0,
+                    marginTop: 20,
+                }}
+                src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(apiurl.file.download+iframeSrc)}`}
+                />
+            </Modal>
+        </>
+    )
+})
+
+export default PdfView

src/models/auth/_.ts

@@ -294,7 +294,14 @@ export async function loadMenu(): Promise<MenuItem[]> {
         },
         { id: id(), title: '制度管理', path: '/mgr/sz/zdgl' },
         { id: id(), title: '法律法规', path: '/mgr/sz/flfg' },
-        
+        {
+          id: id(), title: '知识库', redirect: '/mgr/sz/zsk/ddfa',
+          children: [
+            {
+              id: id(), title: '调度方案库', path: '/mgr/sz/zsk/ddfa',
+            },
+          ] 
+        },
 
       ]
     },

src/service/apiurl.js

@@ -3,10 +3,18 @@ import { config } from '../config'
 const pubapi_old = 'https://owrsvr.cloudowr.cn/svr'
 const pubapi = 'https://owrsvr.cloudowr.cn/pubapi'
 const zdkapi = 'https://slt-sh.chutianyun.gov.cn:8002' //中电科的市级平台
+const baseFileUpLoad = "/gunshiApp/tsg/SzRegulatoryFramework/file/upload/singleSimple"//文件上传地址
+const baseFileDownLoad = "/gunshiApp/tsg/projectEvents/file/download/"//文件下载地址
+const baseFileView = "http://223.75.53.141:9100/gs-tsg"//文件回显地址
 const service_fxdd = '/gunshiApp/tsg'
 const service_xyt = '/gunshiApp/tsg'//登陆先用小玉潭
 const service_shzh = '/shzh'
 const apiurl = {
+  file:{
+    upload:baseFileUpLoad,
+    download:baseFileDownLoad,
+    view:baseFileView
+  },
   systemM: {
     userM: {
       updatePassword:service_xyt + '/system/user/profile/updatePwd'

src/views/AppRouters.tsx

@@ -111,6 +111,7 @@ import Zdgl from './sz/zdgl'
 import Ajdj from './sz/szzf/ajdj'
 import Ajtj from './sz/szzf/ajtj'
 import Clyj from './sz/szzf/clyj'
+import Ddfa from './sz/ddfa'
 
 import Krgl from './KrLine'
 import Gsnlfx from './gxsl/gsnlfx'
@@ -280,7 +281,12 @@ const AppRouters: React.FC = () => {
         { path: 'sz/zdgl', element: <Zdgl /> },       
         { path: 'sz/szzf/ajdj', element: <Ajdj /> },       
         { path: 'sz/szzf/ajtj', element: <Ajtj /> },       
-        { path: 'sz/szzf/clyj', element: <Clyj /> },       
+        { path: 'sz/szzf/clyj', element: <Clyj /> },     
+        
+        { path: 'sz/zsk/ddfa', element: <Ddfa /> },     
+        
+
+
 
       ],
     },

src/views/sz/ddfa/form.js

@@ -0,0 +1,116 @@
+import React, { useEffect, useState, useMemo, useRef } from 'react';
+import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Select } from 'antd';
+import { DeleteOutlined, FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
+import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
+import apiurl from '../../../service/apiurl';
+import NormalSelect from '../../../components/Form/NormalSelect';
+import FileUpload from '../../../components/Form/FileUpload'
+
+// import "./index.less"
+import moment from 'moment';
+
+const opntios=[
+  {value:0,label:'党支部工作制度'},
+  {value:1,label:'行政工作制度'},
+  {value:2,label:'部门工作制度'},
+  {value:3,label:'安全管理制度'},
+  {value:4,label:'工程管理制度'},
+  {value:5,label:'技术规程'},
+  {value:6,label:'岗位责任制'}
+]
+const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false)
+
+  const onfinish = (values) => {
+    debugger
+    if (mode === 'edit') {
+      // onEdit(apiurl.zdgl.edit, {...record,...values})
+    }
+    if (mode === 'save') {
+      // onSave(apiurl.zdgl.add, values)
+    }
+  }
+
+
+
+
+  return (
+    <>
+      <Form
+        form={form}
+        {...formItemLayout}
+        onFinish={onfinish}
+        initialValues={record}
+      >
+        <Form.Item name="id"><Input type="hidden" /></Form.Item>
+        <Row>
+          <Col span={12}>
+            <Form.Item
+              label="方案名称"
+              name="famc"
+              rules={[{ required: true }]}
+            >
+              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item 
+              label="调度类型" 
+              name="ddlx" 
+              rules={[{ required: true }]}
+            >
+              <Select allowClear style={{ width: '100%' }} options={opntios} />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              label="编制时间"
+              name="bzsj"
+              getValueFromEvent={(e, dateString) => dateString}
+              getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
+            >
+              <DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              label="状态"
+              name="zt"
+            >
+              <Select allowClear style={{ width: '100%' }} options={opntios} />
+            </Form.Item>
+          </Col>
+        </Row>
+        <Row>
+            <Col span={24}>
+            <Form.Item
+              label="附件"
+              name="files"
+              labelCol={{ span: 3 }}
+              wrapperCol={{ span: 19 }}
+            >
+                <FileUpload 
+                  mode={mode} 
+                  fileNum={3}
+                />
+            </Form.Item>
+            </Col>
+        </Row>   
+        {
+          mode === 'view' ? null : (
+            <>
+              <Form.Item {...btnItemLayout}>
+                <Button type="primary" htmlType="submit" loading={loading}>
+                  {mode === 'save' ? '提交' : '修改'}
+                </Button>
+              </Form.Item>
+            </>
+          )
+        }
+      </Form>
+    </>
+  );
+}
+
+export default ModalForm;

src/views/sz/ddfa/index.js

@@ -0,0 +1,97 @@
+import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
+import BasicCrudModal from '../../../components/crud/BasicCrudModal';
+import { Table, Card, Modal, Form, Input, Button, Row, Col, Timeline, message, Tabs, Image } from 'antd';
+import { FileWordOutlined, FilePdfOutlined, FileZipOutlined, PaperClipOutlined } from '@ant-design/icons';
+import { useSelector } from 'react-redux';
+import ToolBar from './toolbar';
+import ModalForm from './form';
+import apiurl from '../../../service/apiurl';
+import usePageTable from '../../../components/crud/usePageTable2';
+import { createCrudService } from '../../../components/crud/_';
+import { CrudOpRender_text } from '../../../components/crud/CrudOpRender';
+import { httpgetExport } from '../../../utils/request';
+import { exportFile } from '../../../utils/tools';
+import dayjs from 'dayjs';
+
+const obj={0:"党支部工作制度",1:"行政工作制度",2:"部门工作制度",3:"安全管理制度",4:"工程管理制度",5:"技术规程",6:"岗位责任制"}
+const Page = () => {
+    
+    const refModal = useRef();
+    const [searchVal, setSearchVal] = useState(false)
+    const columns = [
+        { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
+        { title: '方案名称', key: 'name', dataIndex: 'name',  ellipsis: true },
+        { title: '调度类型', key: 'type', dataIndex: 'type',render:(v)=><>{obj[v]}</>},
+        { title: '简介', key: 'releaseDate', dataIndex: 'releaseDate', render: (value) => <span>{value ? dayjs(value).format('YYYY-MM-DD') : ''}</span>},
+        { title: '编制时间', key: 'fillUnit', dataIndex: 'fillUnit'},
+        { title: '附件数', key: 'minUpTime', dataIndex: 'minUpTime'},
+        { title: '状态', key: 'minUpTime', dataIndex: 'minUpTime'},
+        { title: '创建人', key: 'minUpTime', dataIndex: 'minUpTime'},
+        { title: '最后更新时间', key: 'minUpTime', dataIndex: 'minUpTime'},
+        {
+            title: '操作', key: 'operation', fixed: 'right', align: 'center',
+            render: (value, row, index) => (
+                <CrudOpRender_text
+                    edit={true}
+                    del={true}
+                    view={true}
+                    command={(cmd) => () => command(cmd)(row)} 
+                />
+            )
+        },
+    ];
+
+    const command = (type) => (params) => {
+        if (type === 'save') {
+            refModal.current.showSave();
+        } else if (type === 'edit') {
+            refModal.current.showEdit({ ...params });
+        } else if (type === 'view') {
+            refModal.current.showView(params);
+        } else if (type === 'del') {
+            refModal.current.onDeleteGet(apiurl.zdgl.del + `/${params.id}`);
+        }
+    }
+
+
+    const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.zdgl.list).find_noCode);
+
+
+    useEffect(() => {
+        const params = {
+            search: {
+                ...searchVal,
+            }
+        };
+        search(params)
+    }, [searchVal])
+
+
+    return (
+        <>
+            <div className='content-root clearFloat xybm' style={{ paddingRight: "0", paddingBottom: "0" }}>
+                <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", overflowY: "auto" }}>
+                    <Card className='nonebox'>
+                        <ToolBar
+                            setSearchVal={setSearchVal}
+                            onSave={command('save')}
+                        />
+                    </Card>
+                    <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
+                        <Table columns={columns} rowKey="inx" {...tableProps} />
+                    </div>
+                </div>
+
+                <BasicCrudModal
+                    width={1000}
+                    ref={refModal}
+                    title=""
+                    component={ModalForm}
+                    onCrudSuccess={refresh}
+                />
+            </div>
+        </>
+    );
+}
+
+export default Page;

src/views/sz/ddfa/toolbar.js

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import { Form, Input, Button, DatePicker, Select } from 'antd';
+import { DownOutlined, UpOutlined } from '@ant-design/icons'
+
+import moment from 'moment';
+const { RangePicker } = DatePicker;
+const ToolBar = ({ setSearchVal, onSave }) => {
+  const [form] = Form.useForm();
+  const onFinish = (values) => {
+    const {releaseDate,...ret} = values
+    if(releaseDate){
+      ret.stm = moment(values.releaseDate[0]).format('YYYY-MM-DD HH:mm:ss')
+      ret.etm = moment(values.releaseDate[1]).format('YYYY-MM-DD HH:mm:ss')
+    }
+    setSearchVal(ret);
+  }
+
+  const opntios = [
+    {value:0,label:'党支部工作制度'},
+    {value:1,label:'行政工作制度'},
+    {value:2,label:'部门工作制度'},
+    {value:3,label:'安全管理制度'},
+    {value:4,label:'工程管理制度'},
+    {value:5,label:'技术规程'},
+    {value:6,label:'岗位责任制'}
+  ]
+  
+  return (
+    <>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
+          <Form.Item label="方案名称" name="name">
+            <Input allowClear style={{ width: '150px' }} />
+          </Form.Item>
+          <Form.Item label="调度类型" name="type">
+            <Select allowClear style={{ width: '150px' }} options={opntios} />
+          </Form.Item>
+          <Form.Item label="编制时间" name="releaseDate">
+            <RangePicker allowClear />
+          </Form.Item>
+          <Form.Item label="状态" name="fillUnit">
+            <Input allowClear style={{ width: '150px' }} />
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType="submit">查询</Button>
+          </Form.Item>
+
+          <Form.Item>
+            <Button onClick={() => form.resetFields()}>重置</Button>
+          </Form.Item>
+
+          {
+            (onSave) ?
+              <Form.Item>
+                <Button onClick={onSave}>新增</Button>
+              </Form.Item>
+              : null
+          }
+
+        </Form>
+      </div>
+    </>
+  );
+}
+
+export default ToolBar;