From 465274ce64fbe014b38366972ec4d1ac655ed9ef Mon Sep 17 00:00:00 2001 From: xjh22222228 Date: Fri, 2 Oct 2020 20:27:44 +0800 Subject: [PATCH] refactor: Form --- README.md | 3 - package.json | 2 +- src/assets/styles/style.scss | 134 ------------------ src/services/capitalFlow.ts | 4 +- src/services/memorandum.ts | 7 +- src/services/todayTask.ts | 5 +- src/utils/http.ts | 8 -- src/utils/index.ts | 1 - src/utils/spin.ts | 27 ---- src/views/home/capital-flow/index/index.tsx | 2 + src/views/home/reminder/index.tsx | 73 +++++----- src/views/home/setting/account/index.tsx | 4 +- src/views/home/setting/base/index.tsx | 2 +- src/views/home/setting/notification/index.tsx | 2 +- src/views/home/today-task/index.tsx | 48 ++++--- src/views/home/todo-list/index/index.tsx | 51 ++++--- src/views/login/index.tsx | 2 +- yarn.lock | 18 +-- 18 files changed, 120 insertions(+), 273 deletions(-) delete mode 100755 src/utils/spin.ts diff --git a/README.md b/README.md index daf42d6..c519f0e 100755 --- a/README.md +++ b/README.md @@ -13,9 +13,6 @@ Stars Badge - - -

