Browse Source

前端展示

master
wenlele 1 year ago
parent
commit
4412714f49
  1. 7
      web/client/src/sections/dataQuality/components/groupModal.js
  2. 20
      web/client/src/sections/dataQuality/containers/documentLibrary.js
  3. 188
      web/client/src/sections/safetySpecification/containers/specificationLibrary.js
  4. 2
      web/client/src/sections/safetySpecification/index.js

7
web/client/src/sections/dataQuality/components/groupModal.js

@ -9,10 +9,6 @@ import { Tabs, Form, Input, DatePicker, Button, Modal, Radio } from 'antd';
function GroupModal ({ loading, parent, user, actions, dispatch, close, success, }) {
const { dataQuality } = actions
const [tabsKey, setTabsKey] = useState("stay")
const [query, setQuery] = useState({ page: 0, limit: 10 });
const [proTableList, setProTableList] = useState({ rows: [], count: 0 });
const [approve, setApprove] = useState()
const [form] = Form.useForm();
useEffect(() => {
@ -22,13 +18,10 @@ function GroupModal ({ loading, parent, user, actions, dispatch, close, success,
return <>
<Modal title="新建分组" open={true}
onOk={e => {
form.validateFields().then(v => {
console.log(v);
dispatch(dataQuality.postStandardDocFolders({
...v,
parent: parent || null,

20
web/client/src/sections/dataQuality/containers/documentLibrary.js

@ -36,7 +36,7 @@ function Approve ({ loading, clientHeight, actions, dispatch, }) {
let resourceData = async (parent, keyword) => {
dispatch(dataQuality.getStandardDocFolders({ parent: parent })).then(res => {
dispatch(dataQuality.getStandardDocFolders({ parent: parent, keyword: keyword })).then(res => {
if (res.success) {
setFolderData(res.payload.data)
}
@ -49,24 +49,6 @@ function Approve ({ loading, clientHeight, actions, dispatch, }) {
})
}
let clickEvent = (id, folderId) => {
let myDiv = document.getElementById(id);
let clicks = 0;
// 单击事件
myDiv.addEventListener("click", function () {
clicks++;
setTimeout(function () {
if (clicks === 1) {
console.log("单击");
} else if (clicks === 2) {
console.log("双击");
}
clicks = 0;
}, 300);
});
}
return <>

188
web/client/src/sections/safetySpecification/containers/specificationLibrary.js

@ -0,0 +1,188 @@
import React, { useEffect, useState, useRef } from 'react'
import { connect } from 'react-redux';
import moment from 'moment';
import { RouteRequest } from '@peace/utils';
import { RouteTable } from '$utils'
import SimpleBar from 'simplebar-react';
import FileModal from '../components/fileModal';
import { Tabs, Form, Input, Space, Button, Table, Checkbox, message, Pagination } from 'antd';
const { Search } = Input;
import { CreditCardFilled, FilePdfOutlined } from '@ant-design/icons';
import { agent } from 'superagent';
const CheckboxGroup = Checkbox.Group;
function SpecificationLibrary ({ loading, clientHeight, actions, dispatch, }) {
const { resourceRetrieval } = actions
const [checkAll, setCheckAll] = useState(false)
const [query, setQuery] = useState({ page: 0, limit: 20 });
const [fileData, setFileData] = useState({ data: [], count: 0 })
const [fileModal, setFileModal] = useState(false)
const [keyword, setKeywords] = useState()
const [fileIds, setFileIds] = useState([])
const fileId = useRef([])
useEffect(() => {
resourceData()
}, [])
let resourceData = (data) => {
let params = data || query
dispatch(resourceRetrieval.getSpecifications({ keyword: keyword, ...params, })).then(res => {
if (res.success) {
setFileData({ data: res.payload.data?.rows, count: res.payload.data?.count })
}
})
}
return <>
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
<Space size={'small'}>
<Button onClick={() => {
if (!checkAll) {
let fileAll = fileData?.data?.map(s => s.id)
fileId.current = fileAll
setFileIds(fileAll)
} else {
fileId.current = []
setFileIds([])
}
setCheckAll(!checkAll)
}}>{checkAll ? "取消全选" : "全选"}</Button>
<Button type="primary" onClick={() => {
setFileModal(true)
}}>上传</Button>
<Button type="primary">下载</Button>
<Button type="primary" onClick={() => {
if (fileId.current?.length) {
dispatch(resourceRetrieval.delSpecifications(fileId.current)).then(res => {
if (res.success) {
let url = []
fileData?.data?.map(f => {
if (fileId.current?.includes(f.id)) {
url.push(f.path)
}
})
url.map(d => {
RouteRequest.delete(RouteTable.cleanUpUploadTrash, { url: d });
})
resourceData({ page: 0, limit: 20 })
fileId.current = []
setFileIds([])
setFileIds(false)
setCheckAll(false)
}
})
} else {
message.warning({
duration: 1,
content: '未选择文件',
});
}
}}>删除</Button>
</Space>
<Search
placeholder="文件名称关键字"
value={keyword}
onChange={e => {
setKeywords(e?.target?.value)
}}
onSearch={(value, event) => {
setKeywords(value)
resourceData({ page: 0, limit: 20, keyword: value })
}}
style={{
width: 266,
}}
/>
</div >
<SimpleBar
style={{
// 容器高度
maxHeight: clientHeight - 130,
}}
// 允许的滚动方向
forceVisible="y"
>
{
fileData?.data?.map((v, i) => {
return <div style={{ width: 310, display: 'inline-block', margin:'0 18px 10px 0', }}>
<div style={{ display: 'flex', padding: '10px 0', border: `1px solid ${fileId.current?.includes(v.id) ? 'rgb(42 207 98)' : '#fff'}` }} onClick={() => {
if (fileId.current?.includes(v.id)) {
fileId.current = fileId.current?.filter(c => c != v.id)
setFileIds(fileId.current?.filter(c => c != v.id))
} else {
fileId.current = [...fileId.current, v.id]
setFileIds([...fileId.current, v.id])
}
}}>
<FilePdfOutlined style={{ fontSize: 96, color: 'rgb(33 211 180)', marginRight: 8 }} />
<div style={{ width: 200, display: 'flex', flexDirection: 'column', justifyContent: 'space-evenly' }}>
<div style={{
width: 100, whiteSpace: 'nowrap', overflow: 'hidden', fontWeight: 400,
textOverflow: 'ellipsis', fontSize: 18, color: 'rgb(51 161 34)'
}}>
{v.fileName}
</div>
<div>标签{v.tags || '--'}</div>
<div>创建时间{v.createAt && moment(v.createAt).format('YYYY-MM-DD HH:mm:ss') || '--'}</div>
</div>
</div>
</div>
})
}
{fileData?.count > 20 && <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Pagination
total={fileData?.count || 0}
showSizeChanger
showQuickJumper
current={query?.page + 1 || 1}
pageSizeOptions={[20, 30, 50]}
showTotal={(total) => `${total} 个文件`}
onChange={(page, pageSize) => {
console.log({ page: page - 1, limit: pageSize, });
setQuery({ page: page - 1, limit: pageSize, })
resourceData({ page: page - 1, limit: pageSize, keyword: keyword })
}}
/>
</div>}
</SimpleBar>
{
fileModal ?
<FileModal
close={() => {
setFileModal(false);
}}
success={() => {
resourceData({ page: 0, limit: 20, keyword: keyword })
}}
remove={url => {
RouteRequest.delete(RouteTable.cleanUpUploadTrash, { url: url });
}}
/> : ""
}
</>
}
function mapStateToProps (state) {
const { global, auth, resourceCatalog } = state;
return {
user: auth.user,
actions: global.actions,
clientHeight: global.clientHeight,
// resourceCatalog: resourceCatalog?.data || [],
// isRequesting: resourceCatalog.isRequesting
};
}
export default connect(mapStateToProps)(SpecificationLibrary)

2
web/client/src/sections/safetySpecification/index.js

@ -6,7 +6,7 @@ import actions from './actions';
import { getNavItem } from './nav-item';
export default {
key: 'resourceRetrieval',
key: 'safetySpecification',
name: '数据安全规范',
reducers: reducers,
routes: routes,

Loading…
Cancel
Save