bonus
/
smart_archives_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

部门管理页面优化

This commit is contained in:
BianLzhaoMin 2025-09-08 17:43:19 +08:00
parent d1a068ee6c
commit 0ca1914e99
1 changed files with 77 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

227
src/views/system/dept/index.vue
View File

@ -7,105 +7,57 @@
:inline="true" :inline="true"
v-show="showSearch" v-show="showSearch"
> >
<el-form-item label="部门名称" prop="deptName"> <el-form-item prop="deptName">
<el-input <el-input
v-model="queryParams.deptName"
placeholder="请输入部门名称"
clearable clearable
placeholder="部门名称"
v-model="queryParams.deptName"
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="部门状态"
clearable
>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item> <el-form-item>
<el-button <el-button
size="mini"
type="primary" type="primary"
icon="el-icon-search" icon="el-icon-search"
size="mini"
@click="handleQuery" @click="handleQuery"
>搜索</el-button
> >
搜索
</el-button>
<el-button <el-button
icon="el-icon-refresh"
size="mini" size="mini"
@click="resetQuery" @click="resetQuery"
>重置</el-button icon="el-icon-refresh"
> >
</el-form-item> 重置
</el-form> </el-button>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button <el-button
type="primary" type="primary"
plain plain
icon="el-icon-plus"
size="mini" size="mini"
@click="handleAdd" @click="handleAdd"
icon="el-icon-plus"
v-hasPermi="['system:dept:add']" v-hasPermi="['system:dept:add']"
>新增</el-button
> >
</el-col> 新增
<el-col :span="1.5"> </el-button>
<el-button </el-form-item>
type="info" </el-form>
plain
icon="el-icon-sort"
size="mini"
@click="toggleExpandAll"
>展开/折叠</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table <el-table
v-if="refreshTable" v-if="refreshTable"
v-loading="loading" v-loading="loading"
:data="deptList" :data="deptList"
row-key="deptId" row-key="deptId"
border
:default-expand-all="isExpandAll" :default-expand-all="isExpandAll"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
> >
<el-table-column <el-table-column prop="deptName" label="部门名称" align="center" />
prop="deptName" <el-table-column prop="remark" label="部门描述" align="center" />
label="部门名称"
width="260" <el-table-column label="更新时间" align="center" prop="createTime">
></el-table-column>
<el-table-column
prop="orderNum"
label="排序"
width="200"
></el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template slot-scope="scope">
<dict-tag
:options="dict.type.sys_normal_disable"
:value="scope.row.status"
/>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="200"
>
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span> <span>{{ parseTime(scope.row.createTime) }}</span>
</template> </template>
@ -122,25 +74,19 @@
icon="el-icon-edit" icon="el-icon-edit"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
v-hasPermi="['system:dept:edit']" v-hasPermi="['system:dept:edit']"
>修改</el-button
> >
修改
</el-button>
<el-button <el-button
size="mini"
type="text"
icon="el-icon-plus"
@click="handleAdd(scope.row)"
v-hasPermi="['system:dept:add']"
>新增</el-button
>
<el-button
v-if="scope.row.parentId != 0"
size="mini" size="mini"
type="text" type="text"
icon="el-icon-delete" icon="el-icon-delete"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
v-hasPermi="['system:dept:remove']" v-hasPermi="['system:dept:remove']"
>删除</el-button
> >
删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -149,12 +95,29 @@
<el-dialog <el-dialog
:title="title" :title="title"
:visible.sync="open" :visible.sync="open"
width="600px" width="50%"
append-to-body append-to-body
> >
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form
ref="form"
:model="form"
:rules="rules"
label-width="120px"
>
<el-row> <el-row>
<el-col :span="24" v-if="form.parentId !== 0"> <el-col :span="24">
<el-form-item label="部门名称" prop="deptName">
<el-input
maxlength="30"
show-word-limit
v-model="form.deptName"
placeholder="请输入部门名称"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="上级部门" prop="parentId"> <el-form-item label="上级部门" prop="parentId">
<treeselect <treeselect
v-model="form.parentId" v-model="form.parentId"
@ -166,66 +129,18 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="24">
<el-form-item label="部门名称" prop="deptName"> <el-form-item label="部门描述" prop="remark">
<el-input <el-input
v-model="form.deptName" type="textarea"
placeholder="请输入部门名称" maxlength="100"
show-word-limit
v-model="form.remark"
placeholder="请输入部门描述"
:autosize="{ minRows: 6, maxRows: 10 }"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12">
<el-form-item label="显示排序" prop="orderNum">
<el-input-number
v-model="form.orderNum"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="负责人" prop="leader">
<el-input
v-model="form.leader"
placeholder="请输入负责人"
maxlength="20"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" prop="phone">
<el-input
v-model="form.phone"
placeholder="请输入联系电话"
maxlength="11"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input
v-model="form.email"
placeholder="请输入邮箱"
maxlength="50"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="部门状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio
>
</el-radio-group>
</el-form-item>
</el-col>
</el-row> </el-row>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -279,13 +194,13 @@ export default {
form: {}, form: {},
// 表单校验 // 表单校验
rules: { rules: {
parentId: [ // parentId: [
{ // {
required: true, // required: false,
message: '上级部门不能为空', // message: '上级部门不能为空',
trigger: 'blur', // trigger: 'blur',
}, // },
], // ],
deptName: [ deptName: [
{ {
required: true, required: true,
@ -356,6 +271,7 @@ export default {
phone: undefined, phone: undefined,
email: undefined, email: undefined,
status: '0', status: '0',
remark: undefined,
} }
this.resetForm('form') this.resetForm('form')
}, },
@ -371,9 +287,9 @@ export default {
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd(row) { handleAdd(row) {
this.reset() this.reset()
if (row != undefined) { // if (row != undefined) {
this.form.parentId = row.deptId // this.form.parentId = row.deptId
} // }
this.open = true this.open = true
this.title = '添加部门' this.title = '添加部门'
listDept().then((response) => { listDept().then((response) => {
@ -393,6 +309,9 @@ export default {
this.reset() this.reset()
getDept(row.deptId).then((response) => { getDept(row.deptId).then((response) => {
this.form = response.data this.form = response.data
this.form.parentId === 0
? (this.form.parentId = undefined)
: null
this.open = true this.open = true
this.title = '修改部门' this.title = '修改部门'
listDeptExcludeChild(row.deptId).then((response) => { listDeptExcludeChild(row.deptId).then((response) => {
@ -419,7 +338,15 @@ export default {
this.getList() this.getList()
}) })
} else { } else {
addDept(this.form).then((response) => { const { deptName, parentId, remark } = this.form
const params = { deptName, remark }
if (parentId === undefined) {
params.parentId = 0
} else {
params.parentId = parentId
}
addDept(params).then((response) => {
this.$modal.msgSuccess('新增成功') this.$modal.msgSuccess('新增成功')
this.open = false this.open = false
this.getList() this.getList()
@ -431,7 +358,7 @@ export default {
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
this.$modal this.$modal
.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？') .confirm('是否确认删除名称为' + row.deptName + '的数据项？')
.then(function () { .then(function () {
return delDept(row.deptId) return delDept(row.deptId)
}) })