<template>
|
<div class="app-container">
|
<!-- 标签页 -->
|
<el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
|
<el-tab-pane label="高压电力电缆" name="highVoltage"></el-tab-pane>
|
<el-tab-pane label="中压电力电缆" name="mediumVoltage"></el-tab-pane>
|
<el-tab-pane label="低压线缆" name="lowVoltage"></el-tab-pane>
|
<el-tab-pane label="主网号地线" name="mainNetwork"></el-tab-pane>
|
<el-tab-pane label="配网号地线" name="distribution"></el-tab-pane>
|
<el-tab-pane label="光缆" name="opticalFiber"></el-tab-pane>
|
<el-tab-pane label="OPGW光缆" name="opgw"></el-tab-pane>
|
<el-tab-pane label="ADSS光缆" name="adss"></el-tab-pane>
|
</el-tabs>
|
|
<!-- 查询区域 -->
|
<div class="search-form">
|
<el-form :model="searchForm" inline size="small">
|
<el-form-item label="样品编号">
|
<el-input v-model="searchForm.sampleCode" placeholder="请输入样品编号" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="试验类型">
|
<el-input v-model="searchForm.testType" placeholder="请输入试验类型" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="试验时间">
|
<el-date-picker v-model="searchForm.testDate" type="date" placeholder="选择日期" clearable></el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="searchList">查询</el-button>
|
<el-button @click="resetSearch">重置</el-button>
|
<el-button type="success" @click="syncData">同步EIP数据</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<!-- 数据表格 -->
|
<el-table v-loading="tableLoading" :data="tableData" border>
|
<el-table-column label="样品编号" prop="sampleCode" show-overflow-tooltip></el-table-column>
|
<el-table-column label="产品名称" prop="productName" show-overflow-tooltip></el-table-column>
|
<el-table-column label="规格型号" prop="specModel" show-overflow-tooltip></el-table-column>
|
<el-table-column label="试验类型" prop="testType" show-overflow-tooltip></el-table-column>
|
<el-table-column label="试验结果" prop="testResult" show-overflow-tooltip></el-table-column>
|
<el-table-column label="原材料" prop="rawMaterial" show-overflow-tooltip></el-table-column>
|
<el-table-column label="过程检" prop="processInspection" show-overflow-tooltip></el-table-column>
|
<el-table-column label="成品检" prop="finalInspection" show-overflow-tooltip></el-table-column>
|
<el-table-column label="试验时间" prop="testDate" show-overflow-tooltip></el-table-column>
|
<el-table-column label="操作" width="100">
|
<template slot-scope="scope">
|
<el-button type="text" @click="viewDetail(scope.row)">查看</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<el-pagination
|
:current-page="page.current"
|
:page-size="page.size"
|
:total="page.total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
layout="total, sizes, prev, pager, next, jumper">
|
</el-pagination>
|
|
<!-- 详情弹窗 -->
|
<el-dialog title="试验数据详情" :visible.sync="detailVisible" width="600px">
|
<el-form :model="detailData" label-width="120px" size="small" disabled>
|
<el-form-item label="样品编号">
|
<span>{{ detailData.sampleCode }}</span>
|
</el-form-item>
|
<el-form-item label="产品名称">
|
<span>{{ detailData.productName }}</span>
|
</el-form-item>
|
<el-form-item label="规格型号">
|
<span>{{ detailData.specModel }}</span>
|
</el-form-item>
|
<el-form-item label="试验类型">
|
<span>{{ detailData.testType }}</span>
|
</el-form-item>
|
<el-form-item label="试验结果">
|
<span>{{ detailData.testResult }}</span>
|
</el-form-item>
|
<el-form-item label="原材料">
|
<span>{{ detailData.rawMaterial }}</span>
|
</el-form-item>
|
<el-form-item label="过程检">
|
<span>{{ detailData.processInspection }}</span>
|
</el-form-item>
|
<el-form-item label="成品检">
|
<span>{{ detailData.finalInspection }}</span>
|
</el-form-item>
|
<el-form-item label="试验时间">
|
<span>{{ detailData.testDate }}</span>
|
</el-form-item>
|
<el-form-item label="备注">
|
<span>{{ detailData.remark || "-" }}</span>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="detailVisible = false">关闭</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
pageHighVoltageCable,
|
pageMediumVoltageCable,
|
pageLowVoltageCable,
|
pageMainNetworkGroundWire,
|
pageDistributionGroundWire,
|
pageOpticalFiber,
|
pageOPGWOpticalFiber,
|
pageADSSOpticalFiber,
|
syncEIPData,
|
} from "@/api/quality/eipCable";
|
|
export default {
|
name: "EipCable",
|
data() {
|
return {
|
activeTab: "highVoltage",
|
searchForm: {
|
sampleCode: "",
|
testType: "",
|
testDate: "",
|
},
|
tableData: [],
|
tableLoading: false,
|
page: {
|
current: 1,
|
size: 20,
|
total: 0,
|
},
|
detailVisible: false,
|
detailData: {},
|
syncLoading: false,
|
};
|
},
|
mounted() {
|
this.searchList();
|
},
|
methods: {
|
getApi() {
|
switch (this.activeTab) {
|
case "highVoltage":
|
return pageHighVoltageCable;
|
case "mediumVoltage":
|
return pageMediumVoltageCable;
|
case "lowVoltage":
|
return pageLowVoltageCable;
|
case "mainNetwork":
|
return pageMainNetworkGroundWire;
|
case "distribution":
|
return pageDistributionGroundWire;
|
case "opticalFiber":
|
return pageOpticalFiber;
|
case "opgw":
|
return pageOPGWOpticalFiber;
|
case "adss":
|
return pageADSSOpticalFiber;
|
default:
|
return pageHighVoltageCable;
|
}
|
},
|
searchList() {
|
this.tableLoading = true;
|
const api = this.getApi();
|
api({
|
...this.searchForm,
|
page: this.page.current,
|
size: this.page.size,
|
}).then((res) => {
|
this.tableData = res.data.records;
|
this.page.total = res.data.total;
|
this.tableLoading = false;
|
}).catch((err) => {
|
this.tableLoading = false;
|
console.error(err);
|
});
|
},
|
resetSearch() {
|
this.searchForm = {
|
sampleCode: "",
|
testType: "",
|
testDate: "",
|
};
|
this.searchList();
|
},
|
handleTabClick() {
|
this.page.current = 1;
|
this.searchList();
|
},
|
handleSizeChange(val) {
|
this.page.size = val;
|
this.searchList();
|
},
|
handleCurrentChange(val) {
|
this.page.current = val;
|
this.searchList();
|
},
|
viewDetail(row) {
|
this.detailData = row;
|
this.detailVisible = true;
|
},
|
syncData() {
|
this.syncLoading = true;
|
syncEIPData({ cableType: this.activeTab }).then((res) => {
|
if (res.code === 200) {
|
this.$message.success("同步成功");
|
this.searchList();
|
} else {
|
this.$message.error(res.msg || "同步失败");
|
}
|
this.syncLoading = false;
|
}).catch((err) => {
|
this.syncLoading = false;
|
console.error(err);
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.search-form {
|
margin-bottom: 15px;
|
}
|
|
.dialog-footer {
|
text-align: right;
|
}
|
</style>
|
