| | |
| | | <div class="app-container"> |
| | | <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"> |
| | | <el-form-item label="部门名称" prop="deptName"> |
| | | <el-input |
| | | v-model="queryParams.deptName" |
| | | placeholder="请输入部门名称" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | | <el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable @keyup.enter.native="handleQuery" /> |
| | | </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-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-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查 询</el-button> |
| | | <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重 置</el-button> |
| | | <el-button type="primary" size="mini" @click="handleQuery">查询</el-button> |
| | | <el-button size="mini" @click="resetQuery">重置</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <el-row :gutter="10" class="mb8"> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | icon="el-icon-plus" |
| | | size="mini" |
| | | @click="handleAdd" |
| | | v-hasPermi="['system:dept:add']" |
| | | >新增</el-button> |
| | | <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" |
| | | v-hasPermi="['system:dept:add']">新增</el-button> |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="info" |
| | | plain |
| | | icon="el-icon-sort" |
| | | size="mini" |
| | | @click="toggleExpandAll" |
| | | >展开/折叠</el-button> |
| | | <el-button type="info" 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 |
| | | v-if="refreshTable" |
| | | v-loading="loading" |
| | | :data="deptList" |
| | | row-key="deptId" |
| | | :default-expand-all="isExpandAll" |
| | | :tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
| | | > |
| | | <el-table v-if="refreshTable" v-loading="loading" :data="deptList" row-key="deptId" |
| | | :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border |
| | | :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"> |
| | | <el-table-column prop="deptName" label="部门名称" width="260"></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"/> |
| | | <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"> |
| | |
| | | </el-table-column> |
| | | <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-edit" |
| | | @click="handleUpdate(scope.row)" |
| | | v-hasPermi="['system:dept:edit']" |
| | | >修改</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" |
| | | type="text" |
| | | icon="el-icon-delete" |
| | | @click="handleDelete(scope.row)" |
| | | v-hasPermi="['system:dept:remove']" |
| | | >删除</el-button> |
| | | <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" |
| | | v-hasPermi="['system:dept:edit']">修改</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" type="text" icon="el-icon-delete" |
| | | @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | <el-row> |
| | | <el-col :span="24" v-if="form.parentId !== 0"> |
| | | <el-form-item label="上级部门" prop="parentId"> |
| | | <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" /> |
| | | <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" |
| | | placeholder="选择上级部门" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <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 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> |
| | |
| | | this.title = "添加部门"; |
| | | listDept().then(response => { |
| | | this.deptOptions = this.handleTree(response.data, "deptId"); |
| | | this.deptOptions = this.limitTreeDepth(this.deptOptions, 2) |
| | | }); |
| | | }, |
| | | /** 展开/折叠操作 */ |
| | |
| | | const noResultsOptions = { deptId: this.form.parentId, deptName: this.form.parentName, children: [] }; |
| | | this.deptOptions.push(noResultsOptions); |
| | | } |
| | | this.deptOptions = this.limitTreeDepth(this.deptOptions, 2) |
| | | }); |
| | | }); |
| | | }, |
| | | /** 提交按钮 */ |
| | | submitForm: function() { |
| | | submitForm: function () { |
| | | this.$refs["form"].validate(valid => { |
| | | if (valid) { |
| | | if (this.form.deptId != undefined) { |
| | |
| | | }, |
| | | /** 删除按钮操作 */ |
| | | handleDelete(row) { |
| | | this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function() { |
| | | this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function () { |
| | | return delDept(row.deptId); |
| | | }).then(() => { |
| | | this.getList(); |
| | | this.$modal.msgSuccess("删除成功"); |
| | | }).catch(() => {}); |
| | | }).catch(() => { }); |
| | | }, |
| | | // 递归函数,用于限制树的深度 |
| | | limitTreeDepth(options, maxDepth, currentDepth = 1) { |
| | | return options.map(option => { |
| | | const newOption = { ...option }; |
| | | if (currentDepth < maxDepth && option.children) { |
| | | // 如果当前深度小于最大深度且存在子节点,则递归处理子节点 |
| | | newOption.children = this.limitTreeDepth(option.children, maxDepth, currentDepth + 1); |
| | | } else { |
| | | // 否则移除子节点 |
| | | delete newOption.children; |
| | | } |
| | | return newOption; |
| | | }); |
| | | } |
| | | } |
| | | }; |