391 lines
11 KiB
Vue
391 lines
11 KiB
Vue
<template>
|
||
<view>
|
||
<view class="topTab">
|
||
<view class="tab-header">
|
||
<view class="left" style="width: 20%;">
|
||
<image @click="customNavigateBack" src="@/static/img/back.png" mode=""></image>
|
||
</view>
|
||
<view class="center" v-if="!isView">试验信息填写</view>
|
||
<view class="center" v-if="isView">试验信息查看</view>
|
||
<view class="right" style="justify-content: flex-end;width:25%;">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="page-content">
|
||
<scroll-view class="page-content-scroll" scroll-y>
|
||
<u--form ref="uForm" labelPosition="left" labelWidth="100px" :model="formData" :rules="rules">
|
||
<!-- 样品信息 -->
|
||
<view class="content-title">
|
||
<view class="title-left-border"></view>
|
||
<view class="title-text">样品信息</view>
|
||
</view>
|
||
<view class="content-box">
|
||
<u-form-item label="样品类别" prop="devTypeName" borderBottom required>
|
||
<u--input v-model="formData.devTypeName" readonly border="none"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="规格型号" prop="devModule" borderBottom required>
|
||
<u--input v-model="formData.devModule" readonly border="none"></u--input>
|
||
</u-form-item>
|
||
|
||
<u-form-item label="生产厂家" prop="manufacturer" borderBottom required>
|
||
<u--input v-model="formData.manufacturer" border="none" :readonly="isView" maxlength="30" placeholder="请填写生产厂家"></u--input>
|
||
</u-form-item>
|
||
|
||
<u-form-item label="生产日期" prop="manufactureDate" borderBottom required v-if="isView">
|
||
<u--input v-model="formData.manufactureDate" placeholder="请选择生产日期" readonly border="none"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="生产日期" prop="manufactureDate" borderBottom required v-if="!isView" @click="openManufactureDatePick">
|
||
<u--input v-model="formData.manufactureDate" suffixIcon="arrow-right" placeholder="请选择生产日期" readonly suffixIconStyle="color: #909399;fontSize:24px;" border="none"></u--input>
|
||
</u-form-item>
|
||
<u-datetime-picker
|
||
:show="manufactureDateShow"
|
||
mode="date" ref="manufactureDate"
|
||
@confirm="manufactureDateConfirm"
|
||
@cancel="manufactureDateShow = false"
|
||
></u-datetime-picker>
|
||
</view>
|
||
<!-- 外观状态 -->
|
||
<view class="content-title">
|
||
<view class="title-left-border"></view>
|
||
<view class="title-text">外观状态</view>
|
||
</view>
|
||
<view class="content-box">
|
||
<u-form-item label="外观状态" prop="devStatus" borderBottom required>
|
||
<u--input v-model="formData.devStatus" border="none" maxlength="30" :readonly="isView" placeholder="请填写外观状态"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="金额" prop="amount" borderBottom required>
|
||
<u--input v-model="formData.amount" type="number" border="none" maxlength="8" :readonly="isView" placeholder="请填写金额" ></u--input>
|
||
</u-form-item>
|
||
</view>
|
||
<!-- 测试 -->
|
||
<view v-for="(item,index) in configItemsList" :key="index">
|
||
<view class="content-title">
|
||
<view class="title-left-border"></view>
|
||
<view class="title-text">{{item.experTypeName}}</view>
|
||
</view>
|
||
<view class="content-box">
|
||
|
||
<u-form-item v-for="(titem,tindex) in item.itemList" :key="tindex" :label="titem.itemName" borderBottom required>
|
||
<u--input v-model="titem.value" border="none" maxlength="30" :readonly="isView" placeholder="请填写"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="金额" borderBottom required>
|
||
<u--input v-model="item.amount" border="none" readonly placeholder="金额"></u--input>
|
||
</u-form-item>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<view style="width: 100%;height: 10vh;"></view>
|
||
<view class="submit-box" v-if="!isView">
|
||
<u-button shape="square" class="submit-btn2" @click="customNavigateBack">取 消</u-button>
|
||
<u-button shape="square" class="submit-btn" @click="sumbitConfirm">确 认</u-button>
|
||
</view>
|
||
</u--form>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { getTestBasicInfo,getDicts,getDevices } from '@/service/url.js';
|
||
import tabHeader from '@/components/tab-Header.vue';
|
||
import AES from "@/utils/cryptoJs/aes.js";
|
||
export default {
|
||
components: {
|
||
tabHeader
|
||
},
|
||
data() {
|
||
return {
|
||
isView:false,
|
||
sampleId:'',
|
||
devTypeCode:'',
|
||
fillIndex:0,
|
||
itemData:{},
|
||
configItemsList:[],
|
||
formData:{
|
||
// experId:'',
|
||
devId:'',// 收样样品ID （必填）
|
||
departmentId:'',// 部门ID（必填）
|
||
devTypeName:'',// 收样样品 （必填）
|
||
devModule:'',// 规格型号 （必填）
|
||
devCode:'',// 客户自编号ID （必填）
|
||
manufacturer:'',// 生产厂家 （必填）
|
||
manufactureDate:'',// 生产日期 （必填）
|
||
devStatus:'',// 外观状态 （必填）
|
||
amount:"", // 金额-默认为0 （必填）
|
||
remarks:"''" ,// 备注 （必填）
|
||
devData:[]
|
||
},
|
||
manufactureDateShow:false,//试验日期选择
|
||
rules: {
|
||
'manufacturer': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写生产厂家',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'manufactureDate': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择生产日期',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'devStatus': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写外观状态',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'amount': [
|
||
{
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写金额',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
{
|
||
pattern: /^(([0-9]*)|(([0]\.\d{1,2}|[0-9]*\.\d{1,2})))$/,
|
||
transform(value) {
|
||
return String(value);
|
||
},
|
||
message: '大于等于0并且最多保留两位小数',
|
||
trigger: 'blur'
|
||
},
|
||
]
|
||
},
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
console.log(option)
|
||
if(option.isView&&option.isView!=""){
|
||
this.isView=true;
|
||
}else{
|
||
this.isView=false;
|
||
}
|
||
this.sampleId = option.sampleId || '';
|
||
this.devTypeCode = option.devTypeCode || '';
|
||
this.fillIndex = option.fillIndex || 0;
|
||
this.itemData = JSON.parse(option.itemData) || {};
|
||
this.configItemsList = JSON.parse(option.configItemsList) || [];
|
||
|
||
// console.log(this.itemData)
|
||
if(this.itemData.devId){
|
||
this.formData.devId=this.itemData.devId;
|
||
this.formData.experId=this.itemData.experId;
|
||
this.formData.devStatus=this.itemData.devStatus;
|
||
this.formData.amount=this.itemData.amount;
|
||
this.formData.manufacturer=this.itemData.manufacturer;
|
||
this.formData.manufactureDate=this.itemData.manufactureDate;
|
||
if(this.itemData.isTemp){
|
||
this.formData.devData=this.itemData.devData
|
||
}else{
|
||
this.formData.devData=JSON.parse(this.itemData.devData) || [];
|
||
}
|
||
let sum=0;
|
||
this.configItemsList.forEach(item=>{
|
||
// item.itemList.length
|
||
item.itemList.forEach(sitem=>{
|
||
sitem.value=this.formData.devData[sum]||'';
|
||
sum=sum+1;
|
||
})
|
||
})
|
||
}else{
|
||
this.formData.devId=this.itemData.id;
|
||
this.configItemsList.forEach(item=>{
|
||
item.itemList.forEach(sitem=>{
|
||
sitem.value="";
|
||
})
|
||
})
|
||
}
|
||
this.formData.departmentId=this.itemData.departmentId;
|
||
this.formData.devCode=this.itemData.devCode;
|
||
this.formData.devModule=this.itemData.devModule;
|
||
this.formData.devTypeName=this.itemData.devTypeName;
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
methods: {
|
||
//返回
|
||
customNavigateBack() {
|
||
// 自定义返回逻辑
|
||
const pages = getCurrentPages(); // 获取页面栈
|
||
const len = pages.length;
|
||
let backPage = ''; // 要返回的页面路径
|
||
for (let i = len - 2; i >= 0; i--) {
|
||
// 从倒数第二个页面开始遍历，找到第一个不是当前页面的页面
|
||
if (pages[i].route !== 'pages/A/A') {
|
||
backPage = pages[i].route;
|
||
break;
|
||
}
|
||
}
|
||
if (backPage) {
|
||
uni.navigateBack({
|
||
delta: len - 1 - pages.findIndex(page => page.route === backPage) // 返回到已存在的页面
|
||
});
|
||
}
|
||
},
|
||
openManufactureDatePick(){
|
||
this.manufactureDateShow=true;
|
||
this.$refs.manufactureDate.innerValue=new Date().getTime()
|
||
},
|
||
manufactureDateConfirm(e){
|
||
this.manufactureDateShow = false;
|
||
this.formData.manufactureDate = this.$u.date(e.value,'yyyy-mm-dd')
|
||
},
|
||
|
||
sumbitConfirm(){
|
||
let pages = getCurrentPages()//获取所有页面栈的实例列表
|
||
let nowPage = pages[ pages.length - 1 ] //当前页面的实例
|
||
let prevPage = pages[ pages.length - 2 ] //上一个页面的实例
|
||
|
||
this.$refs.uForm.validate().then(res=>{
|
||
// console.log('表单数据信息：', this.formData);
|
||
// console.log(this.configItemsList)
|
||
var index=-1;
|
||
this.formData.devData=[]
|
||
this.configItemsList.forEach(item=>{
|
||
item.itemList.forEach((sitem,sindex)=>{
|
||
if(sitem.value==""){
|
||
index=sindex;
|
||
}else{
|
||
this.formData.devData.push(sitem.value)
|
||
}
|
||
})
|
||
})
|
||
if(index>-1){
|
||
uni.showToast({
|
||
title: "试验信息未填写完整,请填写完整或填无",
|
||
icon: "none"
|
||
})
|
||
}else{// prevPage.$vm.status = false //更改上一个页面的数据
|
||
this.formData.isTemp=true;
|
||
prevPage.$vm.infoList[this.fillIndex]=this.formData;
|
||
uni.navigateBack({
|
||
delta:1 //返回上一页
|
||
})
|
||
}
|
||
}).catch(err =>{
|
||
console.log(2222)
|
||
console.log('表单错误信息：', err);
|
||
})
|
||
},
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.page-content{
|
||
width: 100%;
|
||
height: 92vh;
|
||
position: absolute;
|
||
top:8vh;
|
||
padding: 0rpx 0;
|
||
background-color: #F3F3F3;
|
||
|
||
.page-content-scroll{
|
||
width: 100%;
|
||
height: 90vh;
|
||
margin: 20rpx 0;
|
||
// background-color: red;
|
||
}
|
||
.content-title{
|
||
width: 92%;
|
||
height: 80rpx;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.title-left-border{
|
||
height: 28rpx;
|
||
width: 8rpx;
|
||
background: #0052D9;
|
||
margin-right: 8rpx;
|
||
}
|
||
.title-text{
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
.content-box{
|
||
width: 90%;
|
||
padding-left: 6%;
|
||
padding-right: 4%;
|
||
height: auto;
|
||
background: #FFF;
|
||
|
||
}
|
||
.add-btn{
|
||
width: 66rpx;
|
||
height: 34rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 40rpx;
|
||
border: 2rpx solid #0052D9;
|
||
margin:20rpx 20rpx;
|
||
}
|
||
.del-btn{
|
||
width: 66rpx;
|
||
height: 34rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 40rpx;
|
||
border: 2rpx solid red;
|
||
margin:20rpx 20rpx;
|
||
}
|
||
|
||
.item-number{
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border-radius: 30rpx;
|
||
background:#0052D9;
|
||
color: #FFF;
|
||
line-height: 30rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
.submit-box {
|
||
width: 100%;
|
||
height: 100rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
display: flex;
|
||
padding-bottom: 20rpx;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: #FFF;
|
||
.submit-btn {
|
||
width: 45%;
|
||
margin: 0 auto;
|
||
height: 75rpx;
|
||
font-size: 26rpx;
|
||
background: #0052D9;
|
||
color: #FFF;
|
||
box-shadow: 0px 4px 2px 0px rgba(81,147,254,0.15);
|
||
}
|
||
.submit-btn2{
|
||
width: 45%;
|
||
margin: 0 auto;
|
||
height: 75rpx;
|
||
font-size: 26rpx;
|
||
background: #F5F5F5;
|
||
box-shadow: 0px 4px 2px 0px rgba(81,147,254,0.15);
|
||
}
|
||
}
|
||
|
||
/deep/.u-textarea__count{
|
||
bottom: -20rpx;
|
||
}
|
||
}
|
||
</style>
|