388 lines
12 KiB
Vue
388 lines
12 KiB
Vue
<template>
|
|
<view class="page-container">
|
|
<!-- 表单信息区域 -->
|
|
<scroll-view scroll-y style="height: 100vh;">
|
|
<view class="table-list-item">
|
|
<uni-row :gutter="24" style="display: flex; align-items: center">
|
|
<uni-col :span="6">
|
|
<view> 设备编码 </view>
|
|
</uni-col>
|
|
<uni-col :span="12">
|
|
<view>
|
|
<uni-easyinput v-model="queryCodeParams.maCode" placeholder="请输入内容" />
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view
|
|
class="coding-btn search-btn"
|
|
@tap="onCodeSearch"
|
|
>编码检索</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<div v-if="optionList.length > 1" >
|
|
<uni-data-select
|
|
v-model="maId"
|
|
:localdata="optionList"
|
|
@change="changeTag"
|
|
placeholder="请选择相关联编号"
|
|
:searchable="false"
|
|
filterable
|
|
></uni-data-select>
|
|
</div>
|
|
</view>
|
|
|
|
<view class="form-section">
|
|
<view class="section-header">
|
|
<text class="title">设备信息</text>
|
|
</view>
|
|
<view class="form-content">
|
|
<uni-forms :model="formData" label-width="100" :border="true">
|
|
<uni-forms-item label="设备类型：" name="maName">
|
|
<span class="form-view">{{formData?.maName ?? ''}}</span>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="规格型号：" name="maModel">
|
|
<span class="form-view">{{formData?.maModel ?? ''}}</span>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="二维码编码：" name="qrCode">
|
|
<span class="form-view">{{formData?.qrCode ?? ''}}</span>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="设备编码：" name="maCode">
|
|
<span class="form-view">{{formData?.maCode ?? ''}}</span>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="设备状态：" name="maStatus">
|
|
<span class="form-view">{{formData?.maStatus ?? ''}}</span>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="本次检修时间：" name="checkTimeSynch">
|
|
<text class="form-view">{{formData?.thisCheckTime ?? ''}}</text>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="下次检修时间：" name="nextCheckTimeSynch">
|
|
<text class="form-view">{{formData?.nextCheckTime ?? ''}}</text>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="出入库次数：" name="inOutNum">
|
|
<text class="form-view">{{formData?.inOutNum ?? ''}}</text>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="初次入库：" name="inTime">
|
|
<text class="form-view">{{formData?.inTime ?? ''}}</text>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="服务工程次数：" name="serviceNum">
|
|
<text class="form-view">{{formData?.serviceNum ?? ''}}</text>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="检验次数：" name="checkNum">
|
|
<text class="form-view">{{formData?.checkNum ?? ''}}</text>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="更换配件次数：" name="checkNum">
|
|
<text class="form-view">{{formData?.checkNum ?? ''}}</text>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="报废：" name="scrapTime">
|
|
<text class="form-view">{{formData?.scrapTime ?? ''}}</text>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="生产厂家：" name="statusName">
|
|
<text class="form-view">{{}}</text>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="领料单位：" name="leaseUnit">
|
|
<text class="form-view">{{formData?.leaseUnit ?? ''}}</text>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="领料工程：" name="leaseProject">
|
|
<text class="form-view">{{formData?.leaseProject ?? ''}}</text>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="领料时间：" name="leaseTime">
|
|
<text class="form-view">{{formData?.leaseTime ?? ''}}</text>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="退料单位：" name="backUnit">
|
|
<text class="form-view">{{formData?.backUnit ?? ''}}</text>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="退料工程：" name="backProject">
|
|
<text class="form-view">{{formData?.backProject ?? ''}}</text>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="退料时间：" name="backTime">
|
|
<text class="form-view">{{formData?.backTime ?? ''}}</text>
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onUnmounted } from 'vue'
|
|
import { onLoad, onShow, } from '@dcloudio/uni-app'
|
|
import { debounce } from 'lodash-es'
|
|
import { getDeviceListAPI } from '@/services/picking/outbound.js'
|
|
const queryParams = ref({})
|
|
const formData = ref({
|
|
maName: '',
|
|
maModel: '',
|
|
qrCode: '',
|
|
maCode: '',
|
|
maStatus: '',
|
|
thisCheckTime: '',
|
|
nextCheckTime: '',
|
|
inOutNum: '',
|
|
inTime: '',
|
|
serviceNum: '',
|
|
checkNum: '',
|
|
scrapTime: '',
|
|
statusName: '',
|
|
leaseUnit: '',
|
|
leaseProject: '',
|
|
leaseTime: '',
|
|
backUnit: '',
|
|
backProject: '',
|
|
backTime: ''
|
|
})
|
|
// 编码设备列表查询参数
|
|
const queryCodeParams = ref({
|
|
maCode: '',
|
|
maId:'',
|
|
})
|
|
const maId = ref('')
|
|
const optionList = ref([])
|
|
// 页面加载完毕
|
|
onLoad((options) => {})
|
|
|
|
onShow(() => {})
|
|
|
|
// 编码搜索按钮
|
|
const onCodeSearch = () => {
|
|
getCodeDeviceInfoData()
|
|
}
|
|
// 获取信息
|
|
const getCodeDeviceInfoData = async () => {
|
|
console.log(queryCodeParams.value)
|
|
// const res = await getCodeDeviceListAPI(queryCodeParams.value)
|
|
getDeviceListAPI({'maCode': queryCodeParams.value.maCode}).then(response => {
|
|
console.log("xxxxxxxxxxx",response)
|
|
if (response.data && response.data.length !== 0) {
|
|
optionList.value = response.data.map(option => ({
|
|
value: option.maId,
|
|
text: option.maCode
|
|
}))
|
|
if(response.data.length === 1){
|
|
formData.value = response.data[0]
|
|
}
|
|
}else{
|
|
uni.showToast({
|
|
title: '未查询到该编号信息',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
console.log(res)
|
|
}
|
|
|
|
// 标签变更处理
|
|
const changeTag = async () => {
|
|
if (!maId.value) return
|
|
|
|
try {
|
|
const response = await getDeviceListAPI({'maId': maId.value})
|
|
if (response.data && response.data.length !== 0) {
|
|
formData.value = response.data[0]
|
|
}
|
|
} catch (error) {
|
|
console.error("获取编号信息失败", error)
|
|
uni.showToast({
|
|
title: '获取信息失败',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.uni-forms-item--border[data-v-4c3fe719] {
|
|
margin-bottom: 0;
|
|
padding: 0 0;
|
|
border-top: 1px #eee solid;
|
|
}
|
|
|
|
.select-container :deep(.uni-select__input-text) {
|
|
white-space: nowrap;
|
|
text-overflow: clip;
|
|
overflow: visible;
|
|
}
|
|
|
|
.select-container :deep(.uni-select) {
|
|
width: auto;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.page-container {
|
|
display: flex;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
background-color: #f7f8fa;
|
|
padding: 24rpx;
|
|
|
|
.table-list-item {
|
|
background: #fff;
|
|
padding: 32rpx;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
margin-bottom: 24rpx;
|
|
|
|
// 表单样式
|
|
:deep(.uni-forms) {
|
|
.uni-forms-item {
|
|
margin-bottom: 24rpx;
|
|
padding: 0;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.uni-forms-item__label {
|
|
color: #8c8c8c;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
padding: 0;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.uni-forms-item__content {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 编码按钮组
|
|
.coding-btn {
|
|
padding: 16rpx 0;
|
|
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
|
|
border-radius: 12rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
// 编码检索按钮特殊样式
|
|
&.search-btn {
|
|
padding: 12rpx 0;
|
|
background: #fff;
|
|
color: #ff9800;
|
|
border: 2rpx solid rgba(255, 152, 0, 0.5);
|
|
background: linear-gradient(to bottom, rgba(255, 152, 0, 0.05), rgba(255, 152, 0, 0.1));
|
|
box-shadow: none;
|
|
font-weight: 600;
|
|
letter-spacing: 1rpx;
|
|
|
|
&:active {
|
|
background: rgba(255, 152, 0, 0.15);
|
|
border-color: rgba(255, 152, 0, 0.6);
|
|
transform: translateY(1rpx);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 编码列表样式
|
|
:deep(.uni-row) {
|
|
/* margin-bottom: 20rpx; */
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.uni-col-6 {
|
|
color: #8c8c8c;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.cont {
|
|
color: #262626;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 1.8;
|
|
}
|
|
}
|
|
|
|
// 输入框样式
|
|
:deep(.uni-easyinput__content) {
|
|
background-color: #f7f8fa;
|
|
border: 2rpx solid #e8e8e8;
|
|
border-radius: 12rpx;
|
|
height: 75rpx;
|
|
transition: all 0.3s ease;
|
|
|
|
&:focus-within {
|
|
border-color: #3784fb;
|
|
box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
|
|
}
|
|
|
|
.uni-easyinput__content-input {
|
|
font-size: 28rpx;
|
|
color: #262626;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.form-section {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 24rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
|
|
// 头部样式
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24rpx 32rpx;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
background: #f7f8fa;
|
|
}
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #262626;
|
|
}
|
|
}
|
|
|
|
// 表单内容区域
|
|
.form-content {
|
|
:deep(.uni-forms-item) {
|
|
margin-bottom: 10rpx;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.uni-forms-item__label {
|
|
color: #8c8c8c;
|
|
}
|
|
.form-view {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #262626;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|