logpm_page/src/views/datadetail/ToolUpdate.vue

<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>