| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="content-layout"> |
| | | <el-row :gutter="16" class="content-row"> |
| | | <!-- 左侧台账 + 顶部筛选 --> |
| | | <div class="left-panel"> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" class="left-col"> |
| | | <div class="left-panel"> |
| | | <div class="left-header"> |
| | | <el-form :model="searchForm" inline> |
| | | <el-form-item prop="dateType"> |
| | |
| | | end-placeholder="结束日期" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD" |
| | | style="width: 300px" |
| | | style="width: 200px" |
| | | @change="handleDateRangeChange" |
| | | /> |
| | | </el-form-item> |
| | |
| | | :tableData="leftTableData" |
| | | :tableLoading="tableLoading" |
| | | :page="page" |
| | | :height="200" |
| | | @row-click="handleLeftRowClick" |
| | | @pagination="pagination" |
| | | ></PIMTable> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | |
| | | <!-- 右侧明细(原有内容) --> |
| | | <div class="right-panel"> |
| | | <div class="header-filters"> |
| | | <el-button @click="handleOut" class="ml10">导出</el-button> |
| | | </div> |
| | | <!-- 右侧明细 --> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16" class="right-col"> |
| | | <div class="right-panel"> |
| | | |
| | | <el-form inline> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="handleOut">导出</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <PIMTable |
| | | rowKey="id" |
| | | :column="tableColumn" |
| | |
| | | style="margin-right: 20px;" |
| | | @pagination="pagination1" |
| | | ></PIMTable> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | label: "合格率", |
| | | prop: "outputRate", |
| | | minWidth: 100, |
| | | |
| | | formatData: (val) => { |
| | | if (val == null || val === '') return '-' |
| | | return parseFloat(val).toFixed(2) |
| | | }, |
| | | }, |
| | | ]); |
| | | |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .content-layout { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 16px; |
| | | .content-row { |
| | | width: 100%; |
| | | } |
| | | |
| | | .left-panel { |
| | | flex: 0 0 50%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10px; |
| | | .content-row .left-col, |
| | | .content-row .right-col { |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | | .left-panel, |
| | | .right-panel { |
| | | flex: 0 0 50%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10px; |
| | | min-width: 0; |
| | | } |
| | | |
| | | .left-header { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | | .left-title { |