导出execl

  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>