| | |
| | | <template> |
| | | <div class="home-container"> |
| | | <el-scrollbar height="100%"> |
| | | <div style="height: 100%"> |
| | | <el-row class="homeCard"> |
| | | <el-col :span="8"> |
| | | <div class="grid-content topInfo"> |
| | |
| | | <el-col :span="12" class="mainCardBtn"> |
| | | <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true" v-throttle>新建</el-button> |
| | | <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button> |
| | | <el-button type="success" size="default">设置分类</el-button> |
| | | <el-button type="success" size="default" plain>设置分类</el-button> |
| | | </el-col> |
| | | <el-button type="primary" :icon="Refresh" size="default"/> |
| | | </el-row> |
| | |
| | | ref="multipleTableRef" |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | height="calc(100% - 100px)" |
| | | :header-cell-style="{background: '#fafafa'}" |
| | | @selection-change="handleSelectionChange" |
| | | > |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <div class="pageBtn"> |
| | | <el-pagination |
| | | v-model:currentPage="currentPage" |
| | | v-model:page-size="pageSize" |
| | | :page-sizes="[10, 15]" |
| | | small=false |
| | | background |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="100" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | <div class="pageBtn"> |
| | | <el-pagination |
| | | v-model:currentPage="currentPage" |
| | | v-model:page-size="pageSize" |
| | | :page-sizes="[10, 15]" |
| | | small=false |
| | | background |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="100" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-scrollbar> |
| | | </div> |
| | | <el-dialog v-model="dialogAddRecord" title="审批流程编辑" @close="closeAdd"> |
| | | <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules"> |
| | | <el-form-item label="流程名称" prop="name"> |
| | |
| | | <style scoped lang="scss"> |
| | | $homeNavLengh: 8; |
| | | .home-container { |
| | | height: 100%; |
| | | height: calc(100vh - 114px); |
| | | box-sizing: border-box; |
| | | overflow: hidden; |
| | | padding: 20px; |
| | | .homeCard{ |
| | | width: 100%; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | background: #fff; |
| | | border-radius: 4px; |
| | | |
| | | .main-card{ |
| | | width: 100%; |
| | | height: 100%; |
| | | .cardTop{ |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-bottom: 20px; |
| | | .mainCardBtn{ |
| | | margin: 0; |
| | | } |
| | | } |
| | | .pageBtn{ |
| | | height: 60px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: right; |
| | | |
| | | .demo-pagination-block + .demo-pagination-block { |
| | | margin-top: 10px; |
| | | } |
| | | .demo-pagination-block .demonstration { |
| | | margin-bottom: 16px; |
| | | } |
| | | } |
| | | } |
| | | &:last-of-type{ |
| | | height: calc(100% - 100px); |
| | | } |
| | | } |
| | | .el-row{ |
| | | display: flex; |
| | |
| | | white-space: nowrap; |
| | | margin-right: 20px; |
| | | } |
| | | } |
| | | } |
| | | .mainPages{ |
| | | height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | } |
| | | .main-card{ |
| | | width: 100%; |
| | | .cardTop{ |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-bottom: 20px; |
| | | .mainCardBtn{ |
| | | margin: 0; |
| | | } |
| | | } |
| | | } |
| | | .pageBtn{ |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: right; |
| | | margin-top: 20px; |
| | | |
| | | .demo-pagination-block + .demo-pagination-block { |
| | | margin-top: 10px; |
| | | } |
| | | .demo-pagination-block .demonstration { |
| | | margin-bottom: 16px; |
| | | } |
| | | } |
| | | } |