bash
复制代码
<template>
<div class="app-container">
<!-- 条件查询 -->
<el-form :inline="true" :model="queryParams" class="demo-form-inline">
<el-form-item label="设备SN">
<el-input v-model="queryParams.term_sn" placeholder="请输入设备SN"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList">查询</el-button>
<el-button @click="resetQueryParams">重置</el-button>
</el-form-item>
</el-form>
<el-button type="primary" @click="piliang">批量质检</el-button>
<!-- 设备质检列表 -->
<el-table ref="packageTable" v-loading="loading" :data="packageList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="设备SN" align="center" prop="term_sn" />
<el-table-column label="料品编号" align="center" prop="out_term_ship_bom_no" />
<el-table-column label="料品名称" align="center" prop="out_term_ship_bom_name" />
<el-table-column label="整机质检人" align="center" prop="devid_qi_cname" />
<el-table-column label="整机质检时间" align="center" prop="devid_qi_time" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.devid_qi_time, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="整机质检状态" align="center" prop="devidqi_state" />
<el-table-column label="设备状态" align="center" prop="prod_state" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">设备质检</el-button>
<el-button size="mini" type="text" icon="el-icon-view" @click="MaInfomation(scope.row)">质检详情</el-button>
</template>
</el-table-column>
</el-table>
<!-- 数据为空提示 -->
<div v-if="!loading && packageList.length === 0" class="no-data">
<el-empty description="暂无数据" />
</div>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 质检详情对话框 -->
<el-dialog :visible.sync="tanchu.MaInfomation" width="800px" title="质检详情" @close="handleDialogClose">
<el-card class="box-card" shadow="never" style="border: none;">
<div slot="header" class="clearfix">
<span>基本信息</span>
</div>
<div>
<el-row>
<el-col :span="12">
<strong>质检人:</strong> {{ zjzjInfo.devid_qi_cname }}
</el-col>
<el-col :span="12">
<strong>质检时间:</strong> {{ parseTime(zjzjInfo.devid_qi_time, '{y}-{m}-{d} {h}:{i}:{s}') }}
</el-col>
</el-row>
</div>
</el-card>
<el-card class="box-card" shadow="never" style="border: none;">
<div slot="header" class="clearfix">
<span>检验信息</span>
</div>
<div>
<el-table :data="zjjyInfoA" border>
<el-table-column label="编号" prop="code" />
<el-table-column label="检验项目" prop="name" />
<el-table-column label="检验要求" prop="inspect_ask" />
<el-table-column label="检验结果">
<template slot-scope="scope">
<el-tag :type="scope.row.result">{{scope.row.result}}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<!-- 配置清单部分 -->
<el-card class="box-card" shadow="never" style="border: none;">
<div slot="header" class="clearfix">
<span>配置清单</span>
</div>
<div>
<el-table :data="SelectPj" border>
<el-table-column label="料品编号" prop="out_order_bom_no" />
<el-table-column label="料品名称" prop="out_order_bom_name" />
<el-table-column label="型号" prop="model" />
<el-table-column label="子组件SN" prop="sub_component_sn" />
<el-table-column label="绑定用户" prop="bind_uid" />
<el-table-column label="绑定时间" prop="bind_time">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.bind_time, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<!--
<div>
<div class="blockblue"></div>
附件信息
</div>
<el-table :data="zjfjInfo" style="margin-top: 20px;">
<el-table-column prop="file_name" label="文件名" align="center"></el-table-column>
<el-table-column prop="size" label="文件大小" align="center">
<template v-slot="scope">
{{ formatFileSize(scope.row.size) }}
</template>
</el-table-column>
<el-table-column prop="tran_time" label="上传时间" align="center"></el-table-column>
<el-table-column prop="tran_peo" label="上传人员" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template v-slot="scope">
<el-button class="green-icon-button" type="text" icon="el-icon-download" @click="downloadFile(scope.row)">
</el-button>
</template>
</el-table-column>
</el-table>
<div>
</div> -->
<div>
<el-table :data="zjfjInfo" style="margin-top: 20px;">
<el-table-column prop="file_name" label="文件名" align="center"></el-table-column>
<el-table-column prop="size" label="文件大小" align="center"> </el-table-column>
<el-table-column prop="tran_time" label="上传时间" align="center"></el-table-column>
<el-table-column prop="tran_peo" label="上传人员" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button class="green-icon-button" type="text" icon="el-icon-download"
@click="downloadFile(scope.row)">
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-dialog>
<!-- 质检对话框 -->
<el-dialog :visible.sync="tanchu.handleView" width="800px" title="设备质检" @close="handleDialogClose">
<el-card class="box-card" shadow="never" style="border: none;">
<div slot="header" class="clearfix">
<span>基本信息</span>
</div>
<div>
<el-row>
<el-col :span="12">
<strong>质检人:</strong> {{ user.devid_qi_cname }}
</el-col>
<el-col :span="12">
<strong>质检时间:</strong> {{ user.devid_qi_time }}
</el-col>
</el-row>
</div>
</el-card>
<!-- 检验信息部分 -->
<el-card class="box-card" shadow="never" style="border: none;">
<div slot="header" class="clearfix">
<span>检验信息</span>
</div>
<div style="margin-top: 10px;margin-bottom: 10px;;height: 400px;overflow-y: auto;" class="table">
<el-button type="primary" @click="setAllResultsToOk">一键质检</el-button>
<el-table :data="inspectInfo" style="width: 750px;" height="400">
<el-table-column prop="code" label="编号" width="50" align="center"></el-table-column>
<el-table-column prop="name" label="检验项目" width="150" align="center"></el-table-column>
<el-table-column prop="inspect_ask" label="检验要求" width="400"></el-table-column>
<el-table-column label="检验结果" width="100" align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.result" placeholder="请选择">
<el-option v-for="item in resultOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<!-- 配置清单部分 -->
<el-card class="box-card" shadow="never" style="border: none;">
<div slot="header" class="clearfix">
<span>配置清单</span>
</div>
<div>
<el-table :data="configList" border>
<el-table-column label="料品编号" prop="out_order_bom_no" />
<el-table-column label="料品名称" prop="out_order_bom_name" />
<el-table-column label="型号" prop="model" />
<el-table-column label="子组件SN" prop="sub_component_sn" />
<el-table-column label="绑定用户" prop="bind_uid" />
<el-table-column label="绑定时间" prop="bind_time">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.bind_time, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<!-- 上传附件部分 -->
<el-card class="box-card" shadow="never" style="border: none;">
<h3 slot="header">上传附件</h3>
<el-upload
class="upload-demo"
ref="uploadRef"
action="http://localhost:8080/quality/PaOss/ImageUpload"
:data="{ term_sn: term_snA }"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
:before-upload="beforeUpload"
:limit="5"
>
<el-button size="small" type="primary">选取文件</el-button>
</el-upload>
<p class="upload-notice">
请上传大小不超过 20MB 格式为 pdf、jpg、mp4 的文件。严禁上传包含色情、暴力、反动等相关违法信息的文件。
</p>
</el-card>
<div slot="footer" class="dialog-footer">
<el-button @click="handleDialogClose">取消</el-button>
<el-button type="primary" @click="submitQuality">提交</el-button>
</div>
</el-dialog>
<!-- 批量质检 -->
<el-dialog :visible.sync="tanchu.piliang" width="800px" title="批量质检" @close="handleDialogClose">
<el-card class="box-card" shadow="never" style="border: none;">
<div slot="header" class="clearfix">
<span>基本信息</span>
</div>
<div>
<el-row>
<el-col :span="12">
<strong>质检人:</strong> {{ user.devid_qi_cname }}
</el-col>
<el-col :span="12">
<strong>质检时间:</strong> {{ user.devid_qi_time }}
</el-col>
</el-row>
</div>
</el-card>
<el-card class="box-card" shadow="never" style="border: none;">
<span>产品信息</span>
<el-table v-loading="loading" :data="TermSnList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="设备SN" align="center" prop="term_sn" />
<el-table-column label="料品编号" align="center" prop="out_term_ship_bom_no" />
<el-table-column label="料品名称" align="center" prop="out_term_ship_bom_name" />
<el-table-column label="整机质检人" align="center" prop="devid_qi_cname" />
<el-table-column label="整机质检时间" align="center" prop="devid_qi_time" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.devid_qi_time, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="整机质检状态" align="center" prop="devidqi_state" />
</el-table>
<!-- 数据为空提示 -->
<div v-if="!loading && TermSnList.length === 0" class="no-data">
<el-empty description="暂无数据" />
</div>
</el-card>
<!--
检验信息部分 -->
<el-card class="box-card" shadow="never" style="border: none;">
<div slot="header" class="clearfix">
<span>检验信息</span>
</div>
<div style="margin-top: 10px; margin-bottom: 10px; height: 400px; overflow-y: auto;" class="table">
<el-button type="primary" @click="setAllResultsToOkA">一键质检</el-button>
<el-table :data="inspectInfoA" style="width: 750px;" height="400">
<el-table-column prop="code" label="编号" width="50" align="center"></el-table-column>
<el-table-column prop="name" label="检验项目" width="150" align="center"></el-table-column>
<el-table-column prop="inspect_ask" label="检验要求" width="400"></el-table-column>
<el-table-column label="检验结果" width="100" align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.result" placeholder="请选择">
<el-option v-for="item in resultOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<!-- 上传附件部分 -->
<el-card class="box-card" shadow="never" style="border: none;">
<h3 slot="header">上传附件</h3>
<el-upload
class="upload-demo"
ref="uploadRef"
action="http://localhost:8080/quality/PaOss/ImageUpload"
:data="{ term_sn: term_snA }"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
:before-upload="beforeUpload"
:limit="5"
>
<el-button size="small" type="primary">选取文件</el-button>
</el-upload>
<p class="upload-notice">
请上传大小不超过 20MB 格式为 pdf、jpg、mp4 的文件。严禁上传包含色情、暴力、反动等相关违法信息的文件。
</p>
</el-card>
<div slot="footer" class="dialog-footer">
<el-button @click="handleDialogCloseA">取消</el-button>
<el-button type="primary" @click="submitQualityA">提交</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listPackage, getInspect, getConfigList, getUser, insertQuality,serjyInfoA ,serzjfjInfo,serZhengji,updateTermSn,piliang,getTermSnList,updateInspectList} from "@/api/package/machine";
import { parseTime } from "@/utils/index";
export default {
name: "HomePage",
data() {
return {
tanchu: {
handleView: false,
MaInfomation: false,
piliang:false,
},
loading: true,
packageList: [],
TermSnList:[],
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
termSn: null,
devidqiState: null,
},
showDetailPage: false, // 控制质检对话框的显示
selectedinfo: {}, // 当前选中的质检详情
inspectInfo: [], // 存储检验信息
configList: [], // 存储配置清单
user: {}, // 当前操作人
resultOptions: [
{ value: 'ok', label: 'OK' },
{ value: 'ng', label: 'NG' }, // 修改为 NG
],
selectinspect:[],
zjjyInfoA:[],
SelectPj:[],
zjfjInfo:[],
zjzjInfo:[],
term_snA: "", // 你的 term_sn 数据
queryParams: {
pageNum: 1,
pageSize: 10,
term_sn: '', // 用于查询的设备SN
},
loading: true,
packageList: [],
total: 0,
TermSnList:[],
term_snB: '0712-10', //给批量的
inspectInfoA:[],
term_sn_list:[],
};
},
created() {
this.getList();
},
methods: {
getList() {
this.loading = true;
listPackage(this.queryParams)
.then(response => {
this.packageList = response.rows;
this.total = response.total;
this.loading = false;
})
.catch(error => {
this.loading = false;
console.error('获取设备质检列表时出错:', error);
});
},
resetQueryParams() {
this.queryParams = {
pageNum: 1,
pageSize: 10,
term_sn: '',
};
this.getList();
},
downloadFile(row) {
// 构造下载链接,假设文件对象中有一个 downloadUrl 属性存储下载链接
const downloadUrl = row.path;
console.log('111', downloadUrl)
// 如果下载链接存在
if (downloadUrl) {
// 创建一个隐藏的 <a> 元素
const link = document.createElement('a');
link.style.display = 'none';
link.href = downloadUrl;
link.setAttribute('download', row.file_name); // 设置下载文件的名称
// 将创建的 <a> 元素添加到 DOM 中
document.body.appendChild(link);
// 触发点击事件,执行下载操作
link.click();
// 下载完成后移除 <a> 元素
document.body.removeChild(link);
} else {
// 处理下载链接不存在的情况,例如给出提示信息
this.$message.error('文件下载链接不存在!');
}
},
//质检详情
MaInfomation(row) {
this.selectedinfo = { ...row };
this.tanchu.MaInfomation = true;
serjyInfoA({ term_sn: row.term_sn }).then(response => {
console.log('检验信息:', response)
this.zjjyInfoA = response
});
getConfigList(row.term_sn)
.then(response => {
console.log('配置清单:', response);
this.SelectPj = response;
});
serZhengji({ term_sn: row.term_sn }).then(response => {
console.log('整机质检信息:', response)
this.zjzjInfo = response[0]
serzjfjInfo({ file_ids: response[0].dq_info_file_ids }).then(response => {
console.log('整机附件信息:', response.data)
this.zjfjInfo = response.data
})
})
},
updateTermSn(newTermSn) {
this.term_sn = newTermSn;
},
handleView(row) {
this.selectedItem = { ...row };
console.log('Selected row:', row);
this.tanchu.handleView = true;
this.showDetailPage = true;
this.currentDetail = row;
getInspect(row.term_sn)
.then(response => {
this.inspectInfo = response;
this.term_snA = this.selectedItem.term_sn; // 直接赋值为字符串
})
.catch(error => {
console.error('获取检验信息时出错:', error);
});
getConfigList(row.term_sn)
.then(response => {
console.log('配置清单:', response);
this.configList = response;
})
.catch(error => {
console.error('获取配置清单时出错:', error);
});
getUser()
.then(response => {
this.user = response.data;
})
.catch(error => {
console.error('获取当前操作人时出错:', error);
});
},
handleDialogClose() {
this.tanchu.handleView = false;
this.tanchu.MaInfomation = false;
this.selectedinfo = {};
this.inspectInfo = [];
this.inspectInfoA = [];
this.configList = [];
this.user = {};
},
async submitQualityA(){
try {
// const tableDataA = this.inspectInfo.map(item => ({
// code: item.code,
// name: item.name,
// inspect_ask: item.inspect_ask,
// result: item.result,
// }));
const termSnList = this.term_sn_list; // 获取 term_sn 列表
console.log(termSnList,"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
const tableData = this.inspectInfoA.map(item => ({
code: item.code,
name: item.name,
inspect_ask: item.inspect_ask,
result: item.result,
}));
console.log(tableData,"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
// 创建一个包含所有 Sub 对象的数组
const subList = termSnList.map(term_sn => ({
inspect_list: tableData,
devid_qi_cname: this.user.devid_qi_cname,
devid_qi_time: this.user.devid_qi_time,
devidqi_state: this.devidqi_state,
term_sn: term_sn // 将 term_sn 绑定到每个 Sub 对象
}));
console.log(subList,"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
// 发送批量提交的请求
await updateInspectList(subList); // 直接将 subList 传给后端
} catch (error) {
this.$message.error('质检信息提交失败');
console.error(error,batchData);
}
},
async submitQuality() {
try {
const tableData = this.inspectInfo.map(item => ({
code: item.code,
name: item.name,
inspect_ask: item.inspect_ask,
result: item.result,
}));
const packageIS = {
inspect_list: tableData,
term_sn: this.selectedItem.term_sn,
devid_qi_cname: this.user.devid_qi_cname,
devid_qi_time: this.user.devid_qi_time,
devidqi_state: this.selectedItem.devidqi_state,
};
await insertQuality(packageIS);
this.$message.success('质检信息提交成功');
this.handleDialogClose();
} catch (error) {
this.$message.error('质检信息提交失败');
console.error(error);
}
},
setAllResultsToOk() {
this.inspectInfo.forEach(item => {
item.result = 'ok';
});
},
setAllResultsToOkA() {
this.inspectInfoA.forEach(item => {
item.result = 'ok';
});
},
piliang(){
// 获取表格中选中的行
const selectedRows = this.$refs.packageTable.selection; // 使用 ref 获取选中的行
// 从选中的行中提取 term_sn
const term_sn_list = selectedRows.map(row => row.term_sn);
this.term_sn_list = term_sn_list; // 设置 term_sn_list
// 设置 term_sn_list 以便进行批量处理
this.term_sn_list = term_sn_list;
// 显示批量质检对话框
this.tanchu.piliang = true;
this.tanchu.piliang = true;
getUser()
.then(response => {
this.user = response.data;
})
// 获取设备质检列表
getTermSnList(this.term_sn_list.join(',')) // 将 term_sn_list 作为对象传递
.then(response => {
console.log('批量质检数据:', response); // 添加日志检查数据
this.TermSnList = response;
this.total = response.total;
this.loading = false;
})
.catch(error => {
this.loading = false;
console.error('获取设备质检列表时出错:', error);
});
getInspect()
.then(response => {
this.inspectInfoA = response;
console.log(inspectInfoA,aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa)
})
.catch(error => {
console.error('获取检验信息时出错:', error);
});
},
},
};
</script>
<style scoped>
.no-data {
text-align: center;
padding: 20px;
}
</style>
bash
复制代码
import request from '@/utils/request';
// 查询设备-质检明细列表
export function listPackage(query) {
return request({
url: '/quality/machine/homepage',
method: 'get',
params: query
});
}
// 查询质检里面的检验信息
export function getInspect(term_sn) {
return request({
url: '/quality/machine/Inspect',
method: 'get',
params: { term_sn: term_sn }
});
}
// 查询配置清单
export function getConfigList(term_sn) {
return request({
url: '/quality/machine/configlist',
method: 'get',
params: { term_sn: term_sn }
});
}
// 获取当前操作人姓名
export function getUser() {
return request({
url: '/quality/machine/selectUser',
method: 'get'
});
}
// 上传文件
export function uploadFile(data) {
return request({
url: '/quality/PaOss/ImageUpload', // 确保这个路径是正确的
method: 'post',
data,
headers: {
'Content-Type': 'multipart/form-data' // 确保使用正确的 Content-Type
}
});
}
// 查询附件信息!
export function serzjfjInfo(file_ids) {
return request({
url: '/quality/oss/ImageShow',
method: 'get',
params: file_ids
})
}
// 插入质检信息
export function insertQuality(data) {
return request({
url: '/quality/machine/updateInspect',
method: 'post',
data
})
}
// 查询整机检验质检!
export function serjyInfoA(term_sn) {
return request({
url: '/quality/machine/InspectA',
method: 'get',
params: term_sn
})
}
// 查询整机质检!
export function serZhengji(term_sn) {
return request({
url: '/quality/machine/homepage/limit',
method: 'get',
params: term_sn
})
}
export function listPackageA(query) {
return request({
url: '/quality/machine/homepage/limit',
method: 'get',
params: query
});
}
export function getTermSnList(term_sn_list) {
return request({
url: '/quality/machine/byTermSn',
method: 'get',
params: {
term_sn_list: term_sn_list // 直接传递逗号分隔的字符串
}
});
}
// 插入质检信息
export function updateInspectList(data) {
return request({
url: '/quality/machine/updateInspectList',
method: 'post',
data
})
}