|
|
|
@ -111,63 +111,60 @@ |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 产生费用 --> |
|
|
|
<view v-if="isExpend === '1'" class="cost-section"> |
|
|
|
<view class="form-item form-item-header"> |
|
|
|
<text class="label active">产生费用</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="cost-input"> |
|
|
|
<text class="label">费用名称</text> |
|
|
|
<uv-input |
|
|
|
v-model="newCostName" |
|
|
|
<view class="form-item" v-if="isExpend === '1'"> |
|
|
|
<text class="label">产生费用</text> |
|
|
|
<view class="input-area" > |
|
|
|
<input |
|
|
|
v-model="amount" |
|
|
|
placeholder="请输入费用" |
|
|
|
border="none" |
|
|
|
:custom-style="{ backgroundColor: '#fff', borderRadius: '4px', textAlign: 'right', marginLeft: '24rpx' }" |
|
|
|
></uv-input> |
|
|
|
disabled |
|
|
|
class="input-field" |
|
|
|
/> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 费用详情表格 --> |
|
|
|
<view class="cost-table" v-if="isExpend === '1'"> |
|
|
|
<view class="table-header"> |
|
|
|
<text class="header-cell">费用名称</text> |
|
|
|
<text class="header-cell">数量</text> |
|
|
|
<text class="header-cell">金额</text> |
|
|
|
<text class="header-cell"></text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="cost-list"> |
|
|
|
<view class="cost-header"> |
|
|
|
<text class="header-item">费用名称</text> |
|
|
|
<text class="header-item">数量</text> |
|
|
|
<text class="header-item">金额</text> |
|
|
|
<view class="table-row" v-for="(item, index) in costList" :key="index"> |
|
|
|
<view class="cell-input"> |
|
|
|
<uv-input |
|
|
|
v-model="item.name" |
|
|
|
placeholder="费用名称" |
|
|
|
border="none" |
|
|
|
:custom-style="{ backgroundColor: 'transparent', fontSize: '28rpx' }" |
|
|
|
></uv-input> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view v-for="(item, index) in costList" :key="index" class="cost-item"> |
|
|
|
<text class="cost-name">{{ item.name }}</text> |
|
|
|
<view class="quantity-control"> |
|
|
|
<uv-icon |
|
|
|
name="minus-circle" |
|
|
|
size="20" |
|
|
|
:color="item.quantity > 1 ? '#C70019' : '#ccc'" |
|
|
|
@click="decreaseQuantity(index)" |
|
|
|
></uv-icon> |
|
|
|
<text class="quantity">{{ item.quantity }}</text> |
|
|
|
<uv-icon |
|
|
|
name="plus-circle" |
|
|
|
size="20" |
|
|
|
color="#C70019" |
|
|
|
@click="increaseQuantity(index)" |
|
|
|
></uv-icon> |
|
|
|
</view> |
|
|
|
<view class="cell-input"> |
|
|
|
<uv-input |
|
|
|
v-model="item.quantity" |
|
|
|
placeholder="数量" |
|
|
|
border="none" |
|
|
|
:custom-style="{ backgroundColor: 'transparent', fontSize: '28rpx' }" |
|
|
|
></uv-input> |
|
|
|
</view> |
|
|
|
<view class="cell-input"> |
|
|
|
<uv-input |
|
|
|
v-model="item.amount" |
|
|
|
placeholder="0.00" |
|
|
|
placeholder="金额" |
|
|
|
type="digit" |
|
|
|
border="none" |
|
|
|
:custom-style="{ backgroundColor: '#f5f5f5', borderRadius: '4px', textAlign: 'right' }" |
|
|
|
:custom-style="{ backgroundColor: 'transparent', fontSize: '28rpx' }" |
|
|
|
></uv-input> |
|
|
|
<uv-icon |
|
|
|
name="close-circle" |
|
|
|
size="20" |
|
|
|
color="#C70019" |
|
|
|
@click="removeCostItem(index)" |
|
|
|
></uv-icon> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="add-cost-btn" @click="addCostItem"> |
|
|
|
<uv-icon name="plus-circle" size="20" color="#C70019"></uv-icon> |
|
|
|
<text>添加费用项目</text> |
|
|
|
<view class="cell-action"> |
|
|
|
<view class="action-btn delete-btn" @click="removeCostItem(index)" v-if="costList.length > 1"> |
|
|
|
<uv-icon name="close" size="14" color="#fff"></uv-icon> |
|
|
|
</view> |
|
|
|
<view class="action-btn add-btn" @click="addCostItem" v-if="index === costList.length - 1"> |
|
|
|
<uv-icon name="plus" size="14" color="#fff"></uv-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -210,7 +207,7 @@ |
|
|
|
<view class="form-item" @click="showNextDatePicker"> |
|
|
|
<text class="label">下次保养日期</text> |
|
|
|
<view class="select-area"> |
|
|
|
<text class="value" :class="{ placeholder: !malfunctionDate }">{{ malfunctionDate || '请选择' }}</text> |
|
|
|
<text class="value" :class="{ placeholder: !nextMaintenanceDate }">{{ nextMaintenanceDate || '请选择' }}</text> |
|
|
|
<uv-icon name="arrow-down" size="18" color="#000"></uv-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -248,6 +245,7 @@ |
|
|
|
confirm-color="#C70019" |
|
|
|
ref="datePicker" |
|
|
|
mode="date" |
|
|
|
v-model="timeValue" |
|
|
|
@confirm="confirmDate" |
|
|
|
></uv-datetime-picker> |
|
|
|
|
|
|
|
@ -255,6 +253,7 @@ |
|
|
|
confirm-color="#C70019" |
|
|
|
ref="nextDatePicker" |
|
|
|
mode="date" |
|
|
|
v-model="nextTimeValue" |
|
|
|
@confirm="confirmNextDate" |
|
|
|
></uv-datetime-picker> |
|
|
|
</view> |
|
|
|
@ -264,6 +263,8 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
timeValue: Number(new Date()), |
|
|
|
nextTimeValue: Number(new Date()), |
|
|
|
// 表单数据 |
|
|
|
maintenanceName: '', |
|
|
|
maintenanceDate: '', |
|
|
|
@ -272,11 +273,10 @@ export default { |
|
|
|
stateBackText: '', |
|
|
|
stateBackImage: [], |
|
|
|
isExpend: '0', |
|
|
|
newCostName: '', |
|
|
|
costList: [], |
|
|
|
costList: [{ name: '', quantity: '', amount: '' }], |
|
|
|
remarkText: '', |
|
|
|
remarkImage: [], |
|
|
|
malfunctionDate: '', |
|
|
|
nextMaintenanceDate: '', |
|
|
|
remark: '', |
|
|
|
showpieceId: '', |
|
|
|
submiting: false |
|
|
|
@ -285,7 +285,9 @@ export default { |
|
|
|
computed: { |
|
|
|
// 计算总金额 |
|
|
|
amount() { |
|
|
|
return this.costList.reduce((sum, item) => sum + (parseFloat(item.amount) * Number(item.quantity) || 0), 0) |
|
|
|
return this.costList.reduce((sum, item) => { |
|
|
|
return sum + (Number(item.quantity) * parseFloat(item.amount || 0)) |
|
|
|
}, 0) |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
@ -308,31 +310,22 @@ export default { |
|
|
|
// 确认下次保养日期 |
|
|
|
confirmNextDate(e) { |
|
|
|
// uv-datetime-picker返回的是时间戳，需要转换为日期格式 |
|
|
|
this.malfunctionDate = this.$utils.formatTime(e.value) |
|
|
|
this.nextMaintenanceDate = this.$utils.formatTime(e.value) |
|
|
|
}, |
|
|
|
|
|
|
|
// 选择是否产生费用 |
|
|
|
selectCost(value) { |
|
|
|
this.isExpend = value |
|
|
|
if (!value) { |
|
|
|
this.costList = [] |
|
|
|
this.newCostName = '' |
|
|
|
if (value === '0') { |
|
|
|
this.costList = [{ name: '', quantity: '', amount: '' }] |
|
|
|
} else if (this.costList.length === 0) { |
|
|
|
this.costList = [{ name: '', quantity: '', amount: '' }] |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 添加费用项目 |
|
|
|
addCostItem() { |
|
|
|
if (!this.newCostName.trim()) { |
|
|
|
uni.showToast({ title: '请输入费用名称', icon: 'none' }) |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
this.costList.push({ |
|
|
|
name: this.newCostName, |
|
|
|
quantity: 1, |
|
|
|
amount: '' |
|
|
|
}) |
|
|
|
this.newCostName = '' |
|
|
|
this.costList.push({ name: '', quantity: '', amount: '' }) |
|
|
|
}, |
|
|
|
|
|
|
|
// 删除费用项目 |
|
|
|
@ -344,17 +337,6 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 增加数量 |
|
|
|
increaseQuantity(index) { |
|
|
|
this.costList[index].quantity++ |
|
|
|
}, |
|
|
|
|
|
|
|
// 减少数量 |
|
|
|
decreaseQuantity(index) { |
|
|
|
if (this.costList[index].quantity > 1) { |
|
|
|
this.costList[index].quantity-- |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 上传保养前图片 |
|
|
|
async uploadBeforeImage() { |
|
|
|
@ -472,7 +454,7 @@ export default { |
|
|
|
amount: this.amount, |
|
|
|
remarkText: this.remarkText, |
|
|
|
remarkImage: this.remarkImage?.join(',') || '', |
|
|
|
malfunctionDate: this.malfunctionDate, |
|
|
|
nextMaintenanceDate: this.nextMaintenanceDate, |
|
|
|
remark: this.remark, |
|
|
|
showpieceId: this.showpieceId |
|
|
|
} |
|
|
|
@ -691,79 +673,78 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.cost-section { |
|
|
|
.cost-input { |
|
|
|
// 费用表格样式 |
|
|
|
.cost-table { |
|
|
|
margin-top: 24rpx; |
|
|
|
border: 2rpx solid #f0f0f0; |
|
|
|
border-radius: 8rpx; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.table-header { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 24rpx 0; |
|
|
|
border-bottom: 2rpx solid #f0f0f0; |
|
|
|
background-color: #f5f5f5; |
|
|
|
padding: 16rpx 0; |
|
|
|
|
|
|
|
.label { |
|
|
|
font-size: 30rpx; |
|
|
|
.header-cell { |
|
|
|
flex: 1; |
|
|
|
text-align: center; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: $primary-text-color; |
|
|
|
flex-shrink: 0; |
|
|
|
margin-right: 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.cost-list { |
|
|
|
.cost-header { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 24rpx 0; |
|
|
|
border-bottom: 4rpx solid #f0f0f0; |
|
|
|
|
|
|
|
.header-item { |
|
|
|
flex: 1; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: $primary-text-color; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
&:first-child { |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
&:first-child { |
|
|
|
flex: 2; |
|
|
|
} |
|
|
|
|
|
|
|
&:last-child { |
|
|
|
width: 120rpx; |
|
|
|
flex: none; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.table-row { |
|
|
|
display: flex; |
|
|
|
border-top: 2rpx solid #f0f0f0; |
|
|
|
|
|
|
|
.cost-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 24rpx 0; |
|
|
|
border-bottom: 2rpx solid #f0f0f0; |
|
|
|
gap: 24rpx; |
|
|
|
.cell-input { |
|
|
|
flex: 1; |
|
|
|
padding: 8rpx; |
|
|
|
border-right: 2rpx solid #f0f0f0; |
|
|
|
|
|
|
|
.cost-name { |
|
|
|
flex: 1; |
|
|
|
font-size: 28rpx; |
|
|
|
color: $primary-text-color; |
|
|
|
&:first-child { |
|
|
|
flex: 2; |
|
|
|
} |
|
|
|
|
|
|
|
.quantity-control { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 16rpx; |
|
|
|
|
|
|
|
.quantity { |
|
|
|
font-size: 28rpx; |
|
|
|
color: $primary-text-color; |
|
|
|
min-width: 40rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
&:last-child { |
|
|
|
border-right: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.add-cost-btn { |
|
|
|
.cell-action { |
|
|
|
width: 120rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
gap: 16rpx; |
|
|
|
padding: 24rpx 0; |
|
|
|
color: $primary-color; |
|
|
|
gap: 8rpx; |
|
|
|
padding: 8rpx; |
|
|
|
|
|
|
|
text { |
|
|
|
font-size: 28rpx; |
|
|
|
.action-btn { |
|
|
|
width: 36rpx; |
|
|
|
height: 36rpx; |
|
|
|
padding: 4rpx; |
|
|
|
border-radius: 50%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
&.add-btn { |
|
|
|
background-color: #1a9c10; |
|
|
|
} |
|
|
|
|
|
|
|
&.delete-btn { |
|
|
|
background-color: $primary-color; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
hflllll
5 days ago