From 4fb7bd570fc8a949bfedb350626fab04b681aba2 Mon Sep 17 00:00:00 2001 From: Sinclair Date: Mon, 19 Feb 2024 10:05:23 +0800 Subject: [PATCH] change category edit mode --- config/routes.ts | 10 + src/pages/content/category/archive/detail.tsx | 429 ++++++++++++++++++ src/pages/content/category/archive/index.tsx | 34 +- src/pages/content/category/page/detail.tsx | 332 ++++++++++++++ src/pages/content/category/page/index.tsx | 30 +- 5 files changed, 777 insertions(+), 58 deletions(-) create mode 100644 src/pages/content/category/archive/detail.tsx create mode 100644 src/pages/content/category/page/detail.tsx diff --git a/config/routes.ts b/config/routes.ts index 5917279..f8aedb1 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -95,6 +95,11 @@ name: '文档分类', component: '@/pages/content/category/archive', }, + { + hideInMenu: true, + path: '/archive/category/detail', + component: '@/pages/content/category/archive/detail', + }, { path: '/archive/tag', name: '文档标签', @@ -105,6 +110,11 @@ name: '单页面管理', component: '@/pages/content/category/page', }, + { + hideInMenu: true, + path: '/archive/page/detail', + component: '@/pages/content/category/page/detail', + }, { path: '/archive/module', name: '内容模型', diff --git a/src/pages/content/category/archive/detail.tsx b/src/pages/content/category/archive/detail.tsx new file mode 100644 index 0000000..bee0231 --- /dev/null +++ b/src/pages/content/category/archive/detail.tsx @@ -0,0 +1,429 @@ +import { message, Image, Card, Row, Col, Button } from 'antd'; +import React, { useState, useRef, useEffect } from 'react'; +import { PageContainer } from '@ant-design/pro-layout'; +import ProForm, { + ProFormDigit, + ProFormInstance, + ProFormRadio, + ProFormSelect, + ProFormText, + ProFormTextArea, +} from '@ant-design/pro-form'; +import { + getCategories, + getCategoryInfo, + getDesignTemplateFiles, + getModules, + getSettingContent, + saveCategory, +} from '@/services'; +import '../index.less'; +import { history } from 'umi'; +import { DeleteOutlined, PlusOutlined } from '@ant-design/icons'; +import WangEditor from '@/components/editor'; +import AttachmentSelect from '@/components/attachment'; +import MarkdownEditor from '@/components/markdown'; + +const categoryType = 1; + +const ArchiveCategoryDetail: React.FC = () => { + const formRef = useRef(); + const editorRef = useRef(null); + const [content, setContent] = useState(''); + const [categoryImages, setCategoryImages] = useState([]); + const [categoryLogo, setCategoryLogo] = useState(''); + const [currentModule, setCurrentModule] = useState({}); + const [contentSetting, setContentSetting] = useState({}); + const [loaded, setLoaded] = useState(false); + const [category, setCategory] = useState({ status: 1 }); + const [modules, setModules] = useState([]); + + useEffect(() => { + initData(); + }, []); + + const initData = async () => { + let id = history.location.query?.id || 0; + if (id == 'new') { + id = 0; + } + let parent_id = Number(history.location.query?.parent_id || 0); + + let modRes = await getModules(); + setModules(modRes.data || []); + let catRes = await getCategoryInfo({ + id: id, + }); + let cat = catRes.data || { status: 1, parent_id: parent_id }; + let moduleId = cat.module_id || 1; + if (Number(parent_id) > 0) { + let parentRes = await getCategoryInfo({ + id: parent_id, + }); + if (parentRes.data) { + moduleId = parentRes.data.module_id; + } + cat.module_id = moduleId; + } + changeModule(moduleId); + + setCategory(cat); + + console.log(cat); + + setContent(cat.content || ''); + setCategoryImages(cat.images || []); + setCategoryLogo(cat.logo || ''); + + getSettingContent().then((res) => { + setContentSetting(res.data || {}); + setLoaded(true); + }); + }; + + const onSubmit = async (values: any) => { + let cat = Object.assign(category, values); + cat.content = content; + cat.type = categoryType; + cat.images = categoryImages; + cat.logo = categoryLogo; + if (cat.title == '') { + message.error('请填写分类名称'); + return; + } + let res = await saveCategory(category); + message.info(res.msg); + + history.goBack(); + }; + + const handleSelectImages = (row: any) => { + let exists = false; + + for (let i in categoryImages) { + if (categoryImages[i] == row.logo) { + exists = true; + break; + } + } + if (!exists) { + categoryImages.push(row.logo); + } + setCategoryImages([].concat(categoryImages)); + message.success('上传完成'); + }; + + const handleCleanImages = (index: number, e: any) => { + e.stopPropagation(); + categoryImages.splice(index, 1); + setCategoryImages([].concat(categoryImages)); + }; + + const handleSelectLogo = (row: any) => { + setCategoryLogo(row.logo); + message.success('上传完成'); + }; + + const handleCleanLogo = (e: any) => { + e.stopPropagation(); + setCategoryLogo(''); + }; + + const changeModule = (e: any) => { + for (let item of modules) { + if (item.id == e) { + setCurrentModule(item); + break; + } + } + }; + + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 's' && (event.ctrlKey || event.metaKey)) { + const values = formRef.current?.getFieldsValue(); + // 自动保存 + onSubmit(values); + + event.preventDefault(); + } + }; + + return ( + 0 ? '修改' : '添加') + '分类'}> + + {loaded && ( + + + + { + return modules; + }} + readonly={category.id || category.module_id > 0 ? true : false} + fieldProps={{ + fieldNames: { + label: 'title', + value: 'id', + }, + onChange: (e) => { + changeModule(e); + }, + }} + /> + { + let res = await getCategories({ type: categoryType }); + let categories = res.data || []; + // 排除自己 + if (category.id) { + let tmpCategory = []; + for (let i in categories) { + if ( + categories[i].id == category.id || + categories[i].parent_id == category.id || + categories[i].module_id != category.module_id + ) { + continue; + } + tmpCategory.push(categories[i]); + } + categories = tmpCategory; + } + categories = [{ id: 0, title: '顶级分类', spacer: '' }].concat(categories); + return categories; + }} + readonly={category.id || category.module_id > 0 ? false : true} + fieldProps={{ + fieldNames: { + label: 'title', + value: 'id', + }, + optionItemRender(item) { + return ( +
+ ); + }, + }} + /> + + + + + + {loaded && ( + <> + {contentSetting.editor == 'markdown' ? ( + { + setContent(html); + }} + content={content} + ref={editorRef} + /> + ) : ( + { + setContent(html); + }} + ref={editorRef} + content={content} + /> + )} + + )} + + +
+ + + + + + + + +
+ + {categoryImages.length + ? categoryImages.map((item: string, index: number) => ( +
+ + + + +
+ )) + : null} + +
+
+ +
上传
+
+
+ + + + {categoryLogo ? ( +
+ + + + +
+ ) : ( + +
+
+ +
上传
+
+
+ + )} + + + + + + + + + { + const res = await getDesignTemplateFiles({}); + const data = [{ path: '', remark: '默认模板' }].concat(res.data || []); + for (const i in data) { + if (!data[i].remark) { + data[i].remark = data[i].path; + } else { + data[i].remark = data[i].path + '(' + data[i].remark + ')'; + } + } + return data; + }} + fieldProps={{ + fieldNames: { + label: 'remark', + value: 'path', + }, + }} + extra={
分类默认值：{currentModule.table_name}/list.html
} + /> + + + + + + { + const res = await getDesignTemplateFiles({}); + const data = [{ path: '', remark: '默认模板' }].concat(res.data || []); + for (const i in data) { + if (!data[i].remark) { + data[i].remark = data[i].path; + } else { + data[i].remark = data[i].path + '(' + data[i].remark + ')'; + } + } + return data; + }} + fieldProps={{ + fieldNames: { + label: 'remark', + value: 'path', + }, + }} + extra={
文档模板默认值：{currentModule.table_name}/detail.html
} + /> + + + + + )} + + + ); +}; + +export default ArchiveCategoryDetail; diff --git a/src/pages/content/category/archive/index.tsx b/src/pages/content/category/archive/index.tsx index 4b1e1a1..5a376b1 100644 --- a/src/pages/content/category/archive/index.tsx +++ b/src/pages/content/category/archive/index.tsx @@ -6,7 +6,6 @@ import type { ProColumns, ActionType } from '@ant-design/pro-table'; import ProTable from '@ant-design/pro-table'; import { deleteCategory, getCategories, getCategoryInfo, getModules } from '@/services'; import '../index.less'; -import CategoryForm from '../components/categoryFrom'; import { history } from 'umi'; import MultiCategory from '../components/multiCategory'; @@ -14,7 +13,6 @@ const ArchiveCategory: React.FC = () => { const actionRef = useRef(); const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [currentCategory, setCurrentCategory] = useState({}); - const [editVisible, setEditVisible] = useState(false); const [modules, setModules] = useState([]); const [multiVisible, setMultiVisible] = useState(false); @@ -52,18 +50,9 @@ const ArchiveCategory: React.FC = () => { }; const handleEditCategory = async (record: any) => { - let category: any = null; - if (record.id > 0) { - const res = await getCategoryInfo({ - id: record.id, - }); - category = res.data || record; - } else { - category = record; - } - - setCurrentCategory(category); - setEditVisible(true); + history.push( + '/archive/category/detail?id=' + (record.id || 'new') + '&parent_id=' + record.parent_id, + ); }; const handleAddMultiCategory = async (record: any) => { @@ -248,23 +237,6 @@ const ArchiveCategory: React.FC = () => { showSizeChanger: true, }} /> - {editVisible && ( - { - setEditVisible(false); - }} - onSubmit={async () => { - setEditVisible(false); - if (actionRef.current) { - actionRef.current.reload(); - } - }} - /> - )} {multiVisible && ( { + const formRef = useRef(); + const editorRef = useRef(null); + const [content, setContent] = useState(''); + const [categoryImages, setCategoryImages] = useState([]); + const [categoryLogo, setCategoryLogo] = useState(''); + const [currentModule, setCurrentModule] = useState({}); + const [contentSetting, setContentSetting] = useState({}); + const [loaded, setLoaded] = useState(false); + const [category, setCategory] = useState({ status: 1 }); + const [modules, setModules] = useState([]); + + useEffect(() => { + initData(); + }, []); + + const initData = async () => { + let id = history.location.query?.id || 0; + if (id == 'new') { + id = 0; + } + let parent_id = Number(history.location.query?.parent_id || 0); + + let modRes = await getModules(); + setModules(modRes.data || []); + let catRes = await getCategoryInfo({ + id: id, + }); + let cat = catRes.data || { status: 1, parent_id: parent_id }; + let moduleId = cat.module_id || 1; + if (Number(parent_id) > 0) { + let parentRes = await getCategoryInfo({ + id: parent_id, + }); + if (parentRes.data) { + moduleId = parentRes.data.module_id; + } + cat.module_id = moduleId; + } + changeModule(moduleId); + + setCategory(cat); + + console.log(cat); + + setContent(cat.content || ''); + setCategoryImages(cat.images || []); + setCategoryLogo(cat.logo || ''); + + getSettingContent().then((res) => { + setContentSetting(res.data || {}); + setLoaded(true); + }); + }; + + const onSubmit = async (values: any) => { + let cat = Object.assign(category, values); + cat.content = content; + cat.type = categoryType; + cat.images = categoryImages; + cat.logo = categoryLogo; + if (cat.title == '') { + message.error('请填写分类名称'); + return; + } + let res = await saveCategory(category); + message.info(res.msg); + + history.goBack(); + }; + + const handleSelectImages = (row: any) => { + let exists = false; + + for (let i in categoryImages) { + if (categoryImages[i] == row.logo) { + exists = true; + break; + } + } + if (!exists) { + categoryImages.push(row.logo); + } + setCategoryImages([].concat(categoryImages)); + message.success('上传完成'); + }; + + const handleCleanImages = (index: number, e: any) => { + e.stopPropagation(); + categoryImages.splice(index, 1); + setCategoryImages([].concat(categoryImages)); + }; + + const handleSelectLogo = (row: any) => { + setCategoryLogo(row.logo); + message.success('上传完成'); + }; + + const handleCleanLogo = (e: any) => { + e.stopPropagation(); + setCategoryLogo(''); + }; + + const changeModule = (e: any) => { + for (let item of modules) { + if (item.id == e) { + setCurrentModule(item); + break; + } + } + }; + + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 's' && (event.ctrlKey || event.metaKey)) { + const values = formRef.current?.getFieldsValue(); + // 自动保存 + onSubmit(values); + + event.preventDefault(); + } + }; + + return ( + 0 ? '修改' : '添加') + '页面'}> + + {loaded && ( + + + + + + + + + {loaded && ( + <> + {contentSetting.editor == 'markdown' ? ( + { + setContent(html); + }} + content={content} + ref={editorRef} + /> + ) : ( + { + setContent(html); + }} + ref={editorRef} + content={content} + /> + )} + + )} + + +
+ + + + + + + + +
+ + {categoryImages.length + ? categoryImages.map((item: string, index: number) => ( +
+ + + + +
+ )) + : null} + +
+
+ +
上传
+
+
+ + + + {categoryLogo ? ( +
+ + + + +
+ ) : ( + +
+
+ +
上传
+
+
+ + )} + + + + + + + + + { + const res = await getDesignTemplateFiles({}); + const data = [{ path: '', remark: '默认模板' }].concat(res.data || []); + for (const i in data) { + if (!data[i].remark) { + data[i].remark = data[i].path; + } else { + data[i].remark = data[i].path + '(' + data[i].remark + ')'; + } + } + return data; + }} + fieldProps={{ + fieldNames: { + label: 'remark', + value: 'path', + }, + }} + extra={
页面默认值：page/detail.html
} + /> + + + + + )} + + + ); +}; + +export default PageCategoryDetail; diff --git a/src/pages/content/category/page/index.tsx b/src/pages/content/category/page/index.tsx index 4fbaf76..44093d2 100644 --- a/src/pages/content/category/page/index.tsx +++ b/src/pages/content/category/page/index.tsx @@ -4,15 +4,13 @@ import React, { useState, useRef } from 'react'; import { PageContainer } from '@ant-design/pro-layout'; import type { ProColumns, ActionType } from '@ant-design/pro-table'; import ProTable from '@ant-design/pro-table'; -import { deleteCategory, getCategories, getCategoryInfo } from '@/services/category'; +import { deleteCategory, getCategories } from '@/services/category'; import '../index.less'; -import PageForm from '../components/pageForm'; +import { history } from 'umi'; const PageCategory: React.FC = () => { const actionRef = useRef(); const [selectedRowKeys, setSelectedRowKeys] = useState([]); - const [currentCategory, setCurrentCategory] = useState({}); - const [editVisible, setEditVisible] = useState(false); const handleRemove = async (selectedRowKeys: any[]) => { Modal.confirm({ @@ -42,13 +40,7 @@ const PageCategory: React.FC = () => { }; const handleEditCategory = async (record: any) => { - const res = await getCategoryInfo({ - id: record.id, - }); - const category = res.data || { status: 1 }; - - setCurrentCategory(category); - setEditVisible(true); + history.push('/archive/page/detail?id=' + (record.id || 'new')); }; const columns: ProColumns[] = [ @@ -171,22 +163,6 @@ const PageCategory: React.FC = () => { showSizeChanger: true, }} /> - {editVisible && ( - { - setEditVisible(false); - }} - onSubmit={async () => { - setEditVisible(false); - if (actionRef.current) { - actionRef.current.reload(); - } - }} - /> - )} ); };