113 lines
2.3 KiB
Vue
113 lines
2.3 KiB
Vue
<template>
|
|
<div class="loss-list">
|
|
<template v-for="item in modelValue">
|
|
<van-field v-model="item.totalAmount" :label="getItemLabel(item)" placeholder="请填写" type="digit" @click="cubeCalculateDialog.show()">
|
|
<template #button>
|
|
<span class="field-unit">方/万元</span>
|
|
</template>
|
|
</van-field>
|
|
</template>
|
|
<van-button size="small" block type="primary" plain @click="addLoss">添加损失</van-button>
|
|
<CubeCalculateDialog ref="cubeCalculateDialog" />
|
|
<LossPicker ref="lossPicker" :options="options" @confirm="confirmAddLoss" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, computed, onMounted } from 'vue'
|
|
import CubeCalculateDialog from './CubeCalculateDialog.vue'
|
|
import { request } from '@shared/utils/request'
|
|
import LossPicker from './LossPicker.vue'
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
|
|
const lossPicker = ref(null)
|
|
|
|
const options = ref({})
|
|
// 添加损失项
|
|
const addLoss = () => {
|
|
lossPicker.value?.show()
|
|
}
|
|
|
|
const confirmAddLoss = (item) => {
|
|
emit('update:modelValue', [...props.modelValue, item])
|
|
}
|
|
|
|
const cubeCalculateDialog = ref(null)
|
|
|
|
const getItemLabel = (item) => {
|
|
const loss = options.value.loss?.find((loss) => loss.value === item.lossTypeId)
|
|
return loss?.text
|
|
}
|
|
|
|
const getLossDict = async (params) => {
|
|
const res = await request({
|
|
url: '/snow-ops-platform/water-damage/loss/typeAndInfo',
|
|
method: 'get',
|
|
params
|
|
})
|
|
options.value.loss = res.data.records.map((item)=>{
|
|
return {
|
|
text: item.lossTypeName,
|
|
value: item.lossTypeId,
|
|
item
|
|
}
|
|
})
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await getLossDict()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.field-unit {
|
|
color: #969799;
|
|
font-size: 14px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.loss-dialog-content {
|
|
padding: 16px;
|
|
|
|
:deep(.van-field) {
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
.calculation-preview {
|
|
background-color: #f7f8fa;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
margin-top: 12px;
|
|
|
|
.preview-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.preview-label {
|
|
color: #646566;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.preview-value {
|
|
color: #ee0a24;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
</style>
|