<template>
|
<view class="container">
|
<!-- 表格头部 -->
|
<view class="table-header" v-if="components.length>0">
|
<view class="th name">元器件名称</view>
|
<view class="th spec">规格</view>
|
<view class="th manufacturer">制造商</view>
|
<view class="th operation">上传图片</view>
|
|
</view>
|
|
<!-- 表格内容 -->
|
<view class="table-body" v-if="components.length>0">
|
<!-- 循环渲染元器件 -->
|
<view class="tr" v-for="(item, index) in components" :key="index">
|
<view class="td name">{{ item.name }}</view>
|
|
<!-- 规格列 -->
|
<view class="td spec"v-if="current=='true'">
|
<view v-for="(spec, sIndex) in item.specs" :key="sIndex"
|
class="option-item" @click="selectSpec(item, sIndex)">
|
<radio :value="String(sIndex)"
|
:checked="item.selectedSpec === sIndex"/>
|
<text class="option-text">{{ spec }}</text>
|
</view>
|
</view>
|
|
<!-- 制造商列 -->
|
<view class="td manufacturer" v-if="current=='true'">
|
<view v-for="(mfg, mIndex) in item.manufacturers" :key="mIndex"
|
class="option-item" @click="selectMfg(item, mIndex)">
|
<radio :value="String(mIndex)"
|
:checked="item.selectedMfg === mIndex"/>
|
<text class="option-text">{{ mfg }}</text>
|
</view>
|
</view>
|
|
<view class="td operation" v-if="current=='true'">
|
<button class="secondary-btn" @click="uploadImages(item.id)">上传/查看图片</button>
|
</view>
|
|
<!-- 规格列 -->
|
<view class="td spec" v-if="current!='true'">
|
<view v-for="(spec, sIndex) in item.specs" :key="sIndex"
|
class="option-item">
|
<radio :value="String(sIndex)"
|
:checked="item.selectedSpec === sIndex"
|
:disabled="true"/>
|
<text class="option-text">{{ spec }}</text>
|
</view>
|
</view>
|
|
<!-- 制造商列 -->
|
<view class="td manufacturer" v-if="current!='true'">
|
<view v-for="(mfg, mIndex) in item.manufacturers" :key="mIndex"
|
class="option-item">
|
<radio :value="String(mIndex)"
|
:checked="item.selectedMfg === mIndex"
|
:disabled="true"/>
|
<text class="option-text">{{ mfg }}</text>
|
</view>
|
</view>
|
<view class="td operation" v-if="current!='true'">
|
<button class="secondary-btn" @click="uploadImages(item.id)">上传/查看图片</button>
|
</view>
|
|
|
</view>
|
</view>
|
|
<!-- 提交按钮 -->
|
<view class="submit-container" v-if="components.length>0">
|
<button v-if="this.current=='true'" class="primary-btn"
|
:disabled="isSubmitting"
|
@tap="handleSubmit">
|
{{ isSubmitting ? '提交中...' : '保存清单' }}
|
</button>
|
<!-- <button class="secondary-btn" @click="uploadImages">上传/查看图片</button> -->
|
</view>
|
<view class="submit-container" v-if="components.length==0">
|
<h1>温馨提示：</h1>
|
<h1>该物料没有维护一致性核对项目，请先维护！</h1>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
isSubmitting: false,
|
formid:0,
|
components: [],
|
current:'false'
|
}
|
},
|
methods: {
|
selectSpec(item, index) {
|
if (this.isSubmitting) return
|
item.selectedSpec = index
|
if (index < item.manufacturers.length) {
|
item.selectedMfg = index
|
}
|
},
|
selectMfg(item, index) {
|
if (this.isSubmitting) return
|
item.selectedMfg = index
|
if (index < item.specs.length) {
|
item.selectedSpec = index
|
}
|
},
|
uploadImages(id) {
|
// 上传/查看图片的逻辑
|
uni.navigateTo({
|
url: 'ImageItem?id=888' + id.sort()[0]
|
});
|
},
|
async handleSubmit() {
|
if (this.isSubmitting) return
|
|
try {
|
this.isSubmitting = true
|
|
// 表单验证
|
const validation = this.validateForm()
|
if (!validation.valid) {
|
uni.showToast({
|
title: validation.msg,
|
icon: 'none',
|
duration: 2000
|
})
|
return
|
}
|
|
// 获取提交数据
|
const submitData = this.components.map(item => ({
|
name: item.name,
|
spec: item.specs[item.selectedSpec],
|
manufacturer: item.manufacturers[item.selectedMfg],
|
id: item.id[item.selectedMfg]
|
}))
|
|
// 实际提交时可取消注释以下代码
|
// const res = await uni.request({
|
// url: 'your_api_url',
|
// method: 'POST',
|
// data: submitData
|
// })
|
this.$post({
|
url: "/LLJ/saveYzxItem",
|
data: {
|
id:this.formid,
|
data: submitData
|
}
|
}).then(res => {
|
if(res.status==0){
|
uni.showToast({
|
title: '保存成功',
|
icon: 'success',
|
duration: 2000
|
})
|
}else{
|
uni.showModal({
|
title: "提示",
|
content: res.message,
|
confirmText: "确定",
|
showCancel: false,
|
success: (res) => {
|
|
}
|
})
|
}
|
}).catch(() => {
|
this.isLoading = false; // 出现错误时结束加载
|
});
|
|
|
|
} finally {
|
this.isSubmitting = false
|
}
|
},
|
validateForm() {
|
for (const item of this.components) {
|
if (item.selectedSpec === -1 || item.selectedMfg === -1) {
|
return {
|
valid: false,
|
msg: `${item.name} 未完成选择`
|
}
|
}
|
}
|
return { valid: true }
|
},
|
onLoad(options) {
|
//options中包含了url附带的参数
|
let params = options;
|
this.formid = params["id"];
|
this.current=params["current"];
|
|
//页面加载时调用的事件
|
this.$post({
|
url: "/LLJ/getYzxItem",
|
data: {
|
id:this.formid
|
}
|
}).then(res => {
|
console.log(res);
|
this.components=res.data
|
}).catch(() => {
|
this.isLoading = false; // 出现错误时结束加载
|
});
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.container {
|
padding: 20rpx;
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
}
|
|
/* 表格样式 */
|
.table-header, .tr {
|
display: flex;
|
border-bottom: 1rpx solid #eee;
|
background-color: #fff;
|
}
|
|
.th, .td {
|
padding: 20rpx;
|
border-right: 1rpx solid #eee;
|
}
|
|
.th {
|
background-color: #f8f9fa;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.name { width: 20%; }
|
.spec { width: 30%; }
|
.manufacturer { width: 30%; }
|
.operation { width: 20%; }
|
|
/* 选项样式 */
|
.option-item {
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0;
|
min-height: 80rpx;
|
}
|
|
radio {
|
transform: scale(0.9);
|
margin-right: 15rpx;
|
}
|
|
.option-text {
|
flex: 1;
|
font-size: 28rpx;
|
color: #444;
|
}
|
|
.primary-btn, .secondary-btn {
|
padding: 10px 20px;
|
border: none;
|
border-radius: 4px;
|
font-size: 14px;
|
cursor: pointer;
|
transition: all 0.3s;
|
}
|
|
.primary-btn {
|
background-color: #3498db;
|
color: white;
|
}
|
|
.primary-btn:hover {
|
background-color: #2980b9;
|
}
|
|
/* 提交按钮样式 */
|
.submit-container {
|
/* margin: 40rpx 20rpx; */
|
padding: 20rpx 0;
|
background-color: #fff;
|
/* border-radius: 16rpx; */
|
}
|
|
|
/* 响应式适配 */
|
@media (max-width: 768px) {
|
.th, .td {
|
padding: 16rpx;
|
font-size: 26rpx;
|
}
|
|
.option-text {
|
font-size: 26rpx;
|
}
|
|
.submit-btn {
|
width: 95%;
|
font-size: 28rpx;
|
}
|
}
|
</style>
|
