From 7ea4a7b7f54c89636584acc0c6759351a2af4ac2 Mon Sep 17 00:00:00 2001
From: rayadaschn <115447518+rayadaschn@users.noreply.github.com>
Date: Wed, 25 Oct 2023 08:35:51 +0800
Subject: [PATCH] feat: add pageSetting
---
src/hooks/modules/useLoadQuestionData.ts | 1 -
.../edit/component/leftPanel/LeftLayers.tsx | 43 ++++++++++++++++-
.../component/rightPanel/RightPageSetting.tsx | 48 +++++++++++++++++++
.../edit/component/rightPanel/index.tsx | 11 +++--
src/pages/question/edit/index.tsx | 16 ++++++-
5 files changed, 110 insertions(+), 9 deletions(-)
create mode 100644 src/pages/question/edit/component/rightPanel/RightPageSetting.tsx
diff --git a/src/hooks/modules/useLoadQuestionData.ts b/src/hooks/modules/useLoadQuestionData.ts
index d08a0e1..8702011 100644
--- a/src/hooks/modules/useLoadQuestionData.ts
+++ b/src/hooks/modules/useLoadQuestionData.ts
@@ -1,7 +1,6 @@
import { useParams } from 'react-router-dom'
import { getQuestionService } from '@/api'
import { useDispatch } from 'react-redux'
-import store from '@/store'
import { resetPageInfo } from '@/store/modules/pageInfoReducer'
import { resetComponents } from '@/store/modules/componentsReducer'
diff --git a/src/pages/question/edit/component/leftPanel/LeftLayers.tsx b/src/pages/question/edit/component/leftPanel/LeftLayers.tsx
index e04902d..12faeb4 100644
--- a/src/pages/question/edit/component/leftPanel/LeftLayers.tsx
+++ b/src/pages/question/edit/component/leftPanel/LeftLayers.tsx
@@ -1,9 +1,12 @@
import { useGetComponentInfo } from '@/hooks'
import {
+ changeComponentHidden,
changeComponentTitle,
changeSelectedId,
+ toggleComponentLocked,
} from '@/store/modules/componentsReducer'
-import { Input, message } from 'antd'
+import { EyeInvisibleOutlined, LockOutlined } from '@ant-design/icons'
+import { Button, Input, Space, message } from 'antd'
import classNames from 'classnames'
import React, { ChangeEvent, FC } from 'react'
import { useDispatch } from 'react-redux'
@@ -39,6 +42,16 @@ const LeftLayers: FC = () => {
dispatch(changeComponentTitle({ fe_id: selectedId, title: newTitle }))
}
+ /** 切换显示/隐藏 */
+ const toggleHidden = (fe_id: string, isHidden: boolean) => {
+ dispatch(changeComponentHidden({ fe_id, isHidden }))
+ }
+
+ /** 切换锁定/解锁 */
+ const toggleLocked = (fe_id: string) => {
+ dispatch(toggleComponentLocked({ fe_id }))
+ }
+
return (
<>
{componentList.map((c) => {
@@ -49,6 +62,13 @@ const LeftLayers: FC = () => {
[titleDefaultClassName]: true,
[selectedClassName]: fe_id === selectedId,
})
+ const isShowName = 'opacity-20'
+ const hiddenButtonClassName = classNames({
+ [isShowName]: isHidden,
+ })
+ const clockButtonClassName = classNames({
+ [isShowName]: isHidden,
+ })
return (
{
)}
{fe_id !== changingTitleId && title}
- 按钮
+
+
+ }
+ type={isHidden ? 'primary' : 'text'}
+ onClick={() => toggleHidden(fe_id, !isHidden)}
+ />
+ }
+ type={isLocked ? 'primary' : 'text'}
+ onClick={() => toggleLocked(fe_id)}
+ />
+
+
)
})}
diff --git a/src/pages/question/edit/component/rightPanel/RightPageSetting.tsx b/src/pages/question/edit/component/rightPanel/RightPageSetting.tsx
new file mode 100644
index 0000000..0f0fe26
--- /dev/null
+++ b/src/pages/question/edit/component/rightPanel/RightPageSetting.tsx
@@ -0,0 +1,48 @@
+import { useGetPageInfo } from '@/hooks'
+import { resetPageInfo } from '@/store/modules/pageInfoReducer'
+import { Form, Input } from 'antd'
+import TextArea from 'antd/es/input/TextArea'
+import { FC } from 'react'
+import { useDispatch } from 'react-redux'
+
+const RightPageSetting: FC = () => {
+ const pageInfo = useGetPageInfo()
+ const [form] = Form.useForm()
+ const dispatch = useDispatch()
+
+ /** 更新表单 */
+ const handelValuesChange = () => {
+ dispatch(resetPageInfo(form.getFieldsValue()))
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default RightPageSetting
diff --git a/src/pages/question/edit/component/rightPanel/index.tsx b/src/pages/question/edit/component/rightPanel/index.tsx
index fc9d3a4..66b9951 100644
--- a/src/pages/question/edit/component/rightPanel/index.tsx
+++ b/src/pages/question/edit/component/rightPanel/index.tsx
@@ -3,8 +3,8 @@ import { FileTextOutlined, SettingOutlined } from '@ant-design/icons'
import React, { FC } from 'react'
import RightComponentProp from './RightComponentProp'
import { Tabs } from 'antd'
+import RightPageSetting from './RightPageSetting'
-// TS 枚举
enum TAB_KEYS {
PROP_KEY = 'prop',
SETTING_KEY = 'setting',
@@ -15,8 +15,11 @@ const EditRightPanel: FC = () => {
const { selectedId } = useGetComponentInfo()
useEffect(() => {
- if (selectedId) setActiveKey(TAB_KEYS.PROP_KEY)
- else setActiveKey(TAB_KEYS.SETTING_KEY)
+ if (selectedId) {
+ setActiveKey(TAB_KEYS.PROP_KEY)
+ } else {
+ setActiveKey(TAB_KEYS.SETTING_KEY)
+ }
}, [selectedId])
const tabsItems = [
@@ -38,7 +41,7 @@ const EditRightPanel: FC = () => {
页面设置
),
- children: 页面设置
,
+ children: ,
},
]
return
diff --git a/src/pages/question/edit/index.tsx b/src/pages/question/edit/index.tsx
index c9d08fd..49dbeba 100644
--- a/src/pages/question/edit/index.tsx
+++ b/src/pages/question/edit/index.tsx
@@ -4,12 +4,21 @@ import EditHeader from './component/header'
import EditLeftPanel from './component/leftPanel'
import EditCenterPanel from './component/centerPanel'
import EditRightPanel from './component/rightPanel'
+import { useDispatch } from 'react-redux'
+import { changeSelectedId } from '@/store/modules/componentsReducer'
const Edit: FC = () => {
+ const dispatch = useDispatch()
const { loading } = useLoadQuestionData()
const { title } = useGetPageInfo()
- useTitle(`问卷编辑 - ${title}`)
+ const pageTitle = title ? `问卷编辑 - ${title}` : '问卷调查'
+ useTitle(pageTitle)
+
+ /** 清空选择 */
+ const clearSelectedId = () => {
+ dispatch(changeSelectedId(''))
+ }
return (
@@ -20,7 +29,10 @@ const Edit: FC = () => {
-