|
|
@@ -1,113 +1,236 @@
|
|
|
-import { Button, DatePicker, Space, Table } from 'antd';
|
|
|
-import { useEffect, useState } from 'react';
|
|
|
+import { Button, DatePicker, Space, Table, Modal, message, Spin } from 'antd';
|
|
|
+import { ExclamationCircleOutlined } from '@ant-design/icons';
|
|
|
+import { useEffect, useMemo, useState } from 'react';
|
|
|
import WriteRecordModal from './components/WriteRecordModal';
|
|
|
import { connect } from 'dva';
|
|
|
import RecordDetailModal from './components/RecordDetail';
|
|
|
import styles from './index.less';
|
|
|
import { useRequest } from 'ahooks';
|
|
|
-import { approvalAddLog, approvalEditLog, approvalLogOwnList } from '@/services/record';
|
|
|
+import {
|
|
|
+ approvalAddLog,
|
|
|
+ approvalDeleteLog,
|
|
|
+ approvalEditLog,
|
|
|
+ approvalLogDetail,
|
|
|
+ approvalLogOwnList,
|
|
|
+} from '@/services/record';
|
|
|
+import record from './models/record';
|
|
|
+import { log } from 'lodash-decorators/utils';
|
|
|
+import moment from 'moment';
|
|
|
+
|
|
|
+const { confirm } = Modal;
|
|
|
|
|
|
const DailyRecord = props => {
|
|
|
- const { currentUser, projects, dispatch } = props;
|
|
|
- const [date, setDate] = useState('');
|
|
|
- const [visible, setVisible] = useState(false);
|
|
|
- const [detailOpen, setDetailOpen] = useState(false);
|
|
|
+ const { currentUser, projects, loading: propsLoading, dispatch } = props;
|
|
|
+
|
|
|
+ const [date, setDate] = useState({});
|
|
|
+ const [pageInfo, setPageInfo] = useState({ current: 1, pageSize: 10, total: 999 });
|
|
|
+ const [writeVisible, setWriteVisible] = useState(false);
|
|
|
+ const [detailVisible, setDetailVisible] = useState(false);
|
|
|
+ const [editMode, setEditMode] = useState(false);
|
|
|
+ const [selectedLogID, setselectedLogID] = useState('');
|
|
|
+
|
|
|
+ const [mockLogDetail, setMockLogDetail] = useState([]);
|
|
|
+
|
|
|
+ // 请求列表
|
|
|
+ const { data, run, loading: listLoading } = useRequest(approvalLogOwnList, {
|
|
|
+ defaultParams: [{ ...date, ...pageInfo }],
|
|
|
+ onSuccess: data => {
|
|
|
+ if (data?.pagination) {
|
|
|
+ setPageInfo(data.pagination);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
|
|
|
- //请求列表
|
|
|
- const { data, run, loading } = useRequest(date => approvalLogOwnList(date), {});
|
|
|
+ // 查询日志详情
|
|
|
+ const { data: logDetail, run: runDetail, loading: detailLoading } = useRequest(
|
|
|
+ logID => approvalLogDetail(logID),
|
|
|
+ {
|
|
|
+ manual: true,
|
|
|
+ }
|
|
|
+ );
|
|
|
|
|
|
- //添加日志
|
|
|
- const { run: runAdd } = useRequest(approvalAddLog, {
|
|
|
+ // 添加日志
|
|
|
+ const { run: runAdd, loading: addLoading } = useRequest(approvalAddLog, {
|
|
|
manual: true,
|
|
|
onSuccess: () => {
|
|
|
- message('添加日志成功');
|
|
|
+ message.success('添加日志成功');
|
|
|
+ setWriteVisible(false);
|
|
|
run();
|
|
|
},
|
|
|
});
|
|
|
|
|
|
- //编辑日志
|
|
|
- const { run: runEdit } = useRequest(approvalEditLog, {
|
|
|
+ // 删除日志
|
|
|
+ const { run: runDelete, loading: deleteLoading } = useRequest(logID => approvalDeleteLog(logID), {
|
|
|
manual: true,
|
|
|
onSuccess: () => {
|
|
|
- message('编辑日志成功');
|
|
|
+ message.success('删除日志成功');
|
|
|
run();
|
|
|
},
|
|
|
});
|
|
|
|
|
|
+ // 编辑日志
|
|
|
+ const { run: runEdit, loading: editLoading } = useRequest(approvalEditLog, {
|
|
|
+ manual: true,
|
|
|
+ onSuccess: () => {
|
|
|
+ message.success('编辑日志成功');
|
|
|
+ run();
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // 统一管理 加载状态
|
|
|
+ const allLoading = useMemo(() => {
|
|
|
+ const loadingList = [propsLoading, listLoading, deleteLoading, addLoading, editLoading];
|
|
|
+ if (loadingList.find(item => item)) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ }, [propsLoading, listLoading, deleteLoading, addLoading, editLoading]);
|
|
|
+
|
|
|
+ const editLog = record => {
|
|
|
+ setWriteVisible(true);
|
|
|
+ setEditMode(true);
|
|
|
+ setMockLogDetail([
|
|
|
+ {
|
|
|
+ id: 'gsdfgZ',
|
|
|
+ code_id: 12,
|
|
|
+ title: 'mock',
|
|
|
+ content: 'mock mock mock mock mock mock mock mock',
|
|
|
+ },
|
|
|
+ { id: 'bnsrqre', code_id: 13, title: 'mock', content: 'mock mock ' },
|
|
|
+ { id: 'hnsfggrqe', code_id: 14, title: 'mock', content: 'mock mock ' },
|
|
|
+ ]);
|
|
|
+ };
|
|
|
+
|
|
|
+ const toDetail = record => {
|
|
|
+ // runDetail(record.log_id);
|
|
|
+ setWriteVisible(true);
|
|
|
+ setEditMode(false);
|
|
|
+ setMockLogDetail([
|
|
|
+ { id: 'gsdfgZ', code_id: 12, title: 'mock', content: 'mock mock ' },
|
|
|
+ { id: 'bnsrqre', code_id: 13, title: 'mock', content: 'mock mock ' },
|
|
|
+ { id: 'hnsfggrqe', code_id: 14, title: 'mock', content: 'mock mock ' },
|
|
|
+ ]);
|
|
|
+ };
|
|
|
+
|
|
|
+ const deleteRecord = record => {
|
|
|
+ confirm({
|
|
|
+ title: '提示',
|
|
|
+ icon: <ExclamationCircleOutlined />,
|
|
|
+ content: '确认删除此条日志？',
|
|
|
+ onOk() {
|
|
|
+ runDelete(record.log_id);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
const columns = [
|
|
|
{
|
|
|
title: '日志标题',
|
|
|
- dataIndex: 'title',
|
|
|
+ key: 'log_title',
|
|
|
width: '20%',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '日志概述',
|
|
|
- dataIndex: 'doc',
|
|
|
- render: doc => <div className={styles.doc}>{doc}</div>,
|
|
|
+ render: record => {
|
|
|
+ return `${record.author_name}的金科环境项目日志`;
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
title: '提交人',
|
|
|
- dataIndex: 'name',
|
|
|
+ dataIndex: 'author_name',
|
|
|
width: '16%',
|
|
|
},
|
|
|
{
|
|
|
title: '提交时间',
|
|
|
- dataIndex: 'time',
|
|
|
+ dataIndex: 'c_time',
|
|
|
width: '20%',
|
|
|
+ render: time => {
|
|
|
+ if (!time) {
|
|
|
+ return '--';
|
|
|
+ }
|
|
|
+ return moment(time).format('YYYY-DD-MM HH:mm');
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
title: '操作',
|
|
|
width: '20%',
|
|
|
- render: () => (
|
|
|
- <Space>
|
|
|
- <a>编辑</a>
|
|
|
- <a onClick={() => setDetailOpen(true)}>详情</a>
|
|
|
- <a>删除</a>
|
|
|
- </Space>
|
|
|
- ),
|
|
|
+ render: record => {
|
|
|
+ return (
|
|
|
+ <Space>
|
|
|
+ <a onClick={() => editLog(record)}>编辑</a>
|
|
|
+ <a onClick={() => toDetail(record)}>详情</a>
|
|
|
+ <a onClick={() => deleteRecord(record)}>删除</a>
|
|
|
+ </Space>
|
|
|
+ );
|
|
|
+ },
|
|
|
},
|
|
|
];
|
|
|
|
|
|
- // const dataSource = [
|
|
|
- // {
|
|
|
- // name: '管理员',
|
|
|
- // title: '管理员的金科环境项目日志',
|
|
|
- // time: '1993-49-49 22:23:99',
|
|
|
- // doc:
|
|
|
- // '十八大不愧是你打卡是你打八大不愧是你打卡是你打卡机阿萨你打看那看手八大不愧是你打卡是你打卡机阿萨你打看那看手八大不愧是你打卡是你打卡机阿萨你打看那看手八大不愧是你打卡是你打卡机阿萨你打看那看手卡机阿萨你打看那看手打',
|
|
|
- // },
|
|
|
- // ];
|
|
|
-
|
|
|
+ // 加载项目列表，如果没有
|
|
|
useEffect(() => {
|
|
|
- dispatch({ type: 'record/queryProject' });
|
|
|
+ if (!projects?.length) {
|
|
|
+ dispatch({ type: 'record/queryProject' });
|
|
|
+ }
|
|
|
}, []);
|
|
|
|
|
|
- const onChange = (date, dateString) => {
|
|
|
- console.log(date, dateString);
|
|
|
- run({ s_time: `${dateString} 00:00:00`, e_time: `${dateString} 23:59:59` });
|
|
|
+ const handleDataPicked = (_date, dateString) => {
|
|
|
+ let params = '';
|
|
|
+ if (dateString) {
|
|
|
+ params = { ...pageInfo, s_time: `${dateString} 00:00:00`, e_time: `${dateString} 23:59:59` };
|
|
|
+ }
|
|
|
+ run(params);
|
|
|
+ setDate(params);
|
|
|
};
|
|
|
+
|
|
|
+ const handlePageChange = (page, pageSize) => {
|
|
|
+ console.log(page, pageSize);
|
|
|
+ let params = '';
|
|
|
+ if (date) {
|
|
|
+ params = date;
|
|
|
+ }
|
|
|
+ params.currentPage = page;
|
|
|
+ params.pageSize = pageSize;
|
|
|
+ run(params);
|
|
|
+ setPageInfo({ ...pageInfo, current: page, pageSize: pageSize });
|
|
|
+ };
|
|
|
+
|
|
|
return (
|
|
|
<div>
|
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '20px' }}>
|
|
|
<Space size={24}>
|
|
|
- <DatePicker onChange={onChange} />
|
|
|
+ <DatePicker onChange={handleDataPicked} />
|
|
|
<Button type="primary" onClick={() => {}}>
|
|
|
查询
|
|
|
</Button>
|
|
|
</Space>
|
|
|
- <Button type="primary" onClick={() => setVisible(true)}>
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ onClick={() => {
|
|
|
+ setWriteVisible(true);
|
|
|
+ setEditMode(true);
|
|
|
+ }}
|
|
|
+ >
|
|
|
写日志
|
|
|
</Button>
|
|
|
</div>
|
|
|
- <Table columns={columns} dataSource={data?.list} pagination={data?.pagination} />
|
|
|
+ <Spin spinning={allLoading}>
|
|
|
+ <Table
|
|
|
+ columns={columns}
|
|
|
+ dataSource={data?.list}
|
|
|
+ pagination={{ ...pageInfo, onChange: handlePageChange }}
|
|
|
+ />
|
|
|
+ </Spin>
|
|
|
<WriteRecordModal
|
|
|
- visible={visible}
|
|
|
+ defaultLogList={mockLogDetail}
|
|
|
+ visible={writeVisible}
|
|
|
+ editMode={editMode}
|
|
|
user={currentUser}
|
|
|
projects={projects}
|
|
|
onOk={runAdd}
|
|
|
- onCancel={() => setVisible(false)}
|
|
|
+ onCancel={() => setWriteVisible(false)}
|
|
|
+ />
|
|
|
+ <RecordDetailModal
|
|
|
+ visible={detailVisible}
|
|
|
+ onCancel={() => setDetailVisible(false)}
|
|
|
+ detail={logDetail}
|
|
|
/>
|
|
|
- <RecordDetailModal visible={detailOpen} onCancel={() => setDetailOpen(false)} />
|
|
|
</div>
|
|
|
);
|
|
|
};
|
