|
|
@@ -1,6 +1,40 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <!--机构数据-->
|
|
|
+ <el-col :span="4" :xs="24">
|
|
|
+ <div class="head-container">
|
|
|
+ <el-input
|
|
|
+ v-model="deptName"
|
|
|
+ placeholder="请输入机构名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="tree-container">
|
|
|
+ <div style="margin-bottom: 10px;">
|
|
|
+ <el-checkbox v-model="queryParams.checkSub" @change="changeCheckBox">是否关联下级机构</el-checkbox>
|
|
|
+ </div>
|
|
|
+ <el-tree
|
|
|
+ :data="deptOptions"
|
|
|
+ :props="defaultProps"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ ref="tree"
|
|
|
+ node-key="id"
|
|
|
+ :default-expanded-keys="defaultKeys"
|
|
|
+ :default-checked-keys="defaultKeys"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <!--用户数据-->
|
|
|
+ <el-col :span="20" :xs="24">
|
|
|
+
|
|
|
+ <!-- 搜索条件 -->
|
|
|
+ <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
|
|
|
<el-form-item label="机构名称" prop="name">
|
|
|
<el-input
|
|
|
v-model="queryParams.name"
|
|
|
@@ -36,39 +70,24 @@
|
|
|
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-col>
|
|
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
</el-row>
|
|
|
|
|
|
- <el-table
|
|
|
- v-if="refreshTable"
|
|
|
- v-loading="loading"
|
|
|
- :data="deptList"
|
|
|
- row-key="id"
|
|
|
- :default-expand-all="isExpandAll"
|
|
|
- :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
|
- >
|
|
|
- <el-table-column prop="name" label="机构名称" width="260"></el-table-column>
|
|
|
- <el-table-column prop="sort" label="排序" width="200"></el-table-column>
|
|
|
- <el-table-column prop="isLock" 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">
|
|
|
- <span>{{ parseTime(scope.row.createTime) }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <el-table v-loading="loading" :data="deptList" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column prop="name" label="机构名称" width="260"></el-table-column>
|
|
|
+ <el-table-column prop="sort" label="排序" width="200"></el-table-column>
|
|
|
+ <el-table-column prop="isLock" label="状态" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.isLock"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="创建时间" align="center" prop="createTime" width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ parseTime(scope.row.createTime) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
@@ -94,7 +113,17 @@
|
|
|
>删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- </el-table>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total>0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
|
|
|
<!-- 添加或修改机构对话框 -->
|
|
|
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
|
|
|
@@ -159,7 +188,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
|
|
|
+import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild} from "@/api/system/dept";
|
|
|
+import { deptTreeSelect } from "@/api/system/public";
|
|
|
+import { getToken } from "@/utils/auth";
|
|
|
import Treeselect from "@riophae/vue-treeselect";
|
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
|
|
|
@@ -175,6 +206,8 @@ export default {
|
|
|
showSearch: true,
|
|
|
// 表格树数据
|
|
|
deptList: [],
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
// 机构树选项
|
|
|
deptOptions: [],
|
|
|
// 弹出层标题
|
|
|
@@ -185,10 +218,21 @@ export default {
|
|
|
isExpandAll: false,
|
|
|
// 重新渲染表格状态
|
|
|
refreshTable: true,
|
|
|
+ // 机构名称
|
|
|
+ deptName: undefined,
|
|
|
+ //是否关联下级
|
|
|
+ checked: false,
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: "name"
|
|
|
+ },
|
|
|
// 查询参数
|
|
|
queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
name: undefined,
|
|
|
- status: undefined
|
|
|
+ status: undefined,
|
|
|
+ parentId:undefined,
|
|
|
},
|
|
|
// 表单参数
|
|
|
form: {},
|
|
|
@@ -217,18 +261,67 @@ export default {
|
|
|
trigger: "blur"
|
|
|
}
|
|
|
]
|
|
|
- }
|
|
|
+ },
|
|
|
+ //默认选中节点
|
|
|
+ defaultKeys:[]
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
+ this.getDeptTree();
|
|
|
this.getList();
|
|
|
},
|
|
|
methods: {
|
|
|
+ //自定义数据
|
|
|
+ tenantIdnormalizer(node, instanceId) {
|
|
|
+ if (node.children && !node.children.length) {
|
|
|
+ delete node.children
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ id: node.id,
|
|
|
+ label: node.name,
|
|
|
+ children: node.children
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 下穿状态改变*/
|
|
|
+ changeCheckBox(){
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 查询机构列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ listDept(this.queryParams).then(response => {
|
|
|
+ this.deptList = response.rows;
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 查询机构下拉树结构 */
|
|
|
+ getDeptTree() {
|
|
|
+ deptTreeSelect().then(response => {
|
|
|
+ this.deptOptions = response.data;
|
|
|
+ console.log( this.deptOptions,' this.deptOptions')
|
|
|
+ this.defaultKeys.push(response.data[0].id);
|
|
|
+ this.queryParams.parentId = response.data[0].id;
|
|
|
+ this.handleQuery();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 筛选节点
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.name.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+ // 节点单击事件
|
|
|
+ handleNodeClick(data) {
|
|
|
+ this.queryParams.parentId = data.id;
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
/** 查询机构列表 */
|
|
|
getList() {
|
|
|
this.loading = true;
|
|
|
listDept(this.queryParams).then(response => {
|
|
|
- this.deptList = this.handleTree(response.data, "id");
|
|
|
+ // this.deptList = this.handleTree(response.data, "id");
|
|
|
+ this.deptList = response.rows;
|
|
|
+ this.total = response.total;
|
|
|
this.loading = false;
|
|
|
});
|
|
|
},
|
|
|
@@ -334,7 +427,23 @@ export default {
|
|
|
this.getList();
|
|
|
this.$modal.msgSuccess("删除成功");
|
|
|
}).catch(() => {});
|
|
|
+ },
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map(item => item.userId);
|
|
|
+ this.single = selection.length != 1;
|
|
|
+ this.multiple = !selection.length;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // 根据名称筛选机构树
|
|
|
+ deptName(val) {
|
|
|
+ this.$refs.tree.filter(val);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+</style>
|