|
@@ -1,5 +1,5 @@
|
|
<template>
|
|
<template>
|
|
- <div>
|
|
|
|
|
|
+ <div class="pt-2">
|
|
<el-table ref="productTableRef" :data="productTable" border :row-class-name="tableRowClassName"
|
|
<el-table ref="productTableRef" :data="productTable" border :row-class-name="tableRowClassName"
|
|
@row-click="tableRowItem" :style="{ width: '100%', height: heightClass }">
|
|
@row-click="tableRowItem" :style="{ width: '100%', height: heightClass }">
|
|
<el-table-column label="序号" width="60" align="center">
|
|
<el-table-column label="序号" width="60" align="center">
|
|
@@ -55,11 +55,22 @@
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
|
|
+
|
|
|
|
+ <div class="flex w-full justify-between pt-2 pb-1">
|
|
|
|
+ <div>整单折扣率(%)</div>
|
|
|
|
+ <div class="flex">
|
|
|
|
+ <div>已选中产品:<span class="text-[red] pr-2">{{ selectedQuantity }}</span>个</div>
|
|
|
|
+ <div class="pl-4">
|
|
|
|
+ 总金额:<span class="pr-1">{{ totalAmount }}</span> 元
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
-import { ref, reactive, onMounted, inject, watchEffect } from "vue";
|
|
|
|
|
|
+import { ElNotification } from "element-plus";
|
|
|
|
+import { ref, reactive, onMounted, inject, watchEffect, computed } from "vue";
|
|
|
|
|
|
const props = defineProps<{
|
|
const props = defineProps<{
|
|
productTableList: any,
|
|
productTableList: any,
|
|
@@ -118,12 +129,35 @@ function returnData() {
|
|
if (jsonstr == json) {
|
|
if (jsonstr == json) {
|
|
return false
|
|
return false
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ const list = productTable.value.filter((item: any) => item.productId)
|
|
|
|
+ const incompleteProduct = list.find((item: any) => !item.sellingPrice || !item.quantity || !item.discount);
|
|
|
|
+ if (incompleteProduct) {
|
|
|
|
+ ElNotification.closeAll();
|
|
|
|
+ ElNotification({
|
|
|
|
+ title: '提示',
|
|
|
|
+ message: `相关产品【${incompleteProduct.productName}】请填写完整`,
|
|
|
|
+ type: 'warning',
|
|
|
|
+ });
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+
|
|
productTable.value.forEach((item: any) => {
|
|
productTable.value.forEach((item: any) => {
|
|
delete item.index
|
|
delete item.index
|
|
});
|
|
});
|
|
- return productTable.value
|
|
|
|
|
|
+ return productTable.value || []
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+const selectedQuantity = computed(() => {
|
|
|
|
+ return productTable.value.filter((item: any) => item.productId).length
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+const totalAmount = computed(() => {
|
|
|
|
+ return productTable.value.filter((item: any) => item.productId).reduce((pre: number, cur: any) => {
|
|
|
|
+ return pre + (cur.totalPrice || 0)
|
|
|
|
+ }, 0)
|
|
|
|
+})
|
|
|
|
+
|
|
watchEffect(() => {
|
|
watchEffect(() => {
|
|
const { productTableList, height, productTableListValue = [] } = props
|
|
const { productTableList, height, productTableListValue = [] } = props
|
|
console.log(productTableListValue, '<==== 数据')
|
|
console.log(productTableListValue, '<==== 数据')
|