<template>
|
<div class="notice">
|
<div v-if="state.dataList.length>0">
|
<div class="title">
|
<span style="margin-right: 5px">{{state.form.name}}（ {{state.form.productSn}} ）</span>
|
<span>二维码识别号：{{state.form.code}} </span>
|
</div>
|
<div class="content" >
|
<el-timeline style="max-width: 600px">
|
<el-timeline-item
|
v-for="(item, index) in state.dataList"
|
:key="index"
|
:icon="item.icon"
|
:type="item.type"
|
:color="item.color"
|
:size="item.size"
|
:hollow="item.hollow"
|
>
|
{{ item.description }}
|
<span style="color: #03752e;font-weight: 600" v-if="item.num > 0">{{item.stateName}}</span>
|
<span style="color: #f6828e;font-weight: 600" v-else>{{item.stateName}}</span>
|
<span style="color: #03752e" v-if="item.num > 0">{{item.num >0 ? '+' + item.num: item.num}}{{item.unit}}</span>
|
<span style="color: #f6828e" v-else>{{item.num}}{{item.unit}}</span>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
</div>
|
<div v-else>
|
<el-empty description="暂无数据" />
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import {onUnmounted, reactive, ref, toRefs} from 'vue'
|
import {getAllRawFlow, getRawFlow} from "@/api/hazardousChemicals/rawRecord";
|
import {ElMessage} from "element-plus";
|
import {getAllProFlow, getFlowByCode} from "@/api/hazardousChemicals/productRecord";
|
import { MoreFilled } from '@element-plus/icons-vue'
|
const busRef = ref();
|
const length = ref()
|
const title = ref('')
|
const state = reactive({
|
form: {
|
id: '',
|
name: '',
|
productSn: '',
|
code: ''
|
},
|
dataList: [],
|
active: null
|
})
|
|
|
const openDialog = async (type, value) => {
|
title.value = type;
|
if(type === 'code'){
|
state.form.code = value
|
}else {
|
|
state.form = JSON.parse(JSON.stringify(value))
|
}
|
|
await getAllFlow()
|
}
|
|
const getAllFlow = async () => {
|
if(title.value == 'pro' || title.value =='proRecord'){
|
let param = {}
|
if(title.value == 'pro'){
|
param = {
|
productId: state.form.id
|
}
|
}else {
|
param = {
|
productId: state.form.productId
|
}
|
}
|
const res = await getAllProFlow(param)
|
if(res.code == 200){
|
if(res.data && res.data.length>0) {
|
state.dataList = res.data.map(item => {
|
return {
|
...item,
|
unit: item.productBasic.unit,
|
stateName: item.state ==0 ?'入库': item.state ==1 ? '取用' :item.state ==2 ? '归还': item.state ==3 ? '标签作废' : item.state ==4 ? '用尽登记':item.state ==5 ? '销售' : '',
|
description: `${item.updateTime} ${item.user.departName ? item.user.departName +'部门' : ''} ${item.user.name} 进行了 `,
|
size: 'large',
|
type: 'primary',
|
icon: MoreFilled,
|
}
|
})
|
state.form.name = res.data[0].productBasic.name
|
state.form.productSn = res.data[0].productBasic.productSn
|
state.form.code = res.data[0].code
|
console.log("state.dataList", state.dataList)
|
}else {
|
state.dataList=[]
|
}
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}else if(title.value == 'raw' || title.value =='rawRecord'){
|
let param = {}
|
if(title.value == 'raw'){
|
param = {
|
hazmatId: state.form.id
|
}
|
}else {
|
param = {
|
hazmatId: state.form.hazmatId
|
}
|
}
|
const res = await getAllRawFlow(param)
|
if(res.code == 200){
|
if(res.data && res.data.length>0){
|
state.dataList = res.data.map(item => {
|
return {
|
...item,
|
unit:item.hazmatBasic.unit,
|
stateName: item.state ==0 ?'入库': item.state ==1 ? '取用' :item.state ==2 ? '归还': item.state ==3 ? '标签作废' : item.state ==4 ? '用尽登记':item.state ==5 ? '销售' : item.state ==6? '零头入库':'',
|
description: `${item.updateTime} ${item.user.departName ? item.user.departName +'部门' : ''} ${item.user.name} 进行了 `,
|
size: 'large',
|
type: 'primary',
|
icon: MoreFilled,
|
}
|
})
|
state.form.name = res.data[0].hazmatBasic.name
|
state.form.productSn = res.data[0].hazmatBasic.productSn
|
state.form.code = res.data[0].code
|
console.log("state.dataList",state.dataList)
|
}else {
|
state.dataList = []
|
}
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}else if(title.value == 'code'){
|
const param = {
|
code: state.form.code
|
}
|
const res = await getFlowByCode(param)
|
if(res.code == 200){
|
if(res.data && res.data.length>0){
|
if(res.data[0].hazmatBasic){
|
state.dataList = res.data.map(item => {
|
return {
|
...item,
|
unit:item.hazmatBasic.unit,
|
stateName: item.state ==0 ?'入库': item.state ==1 ? '取用' :item.state ==2 ? '归还': item.state ==3 ? '标签作废' : item.state ==4 ? '用尽登记':item.state ==5 ? '销售' : item.state ==6? '零头入库':'',
|
description: `${item.updateTime} ${item.user.departName ? item.user.departName +'部门' : ''} ${item.user.name} 进行了 `,
|
size: 'large',
|
type: 'primary',
|
icon: MoreFilled,
|
}
|
})
|
state.form.name = res.data[0].hazmatBasic.name
|
state.form.productSn = res.data[0].hazmatBasic.productSn
|
state.form.code = res.data[0].code
|
console.log("state.dataList",state.dataList)
|
}else {
|
state.dataList = res.data.map(item => {
|
return {
|
...item,
|
unit:item.productBasic.unit,
|
stateName: item.state ==0 ?'入库': item.state ==1 ? '取用' :item.state ==2 ? '归还': item.state ==3 ? '标签作废' : item.state ==4 ? '用尽登记':item.state ==5 ? '销售' : '',
|
description: `${item.updateTime} ${item.user.departName? item.user.departName +'部门' : ''} ${item.user.name} 进行了 `,
|
size: 'large',
|
type: 'primary',
|
icon: MoreFilled,
|
}
|
})
|
state.form.name = res.data[0].productBasic.name
|
state.form.productSn = res.data[0].productBasic.productSn
|
state.form.code = res.data[0].code
|
console.log("state.dataList",state.dataList)
|
}
|
|
}else {
|
state.dataList = []
|
}
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
}
|
onUnmounted(()=>{
|
state.form = {
|
id: '',
|
name: '',
|
productSn: '',
|
code: ''
|
}
|
state.dataList = []
|
})
|
|
defineExpose({
|
openDialog
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
.notice{
|
padding: 20px;
|
display: flex;
|
flex-direction: column;
|
.title{
|
display: flex;
|
align-items: center;
|
font-size: 18px;
|
font-weight: 600;
|
}
|
.content{
|
margin-top: 40px;
|
|
:deep(.el-timeline) {
|
font-size: 16px;
|
}
|
:deep(.el-timeline-item__node--large) {
|
left: -8px;
|
width: 25px;
|
height: 25px;
|
top: -5px;
|
}
|
}
|
}
|
</style>
|
