<template>
|
<div class="query">
|
<div style="margin-top:20px;margin-left: 20px">
|
<el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
|
<el-form-item label="企业名称:" >
|
<el-select
|
clearable
|
v-model="data.queryParams.companyId"
|
filterable
|
remote
|
reserve-keyword
|
placeholder="请输入企业名称"
|
remote-show-suffix
|
:remote-method="getCompanyList"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in data.companyList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="二维码编号：" >
|
<el-input v-model="data.form.code" placeholder="请输入二维码编号进行搜索"></el-input>
|
</el-form-item>
|
<el-form-item >
|
<el-button
|
type="primary"
|
@click="getList"
|
>查询</el-button>
|
<el-button
|
@click="reset"
|
>重置</el-button>
|
</el-form-item>
|
|
</el-form>
|
<div style="display: flex;justify-content: center;margin-top: 20px">
|
<el-card :style="{ height: '650px' ,overflow: 'auto'}">
|
<div class="content">
|
<flow-deail ref="flowRef" v-if="data.showData"></flow-deail>
|
<el-empty description="暂无数据" style="margin-top: 10%" v-else></el-empty>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</div>
|
|
</template>
|
<script setup>
|
import {nextTick, onMounted, reactive, ref} from "vue";
|
import flowDeail from '../../components/flowDetail.vue'
|
import {getFlowByCode, getProFlow} from "@/api/hazardousChemicals/productRecord";
|
import {ElMessage} from "element-plus";
|
import {getCompany} from "@/api/hazardousChemicals/company";
|
|
const flowRef = ref();
|
const data = reactive({
|
queryParams: {
|
name: '',
|
productSn: '',
|
companyId: null
|
},
|
form: {
|
code: ''
|
},
|
dataList: [],
|
showData:false,
|
companyList: []
|
});
|
|
onMounted(()=>{
|
getCompanyList("")
|
})
|
const getList = async () => {
|
if(!data.queryParams.companyId){
|
ElMessage.warning('请先输入企业名称')
|
return
|
}
|
if(data.form.code!=''){
|
data.showData = true
|
await nextTick(() => {
|
flowRef.value.openDialog('code',data.form.code,data.queryParams.companyId)
|
})
|
}else {
|
ElMessage.warning('请先输入二维码编号')
|
}
|
}
|
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: 10
|
}
|
const res = await getCompany(queryParams)
|
if (res.code == 200) {
|
data.companyList = res.data.list
|
} else {
|
ElMessage.warning(res.message)
|
}
|
}
|
}
|
const reset = () =>{
|
data.queryParams = {
|
name: '',
|
productSn: '',
|
companyId: null
|
}
|
data.form.code = ''
|
data.showData = false
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.query{
|
.content{
|
width: 650px;
|
//height: 650px;
|
//border: 1px solid #c2bfbf;
|
|
}
|
}
|
</style>
|
