<template>
<div class="orderDetail">
<el-card>
<el-steps :active="orderDetail ? orderDetail.status : 1" align-center>
<el-step title="买家下单付款"></el-step>
<el-step title="商家发货"></el-step>
<el-step title="订单完成"></el-step>
</el-steps>
</el-card>
<p class="order-status-con" v-if="isShowOrderStatusInfo(orderDetail.status,orderDetail.settlement_status)">
<span>订单状态：</span>
<span>已完成，已结算</span>
</p>
<el-card style="margin-top: 20px;">
<div class="orderList">
<div class="orderItem">
<div class="orderTitle" style="justify-content: space-between;">
<div style="display: flex; align-items: center;">
<img class="icon" src="@/assets/image/order/icon3.png" alt="">
<span>订单信息</span>
</div>
<div>
<el-button size="mini" type="primary" @click="goShipping(1)">去发货</el-button>
<el-button size="mini" type="primary" @click="goShipping(2)" >更新物流单号</el-button>
</div>
</div>
<el-table :data="orderGoodsDetail" style="border: 1px solid #eee;" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column label="订单号" prop="goods_order_sn" align="center"></el-table-column>
<el-table-column label="商品名称" prop="title" align="center"></el-table-column>
<el-table-column label="下单时间" prop="created_time" align="center">
<template slot-scope="scope">
{{ scope.row.created_time ? formatter(scope.row.created_time) : '' }}
</template>
</el-table-column>
<el-table-column label="规格/数量/单价" align="center">
<template slot-scope="scope">
{{ scope.row.goods_option_title }}<br/>
{{scope.row.goods_price / 100}} 元<br/>
x {{scope.row.total }}
</template>
</el-table-column>
<el-table-column label="商品订单状态" align="center">
<template slot-scope="scope">
{{ goodsStatusFormatter(scope.row.goods_status) }}
</template>
</el-table-column>
<el-table-column label="快递公司" prop="express_company_name" align="center">
<template slot-scope="scope">
{{ scope.row.express_company_name ? scope.row.express_company_name : '—' }}
</template>
</el-table-column>
<el-table-column label="快递单号" prop="express_sn" align="center">
<template slot-scope="scope">
{{ scope.row.express_sn ? scope.row.express_sn : '—' }}
</template>
</el-table-column>
<el-table-column label="发货时间" prop="send_time" align="center">
<template slot-scope="scope">
{{ scope.row.send_time ? formatter(scope.row.send_time) : '—' }}
</template>
</el-table-column>
<el-table-column label="操作" class-name="small-padding fixed-width" align="center" width="180">
<template slot-scope="scope">
<span style="font-size:12px;padding: 0 15px 0 0;" v-if="deliveryTypeText(scope.row.goods_status,scope.row.is_reissue) == '已补单'">已补单</span>
<el-button size="mini" type="text" v-if="deliveryTypeText(scope.row.goods_status,scope.row.is_reissue) == '去补单'" @click="goShipping(4,scope.row.id)">去补单</el-button>
<el-button size="mini" type="text" v-if="deliveryTypeText(scope.row.goods_status,scope.row.is_reissue) == '去发货'" @click="goShipping(3,scope.row.id,scope.row.goods_order_sn)">去发货</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="mini" type="text" @click="getExpressInfoNew(scope.row)">查看物流</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- <div class="orderItem">-->
<!-- <div class="orderTitle">-->
<!-- <img class="icon" src="@/assets/image/order/icon1.png" alt="">-->
<!-- <span>订单信息</span>-->
<!-- </div>-->
<!-- <div>-->
<!-- <el-row class="row-title">-->
<!-- <el-col :span="3" class="text-r">订单编号</el-col>-->
<!-- <el-col :span="6" class="text-l">{{orderDetail ? orderDetail.parent_order_sn : ''}}</el-col>-->
<!-- </el-row>-->
<!-- <el-row class="row-title">-->
<!-- <el-col :span="3" class="text-r">下单时间</el-col>-->
<!-- <el-col :span="6" class="text-l">{{orderDetail ? formatter(orderDetail.created_time) : ''}}</el-col>-->
<!-- </el-row>-->
<!-- <el-row class="row-title">-->
<!-- <el-col :span="3" class="text-r">商品数量</el-col>-->
<!-- <el-col :span="6" class="text-l">{{orderDetail ? orderDetail.goods_total : ''}}</el-col>-->
<!-- </el-row>-->
<!-- <el-row class="row-title">-->
<!-- <el-col :span="3" class="text-r">商品总价</el-col>-->
<!-- <el-col :span="6" class="text-l">{{orderDetail ? orderDetail.goods_price / 100 : ''}}</el-col>-->
<!-- </el-row>-->
<!-- <el-row class="row-title">-->
<!-- <el-col :span="3" class="text-r">运费</el-col>-->
<!-- <el-col :span="6" class="text-l">{{orderDetail ? orderDetail.dispatch_price / 100 : ''}}</el-col>-->
<!-- </el-row>-->
<!-- </div>-->
<!-- </div>-->
<div class="orderItem">
<div class="orderTitle" style="justify-content: space-between; width: 75%;">
<div style="display: flex; align-items: center;">
<img class="icon" src="@/assets/image/order/icon2.png" alt="">
<span>买家信息</span>
</div>
<el-button size="mini" type="primary" @click="modifyinfo" :disabled="orderDetail.isEditBuyerInfo">修改买家信息</el-button>
</div>
<div>
<el-row class="row-title">
<el-col :span="4" class="text-r">收货人姓名</el-col>
<el-col :span="4" class="text-r">联系电话</el-col>
<el-col :span="10" class="text-r">收货地址</el-col>
</el-row>
<el-row class="row-title">
<el-col :span="4" class="text-l">{{ orderDetail ? orderDetail.real_name : ''}}</el-col>
<el-col :span="4" class="text-l">{{ orderDetail ? orderDetail.mobile : ''}}</el-col>
<el-col :span="10" class="text-l">{{orderDetail ? orderDetail.provice + orderDetail.city + orderDetail.district + orderDetail.street + orderDetail.address : ''}}</el-col>
</el-row>
</div>
</div>
<!-- <div class="orderItem">
<div class="orderTitle">
<img class="icon" src="@/assets/image/order/icon4.png" alt="">
<span>操作历史</span>
</div>
<el-table :data="[]" style="border: 1px solid #eee; width: 75%;">
<el-table-column label="操作时间" prop="order_sn" width="300"/>
<el-table-column label="操作人" prop="order_sn" width="300"/>
<el-table-column label="操作内容" prop="order_sn"/>
</el-table>
</div> -->
<div class="orderItem">
<div class="orderTitle">
<div style="display: flex; align-items: center; width: 70%;">
<img class="icon" src="@/assets/image/order/icon5.png" alt="">
<span>订单备注</span>
</div>
<el-button size="mini" type="primary" @click="addRemark">添加备注</el-button>
</div>
<div style="width: 75%; min-height: 100px; border: 1px solid #eee; padding: 10px;">
<!-- <el-timeline-item-->
<!-- v-for="(remarkItem, index) in orderDetail.remark"-->
<!-- :key="index"-->
<!-- color="#0bbd87"-->
<!-- :timestamp="formatter(remarkItem.date_time)">-->
<!-- {{remarkItem.content}}-->
<!-- </el-timeline-item>-->
<!-- </el-timeline>-->
<!-- <div ">暂无留言备注</div>-->
<p v-if="orderDetail.remark.length == 0" style="color:#999;">暂无备注</p>
<div v-for="(remarkItem, index) in orderDetail.remark" :key="index" class="remark-con">
<span class="remark-time">{{ formatter(remarkItem.date_time) }}</span>
<span class="remark-text">{{ remarkItem.content }}</span>
</div>
</div>
</div>
</div>
</el-card>
<!-- 修改买家信息 -->
<el-dialog
title="修改买家信息"
:visible.sync="modifyinfoDialog"
width="30%"
:modal-append-to-body="false"
:close-on-click-modal="false"
:append-to-body="true"
center
>
<div style="margin: 0 20px;">
<el-form ref="addressForm" :model="addressForm" label-width="100px">
<el-form-item label="收货人姓名：">
<el-input size="mini" v-model="addressForm.shipping_name" placeholder="请输入收货人姓名"></el-input>
</el-form-item>
<el-form-item label="联系电话：">
<el-input size="mini" v-model="addressForm.tel" placeholder="请输入联系电话"></el-input>
</el-form-item>
<el-form-item label="收货地址：">
<el-cascader :class="{ 'only-eidt-placeholder' : onlyEidtPlaceholder }" v-model="addressForm.areaList" :props='props' @change="handleChanges" ref="ssqCascader" :placeholder="addOrEditPlaceholder" style="width:100%"></el-cascader>
</el-form-item>
<el-form-item label="街道：">
<el-input size="mini" v-model="addressForm.street" placeholder="请输入街道"></el-input>
</el-form-item>
<el-form-item label="详细地址：">
<el-input size="mini" v-model="addressForm.address" placeholder="请输入详细地址"></el-input>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="modifyinfoDialog = false">取 消</el-button>
<el-button size="mini" type="primary" @click="handleModifyInfo">确 定</el-button>
</span>
</el-dialog>
<!-- 发货 -->
<el-dialog
:title="titleInfo"
:visible.sync="goShippingDialog"
width="25%"
:modal-append-to-body="false"
:close-on-click-modal="false"
:append-to-body="true"
>
<div style="margin: 0 10%">
<el-form ref="form" label-width="100px">
<el-form-item label="快递公司：">
<el-select size="mini" v-model="expressNum" filterable placeholder="请选择快递公司" style="width: 100%;">
<el-option
v-for="item in expressLists"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="快递单号：">
<el-input size="mini" v-model="express_sn" placeholder="请输入快递单号"></el-input>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="goShippingDialog = false">取 消</el-button>
<el-button size="mini" type="primary" @click="handleGoShipping">确 定</el-button>
</span>
</el-dialog>
<el-dialog
title="添加订单备注"
:visible.sync="addRemarkDialog"
width="25%"
:modal-append-to-body="false"
:close-on-click-modal="false"
:append-to-body="true"
>
<div style="padding: 20px 10% 1px; background: #F7F8FA;">
<el-form ref="form" label-width="100px">
<el-form-item label="添加备注：">
<el-input
type="textarea"
:rows="5"
placeholder="请输入订单备注"
v-model="remark">
</el-input>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="addRemarkDialog = false">取 消</el-button>
<el-button size="mini" type="primary" @click="getRemarkOrder">确 定</el-button>
</span>
</el-dialog>
<!-- 查看物流 -->
<el-dialog title="物流信息" width="50%" class="cutclass" :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="dialogCheck" append-to-body>
<div class="logistics">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:type="activity.type"
color="#0bbd87"
:size="activity.size"
:timestamp="activity.msg_time">
{{activity.content}}
</el-timeline-item>
</el-timeline>
<div v-if="activities.length == 0">暂无物流信息</div>
</div>
</el-dialog>
</div>
</template>
<script>
import {orderInfo, sendOrder, expressInfoNew, remarkOrder, orderInfoEdit,deliveryOrder, deliveryOrderAgain, toReissueOrderData} from '@/api/module/order'
import {dateFormat} from '@/utils'
import {getAreaList} from '@/api/module/retreat/address'
export default {
props: {
// 订单信息
orderDetail: {
type: Object
},
// 商品订单 信息
orderGoodsDetail: {
type: Array,
},
expressLists: {
type: Array
}
},
data() {
return {
expressNum: '',
express_sn: '',
remark: '',
modifyinfoDialog: false,
goShippingDialog: false,
addRemarkDialog: false,
dialogCheck: false,
titleInfo: '',
addressForm: {
shipping_name: '',
tel: '',
address: '',
street: '',
areaList: [] // 省市区
},
activities: [],
multipleSelection: [],
props: {
expandTrigger: 'click',
lazy: true,
lazyLoad: this.lazyLoad,
value: "id",
label: 'name',
leaf: 'leaf'
},
addOrEditPlaceholder: '',
onlyEidtPlaceholder: false,
goShippingNum: 0, // 发货类型
goods_ids: null, // 发货的商品订单 id
// isShowOrderStatus: false,
//orderStatusInfo: ''
}
},
watch: {},
created() {},
mounted() {},
methods: {
/** 订单最终状态 */
isShowOrderStatusInfo(status,settlementStatus) {
let isShow = (status == 3 && settlementStatus == 1) ? true : false;
// console.log("订单最终状态：",status,settlementStatus);
// this.orderStatusInfo = ''
return isShow;
},
/** 商品 发货状态 */
goodsStatusFormatter(status) {
let res = '—';
if (status == 0) {
res = "待发货";
} else if (status == 1) {
res = "已发货";
} else if (status == 2) {
res = "已完成";
} else if (status == 3) {
res = "配货中";
} else if (status == 4) {
res = "拒收";
}else if (status == 5) {
res = "已收货";
}
return res
},
/**
* 商品订单 操作类型
* gs:goods_status ir:is_reissue
* 返回值有三种情况：去发货，补单，已补单（不可点击）
* */
deliveryTypeText(gs,ir) {
return gs == 0 ? '去发货' : ir == 0 ? '去补单' : '已补单'
},
/**
* 时间戳转换为日期格式
* 项目中，后台一般均返回10位数的时间戳，在公用的封装方法dateFormat中，第一个入参，需要*1000 ，具体参考 new Date(时间戳) 方法
* */
formatter(time) {
return dateFormat(time * 1000, 'Y-m-d H:i:s')
},
/**
* 发货
* val 发货类型：1-商品的批量发货；2-批量补单发货；3-单商品发货；4-单格个商品订单 补单发货
* */
// 发货，补单，补单发货
goShipping(val, id, goods_order_sn) {
//console.log(361,this.multipleSelection);
this.goShippingNum = val
this.goods_ids = []
this.expressNum = ''
this.express_sn = ''
let isContinue = true;
// 批量发货
if(this.goShippingNum === 1) {
if (this.multipleSelection.length === 0) {
this.$message({type: 'warning',message: '请先选择需要发货的商品'});
return
}
for(let i = 0; i < this.multipleSelection.length; i++) {
// 批量发货 goods_status 0:未发货,1:待收货,2:已收货,3:配货中,4：拒收
if (this.multipleSelection[i].goods_status > 0) {
this.$message({type: 'warning',message: '所选商品中部分已发货，请重新选择'});
isContinue = false
break;
}else {
// let idNum = Number(this.multipleSelection[i].id);
let idNum = this.multipleSelection[i].goods_order_sn;
this.goods_ids.push(idNum);
}
}
if(!isContinue) {
// 批量发货时候，goods_order_sn 为数组 [3,4,5]
this.goods_ids = []
return;
}
this.titleInfo = '去发货'
this.goShippingDialog = true
}
// 批量补单
if(this.goShippingNum === 2) {
if (this.multipleSelection.length === 0) {
this.$message({type: 'warning',message: '请先选择需要补单发货的商品'});
return
}
for(let i = 0; i < this.multipleSelection.length; i++) {
// 批量补单 is_reissue 1-已补发；2-未补发
// 首先，先发货了，才能补单
if( this.multipleSelection[i].goods_status > 0 ) {
if (this.multipleSelection[i].is_reissue) {
this.$message({type: 'warning',message: '所选商品中部分已补单，请重新选择'});
isContinue = false;
break;
}else {
let idObj = {id: Number(this.multipleSelection[i].id)};
this.goods_ids.push(idObj);
}
}else {
isContinue = false;
this.$message({type:'warning',message:'所选商品中部分未发货，不能进行更新物流单号，请重新选择'});
break
}
}
if(!isContinue) {
this.goods_ids = []
return;
}
this.titleInfo = '补单发货'
this.goShippingDialog = true
}
// 单商品订单 发货
if(this.goShippingNum === 3) {
this.goods_ids = goods_order_sn;
this.titleInfo = '去发货'
this.goShippingDialog = true
}
// 单格个商品订单 补单发货
if (this.goShippingNum === 4) {
this.goods_ids = id;
this.titleInfo = '去补单'
this.goShippingDialog = true
}
//console.log(5555555,this.goods_ids);
},
/** ReissueOrder*/
/** 批量发货，批量补单发货，单个发货，单个补单发货 */
handleGoShipping() {
if (!this.expressNum) {
this.$message({
type: 'warning',
message: '请选择快递公司'
})
return
}
if (!this.express_sn) {
this.$message({
type: 'warning',
message: '请输入快递单号'
})
return
}
// 物流公司，名称
let expressName = ''
this.expressLists.map((item) => {
if (item.value == this.expressNum) {
expressName = item.label
}
})
// 批量 去发货
if( this.goShippingNum === 1) {
let paramsObj = {
goods_order_sn: this.goods_ids,
express_company_name: expressName, // 快递公司 名称
express_sn: this.express_sn, // 快递单号
//express_code: ''
}
deliveryOrder(paramsObj).then(res=> {
if(res.code == 1) {
this.$message({type:'success',message:'发货成功'});
this.goShippingDialog = false
this.handleInfo()
}else {
this.$message({type:'error',message: res.message ? res.message : '发货失败'});
}
});
}
// 批量 补单发货
if (this.goShippingNum === 2 ) {
// debugger
let listObj = { list: [] }
this.goods_ids.forEach((item,index)=> {
item['express_name'] = expressName;
item['express_sn'] = this.express_sn;
item['express_code'] = this.expressNum;
})
listObj.list = this.goods_ids;
//console.log("批量补单发货",listObj);
deliveryOrderAgain(listObj).then(res=> {
if(res.code == 1) {
this.$message({type:'success',message:'补单发货成功'});
this.goShippingDialog = false
this.handleInfo()
}else {
this.$message({type:'error',message: res.message ? res.message : '补单发货失败'});
}
});
}
// 单商品订单 发货
if(this.goShippingNum === 3) {
let paramsObj = {
goods_order_sn: [],//this.goods_ids,
express_company_name: expressName, // 快递公司 名称
express_sn: this.express_sn, // 快递单号
//express_code: ''
}
paramsObj.goods_order_sn.push(this.goods_ids);
//console.log(11111,paramsObj);
deliveryOrder(paramsObj).then(res=> {
if(res.code == 1) {
this.$message({type:'success',message:'发货成功'});
this.goShippingDialog = false
this.handleInfo()
}else {
this.$message({type:'error',message: res.message ? res.message : '发货失败'});
}
});
}
// 单个商品订单 补单发货
if(this.goShippingNum === 4) {
let singleOrderObj = { list: []};
let orderObj = {
id: 0,
express_name: '',
express_sn: '',
express_code: '',
}
orderObj.id = this.goods_ids;
orderObj.express_name = expressName;
orderObj.express_code = this.expressNum;
orderObj.express_sn = this.express_sn;
singleOrderObj.list.push(orderObj);
deliveryOrderAgain(singleOrderObj).then(res=> {
if(res.code == 1) {
this.$message({type:'success',message:'补单发货成功'});
this.goShippingDialog = false
this.handleInfo()
}else {
this.$message({type:'error',message: res.message ? res.message : '补单发货失败'});
}
});
}
// sendOrder(params).then(res => {})
},
// 订单详情
handleInfo() {
this.detailDialog = true
let id = this.orderDetail.id
this.$emit('updateOrder',id);
},
// 选中的表格
handleSelectionChange(val) {
this.multipleSelection = val;
// console.log(555,this.multipleSelection);
},
/** 修改 买家信息 */
modifyinfo() {
this.addressForm = {
shipping_name: '',
tel: '',
address: '',
street: '',
areaList: []
}
this.$nextTick(()=> {
this.$refs.ssqCascader.$refs.panel.activePath = []
});
if(this.orderDetail.real_name) {
this.addressForm.shipping_name = this.orderDetail.real_name;
}
if(this.orderDetail.mobile) {
this.addressForm.tel = this.orderDetail.mobile;
}
// 因为 后台返回的省市区 每个字段都是 汉字，所以这样处理，通过 placeholder 去回显 后台返回的数据，
if(this.orderDetail.provice && this.orderDetail.city && this.orderDetail.district) {
//console.log(66,this.addressForm.areaList);
this.addOrEditPlaceholder = this.orderDetail.provice + '/' + this.orderDetail.city + '/' + this.orderDetail.district;
this.onlyEidtPlaceholder = true;
this.addressForm.areaList[0] = this.orderDetail.provice
this.addressForm.areaList[1] = this.orderDetail.city
this.addressForm.areaList[2] = this.orderDetail.district
}else {
this.onlyEidtPlaceholder = false;
this.addOrEditPlaceholder = "请选择具体的省市区"
this.addressForm.areaList = []
}
if(this.orderDetail.street) {
this.addressForm.street = this.orderDetail.street;
}
if(this.orderDetail.address) {
this.addressForm.address = this.orderDetail.address;
}
this.modifyinfoDialog = true
},
/** 保存 买家信息 */
handleModifyInfo() {
// console.log(555,this.addressForm.areaList);
// let ssqLabelList = this.$refs['ssqCascader'].getCheckedNodes()[0].pathLabels;
// console.log(444,ssqLabelList)
if (!this.addressForm.shipping_name) {
this.$message({
type: 'warning',
message: '请输入收货人姓名'
})
return
}
if (!this.addressForm.tel) {
this.$message({
type: 'warning',
message: '请输入联系电话'
})
return
}
// 手机号码格式校验
const reg = /^1[3456789]\d{9}$/;
if (!reg.test(this.addressForm.tel)) {
this.$message({
type: 'warning',
message: '手机号码格式有误'
})
return
}
if (!this.addressForm.areaList) {
this.$message({
type: 'warning',
message: '请选择省市区'
})
return
}
if (!this.addressForm.street) {
this.$message({
type: 'warning',
message: '请输入街道'
})
return
}
if (!this.addressForm.address) {
this.$message({
type: 'warning',
message: '请输入收货地址'
})
return
}
// 省市区 转化
let ssqLabelList = [];
if(!this.onlyEidtPlaceholder) {
ssqLabelList = this.$refs['ssqCascader'].getCheckedNodes()[0].pathLabels;
}else {
ssqLabelList = this.addressForm.areaList;
}
let params = {
order_sn : this.orderDetail.order_sn,
shipping_name: this.addressForm.shipping_name,
province_name: ssqLabelList[0] ? ssqLabelList[0] : '',
city_name: ssqLabelList[1] ? ssqLabelList[1] : '',
district_name: ssqLabelList[2] ? ssqLabelList[2] : '',
street_name: this.addressForm.street,
address: this.addressForm.address,
tel: this.addressForm.tel,
}
orderInfoEdit(params).then(res => {
if (res.code == 1) {
this.$message({
type: 'success',
message: '修改成功'
})
this.modifyinfoDialog = false
this.handleInfo()
}else {
this.$message({type:'error',message:res.message ? res.message : '修改失败'});
}
})
},
/** 查看 商品订单 物流信息 */
getExpressInfoNew(row) {
// 如果 商品订单没有发货，则不用请求了
if(row.goods_status == 0) {
this.$message({type:'warning',message:'您还未发货，暂无物流信息'});
return
}
let params = {
goods_order_sn: row.goods_order_sn,
sku_id: row.goods_option_id
}
expressInfoNew(params).then(res => {
if (res.code == 1 && res.data) {
this.dialogCheck = true
this.activities = res.data.order_track ? res.data.order_track : [];
}else {
this.$message({type:'error',message: res.message ? res.message : '获取数据失败' });
}
})
},
/** 添加备注 */
addRemark() {
this.remark = ''
this.addRemarkDialog = true
},
/** 订单备注 */
getRemarkOrder() {
if (!this.remark) {
this.$message({
type: 'warning',
message: '请输入订单备注'
})
return
}
let params = {
order_sn: this.orderDetail.order_sn,
remark: this.remark
}
remarkOrder(params).then(res => {
if (res.code == 1) {
this.$message({
type: 'success',
message: '添加成功'
})
this.addRemarkDialog = false
this.handleInfo()
}
})
},
// 三级联动
lazyLoad(node, resolve) {
this.getArea(node, resolve);
},
getArea(node, resolve) {
const level = node.level;
let limboNode = {};
if(level === 0) {
limboNode = {pid: 0}
}
if(level === 1) {
limboNode = { pid: node.value };
}
if(level === 2) {
limboNode = { pid: node.value };
}
getAreaList(limboNode).then(res => {
let result = {};
if (level === 0) {
result = res.data
result.forEach(item => {
item.value = item.id;
item.label = item.name;
item.children=[];
item.leaf = 0; // 可以控制 是否有下级 值为true都不行，必须等于0
})
}
if (level === 1) {
result = res.data
result.forEach(item => {
item.value = item.id;
item.label = item.name
item.children=[];
//这句代码表示当点击最后一级的时候 label后面不会转圈圈 并把相关值赋值到选择器上
item.leaf = 0
})
}
if (level === 2) {
result = res.data
result.forEach(item => {
item.value = item.id;
item.label = item.name
item.leaf = 1;
})
}
resolve(result)
})
},
handleChanges(value) {
this.addressForm.areaList = value;
this.onlyEidtPlaceholder = false // 说明操作下拉进行完整的选择值操作了，即 this.addressForm.areaList 是数组，元素为id
},
}
}
</script>
<style scoped>
::v-deep .el-dialog__header {
border-bottom: 1px solid #eee;
text-align: center;
}
::v-deep .el-step__head.is-success {
color: #3AA0FF;
border-color: #3AA0FF;
}
::v-deep .el-step__title.is-success {
color: #3AA0FF;
}
::v-deep .el-col {
border: 1px solid #eee;
padding: 0 10px;
height: 38px;
display: flex;
align-items: center;
}
::v-deep .el-dialog__body {
padding: 20px;
}
::v-deep .el-input--medium .el-input__inner {
height: 28px;
}
/*::v-deep input::-webkit-input-placeholder{*/
/* color:#606266;*/
/*}*/
/*::v-deep input::-moz-placeholder{*/
/* color:#606266;*/
/* opacity: 1*/
/*}*/
.orderDetail {
height: 660px;
padding: 0 20px;
overflow-y: auto;
}
.order-status-con {
padding: 20px;
border: 1px solid #eee;
border-radius: 4px;
font-size: 16px;
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
}
.text-r {
justify-content: center;
background: #F7F8FA;
align-items: center;
}
.text-l {
justify-content: center;
align-items: center;
}
.orderItem {
margin-bottom: 20px;
}
.orderTitle {
font-size: 16px;
font-weight: bold;
color: #000;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.icon {
height: 20px;
margin-right: 10px;
}
.row-title {
font-size: 14px;
color: #333;
}
.dialog-footer {
margin: 0 10%;
}
.logistics {
height: 600px;
overflow-y: auto;
padding: 10px;
}
/* 留言框样式 */
.remark-con {
line-height:28px;
color: #333;
box-shadow :0 2px 10px 0 rgba(0,0,0,0.05);
margin: 10px;
padding: 10px;
}
.remark-con > p {
margin: 0;
padding: 10px;
}
.remark-con .remark-time {
padding: 0 20px;
}
.remark-con .remark-text {
}
::v-deep .only-eidt-placeholder .el-input input::-webkit-input-placeholder, ::v-deep .only-eidt-placeholder .el-input textarea::-webkit-input-placeholder{
color: #666;
}
::v-deep .only-eidt-placeholder .el-input input:-moz-placeholder, ::v-deep .only-eidt-placeholder .el-input textarea:-moz-placeholder {
color: #666;
opacity: 1;
}
::v-deep .only-eidt-placeholder .el-input input::-moz-placeholder, ::v-deep .only-eidt-placeholder .el-input textarea::-moz-placeholder {
color: #666;
opacity: 1;
}
::v-deep .only-eidt-placeholder .el-input input:-ms-input-placeholder, ::v-deep .only-eidt-placeholder .el-input textarea::-ms-input-placeholder {
color: #666;
}
</style>