style(油机SDK授权页面):在“授权码”为空的数据的"操作"列增加审核链接

feat(油机SDK授权页面):新增以excel表格导出数据的功能

admin.ui.plus-master/src/views/admin/authorize/fuelingsdk/index.vue

@@ -57,7 +57,7 @@
           </el-form>
           <div class="my-flex my-flex-end" >
             <el-button type="primary" icon="ele-UploadFilled" @click="uploadFiles"> 批量导入 </el-button>
-            <el-button type="primary" icon="ele-Document" @click="exportTable"> 导出表格 </el-button>
+            <el-button type="primary" icon="ele-Document" @click="exportTable(sdkData.tableModel,sdkData.dynamicColumns)"> 导出表格 </el-button>
           </div>
         </el-card>
       </el-col>
@@ -66,7 +66,7 @@
         <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
           <el-table v-loading="sdkData.loading" stripe :data="sdkData.tableModel" row-key="id" style="width: 100%">
             <el-table-column v-for="column in sdkData.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label"  />
-            <el-table-column label="操作"  fixed="right" header-align="center" align="center">
+            <el-table-column label="操作"  fixed="right" header-align="center" align="center" class="right-operation" width="100">
               <template #default="{ row }">
                 <el-link
                   class="my-el-link mr12 ml12"
@@ -77,6 +77,16 @@
                   :underline="false"
                   target="_blank"
                 >编辑</el-link>
+                <el-link
+                  class="my-el-link mr12 ml12"
+                  v-if="showAudit(row)"
+                  type="primary"
+                  icon="ele-Tickets"
+                  size="small"
+                  @click="onAuditRecord(row)"
+                  :underline="false"
+                  target="_blank"
+                >审核</el-link>
               </template>
             </el-table-column>
           </el-table>
@@ -85,7 +95,7 @@
               v-model:currentPage="sdkData.pageInput.CurrentPage"
               v-model:page-size="sdkData.pageInput.PageSize"
               :total="sdkData.total"
-              :page-sizes="[10, 20, 50, 100]"
+              :page-sizes="[10000, 20000, 50000, 100000]"
               small
               background
               @size-change="onSizeChange"
@@ -107,7 +117,8 @@ import {OilSdkAuthorDto, oilSdkFilterModel, oilSdkTableModel} from "/@/api/admin
 import {OilSdkAuthorAPI} from "/@/api/admin/deviceAuthorization/oilSdkAuthor";
 import type {pageInput} from "/@/api/admin/shareDto/shareDto";
 import eventBus from "/@/utils/mitt";
-
+import * as ExcelJS from 'exceljs';
+import * as FileSaver from 'file-saver';
 /**引入组件*/
 const EditDialog = defineAsyncComponent(() => import('/src/views/admin/authorize/fuelingsdk/components/form-edit.vue'))
 
@@ -149,7 +160,7 @@ const sdkData = reactive({
   /**分页标识 */
   pageInput:{
     CurrentPage: 1,
-    PageSize: 10,
+    PageSize: 10000,
   } as pageInput,
   /**分页总数 */
   total: 0,
@@ -234,8 +245,67 @@ const uploadFiles = () =>{
 }
 
 /**导出表格*/
-const exportTable = () =>{
+const exportTable = async(data:any[],columns:{ prop: string, label: string }[]) =>{
+  // 创建一个新的工作簿
+  const workbook = new ExcelJS.Workbook();
+  const worksheet = workbook.addWorksheet('Sheet1');
+
+// 添加表头（不包括名为 "guid" 的表头列）
+  const headers = columns
+    .filter(column => column.prop !== 'guid')  // 过滤掉名为 "guid" 的表头列
+    .map(column => column.label);
+  const headerRow = worksheet.addRow(headers);
+
+  // 添加数据行（不包括 "guid" 的数据列）
+  data.forEach((item) => {
+    const row = columns
+      .filter(column => column.prop !== 'guid')  // 过滤掉名为 "guid" 的数据列
+      .map(column => item[column.prop]);
+    worksheet.addRow(row);
+  });
+
+// 设置数据行样式
+  worksheet.eachRow({ includeEmpty: true }, row => {
+    row.eachCell(cell => {
+      // 设置单元格样式
+      cell.font = { bold: false }; // 设置字体为普通样式
+      cell.border = { top: { style: 'thin' }, bottom: { style: 'thin' } }; // 设置上下边框为细线
+      cell.alignment = { vertical: 'middle', horizontal: 'center' }; // 将内容垂直居中、水平居中
+      // 设置单元格高度
+      row.height = 25; // 设置每一行的高度为 25
+    });
+  });
+
+  // 设置表头样式
+  headerRow.font = { bold: true }; // 设置字体为粗体
 
+  // 设置整个表格的边框样式
+  worksheet.eachRow({ includeEmpty: true }, row => {
+    row.eachCell(cell => {
+      if (cell.row === 1) {
+        // 设置表头单元格的边框为细线
+        cell.border = { left: { style: 'thin' }, right: { style: 'thin' }, top: { style: 'thin' }, bottom: { style: 'thin' } };
+        // 设置表头单元格背景颜色
+        cell.fill={type: 'pattern',pattern: 'solid',fgColor: { argb: '409eff' }}
+      } else {
+        // 设置数据行单元格的边框为细线
+        cell.border = { left: { style: 'thin' }, right: { style: 'thin' }, bottom: { style: 'thin' } };
+      }
+    });
+  });
+
+  // 调整单元格大小
+  worksheet.columns.forEach(column => {
+    column.width = 25; // 设置每列的宽度为 25
+  });
+
+
+  // 生成 Excel 文件
+  const buffer = await workbook.xlsx.writeBuffer();
+
+  // 将文件保存到本地
+  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+  FileSaver.saveAs(blob, '油气SDK授权数据.xlsx');
 }
 
 /**将Filter对象成.的连接方式*/
@@ -260,8 +330,17 @@ const flattenObject = (obj, parentKey = '') => {
 const editTableData = (row) => {
   editDialogRef.value.openDialog(row)
 }
-
-
+/**审核弹窗 */
+const onAuditRecord=(row)=>{
+  console.log(row.key)
+}
+/**授权码为空时显示审核按钮 */
+const showAudit=(row):boolean=>{
+  if(row.key){
+    return false
+  }
+  return true
+}
 </script>
 
 <style scoped lang="scss">