Merge branch 'master' of http://10.0.41.100:3000/lishenfeng/tsg-web

src/index.less

@@ -203,3 +203,9 @@ code {
   padding: 0 !important;
   padding-right: 10px !important;
 }
+.flex{
+  display: flex;
+}
+.flex-end{
+  justify-content: flex-end;
+}

src/models/auth/_.ts

@@ -32,7 +32,7 @@ export function removeLoginInfo() {
   let keysToKeep = ["checked", "loginNamePwd"];
   let keysToRemove = [];
   // 遍历 localStorage
-for (let i = 0; i < localStorage.length; i++) {
+  for (let i = 0; i < localStorage.length; i++) {
     let key: any = localStorage.key(i);
     if (!keysToKeep.includes(key)) {
       keysToRemove.push(key);
@@ -67,7 +67,7 @@ export function getUserFromSession(): LoginUser | null {
     if (obj.id && obj.tokenInfo.tokenValue) {
       return obj
     }
-  } catch (e) {}
+  } catch (e) { }
   return null
 }
 
@@ -114,20 +114,20 @@ function idgen() {
   return () => `${id++}`
 }
 
-const handelTreeData = (data:any,id:any)=>{
+const handelTreeData = (data: any, id: any) => {
   if (data.length > 0) {
-      data.forEach((item:any) => {
+    data.forEach((item: any) => {
       item.id = id()
       item.title = item.menuName;
       item.icon = item.icon;
 
 
-          if(item.menuType==='M'&&item.children && item.children.length > 0){//目录
+      if (item.menuType === 'M' && item.children && item.children.length > 0) {//目录
         item.redirect = item.path;
         delete item.path
-            handelTreeData(item.children,id);
+        handelTreeData(item.children, id);
       }
-          if(item.menuType==='C'){//菜单
+      if (item.menuType === 'C') {//菜单
         item.rule = item.children;
         delete item.children
       }
@@ -135,9 +135,9 @@ const handelTreeData = (data:any,id:any)=>{
   }
 }
 
-const buildTree = (data:any, parentId:any)=> {
-  let tree:any = [];
-  data.forEach((node:any) => {
+const buildTree = (data: any, parentId: any) => {
+  let tree: any = [];
+  data.forEach((node: any) => {
     if (node.parentId === parentId) {
       let children = buildTree(data, node.menuId);
       if (children.length) {
@@ -150,15 +150,15 @@ const buildTree = (data:any, parentId:any)=> {
 }
 
 
-export function loadRole(data:any) {
-  const roleObj:any = {}
-  const handelTreeData2 = (data:any)=>{
+export function loadRole(data: any) {
+  const roleObj: any = {}
+  const handelTreeData2 = (data: any) => {
     if (data.length > 0) {
-        data.forEach((item:any) => {
+      data.forEach((item: any) => {
         if (item.children && item.children.length > 0) {
           //是目录
           handelTreeData2(item.children);
-            }else{
+        } else {
           //是菜单
           roleObj[item.path] = item
         }
@@ -207,6 +207,20 @@ export async function loadMenu(): Promise<MenuItem[]> {
             }
           ]
         },
+        {
+          id: id(), title: '水政执法', redirect: '/mgr/sz/szzf/ajdj',
+          children: [
+            {
+              id: id(), title: '案件登记', path: '/mgr/sz/szzf/ajdj',
+            },
+            {
+              id: id(), title: '案件统计', path: '/mgr/sz/szzf/ajtj',
+            },
+            {
+              id: id(), title: '处理依据', path: '/mgr/sz/szzf/clyj',
+            }
+          ]
+        },
         {
           id: id(), title: '监督考核', redirect: '/mgr/sz/jdkh/khtj',
           children: [
@@ -232,10 +246,11 @@ export async function loadMenu(): Promise<MenuItem[]> {
 
       ]
     },
-    { id: id(), title: '四预', redirect: '/mgr/sy/fhxzfx', icon: 'fxzb',
+    {
+      id: id(), title: '四预', redirect: '/mgr/sy/fhxzfx', icon: 'fxzb',
       children: [
-        { id: id(), title: '防洪形势', path: '/mgr/sy/fhxzfx'},
-        { id: id(), title: '天气预报', path: '/mgr/fxzb/tqyb'},
+        { id: id(), title: '防洪形势', path: '/mgr/sy/fhxzfx' },
+        { id: id(), title: '天气预报', path: '/mgr/fxzb/tqyb' },
         {
           id: id(), title: '洪水预报', redirect: '/mgr/fxzb/hsyb/hyybjs',
           children: [
@@ -244,8 +259,8 @@ export async function loadMenu(): Promise<MenuItem[]> {
             { id: id(), title: '参数管理', path: '/mgr/fxzb/hsyb/csgl' },
           ]
         },
-        { id: id(), title: '防汛预案', path: '/mgr/sy/fxya'},
-        { id: id(), title: '调度规程', path: '/mgr/sy/ddgc'},
+        { id: id(), title: '防汛预案', path: '/mgr/sy/fxya' },
+        { id: id(), title: '调度规程', path: '/mgr/sy/ddgc' },
         {
           id: id(),
           title: '抢险物料',
@@ -258,7 +273,8 @@ export async function loadMenu(): Promise<MenuItem[]> {
         },
       ],
     },
-    { id: id(), title: '四管', redirect: '/mgr/sg/xcxj/xcrw', icon: 'fxzb',
+    {
+      id: id(), title: '四管', redirect: '/mgr/sg/xcxj/xcrw', icon: 'fxzb',
       children: [
         {
           id: id(), title: '巡查巡检', redirect: '/mgr/sg/xcxj/xcrw',
@@ -314,7 +330,8 @@ export async function loadMenu(): Promise<MenuItem[]> {
         },
       ],
     },
-    { id: id(), title: '工程安全监测', redirect: '/mgr/gcaqjc/gcaqyj/bzt', icon: 'fxzb',
+    {
+      id: id(), title: '工程安全监测', redirect: '/mgr/gcaqjc/gcaqyj/bzt', icon: 'fxzb',
       children: [
         {
           id: id(), title: '布置图', path: '/mgr/gcaqjc/gcaqyj/bzt',
@@ -322,7 +339,7 @@ export async function loadMenu(): Promise<MenuItem[]> {
         {
           id: id(), title: '工程安全分析', redirect: '/mgr/gcaqjc/gcaqfx/jrx',
           children: [
-            { id: id(), title: '浸润线', path: '/mgr/gcaqjc/gcaqfx/jrx'},
+            { id: id(), title: '浸润线', path: '/mgr/gcaqjc/gcaqfx/jrx' },
           ]
         },
         {
@@ -345,25 +362,29 @@ export async function loadMenu(): Promise<MenuItem[]> {
         },
       ],
     },
-    { id:id(),title:'四全',redirect:'/mgr/sq/qfg/zcdjxx',
+    {
+      id: id(), title: '四全', redirect: '/mgr/sq/qfg/zcdjxx',
       children: [
-        { id: id(), title: '全覆盖', redirect: '/mgr/sq/qfg/zcdjxx',
+        {
+          id: id(), title: '全覆盖', redirect: '/mgr/sq/qfg/zcdjxx',
           children: [
-            { id: id(), title: '注册登记信息', path: '/mgr/sq/qfg/zcdjxx'},
+            { id: id(), title: '注册登记信息', path: '/mgr/sq/qfg/zcdjxx' },
           ]
         },
-        { id: id(), title: '全要素', redirect: '/mgr/sq/qys/kqys',
+        {
+          id: id(), title: '全要素', redirect: '/mgr/sq/qys/kqys',
           children: [
-            { id: id(), title: '库区要素', path: '/mgr/sq/qys/kqys'},
-            { id: id(), title: '工程要素', path: '/mgr/sq/qys/gcys'},
-            { id: id(), title: '下游要素', path: '/mgr/sq/qys/xyys'},
+            { id: id(), title: '库区要素', path: '/mgr/sq/qys/kqys' },
+            { id: id(), title: '工程要素', path: '/mgr/sq/qys/gcys' },
+            { id: id(), title: '下游要素', path: '/mgr/sq/qys/xyys' },
 
           ]
         },
-        { id: id(), title: '全周期', redirect: '/mgr/sq/qzq/gcdsj',
+        {
+          id: id(), title: '全周期', redirect: '/mgr/sq/qzq/gcdsj',
           children: [
-            { id: id(), title: '工程大事记', path: '/mgr/sq/qzq/gcdsj'},
-            { id: id(), title: '全周期档案', path: '/mgr/sq/qys/qzqda'},
+            { id: id(), title: '工程大事记', path: '/mgr/sq/qzq/gcdsj' },
+            { id: id(), title: '全周期档案', path: '/mgr/sq/qys/qzqda' },
           ]
         },
       ]

src/views/AppRouters.tsx

@@ -96,7 +96,9 @@ import Qzqda from './sq/qzq/qzqda'
 import Zzjgck from './sz/zzjgck'
 import Flfg from './sz/flfg'
 import Zdgl from './sz/zdgl'
-
+import Ajdj from './sz/szzf/ajdj'
+import Ajtj from './sz/szzf/ajtj'
+import Clyj from './sz/szzf/clyj'
 
 
 const HomePage = lazy(() => import('./Home'))
@@ -242,6 +244,10 @@ const AppRouters: React.FC = () => {
         { path: 'sz/gltx/zzjgck', element: <Zzjgck /> },
         { path: 'sz/flfg', element: <Flfg /> },
         { path: 'sz/zdgl', element: <Zdgl /> },       
+        { path: 'sz/szzf/ajdj', element: <Ajdj /> },       
+        { path: 'sz/szzf/ajtj', element: <Ajtj /> },       
+        { path: 'sz/szzf/clyj', element: <Clyj /> },       
+
       ],
     },
     { path: '/login', element: <LoginPage /> },

src/views/sq/qys/kqys/index.js

@@ -4,7 +4,8 @@ import qys1 from '../../../../assets/img/qys1.png'
 import qys2 from '../../../../assets/img/qys2.jpg'
 import qys3 from '../../../../assets/img/qys3.jpg'
 import qys4 from '../../../../assets/img/qys4.png'
-import './index.less'
+import stylesCss from './index.module.less'
+
 import { Rnd } from "react-rnd"
 import { useState, useEffect } from "react"
 const list = [
@@ -53,7 +54,7 @@ const Page = () => {
     return (
         <div style={{ backgroundColor: '#fff', height: '100%' }}>
             <div style={{ display: 'flex', justifyContent: 'start', alignItems: 'center', }}>
-                {list.map(item => <div className={url == item.img ? "active" : "tabCheck"} onClick={() => tabClick(item)}>{item.name}</div>)}
+                {list.map(item => <div className={url == item.img ? stylesCss.active : stylesCss.tabCheck} onClick={() => tabClick(item)}>{item.name}</div>)}
             </div>
             <Rnd
                     default={{

src/views/sz/szzf/ajdj/bajz.js

@@ -0,0 +1,75 @@
+import { Space, Table, Radio, DatePicker, Form, Select, Button, message, Upload, Input, Row, Col, Switch, Image } from 'antd';
+import { InboxOutlined, LinkOutlined, DeleteOutlined, LoadingOutlined,VerticalAlignBottomOutlined } from '@ant-design/icons'
+import { useForm } from 'antd/lib/form/Form';
+import { useState } from 'react';
+const { Dragger } = Upload;
+
+const Page = () => {
+    const form =useForm()
+    const [fileList ,setFileList] =useState()
+    const props = {
+        name: 'file',
+        multiple: true,
+        fileList: fileList,
+        showUploadList: false,
+        beforeUpload: (file, fileList) => { 
+            // if (fileType == "pic" &&
+            //     (file.type != "image/jpeg" || file.type != "image/png" || file.type != "image/jpg")) {
+            //     message.error('仅支持上传jpg/png/jpeg格式的图片');
+            //     return false;
+            // } else {
+            //     return true;
+            // }
+        },
+        onChange(e) {
+            // httpPostFile(apiUrl.service.uploadFile.uploadUrl + "?group=" + typeUpload, e).then(res => {
+            //     setFileList([...fileList, res.data])
+            // })
+        }
+    };
+    const onFinish = () =>{
+
+    }
+    return (
+        <Form form={form} name="searchTabel" onFinish={onFinish} >
+            <Row>
+                <div>案卷存档</div>
+                <Col>
+                    <Form.Item
+                        label='保管人员'
+                        name='name'
+                    >
+                        <Input />
+                    </Form.Item>
+                </Col>
+                <Col>
+                    <Form.Item
+                        label='保管地点'
+                        name='adress'
+                    >
+                        <Input />
+                    </Form.Item>
+                </Col>
+            </Row>
+            <Row>
+                <div>案卷存档</div>
+                <Col>
+                    <Form.Item
+                        label='附件'
+                        name='name'
+                    >
+                        <Dragger {...props}>
+                            <p className="ant-upload-drag-icon">
+                                <InboxOutlined />
+                            </p>
+                            <p className="ant-upload-text">点击或将文件拖拽到这里上传 支持扩展名：jpeg、png</p>
+                        </Dragger>
+                    </Form.Item>
+                </Col>
+            </Row>
+        </Form >
+
+    )
+}
+
+export default Page

src/views/sz/szzf/ajdj/config.js

@@ -0,0 +1,243 @@
+const basicData = [
+    {
+        label: '填报人',
+        key: 'name',
+        type: 'input',
+        span: 12,
+        disabled: true
+    },
+    {
+        label: '填报时间',
+        key: 'name',
+        type: 'input',
+        span: 12,
+        disabled: true
+    },
+    {
+        label: '案件编号',
+        key: 'name',
+        type: 'input',
+        span: 12
+    },
+    {
+        label: '案件名称',
+        key: 'name',
+        type: 'input',
+        span: 12,
+        required: true
+    },
+    {
+        label: '案件类型',
+        key: 'name',
+        type: 'Select',
+        span: 12
+    },
+    {
+        label: '案发地点',
+        key: 'name',
+        type: 'input',
+        span: 12
+    },
+    {
+        label: '案件来源',
+        key: 'name',
+        type: 'Radio',
+        span: 12,
+        options: [
+            { label: '自然人', value: 'Apple' },
+            { label: '法人或其他组织', value: 'Pear' },
+            { label: '待定', value: 'Orange' },
+        ]
+    },
+    {
+        label: '违法时间',
+        key: 'name',
+        type: 'input',
+        span: 24
+    },
+    {
+        label: '案件来源',
+        key: 'name',
+        type: 'input',
+        span: 24
+    },
+    {
+        label: '姓名',
+        key: 'name',
+        type: 'input',
+        span: 12
+    },
+    {
+        label: '身份证号',
+        key: 'name',
+        type: 'input',
+        span: 12
+    },
+    {
+        label: '住址',
+        key: 'name',
+        type: 'input',
+        span: 12
+    },
+    {
+        label: '联系方式',
+        key: 'name',
+        type: 'input',
+        span: 12
+    },
+    {
+        label: '简要案情',
+        key: 'name',
+        type: 'TextArea',
+        span: 24
+    },
+    {
+        label: '附件',
+        key: 'name',
+        type: 'upload',
+        span: 24
+    },
+]
+
+const clqkData = [
+    {
+        label: '处理程序',
+        key: 'name',
+        type: 'Select',
+        span: 12,
+        disabled: true
+    },
+    {
+        label: '处理依据',
+        key: 'name',
+        type: 'Select',
+        span: 12,
+        disabled: true
+    },
+    {
+        label: '处理措施',
+        key: 'name',
+        type: 'Select',
+        span: 12
+    },
+    {
+        label: '移送处理情况',
+        key: 'name',
+        type: 'Radio',
+        span: 24,
+        options: [
+            { label: '移送单位', value: 'Apple' },
+            { label: '不移送', value: 'Pear' },
+        ],
+        required: true
+    },
+    {
+        label: '案件执行情况',
+        key: 'name',
+        type: 'Radio',
+        options: [
+            { label: '当事人自动履行', value: 'Apple' },
+            { label: '行政强制执行', value: 'Pear' },
+        ],
+        span: 24
+    },
+    {
+        label: '自动履行情况',
+        key: 'name',
+        type: 'TextArea',
+        
+        span: 24
+    },
+    {
+        label: '伤亡人数(人)',
+        key: 'name',
+        type: 'input',
+        span: 12
+    },
+    {
+        label: '直接损失金额(万元)',
+        key: 'name',
+        type: 'input',
+        span: 12
+    },
+    {
+        label: '结案情况',
+        key: 'name',
+        type: 'Select',
+        span: 12
+    },
+    {
+        label: '结案时间',
+        key: 'name',
+        type: 'input',
+        span: 12
+    },
+    {
+        label: '文件编号及名称',
+        key: 'name',
+        type: 'input',
+        span: 24
+    },
+    {
+        label: '督办单位类型',
+        key: 'name',
+        type: 'Select',
+        span: 12
+    },
+    {
+        label: '督办单位名称',
+        key: 'name',
+        type: 'input',
+        span: 24
+    },
+    {
+        label: '附件',
+        key: 'name',
+        type: 'upload',
+        span: 24
+    },
+]
+
+const xzfy = [
+    {
+        label: '处理程序',
+        key: 'name',
+        type: 'Select',
+        span: 12,
+        options:[
+            {
+                label:'维护'
+            },
+            {label:'变更'},
+            {label:'撤销'},
+            {label:'和解'},
+            {label:'调解'},
+
+        ],
+        disabled: true
+    },
+    {
+        label: '处理依据',
+        key: 'name',
+        type: 'Select',
+        span: 12,
+        disabled: true,
+        options:[
+            {
+                label:'驳回原告诉讼'
+            },
+            {label:'变更'},
+            {label:'撤销'},
+            {label:'确认违法'},
+            {label:'确认无效'},
+            {label:'其他'},
+
+
+        ],
+    },
+]
+export {
+    basicData,
+    clqkData,
+    xzfy
+}

src/views/sz/szzf/ajdj/editTabs.js

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import BascForm from '../form/index'
+import { basicData,clqkData,xzfy} from './config'
+import Bajz from './bajz'
+const items = [
+    {
+        key: '1',
+        label: '基本情况',
+    },
+    {
+        key: '2',
+        label: '处理情况',
+    },
+    {
+        key: '3',
+        label: '行政复议、行政应诉情况',
+    },
+    {
+        key: '4',
+        label: '办案宗卷',
+    },
+    {
+        key: '5',
+        label: '历史影像及图片',
+    },
+];
+
+
+const Page = () => {
+    const [key , setKeys] = useState('1')
+    const onChange = (key) => {
+        console.log(key);
+        setKeys(key)
+    };
+    return (
+        <>
+            <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
+            <>
+            {key==1&& <BascForm formJson={basicData}></BascForm>}
+            {key==2&& <BascForm formJson={clqkData}></BascForm>}
+            {key==3&& <BascForm formJson={xzfy}></BascForm>}
+            {key==4&& <Bajz formJson={basicData}></Bajz>}
+            {/* {key==5&& <BascForm formJson={basicData}></BascForm>} */}
+            </>
+        </>
+    )
+}
+
+export default Page

src/views/sz/szzf/ajdj/form.js

@@ -0,0 +1,305 @@
+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 "./index.less"
+import moment from 'moment';
+const { RangePicker } = DatePicker
+const { Dragger } = Upload;
+const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
+
+const opntios=[
+  {label:'宪法',value:'宪法'},
+  {label:'法律',value:'法律'},
+  {label:'行政法规',value:'行政法规'},
+  {label:'督察法规',value:'督察法规'},
+  {label:'司法解释',value:'司法解释'},
+  {label:'地方性法规',value:'地方性法规'},
+]
+const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
+
+  const [form] = Form.useForm();
+  const [fileList, setFileList] = useState([]) //上传文件列表
+  const [fileIds, setFileIds] = useState([])
+  const [iframeSrc, setIframeSrc] = useState('')
+  const [pdfViewOPen, setPdfViewOPen] = useState(false)
+
+  const [loading, setLoading] = useState(false)
+
+  /**
+   * @description 文件下载
+   * @param {String} params 文件fileId
+   */
+  const download = (params) => {
+    let downloadLink = document.createElement("a");
+    downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xyt/projectEvents/file/download/${params}`;
+    downloadLink.download = `${params.fileName}`;
+    downloadLink.style.display = "none";
+    // 将链接添加到页面中
+    document.body.appendChild(downloadLink);
+
+    // 模拟点击事件，开始下载
+    downloadLink.click();
+  }
+  /**
+    * @description 上传图片
+    * @param {string}  file 上传的文件
+    */
+  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);
+    }
+    let fileIds = info.fileList.map(file => {
+      return file.response?.data?.fileId
+    })
+    setFileIds(fileIds)
+    setFileList(info.fileList)
+  }
+  /**
+   * @description pdf文件预览
+   * @param {String} params 文件预览url
+   */
+  const viewPdf = (params) => {
+    setIframeSrc(params)
+    setPdfViewOPen(true)
+  }
+
+
+  const onfinish = (values) => {
+    values.eventsDate = values.eventsDate ? moment(values.eventsDate).format("YYYY-MM-DD 00:00:00") : ''
+    let oldFiles = fileList.map(item => ({ fileId: item.response?.data?.fileId }))
+    if (mode === 'edit') {
+      values.files = oldFiles;
+      values.id = record.id;
+      onEdit(apiurl.rcgl.gcdsj.edit, values)
+    }
+    if (mode === 'save') {
+      values.files = oldFiles
+      onSave(apiurl.rcgl.gcdsj.save, values)
+    }
+  }
+
+  /**
+ * @description 删除上传的图片
+ * @param {string}  id 删除的id
+ */
+  const deleteFile = (fileId) => {
+    console.log(fileId);
+    let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
+    setFileList(filterFile)
+  }
+  useEffect(() => {
+    if (mode != 'save') {
+      const imgFile = record?.files?.map(o => ({
+        name: o.fileName,
+        response: {
+          data: {
+            filePath: o.filePath,
+            fileId: o.fileId
+          }
+        },
+      }))
+      setFileList(imgFile)
+    }
+  }, [record, mode])
+
+
+
+  return (
+    <>
+      <Form
+        form={form}
+        {...formItemLayout}
+        onFinish={onfinish}
+        initialValues={record}
+      >
+        <Row>
+          <Col span={12}>
+            <Form.Item
+              label="标题"
+              name="name"
+              rules={[{ required: true }]}
+            >
+              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              label="制定机关"
+              name="name"
+              rules={[{ required: true }]}
+            >
+              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item label="制定机关" name="name">
+              <Select allowClear style={{ width: '150px' }} options={opntios} />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item label="失效性" name="name">
+              <Select allowClear style={{ width: '150px' }} options={opntios} />
+            </Form.Item>
+          </Col>
+
+          <Col span={12}>
+            <Form.Item
+              label="公布日期"
+              name="eventsDate"
+              getValueFromEvent={(e, dateString) => dateString}
+              getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
+              rules={[
+                {
+                  required: true,
+                },
+              ]}
+            >
+              <DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              label="施行日期"
+              name="eventsDate"
+              getValueFromEvent={(e, dateString) => dateString}
+              getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
+              rules={[
+                {
+                  required: true,
+                },
+              ]}
+            >
+              <DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
+            </Form.Item>
+          </Col>
+        </Row>
+
+        <Row>
+          <Col span={24}>
+            <Form.Item
+              label="附件"
+              name="fieldId"
+              labelCol={{ span: 3 }}
+              wrapperCol={{ span: 19 }}
+            >
+              {mode !== "view" &&
+                <Dragger
+                  name='file'
+                  // multiple
+                  action="/gunshiApp/xyt/projectEvents/file/upload/singleSimple"
+                  onChange={fileChange}
+                  onDrop={(info) => { console.log(info.dataTransfer.files); }}
+                  fileList={fileList}
+                  disabled={loading}
+                // onSuccess={handleSuccess}
+                >
+                  <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
+                  <p className="ant-upload-hint">
+                    支持扩展名：.doc .docx .pdf .jpg .png .ppt
+                  </p>
+                </Dragger>
+              }
+              <Row gutter={[16]}>
+                {
+                  fileList.length > 0 && fileList.map(file => {
+                    return (
+                      <Col span={12}>
+                        <div className="file-item" style={{ width: "75%" }}>
+                          <div className='file-description'>
+                            {file.name.indexOf('.docx') > -1 ?
+                              <div
+                                onClick={() => { download(file.response?.data?.fileId) }}
+                                style={{ cursor: 'pointer' }}
+                              >
+                                <FileWordOutlined
+                                  style={{ fontSize: 40 }}
+                                />
+                              </div>
+                              :
+                              file.name.indexOf('.pdf') > -1 ?
+                                <div
+                                  onClick={() => { viewPdf(file.response?.data?.fileId) }}
+                                  style={{ cursor: 'pointer' }}
+                                >
+                                  <FilePdfOutlined style={{ fontSize: 40 }} />
+                                </div>
+                                :
+                                file.name.indexOf('.zip') > -1 ?
+                                  <div
+                                    onClick={() => { download(file.response?.data?.fileId) }}
+                                    style={{ cursor: 'pointer' }}
+                                  >
+                                    <FileZipOutlined style={{ fontSize: 40 }} />
+                                  </div>
+                                  :
+                                  file.name.indexOf('.xlsx') > -1 ?
+                                    <div
+                                      onClick={() => { download(file.response?.data?.fileId) }}
+                                      style={{ cursor: 'pointer' }}
+                                    >
+                                      <FileExcelOutlined style={{ fontSize: 40 }} />
+                                    </div>
+                                    :
+                                    <Image width={60} src={url + 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>
+            </Form.Item>
+          </Col>
+        </Row>
+        {
+          mode === 'view' ? null : (
+            <>
+              <Form.Item {...btnItemLayout}>
+                <Button type="primary" htmlType="submit">
+                  {mode === 'save' ? '提交' : '修改'}
+                </Button>
+              </Form.Item>
+            </>
+          )
+        }
+      </Form>
+      <Modal
+        open={pdfViewOPen}
+        width={1000}
+        title=""
+        footer={null}
+        style={{ marginTop: "-5%" }}
+        onCancel={() => {
+          setPdfViewOPen(false)
+        }}
+      >
+        <iframe
+          style={{
+            height: '80vh',
+            width: '100%',
+            border: 0,
+            marginTop: 20,
+          }}
+          src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/projectEvents/file/download/${iframeSrc}`)}`}
+        />
+      </Modal>
+    </>
+  );
+}
+
+export default ModalForm;

src/views/sz/szzf/ajdj/index.js

@@ -0,0 +1,150 @@
+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, FileExcelOutlined } from '@ant-design/icons';
+import { useSelector } from 'react-redux';
+import ToolBar from './toolbar';
+import ModalForm from './editTabs';
+import apiurl from '../../../../service/apiurl';
+import usePageTable from '../../../../components/crud/usePageTable2';
+import { createCrudService } from '../../../../components/crud/_';
+import { CrudOpRender_text } from '../../../../components/crud/CrudOpRender';
+
+const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
+const Page = () => {
+    const role = useSelector(state => state.auth.role);
+    const editBtn = role?.rule?.find(item => item.menuName == "编辑");
+    const viewBtn = role?.rule?.find(item => item.menuName == "查看");
+    const delBtn = role?.rule?.find(item => item.menuName == "删除");
+    const refModal = useRef();
+    const [searchVal, setSearchVal] = useState(false)
+    const [iframeSrc, setIframeSrc] = useState('')
+    const [pdfViewOPen, setPdfViewOPen] = useState(false)
+    const [isFetch, setIsFetch] = useState(false)
+    const columns = [
+        { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
+        { title: '标题', key: 'name', dataIndex: 'name', width: 250, ellipsis: true },
+        {
+            title: '制定机关', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
+        },
+        {
+            title: '法律性质', key: 'eventsType', dataIndex: 'eventsType', width: 140,
+            render: (value) => <span>{value == 1 ? "综合大事记" : value == 2 ? "专题大事记" : ''}</span>,
+        },
+        {
+            title: '时效性', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
+        },
+        {
+            title: '公布日期', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
+        },
+        {
+            title: '施行日期', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
+        },
+        {
+            title: '上传时间', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
+        },
+        {
+            title: '附件', key: 'fileName', dataIndex: 'fileName', width: 300,render:(v,r)=><a onClick={()=>viewPdf(r.fileId)}>{v}</a>
+        },
+        {
+            title: '操作', key: 'operation', width: 240, fixed: 'right', align: 'center',
+            render: (value, row, index) => (
+                <CrudOpRender_text
+                    edit={true}
+                    del={true}
+                    view={true}
+                    command={(cmd) => () => command(cmd)(row)} />)
+        },
+    ];
+
+
+    const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
+
+    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.rcgl.gcdsj.delete + `/${params.id}`);
+        }
+    }
+
+
+    const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.rcgl.gcdsj.page).find_noCode);
+
+    /**
+      * @description 处理成功的回调
+      */
+    const successCallback = () => {
+        refresh()
+        setIsFetch(!isFetch)
+    }
+
+    const viewPdf = (params) => {
+        setIframeSrc(params)
+        setPdfViewOPen(true)
+      }
+    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')}
+                            role={role}
+                        />
+                    </Card>
+                    <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
+                        <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
+                    </div>
+                </div>
+
+                <BasicCrudModal
+                    width={1000}
+                    ref={refModal}
+                    title=""
+                    component={ModalForm}
+                    onCrudSuccess={successCallback}
+                // onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
+                />
+            </div>
+
+            <Modal
+                open={pdfViewOPen}
+                width={1000}
+                title=""
+                footer={null}
+                style={{ marginTop: "-5%" }}
+                onCancel={() => {
+                    setPdfViewOPen(false)
+                }}
+            >
+                <iframe
+                    style={{
+                        height: '80vh',
+                        width: '100%',
+                        border: 0,
+                        marginTop: 20,
+                    }}
+                    src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/projectEvents/file/download/${iframeSrc}`)}`}
+                />
+            </Modal>
+        </>
+    );
+}
+
+export default Page;

src/views/sz/szzf/ajdj/toolbar.js

@@ -0,0 +1,91 @@
+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, storeData,role }) => {
+  const addBtn = role?.rule?.find(item => item.menuName == "新增");
+  const searchBtn = role?.rule?.find(item => item.menuName == "查询");
+  const [form] = Form.useForm();
+  const [showGj , setShowGj] =useState(false)
+  const onFinish = (values) => {
+    let dataSo;
+    if (values.tm) {
+      dataSo = {
+        start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
+        end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
+      }
+    }
+    delete values.tm
+    setSearchVal({...values, dataSo});
+  }
+
+  const opntios=[
+    {label:'宪法',value:'宪法'},
+    {label:'法律',value:'法律'},
+    {label:'行政法规',value:'行政法规'},
+    {label:'督察法规',value:'督察法规'},
+    {label:'司法解释',value:'司法解释'},
+    {label:'地方性法规',value:'地方性法规'},
+  ]
+  const styles={
+    fontFamily: '微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif',
+    fontWeight: '700',
+    fontStyle: 'normal',
+    fontSize: '16px'
+  }
+  return (
+    <>
+      <div style={{display:'flex',justifyContent:'space-between'}}>
+        <Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
+          <div style={{display:'flex'}}>
+          <Form.Item label="标题" name="name">
+            <Input allowClear  style={{width:'150px'}}/>
+          </Form.Item>
+          <Form.Item label="制定机关" name="name">
+            <Input allowClear  style={{width:'150px'}}/>
+          </Form.Item>
+          <Form.Item label="制定机关" name="name">
+            <Select allowClear  style={{width:'150px'}} options={opntios}/>
+          </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.Item>
+            <div style={styles} onClick={()=>setShowGj(!showGj)}>高级搜索 {!showGj&&<DownOutlined />} {showGj&&<UpOutlined />}</div>
+          </Form.Item>
+          </div>
+          {showGj&&<div style={{display:'flex'}}>
+          <Form.Item label="时效性" name="name">
+            <Select allowClear  style={{width:'150px'}} options={opntios}/>
+          </Form.Item>
+          <Form.Item label="公布日期" name="name">
+            <RangePicker allowClear />
+          </Form.Item>
+          <Form.Item label="施行日期" name="name">
+            <RangePicker allowClear />
+          </Form.Item>
+          <Form.Item label="上传时间" name="name">
+            <RangePicker allowClear />
+          </Form.Item>
+          </div>}
+        </Form>
+      </div>
+    </>
+  );
+}
+
+export default ToolBar;

src/views/sz/szzf/ajtj/form.js

@@ -0,0 +1,307 @@
+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 "./index.less"
+import moment from 'moment';
+const { RangePicker } = DatePicker
+const { Dragger } = Upload;
+const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
+
+const opntios=[
+  {label:'宪法',value:'宪法'},
+  {label:'法律',value:'法律'},
+  {label:'行政法规',value:'行政法规'},
+  {label:'督察法规',value:'督察法规'},
+  {label:'司法解释',value:'司法解释'},
+  {label:'地方性法规',value:'地方性法规'},
+]
+const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
+
+  const [form] = Form.useForm();
+  const [fileList, setFileList] = useState([]) //上传文件列表
+  const [fileIds, setFileIds] = useState([])
+  const [iframeSrc, setIframeSrc] = useState('')
+  const [pdfViewOPen, setPdfViewOPen] = useState(false)
+
+  const [loading, setLoading] = useState(false)
+
+  /**
+   * @description 文件下载
+   * @param {String} params 文件fileId
+   */
+  const download = (params) => {
+    let downloadLink = document.createElement("a");
+    downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xyt/projectEvents/file/download/${params}`;
+    downloadLink.download = `${params.fileName}`;
+    downloadLink.style.display = "none";
+    // 将链接添加到页面中
+    document.body.appendChild(downloadLink);
+
+    // 模拟点击事件，开始下载
+    downloadLink.click();
+  }
+  /**
+    * @description 上传图片
+    * @param {string}  file 上传的文件
+    */
+  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);
+    }
+    let fileIds = info.fileList.map(file => {
+      return file.response?.data?.fileId
+    })
+    setFileIds(fileIds)
+    setFileList(info.fileList)
+  }
+  /**
+   * @description pdf文件预览
+   * @param {String} params 文件预览url
+   */
+  const viewPdf = (params) => {
+    setIframeSrc(params)
+    setPdfViewOPen(true)
+  }
+
+
+  const onfinish = (values) => {
+    values.eventsDate = values.eventsDate ? moment(values.eventsDate).format("YYYY-MM-DD 00:00:00") : ''
+    let oldFiles = fileList.map(item => ({ fileId: item.response?.data?.fileId }))
+    if (mode === 'edit') {
+      values.files = oldFiles;
+      values.id = record.id;
+      onEdit(apiurl.rcgl.gcdsj.edit, values)
+    }
+    if (mode === 'save') {
+      values.files = oldFiles
+      onSave(apiurl.rcgl.gcdsj.save, values)
+    }
+  }
+
+  /**
+ * @description 删除上传的图片
+ * @param {string}  id 删除的id
+ */
+  const deleteFile = (fileId) => {
+    console.log(fileId);
+    let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
+    setFileList(filterFile)
+  }
+  useEffect(() => {
+    if (mode != 'save') {
+      const imgFile = record?.files?.map(o => ({
+        name: o.fileName,
+        response: {
+          data: {
+            filePath: o.filePath,
+            fileId: o.fileId
+          }
+        },
+      }))
+      setFileList(imgFile)
+    }
+  }, [record, mode])
+
+
+
+  return (
+    <>
+      <Form
+        form={form}
+        {...formItemLayout}
+        onFinish={onfinish}
+        initialValues={record}
+      >
+        <Row>
+          <Col span={12}>
+            <Form.Item
+              label="标题"
+              name="name"
+              rules={[{ required: true }]}
+            >
+              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              label="制定机关"
+              name="name"
+              rules={[{ required: true }]}
+            >
+              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item label="制定机关" name="name">
+              <Select allowClear style={{ width: '150px' }} options={opntios} />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item label="失效性" name="name">
+              <Select allowClear style={{ width: '150px' }} options={opntios} />
+            </Form.Item>
+          </Col>
+
+          <Col span={12}>
+            <Form.Item
+              label="公布日期"
+              name="eventsDate"
+              getValueFromEvent={(e, dateString) => dateString}
+              getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
+              rules={[
+                {
+                  required: true,
+                },
+              ]}
+            >
+              <DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              label="施行日期"
+              name="eventsDate"
+              getValueFromEvent={(e, dateString) => dateString}
+              getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
+              rules={[
+                {
+                  required: true,
+                },
+              ]}
+            >
+              <DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
+            </Form.Item>
+          </Col>
+        </Row>
+
+        <Row>
+          <Col span={24}>
+            <Form.Item
+              label="附件"
+              name="fieldId"
+              labelCol={{ span: 3 }}
+              wrapperCol={{ span: 19 }}
+            >
+              {mode !== "view" &&
+                <Dragger
+                  name='file'
+                  // multiple
+                  action="/gunshiApp/xyt/projectEvents/file/upload/singleSimple"
+                  onChange={fileChange}
+                  onDrop={(info) => { console.log(info.dataTransfer.files); }}
+                  fileList={fileList}
+                  disabled={loading}
+                // onSuccess={handleSuccess}
+                >
+                  <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
+                  <p className="ant-upload-hint">
+                    支持扩展名：.doc .docx .pdf .jpg .png .ppt
+                  </p>
+                </Dragger>
+              }
+              <Row gutter={[16]}>
+                {
+                  fileList.length > 0 && fileList.map(file => {
+                    return (
+                      <Col span={12}>
+                        <div className="file-item" style={{ width: "75%" }}>
+                          <div className='file-description'>
+                            {file.name.indexOf('.docx') > -1 ?
+                              <div
+                                onClick={() => { download(file.response?.data?.fileId) }}
+                                style={{ cursor: 'pointer' }}
+                              >
+                                <FileWordOutlined
+                                  style={{ fontSize: 40 }}
+                                />
+                              </div>
+                              :
+                              file.name.indexOf('.pdf') > -1 ?
+                                <div
+                                  onClick={() => { viewPdf(file.response?.data?.fileId) }}
+                                  style={{ cursor: 'pointer' }}
+                                >
+                                  <FilePdfOutlined style={{ fontSize: 40 }} />
+                                </div>
+                                :
+                                file.name.indexOf('.zip') > -1 ?
+                                  <div
+                                    onClick={() => { download(file.response?.data?.fileId) }}
+                                    style={{ cursor: 'pointer' }}
+                                  >
+                                    <FileZipOutlined style={{ fontSize: 40 }} />
+                                  </div>
+                                  :
+                                  file.name.indexOf('.xlsx') > -1 ?
+                                    <div
+                                      onClick={() => { download(file.response?.data?.fileId) }}
+                                      style={{ cursor: 'pointer' }}
+                                    >
+                                      <FileExcelOutlined style={{ fontSize: 40 }} />
+                                    </div>
+                                    :
+                                    <Image width={60} src={url + 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>
+            </Form.Item>
+          </Col>
+        </Row>
+        {
+          mode === 'view' ? null : (
+            <>
+              <Form.Item {...btnItemLayout}>
+                <Button type="primary" htmlType="submit">
+                  {mode === 'save' ? '提交' : '修改'}
+                </Button>
+              </Form.Item>
+            </>
+          )
+        }
+      </Form>
+      <Modal
+        open={pdfViewOPen}
+        width={1000}
+        title=""
+        footer={null}
+        style={{ marginTop: "-5%" }}
+        onCancel={() => {
+          setPdfViewOPen(false)
+        }}
+      >
+        <iframe
+          style={{
+            height: '80vh',
+            width: '100%',
+            border: 0,
+            marginTop: 20,
+          }}
+          src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/projectEvents/file/download/${iframeSrc}`)}`}
+        />
+      </Modal>
+    </>
+  );
+}
+
+export default ModalForm;

src/views/sz/szzf/ajtj/index.js

@@ -0,0 +1,150 @@
+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, FileExcelOutlined } 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';
+
+const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
+const Page = () => {
+    const role = useSelector(state => state.auth.role);
+    const editBtn = role?.rule?.find(item => item.menuName == "编辑");
+    const viewBtn = role?.rule?.find(item => item.menuName == "查看");
+    const delBtn = role?.rule?.find(item => item.menuName == "删除");
+    const refModal = useRef();
+    const [searchVal, setSearchVal] = useState(false)
+    const [iframeSrc, setIframeSrc] = useState('')
+    const [pdfViewOPen, setPdfViewOPen] = useState(false)
+    const [isFetch, setIsFetch] = useState(false)
+    const columns = [
+        { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
+        { title: '标题', key: 'name', dataIndex: 'name', width: 250, ellipsis: true },
+        {
+            title: '制定机关', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
+        },
+        {
+            title: '法律性质', key: 'eventsType', dataIndex: 'eventsType', width: 140,
+            render: (value) => <span>{value == 1 ? "综合大事记" : value == 2 ? "专题大事记" : ''}</span>,
+        },
+        {
+            title: '时效性', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
+        },
+        {
+            title: '公布日期', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
+        },
+        {
+            title: '施行日期', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
+        },
+        {
+            title: '上传时间', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
+        },
+        {
+            title: '附件', key: 'fileName', dataIndex: 'fileName', width: 300,render:(v,r)=><a onClick={()=>viewPdf(r.fileId)}>{v}</a>
+        },
+        {
+            title: '操作', key: 'operation', width: 240, fixed: 'right', align: 'center',
+            render: (value, row, index) => (
+                <CrudOpRender_text
+                    edit={true}
+                    del={true}
+                    view={true}
+                    command={(cmd) => () => command(cmd)(row)} />)
+        },
+    ];
+
+
+    const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
+
+    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.rcgl.gcdsj.delete + `/${params.id}`);
+        }
+    }
+
+
+    const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.rcgl.gcdsj.page).find_noCode);
+
+    /**
+      * @description 处理成功的回调
+      */
+    const successCallback = () => {
+        refresh()
+        setIsFetch(!isFetch)
+    }
+
+    const viewPdf = (params) => {
+        setIframeSrc(params)
+        setPdfViewOPen(true)
+      }
+    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')}
+                            role={role}
+                        />
+                    </Card>
+                    <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
+                        <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
+                    </div>
+                </div>
+
+                <BasicCrudModal
+                    width={1000}
+                    ref={refModal}
+                    title=""
+                    component={ModalForm}
+                    onCrudSuccess={successCallback}
+                // onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
+                />
+            </div>
+
+            <Modal
+                open={pdfViewOPen}
+                width={1000}
+                title=""
+                footer={null}
+                style={{ marginTop: "-5%" }}
+                onCancel={() => {
+                    setPdfViewOPen(false)
+                }}
+            >
+                <iframe
+                    style={{
+                        height: '80vh',
+                        width: '100%',
+                        border: 0,
+                        marginTop: 20,
+                    }}
+                    src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/projectEvents/file/download/${iframeSrc}`)}`}
+                />
+            </Modal>
+        </>
+    );
+}
+
+export default Page;

src/views/sz/szzf/ajtj/toolbar.js

@@ -0,0 +1,91 @@
+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, storeData,role }) => {
+  const addBtn = role?.rule?.find(item => item.menuName == "新增");
+  const searchBtn = role?.rule?.find(item => item.menuName == "查询");
+  const [form] = Form.useForm();
+  const [showGj , setShowGj] =useState(false)
+  const onFinish = (values) => {
+    let dataSo;
+    if (values.tm) {
+      dataSo = {
+        start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
+        end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
+      }
+    }
+    delete values.tm
+    setSearchVal({...values, dataSo});
+  }
+
+  const opntios=[
+    {label:'宪法',value:'宪法'},
+    {label:'法律',value:'法律'},
+    {label:'行政法规',value:'行政法规'},
+    {label:'督察法规',value:'督察法规'},
+    {label:'司法解释',value:'司法解释'},
+    {label:'地方性法规',value:'地方性法规'},
+  ]
+  const styles={
+    fontFamily: '微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif',
+    fontWeight: '700',
+    fontStyle: 'normal',
+    fontSize: '16px'
+  }
+  return (
+    <>
+      <div style={{display:'flex',justifyContent:'space-between'}}>
+        <Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
+          <div style={{display:'flex'}}>
+          <Form.Item label="标题" name="name">
+            <Input allowClear  style={{width:'150px'}}/>
+          </Form.Item>
+          <Form.Item label="制定机关" name="name">
+            <Input allowClear  style={{width:'150px'}}/>
+          </Form.Item>
+          <Form.Item label="制定机关" name="name">
+            <Select allowClear  style={{width:'150px'}} options={opntios}/>
+          </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.Item>
+            <div style={styles} onClick={()=>setShowGj(!showGj)}>高级搜索 {!showGj&&<DownOutlined />} {showGj&&<UpOutlined />}</div>
+          </Form.Item>
+          </div>
+          {showGj&&<div style={{display:'flex'}}>
+          <Form.Item label="时效性" name="name">
+            <Select allowClear  style={{width:'150px'}} options={opntios}/>
+          </Form.Item>
+          <Form.Item label="公布日期" name="name">
+            <RangePicker allowClear />
+          </Form.Item>
+          <Form.Item label="施行日期" name="name">
+            <RangePicker allowClear />
+          </Form.Item>
+          <Form.Item label="上传时间" name="name">
+            <RangePicker allowClear />
+          </Form.Item>
+          </div>}
+        </Form>
+      </div>
+    </>
+  );
+}
+
+export default ToolBar;

src/views/sz/szzf/clyj/form.js

@@ -0,0 +1,306 @@
+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 "./index.less"
+import moment from 'moment';
+const { RangePicker } = DatePicker
+const { Dragger } = Upload;
+const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
+
+const opntios=[
+  {label:'宪法',value:'宪法'},
+  {label:'法律',value:'法律'},
+  {label:'行政法规',value:'行政法规'},
+  {label:'督察法规',value:'督察法规'},
+  {label:'司法解释',value:'司法解释'},
+  {label:'地方性法规',value:'地方性法规'},
+]
+const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
+
+  const [form] = Form.useForm();
+  const [fileList, setFileList] = useState([]) //上传文件列表
+  const [fileIds, setFileIds] = useState([])
+  const [iframeSrc, setIframeSrc] = useState('')
+  const [pdfViewOPen, setPdfViewOPen] = useState(false)
+
+  const [loading, setLoading] = useState(false)
+
+  /**
+   * @description 文件下载
+   * @param {String} params 文件fileId
+   */
+  const download = (params) => {
+    let downloadLink = document.createElement("a");
+    downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xyt/projectEvents/file/download/${params}`;
+    downloadLink.download = `${params.fileName}`;
+    downloadLink.style.display = "none";
+    // 将链接添加到页面中
+    document.body.appendChild(downloadLink);
+
+    // 模拟点击事件，开始下载
+    downloadLink.click();
+  }
+  /**
+    * @description 上传图片
+    * @param {string}  file 上传的文件
+    */
+  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);
+    }
+    let fileIds = info.fileList.map(file => {
+      return file.response?.data?.fileId
+    })
+    setFileIds(fileIds)
+    setFileList(info.fileList)
+  }
+  /**
+   * @description pdf文件预览
+   * @param {String} params 文件预览url
+   */
+  const viewPdf = (params) => {
+    setIframeSrc(params)
+    setPdfViewOPen(true)
+  }
+
+
+  const onfinish = (values) => {
+    values.eventsDate = values.eventsDate ? moment(values.eventsDate).format("YYYY-MM-DD 00:00:00") : ''
+    let oldFiles = fileList.map(item => ({ fileId: item.response?.data?.fileId }))
+    if (mode === 'edit') {
+      values.files = oldFiles;
+      values.id = record.id;
+      onEdit(apiurl.rcgl.gcdsj.edit, values)
+    }
+    if (mode === 'save') {
+      values.files = oldFiles
+      onSave(apiurl.rcgl.gcdsj.save, values)
+    }
+  }
+
+  /**
+ * @description 删除上传的图片
+ * @param {string}  id 删除的id
+ */
+  const deleteFile = (fileId) => {
+    console.log(fileId);
+    let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
+    setFileList(filterFile)
+  }
+  useEffect(() => {
+    if (mode != 'save') {
+      const imgFile = record?.files?.map(o => ({
+        name: o.fileName,
+        response: {
+          data: {
+            filePath: o.filePath,
+            fileId: o.fileId
+          }
+        },
+      }))
+      setFileList(imgFile)
+    }
+  }, [record, mode])
+
+
+
+  return (
+    <>
+      <Form
+        form={form}
+        {...formItemLayout}
+        onFinish={onfinish}
+        initialValues={record}
+      >
+        <Row>
+          <Col span={12}>
+            <Form.Item
+              label="标题"
+              name="name"
+              rules={[{ required: true }]}
+            >
+              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              label="制定机关"
+              name="name"
+              rules={[{ required: true }]}
+            >
+              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item label="制定机关" name="name">
+              <Select allowClear style={{ width: '150px' }} options={opntios} />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item label="失效性" name="name">
+              <Select allowClear style={{ width: '150px' }} options={opntios} />
+            </Form.Item>
+          </Col>
+
+          <Col span={12}>
+            <Form.Item
+              label="公布日期"
+              name="eventsDate"
+              getValueFromEvent={(e, dateString) => dateString}
+              getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
+              rules={[
+                {
+                  required: true,
+                },
+              ]}
+            >
+              <DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              label="施行日期"
+              name="eventsDate"
+              getValueFromEvent={(e, dateString) => dateString}
+              getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
+              rules={[
+                {
+                  required: true,
+                },
+              ]}
+            >
+              <DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
+            </Form.Item>
+          </Col>
+        </Row>
+
+        <Row>
+          <Col span={24}>
+            <Form.Item
+              label="附件"
+              name="fieldId"
+              labelCol={{ span: 3 }}
+              wrapperCol={{ span: 19 }}
+            >
+              {mode !== "view" &&
+                <Dragger
+                  name='file'
+                  // multiple
+                  action="/gunshiApp/xyt/projectEvents/file/upload/singleSimple"
+                  onChange={fileChange}
+                  onDrop={(info) => { console.log(info.dataTransfer.files); }}
+                  fileList={fileList}
+                  disabled={loading}
+                // onSuccess={handleSuccess}
+                >
+                  <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
+                  <p className="ant-upload-hint">
+                    支持扩展名：.doc .docx .pdf .jpg .png .ppt
+                  </p>
+                </Dragger>
+              }
+              <Row gutter={[16]}>
+                {
+                  fileList.length > 0 && fileList.map(file => {
+                    return (
+                      <Col span={12}>
+                        <div className="file-item" style={{ width: "75%" }}>
+                          <div className='file-description'>
+                            {file.name.indexOf('.docx') > -1 ?
+                              <div
+                                onClick={() => { download(file.response?.data?.fileId) }}
+                                style={{ cursor: 'pointer' }}
+                              >
+                                <FileWordOutlined
+                                  style={{ fontSize: 40 }}
+                                />
+                              </div>
+                              :
+                              file.name.indexOf('.pdf') > -1 ?
+                                <div
+                                  onClick={() => { viewPdf(file.response?.data?.fileId) }}
+                                  style={{ cursor: 'pointer' }}
+                                >
+                                  <FilePdfOutlined style={{ fontSize: 40 }} />
+                                </div>
+                                :
+                                file.name.indexOf('.zip') > -1 ?
+                                  <div
+                                    onClick={() => { download(file.response?.data?.fileId) }}
+                                    style={{ cursor: 'pointer' }}
+                                  >
+                                    <FileZipOutlined style={{ fontSize: 40 }} />
+                                  </div>
+                                  :
+                                  file.name.indexOf('.xlsx') > -1 ?
+                                    <div
+                                      onClick={() => { download(file.response?.data?.fileId) }}
+                                      style={{ cursor: 'pointer' }}
+                                    >
+                                      <FileExcelOutlined style={{ fontSize: 40 }} />
+                                    </div>
+                                    :
+                                    <Image width={60} src={url + 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>
+            </Form.Item>
+          </Col>
+        </Row>
+        {
+          mode === 'view' ? null : (
+            <>
+              <Form.Item {...btnItemLayout}>
+                <Button type="primary" htmlType="submit">
+                  {mode === 'save' ? '提交' : '修改'}
+                </Button>
+              </Form.Item>
+            </>
+          )
+        }
+      </Form>
+      <Modal
+        open={pdfViewOPen}
+        width={1000}
+        title=""
+        footer={null}
+        style={{ marginTop: "-5%" }}
+        onCancel={() => {
+          setPdfViewOPen(false)
+        }}
+      >
+        <iframe
+          style={{
+            height: '80vh',
+            width: '100%',
+            border: 0,
+            marginTop: 20,
+          }}
+          src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/projectEvents/file/download/${iframeSrc}`)}`}
+        />
+      </Modal>
+    </>
+  );
+}
+
+export default ModalForm;

src/views/sz/szzf/clyj/index.js

@@ -0,0 +1,136 @@
+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, FileExcelOutlined } from '@ant-design/icons';
+import { useSelector } from 'react-redux';
+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';
+
+const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
+const Page = () => {
+    const role = useSelector(state => state.auth.role);
+    const editBtn = role?.rule?.find(item => item.menuName == "编辑");
+    const viewBtn = role?.rule?.find(item => item.menuName == "查看");
+    const delBtn = role?.rule?.find(item => item.menuName == "删除");
+    const refModal = useRef();
+    const [searchVal, setSearchVal] = useState(false)
+    const [iframeSrc, setIframeSrc] = useState('')
+    const [pdfViewOPen, setPdfViewOPen] = useState(false)
+    const [isFetch, setIsFetch] = useState(false)
+    const columns = [
+        { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
+        { title: '标题', key: 'name', dataIndex: 'name', width: 250, ellipsis: true },
+        {
+            title: '制度类型', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
+        },
+        {
+            title: '发布日期', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
+        },
+        {
+            title: '发布单位', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
+        },
+        {
+            title: '上传时间', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
+        },
+        {
+            title: '附件', key: 'fileName', dataIndex: 'fileName', width: 300,render:(v,r)=><a onClick={()=>viewPdf(r.fileId)}>{v}</a>
+        },
+        {
+            title: '操作', key: 'operation', width: 240, fixed: 'right', align: 'center',
+            render: (value, row, index) => (
+                <CrudOpRender_text
+                    edit={true}
+                    del={true}
+                    view={true}
+                    command={(cmd) => () => command(cmd)(row)} />)
+        },
+    ];
+
+
+    const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
+
+    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.rcgl.gcdsj.delete + `/${params.id}`);
+        }
+    }
+
+
+    const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.rcgl.gcdsj.page).find_noCode);
+
+    /**
+      * @description 处理成功的回调
+      */
+    const successCallback = () => {
+        refresh()
+        setIsFetch(!isFetch)
+    }
+
+    const viewPdf = (params) => {
+        setIframeSrc(params)
+        setPdfViewOPen(true)
+      }
+    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" }}>
+        
+                    <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
+                        <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
+                    </div>
+                </div>
+
+                <BasicCrudModal
+                    width={1000}
+                    ref={refModal}
+                    title=""
+                    component={ModalForm}
+                    onCrudSuccess={successCallback}
+                // onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
+                />
+            </div>
+
+            <Modal
+                open={pdfViewOPen}
+                width={1000}
+                title=""
+                footer={null}
+                style={{ marginTop: "-5%" }}
+                onCancel={() => {
+                    setPdfViewOPen(false)
+                }}
+            >
+                <iframe
+                    style={{
+                        height: '80vh',
+                        width: '100%',
+                        border: 0,
+                        marginTop: 20,
+                    }}
+                    src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/projectEvents/file/download/${iframeSrc}`)}`}
+                />
+            </Modal>
+        </>
+    );
+}
+
+export default Page;

src/views/sz/szzf/form/ddForm.css

@@ -0,0 +1,27 @@
+.ddForm .ant-form-item-label {
+  width: 110px;
+}
+.zxform .ant-form-item-control {
+  border: 1px solid;
+  height: 50px;
+}
+.zxform .ant-form-item-label {
+  border: 1px solid;
+  width: 110px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.zxform .ant-input-outlined {
+  border: none;
+}
+.zxform .ant-form-item {
+  margin-bottom: 0;
+}
+.zxform .ant-input {
+  height: 48px;
+}
+.zxform .ant-input-disabled {
+  background-color: #fff;
+}

src/views/sz/szzf/form/ddForm.less

@@ -0,0 +1,50 @@
+
+    .ddForm{
+      .ant-form-item-label{
+        width: 110px;
+      }
+    }
+
+    .zxform{
+        .ant-form-item{
+            margin-bottom: 0;
+        }
+            .ant-form-item-control{
+                border: 1px solid;
+                height: 50px;
+                display: flex;
+            justify-content: center;
+            }
+            
+            .ant-form-item-label{
+                border: 1px solid;
+                // border-right:none;
+                width: 110px;
+                height: 50px;
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+            }
+            // .ant-input-outlined {
+            //     border:none
+            // }
+            
+            .ant-input{
+                height: 40px;
+                width: 90%;
+
+            }
+            .empty{
+                .ant-input-disabled{
+                    background-color: #fff;
+                }
+            }
+            
+            .ant-select-single{
+                height: 40px;
+                width: 90%;
+            }
+        
+  }
+  
+

src/views/sz/szzf/form/index.js

@@ -0,0 +1,221 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Space, Table, Radio, DatePicker, Form, Select, Button, message, Upload, Input, Row, Col, Switch, Image } from 'antd';
+import './ddForm.less'
+import dayjs from 'dayjs'
+import { InboxOutlined, LinkOutlined, DeleteOutlined, LoadingOutlined,VerticalAlignBottomOutlined } from '@ant-design/icons'
+import { httpPostFile } from '../../../../utils/request';
+import apiUrl from '../../../../service/apiurl'
+import PdfView from './pdfView'
+const { RangePicker } = DatePicker;
+const { TextArea } = Input;
+ 
+const baseUrl = "http://local.gunshiiot.com:18083/gunshiApp/xintankou"
+
+const FormZdy = ({ typeName = "ddForm", formJson, getFormInfo, type, formJsonData, typeUpload = 'dispatch', isModalOpen,fileType,footer=true }) => {
+    const [fileList, setFileList] = useState([])
+    const [fileListUp, setFileLisUp] = useState([])
+    const [url, setUrl] = useState('')
+    const [isModal, setIsModal] = useState(false)
+
+
+// debugger;
+    const [form] = Form.useForm();
+    
+// function onDocumentLoadSuccess({ numPages }) {
+//     setRenderNumPages(numPages);
+// }
+    const onFinish = (e) => {
+    }
+    const getInfo = () => {
+        form.validateFields().then((values) => {
+            getFormInfo({ ...values, files: fileList, fileIds: fileList.map(item => item.id) })
+            form.resetFields()
+            setFileList([])
+        }).catch((errorInfo) => {
+            console.log(errorInfo, 'error');
+        })
+        // 
+    }
+    const cancel = () => {
+        getFormInfo(false)
+        form.resetFields()
+        setFileList([])
+
+    }
+    const { Dragger } = Upload;
+    // const preView = (e) => {
+    //      window.open('http://local.gunshiiot.com:18083/xintankou/api/file/preview/104')
+    // }
+    const deleteFile = (e) => {
+        let arr = fileList.filter(item => item.id !== e)
+        setFileList(arr)
+    }
+    const props = {
+        name: 'file',
+        multiple: true,
+        fileList: fileList,
+        showUploadList: false,
+        beforeUpload: (file, fileList) => { 
+            if (fileType == "pic" &&
+                (file.type != "image/jpeg" || file.type != "image/png" || file.type != "image/jpg")) {
+                message.error('仅支持上传jpg/png/jpeg格式的图片');
+                return false;
+            } else {
+                return true;
+            }
+        },
+        onChange(e) {
+            setFileLisUp([...fileListUp, e.file])
+            httpPostFile(apiUrl.service.uploadFile.uploadUrl + "?group=" + typeUpload, e).then(res => {
+                setFileList([...fileList, res.data])
+            })
+        }
+    };
+    const onChange = () => { }
+    function checkMediaType(url) {
+        // 创建URL对象
+        var link = url;
+        // 获取路径的最后一个点之后的内容作为文件扩展名
+        var extension = link.split('.').pop().toLowerCase();
+
+        // 声明支持的图片和视频文件扩展名
+        var imageExtensions = ['jpg', 'jpeg', 'gif', 'png'];
+        var file = ['pdf', 'word', 'xslx', 'xsl', 'txt',"pptx"];
+
+        // 判断文件扩展名是否在图片扩展名数组中
+        if (imageExtensions.includes(extension)) {
+            return 'image';
+        }
+
+        // 判断文件扩展名是否在视频扩展名数组中
+        if (file.includes(extension)) {
+            return extension;
+        }
+
+        // 扩展名不在图片或视频数组中，返回null表示无法确定媒体类型
+        return null;
+    }
+    const preView = (item) => {
+        if (checkMediaType(item.name) == 'pdf') {
+            // window.open(baseUrl + item.previewUrl)
+            setUrl(`${`http://local.gunshiiot.com:18083/xintankou`}/static/pdf/web/viewer.html?file=${encodeURIComponent(`http://local.gunshiiot.com:18083/gunshiApp/xintankou/${item.previewUrl}`)}`)
+            setIsModal(true)
+        }
+
+    }
+
+      /**
+   * @description 文件下载
+   * @param {String} params 文件fileId
+   */
+  const download = (id,name) => {
+    let downloadLink = document.createElement("a");
+        downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xintankou/api/file/download/${id}`;
+        downloadLink.download = `${name}`;
+        downloadLink.style.display = "none";
+        // 将链接添加到页面中
+        document.body.appendChild(downloadLink);
+
+        // 模拟点击事件，开始下载
+        downloadLink.click();
+  }
+    
+    useEffect(() => {
+        form.resetFields()
+        let formType = type
+        if(type='edit'){
+            formType=2
+        }
+        if(type == 'view'){
+            formType =1
+        }
+        if(type=='save'){
+            formType =0
+        }
+        if (formType == 1 || formType == 2 || formType == 3) {
+            form.setFieldsValue(formJsonData)
+            if (formJsonData?.files) {
+                setFileList(formJsonData.files)
+            }
+
+        }
+        return () => {
+            setFileList([])
+        }
+
+    }, [type, formJsonData, isModalOpen])
+    
+
+
+    return (
+        <div style={{ backgroundColor: '#fff' }}>
+            <Form form={form} name="searchTabel" onFinish={onFinish} className={typeName}>
+                <Row>
+                    {formJson.map(item => {
+                        return (
+                            <Col span={item.span} >
+                                <Form.Item
+                                    label={item.label}
+                                    name={item.key}
+                                    rules={[{ required: item.required, message: '请输入' + item.label }]}
+                                    className={item.type == 'empty'?'empty':'noempty'}
+                                >
+                                    {item.type == "input" && <Input disabled={type == 1 || item.disabled} placeholder={item.placeholder} />}
+                                    {item.type == "Select" && <Select disabled={type == 1} options={item.options} />}
+                                    {item.type == "empty" && <Input disabled={item.type == "empty" ? true : false} />}
+                                    {item.type == "Switch" && <Switch defaultChecked onChange={onChange} disabled={type == 1} />}
+                                    {item.type == "DatePicker" && <DatePicker disabled={type == 1} style={{width:"100%"}} />}
+                                    {item.type == "TextArea" && <TextArea rows={4} disabled={type == 1} />}
+                                    {item.type == "Radio" &&<Radio.Group options={item.options} />}
+                                    {item.type == "RangePicker" &&                     
+                                    <RangePicker disabled={type=='view'} />}
+                                    {item.type == "upload" &&
+                                        <>
+                                            {type !== 1 && <Dragger {...props}>
+                                                <p className="ant-upload-drag-icon">
+                                                    <InboxOutlined />
+                                                </p>
+                                            
+                                            {fileType == "pic" ? <p className="ant-upload-text">点击或将文件拖拽到这里上传 支持扩展名：jpeg、png</p>: <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>}
+                                          
+                                            </Dragger>}
+                                            <div>
+                                                {fileList?.map((item) => {
+                                                    return <div className='flex align-center' style={{ minHeight: "50px", fontSize: 14,columnGap:10, cursor: checkMediaType(item.name) == 'image' || checkMediaType(item.name) == 'pdf'?'pointer':"not-allowed" }}>
+                                                        <div style={{width:40,height:40,display:"flex",alignItems:'center'}}>
+                                                        {checkMediaType(item.name) == 'image' && <Image
+                                                            height={40}
+                                                            src={baseUrl + item.previewUrl}
+                                                        />}
+                                                        {
+                                                            checkMediaType(item.name) !== 'image' && 
+                                                            <span  >{checkMediaType(item.name)?.toUpperCase()}</span>
+                                                        }
+                                                        </div>
+                                                        
+                                                        <span onClick={() => preView(item)}>{item.name}</span>
+                                                        {type==2&&<DeleteOutlined onClick={() => deleteFile(item.id)} />}
+                                                        <VerticalAlignBottomOutlined onClick={() => download(item.id,item.name)} />
+                                                    </div>
+                                                })}
+                                            </div>
+                                        </>}
+                                </Form.Item>
+                            </Col>
+                        )
+                    })}
+                </Row>
+            </Form >
+            {type !== 1 &&<div className="flex flex-end" style={{ marginTop: 10 }}>
+                <Button type="" style={{ marginRight: 10 }} onClick={cancel}>取消</Button>
+                <Button type="primary" onClick={getInfo}>确定</Button>
+            </div>}
+            <PdfView url={url} isModal={isModal} setModalN={(e)=>setIsModal(e)}/>
+         
+
+        </div>
+    );
+}
+
+
+export default FormZdy;

src/views/sz/szzf/form/pdfView.js

@@ -0,0 +1,46 @@
+import React, { Component, useEffect, useState } from 'react';
+import { Document, Page, pdfjs } from 'react-pdf';
+import { Modal } from 'antd';
+
+const Pdf = ({ url,isModal,setModalN }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleOk = () => {
+    setIsModalOpen(false);
+    setModalN(false)
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+    setModalN(false)
+  };
+  useEffect(()=>{
+    setIsModalOpen(isModal)
+  },[isModal])
+  return (
+    <div>
+      <Modal
+        title={<div style={{ backgroundColor: '#259dff', padding: 10, color: "#fff" }}>pdf</div>}
+        open={isModalOpen}
+        width={1000}
+        onOk={handleOk}
+        footer={false}
+        onCancel={handleCancel}
+        destroyOnClose>
+        <div style={{ padding: "0 10px" }}>
+          <iframe
+            style={{
+              height: '80vh',
+              width: '100%',
+              border: 0,
+              marginTop: 20,
+            }}
+            src={url}
+          />
+        </div>
+
+      </Modal>
+    </div>
+  );
+}
+export default Pdf