|
|
@@ -1,12 +1,13 @@
|
|
|
<template>
|
|
|
<div class="admin-function" style="width:95%;margin:0 auto;border:1px solid #C0C0C0 ;padding:20px">
|
|
|
- <el-form :inline="true" style="width:400px;">
|
|
|
+ <el-form :inline="true" >
|
|
|
<el-form-item v-if="$permission('/admin/function/check')">
|
|
|
<el-input v-model="queryParams.name" size="small" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="" size="small" @click="getList2" v-if="$permission('/admin/function/check')">查询</el-button>
|
|
|
<el-button type="primary" size="small" @click="handleAdd(0)" v-if="$permission('/admin/function/add')">新增</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="exportExcel" v-if="$permission('/admin/apply/exportExcel')">导出EXCEL</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<el-table
|
|
|
@@ -131,6 +132,7 @@ export default {
|
|
|
sign: [{ required: true, message: '请输入功能标识', trigger: 'blur' },],
|
|
|
// describe: [{ required: true, message: '请输入描述', trigger: 'blur' },],
|
|
|
},
|
|
|
+ res:''
|
|
|
}
|
|
|
},
|
|
|
watch:{
|
|
|
@@ -144,6 +146,70 @@ export default {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
+ getChildren(item,fields,upName,apply){
|
|
|
+ item.forEach((item2,index)=>{
|
|
|
+ this.res += `<tr style="mso-number-format:'\@';height:45px;line-height:45px;text-align:center;" >`
|
|
|
+
|
|
|
+ for (const key in fields) {
|
|
|
+ if(key == 'applyName'){
|
|
|
+ this.res += `<td style='width:150px'>${apply}</td>`
|
|
|
+ } else if(key == 'upName'){
|
|
|
+ this.res += `<td style='width:150px'>${upName}</td>`
|
|
|
+ }else if(key == 'sign'){
|
|
|
+ this.res += `<td style='width:200px'>${item2[key] != undefined ? item2[key] : ''}</td>`
|
|
|
+ }else{
|
|
|
+ if(!upName){
|
|
|
+ this.res += `<td style='background:#00B0F0;width:150px'>${item2[key] != undefined ? item2[key] : ''}</td>`
|
|
|
+ }else if(item2.children && item2.children.length>0){
|
|
|
+ this.res += `<td style='background:#FFFD0B;width:150px'>${item2[key] != undefined ? item2[key] : ''}</td>`
|
|
|
+ }else{
|
|
|
+ this.res += `<td style='width:150px'>${item2[key] != undefined ? item2[key] : ''}</td>`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.res += '</tr>'
|
|
|
+ if(item2.children && item2.children.length>0){
|
|
|
+ this.getChildren(item2.children,fields,item2.name,apply)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ exportExcel(){
|
|
|
+ const fields = {
|
|
|
+ name: '功能',
|
|
|
+ applyName: '所属应用',
|
|
|
+ upName:'上级功能',
|
|
|
+ sign:'路径'
|
|
|
+ }
|
|
|
+ // 拼接标题行
|
|
|
+ const head = Object.values(fields).map(item => {
|
|
|
+ return `<td style='background:#FFC000;font-weight: bold;'>${item}</td>`
|
|
|
+ }).join('')
|
|
|
+ // 拼接数据行
|
|
|
+ var arr = []
|
|
|
+ arr.push(this.tableData.children)
|
|
|
+ const body = arr.map(item=>{
|
|
|
+ this.getChildren(item,fields,'',this.tableData.applyName)
|
|
|
+
|
|
|
+ return this.res
|
|
|
+ }).join()
|
|
|
+ const worksheet = '功能清单'
|
|
|
+ const url = 'data:application/vnd.ms-excel;base64,'
|
|
|
+
|
|
|
+ // 下载的表格模板数据
|
|
|
+ const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
|
|
|
+ xmlns:x="urn:schemas-microsoft-com:office:excel"
|
|
|
+ xmlns="http://www.w3.org/TR/REC-html40">
|
|
|
+ <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
|
|
|
+ <x:Name>${worksheet}</x:Name>
|
|
|
+ <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
|
|
|
+ </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
|
|
|
+ </head><body><table><tr style="mso-number-format:'\@';height:45px;line-height:45px;text-align:center;width:150px;">${head}</tr>${body}</table></body></html>`
|
|
|
+ // 下载模板
|
|
|
+ let link = document.createElement('a')
|
|
|
+ link.setAttribute('href', url + window.btoa(unescape(encodeURIComponent(template))))
|
|
|
+ link.setAttribute('download', this.tableData.applyName+'.xls')
|
|
|
+ link.click()
|
|
|
+ },
|
|
|
//根据条件查询
|
|
|
getList2(){
|
|
|
this.queryParams.current=1
|
