纪念一下自己写的前端

第一次自己写前端，纪念一下

vue

<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><!-- 分页组件 --><paginationv-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-uploadclass="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-uploadclass="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>

api:

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})
}