476 lines
15 KiB
Vue
476 lines
15 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<!-- 任务信息 -->
|
||
<div class="card-container">
|
||
<div class="card-header" @click="toggleCollapse">
|
||
<span class="title">任务信息</span>
|
||
<span style="color: #007AFF">{{ collapsed ? '展开' : '收起' }}</span>
|
||
</div>
|
||
|
||
<view v-show="!collapsed">
|
||
<uni-forms :model="item" label-width="170rpx" :border="true">
|
||
<uni-forms-item label="单位：" name="unitName">
|
||
<span class="form-item">{{ item.unitName }}</span>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="工程：" name="proName">
|
||
<span class="form-item">{{ item.proName }}</span>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="单号：" name="code">
|
||
<span class="form-item">{{ item.code }}</span>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="人员：" name="fieldPerson">
|
||
<span class="form-item">{{ item.fieldPerson }}</span>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="电话：" name="phone">
|
||
<span class="form-item">{{ item.phone }}</span>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</view>
|
||
</div>
|
||
|
||
<!-- 维修物资 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<span class="title">维修物资</span>
|
||
</div>
|
||
<div class="select-area">
|
||
<uni-row :gutter="24" style="display: flex; align-items: center">
|
||
<uni-col :span="10">
|
||
<view>
|
||
<uni-data-select v-model="typeId" placeholder="请选择物资类型" :localdata="maTypeSelectList"
|
||
@change="getMaCode" filterable>
|
||
</uni-data-select>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="10">
|
||
<view>
|
||
<uni-data-select v-model="typeCode" placeholder="请选择规格型号"
|
||
:localdata="maCodeSelectList"
|
||
@change="selectMaCode">
|
||
</uni-data-select>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</div>
|
||
<scroll-view scroll-y class="scroll-container" @scrolltolower="onScrollTolower">
|
||
<view v-for="(item, index) in typeList" :key="index" class="table-list-item">
|
||
<div class="title">
|
||
<div class="title-left">
|
||
<span class="code">{{ item.materialName }}</span>
|
||
</div>
|
||
<div class="status-tag">
|
||
<view @click.stop="deleteItem(item)" style="padding-right: 10rpx;">
|
||
<uni-icons type="trash" size="24" color="#ff0000" />
|
||
</view>
|
||
|
||
</div>
|
||
</div>
|
||
<view class="line"></view>
|
||
<template v-for="field in fieldMap" :key="field.label">
|
||
<uni-row :gutter="24" style="padding-top: 12px">
|
||
<uni-col :span="field.labelSpan">{{ field.label }}：</uni-col>
|
||
<uni-col :span="field.valueSpan">
|
||
<view class="cont">
|
||
{{ field.formatter ? field.formatter(item[field.key]) : (item[field.key] ?? field.default ?? '无')
|
||
}}
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</template>
|
||
<uni-row :gutter="24" style="padding-top: 12px">
|
||
<uni-col :span="8">是否收费：</uni-col>
|
||
<uni-col :span="16">
|
||
<view class="cont">
|
||
<uni-data-select v-model="item.charge" placeholder="请选择规格型号" :localdata="charge"
|
||
@change="selectMaCode">
|
||
</uni-data-select>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row :gutter="24" style="padding-top: 12px">
|
||
<uni-col :span="8">配件数量：</uni-col>
|
||
<uni-col :span="16">
|
||
<view class="cont">
|
||
<uni-easyinput type="number" v-model="item.preNum" @input="onChangeNumber(item)"
|
||
placeholder="输入数值" style="flex: 1;" />
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
</scroll-view>
|
||
</div>
|
||
|
||
<!-- 底部按钮 -->
|
||
<div class="footer-btn">
|
||
<button class="btn-cont" @click="submitNum">确认</button>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive,
|
||
} from 'vue'
|
||
import {
|
||
onLoad,
|
||
} from '@dcloudio/uni-app'
|
||
import {
|
||
getUseType,
|
||
insertDetails,
|
||
} from '@/services/fieldMaintenance/fieldMaintenance.js'
|
||
|
||
const maCodeSelectList = ref([])
|
||
const charge = ref([{
|
||
value: 1,
|
||
text: '是',
|
||
}, {
|
||
value: 0,
|
||
text: '否',
|
||
}])
|
||
const maTypeSelectList = ref([])
|
||
const item = ref({})
|
||
const typeId = ref('') //类型
|
||
const typeCode = ref('') //规格型号
|
||
const collapsed = ref(true)
|
||
const typeList = ref([])
|
||
const fieldMap = [{
|
||
label: '规格型号',
|
||
key: 'typeName',
|
||
labelSpan: 8,
|
||
valueSpan: 16,
|
||
},
|
||
{
|
||
label: '在用数',
|
||
key: 'num',
|
||
labelSpan: 8,
|
||
valueSpan: 16,
|
||
},
|
||
]
|
||
const getMaType = () => {
|
||
let obj = {
|
||
'agreementId': item.value.agreementId,
|
||
}
|
||
getUseType(obj).then(res => {
|
||
console.log(res)
|
||
maTypeSelectList.value = res.data.map(option => {
|
||
return {
|
||
value: option.typeId,
|
||
text: option.typeName,
|
||
}
|
||
})
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
//规格
|
||
const getMaCode = () => {
|
||
let obj = {
|
||
'agreementId': item.value.agreementId,
|
||
'typeId': typeId.value,
|
||
}
|
||
getUseType(obj).then(res => {
|
||
console.log(res)
|
||
maCodeSelectList.value = res.data.map(option => {
|
||
let obj = {
|
||
...option,
|
||
bmFileInfos: [],
|
||
value: option.typeId,
|
||
text: option.typeName,
|
||
}
|
||
return obj
|
||
})
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
const generateUniqueId = () => {
|
||
return Date.now().toString(36) + Math.random().toString(36).substr(2, 5)
|
||
}
|
||
|
||
const deleteItem = (item) => {
|
||
typeList.value = typeList.value.filter(i => i.itemId !== item.itemId)
|
||
}
|
||
|
||
// 选择规格型号
|
||
const selectMaCode = (e) => {
|
||
const matched = maCodeSelectList.value.find(item => item.typeId == e)
|
||
if (matched) {
|
||
const itemCopy = JSON.parse(JSON.stringify(matched))
|
||
itemCopy.itemId = generateUniqueId()
|
||
itemCopy.preNum = 0
|
||
itemCopy.charge = 0
|
||
itemCopy.taskId = item.value.id
|
||
typeList.value.push(itemCopy)
|
||
}
|
||
console.log(typeList.value)
|
||
}
|
||
|
||
const toggleCollapse = () => (collapsed.value = !collapsed.value)
|
||
const onChangeNumber = (item) => {
|
||
console.log(item)
|
||
let maxNum = Number(item.num)
|
||
// outboundNum.value
|
||
setTimeout(() => {
|
||
if (item.unitValue == 1) {
|
||
item.preNum = Number(String(item.preNum).replace(/[^\d.]/g, ''))
|
||
} else {
|
||
item.preNum = Number(String(item.preNum).replace(/[^\d]/g, ''))
|
||
}
|
||
if (Number(item.preNum) <= 0) {
|
||
item.preNum = 0
|
||
}
|
||
if (Number(item.preNum) > maxNum) {
|
||
uni.showToast({
|
||
title: '已达到当前资最大在用数量！',
|
||
icon: 'none',
|
||
})
|
||
item.preNum = maxNum
|
||
}
|
||
}, 500)
|
||
}
|
||
|
||
const submitNum = () => {
|
||
console.log(item)
|
||
const jsonData = JSON.stringify(typeList.value)
|
||
console.log(jsonData)
|
||
insertDetails(JSON.parse(jsonData)).then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({ title: '编辑成功', icon: 'none' })
|
||
uni.navigateBack({
|
||
delta: 1, // 返回到已存在的页面
|
||
})
|
||
} else {
|
||
uni.showToast({ title: res.msg, icon: 'none' })
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
|
||
onLoad((options) => {
|
||
item.value = JSON.parse(options.item)
|
||
getMaType()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.page-container {
|
||
display: flex;
|
||
height: 97vh;
|
||
padding: 24rpx;
|
||
flex-direction: column;
|
||
background-color: #f7f8fa;
|
||
|
||
.card-container {
|
||
padding: 24rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||
margin-bottom: 24rpx;
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #262626;
|
||
position: relative;
|
||
padding-left: 24rpx;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 6rpx;
|
||
height: 28rpx;
|
||
background: #3784fb;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
|
||
.header-action {
|
||
color: #007aff;
|
||
padding-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card {
|
||
height: 77vh;
|
||
padding: 24rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||
margin-bottom: 24rpx;
|
||
overflow: hidden;
|
||
/* 超出隐藏 */
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #262626;
|
||
position: relative;
|
||
padding-left: 24rpx;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 6rpx;
|
||
height: 28rpx;
|
||
background: #3784fb;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
|
||
.header-action {
|
||
color: #007aff;
|
||
padding-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
.scroll-container {
|
||
padding: 12rpx;
|
||
height: 85%;
|
||
|
||
.table-list-item {
|
||
margin: 24rpx 0;
|
||
padding: 24rpx;
|
||
background-color: #fff;
|
||
min-height: 300rpx;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||
transition: all 0.3s ease;
|
||
|
||
.title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
// margin-bottom: 20rpx;
|
||
|
||
.title-left {
|
||
.code {
|
||
font-size: 32rpx;
|
||
font-weight: 300;
|
||
color: #3784fb;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
}
|
||
|
||
span.status {
|
||
padding: 8rpx 28rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
|
||
&.completed {
|
||
background-color: rgba(82, 196, 26, 0.1);
|
||
color: #52c41a;
|
||
}
|
||
|
||
&.pending {
|
||
background-color: rgba(250, 140, 22, 0.1);
|
||
color: #fa8c16;
|
||
}
|
||
}
|
||
}
|
||
|
||
.line {
|
||
margin: 24rpx 0;
|
||
height: 2rpx;
|
||
background: linear-gradient(90deg,
|
||
rgba(232, 232, 232, 0) 0%,
|
||
rgba(232, 232, 232, 1) 50%,
|
||
rgba(232, 232, 232, 0) 100%);
|
||
}
|
||
|
||
:deep(.uni-row) {
|
||
/* margin-bottom: 20rpx; */
|
||
|
||
.uni-col-6 {
|
||
color: #8c8c8c;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.cont {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
line-height: 1.8;
|
||
color: #262626;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.loading-text {
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
color: #8c8c8c;
|
||
padding: 32rpx 0;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
}
|
||
|
||
.form-item {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.count-input {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.footer-btn {
|
||
margin-top: auto;
|
||
padding: 32rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 92%;
|
||
z-index: 999;
|
||
/* 保证在顶层 */
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.btn-cont {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
text-align: center;
|
||
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
|
||
color: #fff;
|
||
border-radius: 44rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
opacity: 0.9;
|
||
box-shadow: 0 2rpx 8rpx rgba(55, 132, 251, 0.2);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|