<template>
|
<view class="inspection-sheet">
|
<!-- 不良描述表格 -->
|
<view class="inspection-table">
|
<table>
|
<thead>
|
<tr>
|
<th width="35%" style="text-align: center;">检验项目</th>
|
<th width="50%" style="text-align: center;">不良描述</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item, index) in tableData" :key="index">
|
<td>{{ item.fchecK_ITEM }}</td>
|
<td>
|
<view class="description-text">{{ item.funit }}</view>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
formData: {
|
id: ""
|
},
|
tableData: []
|
}
|
},
|
onLoad(options) {
|
let params = options;
|
this.formData.id = params["id"];
|
},
|
methods: {
|
onShow() {
|
if (this.formData.id) {
|
this.init();
|
}
|
},
|
init() {
|
let userName = this.$loginInfo.account;
|
this.$post({
|
url: "/LLJ/getJYBlmsItem",
|
data: {
|
id: this.formData.id
|
}
|
}).then(res => {
|
this.tableData=res.data;
|
});
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.inspection-sheet {
|
font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
|
max-width: 1000px;
|
margin: 0 auto;
|
padding: 20px;
|
background-color: #fff;
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
}
|
|
.inspection-table {
|
margin: 25px 0;
|
}
|
|
.inspection-table table {
|
width: 100%;
|
border-collapse: collapse;
|
}
|
|
.inspection-table th, .inspection-table td {
|
padding: 12px 15px;
|
border: 1px solid #ddd;
|
text-align: left;
|
}
|
|
.inspection-table th {
|
background-color: #f8f9fa;
|
font-weight: bold;
|
color: #34495e;
|
}
|
|
.inspection-table tr:nth-child(even) {
|
background-color: #f9f9f9;
|
}
|
|
.inspection-table tr:hover {
|
background-color: #f1f5f9;
|
}
|
|
.description-text {
|
position: relative;
|
z-index: 2;
|
padding: 25px;
|
background-color: rgba(255, 255, 255, 0.7);
|
}
|
|
@media (max-width: 500px) {
|
.inspection-table table {
|
display: block;
|
overflow-x: auto;
|
}
|
}
|
</style>
|
