|
|
@@ -0,0 +1,217 @@
|
|
|
+<template>
|
|
|
+ <div class="order-detail">
|
|
|
+ <el-drawer :visible.sync="showDtail" size="750px" :before-close="closeFn" custom-class="order-draw-wrap" direction="ltr">
|
|
|
+ <div class="order-manage-wrap" v-if="!$util.isEmpty(detailInfo)">
|
|
|
+ <div class="card-wrap">
|
|
|
+ <div class="card-tit">
|
|
|
+ 花材信息
|
|
|
+
|
|
|
+ <el-button @click="" style="margin-left:200px;">使用填单价</el-button>
|
|
|
+ <el-button @click="" style="margin-left:20px;">使用自带价</el-button>
|
|
|
+ <el-button type="primary" @click="" style="margin-left:20px;">添加花材</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <el-table :data="detailInfo.product">
|
|
|
+ <el-table-column label="图片">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-popover placement="right" width="200" trigger="hover">
|
|
|
+ <div style="width:200px;height:200px;">
|
|
|
+ <img style="width:100%;height:100%;object-fit: cover;" :src="scope.row.bigCover" />
|
|
|
+ </div>
|
|
|
+ <div style="width:30px;" slot="reference">
|
|
|
+ <img style="width:100%;height:100%;object-fit: cover;border-radius:5px;" :src="scope.row.cover" />
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="name" label="名称"></el-table-column>
|
|
|
+ <el-table-column property="cost" label="成本"></el-table-column>
|
|
|
+ <el-table-column property="stock" label="剩余"></el-table-column>
|
|
|
+ <el-table-column label="单价">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.currentHdPrice" @focus="scope.row.currentHdPrice=''" placeholder="数量" style="width:50px;"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="数量">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.xhNum" placeholder="数量" @focus="scope.row.xhNum=''" style="width:50px;"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="primary" @click="" size="mini">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="accounts-list">
|
|
|
+ 客户名称
|
|
|
+ <div class="accounts-center" style="font-weight:bold;color:black;">{{ detailInfo.customName||'' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="accounts-list">
|
|
|
+ 商品金额
|
|
|
+ <div class="accounts-center" style="font-weight:bold;color:black;">¥{{itemPrice}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="accounts-list">
|
|
|
+ 总计
|
|
|
+ <div class="accounts-center" style="font-weight:bold;color:black;">¥{{allPrice}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="accounts-list">
|
|
|
+ 预付金额
|
|
|
+ <div class="accounts-center" style="font-weight:bold;color:black;">¥{{ detailInfo.bookPrice ? parseFloat(detailInfo.bookPrice) : 0}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="accounts-list">
|
|
|
+ 结账
|
|
|
+ <div class="accounts-center" style="font-weight:bold;color:green;;" v-if="settlePrice > 0">退 ¥{{settlePrice}},确认后自动退款</div>
|
|
|
+ <div class="accounts-center" style="font-weight:bold;color:red;" v-else-if="settlePrice < 0">欠 ¥{{Math.abs(settlePrice)}},确认后变成欠款单</div>
|
|
|
+ <div class="accounts-center" style="font-weight:bold;color:black;" v-else>0</div>
|
|
|
+ </div>
|
|
|
+ <div class="accounts-list">
|
|
|
+ 允许低于成本
|
|
|
+ <div class="accounts-center" style="">
|
|
|
+ <el-switch v-model="lessCostCould" active-value="1" inactive-value="0"></el-switch>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left:80px;margin-top:20px;">
|
|
|
+ <el-button @click="">取消</el-button>
|
|
|
+ <el-button @click="" style="margin-left:50px;">保存</el-button>
|
|
|
+ <el-button type="primary" @click="" style="margin-left:50px;">确认提交</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else v-loading="loading" style="height:800px;"></div>
|
|
|
+ </el-drawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'arrival',
|
|
|
+ props: {
|
|
|
+ arrivalData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showDtail: false,
|
|
|
+ detailInfo: {},
|
|
|
+ loading:true,
|
|
|
+ itemPrice:0,
|
|
|
+ settlePrice:0,
|
|
|
+ sendCost:0,
|
|
|
+ packCost:0,
|
|
|
+ addSelectItem:1,
|
|
|
+ lessCostCould:0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ allPrice() {
|
|
|
+ let price = 0
|
|
|
+ this.itemPrice = 0
|
|
|
+ this.totalWeight = 0
|
|
|
+ if (this.detailInfo && this.detailInfo.product) {
|
|
|
+ for (const item of this.detailInfo.product) {
|
|
|
+ if(item.currentHdPrice){
|
|
|
+ let currentPrice = Number(item.xhNum) * Number(item.currentHdPrice)
|
|
|
+ currentPrice = currentPrice.toFixed(2)
|
|
|
+ this.itemPrice = Number(this.itemPrice) + Number(currentPrice)
|
|
|
+ this.itemPrice.toFixed(2)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.itemPrice = parseFloat(this.itemPrice.toFixed(2))
|
|
|
+ price = Number(this.itemPrice)
|
|
|
+ if(Number(this.sendCost)>0){
|
|
|
+ price = price + Number(this.sendCost)
|
|
|
+ }
|
|
|
+ if(Number(this.packCost)>0){
|
|
|
+ price = price + Number(this.packCost)
|
|
|
+ }
|
|
|
+ price = parseFloat(price.toFixed(2))
|
|
|
+ this.settlePrice = Number(this.detailInfo.bookPrice) - Number(price)
|
|
|
+ this.settlePrice = parseFloat(this.settlePrice.toFixed(2))
|
|
|
+ return price
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this.data = []
|
|
|
+ this.showDtail = true
|
|
|
+ this.$service.order.arrivalDetail({ id: this.arrivalData.id }).then(res => {
|
|
|
+ this.detailInfo = res
|
|
|
+ })
|
|
|
+ },
|
|
|
+ closeFn() {
|
|
|
+ this.showDtail = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.order-draw-wrap {
|
|
|
+ .el-drawer__header {
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+ .el-table__header-wrapper {
|
|
|
+ .el-table__header tr,
|
|
|
+ .el-table__header th {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.order-draw-wrap {
|
|
|
+ .title-status-wrap {
|
|
|
+ @include disFlex(center, flex-start);
|
|
|
+ .title-text {
|
|
|
+ margin-right: 200px;
|
|
|
+ }
|
|
|
+ .title-status {
|
|
|
+ color: red;
|
|
|
+ &.success {
|
|
|
+ color: green;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.order-manage-wrap {
|
|
|
+ height: calc(100vh - 64px);
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-bottom: 20px;
|
|
|
+
|
|
|
+ .accounts-list{
|
|
|
+ width: 80%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ .accounts-center{
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+.card-wrap {
|
|
|
+ margin: 20px;
|
|
|
+ .card-tit {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .card-body {
|
|
|
+ border: 1px solid $borderColor;
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep .el-input__inner {
|
|
|
+ padding:0;
|
|
|
+ text-align:center;
|
|
|
+}
|
|
|
+</style>
|