yexuejc007/PlayEdu-backend
1
0
Fork 0
mirror of https://github.com/PlayEdu/backend synced 2025-07-21 08:09:34 +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}
onExpand={onExpand}
treeData={treeData}
switcherIcon={<i className="iconfont icon-icon-fold c-gray" />}
/>
</div>
);

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

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

25
src/index.less
View File

@ -22,6 +22,13 @@ code {
monospace;
}
.w-174px {
max-width: 174px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.w-250px {
width: 250px;
}
@ -447,7 +454,6 @@ textarea.ant-input {
}
}
.ant-tree-switcher {
padding-left: 9px;
height: 40px !important;
display: flex;
align-items: center;
@ -469,7 +475,7 @@ textarea.ant-input {
}
.ant-tree-switcher {
padding-left: 4px;
padding-left: 6px;
position: relative;
}
@ -513,7 +519,7 @@ textarea.ant-input {
}
.tree-title-elli {
max-width:100px;
max-width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -586,3 +592,16 @@ textarea.ant-input {
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]) {
arr.push({
title: (
<div className="d-flex">
<div className="w-250px mr-24">{departments[id][i].name}</div>
<Tooltip placement="top" title="可拖拽排序">
<i
className="iconfont icon-icon-drag mr-16"
style={{ fontSize: 24 }}
/>
</Tooltip>
{through("department-cud") && (
<>
<>
<div className="w-174px mr-24">{departments[id][i].name}</div>
<div className="d-flex">
<Tooltip placement="top" title="可拖拽排序">
<i
className="iconfont icon-icon-edit mr-16"
className="iconfont icon-icon-drag mr-16"
style={{ fontSize: 24 }}
onClick={() => {
setDid(departments[id][i].id);
setUpdateVisible(true);
}}
/>
<i
className="iconfont icon-icon-delete"
style={{ fontSize: 24 }}
onClick={() => removeItem(departments[id][i].id)}
/>
</>
)}
</div>
</Tooltip>
{through("department-cud") && (
<>
<i
className="iconfont icon-icon-edit mr-16"
style={{ fontSize: 24 }}
onClick={() => {
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,
});
@ -105,32 +107,34 @@ export const DepartmentPage: React.FC = () => {
const new_arr: Option[] = checkArr(departments, departments[id][i].id);
arr.push({
title: (
<div className="d-flex">
<div className="w-250px mr-24">{departments[id][i].name}</div>
<Tooltip placement="top" title="可拖拽排序">
<i
className="iconfont icon-icon-drag mr-16"
style={{ fontSize: 24 }}
/>
</Tooltip>
{through("department-cud") && (
<>
<>
<div className="w-174px mr-24">{departments[id][i].name}</div>
<div className="d-flex">
<Tooltip placement="top" title="可拖拽排序">
<i
className="iconfont icon-icon-edit mr-16"
className="iconfont icon-icon-drag mr-16"
style={{ fontSize: 24 }}
onClick={() => {
setDid(departments[id][i].id);
setUpdateVisible(true);
}}
/>
<i
className="iconfont icon-icon-delete"
style={{ fontSize: 24 }}
onClick={() => removeItem(departments[id][i].id)}
/>
</>
)}
</div>
</Tooltip>
{through("department-cud") && (
<>
<i
className="iconfont icon-icon-edit mr-16"
style={{ fontSize: 24 }}
onClick={() => {
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,
children: new_arr,
@ -364,14 +368,17 @@ export const DepartmentPage: React.FC = () => {
</div>
</div>
<div className="playedu-main-body">
<Tree
onSelect={onSelect}
treeData={treeData}
draggable
blockNode
onDragEnter={onDragEnter}
onDrop={onDrop}
/>
<div style={{ width: 366 }}>
<Tree
onSelect={onSelect}
treeData={treeData}
draggable
blockNode
onDragEnter={onDragEnter}
onDrop={onDrop}
switcherIcon={<i className="iconfont icon-icon-fold c-gray" />}
/>
</div>
<DepartmentCreate
open={createVisible}
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]) {
arr.push({
title: (
<div className="d-flex">
<div className="w-250px mr-24">{categories[id][i].name}</div>
<Tooltip placement="top" title="可拖拽排序">
<i
className="iconfont icon-icon-drag mr-16"
style={{ fontSize: 24 }}
/>
</Tooltip>
{through("resource-category") && (
<i
className="iconfont icon-icon-edit mr-16"
style={{ fontSize: 24 }}
onClick={() => {
setCid(categories[id][i].id);
setUpdateVisible(true);
}}
/>
)}
{through("resource-destroy") && (
<i
className="iconfont icon-icon-delete"
style={{ fontSize: 24 }}
onClick={() => removeItem(categories[id][i].id)}
/>
)}
</div>
<>
<div className="w-174px mr-24">{categories[id][i].name}</div>
<div className="d-flex">
<Tooltip placement="top" title="可拖拽排序">
<i
className="iconfont icon-icon-drag mr-16"
style={{ fontSize: 24 }}
/>
</Tooltip>
{through("resource-category") && (
<i
className="iconfont icon-icon-edit mr-16"
style={{ fontSize: 24 }}
onClick={() => {
setCid(categories[id][i].id);
setUpdateVisible(true);
}}
/>
)}
{through("resource-destroy") && (
<i
className="iconfont icon-icon-delete"
style={{ fontSize: 24 }}
onClick={() => removeItem(categories[id][i].id)}
/>
)}
</div>
</>
),
key: categories[id][i].id,
});
@ -103,32 +105,34 @@ export const ResourceCategoryPage: React.FC = () => {
const new_arr: Option[] = checkArr(categories, categories[id][i].id);
arr.push({
title: (
<div className="d-flex">
<div className="w-250px mr-24">{categories[id][i].name}</div>
<Tooltip placement="top" title="可拖拽排序">
<i
className="iconfont icon-icon-drag mr-16"
style={{ fontSize: 24 }}
/>
</Tooltip>
{through("resource-category") && (
<i
className="iconfont icon-icon-edit mr-16"
style={{ fontSize: 24 }}
onClick={() => {
setCid(categories[id][i].id);
setUpdateVisible(true);
}}
/>
)}
{through("resource-destroy") && (
<i
className="iconfont icon-icon-delete"
style={{ fontSize: 24 }}
onClick={() => removeItem(categories[id][i].id)}
/>
)}
</div>
<>
<div className="w-174px mr-24">{categories[id][i].name}</div>
<div className="d-flex">
<Tooltip placement="top" title="可拖拽排序">
<i
className="iconfont icon-icon-drag mr-16"
style={{ fontSize: 24 }}
/>
</Tooltip>
{through("resource-category") && (
<i
className="iconfont icon-icon-edit mr-16"
style={{ fontSize: 24 }}
onClick={() => {
setCid(categories[id][i].id);
setUpdateVisible(true);
}}
/>
)}
{through("resource-destroy") && (
<i
className="iconfont icon-icon-delete"
style={{ fontSize: 24 }}
onClick={() => removeItem(categories[id][i].id)}
/>
)}
</div>
</>
),
key: categories[id][i].id,
children: new_arr,
@ -372,14 +376,17 @@ export const ResourceCategoryPage: React.FC = () => {
</div>
</div>
<div className="playedu-main-body">
<Tree
onSelect={onSelect}
treeData={treeData}
draggable
blockNode
onDragEnter={onDragEnter}
onDrop={onDrop}
/>
<div style={{ width: 366 }}>
<Tree
onSelect={onSelect}
treeData={treeData}
draggable
blockNode
onDragEnter={onDragEnter}
onDrop={onDrop}
switcherIcon={<i className="iconfont icon-icon-fold c-gray" />}
/>
</div>
<ResourceCategoryCreate
open={createVisible}
onCancel={() => {