优化页面

src/views/govern/manage/monthly.vue

@@ -1,15 +1,25 @@
 <template>
     <div class="default-main">
-        <TableHeader datePicker ref="refheader" showExport>
+        <TableHeader datePicker ref="refheader" >
             <template v-slot:select>
+                <el-form-item label="关键字筛选">
+                    <el-input
+                        v-model.trim="tableStore.table.params.name"
+                        placeholder="请输入关键字"
+                        clearable
+                    ></el-input>
+                </el-form-item>
                 <el-form-item label="流程阶段">
-                    <el-select v-model.trim="tableStore.table.params.process" clearable placeholder="请选择状态">
+                    <el-select v-model.trim="tableStore.table.params.process" clearable placeholder="请选择">
                         <el-option label="功能调试" :value="2"></el-option>
                         <el-option label="出厂调试" :value="3"></el-option>
                         <el-option label="正式投运" :value="4"></el-option>
                     </el-select>
                 </el-form-item>
             </template>
+            <template v-slot:operation>
+                <el-button type="primary" icon="el-icon-Download" @click="exportTab">导出</el-button>
+            </template>
         </TableHeader>
         <Table ref="tableRef" />
     </div>
@@ -64,10 +74,10 @@ const tableStore = new TableStore({
             title: '数据更新时间',
             field: 'latestTime',
             width: 180,
-            sortable: true,
-            formatter: (row: any) => {
-                return row.cellValue || '/'
-            }
+            sortable: true
+            // formatter: (row: any) => {
+            //     return row.cellValue || '/'
+            // }
         },
 
         {
@@ -83,6 +93,7 @@ const tableStore = new TableStore({
             title: '流程阶段',
             field: 'process',
             width: 100,
+            fixed: 'right',
             render: 'tag',
             custom: {
                 2: 'warning',
@@ -100,6 +111,7 @@ const tableStore = new TableStore({
             title: '运行状态',
             field: 'operationalStatus',
             render: 'tag',
+            fixed: 'right',
             width: 100,
             custom: {
                 停运: 'danger',
@@ -114,6 +126,7 @@ const tableStore = new TableStore({
             title: '通讯状态',
             field: 'communicationStatus',
             width: 100,
+            fixed: 'right',
             render: 'tag',
             custom: {
                 离线: 'danger',
@@ -125,17 +138,60 @@ const tableStore = new TableStore({
             }
         },
 
-        { title: '在线率(%)', width: 100, field: 'onlineRate', sortable: true },
-        { title: '完整性(%)', width: 100, field: 'integrity', sortable: true }
+        { title: '在线率(%)', fixed: 'right',width: 100, field: 'onlineRate', sortable: true },
+        { title: '完整性(%)', fixed: 'right',width: 100, field: 'integrity', sortable: true }
     ],
-    beforeSearchFun: () => {}
+    beforeSearchFun: () => {},
+    loadCallback: () => {
+        let name = tableStore.table.params.name
+        let data = tableStore.table.copyData.filter(item => {
+            // 处理latestTime默认值
+            item.latestTime = item.latestTime || '/'
+            // 需要检查的字段列表
+            const fieldsToCheck = ['projectName', 'engineeringName', 'mac', 'devName', 'lineName']
+            console.log(
+                '🚀 ~ fieldsToCheck.some(field => item[field]?.includes(name)):',
+                fieldsToCheck.some(field => item[field]?.includes(name))
+            )
+
+            // 检查任何一个字段包含搜索名称
+            return fieldsToCheck.some(field => item[field]?.includes(name))
+        })
+
+        tableStore.table.copyData = JSON.parse(JSON.stringify(data))
+        tableStore.table.total = tableStore.table.copyData.length
+        if (data.length == 0) {
+            tableStore.table.data = []
+        } else {
+            tableStore.table.data = JSON.parse(
+                JSON.stringify(
+                    window.XEUtils.chunk(data, tableStore.table.params.pageSize)[tableStore.table.params.pageNum - 1]
+                )
+            )
+        }
+    }
 })
 
 provide('tableStore', tableStore)
 tableStore.table.params.process = 4
-//   "target": [],
-//   "type": "",
-//   "userId": ""
+tableStore.table.params.name = ''
+const tableRef = ref()
+const exportTab = () => {
+    tableRef.value.getRef()?.exportData({
+        filename: '半月报功能', // 文件名字
+        sheetName: 'Sheet1',
+        type: 'xlsx', //导出文件类型 xlsx 和 csv
+        useStyle: true,
+        data: tableStore.table.copyData, // 数据源 // 过滤那个字段导出
+        columnFilterMethod: function (column: any) {
+            return !(
+                column.column.title === undefined ||
+                column.column.title === '序号' ||
+                column.column.title === '操作'
+            )
+        }
+    })
+}
 
 onMounted(() => {})
 setTimeout(() => {