1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
| <template>
| <div class="app-container">
| <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
| <el-form-item label="单元名称" prop="name">
| <el-input
| v-model="queryParams.name"
| placeholder="请输入单元名称"
| clearable
| size="small"
| @keyup.enter.native="handleQuery"
| />
| </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-form-item>
| </el-form>
|
| <el-table
| ref="singleTable"
| v-loading="loading"
| :data="buildingList"
| height="50vh"
| row-key="id"
| default-expand-all
| :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
| highlight-current-row
| @current-change="handleCurrentChange"
| >
| <el-table-column label="单元名称" align="center" prop="name"/>
| <el-table-column label="单元编号" prop="code"/>
| <el-table-column label="显示顺序" align="center" prop="orderNum"/>
| </el-table>
| </div>
| </template>
|
| <script>
| import {listBuilding} from "@/api/oa/building";
| import Treeselect from "@riophae/vue-treeselect";
| import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
| export default {
| name: "BuildingList",
| props: {
| schoolId: {
| type: Number,
| default: undefined
| }
| },
| components: {
| Treeselect
| },
| data() {
| return {
| // 按钮loading
| buttonLoading: false,
| // 遮罩层
| loading: true,
| // 显示搜索条件
| showSearch: true,
| // 建筑单元表格数据
| buildingList: [],
| // 建筑单元树选项
| buildingOptions: [],
| // 弹出层标题
| title: "",
| // 是否显示弹出层
| open: false,
| // 查询参数
| queryParams: {
| name: undefined,
| schoolId: this.schoolId
| },
| currentRow: undefined
| };
| },
| mounted() {
| this.getList()
| },
| methods: {
| /** 查询建筑单元列表 */
| getList() {
| this.loading = true;
| // 清空选中状态和数据
| if (this.currentRow) {
| this.$refs.singleTable.setCurrentRow();
| this.currentRow = undefined;
| }
| listBuilding(Object.assign({}, this.queryParams, {schoolId: this.schoolId})).then(response => {
| this.buildingList = this.handleTree(response.data, "id", "parentId");
| this.loading = false;
| });
| },
| /** 转换建筑单元数据结构 */
| normalizer(node) {
| if (node.children && !node.children.length) {
| delete node.children;
| }
| return {
| id: node.id,
| label: node.name,
| children: node.children
| };
| },
| /** 查询建筑单元下拉树结构 */
| getTreeselect() {
| listBuilding({schoolId: this.schoolId}).then(response => {
| this.buildingOptions = [];
| const data = {id: 0, name: '顶级节点', children: []};
| data.children = this.handleTree(response.data, "id", "parentId");
| this.buildingOptions.push(data);
| });
| },
| /** 搜索按钮操作 */
| handleQuery() {
| this.getList();
| },
| /** 重置按钮操作 */
| resetQuery() {
| this.resetForm("queryForm");
| this.handleQuery();
| },
| handleCurrentChange(v) {
| this.currentRow = v;
| }
| }
| };
| </script>
|
|