diff --git a/package.json b/package.json index 437d00b..27a7b39 100755 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "@types/react-router-dom": "^5.1.5", "@typescript-eslint/eslint-plugin": "^2.10.0", "@typescript-eslint/parser": "^3.6.1", - "antd": "^4.6.5", + "antd": "^4.6.6", "axios": "^0.20.0", "babel-eslint": "10.1.0", "babel-jest": "^24.9.0", diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss index 0405a77..8710bfe 100755 --- a/src/assets/styles/style.scss +++ b/src/assets/styles/style.scss @@ -1,59 +1,5 @@ @charset "utf-8"; -* { - margin: 0; - padding: 0; -} - -body { - -webkit-font-smoothing: antialiased; - overflow-x: hidden; -} - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section { - display: block; -} - -h1 { - font-size: 18px; -} - -h2 { - font-size: 16px; -} - -h3 { - font-size: 14px; -} - -h4, -h5, -h6 { - font-size: 100%; -} - -address, -cite, -dfn, -em, -var { - font-style: normal; -} - -small { - font-size: 12px; -} - ol, ul, li { @@ -69,86 +15,6 @@ pre { word-break: break-all; } -abbr[title], -acronym[title] { - border-bottom: 1px dotted; - cursor: help; -} - -q:after, -q:before { - content: ''; -} - -legend { - color: #000; -} - -fieldset, -img, -iframe { - border: none; -} - -button, -input, -select, -textarea { - font-size: 100%; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -input[type="text"], -input[type="password"], -input[type="submit"], -input[type="reset"], -input[type="tel"], -button { - -webkit-appearance: none; - outline: none; - border: 1px solid #e1e1e1; -} - -input::-webkit-outer-spin-button, -input::-webkit-inner-spin-button { - -webkit-appearance: none; /* 移除number类型样式 */ -} - -textarea { - resize: none; - outline: none; - -webkit-appearance: none; -} - -button, -input[type="submit"], -input[type="reset"] { - cursor: pointer; - outline:none; -} - -i, em { font-style: normal; } -// 禁用系统默认菜单 -a, -img { - -webkit-touch-callout: none; -} - -img { - max-width: 100%; -} - -input, -textarea { - - &::-webkit-input-placeholder{ - color:#999; - } -} diff --git a/src/services/capitalFlow.ts b/src/services/capitalFlow.ts index 398e8aa..68b35aa 100755 --- a/src/services/capitalFlow.ts +++ b/src/services/capitalFlow.ts @@ -3,9 +3,7 @@ import api from '@/api'; // 类型 export function serviceGetCapitalFlowType() { - return http.get(api.capitalFlowType, { - headers: { isLoading: true } - }); + return http.get(api.capitalFlowType); } export function serviceDeleteCapitalFlowType(id: string) { diff --git a/src/services/memorandum.ts b/src/services/memorandum.ts index ae12a3d..1073371 100755 --- a/src/services/memorandum.ts +++ b/src/services/memorandum.ts @@ -11,16 +11,13 @@ export function serviceCreateMemorandum(data: object) { // 查询所有 export function serviceGetMemorandum(params?: object) { return http.get(api.memorandum, { - params, - headers: { isLoading: true } + params }); } // 通过id查询 export function serviceGetMemorandumById(id: unknown) { - return http.get(`${api.memorandum}/${id}`, { - headers: { isLoading: true } - }); + return http.get(`${api.memorandum}/${id}`); } // 删除 diff --git a/src/services/todayTask.ts b/src/services/todayTask.ts index 1464094..9387e3c 100755 --- a/src/services/todayTask.ts +++ b/src/services/todayTask.ts @@ -10,10 +10,7 @@ export function serviceCreateTask(data: object) { // 查询 export function serviceGetTask(params?: object) { - return http.get(api.todayTask, { - params, - headers: { isLoading: true } - }); + return http.get(api.todayTask, { params }); } // 删除 diff --git a/src/utils/http.ts b/src/utils/http.ts index 55fbf50..d309331 100755 --- a/src/utils/http.ts +++ b/src/utils/http.ts @@ -3,7 +3,6 @@ import CONFIG from '@/config'; import store from '@/store'; import { message } from 'antd'; import { logout } from '@/store/actions'; -import { spin } from '@/utils'; let exiting = false; const CancelToken = axios.CancelToken; @@ -57,10 +56,6 @@ httpInstance.interceptors.request.use(function (config) { const data: { [k: string]: any } = {}; - if (config.headers.isLoading) { - spin.start(); - } - if (method === 'post' || method === 'put') { if (config.data instanceof FormData) { for (let key in data) { @@ -79,9 +74,6 @@ httpInstance.interceptors.request.use(function (config) { httpInstance.interceptors.response.use(function (res) { const headers = res.config.headers; - if (headers.isLoading) { - spin.done(); - } if (!res.data.success && headers.errorAlert) { message.warn(res.data.msg ?? '服务器出小差'); diff --git a/src/utils/index.ts b/src/utils/index.ts index 26f82ed..cd85a50 100755 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,3 +1,2 @@ export * from './helper'; export * from './date'; -export * from './spin'; diff --git a/src/utils/spin.ts b/src/utils/spin.ts deleted file mode 100755 index b998e15..0000000 --- a/src/utils/spin.ts +++ /dev/null @@ -1,27 +0,0 @@ - -const spinHTML = '
'; -let containerEl: HTMLElement; - -function start() { - try { - if (document.querySelector('.spin-loading')) { - return; - } - - containerEl = containerEl || document.getElementById('container') as HTMLElement; - const spinEl = document.createElement('div'); - spinEl.className = 'spin-loading'; - spinEl.innerHTML = spinHTML; - containerEl.appendChild(spinEl); - } catch {} -} - -function done() { - try { - const spin = document.querySelector('.spin-loading') as any; - if (!spin) return; - spin.parentNode.removeChild(spin); - } catch {} -} - -export const spin = { start, done }; diff --git a/src/views/home/capital-flow/index/index.tsx b/src/views/home/capital-flow/index/index.tsx index 2cc14db..daf9727 100755 --- a/src/views/home/capital-flow/index/index.tsx +++ b/src/views/home/capital-flow/index/index.tsx @@ -326,6 +326,7 @@ const Reminder: React.FC = function() { + setState({ showCreateCapitalFlowModal: true, currentRow: null })} /> + ; const initialState: State = { - date: [], - queryType: '', showCreateModal: false, currentRow: null }; const Reminder: React.FC = function({ userInfo }) { + const [form] = Form.useForm(); const [state, setState] = useKeepState(initialState); const tableRef = useRef(); const tableColumns = [ @@ -63,18 +60,23 @@ const Reminder: React.FC = function({ userInfo }) { const initParams = function() { const startDate = moment(getThisYearFirstDay(), dateFormat); const endDate = moment(getThisYearLastDay(), dateFormat); - setState({ + form.setFieldsValue({ queryType: '', date: [startDate, endDate] }); + tableRef?.current?.getTableData(); }; function getReminder(params: any = {}) { - params.startDate = state.date[0].valueOf(); - params.endDate = state.date[1].valueOf(); + const values = form.getFieldsValue(); + + if (values.date && values.date.length === 2) { + params.startDate = values.date[0].valueOf(); + params.endDate = values.date[1].valueOf(); + } - if (state.queryType !== '') { - params.type = state.queryType; + if (values.queryType !== '') { + params.type = values.queryType; } return serviceGetReminder(params).then(res => { @@ -110,10 +112,10 @@ const Reminder: React.FC = function({ userInfo }) { }, [setState]); // modal成功新增回调函数 - const handleModalOnSuccess = useCallback(() => { + function handleModalOnSuccess() { setState({ showCreateModal: false }); tableRef.current.getTableData(); - }, [setState]); + } useEffect(() => { initParams(); @@ -137,32 +139,35 @@ const Reminder: React.FC = function({ userInfo }) { } }, [userInfo.email]); - useEffect(() => { - if (state.date.length <= 0) return; - tableRef?.current?.getTableData(); - }, [state.date, state.queryType]); - return (
- 查询类型： - - 日期： - setState({ date })} - /> - - + + + + + + + + + + + + +
= function ({ userInfo }) { return (
- 修改密码 + 修改密码
= function ({ userInfo }) { - Server酱配置 + Server酱配置
= function ({ userInfo }) { return (
- 个人中心 + 个人中心 - 消息通知 + 消息通知

待办任务

diff --git a/src/views/home/today-task/index.tsx b/src/views/home/today-task/index.tsx index c085d19..aa0efa1 100755 --- a/src/views/home/today-task/index.tsx +++ b/src/views/home/today-task/index.tsx @@ -9,7 +9,7 @@ import NoData from '@/components/no-data/index'; import TaskItem from './components/task-item'; import CreateTask from './components/create-task'; import moment from 'moment'; -import { DatePicker, Button, Tag, Row, Col } from 'antd'; +import { DatePicker, Button, Tag, Row, Col, Form } from 'antd'; import { getStartTimestampByDate, getEndTimestampByDate } from '@/utils'; import { serviceGetTask } from '@/services'; @@ -23,7 +23,6 @@ const TASK_TYPE: any = { }; interface State { - startDate: moment.Moment; data: { wait: any[]; process: any[]; @@ -34,16 +33,22 @@ interface State { } const initialState: State = { - startDate: datePickerValue, - data: { wait: [], process: [], finished: [], unfinished: [] }, + data: { + wait: [], + process: [], + finished: [], + unfinished: [] + }, showCreateTaskModal: false }; const TodayTask = () => { + const [form] = Form.useForm(); const [state, setState] = useKeepState(initialState); function getTask() { - const date = state.startDate.valueOf(); + const values = form.getFieldsValue(); + const date = values.startDate.valueOf(); serviceGetTask({ startDate: getStartTimestampByDate(date), endDate: getEndTimestampByDate(date) @@ -56,7 +61,9 @@ const TodayTask = () => { } function initParams() { - setState({ startDate: datePickerValue }); + form.setFieldsValue({ + startDate: datePickerValue + }); getTask(); } @@ -70,23 +77,29 @@ const TodayTask = () => { } useEffect(() => { - getTask(); + initParams(); }, []); return (
- 查询日期： - setState({ startDate: date })} - /> - - - + + + + + + + + + + +
+
{( state.data.wait.length > 0 || @@ -113,6 +126,7 @@ const TodayTask = () => { /> )}
+ { + const [form] = Form.useForm(); const [state, setState] = useKeepState(initialState); const tableRef = useRef(); const tableColumns = [ @@ -60,9 +59,13 @@ const TodoList = () => { tableRef.current.getTableData(); } - const getTodoList = useCallback((params?: any) => { - params.startDate = state.date[0].valueOf(); - params.endDate = state.date[1].valueOf() + ONE_DAY_TIMESTAMP; + function getTodoList(params: any) { + const values = form.getFieldsValue(); + + if (values.date && values.date.length === 2) { + params.startDate = values.date[0].valueOf(); + params.endDate = values.date[1].valueOf() + ONE_DAY_TIMESTAMP; + } return serviceGetTodoList(params).then(res => { res.data.data.rows.map((item: any) => { @@ -71,12 +74,15 @@ const TodoList = () => { }); return res; }); - }, [state.date]); + } function initParams() { const startDate = moment(getThisYearFirstDay(), dateFormat); const endDate = moment(getCurMonthLastDay(dateFormat), dateFormat); - setState({ date: [startDate, endDate] }); + form.setFieldsValue({ + date: [startDate, endDate] + }); + tableRef?.current?.getTableData(); } function toggleCreateTodoModal() { @@ -123,24 +129,25 @@ const TodoList = () => { initParams(); }, []); - useEffect(() => { - if (state.date.length <= 0) return; - tableRef?.current?.getTableData(); - }, [state.date]); - return (
- 查询日期： - setState({ date })} - /> - - +
tableRef?.current?.getTableData()} + > + + + + + + + + +
+