Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
有来技术
mall-admin
提交
7fd58bf4
M
mall-admin
项目概览
有来技术
/
mall-admin
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
M
mall-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
7fd58bf4
编写于
3月 13, 2022
作者:
郝
郝先瑞
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor(dept/index.vue): 部门TypeScript类型完善
上级
73d2edc5
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
180 addition
and
184 deletion
+180
-184
src/views/system/dept/index.vue
src/views/system/dept/index.vue
+180
-184
未找到文件。
src/views/system/dept/index.vue
浏览文件 @
7fd58bf4
<
template
>
<div
class=
"app-container"
>
<el-form
:model=
"queryParams"
ref=
"queryFormRef"
:inline=
"true"
>
<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"
v-model=
"queryParams.name"
placeholder=
"请输入部门名称"
@
keyup.enter=
"handleQuery"
/>
</el-form-item>
<el-form-item
prop=
"status"
>
<el-select
v-model=
"queryParams.status"
placeholder=
"部门状态"
clearable
v-model=
"queryParams.status"
placeholder=
"部门状态"
clearable
>
<el-option
:value=
"1"
label=
"正常"
/>
<el-option
:value=
"0"
label=
"禁用"
/>
<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"
class=
"filter-item"
type=
"primary"
:icon=
"Search"
@
click=
"handleQuery"
>
搜索
</el-button>
<el-button
:icon=
"Refresh"
@
click=
"resetQuery"
>
重置
</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"
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
type=
"selection"
width=
"55"
align=
"center"
/>
<el-table-column
prop=
"name"
label=
"部门名称"
/>
<el-table-column
prop=
"status"
label=
"状态"
width=
"100"
>
<template
#default
="
scope
"
>
<el-tag
v-if=
"scope.row.status
==
1"
type=
"success"
>
正常
</el-tag>
<el-tag
v-if=
"scope.row.status
==
1"
type=
"success"
>
正常
</el-tag>
<el-tag
v-else
type=
"info"
>
禁用
</el-tag>
</
template
>
</el-table-column>
<el-table-column
prop=
"sort"
label=
"显示排序"
width=
"200"
/>
<el-table-column
prop=
"sort"
label=
"显示排序"
width=
"200"
/>
<el-table-column
label=
"操作"
align=
"center"
width=
"150"
>
<el-table-column
label=
"操作"
align=
"center"
width=
"150"
>
<
template
#default=
"scope"
>
<el-button
type=
"primary"
:icon=
"Edit"
circle
plain
@
click.stop=
"handleUpdate(scope.row)"
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)"
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)"
>
type=
"danger"
:icon=
"Delete"
circle
plain
@
click.stop=
"handleDelete(scope.row)"
>
</el-button>
</
template
>
</el-table-column>
...
...
@@ -102,32 +97,34 @@
<!-- 添加或修改部门对话框 -->
<el-dialog
:title=
"dialog.title"
v-model=
"dialog.visible"
width=
"600px"
@
closed=
"cancel"
:title=
"dialog.title"
v-model=
"dialog.visible"
width=
"600px"
@
closed=
"cancel"
>
<el-form
ref=
"dataFormRef"
:model=
"formData"
:rules=
"rules"
label-width=
"80px"
ref=
"dataFormRef"
:model=
"formData"
:rules=
"rules"
label-width=
"80px"
>
<el-form-item
label=
"上级部门"
prop=
"parentId"
>
<el-form-item
label=
"上级部门"
prop=
"parentId"
>
<tree-select
:options=
"deptOptions"
placeholder=
"选择上级部门"
v-model=
"formData.parentId"
:options=
"deptOptions"
placeholder=
"选择上级部门"
v-model=
"formData.parentId"
/>
</el-form-item>
<el-form-item
label=
"部门名称"
prop=
"name"
>
<el-input
v-model=
"formData.name"
placeholder=
"请输入部门名称"
/>
<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"
>
...
...
@@ -139,14 +136,8 @@
<
template
#footer
>
<div
class=
"dialog-footer"
>
<el-button
type=
"primary"
@
click=
"submitForm"
>
确 定
</el-button>
<el-button
@
click=
"cancel"
>
取 消
</el-button>
<el-button
type=
"primary"
@
click=
"submitForm"
>
确 定
</el-button>
<el-button
@
click=
"cancel"
>
取 消
</el-button>
</div>
</
template
>
</el-dialog>
...
...
@@ -155,170 +146,173 @@
<
script
setup
lang=
"ts"
>
// Vue依赖
import
{
onMounted
,
reactive
,
unref
,
ref
,
toRefs
}
from
'
vue
'
import
{
onMounted
,
reactive
,
unref
,
ref
,
toRefs
}
from
"
vue
"
;
// API依赖
import
{
listDeptTable
,
getDeptDetail
,
deleteDept
,
updateDept
,
addDept
,
listDeptSelect
}
from
'
@/api/system/dept
'
import
{
getDeptFormDetail
,
deleteDept
,
updateDept
,
addDept
,
listSelectDepartments
,
listTableDepartments
,
}
from
"
@/api/system/dept
"
;
// 组件依赖
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
{
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
,
DeptItem
,
DeptQueryParam
,
Dialog
,
Option
,
}
from
"
@/types
"
;
// DOM元素的引用声明定义
const
queryFormRef
=
ref
(
ElForm
)
const
dataFormRef
=
ref
(
ElForm
)
const
queryFormRef
=
ref
(
ElForm
)
;
const
dataFormRef
=
ref
(
ElForm
)
;
const
state
=
reactive
({
// 选中ID数组
ids
:
[],
ids
:
[]
as
number
[]
,
// 非单个禁用
single
:
true
,
disabled
:
false
,
originOptions
:
[],
loading
:
true
,
// 表格树数据
deptList
:
[],
// 部门
树
选项
deptOptions
:
[]
as
Array
<
any
>
,
deptList
:
[]
as
DeptItem
[]
,
// 部门
下拉
选项
deptOptions
:
[]
as
Option
[]
,
// 弹窗属性
dialog
:
{
title
:
''
,
visible
:
false
},
dialog
:
{
visible
:
false
}
as
Dialog
,
// 查询参数
queryParams
:
{
name
:
undefined
,
status
:
undefined
},
queryParams
:
{}
as
DeptQueryParam
,
// 表单数据
formData
:
{
id
:
undefined
,
parentId
:
''
,
name
:
''
,
sort
:
1
,
status
:
1
},
status
:
1
,
}
as
DeptFormData
,
// 表单参数校验
rules
:
{
parentId
:
[
{
required
:
true
,
message
:
'
上级部门不能为空
'
,
trigger
:
'
blur
'
}
],
name
:
[
{
required
:
true
,
message
:
'
部门名称不能为空
'
,
trigger
:
'
blur
'
}
{
required
:
true
,
message
:
"
上级部门不能为空
"
,
trigger
:
"
blur
"
},
],
sort
:
[
{
required
:
true
,
message
:
'
显示排序不能为空
'
,
trigger
:
'
blur
'
}
]
}
})
const
{
ids
,
single
,
disabled
,
loading
,
deptList
,
deptOptions
,
queryParams
,
formData
,
rules
,
dialog
}
=
toRefs
(
state
)
name
:
[{
required
:
true
,
message
:
"
部门名称不能为空
"
,
trigger
:
"
blur
"
}],
sort
:
[{
required
:
true
,
message
:
"
显示排序不能为空
"
,
trigger
:
"
blur
"
}],
},
});
const
{
ids
,
single
,
disabled
,
loading
,
deptList
,
deptOptions
,
queryParams
,
formData
,
rules
,
dialog
,
}
=
toRefs
(
state
);
/**
* 部门查询
*/
function
handleQuery
()
{
state
.
loading
=
true
list
DeptTable
(
state
.
queryParams
).
then
((
response
:
any
)
=>
{
state
.
deptList
=
response
.
data
state
.
loading
=
false
})
state
.
loading
=
true
;
list
TableDepartments
(
state
.
queryParams
).
then
(({
data
}
)
=>
{
state
.
deptList
=
data
;
state
.
loading
=
false
;
})
;
}
/**
* 重置查询
*/
function
resetQuery
()
{
const
queryForm
=
unref
(
queryFormRef
)
queryForm
.
resetFields
()
handleQuery
()
queryFormRef
.
value
.
resetFields
();
handleQuery
();
}
function
handleSelectionChange
(
selection
:
any
)
{
state
.
ids
=
selection
.
map
((
item
:
any
)
=>
item
.
id
)
state
.
single
=
selection
.
length
===
0
state
.
ids
=
selection
.
map
((
item
:
any
)
=>
item
.
id
)
;
state
.
single
=
selection
.
length
===
0
;
}
/**
* 加载部门下拉数据源
*/
async
function
loadDeptOptions
()
{
const
deptOptions
:
any
[]
=
[]
listDeptSelect
().
then
(
response
=>
{
const
rootDeptOption
=
{
id
:
0
,
label
:
'
顶级部门
'
,
children
:
response
.
data
}
deptOptions
.
push
(
rootDeptOption
)
state
.
deptOptions
=
deptOptions
})
const
deptOptions
:
any
[]
=
[];
listSelectDepartments
().
then
((
response
)
=>
{
const
rootDeptOption
=
{
id
:
0
,
label
:
"
顶级部门
"
,
children
:
response
.
data
,
};
deptOptions
.
push
(
rootDeptOption
);
state
.
deptOptions
=
deptOptions
;
});
}
/**
* 表单重置
**/
function
resetForm
()
{
state
.
formData
=
{
id
:
undefined
,
parentId
:
''
,
name
:
''
,
sort
:
1
,
status
:
1
}
dataFormRef
.
value
.
resetFields
();
}
/**
* 添加部门
*/
function
handleAdd
(
row
:
any
)
{
resetForm
()
loadDeptOptions
()
state
.
formData
.
parentId
=
row
.
id
loadDeptOptions
();
state
.
formData
.
parentId
=
row
.
id
;
state
.
dialog
=
{
title
:
'
添加部门
'
,
visible
:
true
}
title
:
"
添加部门
"
,
visible
:
true
,
}
;
}
/**
* 修改部门
*/
async
function
handleUpdate
(
row
:
any
)
{
await
loadDeptOptions
()
const
deptId
=
row
.
id
||
state
.
ids
await
loadDeptOptions
()
;
const
deptId
=
row
.
id
||
state
.
ids
;
state
.
dialog
=
{
title
:
'
修改部门
'
,
visible
:
true
}
getDeptDetail
(
deptId
).
then
((
response
:
any
)
=>
{
state
.
formData
=
response
.
data
})
title
:
"
修改部门
"
,
visible
:
true
,
}
;
getDept
Form
Detail
(
deptId
).
then
((
response
:
any
)
=>
{
state
.
formData
=
response
.
data
;
})
;
}
/**
* 部门表单提交
*/
function
submitForm
()
{
const
dataForm
=
unref
(
dataFormRef
)
const
dataForm
=
unref
(
dataFormRef
)
;
dataForm
.
validate
((
valid
:
any
)
=>
{
if
(
valid
)
{
if
(
state
.
formData
.
id
)
{
updateDept
(
state
.
formData
.
id
,
state
.
formData
).
then
((
res
:
any
)
=>
{
ElMessage
.
success
(
'
修改成功
'
)
state
.
dialog
.
visible
=
false
handleQuery
()
})
ElMessage
.
success
(
"
修改成功
"
);
state
.
dialog
.
visible
=
false
;
handleQuery
()
;
})
;
}
else
{
addDept
(
state
.
formData
).
then
(()
=>
{
ElMessage
.
success
(
'
新增成功
'
)
state
.
dialog
.
visible
=
false
handleQuery
()
})
ElMessage
.
success
(
"
新增成功
"
);
state
.
dialog
.
visible
=
false
;
handleQuery
()
;
})
;
}
}
})
})
;
}
/**
...
...
@@ -327,32 +321,34 @@ function submitForm() {
* @param row
*/
function
handleDelete
(
row
:
any
)
{
const
ids
=
[
row
.
id
||
state
.
ids
].
join
(
'
,
'
)
ElMessageBox
.
confirm
(
`确认删除已选中的数据项?`
,
'
警告
'
,
{
confirmButtonText
:
'
确定
'
,
cancelButtonText
:
'
取消
'
,
type
:
'
warning
'
}).
then
(()
=>
{
deleteDept
(
ids
).
then
(()
=>
{
handleQuery
()
ElMessage
.
success
(
'
删除成功
'
)
}).
catch
(()
=>
{
console
.
log
(
`删除失败`
)
const
ids
=
[
row
.
id
||
state
.
ids
].
join
(
"
,
"
);
ElMessageBox
.
confirm
(
`确认删除已选中的数据项?`
,
"
警告
"
,
{
confirmButtonText
:
"
确定
"
,
cancelButtonText
:
"
取消
"
,
type
:
"
warning
"
,
})
.
then
(()
=>
{
deleteDept
(
ids
)
.
then
(()
=>
{
handleQuery
();
ElMessage
.
success
(
"
删除成功
"
);
})
.
catch
(()
=>
{
console
.
log
(
`删除失败`
);
});
})
}).
catch
(()
=>
ElMessage
.
info
(
'
已取消删除
'
)
)
.
catch
(()
=>
ElMessage
.
info
(
"
已取消删除
"
));
}
/**
* 取消/关闭弹窗
**/
function
cancel
()
{
resetForm
()
state
.
dialog
.
visible
=
false
resetForm
()
;
state
.
dialog
.
visible
=
false
;
}
onMounted
(()
=>
{
handleQuery
()
})
handleQuery
()
;
})
;
</
script
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录