1 <template> 2 <div class="app-container company form-style"> 3 <div style="overflow:hidden"> 4 <div style="float:left;28%" class="left-area"> 5 <el-input v-model="filterText" placeholder="输入关键字进行过滤" /> 6 <el-tree 7 ref="tree" 8 v-loading="loading" 9 accordion 10 render-after-expand 11 node-key="value" 12 style="height:350px;overflow:auto;margin-top:10px" 13 :props="props" 14 :data="deptTreeList" 15 :filter-node-method="filterNode" 16 :default-expanded-keys="defaultShowNodes" 17 @node-click="handleNodeClick" 18 > 19 <span slot-scope="{ node }" class="span-ellipsis"> 20 <span :title="node.label">{{ node.label }}</span> 21 </span> 22 </el-tree> 23 </div> 24 <!-- 右侧搜索+table --> 25 <div style="float:right;70%" class="right-area"> 26 <ct-form ref="form" :inline="true" :model="form"> 27 <el-form-item label="利润中心编码"> 28 <ct-input v-model="queryItem.profitcenter_code" /> 29 </el-form-item> 30 <el-form-item label="利润中心名称"> 31 <ct-input v-model="queryItem.profitcenter_name" /> 32 </el-form-item> 33 <ct-select 34 label="状态" 35 select-prop="status" 36 placeholder="请选择" 37 :select-value="queryItem.status" 38 :select-data-list="form.statusOptions" 39 @selectChange="statusChange" 40 /> 41 <ct-button style="margin-left:5px" @click="getTable">查询</ct-button> 42 <ct-button @click="handleDownload(table.list)">导出当前</ct-button> 43 <ct-button @click="exportAll">导出全部</ct-button> 44 <ct-button v-if="false" @click="add">新增</ct-button> 45 </ct-form> 46 <div class="table-style"> 47 <ct-tables 48 v-loading="loading" 49 element-loading-text="数据加载中" 50 :list="table.list" 51 :options="table.options" 52 class="table" 53 > 54 <el-table-column 55 label="利润中心编码" 56 width="120" 57 prop="profitcenter_code" 58 align="center" 59 /> 60 <el-table-column 61 label="利润中心名称" 62 :show-overflow-tooltip="isShowText" 63 prop="profitcenter_name" 64 align="center" 65 /> 66 <el-table-column 67 label="利润中心组编码" 68 width="130" 69 prop="profitcenter_group_code" 70 align="center" 71 /> 72 <el-table-column 73 label="利润中心组名称" 74 width="130" 75 :show-overflow-tooltip="isShowText" 76 prop="profitcenter_group_name" 77 align="center" 78 /> 79 <el-table-column label="账套编码" width="90" prop="account_code" align="center" /> 80 <el-table-column label="账套名称" width="90" prop="account_name" align="center" /> 81 <el-table-column label="启用状态" width="90" prop="status_name" align="center" /> 82 <el-table-column 83 v-if="false" 84 label="操作" 85 prop="profitcenter_code" 86 align="center" 87 > 88 <template slot-scope="scope"> 89 <ct-button type="save" @click="edit(scope.row)">修改</ct-button> 90 </template> 91 </el-table-column> 92 </ct-tables> 93 <ct-pagination :child-msg="table.page" @callFather="getPagination" /> 94 </div> 95 </div> 96 </div> 97 </div> 98 </template> 99 <script> 100 import { getCompany, getSelect } from '@/api/base/company' 101 export default { 102 data() { 103 return { 104 defaultShowNodes: [], // 默认展开的节点 105 organs: this.$store.state.user.organs, 106 isShowText: true, 107 form: { 108 statusOptions: [ 109 { 110 label: '全部', 111 value: '' 112 }, 113 { 114 label: '启用', 115 value: '10' 116 }, 117 { 118 label: '停用', 119 value: '20' 120 } 121 ], 122 accountOptions: [] 123 }, 124 queryItem: { 125 account_code: '', 126 profitcenter_code: '', 127 profitcenter_name: '', 128 status: '', 129 profitcenter_group_code: '' 130 }, 131 // td模拟数据 业务中以下字段前台与后台须商定好 132 table: { 133 list: [], 134 options: { 135 stripe: true, // 是否为斑马纹 table 136 highlightCurrentRow: true, // 是否支持当前行高亮显示 137 mutiSelect: true // 是否支持列表项选中功能 138 }, 139 page: { 140 size: 10, 141 pages: 0, 142 current: 1, 143 total: 0 144 } 145 }, 146 loading: true, 147 filterText: '', 148 deptTreeList: [], 149 list: [], 150 props: { 151 label: 'label', 152 children: 'children', 153 isLeaf: 'isLeaf' 154 } 155 } 156 }, 157 watch: { 158 filterText(val) { 159 this.$refs.tree.filter(val) 160 }, 161 deptTreeList: { 162 handler() { 163 // 默认展开2级 164 this.deptTreeList.forEach(item => { 165 // item.children.forEach(items => { 166 // this.defaultShowNodes.push(items.value) 167 // }) 168 // 改为默认展开1级 169 this.defaultShowNodes.push(item.value) 170 }) 171 }, 172 deep: true 173 } 174 }, 175 mounted() { 176 // 初始化部门树 177 this.getAccountCompanySelect() 178 this.$nextTick(() => { 179 this.TreeChangeStyle() 180 }) 181 this.loading = false 182 }, 183 methods: { 184 // 新增start 185 filterNode(value, data) { 186 if (!value) return true 187 return data.label.indexOf(value) !== -1 188 }, 189 handleNodeClick(data, node) { 190 if (data.children !== null && data.children !== undefined) { 191 this.queryItem.profitcenter_code = '' 192 this.queryItem.profitcenter_group_code = data.value 193 } else { 194 this.queryItem.profitcenter_group_code = '' 195 this.queryItem.profitcenter_code = data.value 196 } 197 this.getTable() 198 this.$nextTick(() => { 199 this.TreeChangeStyle() 200 }) 201 }, 202 // 获取公司树 203 getAccountCompanySelect() { 204 getSelect().then(res => { 205 res.data.forEach(item => { 206 this.deleteNullChildren(item) 207 }) 208 this.deptTreeList = res.data 209 this.queryItem.profitcenter_group_code = this.deptTreeList[0].value 210 const query = { profitcenter_group_code: this.queryItem.profitcenter_group_code, size: 10, current: 1 } 211 getCompany(query).then(res => { 212 this.table.list = res.data.records 213 this.table.page.size = res.data.size 214 this.table.page.current = res.data.current 215 this.table.page.pages = res.data.pages 216 this.table.page.total = res.data.total 217 }) 218 }) 219 }, 220 deleteNullChildren(obj) { 221 if (obj.children instanceof Array && obj.children.length > 0) { 222 obj.children.forEach(item => { 223 this.deleteNullChildren(item) 224 }) 225 } else { 226 delete obj.children 227 } 228 }, 229 // 新增end 230 edit(row) { 231 const profitcenter_code = row.profitcenter_code 232 this.$router.push({ 233 path: '/base/company/edit', 234 query: { profitcenter_code: profitcenter_code } 235 }) 236 }, 237 getTable() { 238 this.table.page.current = 1 239 const query = { ...this.queryItem, ...this.table.page } 240 this.loading = true 241 getCompany(query).then(res => { 242 this.table.list = res.data.records 243 this.table.page.size = res.data.size 244 this.table.page.current = res.data.current 245 this.table.page.pages = res.data.pages 246 this.table.page.total = res.data.total 247 this.loading = false 248 }) 249 }, 250 getPagination(page) { 251 const query = { ...this.queryItem, ...page } 252 getCompany(query).then(res => { 253 this.table.list = res.data.records 254 this.table.page.size = res.data.size 255 this.table.page.current = res.data.current 256 this.table.page.pages = res.data.pages 257 this.table.page.total = res.data.total 258 this.loading = false 259 }) 260 }, 261 exportAll() { 262 const page = JSON.parse(JSON.stringify(this.table.page)) 263 page.size = page.total 264 getCompany(page).then(res => { 265 const list = res.data.records 266 this.handleDownload(list) 267 }) 268 }, 269 handleDownload(list) { 270 import('@/vendor/Export2Excel').then(excel => { 271 const tHeader = [ 272 '利润中心编码', 273 '利润中心名称', 274 '利润中心组编码', 275 '利润中心组名称', 276 '账套编码', 277 '账套名称', 278 '启用状态' 279 ] 280 const filterVal = [ 281 'profitcenter_code', 282 'profitcenter_name', 283 'profitcenter_group_code', 284 'profitcenter_group_name', 285 'account_code', 286 'account_name', 287 'status_name' 288 ] // 过滤表格输出的数据 289 const data = this.formatJson(filterVal, list) 290 excel.export_json_to_excel({ 291 header: tHeader, 292 data, 293 filename: '公司信息', 294 autoWidth: true 295 }) 296 }) 297 }, 298 formatJson(filterVal, jsonData) { 299 return jsonData.map(v => filterVal.map(j => v[j])) 300 }, 301 add() { 302 this.$router.push({ 303 path: '/base/company/add' 304 }) 305 }, 306 statusChange(val) { 307 this.queryItem.status = val 308 }, 309 TreeChangeStyle() { 310 // eslint-disable-next-line no-empty-character-class 311 if (navigator.appName === 'Microsoft Internet Explorer' && parseInt(navigator.appVersion.split(';')[1].replace(/[]/g, '').replace('MSIE', '')) < 10) { 312 // console.log("您的浏览器版本过低，请使用IE10及以上版本") 313 var change = document.getElementsByClassName('el-tree-node__expand-icon') 314 change.forEach((item) => { 315 item.style.display = 'none' 316 }) 317 } 318 } 319 } 320 } 321 </script> 322 <style lang="scss" scoped> 323 .company{ 324 .left-area{ 325 .el-input { 326 100%; 327 } 328 } 329 .right-area{ 330 .el-form--inline .el-form-item { 331 margin-right: 0px; 332 vertical-align: inherit; 333 } 334 } 335 } 336 </style>