| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-row :gutter="16" class="content-row"> |
| | | <!-- 左侧台账 + 顶部筛选 --> |
| | | <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"> |
| | | <el-radio-group v-model="searchForm.dateType" size="small" @change="handleDateTypeChange"> |
| | | <el-radio-button label="day">日</el-radio-button> |
| | | <el-radio-button label="month">月</el-radio-button> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="日期:" prop="dateRange"> |
| | | <el-date-picker |
| | | v-model="searchForm.dateRange" |
| | | :type="searchForm.dateType === 'day' ? 'date' : 'daterange'" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD" |
| | | style="width: 200px" |
| | | @change="handleDateRangeChange" |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <PIMTable |
| | | rowKey="id" |
| | | :column="leftTableColumn" |
| | | :tableData="leftTableData" |
| | | :tableLoading="tableLoading" |
| | | :page="page" |
| | | @row-click="handleLeftRowClick" |
| | | @pagination="pagination" |
| | | ></PIMTable> |
| | | </div> |
| | | </el-col> |
| | | |
| | | <!-- 右侧明细 --> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16" class="right-col"> |
| | | <div class="right-panel"> |
| | | <div class="table_list"> |
| | | <el-row :gutter="16" class="content-row"> |
| | | <!-- 左侧台账 + 顶部筛选 --> |
| | | <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"> |
| | | <el-radio-group v-model="searchForm.dateType" size="small" @change="handleDateTypeChange"> |
| | | <el-radio-button label="day">日</el-radio-button> |
| | | <el-radio-button label="month">月</el-radio-button> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="日期:" prop="dateRange"> |
| | | <el-date-picker |
| | | v-model="searchForm.dateRange" |
| | | :type="searchForm.dateType === 'day' ? 'date' : 'daterange'" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD" |
| | | style="width: 200px" |
| | | @change="handleDateRangeChange" |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <PIMTable |
| | | rowKey="id" |
| | | :column="leftTableColumn" |
| | | :tableData="leftTableData" |
| | | :tableLoading="tableLoading" |
| | | :page="page" |
| | | @row-click="handleLeftRowClick" |
| | | @pagination="pagination" |
| | | ></PIMTable> |
| | | </div> |
| | | </el-col> |
| | | |
| | | <el-form inline> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="handleOut">导出</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <PIMTable |
| | | rowKey="id" |
| | | :column="tableColumn" |
| | | :tableData="tableData" |
| | | :page="page1" |
| | | :tableLoading="tableLoading1" |
| | | style="margin-right: 20px;" |
| | | @pagination="pagination1" |
| | | ></PIMTable> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <!-- 右侧明细 --> |
| | | <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" |
| | | :tableData="tableData" |
| | | :page="page1" |
| | | :tableLoading="tableLoading1" |
| | | style="margin-right: 20px;" |
| | | @pagination="pagination1" |
| | | ></PIMTable> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |