yexuejc007/PlayEdu-backend
1
0
Fork 0
mirror of https://github.com/PlayEdu/backend synced 2025-07-20 19:01:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

tree组件初步优化

Browse Source
This commit is contained in:
禺狨 2023-03-21 14:30:46 +08:00
parent cb568cdb9f
commit 0f5e7fd9c1
5 changed files with 152 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/compenents/tree-category/index.tsx
View File

@ -120,6 +120,7 @@ export const TreeCategory = (props: PropInterface) => {
selectedKeys={selectKey} selectedKeys={selectKey}
onExpand={onExpand} onExpand={onExpand}
treeData={treeData} treeData={treeData}
switcherIcon={<i className="iconfont icon-icon-fold c-gray" />}
/> />
</div> </div>
); );

1
src/compenents/tree-department/index.tsx
View File

@ -94,6 +94,7 @@ export const TreeDepartment = (props: PropInterface) => {
onSelect={onSelect} onSelect={onSelect}
onExpand={onExpand} onExpand={onExpand}
treeData={treeData} treeData={treeData}
switcherIcon={<i className="iconfont icon-icon-fold c-gray" />}
/> />
</div> </div>
); );

25
src/index.less
View File

@ -22,6 +22,13 @@ code {
monospace; monospace;
} }
.w-174px {
max-width: 174px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.w-250px { .w-250px {
width: 250px; width: 250px;
} }
@ -447,7 +454,6 @@ textarea.ant-input {
} }
} }
.ant-tree-switcher { .ant-tree-switcher {
padding-left: 9px;
height: 40px !important; height: 40px !important;
display: flex; display: flex;
align-items: center; align-items: center;
@ -469,7 +475,7 @@ textarea.ant-input {
} }
.ant-tree-switcher { .ant-tree-switcher {
padding-left: 4px; padding-left: 6px;
position: relative; position: relative;
} }
@ -513,7 +519,7 @@ textarea.ant-input {
} }
.tree-title-elli { .tree-title-elli {
max-width:100px; max-width: 100px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -586,3 +592,16 @@ textarea.ant-input {
opacity: 0.8; opacity: 0.8;
} }
} }
.ant-tree-switcher_close {
.c-gray {
color: rgba(0, 0, 0, 0.3);
}
}
.ant-tree-switcher_open {
.c-gray {
color: rgba(0, 0, 0, 0.3);
transform: rotate(90deg);
}
}

115
src/pages/department/index.tsx
View File

