页面搭建
xielei
parent
155aca0416
commit
bd868c929f
|
|
@ -897,7 +897,148 @@ const apiurl = {
|
|||
weatherasin: service_fxdd + '/weather/basin', // 24小时流域统计
|
||||
weatherArea: service_fxdd + '/weather/area', // 24小时区域统计
|
||||
short: service_fxdd + '/weather/short/level ' // 短临预报量级统计
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
//檀树岗
|
||||
// 全要素
|
||||
dataResourcesCenter: {
|
||||
projectAndWater: {
|
||||
shuikuBasicinfo: {
|
||||
detail: service_fxdd + "/attResBase/list",
|
||||
update: service_fxdd + "/attResBase/update",
|
||||
getFile:service_fxdd + "/attResBase/file/get"
|
||||
},
|
||||
kr: {
|
||||
list: service_fxdd + "/stZvarlB/list",
|
||||
save: service_fxdd + "/stZvarlB/insert",
|
||||
update: service_fxdd + "/stZvarlB/update",
|
||||
delete: service_fxdd + "/stZvarlB/del"
|
||||
},
|
||||
xl: {
|
||||
list: service_fxdd + "/stZqrlB/list",
|
||||
save: service_fxdd + "/stZqrlB/insert",
|
||||
update: service_fxdd + "/stZqrlB/update",
|
||||
delete: service_fxdd + "/stZqrlB/del"
|
||||
},
|
||||
mangerUnit: {
|
||||
list: service_fxdd + "/resMangUnit/list",
|
||||
update:service_fxdd + "/resMangUnit/update"
|
||||
},
|
||||
zrtx: {
|
||||
list: service_fxdd + "/resSafePersonB/list",
|
||||
save: service_fxdd + "/resSafePersonB/insert",
|
||||
update: service_fxdd + "/resSafePersonB/update",
|
||||
delete:service_fxdd + "/resSafePersonB/del"
|
||||
},
|
||||
monthLl: {
|
||||
page: service_fxdd + "/resMonthEcoFlow/list",
|
||||
update:service_fxdd + "/resMonthEcoFlow/updates"
|
||||
},
|
||||
fxya: {
|
||||
page: service_fxdd + "/resPlanB/list",
|
||||
update: service_fxdd + "/resPlanB/update",
|
||||
save: service_fxdd + "/resPlanB/insert",
|
||||
delete:service_fxdd + "/resPlanB/del",
|
||||
getFile:service_fxdd + "/resPlanB/file/get"
|
||||
},
|
||||
sjtz: {
|
||||
list: service_fxdd + "/attResBase/fileList",
|
||||
upload: service_fxdd + "/attResBase/updateFile",
|
||||
delete: service_fxdd + "/attResBase/del",
|
||||
},
|
||||
projectPic: {
|
||||
list: service_fxdd + "/resProjectImg/list",
|
||||
save: service_fxdd + "/resProjectImg/insert",
|
||||
delete:service_fxdd + "/resProjectImg/del"
|
||||
},
|
||||
yhd: {
|
||||
page: service_fxdd + '/attSpillwayBase/page',
|
||||
save:service_fxdd + '/attSpillwayBase/insert',
|
||||
update: service_fxdd + '/attSpillwayBase/update',
|
||||
delete:service_fxdd + "/attSpillwayBase/del"
|
||||
},
|
||||
db: {
|
||||
page: service_fxdd + '/attDamBase/page',
|
||||
save:service_fxdd + '/attDamBase/insert',
|
||||
update: service_fxdd + '/attDamBase/update',
|
||||
delete: service_fxdd + "/attDamBase/del",
|
||||
getFile:service_fxdd + "/attDamBase/get"
|
||||
},
|
||||
zf: {
|
||||
page: service_fxdd + '/attGateValve/page',
|
||||
save:service_fxdd + '/attGateValve/insert',
|
||||
update: service_fxdd + '/attGateValve/update',
|
||||
delete: service_fxdd + "/attGateValve/del",
|
||||
getFile:service_fxdd + "/attGateValve/get"
|
||||
|
||||
},
|
||||
lsy: {
|
||||
page: service_fxdd + '/attMeaWeir/page',
|
||||
save:service_fxdd + '/attMeaWeir/insert',
|
||||
update: service_fxdd + '/attMeaWeir/update',
|
||||
delete: service_fxdd + "/attMeaWeir/del",
|
||||
list:service_fxdd+"/stAddvcdD/tree"
|
||||
}
|
||||
},
|
||||
basicData: {
|
||||
jczd: {
|
||||
page: service_fxdd + "/stStbprpB/page",
|
||||
save: service_fxdd + "/stStbprpB/insert",
|
||||
update: service_fxdd + "/stStbprpB/update",
|
||||
delete: service_fxdd + "/stStbprpB/del"
|
||||
},
|
||||
dmgl: {
|
||||
page: service_fxdd + "/attDamProfile/page",
|
||||
update: service_fxdd + "/attDamProfile/update",
|
||||
save: service_fxdd + "/attDamProfile/insert",
|
||||
delete: service_fxdd + "/attDamProfile/del",
|
||||
getFile: service_fxdd + "/attDamProfile/file/get"
|
||||
},
|
||||
sysbgl: {
|
||||
page: service_fxdd + "/osmoticPressDevice/page",
|
||||
update: service_fxdd + "/osmoticPressDevice/update",
|
||||
save: service_fxdd + "/osmoticPressDevice/insert",
|
||||
delete: service_fxdd + "/osmoticPressDevice/del",
|
||||
list:service_fxdd + "/osmoticPressDevice/list"
|
||||
},
|
||||
slsbgl: {
|
||||
page: service_fxdd + "/osmoticFlowDevice/page",
|
||||
update: service_fxdd + "/osmoticFlowDevice/update",
|
||||
save: service_fxdd + "/osmoticFlowDevice/insert",
|
||||
delete: service_fxdd + "/osmoticFlowDevice/del",
|
||||
list:service_fxdd + "/osmoticFlowDevice/list"
|
||||
},
|
||||
sjzd: {
|
||||
page: service_fxdd + "/sysDictB/page",
|
||||
update: service_fxdd + "/sysDictB/update",
|
||||
save: service_fxdd + "/sysDictB/insert",
|
||||
delete: service_fxdd + "/sysDictB/del",
|
||||
},
|
||||
spjbxx: {
|
||||
page: service_fxdd + "/attCctvBase/page",
|
||||
update: service_fxdd + "/attCctvBase/update",
|
||||
save: service_fxdd + "/attCctvBase/insert",
|
||||
delete: service_fxdd + "/attCctvBase/del",
|
||||
tree: service_fxdd + "/cctvBMenu/tree",
|
||||
saveTree: service_fxdd + "/cctvBMenu/insert",
|
||||
editTree: service_fxdd + "/cctvBMenu/update",
|
||||
deleteTree: service_fxdd + "/cctvBMenu/del"
|
||||
}
|
||||
},
|
||||
dygxb: {
|
||||
zfysxt: {
|
||||
page: service_fxdd + "/gateValveCctvRel/page",
|
||||
save: service_fxdd + "/gateValveCctvRel/insert",
|
||||
update: service_fxdd + "/gateValveCctvRel/update",
|
||||
delete: service_fxdd + "/gateValveCctvRel/del",
|
||||
zflist: service_fxdd + "/attGateValve/list",
|
||||
splist:service_fxdd + "/attCctvBase/list"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
export default apiurl
|
||||
|
|
|
|||
|
|
@ -45,7 +45,9 @@ export default function ProjectBasciInfo() {
|
|||
|
||||
const getData = async () => {
|
||||
try {
|
||||
|
||||
const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.shuikuBasicinfo.detail)
|
||||
// debugger;
|
||||
if (res.code == 200) {
|
||||
form.setFieldsValue(res.data[0])
|
||||
setData(res.data[0])
|
||||
|
|
|
|||
|
|
@ -4,8 +4,25 @@ import { useForm } from 'antd/lib/form/Form';
|
|||
import { useState } from 'react';
|
||||
const { Dragger } = Upload;
|
||||
|
||||
const list = [
|
||||
{
|
||||
type:'立案'
|
||||
},
|
||||
{
|
||||
type:'调查取证'
|
||||
},
|
||||
{
|
||||
type:'审查处理'
|
||||
},
|
||||
{
|
||||
type:'送达执行'
|
||||
},
|
||||
{
|
||||
type:'结案'
|
||||
}
|
||||
]
|
||||
const Page = () => {
|
||||
const form =useForm()
|
||||
const [form] = Form.useForm();
|
||||
const [fileList ,setFileList] =useState()
|
||||
const props = {
|
||||
name: 'file',
|
||||
|
|
@ -31,10 +48,14 @@ const Page = () => {
|
|||
|
||||
}
|
||||
return (
|
||||
<Form form={form} name="searchTabel" onFinish={onFinish} >
|
||||
<Form form={form} onFinish={onFinish} >
|
||||
<Row>
|
||||
<div>案卷存档</div>
|
||||
<Col>
|
||||
<Col span={2}>
|
||||
<div style={{display:'flex',alignItems:'center'}}>
|
||||
<div style={{width:3,height:12,background:'blue',marginRight:5}}></div>
|
||||
案卷存档</div>
|
||||
</Col>
|
||||
<Col span={10}>
|
||||
<Form.Item
|
||||
label='保管人员'
|
||||
name='name'
|
||||
|
|
@ -42,7 +63,7 @@ const Page = () => {
|
|||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col>
|
||||
<Col span={10}>
|
||||
<Form.Item
|
||||
label='保管地点'
|
||||
name='adress'
|
||||
|
|
@ -51,9 +72,14 @@ const Page = () => {
|
|||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<div>案卷存档</div>
|
||||
<Col>
|
||||
{list.map(item=>(
|
||||
<Row>
|
||||
<Col span={2}>
|
||||
<div style={{display:'flex',alignItems:'center'}}>
|
||||
<div style={{width:3,height:12,background:'blue',marginRight:5}}></div>
|
||||
{item.type}</div>
|
||||
</Col>
|
||||
<Col span={22}>
|
||||
<Form.Item
|
||||
label='附件'
|
||||
name='name'
|
||||
|
|
@ -66,7 +92,7 @@ const Page = () => {
|
|||
</Dragger>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Row>))}
|
||||
</Form >
|
||||
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { Tabs } from 'antd';
|
|||
import BascForm from '../form/index'
|
||||
import { basicData,clqkData,xzfy} from './config'
|
||||
import Bajz from './bajz'
|
||||
import Lsyx from './lsyx'
|
||||
const items = [
|
||||
{
|
||||
key: '1',
|
||||
|
|
@ -40,8 +41,8 @@ const Page = () => {
|
|||
{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>} */}
|
||||
{key==4&& <Bajz ></Bajz>}
|
||||
{key==5&& <Lsyx ></Lsyx>}
|
||||
</>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,305 +0,0 @@
|
|||
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;
|
||||
|
|
@ -109,7 +109,7 @@ const Page = () => {
|
|||
/>
|
||||
</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 )" }} />
|
||||
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width, y: "calc( 100vh - 400px )" }} dataSource={[{name:1}]}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
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 list = [
|
||||
{
|
||||
type:'整改前'
|
||||
},
|
||||
{
|
||||
type:'整改后'
|
||||
}
|
||||
]
|
||||
const Page = () => {
|
||||
const [form] = 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} onFinish={onFinish} >
|
||||
{list.map(item=>(
|
||||
<Row>
|
||||
<Col span={2}>
|
||||
<div style={{display:'flex',alignItems:'center'}}>
|
||||
<div style={{width:3,height:12,background:'blue',marginRight:5}}></div>
|
||||
{item.type}</div>
|
||||
</Col>
|
||||
<Col span={22}>
|
||||
<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
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
import dayjs from 'dayjs';
|
||||
import { Space, Table, Tag, DatePicker, Form, Select, Button, Card } from 'antd';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import { useEffect, useState,useMemo } from 'react';
|
||||
|
||||
const Page = ({title}) => {
|
||||
const [echart2, setEchart2] = useState(Object())
|
||||
const [inspectordata, setInspectorData] = useState([{}])
|
||||
const [plandata, setPlanData] = useState(Object())
|
||||
const [problemdata, setProblemData] = useState(Object())
|
||||
const getPlanOption = useMemo((name, data) => {
|
||||
// let total = 0
|
||||
// for (let i = 0; i < data.length; i++) {
|
||||
// total = total + Number(data[i].value)
|
||||
// }
|
||||
return {
|
||||
title: {},
|
||||
tooltip: {},
|
||||
// legend: {
|
||||
// data: name
|
||||
// },
|
||||
graphic: {
|
||||
type: 'text',
|
||||
top: 'center',
|
||||
left: 'center',
|
||||
style: {
|
||||
text: `总计\n${0}`,
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
// textAlign: 'center'
|
||||
}
|
||||
},
|
||||
series: {
|
||||
name: '圆环图系列名称',
|
||||
type: 'pie',
|
||||
// center: ['50%', '50%'],
|
||||
// radius: ['35%', '50%'],
|
||||
hoverAnimation: true,
|
||||
data: plandata,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: '{c}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},[plandata])
|
||||
console.log(getPlanOption);
|
||||
|
||||
const onOk = (event, index) => {
|
||||
if (event !== null) {
|
||||
let params = {
|
||||
stm: dayjs(new Date(event[0])).format('YYYY-MM-DD'),
|
||||
etm: dayjs(new Date(event[1])).format('YYYY-MM-DD'),
|
||||
}
|
||||
// getStm(params, index)
|
||||
}
|
||||
}
|
||||
useEffect(()=>{
|
||||
let data = [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
]
|
||||
setPlanData(data)
|
||||
})
|
||||
return (
|
||||
<>
|
||||
<div className='top' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
|
||||
<div style={{ fontSize: 20, fontWeight: 'bold' }}>{title}</div>
|
||||
<DatePicker.RangePicker
|
||||
style={{ width: 220, }}
|
||||
onChange={(e, index) => onOk(e, 2)}
|
||||
defaultValue={[dayjs().startOf("year"), dayjs()]}
|
||||
></DatePicker.RangePicker>
|
||||
</div>
|
||||
<ReactECharts
|
||||
ref={(e) => setEchart2(e)}
|
||||
option={getPlanOption}
|
||||
style={{ height: 350 }}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Page
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
import dayjs from 'dayjs';
|
||||
import { Space, Table, Tag, DatePicker, Form, Select, Button, Card } from 'antd';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import { useEffect, useState,useMemo } from 'react';
|
||||
|
||||
const Page = ({title}) => {
|
||||
const [echart2, setEchart2] = useState(Object())
|
||||
const [inspectordata, setInspectorData] = useState([{}])
|
||||
const [plandata, setPlanData] = useState(Object())
|
||||
const [problemdata, setProblemData] = useState(Object())
|
||||
const getPlanOption = useMemo((name, data) => {
|
||||
// let total = 0
|
||||
// for (let i = 0; i < data.length; i++) {
|
||||
// total = total + Number(data[i].value)
|
||||
// }
|
||||
return {
|
||||
title: {},
|
||||
tooltip: {},
|
||||
// legend: {
|
||||
// data: name
|
||||
// },
|
||||
graphic: {
|
||||
type: 'text',
|
||||
top: 'center',
|
||||
left: 'center',
|
||||
style: {
|
||||
text: `总计\n${0}`,
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
// textAlign: 'center'
|
||||
}
|
||||
},
|
||||
series: {
|
||||
name: '圆环图系列名称',
|
||||
type: 'pie',
|
||||
center: ['50%', '50%'],
|
||||
radius: ['60%', '80%'],
|
||||
hoverAnimation: true,
|
||||
data: plandata,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: '{c}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},[plandata])
|
||||
console.log(getPlanOption);
|
||||
|
||||
const onOk = (event, index) => {
|
||||
if (event !== null) {
|
||||
let params = {
|
||||
stm: dayjs(new Date(event[0])).format('YYYY-MM-DD'),
|
||||
etm: dayjs(new Date(event[1])).format('YYYY-MM-DD'),
|
||||
}
|
||||
// getStm(params, index)
|
||||
}
|
||||
}
|
||||
useEffect(()=>{
|
||||
let data = [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
]
|
||||
setPlanData(data)
|
||||
})
|
||||
return (
|
||||
<>
|
||||
<div className='top' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
|
||||
<div style={{ fontSize: 20, fontWeight: 'bold' }}>{title}</div>
|
||||
<DatePicker.RangePicker
|
||||
style={{ width: 220, }}
|
||||
onChange={(e, index) => onOk(e, 2)}
|
||||
defaultValue={[dayjs().startOf("year"), dayjs()]}
|
||||
></DatePicker.RangePicker>
|
||||
</div>
|
||||
<ReactECharts
|
||||
ref={(e) => setEchart2(e)}
|
||||
option={getPlanOption}
|
||||
style={{ height: 350 }}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Page
|
||||
|
|
@ -1,307 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,150 +1,28 @@
|
|||
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';
|
||||
import Charts from './bincharts'
|
||||
import BarCharts from './barCharts'
|
||||
import LineCharts from './lincharts'
|
||||
|
||||
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 style={{ display: 'flex',height:'50%'}}>
|
||||
<div style={{width:'33%',backgroundColor:'#ffffff',margin:5,padding:10}}>
|
||||
<Charts />
|
||||
</div>
|
||||
<div style={{width:'33%',backgroundColor:'#ffffff',margin:5,padding:10}}>
|
||||
<Charts />
|
||||
</div>
|
||||
<div style={{width:'33%',backgroundColor:'#ffffff',margin:5,padding:10}}>
|
||||
<BarCharts />
|
||||
</div>
|
||||
|
||||
<BasicCrudModal
|
||||
width={1000}
|
||||
ref={refModal}
|
||||
title=""
|
||||
component={ModalForm}
|
||||
onCrudSuccess={successCallback}
|
||||
// onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{backgroundColor:'#ffffff',padding:10,height:'50%'}}>
|
||||
<LineCharts />
|
||||
</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;
|
||||
export default Page
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import dayjs from 'dayjs';
|
||||
import { Space, Table, Tag, DatePicker, Form, Select, Button, Card } from 'antd';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
import { encode } from 'punycode';
|
||||
|
||||
const Page = ({ title }) => {
|
||||
const [echart2, setEchart2] = useState(Object())
|
||||
const [inspectordata, setInspectorData] = useState([{}])
|
||||
const [plandata, setPlanData] = useState([])
|
||||
const [problemdata, setProblemData] = useState(Object())
|
||||
const getPlanOption = useMemo((name, data) => {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
position: ['20%', '50%'],
|
||||
|
||||
},
|
||||
legend: {
|
||||
data: ['运行调度指令'],
|
||||
},
|
||||
|
||||
dataset: [
|
||||
{ source: plandata },
|
||||
]
|
||||
,
|
||||
xAxis:
|
||||
{
|
||||
type: 'category',
|
||||
}
|
||||
,
|
||||
yAxis: [
|
||||
{
|
||||
name: 'mm',
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '2量',
|
||||
type: 'line',
|
||||
datasetIndex: 0,
|
||||
encode: {
|
||||
x: 'name',
|
||||
y: 'value'
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'skyblue'
|
||||
}
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
}, [plandata])
|
||||
|
||||
const onOk = (event, index) => {
|
||||
if (event !== null) {
|
||||
let params = {
|
||||
stm: dayjs(new Date(event[0])).format('YYYY-MM-DD'),
|
||||
etm: dayjs(new Date(event[1])).format('YYYY-MM-DD'),
|
||||
}
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
let data = [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
]
|
||||
setPlanData(data)
|
||||
})
|
||||
return (
|
||||
<>
|
||||
<div className='top' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
|
||||
<div style={{ fontSize: 20, fontWeight: 'bold' }}>{title}</div>
|
||||
<DatePicker.RangePicker
|
||||
style={{ width: 220, }}
|
||||
onChange={(e, index) => onOk(e, 2)}
|
||||
defaultValue={[dayjs().startOf("year"), dayjs()]}
|
||||
></DatePicker.RangePicker>
|
||||
</div>
|
||||
<ReactECharts
|
||||
ref={(e) => setEchart2(e)}
|
||||
option={getPlanOption}
|
||||
style={{ height: 350 }}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Page
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
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;
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import styles from './content.module.less'
|
||||
import { Button } from 'antd'
|
||||
import ModalForm from './form';
|
||||
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
|
||||
import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
|
||||
const Page = ({ data }) => {
|
||||
const refModal = useRef();
|
||||
|
||||
/**
|
||||
* @description 处理成功的回调
|
||||
*/
|
||||
const successCallback = () => {
|
||||
// refresh()
|
||||
// setIsFetch(!isFetch)
|
||||
}
|
||||
const dataPahe = {
|
||||
title: '侵占、毁坏水工程及堤防、护岸等有关设施',
|
||||
zhunag: '1'
|
||||
}
|
||||
const edit = () => {
|
||||
refModal.current.showEdit({});
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div className={styles.list} style={{ padding: '0 10px', marginBottom: 5 }}>{dataPahe.title}<Button type="primary" onClick={edit}>编辑</Button></div>
|
||||
|
||||
<div className={styles.listborder} style={{ padding: '0 10px', }}>{dataPahe.title}</div>
|
||||
<div className={styles.listborder} style={{ padding: '0 10px', marginBottom: 5 }}>{dataPahe.title}</div>
|
||||
<div className={styles.contentBor} style={{ padding: '0 10px', marginBottom: 5, height: '35%' }}>
|
||||
<div className={styles.listborder} style={{ padding: '0 10px', height: '30%' }}>{dataPahe.title}</div>
|
||||
{dataPahe.title ?? '无内容请添加'}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', height: '33%' }}>
|
||||
<div className={styles.contentBor} style={{ flex: 1, marginRight: 5 }}>
|
||||
<div className={styles.listborder} style={{ height: '30%', padding: '0 10px', }}>{dataPahe.title}</div>
|
||||
<div style={{ padding: '0 10px' }}>{dataPahe.title ?? '无内容请添加'}</div>
|
||||
</div>
|
||||
<div className={styles.contentBor} style={{ flex: 1 }}>
|
||||
<div className={styles.listborder} style={{ height: '30%', padding: '0 10px', }}>{dataPahe.title}</div>
|
||||
<div style={{ padding: '0 10px' }}>{dataPahe.title ?? '无内容请添加'}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<BasicCrudModal
|
||||
width={800}
|
||||
ref={refModal}
|
||||
title=""
|
||||
component={ModalForm}
|
||||
onCrudSuccess={successCallback}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Page
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
.list{
|
||||
height: 10%;
|
||||
// margin: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
|
||||
}
|
||||
.listborder{
|
||||
height: 10%;
|
||||
// margin: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.contentBor{
|
||||
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
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 { Space, Table, Radio, DatePicker, Form, Select, Button, message, Upload, Input, Row, Col, Switch, Image } from 'antd';
|
||||
import { DeleteOutlined, FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
|
||||
import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';
|
||||
|
||||
|
|
@ -7,72 +7,20 @@ 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 { TextArea } = Input;
|
||||
|
||||
const opntios=[
|
||||
{label:'宪法',value:'宪法'},
|
||||
{label:'法律',value:'法律'},
|
||||
{label:'行政法规',value:'行政法规'},
|
||||
{label:'督察法规',value:'督察法规'},
|
||||
{label:'司法解释',value:'司法解释'},
|
||||
{label:'地方性法规',value:'地方性法规'},
|
||||
const options=[
|
||||
{label:'禁用'},
|
||||
{label:'启用'}
|
||||
]
|
||||
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) => {
|
||||
|
|
@ -88,16 +36,6 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
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 => ({
|
||||
|
|
@ -123,150 +61,62 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
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 }}
|
||||
label="节点"
|
||||
name="name"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
{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>
|
||||
<Input disabled style={{ width: '100%' }} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="状态"
|
||||
name="name"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Radio.Group options={options}/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="法律名称"
|
||||
name="name"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input style={{ width: '100%' }} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="法条内容"
|
||||
name="name"
|
||||
>
|
||||
<Input style={{ width: '100%' }} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="违法行为描述"
|
||||
name="name"
|
||||
>
|
||||
<TextArea rows={4} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="处罚措施"
|
||||
name="name"
|
||||
>
|
||||
<TextArea rows={4} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
|
||||
{
|
||||
mode === 'view' ? null : (
|
||||
<>
|
||||
|
|
@ -279,26 +129,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
)
|
||||
}
|
||||
</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>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,136 +1,21 @@
|
|||
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';
|
||||
import { Card } from 'antd'
|
||||
import TreeSelectZdy from './treeSelectZdy'
|
||||
|
||||
import ContentPage from './content'
|
||||
|
||||
|
||||
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 style={{display:'flex',height: '100%'}}>
|
||||
<div style={{ width: 320, backgroundColor: '#fff', padding: 10 }}>
|
||||
<TreeSelectZdy />
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
<div style={{ flex:1 ,marginLeft:10}}>
|
||||
<ContentPage />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page;
|
||||
export default Page
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import React, { useState,useMemo } from 'react';
|
||||
import { Tree, Input } from 'antd';
|
||||
const { Search } = Input;
|
||||
|
||||
const treeData = [
|
||||
{
|
||||
value: 'parent 1',
|
||||
title: '违反水利工程建设与管理类行为',
|
||||
children: [
|
||||
{
|
||||
value: 'parent 1-0',
|
||||
title: '侵占、毁坏水法规定相关设施',
|
||||
children: [
|
||||
{
|
||||
value: 'leaf1',
|
||||
title: '侵占、毁坏水工程及堤防、护岸...',
|
||||
},
|
||||
{
|
||||
value: 'leaf2',
|
||||
title: '毁坏防汛、水文监测、水文地质...',
|
||||
},
|
||||
{
|
||||
value: 'leaf3',
|
||||
title: '在水工程保护范围内，从事影响..',
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'parent 1-1',
|
||||
title: '破坏大坝管理设施、妨碍大坝',
|
||||
children: [
|
||||
{
|
||||
value: 'leaf3',
|
||||
title: '毁坏大坝及其管理设施',
|
||||
},
|
||||
{
|
||||
value: 'leaf3',
|
||||
title: '危害大坝安全或破坏大坝正常运行',
|
||||
},
|
||||
{
|
||||
value: 'leaf3',
|
||||
title: '在岸区或坝体从事生产活动',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
const Page = () => {
|
||||
const [value, setValue] = useState();
|
||||
|
||||
const filterTreeNode=useMemo((treeNode)=>{
|
||||
console.log(1111111);
|
||||
|
||||
if (!value) return false;
|
||||
return treeNode?._title?.indexOf(value) > -1;
|
||||
},[value])
|
||||
const onSearch =(e)=>{
|
||||
setValue(e)
|
||||
console.log(e);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div style={{margin:'10px 0'}}><Search onSearch={onSearch}/></div>
|
||||
<Tree
|
||||
defaultExpandAll={true}
|
||||
blockNode={false}
|
||||
treeData={treeData}
|
||||
filterTreeNode={filterTreeNode}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page;
|
||||
Loading…
Reference in New Issue