You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
596 lines
19 KiB
596 lines
19 KiB
<template>
|
|
<div class="app-container">
|
|
<div v-show="relState == '2'">
|
|
<div class="tab-header webtop">
|
|
<div>销售订车单详情</div>
|
|
<div>
|
|
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="listconadd">
|
|
<el-form ref="dataForm" :model="temp" label-position="right" class="formadd">
|
|
<!-- --------------------------订单----------------- -->
|
|
<div class="tit">
|
|
销售订单
|
|
<div class="times">
|
|
<div>
|
|
<span>销售机构：</span>
|
|
<span>{{ temp.billNo }}</span>
|
|
</div>
|
|
<div>
|
|
<span>编号：</span>
|
|
<span>{{ temp.billNo }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="times02">
|
|
<div>
|
|
<span>销售部门：</span>
|
|
<span>{{ temp.orgName}}</span>
|
|
</div>
|
|
<div>
|
|
<span>销售专员：</span>
|
|
<span>{{ temp.staffName }}</span>
|
|
</div>
|
|
<div>
|
|
<span>制单日期：</span>
|
|
<span>{{ temp.createDate }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- ==================== 客户信息 ======================================== -->
|
|
<div class="titleleft">客户信息</div>
|
|
<el-row class="bordertopline">
|
|
<el-col :span="3">
|
|
<span>客户名称</span>
|
|
</el-col>
|
|
<el-col :span="9">
|
|
<el-form-item prop="customerName">
|
|
<span>{{ temp.customerName }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<span>联系电话</span>
|
|
</el-col>
|
|
<el-col :span="9">
|
|
<el-form-item prop="mobile">
|
|
<span>{{temp.mobile}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="3">
|
|
<span>挂靠公司</span>
|
|
</el-col>
|
|
<el-col :span="21">
|
|
<el-form-item prop="affiliatedCompany">
|
|
<span>{{temp.affiliatedCompany}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="3">
|
|
<span>订单类型</span>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item prop="billingType">
|
|
<span>{{temp.type}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<span>付款方式</span>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item prop="billingType">
|
|
<span>{{temp.payTypeKey}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<span>开票类型</span>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item prop="billingType">
|
|
<span>{{temp.billingTypeKey}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- ==================== 主车信息 ======================================== -->
|
|
<div class="titleleft">
|
|
<span>主车信息</span>
|
|
</div>
|
|
<el-row>
|
|
<el-col :span="4">
|
|
<span>车型名称</span>
|
|
</el-col>
|
|
<el-col :span="20">
|
|
<el-form-item>
|
|
<span>{{temp.busSalesOrderModel.modelName}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="4">
|
|
<span>常用配置</span>
|
|
</el-col>
|
|
<el-col :span="20">
|
|
<el-form-item>
|
|
<span>{{temp.busSalesOrderModel.config}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="4">
|
|
<span>更多配置</span>
|
|
</el-col>
|
|
<el-col :span="20">
|
|
<el-form-item>
|
|
<span>{{temp.busSalesOrderModel.moreConfig}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="4">
|
|
<span>特殊配置说明</span>
|
|
</el-col>
|
|
<el-col :span="20">
|
|
<el-form-item>
|
|
<span>{{temp.busSalesOrderModel.specialConfig}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="4">
|
|
<span>上装</span>
|
|
</el-col>
|
|
<el-col :span="20">
|
|
<el-form-item>
|
|
<span>{{ temp.busSalesOrderMakeup.announcementModel }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="4">
|
|
<span>车架号</span>
|
|
</el-col>
|
|
<el-col :span="20">
|
|
<el-form-item>
|
|
<span>{{temp.busSalesOrderMakeup.linkNo}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="4">
|
|
<span>采购订单编号</span>
|
|
</el-col>
|
|
<el-col :span="20">
|
|
<el-form-item>
|
|
<span>{{temp.busSalesOrderMakeup.linkNo}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- ==================== 挂车(暂不考虑) ======================================== -->
|
|
<div class="titleleft space_up">挂车信息</div>
|
|
<div class="shangzhuangstyle">
|
|
<el-row>
|
|
<el-col :span="24"></el-col>
|
|
</el-row>
|
|
</div>
|
|
<!-- ==================== 价格信息 ======================================== -->
|
|
<div class="titleleft space_up">价格信息</div>
|
|
<div>
|
|
<el-container>
|
|
<el-main>
|
|
<el-row>
|
|
<el-col :span="4">
|
|
<span>主车成交价</span>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item prop="billingType">
|
|
<span>{{temp.type}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<span>主车台数</span>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item prop="billingType">
|
|
<span>{{temp.payTypeKey}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="4">
|
|
<span>挂车价格</span>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item prop="billingType">
|
|
<span>{{temp.type}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<span>挂车台数</span>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item prop="billingType">
|
|
<span>{{temp.payTypeKey}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-main>
|
|
<el-aside width="240px" class="aside_one">
|
|
<span>车架合计</span>
|
|
</el-aside>
|
|
<el-aside width="240px" class="aside_two">
|
|
<span>{{temp.payTypeKey}}</span>
|
|
</el-aside>
|
|
</el-container>
|
|
<el-row>
|
|
<el-col :span="3">
|
|
<span>计划提车地点</span>
|
|
</el-col>
|
|
<el-col :span="9">
|
|
<el-form-item prop="billingType">
|
|
<span>{{temp.busSalesOrderPrice.plannedPickUpLocation}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<span>预计提车日期</span>
|
|
</el-col>
|
|
<el-col :span="9">
|
|
<el-form-item prop="billingType">
|
|
<span>{{temp.busSalesOrderPrice.plannedPickUpDate}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<!-- ==================== 优惠说明 ======================================== -->
|
|
<div class="titleleft space_up">优惠说明</div>
|
|
<div class="shangzhuangstyle">
|
|
<el-row>
|
|
<el-col :span="24"></el-col>
|
|
</el-row>
|
|
</div>
|
|
<!-- ==================== 保险说明 ======================================== -->
|
|
<div class="titleleft">
|
|
<span>保险说明</span>
|
|
</div>
|
|
<el-row>
|
|
<el-col :span="24"></el-col>
|
|
</el-row>
|
|
<!-- ==================== 金融方案(暂不考虑) ======================================== -->
|
|
<div class="titleleft">
|
|
<span>金融方案</span>
|
|
<!-- <div class="jinrongTit">-->
|
|
<!-- <span>单车方案编辑</span>-->
|
|
<!-- <span> 预览总方案</span>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<!-- ==================== 订金信息 ======================================== -->
|
|
<div class="titleleft space_up">
|
|
<span>订金信息</span>
|
|
</div>
|
|
<div class="shangzhuangstyle">
|
|
<el-row>
|
|
<el-col :span="3">
|
|
<span>单台订金</span>
|
|
</el-col>
|
|
<el-col :span="9">
|
|
<el-form-item>
|
|
{{temp.busSalesOrderDeposit.deposit}}
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<span>订金合计</span>
|
|
</el-col>
|
|
<el-col :span="9">
|
|
<el-form-item>
|
|
<span>{{ temp.busSalesOrderDeposit.depositAll }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="3">
|
|
<span>定金备注</span>
|
|
</el-col>
|
|
<el-col :span="21">
|
|
<el-form-item>
|
|
<span>{{temp.busSalesOrderDeposit.remarks}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<!-- ==================== 补充说明 ======================================== -->
|
|
<div class="titleleft">
|
|
<span>补充说明</span>
|
|
</div>
|
|
<el-row>
|
|
<el-input v-model="temp.remarks" type="textarea" placeholder="补充说明" class="addinputw"/>
|
|
</el-row>
|
|
<!-- ==================== 尾部署名 ======================================== -->
|
|
<div class="footer_con">
|
|
<div class="footer_tit"><span>销售专员：{{temp.staffName}}</span></div>
|
|
<div class="footer_tit"><span>客户签名：{{temp.customerName}}</span></div>
|
|
</div>
|
|
<div class="footer_time">
|
|
<div class="footer_tit"><span>{{temp.createDate}}</span></div>
|
|
<div class="footer_tit"><span>{{temp.createDate}}</span></div>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapGetters} from 'vuex'
|
|
import {fetchDetailsBySid} from '@/api/salesManagement/orderManagement'
|
|
export default {
|
|
name: "xiaoshoudingdanInfo",
|
|
data() {
|
|
return {
|
|
state: '',
|
|
relState: '', // 1添加页面 2详情页面 3提交页面 1.1选择客户页面 1.2新增客户页面 2.1意向车型 2.2虚拟订单 2.3车型选择
|
|
// 4.1优惠明细 5.1虚拟订单
|
|
nodeState: '', // 节点状态
|
|
temp: {
|
|
billNo: '', // 编号
|
|
affiliatedCompany: '', //挂靠公司名称
|
|
affiliatedCompanySid: '', //挂靠公司sid
|
|
billingType: '', //开票类型value
|
|
billingTypeKey: '', //开票类型key
|
|
busDepositFictitiousList: [{
|
|
depositBillNo: '', //虚拟订单编号
|
|
depositPrice: '', //订金剩余金额
|
|
depositSid: '', //订金信息sid
|
|
payPath: '', //款项支付委托书
|
|
price: '', //本次结转金额
|
|
}], //虚拟订单和订金关联
|
|
busSalesOrderDeposit: {
|
|
deposit: '', // 单台订金
|
|
depositAll: '', // 订金合计
|
|
depositType: '', // 订金交纳方式
|
|
depositTypeKey: '', // 订金交纳方式key
|
|
makeUpDeposit: '', // 需补交订金
|
|
}, //订金信息
|
|
busSalesOrderDiscountList: [{
|
|
discountExplain: '', //优惠项目明细
|
|
name: '', //优惠名称
|
|
num: '', //数量
|
|
price: '', //价值
|
|
salesPolicySid: '', //销售政策sid
|
|
totalValue: '', //总价值
|
|
}], //主车优惠明细
|
|
busSalesOrderInsurance: {
|
|
insuranceCarMoney: '', //单台车保费预估金额
|
|
insuranceName: '', //保险公司名称
|
|
insuranceNum: '', //公司入保期数
|
|
}, //保险说明
|
|
busSalesOrderMakeup: {
|
|
announcementModel: '', //公告型号
|
|
contractPath: '', //合同上传
|
|
moreConfig: '', //更多配置
|
|
overallDimension: '', //外廓尺寸
|
|
plateMaterial: '', //板材材质
|
|
plateThickness: '', //板材厚度
|
|
refitFactory: '', //委改厂
|
|
refitMethod: '', //委改方式
|
|
topName: '', //上装名称
|
|
topPrice: '', //上装价格
|
|
}, //上装配置信息
|
|
busSalesOrderModel: {
|
|
brandName: '', //品牌
|
|
config: '', //常用配置
|
|
finalPrice: '', //单台成交价
|
|
guildPrice: '', //单台指导价
|
|
modelConfig: '', //车型配置名称
|
|
modelConfigSid: '', //配置sid
|
|
modelName: '', //车型名称
|
|
modelSid: '', //车型sid
|
|
moreConfig: '', //更多配置
|
|
specialConfig: '', //特殊配置说明
|
|
}, //主车车型信息
|
|
busSalesOrderPrice: {
|
|
plannedPickUpDate: '', //计划提车日期
|
|
plannedPickUpLocation: '', //计划提车地点
|
|
priceSum: '', //车价合计
|
|
quantity: '', //台数
|
|
singleFinalPrice: '', //单台成交价 (主车加上装）
|
|
singleGuildPrice: '', //单台指导价 (主车加上装）
|
|
}, //价格信息
|
|
busSalesOrderVehicleList: [],//现车车辆信息
|
|
busSalesVehicleOrderList: [], //采购订单信息
|
|
// {
|
|
// linkNo: '', //车架号
|
|
// linkSid: '', //车辆sid
|
|
// linkText: '', //车辆存放地点
|
|
// }
|
|
createDate: '', //制单日期
|
|
customerName: '', //客户名称
|
|
customerSid: '', //客户sid
|
|
isInsurance: '', //公司是否入保
|
|
isTop: '', //是否包含上装
|
|
mobile: '', //客户联系电话
|
|
notes: '', //补充说明
|
|
orgName: window.sessionStorage.getItem('Orgname'), //销售部门
|
|
orgSid: window.sessionStorage.getItem('orgSid'), //销售部门sid
|
|
payType: '', //付款方式value
|
|
payTypeKey: '', //付款方式key
|
|
sid: '',
|
|
staffName: window.sessionStorage.getItem('name'), //销售专员
|
|
staffSid: window.sessionStorage.getItem('staffSid'), //销售专员sid
|
|
type: '', //销售订单车辆类型 1现车、2订单、3排产
|
|
}, // 添加和修改
|
|
// ------------------------------------
|
|
}
|
|
},
|
|
methods: {
|
|
showInfo(billNo) {
|
|
this.relState = '2'
|
|
},
|
|
handleReturn() {
|
|
this.relState = ''
|
|
this.$emit('doback')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.formadd {
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.shangzhuangstyle /deep/ .el-col-4 {
|
|
text-align: left
|
|
}
|
|
|
|
.jiagestyle /deep/ .el-col-4 {
|
|
text-align: left
|
|
}
|
|
|
|
.chosseBtn /deep/ .el-col-4 {
|
|
text-align: left
|
|
}
|
|
|
|
.tit {
|
|
margin: 0 0 10px 0;
|
|
padding: 10px 0 0 0;
|
|
}
|
|
|
|
.times {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 30px 0 10px 0;
|
|
margin: 0 auto 0 auto;
|
|
width: 75%;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
.times02 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 0 0 24px 0;
|
|
margin: 0 auto 0 auto;
|
|
width: 75%;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/deep/ .el-col-3, .el-col-4, .el-col-2 {
|
|
text-align: right;
|
|
float: left;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
line-height: 40px !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/deep/ .el-button--small {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.space_up {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.qitas .left {
|
|
text-align: left;
|
|
}
|
|
|
|
.qitas .right {
|
|
text-align: right;
|
|
}
|
|
|
|
.addinputw {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.jinrongTit span {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/deep/ .is-checked /deep/ .el-checkbox__label {
|
|
color: white;
|
|
}
|
|
|
|
/deep/ .el-checkbox__label {
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
}
|
|
|
|
/deep/ .el-collapse-item__header {
|
|
height: 40px;
|
|
padding: 10px;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
text-align: left;
|
|
color: #ffffff;
|
|
background-color: #0294d7;
|
|
}
|
|
|
|
/deep/ .el-collapse-item__content {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/deep/ .el-main {
|
|
padding: 0;
|
|
}
|
|
|
|
.aside_one {
|
|
border-right: 1px solid #e0e3eb;
|
|
border-bottom: 1px solid #e0e3eb;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
font-weight: 600;
|
|
text-align: right;
|
|
line-height: 100px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.aside_two {
|
|
border-right: 1px solid #e0e3eb;
|
|
border-bottom: 1px solid #e0e3eb;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
line-height: 100px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.footer_con {
|
|
padding: 40px 25px 0 45px;
|
|
}
|
|
|
|
.footer_time {
|
|
padding: 25px 25px 0 95px;
|
|
}
|
|
|
|
.footer_con .footer_tit {
|
|
display: inline-block;
|
|
width: 20%;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.footer_time .footer_tit {
|
|
display: inline-block;
|
|
width: 20%;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.footer_tit:last-child {
|
|
float: right;
|
|
margin: 0;
|
|
right: 120px;
|
|
}
|
|
</style>
|
|
|