<template>
|
<div class="charts-container">
|
<div class="filter">
|
<el-input
|
v-model="queryParams.code"
|
placeholder="请输入流向码"
|
clearable
|
/>
|
<div class="search-btn">
|
查询
|
</div>
|
</div>
|
<div class="table-wrapper">
|
<table class="data-table">
|
<thead>
|
<tr>
|
<th>企业名称</th>
|
<th>流向类型</th>
|
<th>取/还人员</th>
|
<th>时间</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item, index) in dataList" :key="index">
|
<td>{{ item.company }}</td>
|
<td>{{ item.flowType }}</td>
|
<td>{{ item.person }}</td>
|
<td>{{ item.time }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import {onMounted, reactive} from "vue";
|
|
onMounted(()=>{
|
getList()
|
})
|
|
const queryParams = reactive({
|
code: ''
|
})
|
const dataList = [
|
{ company: '化工企业A', flowType: '出库', person: '张三', time: '2023-05-10 09:30' },
|
{ company: '化工企业B', flowType: '入库', person: '李四', time: '2023-05-10 10:15' },
|
{ company: '化工企业C', flowType: '出库', person: '王五', time: '2023-05-10 11:20' },
|
{ company: '化工企业D', flowType: '入库', person: '赵六', time: '2023-05-10 13:45' },
|
{ company: '化工企业E', flowType: '出库', person: '钱七', time: '2023-05-10 14:30' },
|
{ company: '化工企业F', flowType: '入库', person: '孙八', time: '2023-05-10 15:10' },
|
{ company: '化工企业G', flowType: '出库', person: '周九', time: '2023-05-10 16:20' },
|
{ company: '化工企业H', flowType: '入库', person: '吴十', time: '2023-05-10 17:05' },
|
{ company: '化工企业I', flowType: '出库', person: '郑十一', time: '2023-05-11 08:30' }
|
]
|
const getList = ()=>{
|
|
}
|
const reset=()=>{
|
|
}
|
const search=()=>{
|
|
}
|
</script>
|
|
<style lang="postcss" scoped>
|
.charts-container{
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
.filter{
|
height: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
.el-input{
|
flex: 3;
|
border: 1px solid blue !important;
|
border-color: blue !important;
|
}
|
:deep(.el-input__wrapper){
|
background-color: rgba(0,0,0,0);
|
border-color: blue !important;
|
}
|
.search-btn{
|
flex: 1;
|
margin-left: 10px;
|
height: 30px;
|
text-align: center;
|
font-size: 12px;
|
line-height: 30px;
|
background: #015fb0;
|
border-radius: 2px;
|
cursor: pointer;
|
color: #fff
|
}
|
}
|
.table-wrapper {
|
width: 100%;
|
height: 320px;
|
overflow: hidden;
|
overflow-y: auto; /* 垂直滚动 */
|
border: 1px solid rgba(0,0,0,.5);
|
}
|
|
.data-table {
|
width: 100%;
|
height: 100%;
|
border-collapse: collapse;
|
font-size: 14px;
|
}
|
|
.data-table th,
|
.data-table td {
|
padding: 10px;
|
font-size: 12px;
|
color: #fff;
|
text-align: left;
|
border-bottom: 1px solid rgba(255,255,255,.1);
|
}
|
|
.data-table th {
|
position: sticky;
|
top: 0;
|
background-color: rgb(6,38,87); /* 无背景色 */
|
font-weight: normal;
|
color: #fff;
|
}
|
|
/* 精简滚动条样式 */
|
.table-wrapper::-webkit-scrollbar {
|
width: 0;
|
}
|
|
.table-wrapper::-webkit-scrollbar-thumb {
|
background-color: #c1c1c1;
|
border-radius: 3px;
|
}
|
|
.table-wrapper::-webkit-scrollbar-track {
|
background-color: #f1f1f1;
|
}
|
|
}
|
</style>
|
