Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
有来技术
vue3-element-admin
提交
d828af91
V
vue3-element-admin
项目概览
有来技术
/
vue3-element-admin
通知
4
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue3-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
d828af91
编写于
4月 18, 2022
作者:
郝
郝先瑞
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor: 删除自定义TreeSelect组件,使用element-plus2.1.8新增TreeSelect组件
Former-commit-id:
86912048
上级
09d131f1
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
17 addition
and
238 deletion
+17
-238
src/components/TreeSelect/index.vue
src/components/TreeSelect/index.vue
+0
-155
src/views/system/dept/index.vue
src/views/system/dept/index.vue
+15
-79
src/views/system/menu/components/Menu.vue
src/views/system/menu/components/Menu.vue
+1
-2
src/views/system/user/index.vue
src/views/system/user/index.vue
+1
-2
未找到文件。
src/components/TreeSelect/index.vue
已删除
100644 → 0
浏览文件 @
09d131f1
<
template
>
<div
class=
"el-tree-select"
>
<el-select
style=
"width: 100%"
v-model=
"modelValue"
ref=
"treeSelect"
:filterable=
"true"
:clearable=
"true"
@
clear=
"clearHandle"
:filter-method=
"selectFilterData"
:placeholder=
"placeholder"
>
<el-option
:value=
"modelValue"
:label=
"valueTitle"
>
<el-tree
id=
"tree-option"
ref=
"selectTree"
:accordion=
"accordion"
:data=
"options"
:props=
"state.props"
:node-key=
"state.props.value"
:expand-on-click-node=
"false"
:default-expanded-keys=
"defaultExpandedKey"
:filter-node-method=
"filterNode"
@
node-click=
"handleNodeClick"
></el-tree>
</el-option>
</el-select>
</div>
</
template
>
<
script
setup
lang=
"ts"
>
import
{
ref
,
getCurrentInstance
,
nextTick
,
onMounted
,
computed
,
watch
}
from
"
vue
"
;
const
{
proxy
}
=
getCurrentInstance
()
as
any
;
const
state
=
defineProps
({
// 配置项
props
:
{
type
:
Object
,
default
:
()
=>
{
return
{
value
:
"
value
"
,
// 值
label
:
"
label
"
,
// 名
children
:
"
children
"
,
// 子级
};
},
},
// 自动收起
accordion
:
{
type
:
Boolean
,
default
:
()
=>
{
return
false
;
},
},
// v-model 绑定的值
modelValue
:
{
type
:
[
String
,
Number
],
default
:
""
,
},
// 数据源
options
:
{
type
:
Array
,
default
:
()
=>
{
return
[]
}
},
// 提示文字
placeholder
:
{
type
:
String
,
default
:
""
,
},
});
const
emit
=
defineEmits
([
"
update:modelValue
"
]);
const
modelValue
=
computed
({
get
:
()
=>
{
return
state
.
modelValue
;
},
set
:
(
val
)
=>
{
emit
(
"
update:modelValue
"
,
val
);
},
});
const
valueTitle
=
ref
(
""
);
const
defaultExpandedKey
=
ref
([]
as
any
[]);
function
handleNodeClick
(
node
:
any
)
{
valueTitle
.
value
=
node
[
state
.
props
.
label
];
modelValue
.
value
=
node
[
state
.
props
.
value
];
defaultExpandedKey
.
value
=
[];
proxy
.
$refs
.
treeSelect
.
blur
();
selectFilterData
(
""
);
}
function
selectFilterData
(
val
:
any
)
{
proxy
.
$refs
.
selectTree
.
filter
(
val
);
}
function
filterNode
(
value
:
any
,
data
:
any
)
{
if
(
!
value
)
return
true
;
return
data
[
state
.
props
[
"
label
"
]].
indexOf
(
value
)
!==
-
1
;
}
function
clearHandle
()
{
valueTitle
.
value
=
""
;
modelValue
.
value
=
""
;
defaultExpandedKey
.
value
=
[];
clearSelected
();
}
function
clearSelected
()
{
const
allNode
=
document
.
querySelectorAll
(
"
#tree-option .el-tree-node
"
);
allNode
.
forEach
((
element
)
=>
element
.
classList
.
remove
(
"
is-current
"
));
}
function
initHandle
()
{
nextTick
(()
=>
{
const
selectedValue
=
modelValue
.
value
;
if
(
selectedValue
!==
null
&&
typeof
selectedValue
!==
"
undefined
"
)
{
const
node
=
proxy
.
$refs
.
selectTree
.
getNode
(
selectedValue
);
if
(
node
)
{
valueTitle
.
value
=
node
.
data
[
state
.
props
.
label
];
proxy
.
$refs
.
selectTree
.
setCurrentKey
(
selectedValue
);
// 设置默认选中
defaultExpandedKey
.
value
=
[
selectedValue
];
// 设置默认展开
}
else
{
clearHandle
();
}
}
});
}
onMounted
(()
=>
{
initHandle
();
});
watch
(
modelValue
,
()
=>
{
initHandle
();
});
</
script
>
<
style
lang=
'scss'
scoped
>
.el-scrollbar
.el-scrollbar__view
.el-select-dropdown__item
{
padding
:
0
;
background-color
:
#fff
;
height
:
auto
;
}
.el-select-dropdown__item.selected
{
font-weight
:
normal
;
}
ul
li
.el-tree
.el-tree-node__content
{
height
:
auto
;
padding
:
0
20px
;
box-sizing
:
border-box
;
}
:deep
(
.el-tree-node__content
:hover
),
:deep
(
.el-tree-node__content
:active
),
:deep
(
.is-current
>
div
:first-child
),
:deep
(
.el-tree-node__content
:focus
)
{
background-color
:
mix
(
#fff
,
#409eff
,
90%
);
color
:
#409eff
;
}
</
style
>
src/views/system/dept/index.vue
浏览文件 @
d828af91
...
...
@@ -2,57 +2,31 @@
<div
class=
"app-container"
>
<el-form
ref=
"queryFormRef"
:model=
"queryParams"
:inline=
"true"
>
<el-form-item>
<el-button
type=
"success"
:icon=
"Plus"
@
click=
"handleAdd"
>
新增
</el-button
>
<el-button
type=
"danger"
:icon=
"Delete"
:disabled=
"single"
@
click=
"handleDelete"
>
删除
<el-button
type=
"success"
:icon=
"Plus"
@
click=
"handleAdd"
>
新增
</el-button>
<el-button
type=
"danger"
:icon=
"Delete"
:disabled=
"single"
@
click=
"handleDelete"
>
删除
</el-button>
</el-form-item>
<el-form-item
prop=
"name"
>
<el-input
v-model=
"queryParams.name"
placeholder=
"请输入部门名称"
@
keyup.enter=
"handleQuery"
/>
<el-input
v-model=
"queryParams.name"
placeholder=
"请输入部门名称"
@
keyup.enter=
"handleQuery"
/>
</el-form-item>
<el-form-item
prop=
"status"
>
<el-select
v-model=
"queryParams.status"
placeholder=
"部门状态"
clearable
>
<el-select
v-model=
"queryParams.status"
placeholder=
"部门状态"
clearable
>
<el-option
:value=
"1"
label=
"正常"
/>
<el-option
:value=
"0"
label=
"禁用"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
class=
"filter-item"
type=
"primary"
:icon=
"Search"
@
click=
"handleQuery"
>
<el-button
class=
"filter-item"
type=
"primary"
:icon=
"Search"
@
click=
"handleQuery"
>
搜索
</el-button>
<el-button
:icon=
"Refresh"
@
click=
"resetQuery"
>
重置
</el-button>
</el-form-item>
</el-form>
<el-table
v-loading=
"loading"
:data=
"deptList"
row-key=
"id"
default-expand-all
:tree-props=
"
{ children: 'children', hasChildren: 'hasChildren' }"
@selection-change="handleSelectionChange"
>
<el-table
v-loading=
"loading"
:data=
"deptList"
row-key=
"id"
default-expand-all
:tree-props=
"
{ children: 'children', hasChildren: 'hasChildren' }" @selection-change="handleSelectionChange">
<el-table-column
type=
"selection"
width=
"55"
align=
"center"
/>
<el-table-column
prop=
"name"
label=
"部门名称"
/>
<el-table-column
prop=
"status"
label=
"状态"
width=
"100"
>
...
...
@@ -66,65 +40,28 @@
<el-table-column
label=
"操作"
align=
"center"
width=
"150"
>
<
template
#default=
"scope"
>
<el-button
type=
"primary"
:icon=
"Edit"
circle
plain
@
click.stop=
"handleUpdate(scope.row)"
>
<el-button
type=
"primary"
:icon=
"Edit"
circle
plain
@
click.stop=
"handleUpdate(scope.row)"
>
</el-button>
<el-button
type=
"success"
:icon=
"Plus"
circle
plain
@
click.stop=
"handleAdd(scope.row)"
>
<el-button
type=
"success"
:icon=
"Plus"
circle
plain
@
click.stop=
"handleAdd(scope.row)"
>
</el-button>
<el-button
type=
"danger"
:icon=
"Delete"
circle
plain
@
click.stop=
"handleDelete(scope.row)"
>
<el-button
type=
"danger"
:icon=
"Delete"
circle
plain
@
click.stop=
"handleDelete(scope.row)"
>
</el-button>
</
template
>
</el-table-column>
</el-table>
<!-- 添加或修改部门对话框 -->
<el-dialog
:title=
"dialog.title"
v-model=
"dialog.visible"
width=
"600px"
@
closed=
"cancel"
>
<el-form
ref=
"dataFormRef"
:model=
"formData"
:rules=
"rules"
label-width=
"80px"
>
<el-dialog
:title=
"dialog.title"
v-model=
"dialog.visible"
width=
"600px"
@
closed=
"cancel"
>
<el-form
ref=
"dataFormRef"
:model=
"formData"
:rules=
"rules"
label-width=
"80px"
>
<el-form-item
label=
"上级部门"
prop=
"parentId"
>
<tree-select
:options=
"deptOptions"
placeholder=
"选择上级部门"
v-model=
"formData.parentId"
/>
<el-tree-select
v-model=
"formData.parentId"
placeholder=
"选择上级部门"
:data=
"deptOptions"
filterable
/>
</el-form-item>
<el-form-item
label=
"部门名称"
prop=
"name"
>
<el-input
v-model=
"formData.name"
placeholder=
"请输入部门名称"
/>
</el-form-item>
<el-form-item
label=
"显示排序"
prop=
"sort"
>
<el-input-number
v-model=
"formData.sort"
controls-position=
"right"
style=
"width: 100px"
:min=
"0"
/>
<el-input-number
v-model=
"formData.sort"
controls-position=
"right"
style=
"width: 100px"
:min=
"0"
/>
</el-form-item>
<el-form-item
label=
"部门状态"
>
<el-radio-group
v-model=
"formData.status"
>
...
...
@@ -160,7 +97,6 @@ import {
// 组件依赖
import
{
Search
,
Plus
,
Edit
,
Refresh
,
Delete
}
from
"
@element-plus/icons-vue
"
;
import
TreeSelect
from
"
@/components/TreeSelect/index.vue
"
;
import
{
ElForm
,
ElMessage
,
ElMessageBox
}
from
"
element-plus
"
;
import
{
DeptFormData
,
...
...
@@ -185,7 +121,7 @@ const state = reactive({
// 部门下拉选项
deptOptions
:
[]
as
Option
[],
// 弹窗属性
dialog
:
{
visible
:
false
}
as
Dialog
,
dialog
:
{
visible
:
false
}
as
Dialog
,
// 查询参数
queryParams
:
{}
as
DeptQueryParam
,
// 表单数据
...
...
src/views/system/menu/components/Menu.vue
浏览文件 @
d828af91
...
...
@@ -46,7 +46,7 @@
<el-dialog
:title=
"dialog.title"
v-model=
"dialog.visible"
width=
"750px"
>
<el-form
ref=
"dataFormRef"
:model=
"formData"
:rules=
"rules"
label-width=
"100px"
>
<el-form-item
label=
"父级菜单"
prop=
"parentId"
>
<
tree-select
v-model=
"formData.parentId"
:options=
"menuOptions"
placeholder=
"选择上级菜单"
/>
<
el-tree-select
v-model=
"formData.parentId"
placeholder=
"选择上级菜单"
:data=
"menuOptions"
filterable
/>
</el-form-item>
<el-form-item
label=
"菜单名称"
prop=
"name"
>
...
...
@@ -140,7 +140,6 @@ import {
}
from
"
@/api/system/menu
"
;
import
SvgIcon
from
"
@/components/SvgIcon/index.vue
"
;
import
TreeSelect
from
"
@/components/TreeSelect/index.vue
"
;
import
IconSelect
from
"
@/components/IconSelect/index.vue
"
;
const
emit
=
defineEmits
([
"
menuClick
"
]);
...
...
src/views/system/user/index.vue
浏览文件 @
d828af91
...
...
@@ -105,7 +105,7 @@
</el-form-item>
<el-form-item
label=
"所属部门"
prop=
"deptId"
>
<
tree-select
v-model=
"formData.deptId"
:options=
"deptOptions"
placeholder=
"请选择所属部门"
/>
<
el-tree-select
v-model=
"formData.deptId"
placeholder=
"请选择所属部门"
:data=
"deptOptions"
filterable
/>
</el-form-item>
<el-form-item
label=
"手机号码"
prop=
"mobile"
>
...
...
@@ -224,7 +224,6 @@ import {
Top
,
UploadFilled
}
from
"
@element-plus/icons-vue
"
;
import
TreeSelect
from
"
@/components/TreeSelect/index.vue
"
;
import
{
UserItem
,
UserQueryParam
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录