@ -72,32 +72,34 @@ export const DepartmentPage: React.FC = () => {
if (!departments[departments[id][i].id]) { if (!departments[departments[id][i].id]) {
arr.push({ arr.push({
title: ( title: (
<div className="d-flex"> <>
<div className="w-250px mr-24">{departments[id][i].name}</div> <div className="w-174px mr-24">{departments[id][i].name}</div>
<Tooltip placement="top" title="可拖拽排序"> <div className="d-flex">
<i <Tooltip placement="top" title="可拖拽排序">
className="iconfont icon-icon-drag mr-16"
style={{ fontSize: 24 }}
/>
</Tooltip>
{through("department-cud") && (
<>
<i <i
className="iconfont icon-icon-edit mr-16" className="iconfont icon-icon-drag mr-16"
style={{ fontSize: 24 }} style={{ fontSize: 24 }}
onClick={() => {
setDid(departments[id][i].id);
setUpdateVisible(true);
}}
/> />
<i </Tooltip>
className="iconfont icon-icon-delete" {through("department-cud") && (
style={{ fontSize: 24 }} <>
onClick={() => removeItem(departments[id][i].id)} <i
/> className="iconfont icon-icon-edit mr-16"
</> style={{ fontSize: 24 }}
)} onClick={() => {
</div> setDid(departments[id][i].id);
setUpdateVisible(true);
}}
/>
<i
className="iconfont icon-icon-delete"
style={{ fontSize: 24 }}
onClick={() => removeItem(departments[id][i].id)}
/>
</>
)}
</div>
</>
), ),
key: departments[id][i].id, key: departments[id][i].id,
}); });
@ -105,32 +107,34 @@ export const DepartmentPage: React.FC = () => {
const new_arr: Option[] = checkArr(departments, departments[id][i].id); const new_arr: Option[] = checkArr(departments, departments[id][i].id);
arr.push({ arr.push({
title: ( title: (
<div className="d-flex"> <>
<div className="w-250px mr-24">{departments[id][i].name}</div> <div className="w-174px mr-24">{departments[id][i].name}</div>
<Tooltip placement="top" title="可拖拽排序"> <div className="d-flex">
<i <Tooltip placement="top" title="可拖拽排序">
className="iconfont icon-icon-drag mr-16"
style={{ fontSize: 24 }}
/>
</Tooltip>
{through("department-cud") && (
<>
<i <i
className="iconfont icon-icon-edit mr-16" className="iconfont icon-icon-drag mr-16"
style={{ fontSize: 24 }} style={{ fontSize: 24 }}
onClick={() => {
setDid(departments[id][i].id);
setUpdateVisible(true);
}}
/> />
<i </Tooltip>
className="iconfont icon-icon-delete" {through("department-cud") && (
style={{ fontSize: 24 }} <>
onClick={() => removeItem(departments[id][i].id)} <i
/> className="iconfont icon-icon-edit mr-16"
</> style={{ fontSize: 24 }}
)} onClick={() => {
</div> setDid(departments[id][i].id);
setUpdateVisible(true);
}}
/>
<i
className="iconfont icon-icon-delete"
style={{ fontSize: 24 }}
onClick={() => removeItem(departments[id][i].id)}
/>
</>
)}
</div>
</>
), ),
key: departments[id][i].id, key: departments[id][i].id,
children: new_arr, children: new_arr,
@ -364,14 +368,17 @@ export const DepartmentPage: React.FC = () => {
</div> </div>
</div> </div>
<div className="playedu-main-body"> <div className="playedu-main-body">
<Tree <div style={{ width: 366 }}>
onSelect={onSelect} <Tree
treeData={treeData} onSelect={onSelect}
draggable treeData={treeData}
blockNode draggable
onDragEnter={onDragEnter} blockNode
onDrop={onDrop} onDragEnter={onDragEnter}
/> onDrop={onDrop}
switcherIcon={<i className="iconfont icon-icon-fold c-gray" />}
/>
</div>
<DepartmentCreate <DepartmentCreate
open={createVisible} open={createVisible}
onCancel={() => { onCancel={() => {

127
src/pages/resource/resource-category/index.tsx
View File

@ -70,32 +70,34 @@ export const ResourceCategoryPage: React.FC = () => {
if (!categories[categories[id][i].id]) { if (!categories[categories[id][i].id]) {
arr.push({ arr.push({
title: ( title: (
<div className="d-flex"> <>
<div className="w-250px mr-24">{categories[id][i].name}</div> <div className="w-174px mr-24">{categories[id][i].name}</div>
<Tooltip placement="top" title="可拖拽排序"> <div className="d-flex">
<i <Tooltip placement="top" title="可拖拽排序">
className="iconfont icon-icon-drag mr-16" <i
style={{ fontSize: 24 }} className="iconfont icon-icon-drag mr-16"
/> style={{ fontSize: 24 }}
</Tooltip> />
{through("resource-category") && ( </Tooltip>
<i {through("resource-category") && (
className="iconfont icon-icon-edit mr-16" <i
style={{ fontSize: 24 }} className="iconfont icon-icon-edit mr-16"
onClick={() => { style={{ fontSize: 24 }}
setCid(categories[id][i].id); onClick={() => {
setUpdateVisible(true); setCid(categories[id][i].id);
}} setUpdateVisible(true);
/> }}
)} />
{through("resource-destroy") && ( )}
<i {through("resource-destroy") && (
className="iconfont icon-icon-delete" <i
style={{ fontSize: 24 }} className="iconfont icon-icon-delete"
onClick={() => removeItem(categories[id][i].id)} style={{ fontSize: 24 }}
/> onClick={() => removeItem(categories[id][i].id)}
)} />
</div> )}
</div>
</>
), ),
key: categories[id][i].id, key: categories[id][i].id,
}); });
@ -103,32 +105,34 @@ export const ResourceCategoryPage: React.FC = () => {
const new_arr: Option[] = checkArr(categories, categories[id][i].id); const new_arr: Option[] = checkArr(categories, categories[id][i].id);
arr.push({ arr.push({
title: ( title: (
<div className="d-flex"> <>
<div className="w-250px mr-24">{categories[id][i].name}</div> <div className="w-174px mr-24">{categories[id][i].name}</div>
<Tooltip placement="top" title="可拖拽排序"> <div className="d-flex">
<i <Tooltip placement="top" title="可拖拽排序">
className="iconfont icon-icon-drag mr-16" <i
style={{ fontSize: 24 }} className="iconfont icon-icon-drag mr-16"
/> style={{ fontSize: 24 }}
</Tooltip> />
{through("resource-category") && ( </Tooltip>
<i {through("resource-category") && (
className="iconfont icon-icon-edit mr-16" <i
style={{ fontSize: 24 }} className="iconfont icon-icon-edit mr-16"
onClick={() => { style={{ fontSize: 24 }}
setCid(categories[id][i].id); onClick={() => {
setUpdateVisible(true); setCid(categories[id][i].id);
}} setUpdateVisible(true);
/> }}
)} />
{through("resource-destroy") && ( )}
<i {through("resource-destroy") && (
className="iconfont icon-icon-delete" <i
style={{ fontSize: 24 }} className="iconfont icon-icon-delete"
onClick={() => removeItem(categories[id][i].id)} style={{ fontSize: 24 }}
/> onClick={() => removeItem(categories[id][i].id)}
)} />
</div> )}
</div>
</>
), ),
key: categories[id][i].id, key: categories[id][i].id,
children: new_arr, children: new_arr,
@ -372,14 +376,17 @@ export const ResourceCategoryPage: React.FC = () => {
</div> </div>
</div> </div>
<div className="playedu-main-body"> <div className="playedu-main-body">
<Tree <div style={{ width: 366 }}>
onSelect={onSelect} <Tree
treeData={treeData} onSelect={onSelect}
draggable treeData={treeData}
blockNode draggable
onDragEnter={onDragEnter} blockNode
onDrop={onDrop} onDragEnter={onDragEnter}
/> onDrop={onDrop}
switcherIcon={<i className="iconfont icon-icon-fold c-gray" />}
/>
</div>
<ResourceCategoryCreate <ResourceCategoryCreate
open={createVisible} open={createVisible}
onCancel={() => { onCancel={() => {