439 lines
25 KiB
Vue
439 lines
25 KiB
Vue
|
<template>
|
|||
|
|
<div style="padding: 20px;background-color: #F2F8FC;">
|
|||
|
|
<TitleComponent title="备品备件管理" subtitle="管理光伏和风电设备的所有备品备件信息" />
|
|||
|
|
<el-card style="border-radius: 10px;">
|
|||
|
|
<div class="title">
|
|||
|
|
数据总览
|
|||
|
|
</div>
|
|||
|
|
<div class="list">
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="left">
|
|||
|
|
<div style="font-size: 14px;color:rgba(102, 102, 102, 1)">总备件数量</div>
|
|||
|
|
<div style="margin: 10px 0;">
|
|||
|
|
<span style="font-size: 24px;font-weight: bold;margin-right: 10px;">2,548</span>
|
|||
|
|
<span>个</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="display: flex;align-items: center;">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|||
|
|
width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|||
|
|
<path
|
|||
|
|
d="M15.15 5.7748L15.15 5.69982L15.15 5.62481L15.075 5.62481C15.075 5.62481 15 5.62481 14.925 5.5498L11.25 5.5498C10.875 5.5498 10.575 5.84981 10.575 6.2248C10.575 6.59982 10.875 6.8998 11.25 6.8998L13.125 6.8998L9.52501 10.4998L7.72501 8.6998C7.35 8.32481 6.60001 8.32481 6.225 8.6998L3.075 11.8498C2.85 12.0748 2.85 12.5248 3.075 12.7498C3.22501 12.8998 3.37501 12.9748 3.525 12.9748C3.67501 12.9748 3.82501 12.9748 3.975 12.7498L6.9 9.8248L8.7 11.6248C9.07501 11.9998 9.825 11.9998 10.2 11.6248L13.95 7.87481L13.95 9.74981C13.95 10.1248 14.25 10.4248 14.625 10.4248C15 10.4248 15.3 10.1248 15.3 9.74981L15.3 6.37482L15.3 6.14982L15.15 5.7748Z"
|
|||
|
|
fill="#00B87A"></path>
|
|||
|
|
</svg>
|
|||
|
|
<div>
|
|||
|
|
<span
|
|||
|
|
style="color: rgba(0, 184, 122, 1);font-size: 14px;margin: 0 5px;margin-right: 10px;">8.2%</span>
|
|||
|
|
<span style="color: rgba(154, 154, 154, 1);font-size: 14px;">较昨日同期</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34"
|
|||
|
|
height="34" viewBox="0 0 34 34" fill="none">
|
|||
|
|
<rect x="0" y="0" width="34" height="34" rx="4" fill="#186DF5"></rect>
|
|||
|
|
<path
|
|||
|
|
d="M8.72815 24.0051C8.31696 24.0051 7.9743 24.3478 7.9743 24.759C7.9743 25.1702 8.31696 25.5128 8.72815 25.5128L16.2256 25.5128C16.6368 25.5128 16.9794 25.1702 16.9794 24.759C16.9794 24.3478 16.6368 24.0051 16.2256 24.0051L8.72815 24.0051ZM8.74186 19.4957C8.33067 19.4957 7.988 19.8384 7.988 20.2496C7.988 20.6608 8.33067 21.0034 8.74186 21.0034L13.2513 21.0034C13.6625 21.0034 14.0051 20.6608 14.0051 20.2496C14.0051 19.8384 13.6625 19.4957 13.2513 19.4957L8.74186 19.4957ZM5 16.494C5 15.6716 5.67162 15 6.494 15L27.506 15C28.3284 15 29 15.6716 29 16.494L29 26.6505C29 27.6648 28.1776 28.5009 27.1496 28.5009L6.85037 28.5009C5.83609 28.5009 5 27.6785 5 26.6505L5 16.494Z"
|
|||
|
|
fill="#FFFFFF"></path>
|
|||
|
|
<path
|
|||
|
|
d="M17.7242 12.4974L17.7242 6.494C17.7242 5.67162 18.3959 5 19.2182 5L23.4124 5C24.0018 5 24.5638 5.28784 24.9201 5.76756L28.9772 12.4974L28.9772 12.5385C29.0458 13.2787 28.3467 13.9366 27.6066 13.9914L19.2182 13.9914C18.3959 13.9914 17.7242 13.3198 17.7242 12.4974ZM14.7499 13.9914L6.3753 13.9914C5.63515 13.9229 4.93612 13.2787 5.00466 12.5385L5.00466 12.5248L5.00466 12.4974L9.06177 5.76756C9.40443 5.28784 9.96639 5 10.5695 5L14.7637 5C15.586 5 16.2577 5.67162 16.2577 6.494L16.2577 12.4974C16.2577 13.3198 15.586 13.9914 14.7499 13.9914Z"
|
|||
|
|
fill="#FFFFFF"></path>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="left">
|
|||
|
|
<div style="font-size: 14px;color:rgba(102, 102, 102, 1)">总备件数量</div>
|
|||
|
|
<div style="margin: 10px 0;">
|
|||
|
|
<span style="font-size: 24px;font-weight: bold;margin-right: 10px;">2,548</span>
|
|||
|
|
<span>个</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="display: flex;align-items: center;">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|||
|
|
width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|||
|
|
<path
|
|||
|
|
d="M15.15 5.7748L15.15 5.69982L15.15 5.62481L15.075 5.62481C15.075 5.62481 15 5.62481 14.925 5.5498L11.25 5.5498C10.875 5.5498 10.575 5.84981 10.575 6.2248C10.575 6.59982 10.875 6.8998 11.25 6.8998L13.125 6.8998L9.52501 10.4998L7.72501 8.6998C7.35 8.32481 6.60001 8.32481 6.225 8.6998L3.075 11.8498C2.85 12.0748 2.85 12.5248 3.075 12.7498C3.22501 12.8998 3.37501 12.9748 3.525 12.9748C3.67501 12.9748 3.82501 12.9748 3.975 12.7498L6.9 9.8248L8.7 11.6248C9.07501 11.9998 9.825 11.9998 10.2 11.6248L13.95 7.87481L13.95 9.74981C13.95 10.1248 14.25 10.4248 14.625 10.4248C15 10.4248 15.3 10.1248 15.3 9.74981L15.3 6.37482L15.3 6.14982L15.15 5.7748Z"
|
|||
|
|
fill="#E32727"></path>
|
|||
|
|
</svg>
|
|||
|
|
<div>
|
|||
|
|
<span
|
|||
|
|
style="color: rgba(227, 39, 39, 1);font-size: 14px;margin: 0 5px;margin-right: 10px;">8.2%</span>
|
|||
|
|
<span style="color: rgba(154, 154, 154, 1);font-size: 14px;">较昨日同期</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34"
|
|||
|
|
height="34" viewBox="0 0 34 34" fill="none">
|
|||
|
|
<rect x="0" y="0" width="34" height="34" rx="4" fill="#186DF5"></rect>
|
|||
|
|
<path
|
|||
|
|
d="M8.72815 24.0051C8.31696 24.0051 7.9743 24.3478 7.9743 24.759C7.9743 25.1702 8.31696 25.5128 8.72815 25.5128L16.2256 25.5128C16.6368 25.5128 16.9794 25.1702 16.9794 24.759C16.9794 24.3478 16.6368 24.0051 16.2256 24.0051L8.72815 24.0051ZM8.74186 19.4957C8.33067 19.4957 7.988 19.8384 7.988 20.2496C7.988 20.6608 8.33067 21.0034 8.74186 21.0034L13.2513 21.0034C13.6625 21.0034 14.0051 20.6608 14.0051 20.2496C14.0051 19.8384 13.6625 19.4957 13.2513 19.4957L8.74186 19.4957ZM5 16.494C5 15.6716 5.67162 15 6.494 15L27.506 15C28.3284 15 29 15.6716 29 16.494L29 26.6505C29 27.6648 28.1776 28.5009 27.1496 28.5009L6.85037 28.5009C5.83609 28.5009 5 27.6785 5 26.6505L5 16.494Z"
|
|||
|
|
fill="#FFFFFF"></path>
|
|||
|
|
<path
|
|||
|
|
d="M17.7242 12.4974L17.7242 6.494C17.7242 5.67162 18.3959 5 19.2182 5L23.4124 5C24.0018 5 24.5638 5.28784 24.9201 5.76756L28.9772 12.4974L28.9772 12.5385C29.0458 13.2787 28.3467 13.9366 27.6066 13.9914L19.2182 13.9914C18.3959 13.9914 17.7242 13.3198 17.7242 12.4974ZM14.7499 13.9914L6.3753 13.9914C5.63515 13.9229 4.93612 13.2787 5.00466 12.5385L5.00466 12.5248L5.00466 12.4974L9.06177 5.76756C9.40443 5.28784 9.96639 5 10.5695 5L14.7637 5C15.586 5 16.2577 5.67162 16.2577 6.494L16.2577 12.4974C16.2577 13.3198 15.586 13.9914 14.7499 13.9914Z"
|
|||
|
|
fill="#FFFFFF"></path>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="left">
|
|||
|
|
<div style="font-size: 14px;color:rgba(102, 102, 102, 1)">总备件数量</div>
|
|||
|
|
<div style="margin: 10px 0;">
|
|||
|
|
<span style="font-size: 24px;font-weight: bold;margin-right: 10px;">2,548</span>
|
|||
|
|
<span>个</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="display: flex;align-items: center;">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|||
|
|
width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|||
|
|
<path
|
|||
|
|
d="M15.15 5.7748L15.15 5.69982L15.15 5.62481L15.075 5.62481C15.075 5.62481 15 5.62481 14.925 5.5498L11.25 5.5498C10.875 5.5498 10.575 5.84981 10.575 6.2248C10.575 6.59982 10.875 6.8998 11.25 6.8998L13.125 6.8998L9.52501 10.4998L7.72501 8.6998C7.35 8.32481 6.60001 8.32481 6.225 8.6998L3.075 11.8498C2.85 12.0748 2.85 12.5248 3.075 12.7498C3.22501 12.8998 3.37501 12.9748 3.525 12.9748C3.67501 12.9748 3.82501 12.9748 3.975 12.7498L6.9 9.8248L8.7 11.6248C9.07501 11.9998 9.825 11.9998 10.2 11.6248L13.95 7.87481L13.95 9.74981C13.95 10.1248 14.25 10.4248 14.625 10.4248C15 10.4248 15.3 10.1248 15.3 9.74981L15.3 6.37482L15.3 6.14982L15.15 5.7748Z"
|
|||
|
|
fill="#00B87A"></path>
|
|||
|
|
</svg>
|
|||
|
|
<div>
|
|||
|
|
<span
|
|||
|
|
style="color: rgba(0, 184, 122, 1);font-size: 14px;margin: 0 5px;margin-right: 10px;">8.2%</span>
|
|||
|
|
<span style="color: rgba(154, 154, 154, 1);font-size: 14px;">较昨日同期</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34"
|
|||
|
|
height="34" viewBox="0 0 34 34" fill="none">
|
|||
|
|
<rect x="0" y="0" width="34" height="34" rx="4" fill="#186DF5"></rect>
|
|||
|
|
<path
|
|||
|
|
d="M8.72815 24.0051C8.31696 24.0051 7.9743 24.3478 7.9743 24.759C7.9743 25.1702 8.31696 25.5128 8.72815 25.5128L16.2256 25.5128C16.6368 25.5128 16.9794 25.1702 16.9794 24.759C16.9794 24.3478 16.6368 24.0051 16.2256 24.0051L8.72815 24.0051ZM8.74186 19.4957C8.33067 19.4957 7.988 19.8384 7.988 20.2496C7.988 20.6608 8.33067 21.0034 8.74186 21.0034L13.2513 21.0034C13.6625 21.0034 14.0051 20.6608 14.0051 20.2496C14.0051 19.8384 13.6625 19.4957 13.2513 19.4957L8.74186 19.4957ZM5 16.494C5 15.6716 5.67162 15 6.494 15L27.506 15C28.3284 15 29 15.6716 29 16.494L29 26.6505C29 27.6648 28.1776 28.5009 27.1496 28.5009L6.85037 28.5009C5.83609 28.5009 5 27.6785 5 26.6505L5 16.494Z"
|
|||
|
|
fill="#FFFFFF"></path>
|
|||
|
|
<path
|
|||
|
|
d="M17.7242 12.4974L17.7242 6.494C17.7242 5.67162 18.3959 5 19.2182 5L23.4124 5C24.0018 5 24.5638 5.28784 24.9201 5.76756L28.9772 12.4974L28.9772 12.5385C29.0458 13.2787 28.3467 13.9366 27.6066 13.9914L19.2182 13.9914C18.3959 13.9914 17.7242 13.3198 17.7242 12.4974ZM14.7499 13.9914L6.3753 13.9914C5.63515 13.9229 4.93612 13.2787 5.00466 12.5385L5.00466 12.5248L5.00466 12.4974L9.06177 5.76756C9.40443 5.28784 9.96639 5 10.5695 5L14.7637 5C15.586 5 16.2577 5.67162 16.2577 6.494L16.2577 12.4974C16.2577 13.3198 15.586 13.9914 14.7499 13.9914Z"
|
|||
|
|
fill="#FFFFFF"></path>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="left">
|
|||
|
|
<div style="font-size: 14px;color:rgba(102, 102, 102, 1)">总备件数量</div>
|
|||
|
|
<div style="margin: 10px 0;">
|
|||
|
|
<span style="font-size: 24px;font-weight: bold;margin-right: 10px;">2,548</span>
|
|||
|
|
<span>个</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="display: flex;align-items: center;">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|||
|
|
width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|||
|
|
<path
|
|||
|
|
d="M15.15 5.7748L15.15 5.69982L15.15 5.62481L15.075 5.62481C15.075 5.62481 15 5.62481 14.925 5.5498L11.25 5.5498C10.875 5.5498 10.575 5.84981 10.575 6.2248C10.575 6.59982 10.875 6.8998 11.25 6.8998L13.125 6.8998L9.52501 10.4998L7.72501 8.6998C7.35 8.32481 6.60001 8.32481 6.225 8.6998L3.075 11.8498C2.85 12.0748 2.85 12.5248 3.075 12.7498C3.22501 12.8998 3.37501 12.9748 3.525 12.9748C3.67501 12.9748 3.82501 12.9748 3.975 12.7498L6.9 9.8248L8.7 11.6248C9.07501 11.9998 9.825 11.9998 10.2 11.6248L13.95 7.87481L13.95 9.74981C13.95 10.1248 14.25 10.4248 14.625 10.4248C15 10.4248 15.3 10.1248 15.3 9.74981L15.3 6.37482L15.3 6.14982L15.15 5.7748Z"
|
|||
|
|
fill="#00B87A"></path>
|
|||
|
|
</svg>
|
|||
|
|
<div>
|
|||
|
|
<span
|
|||
|
|
style="color: rgba(0, 184, 122, 1);font-size: 14px;margin: 0 5px;margin-right: 10px;">8.2%</span>
|
|||
|
|
<span style="color: rgba(154, 154, 154, 1);font-size: 14px;">较昨日同期</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34"
|
|||
|
|
height="34" viewBox="0 0 34 34" fill="none">
|
|||
|
|
<rect x="0" y="0" width="34" height="34" rx="4" fill="#186DF5"></rect>
|
|||
|
|
<path
|
|||
|
|
d="M8.72815 24.0051C8.31696 24.0051 7.9743 24.3478 7.9743 24.759C7.9743 25.1702 8.31696 25.5128 8.72815 25.5128L16.2256 25.5128C16.6368 25.5128 16.9794 25.1702 16.9794 24.759C16.9794 24.3478 16.6368 24.0051 16.2256 24.0051L8.72815 24.0051ZM8.74186 19.4957C8.33067 19.4957 7.988 19.8384 7.988 20.2496C7.988 20.6608 8.33067 21.0034 8.74186 21.0034L13.2513 21.0034C13.6625 21.0034 14.0051 20.6608 14.0051 20.2496C14.0051 19.8384 13.6625 19.4957 13.2513 19.4957L8.74186 19.4957ZM5 16.494C5 15.6716 5.67162 15 6.494 15L27.506 15C28.3284 15 29 15.6716 29 16.494L29 26.6505C29 27.6648 28.1776 28.5009 27.1496 28.5009L6.85037 28.5009C5.83609 28.5009 5 27.6785 5 26.6505L5 16.494Z"
|
|||
|
|
fill="#FFFFFF"></path>
|
|||
|
|
<path
|
|||
|
|
d="M17.7242 12.4974L17.7242 6.494C17.7242 5.67162 18.3959 5 19.2182 5L23.4124 5C24.0018 5 24.5638 5.28784 24.9201 5.76756L28.9772 12.4974L28.9772 12.5385C29.0458 13.2787 28.3467 13.9366 27.6066 13.9914L19.2182 13.9914C18.3959 13.9914 17.7242 13.3198 17.7242 12.4974ZM14.7499 13.9914L6.3753 13.9914C5.63515 13.9229 4.93612 13.2787 5.00466 12.5385L5.00466 12.5248L5.00466 12.4974L9.06177 5.76756C9.40443 5.28784 9.96639 5 10.5695 5L14.7637 5C15.586 5 16.2577 5.67162 16.2577 6.494L16.2577 12.4974C16.2577 13.3198 15.586 13.9914 14.7499 13.9914Z"
|
|||
|
|
fill="#FFFFFF"></path>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 30px;">
|
|||
|
|
<div class="menu" style="background-color: #F2F2F2; padding: 20px;">
|
|||
|
|
<el-row gutter="30">
|
|||
|
|
<el-col :span="3">
|
|||
|
|
<el-input placeholder="请输入备件名称"></el-input>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="3">
|
|||
|
|
<el-select placeholder="设备类型">
|
|||
|
|
</el-select>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="3">
|
|||
|
|
<el-select placeholder="备件类别">
|
|||
|
|
</el-select>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="3">
|
|||
|
|
<el-select placeholder="全部状态">
|
|||
|
|
</el-select>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-button icon="search" type="primary">搜索</el-button>
|
|||
|
|
<el-button icon="refresh">重置</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
<el-table :data="pagedTableData" border style="width: 100%;margin-top: 10px;">
|
|||
|
|
<el-table-column prop="backupNumber" label="备件编号" />
|
|||
|
|
<el-table-column prop="backupName" label="备件名称" />
|
|||
|
|
<el-table-column prop="equipmentType" label="设备类型" />
|
|||
|
|
<el-table-column prop="specificationModel" label="规格型号" />
|
|||
|
|
<el-table-column prop="inventoryStatus" label="库存状态" />
|
|||
|
|
<el-table-column prop="inventoryQuantity" label="库存数量" />
|
|||
|
|
<el-table-column label="安全库存">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-tag :type="getTagType(scope.row.safetyStockStatus)">
|
|||
|
|
{{ scope.row.safetyStockStatus }}
|
|||
|
|
</el-tag>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
|
|||
|
|
<el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
|
|||
|
|
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
<div class="pagination-section">
|
|||
|
|
<div class="pagination-info">
|
|||
|
|
显示第{{ (currentPage - 1) * pageSize + 1 }}到{{ Math.min(currentPage * pageSize, total) }}条，共有{{
|
|||
|
|
total }}条记录
|
|||
|
|
</div>
|
|||
|
|
<div class="pagination-controls">
|
|||
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|||
|
|
:current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
|
|||
|
|
layout="total, sizes, prev, pager, next, jumper" :total="total" background>
|
|||
|
|
</el-pagination>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.title {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 22px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
letter-spacing: 0px;
|
|||
|
|
line-height: 28.6px;
|
|||
|
|
color: rgba(10, 14, 26, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list {
|
|||
|
|
margin-top: 30px;
|
|||
|
|
display: flex;
|
|||
|
|
gap: 140px;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 0 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 分页区域样式 */
|
|||
|
|
.pagination-section {
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding: 16px 20px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-info {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-controls .el-pagination {
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-controls .el-pagination__sizes {
|
|||
|
|
margin-right: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-controls .el-pagination button {
|
|||
|
|
min-width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
line-height: 32px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-controls .el-pagination .el-pager li {
|
|||
|
|
min-width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
line-height: 32px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-controls .el-pagination .el-pager li.active {
|
|||
|
|
background-color: #409eff;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script setup>
|
|||
|
|
import TitleComponent from '@/components/TitleComponent';
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 计算属性：根据当前页码和每页条数获取分页后的数据
|
|||
|
|
const tableData = ref([
|
|||
|
|
{
|
|||
|
|
backupNumber: 'SOL-2023-001',
|
|||
|
|
backupName: '光伏逆变器模块',
|
|||
|
|
equipmentType: '光伏设备',
|
|||
|
|
specificationModel: 'SGGKTL-M',
|
|||
|
|
inventoryStatus: '12个',
|
|||
|
|
inventoryQuantity: '5个',
|
|||
|
|
safetyStockStatus: '正常'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
backupNumber: 'SOL-2023-001',
|
|||
|
|
backupName: '光伏逆变器模块',
|
|||
|
|
equipmentType: '光伏设备',
|
|||
|
|
specificationModel: 'SGGKTL-M',
|
|||
|
|
inventoryStatus: '12个',
|
|||
|
|
inventoryQuantity: '5个',
|
|||
|
|
safetyStockStatus: '正常'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
backupNumber: 'SOL-2023-001',
|
|||
|
|
backupName: '光伏逆变器模块',
|
|||
|
|
equipmentType: '光伏设备',
|
|||
|
|
specificationModel: 'SGGKTL-M',
|
|||
|
|
inventoryStatus: '12个',
|
|||
|
|
inventoryQuantity: '5个',
|
|||
|
|
safetyStockStatus: '正常'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
backupNumber: 'SOL-2023-001',
|
|||
|
|
backupName: '光伏逆变器模块',
|
|||
|
|
equipmentType: '光伏设备',
|
|||
|
|
specificationModel: 'SGGKTL-M',
|
|||
|
|
inventoryStatus: '12个',
|
|||
|
|
inventoryQuantity: '5个',
|
|||
|
|
safetyStockStatus: '正常'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
backupNumber: 'WIN-2023-045',
|
|||
|
|
backupName: '风力发电机轴承',
|
|||
|
|
equipmentType: '风电设备',
|
|||
|
|
specificationModel: '6318-2RS1/C3',
|
|||
|
|
inventoryStatus: '3套',
|
|||
|
|
inventoryQuantity: '5套',
|
|||
|
|
safetyStockStatus: '低库存'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
backupNumber: 'SOL-2023-001',
|
|||
|
|
backupName: '光伏逆变器模块',
|
|||
|
|
equipmentType: '光伏设备',
|
|||
|
|
specificationModel: 'SGGKTL-M',
|
|||
|
|
inventoryStatus: '12个',
|
|||
|
|
inventoryQuantity: '5个',
|
|||
|
|
safetyStockStatus: '正常'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
backupNumber: 'WIN-2023-045',
|
|||
|
|
backupName: '风力发电机轴承',
|
|||
|
|
equipmentType: '风电设备',
|
|||
|
|
specificationModel: '6318-2RS1/C3',
|
|||
|
|
inventoryStatus: '3套',
|
|||
|
|
inventoryQuantity: '5套',
|
|||
|
|
safetyStockStatus: '低库存'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
backupNumber: 'WIN-2023-045',
|
|||
|
|
backupName: '风力发电机轴承',
|
|||
|
|
equipmentType: '风电设备',
|
|||
|
|
specificationModel: '6318-2RS1/C3',
|
|||
|
|
inventoryStatus: '0套',
|
|||
|
|
inventoryQuantity: '2套',
|
|||
|
|
safetyStockStatus: '缺货'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
backupNumber: 'WIN-2023-045',
|
|||
|
|
backupName: '风力发电机轴承',
|
|||
|
|
equipmentType: '风电设备',
|
|||
|
|
specificationModel: '6318-2RS1/C3',
|
|||
|
|
inventoryStatus: '3套',
|
|||
|
|
inventoryQuantity: '5套',
|
|||
|
|
safetyStockStatus: '低库存'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
backupNumber: 'WIN-2023-045',
|
|||
|
|
backupName: '风力发电机轴承',
|
|||
|
|
equipmentType: '风电设备',
|
|||
|
|
specificationModel: '6318-2RS1/C3',
|
|||
|
|
inventoryStatus: '3套',
|
|||
|
|
inventoryQuantity: '5套',
|
|||
|
|
safetyStockStatus: '低库存'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
backupNumber: 'WIN-2023-045',
|
|||
|
|
backupName: '风力发电机轴承',
|
|||
|
|
equipmentType: '风电设备',
|
|||
|
|
specificationModel: '6318-2RS1/C3',
|
|||
|
|
inventoryStatus: '3套',
|
|||
|
|
inventoryQuantity: '5套',
|
|||
|
|
safetyStockStatus: '低库存'
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
// 当前页码
|
|||
|
|
const currentPage = ref(1);
|
|||
|
|
// 每页条数 - 与分页控件默认值保持一致
|
|||
|
|
const pageSize = ref(10);
|
|||
|
|
// 总条数 - 从原始数据计算得出
|
|||
|
|
const total = ref(tableData.value.length);
|
|||
|
|
const pagedTableData = computed(() => {
|
|||
|
|
const startIndex = (currentPage.value - 1) * pageSize.value;
|
|||
|
|
const endIndex = startIndex + pageSize.value;
|
|||
|
|
return tableData.value.slice(startIndex, endIndex);
|
|||
|
|
});
|
|||
|
|
// 当前页码改变
|
|||
|
|
const handleCurrentChange = (val) => {
|
|||
|
|
currentPage.value = val;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 根据安全库存状态获取标签类型
|
|||
|
|
const getTagType = (status) => {
|
|||
|
|
if (status === '正常') {
|
|||
|
|
return 'success'
|
|||
|
|
} else if (status === '低库存') {
|
|||
|
|
return 'warning'
|
|||
|
|
} else if (status === '缺货') {
|
|||
|
|
return 'danger'
|
|||
|
|
}
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 编辑操作方法
|
|||
|
|
const handleEdit = (row) => {
|
|||
|
|
console.log('编辑', row)
|
|||
|
|
// 这里可以编写编辑的逻辑，比如跳转到编辑页面等
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 详情操作方法
|
|||
|
|
const handleDetail = (row) => {
|
|||
|
|
console.log('详情', row)
|
|||
|
|
// 这里可以编写查看详情的逻辑
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除操作方法
|
|||
|
|
const handleDelete = (row) => {
|
|||
|
|
console.log('删除', row)
|
|||
|
|
// 这里可以编写删除的逻辑，比如提示确认删除，然后从表格数据中移除等
|
|||
|
|
}
|
|||
|
|
</script>
|