vue3 front-end--Tree structure data exported to excel

//Tree data exported to excel
 const flattenTreeData=(data: any[])=> {
     let result: { 'Task Name': any; 'Publisher': string; 'Executor': string; 'Task Status': string; 'Level': string; 'Progress': string; }[] = [];
     const recurse = (node: { day_taskname: string; children: any[]; taskpubliername: string; taskrunername: string; taskstatename: string; layer: string; progress: string; }, parent = '') => {
         const item = {
             'Taskname': node.day_taskname,
             'Publisher': ,
             'Executor': ,
             'Task Status': ,
             'Level': ,
             'Progress': +'%',
             parent: parent,
            
         };
         (item);
         if ( && > 0) {
             (child => recurse(child, node.day_taskname));
         }
     };
     (item => recurse(item));
     return result;
 }
 export const exportTreeToExcel=(data: any[],filename:string)=> {
     // Flatten the tree data
     const flattenedData = flattenTreeData(data);
     // Convert flat data to worksheets
     const ws = .json_to_sheet(flattenedData);
     // Create a new workbook
     const wb = .book_new();
     .book_append_sheet(wb, ws, 'Sheet1');
     // Save the file
     const wbout = (wb, { bookType: 'xlsx', type: 'array' });
     saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename+'.xlsx');
 }

<el-dialog v-model="dialogFormTreeVisible" title="Task Tree" width="60%">
           <div style="display: flex;flex-direction: row;padding-bottom: 10px;" >
             <span style="font-size:16px;">File name:</span>
             <el-input type="text" label="filename" v-model="fileName" clearable placeholder="Please enter the excel file name" style="max-width: 180px;padding-right: 10px;"> </el-input>
             <el-button v-permission="'export'" type="primary" @click="exportTree(taskTreeData)">Export</el-button>
           </div>
           <el-table :data="taskTreeData" row-key="id" :tree-props="{ children: 'children' }" ref="taskTable">
             <el-table-column prop="day_taskname" align="left" label="task name" />
             <el-table-column prop="taskpubliername" align="left" label="Publisher" />
             <el-table-column prop="taskrunername" align="left" label="executor" />
             <el-table-column prop="taskstatename" align="left" label="task status" />
             <el-table-column prop="layer" align="left" label="hierarchy" />
             <el-table-column prop="progress" align="left" label="task progress" >
               <template #default="{ row }">
                 <el-progress :percentage="Number()" :color="customColorMethod(Number(),)"></el-progress>
               </template>
             </el-table-column>
           </el-table>
         </el-dialog>

const exportTree = async (dataList: any) => {
  
  const { props, labels } = getTableColumnsInfo();
  if ( === 0 ||  === 0) return;
  const filteredData = filterDataByProps(dataList, props);
  exportTreeToExcel(dataList,);
}