107 lines
3.3 KiB
Vue
107 lines
3.3 KiB
Vue
<template>
|
|
<el-table :data="data.goodsDetail" max-height="150" style="width: 100%">
|
|
<el-table-column prop="name" label="名称" show-overflow-tooltip ></el-table-column>
|
|
<el-table-column prop="selectedPrice" label="单价" >
|
|
<template #default="scope">
|
|
￥{{scope.row.selectedPrice}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="number" label="数量" >
|
|
<template #default="scope">
|
|
<div v-if="data.status == 0">
|
|
<el-input-number v-model="scope.row.selectedNum" min="0" @change="handleNumChange" size="small"></el-input-number>
|
|
<el-dropdown>
|
|
<span style="line-height: 30px;margin-left: 10px">{{ scope.row.selectedUnit }}</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu v-if="scope.row.trdnFlag == 1">
|
|
<el-dropdown-item @click="selectUnit(scope.row,scope.row.packagingUnit)">{{ scope.row.packagingUnit }}
|
|
</el-dropdown-item>
|
|
<el-dropdown-item @click="selectUnit(scope.row,scope.row.minPackagingUnit)">{{ scope.row.minPackagingUnit }}
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
<div v-else>
|
|
<div>{{ scope.row.selectedNum }} {{ scope.row.selectedUnit }}</div>
|
|
</div>
|
|
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="小计" >
|
|
<template #default="scope">
|
|
￥{{ scope.row.selectedNum*scope.row.selectedPrice }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" v-if="data.status == 0" >
|
|
<template #default="scope">
|
|
<el-button type="danger" link @click="delGoods(scope.row)">X</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<SearchInput v-if="data.status == 0" :request-api="goodsSearchApi" :show-config="goodsShowConfig" @selectedCallBack="goodsSelect"></SearchInput>
|
|
<span>合计：￥{{getTotalPrice()}}</span>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import SearchInput from "@/components/SearchInput.vue";
|
|
|
|
const props = defineProps({
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
const data = defineModel<any>();
|
|
const delGoods = (item: any) => {
|
|
data.value.goodsDetail = data.value.goodsDetail.filter((i: any) => i.id != item.id)
|
|
}
|
|
|
|
const goodsSearchApi = "goods/goods/search";
|
|
const goodsShowConfig = [
|
|
{
|
|
label: "项目名称",
|
|
prop: "name",
|
|
},
|
|
{
|
|
label: "项目类型",
|
|
prop: "type",
|
|
},
|
|
{
|
|
label: "售价",
|
|
prop: "unitPrice",
|
|
},
|
|
]
|
|
const goodsSelect = (row: any) => {
|
|
row.selectedNum = 1
|
|
row.selectedUnit = row.packagingUnit
|
|
row.selectedPrice = row.unitPrice
|
|
data.value.goodsDetail.push(row)
|
|
emit('totalPriceChange')
|
|
}
|
|
const selectUnit = (item: any, unit: any) => {
|
|
item.selectedUnit = unit;
|
|
if (unit == item.packagingUnit) {
|
|
item.selectedPrice = item.unitPrice
|
|
}else if (unit == item.minPackagingUnit) {
|
|
item.selectedPrice = item.disassemblyPrice
|
|
}
|
|
emit('totalPriceChange')
|
|
|
|
}
|
|
const emit = defineEmits(["totalPriceChange"])
|
|
const handleNumChange = ()=>{
|
|
emit('totalPriceChange')
|
|
}
|
|
const getTotalPrice =()=>{
|
|
let totalPrice = 0;
|
|
data.value.goodsDetail?.forEach((item:any)=>{
|
|
totalPrice += item.selectedNum*item.selectedPrice
|
|
})
|
|
return totalPrice;
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
:deep(.el-table__cell){
|
|
padding: 0 4px;
|
|
}
|
|
</style> |