| | |
|---|
| | | </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" |
|---|
| | | <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" |
|---|
| | | <el-button |
|---|
| | | size="mini" |
|---|
| | | type="text" |
|---|
| | | icon="el-icon-plus" |
|---|
| | | @click="handleAdd(scope.row)" |
|---|
| | | v-hasPermi="['system:dept:add']" |
|---|
| | | >新增</el-button> |
|---|
| | |
|---|
| | | <el-row> |
|---|
| | | <el-col :span="24" v-if="form.parentId !== 0"> |
|---|
| | | <el-form-item label="上级部门" prop="parentId"> |
|---|
| | | <treeselect v-model="form.parentId" :options="deptOptions" placeholder="选择上级部门" /> |
|---|
| | | <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { listDept, getDept, treeselect, delDept, addDept, updateDept } from "@/api/system/dept"; |
|---|
| | | import { listDept, getDept, delDept, addDept, updateDept } from "@/api/system/dept"; |
|---|
| | | import Treeselect from "@riophae/vue-treeselect"; |
|---|
| | | import "@riophae/vue-treeselect/dist/vue-treeselect.css"; |
|---|
| | | |
|---|
| | |
|---|
| | | getList() { |
|---|
| | | this.loading = true; |
|---|
| | | listDept(this.queryParams).then(response => { |
|---|
| | | this.deptList = response.data; |
|---|
| | | this.deptList = this.handleTree(response.data, "deptId"); |
|---|
| | | this.loading = false; |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | /** 转换部门数据结构 */ |
|---|
| | | normalizer(node) { |
|---|
| | | if (node.children && !node.children.length) { |
|---|
| | | delete node.children; |
|---|
| | | } |
|---|
| | | return { |
|---|
| | | id: node.deptId, |
|---|
| | | label: node.deptName, |
|---|
| | | children: node.children |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | /** 查询部门下拉树结构 */ |
|---|
| | | getTreeselect() { |
|---|
| | | treeselect().then(response => { |
|---|
| | | this.deptOptions = response.data; |
|---|
| | | listDept().then(response => { |
|---|
| | | this.deptOptions = this.handleTree(response.data, "deptId"); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // 字典状态字典翻译 |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | </script> |
|---|
