|
@@ -0,0 +1,265 @@
|
|
|
|
+<template>
|
|
|
|
+ <div style="max-height: calc(100vh - 200px); overflow: hidden auto">
|
|
|
|
+ <el-form-item label="订单" :label-position="'top'">
|
|
|
|
+ <el-table :data="formData.data.order" style="width: 100%">
|
|
|
|
+ <el-table-column label="订单号">
|
|
|
|
+ <template v-slot="scope">
|
|
|
|
+ <div>
|
|
|
|
+ <a style="color: #409eff; cursor: pointer; word-break: break-all" @click="clickDetail(scope.row)">
|
|
|
|
+ {{ scope.row.orderNo }}
|
|
|
|
+ </a>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="订单金额" prop="paymentPrice" />
|
|
|
|
+ <el-table-column label="三梵成本" prop="costAmount" />
|
|
|
|
+ <el-table-column label="预计利润" prop="expectedProfit" />
|
|
|
|
+ </el-table>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="请款" :label-position="'top'">
|
|
|
|
+ <el-table :data="formData.data.payment" style="width: 100%">
|
|
|
|
+ <el-table-column label="请款金额" prop="amount" />
|
|
|
|
+ <el-table-column label="请款时间" prop="requestsTime" />
|
|
|
|
+ <el-table-column label="打款时间" prop="remitTime" />
|
|
|
|
+ </el-table>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="客户付款" :label-position="'top'">
|
|
|
|
+ <el-table :data="formData.data.fundReceived" style="width: 100%">
|
|
|
|
+ <el-table-column label="客户付款金额" prop="receivedAmount" />
|
|
|
|
+ <el-table-column label="付款时间" prop="receivedTime" />
|
|
|
|
+ <el-table-column label="是否认领" prop="hasReceived">
|
|
|
|
+ <template v-slot="scope">
|
|
|
|
+ <div>
|
|
|
|
+ {{ scope.row.hasReceived ? '是' : '否' }}
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="总利润" :label-position="'top'">
|
|
|
|
+ <div>{{ calculateTotalProfit() }}</div>
|
|
|
|
+ </el-form-item>
|
|
|
|
+
|
|
|
|
+ <a-dialog v-if="dialogVisible" v-model="dialogVisible" title="订单详情" style="width: 90%" :footer="false">
|
|
|
|
+ <div style="max-height: calc(100vh - 200px); overflow: hidden auto">
|
|
|
|
+ <div style="width: 100%">
|
|
|
|
+ <el-table :data="orderDetail.orderItemList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
|
|
|
|
+ <el-table-column label="图片" width="130">
|
|
|
|
+ <template #default="props">
|
|
|
|
+ <el-image
|
|
|
|
+ style="width: 100px; height: 100px; border: 1px solid #ccc"
|
|
|
|
+ v-if="props.row.picUrls && props.row.picUrls.length > 0 && props.row.picUrls[0]"
|
|
|
|
+ :src="props.row.picUrls[0]"
|
|
|
|
+ fit="scale-down"
|
|
|
|
+ :referrerpolicy="'no-referrer'"
|
|
|
|
+ :zoom-rate="1.2"
|
|
|
|
+ :preview-src-list="[props.row.picUrls[0]]"
|
|
|
|
+ :initial-index="0"
|
|
|
|
+ preview-teleported
|
|
|
|
+ >
|
|
|
|
+ </el-image>
|
|
|
|
+ <el-image
|
|
|
|
+ style="width: 100px; height: 100px; border: 1px solid #ccc"
|
|
|
|
+ v-else
|
|
|
|
+ :src="props.row.picUrl"
|
|
|
|
+ fit="scale-down"
|
|
|
|
+ :referrerpolicy="'no-referrer'"
|
|
|
|
+ :zoom-rate="1.2"
|
|
|
|
+ :preview-src-list="[props.row.picUrl]"
|
|
|
|
+ :initial-index="0"
|
|
|
|
+ preview-teleported
|
|
|
|
+ >
|
|
|
|
+ </el-image>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="设计图" width="130">
|
|
|
|
+ <template #default="props">
|
|
|
|
+ <el-image
|
|
|
|
+ style="width: 100px; border: 1px solid #ccc"
|
|
|
|
+ v-if="props.row.customizeVo && props.row.customizeVo.blueprintUrl"
|
|
|
|
+ :src="props.row.customizeVo.blueprintUrl"
|
|
|
|
+ fit="scale-down"
|
|
|
|
+ :referrerpolicy="'no-referrer'"
|
|
|
|
+ :zoom-rate="1.2"
|
|
|
|
+ :preview-src-list="[props.row.customizeVo.blueprintUrl]"
|
|
|
|
+ :initial-index="0"
|
|
|
|
+ preview-teleported
|
|
|
|
+ >
|
|
|
|
+ </el-image>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="商品信息" min-width="300">
|
|
|
|
+ <template #default="props">
|
|
|
|
+ <div>
|
|
|
|
+ <div>SKU编码:{{ props.row.skuId }}</div>
|
|
|
|
+ <div>商品名称:{{ props.row.spuName }}</div>
|
|
|
|
+ <div>商品属性:{{ props.row.attrValue }}</div>
|
|
|
|
+ <div v-if="orderDetail.type == 1">颜色:{{ props.row.colour || (props.row.customizeVo ? props.row.customizeVo.colour : '') }}</div>
|
|
|
|
+ <div>规格:{{ props.row.length }} * {{ props.row.width }} * {{ props.row.height }}</div>
|
|
|
|
+ <div>其他定制明细:{{ props.row.additionalCustomizeDetails }}</div>
|
|
|
|
+ <div>其他定制总费用:{{ props.row.additionalCustomizePrice }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="单价" width="120">
|
|
|
|
+ <template #default="props">{{ orderDetail.settlementCurrency }} {{ props.row.salesPrice }}</template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="运费" width="120" v-if="orderDetail.deliveryWay == '1'">
|
|
|
|
+ <template #default="props"> {{ orderDetail.settlementCurrency }} {{ props.row.freightPrice }} </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="数量" prop="quantity" width="120" v-if="orderDetail.type == 1" />
|
|
|
|
+ <el-table-column label="数量" min-width="300" v-if="orderDetail.type == 2">
|
|
|
|
+ <template #default="props">
|
|
|
|
+ <div v-if="props.row.customizeVo.colourList && props.row.customizeVo.colourList.length > 0">
|
|
|
|
+ <el-table :data="props.row.customizeVo.colourList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
|
|
|
|
+ <el-table-column label="颜色" prop="colour" />
|
|
|
|
+ <el-table-column label="图片" width="100">
|
|
|
|
+ <template #default="item">
|
|
|
|
+ <div>
|
|
|
|
+ <el-image
|
|
|
|
+ v-if="item.row.picUrl"
|
|
|
|
+ :src="item.row.picUrl"
|
|
|
|
+ style="max-width: 80px"
|
|
|
|
+ fit="scale-down"
|
|
|
|
+ :referrerpolicy="'no-referrer'"
|
|
|
|
+ :zoom-rate="1.2"
|
|
|
|
+ :preview-src-list="[item.row.picUrl]"
|
|
|
|
+ :initial-index="0"
|
|
|
|
+ preview-teleported
|
|
|
|
+ >
|
|
|
|
+ </el-image>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="SKU编码" prop="skuId" width="140" />
|
|
|
|
+ <el-table-column label="数量" prop="quantity" />
|
|
|
|
+ </el-table>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="定制金额" width="140">
|
|
|
|
+ <template #default="props">{{ orderDetail.settlementCurrency }} {{ computeMoney(props.row) }} </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="商品总金额" width="160">
|
|
|
|
+ <template #default="props">{{ orderDetail.settlementCurrency }} {{ props.row.paymentPrice }} </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="width: 100%; margin-top: 20px" v-if="orderDetail.packagingList && orderDetail.packagingList.length > 0">
|
|
|
|
+ <el-table :data="orderDetail.packagingList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
|
|
|
|
+ <el-table-column label="包材名称" prop="name" />
|
|
|
|
+ <el-table-column label="单价">
|
|
|
|
+ <template #default="props">
|
|
|
|
+ <div>{{ orderDetail.settlementCurrency }} {{ props.row.salesPrice }}</div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="数量" prop="quantity" />
|
|
|
|
+ <el-table-column label="包材费用小计" width="120">
|
|
|
|
+ <template #default="props">
|
|
|
|
+ <div>{{ orderDetail.settlementCurrency }} {{ packagingSubtotal(props.row) }}</div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="margin-top: 20px; font-size: 18px; font-weight: bold; color: black">
|
|
|
|
+ <span>订单总金额: {{ orderDetail.settlementCurrency }} {{ orderTotal() }}</span>
|
|
|
|
+ <span style="margin-left: 40px"> 商品总金额: {{ orderDetail.settlementCurrency }} {{ goodsTotal() }} </span>
|
|
|
|
+ <span style="margin-left: 40px"> 包材总金额: {{ orderDetail.settlementCurrency }} {{ packagingTotal() }} </span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-dialog>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script setup>
|
|
|
|
+import { getFundReceived, getPayment, getOrderList } from '@/api/business/contract/info'
|
|
|
|
+
|
|
|
|
+const { proxy } = getCurrentInstance()
|
|
|
|
+const props = defineProps({
|
|
|
|
+ rowData: Object
|
|
|
|
+})
|
|
|
|
+const formData = reactive({
|
|
|
|
+ data: {
|
|
|
|
+ order: [],
|
|
|
|
+ payment: [],
|
|
|
|
+ fundReceived: []
|
|
|
|
+ }
|
|
|
|
+})
|
|
|
|
+const dialogVisible = ref(false)
|
|
|
|
+const orderDetail = ref({
|
|
|
|
+ orderItemList: [],
|
|
|
|
+ packagingList: []
|
|
|
|
+})
|
|
|
|
+const calculateTotalProfit = () => {
|
|
|
|
+ let profit = 0
|
|
|
|
+ if (orderDetail.fundReceived && orderDetail.fundReceived.length > 0) {
|
|
|
|
+ for (let i = 0; i < orderDetail.fundReceived.length; i++) {
|
|
|
|
+ profit = Number(Math.round((profit + orderDetail.fundReceived[i].receivedAmount) * 100) / 100)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ if (orderDetail.payment && orderDetail.payment.length > 0) {
|
|
|
|
+ for (let i = 0; i < orderDetail.payment.length; i++) {
|
|
|
|
+ profit = Number(Math.round((profit - orderDetail.payment[i].amount) * 100) / 100)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return profit
|
|
|
|
+}
|
|
|
|
+const clickDetail = (row) => {
|
|
|
|
+ orderDetail.value = row
|
|
|
|
+ dialogVisible.value = true
|
|
|
|
+}
|
|
|
|
+const computeMoney = (item) => {
|
|
|
|
+ let money = 0
|
|
|
|
+ if (item.customizeProcessingPrice > 0 && item.quantity > 0) {
|
|
|
|
+ money = Number(Math.round((money + item.customizeProcessingPrice * item.quantity) * 100) / 100)
|
|
|
|
+ }
|
|
|
|
+ return money
|
|
|
|
+}
|
|
|
|
+const packagingSubtotal = (item) => {
|
|
|
|
+ let money = 0
|
|
|
|
+ if (item.salesPrice && item.quantity) {
|
|
|
|
+ let price = Number(item.salesPrice)
|
|
|
|
+ money = Number(Math.round(price * item.quantity * 100) / 100)
|
|
|
|
+ } else {
|
|
|
|
+ money = 0
|
|
|
|
+ }
|
|
|
|
+ return money
|
|
|
|
+}
|
|
|
|
+const packagingTotal = () => {
|
|
|
|
+ let money = 0
|
|
|
|
+ if (orderDetail.value.packagingList && orderDetail.value.packagingList.length > 0) {
|
|
|
|
+ for (let i = 0; i < orderDetail.value.packagingList.length; i++) {
|
|
|
|
+ money = Number(Math.round((money + packagingSubtotal(orderDetail.value.packagingList[i])) * 100) / 100)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return money
|
|
|
|
+}
|
|
|
|
+const goodsTotal = () => {
|
|
|
|
+ let money = 0
|
|
|
|
+ if (orderDetail.value.orderItemList && orderDetail.value.orderItemList.length > 0) {
|
|
|
|
+ for (let i = 0; i < orderDetail.value.orderItemList.length; i++) {
|
|
|
|
+ if (orderDetail.value.orderItemList[i].paymentPrice) {
|
|
|
|
+ money = Number(Math.round((money + Number(orderDetail.value.orderItemList[i].paymentPrice)) * 100) / 100)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return money
|
|
|
|
+}
|
|
|
|
+const orderTotal = () => {
|
|
|
|
+ let money = Number(Math.round((goodsTotal() + packagingTotal()) * 100) / 100)
|
|
|
|
+ return money
|
|
|
|
+}
|
|
|
|
+onMounted(() => {
|
|
|
|
+ getFundReceived({ contractId: props.rowData.id }).then((res) => {
|
|
|
|
+ formData.data.fundReceived = res
|
|
|
|
+ })
|
|
|
|
+ getPayment({ contractId: props.rowData.id }).then((res) => {
|
|
|
|
+ formData.data.payment = res
|
|
|
|
+ })
|
|
|
|
+ getOrderList({ contractId: props.rowData.id }).then((res) => {
|
|
|
|
+ formData.data.order = res
|
|
|
|
+ })
|
|
|
|
+})
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped></style>
|