pref_mail@163.com
1 year ago
11 changed files with 296 additions and 75 deletions
@ -0,0 +1,206 @@
|
||||
<template> |
||||
<!-- 表格组件 --> |
||||
<div class='el-content-el' ref='TabHeight'> |
||||
<!-- 顶部开始 --> |
||||
<div class="el-Cart-button"> |
||||
<!-- 表格顶部左侧按钮 --> |
||||
<div class="el-Cart-button-left"> |
||||
<el-button type="primary" @click="handleAdd"><el-icon><Plus /></el-icon>新 增</el-button> |
||||
<el-button @click="handleDelete"><el-icon><Delete /></el-icon>删 除</el-button> |
||||
<el-button @click="handleDelete"><el-icon><Edit /></el-icon>查看维修记录</el-button> |
||||
</div> |
||||
<!-- 表格顶部右侧按钮 --> |
||||
<div class="el-Cart-button-right"> |
||||
<!-- 刷新按钮 --> |
||||
<button> |
||||
<el-icon color="#ccc"><Refresh /></el-icon> |
||||
</button> |
||||
<!-- 功能按钮 --> |
||||
<button> |
||||
<el-icon color="#ccc"><Operation /></el-icon> |
||||
</button> |
||||
<!-- 搜索按钮 --> |
||||
<button> |
||||
<el-icon color="#ccc"><Search /></el-icon> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
<!-- 顶部结束 --> |
||||
|
||||
<div class='el-Cart'> |
||||
<!-- 表格列开始 --> |
||||
<el-table :data="data" border :height="TabHeight+'px'" style="width: 100%; "> |
||||
<el-table-column type="selection" width="55" fixed="left"/> |
||||
<el-table-column type="index" fixed="left" width="50" height="100" label="#" align="center"/> |
||||
<el-table-column prop="name" label="产品名称" width="180" align="center " sortable/> |
||||
<el-table-column prop="model" label="型号" width="180" align="center " /> |
||||
<el-table-column prop="purchaseAmount" label="购买金额" width="180" align="center "/> |
||||
<el-table-column prop="state" label="状态" width="180" align="center "/> |
||||
<el-table-column prop="currentUsageWarehouse" label="当前使用仓" width="180" align="center "/> |
||||
<el-table-column prop="user" label="使用人" width="180" align="center " /> |
||||
<el-table-column prop="deviceSerialNumber" label="设备序列号S/N" width="180" align="center "/> |
||||
<el-table-column prop="userPosition" label="使用人岗位" width="180" align="center "/> |
||||
<el-table-column prop="isDeposit" label="是否收取押金" width="180" align="center "/> |
||||
<el-table-column prop="deposit" label="押金金额(元)" width="180" align="center "/> |
||||
<el-table-column prop="purchasingCompany" label="采购公司" width="180" align="center "/> |
||||
<el-table-column prop="buyingTime" label="购买时间" width="180" align="center "/> |
||||
<el-table-column prop="warrantyPeriodEndTime" label="保修截止时间" width="180" align="center "/> |
||||
<el-table-column prop="notes" label="备注" width="180" align="center "/> |
||||
<el-table-column label="商品图片" width="180" align="center" > |
||||
<template #default="props"> |
||||
<img :src="props.row.photo" class='el-Img'> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column fixed="right" label="操作" width="280" align="center "> |
||||
<template #default> |
||||
<el-button link type="primary" icon="el-icon-delete" @click="handleDelete">删除</el-button> |
||||
<el-button link type="primary" icon="el-icon-view" @click="handleEdit(row)">编辑</el-button> |
||||
<el-button link type="primary" icon="el-icon-view" @click="handleview(row)">查看</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<!-- 表格翻页功能 --> |
||||
<div class="demo-pagination-block"> |
||||
<el-pagination |
||||
v-model:current-page="currentPage" |
||||
v-model:page-size="pageSize" |
||||
:page-sizes="pageList" |
||||
:small="small" |
||||
:disabled="disabled" |
||||
:background="background" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="2" |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, reactive,onMounted } from 'vue'; |
||||
import { getList, getDetail, add, update, remove,$_TableList } from '@/api/basic/basicPda'; //API |
||||
const currentPage = ref(1); // 默认页码 |
||||
const pageSize = ref(30); // 默认每一页几条 |
||||
const pageList = ref([5, 10, 50, 100, 200]); // 选择每页显示多少条 |
||||
const small = ref(false); |
||||
const background = ref(true); // 是否开启背景颜色 |
||||
const disabled = ref(false); // 是否禁止使用页码功能 |
||||
const data = ref([]); // 表单数据 |
||||
const TabHeight = ref();//动态获取表格高度 |
||||
// 获取表格数据 |
||||
function onLoad(){ |
||||
// 获取表格数据API（$_TableList） |
||||
$_TableList({ current:currentPage.value, size: pageSize.value }).then(res=>{ |
||||
console.log(res.data.data.records); |
||||
//表格信息 |
||||
data.value=res.data.data.records |
||||
}) |
||||
} |
||||
// 动态获取DOM高度给表单防止页面出现滚动条 |
||||
onMounted(() => { |
||||
// 默认值86 |
||||
TabHeight.value = TabHeight.value.offsetHeight-88; |
||||
// 等待DOM高度被复制之后在请求数据，防止被数据撑开高度 |
||||
onLoad() |
||||
}) |
||||
</script> |
||||
|
||||
<style scoped lang='scss'> |
||||
// 最外层 IDV |
||||
.el-content-el { |
||||
padding: 0 8px; |
||||
padding-top:8px; |
||||
background-color: #fff; |
||||
height: 100%; |
||||
box-sizing: border-box; |
||||
// 表格顶部按钮 |
||||
:deep(.el-Cart-button) { |
||||
margin-bottom: 5px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
// 表格顶部左侧、右侧按钮样式 |
||||
.el-Cart-button-left,.el-Cart-button-right{ |
||||
display: flex; |
||||
margin: 0 0px; |
||||
justify-content: space-between; |
||||
} |
||||
.el-Cart-button-left{ |
||||
:deep( button){ |
||||
padding: 0 7px; |
||||
min-width: 70px; |
||||
display: flex; |
||||
span{ |
||||
width: 100%; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
i{ |
||||
margin-right: 6px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
.el-Cart-button-right { |
||||
display: flex; |
||||
margin: 0 0px; |
||||
justify-content: space-between; |
||||
button { |
||||
background-color: transparent; |
||||
border-radius: 50%; |
||||
width: 30px; |
||||
height: 30px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border: 1px solid #ccc; |
||||
margin-right: 8px; |
||||
|
||||
&:hover { |
||||
background-color: #172e601f; |
||||
i { |
||||
color: #0e2549; |
||||
} |
||||
} |
||||
// 去掉最后一个按钮右侧边距 |
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
} |
||||
.el-Cart { |
||||
// 表格标题颜色 |
||||
:deep(.el-table__header) { |
||||
th { |
||||
background-color: #fafafa; |
||||
color: #000; |
||||
} |
||||
} |
||||
// 组件样式开始 |
||||
// 分页样式 |
||||
.demo-pagination-block { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
margin-top: 6px; |
||||
} |
||||
|
||||
// 表格行高度 |
||||
:deep(.el-table__row) { |
||||
height: 60px; |
||||
} |
||||
// 表格图片 |
||||
.el-Img { |
||||
width: 100%; |
||||
height: 40px; |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue