<template>
|
<div class="charts-container">
|
<div class="filter">
|
<el-select
|
clearable
|
v-model="data.queryParams.companyId"
|
filterable
|
placeholder="请选择企业"
|
style="flex: 3"
|
:teleported="false"
|
>
|
<el-option
|
v-for="item in data.companyList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
<el-input v-model="data.queryParams.code" placeholder="请输入流向码"></el-input>
|
<div class="search-btn" @click="getList">
|
查询
|
</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 data.dataList" :key="index">
|
<td>{{ data.companyList.find(i=>i.id == item.companyId)?.name }}</td>
|
<td class="state-describe" :class="{'orange': item.stateName == '取用' || item.stateName == '销售','red': item.stateName == '标签作废'|| item.stateName == '用尽登记'}">{{ item.stateName }}</td>
|
<td>{{ item.user.name }}</td>
|
<td>{{ item.updateTime }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import {nextTick, onMounted, reactive} from "vue";
|
import {ElMessage} from "element-plus";
|
import {getBasicCount} from "@/api/monitor/screenCharts";
|
import {getAllRawFlow} from "@/api/hazardousChemicals/rawRecord";
|
import {getFlowByCode} from "@/api/hazardousChemicals/productRecord";
|
import {getCompany} from "@/api/hazardousChemicals/company";
|
|
onMounted(async()=>{
|
await getCompanyList()
|
})
|
|
const data = reactive({
|
companyList: [],
|
queryParams: {
|
companyId: null,
|
code: ''
|
},
|
dataList: []
|
})
|
|
const getCompanyList = async (val)=>{
|
if(val){
|
const queryParams = {
|
name: val
|
}
|
const res = await getCompany(queryParams)
|
if (res.code == 200) {
|
data.companyList = res.data.list
|
} else {
|
ElMessage.warning(res.message)
|
}
|
}else {
|
const queryParams = {
|
pageNum: 1,
|
pageSize: 999
|
}
|
const res = await getCompany(queryParams)
|
if (res.code == 200) {
|
data.companyList = res.data.list
|
} else {
|
ElMessage.warning(res.message)
|
}
|
}
|
}
|
|
const getList = async () => {
|
if(!data.queryParams.companyId){
|
ElMessage.warning('请输入企业名称')
|
return
|
}
|
if(data.queryParams.code==''){
|
ElMessage.warning('请输入二维码编号')
|
return
|
}
|
const res = await getFlowByCode(data.queryParams)
|
if(res.code == 200){
|
if(res.data && res.data.length>0){
|
if(res.data[0].hazmatBasic){
|
console.log(res.data,'data')
|
data.dataList = res.data.map(item => {
|
return {
|
...item,
|
stateName: item.state ==0 ?'入库': item.state ==1 ? '取用' :item.state ==2 ? '归还': item.state ==3 ? '标签作废' : item.state ==4 ? '用尽登记':item.state ==5 ? '销售' : item.state ==6? '零头入库':'',
|
}
|
})
|
}
|
}else {
|
data.dataList = []
|
}
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
|
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 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;
|
}
|
.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
|
}
|
}
|
:deep(.el-input__wrapper){
|
height: 28px;
|
box-shadow: none;
|
border: 1px solid #11FEEE;
|
background: rgba(6,24,88,.6);
|
color: #fff;
|
}
|
:deep(.el-input__inner){
|
color: #02CDE6;
|
}
|
:deep(.el-input .el-select__caret){
|
color: #02CDE6
|
}
|
:deep(.el-popper.is-light){
|
background: rgb(8,44,97);
|
.el-select-dropdown__item{
|
color: #fff;
|
&:hover{
|
background: #015fb0;
|
}
|
}
|
}
|
.table-wrapper {
|
width: 100%;
|
height: 320px;
|
overflow: hidden;
|
overflow-y: auto; /* 垂直滚动 */
|
border: 1px solid rgba(0,0,0,.5);
|
}
|
|
.data-table {
|
width: 100%;
|
border-collapse: collapse;
|
font-size: 14px;
|
|
th,td {
|
padding: 10px;
|
font-size: 12px;
|
color: #fff;
|
text-align: left;
|
height: 24px;
|
border-bottom: 1px solid rgba(255,255,255,.1);
|
}
|
.state-describe{
|
color: #00ff00
|
}
|
.red{
|
color: #ff4848
|
}
|
.orange{
|
color: #aeff00
|
}
|
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>
|
