YueCaiqi_wm/MallVue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

退货申请详情功能完善

Browse Source
This commit is contained in:
zhh 2018-10-24 17:24:15 +08:00
parent d66d940d59
commit 592e5eb887
2 changed files with 237 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/returnApply.js
View File

@ -14,6 +14,13 @@ export function deleteApply(params) {
params:params params:params
}) })
} }
export function updateApplyStatus(id,data) {
return request({
url:'/returnApply/update/status/'+id,
method:'post',
data:data
})
}
export function getApplyDetail(id) { export function getApplyDetail(id) {
return request({ return request({

338
src/views/oms/apply/applyDetail.vue
View File

@ -41,117 +41,208 @@
</el-card> </el-card>
<el-card shadow="never" class="standard-margin"> <el-card shadow="never" class="standard-margin">
<span class="font-medium">服务单信息</span> <span class="font-medium">服务单信息</span>
<el-row class="standard-margin"> <div class="form-container-border">
<el-col :span="6" class="form-border form-left-bg font-small">服务单号</el-col> <el-row>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.id}}</el-col> <el-col :span="6" class="form-border form-left-bg font-small">服务单号</el-col>
</el-row> <el-col class="form-border font-small" :span="18">{{orderReturnApply.id}}</el-col>
<el-row> </el-row>
<el-col class="form-border form-left-bg font-small" :span="6">申请状态</el-col> <el-row>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.status | formatStatus}}</el-col> <el-col class="form-border form-left-bg font-small" :span="6">申请状态</el-col>
</el-row> <el-col class="form-border font-small" :span="18">{{orderReturnApply.status | formatStatus}}</el-col>
<el-row> </el-row>
<el-col :span="6" class="form-border form-left-bg font-small" style="height:50px;line-height:30px">订单编号</el-col> <el-row>
<el-col class="form-border font-small" :span="18" style="height:50px"> <el-col :span="6" class="form-border form-left-bg font-small" style="height:50px;line-height:30px">订单编号
{{orderReturnApply.orderSn}} </el-col>
<el-button type="text" size="small">查看</el-button> <el-col class="form-border font-small" :span="18" style="height:50px">
</el-col> {{orderReturnApply.orderSn}}
</el-row> <el-button type="text" size="small">查看</el-button>
<el-row> </el-col>
<el-col class="form-border form-left-bg font-small" :span="6">申请时间</el-col> </el-row>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.createTime | formatTime}}</el-col> <el-row>
</el-row> <el-col class="form-border form-left-bg font-small" :span="6">申请时间</el-col>
<el-row> <el-col class="form-border font-small" :span="18">{{orderReturnApply.createTime | formatTime}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">用户账号</el-col> </el-row>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.memberUsername}}</el-col> <el-row>
</el-row> <el-col class="form-border form-left-bg font-small" :span="6">用户账号</el-col>
<el-row> <el-col class="form-border font-small" :span="18">{{orderReturnApply.memberUsername}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">联系人</el-col> </el-row>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.returnName}}</el-col> <el-row>
</el-row> <el-col class="form-border form-left-bg font-small" :span="6">联系人</el-col>
<el-row> <el-col class="form-border font-small" :span="18">{{orderReturnApply.returnName}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col> </el-row>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.returnPhone}}</el-col> <el-row>
</el-row> <el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
<el-row> <el-col class="form-border font-small" :span="18">{{orderReturnApply.returnPhone}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">退货原因</el-col> </el-row>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.reason}}</el-col> <el-row>
</el-row> <el-col class="form-border form-left-bg font-small" :span="6">退货原因</el-col>
<el-row> <el-col class="form-border font-small" :span="18">{{orderReturnApply.reason}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">问题描述</el-col> </el-row>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.description}}</el-col> <el-row>
</el-row> <el-col class="form-border form-left-bg font-small" :span="6">问题描述</el-col>
<el-row> <el-col class="form-border font-small" :span="18">{{orderReturnApply.description}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">凭证图片 </el-row>
</el-col> <el-row>
<el-col class="form-border font-small" :span="18" style="height:100px"> <el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">凭证图片
<img v-for="item in proofPics" style="width:80px;height:80px" :src="item"> </el-col>
</el-col> <el-col class="form-border font-small" :span="18" style="height:100px">
</el-row> <img v-for="item in proofPics" style="width:80px;height:80px" :src="item">
<el-row class="standard-margin"> </el-col>
<el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col> </el-row>
<el-col class="form-border font-small" :span="18">￥{{totalAmount}}</el-col> </div>
</el-row> <div class="form-container-border">
<el-row> <el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">确认退款金额 <el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col>
</el-col> <el-col class="form-border font-small" :span="18">￥{{totalAmount}}</el-col>
<el-col class="form-border font-small" style="height:52px" :span="18"> </el-row>
￥ <el-row>
<el-input size="small" v-model="updateStatusParam.returnAmount" <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">确认退款金额
style="width:200px;margin-left: 10px"></el-input> </el-col>
</el-col> <el-col class="form-border font-small" style="height:52px" :span="18">
</el-row> ￥
<el-row> <el-input size="small" v-model="updateStatusParam.returnAmount"
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">选择收货点 :disabled="orderReturnApply.status!==0"
</el-col> style="width:200px;margin-left: 10px"></el-input>
<el-col class="form-border font-small" style="height:52px" :span="18"> </el-col>
<el-select size="small" style="width:200px" v-model="updateStatusParam.companyAddressId"> </el-row>
<el-option v-for="address in companyAddressList" <div v-show="orderReturnApply.status!==3">
:key="address.id" <el-row>
:value="address.id" <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">选择收货点
:label="address.addressName"> </el-col>
</el-option> <el-col class="form-border font-small" style="height:52px" :span="18">
</el-select> <el-select size="small"
</el-col> style="width:200px"
</el-row> :disabled="orderReturnApply.status!==0"
<el-row> v-model="updateStatusParam.companyAddressId">
<el-col class="form-border form-left-bg font-small" :span="6">收货人姓名</el-col> <el-option v-for="address in companyAddressList"
<el-col class="form-border font-small" :span="18">{{currentAddress.name}}</el-col> :key="address.id"
</el-row> :value="address.id"
<el-row> :label="address.addressName">
<el-col class="form-border form-left-bg font-small" :span="6">所在区域</el-col> </el-option>
<el-col class="form-border font-small" :span="18">{{currentAddress | formatRegion}}</el-col> </el-select>
</el-row> </el-col>
<el-row> </el-row>
<el-col class="form-border form-left-bg font-small" :span="6">详细地址</el-col> <el-row>
<el-col class="form-border font-small" :span="18">{{currentAddress.detailAddress}}</el-col> <el-col class="form-border form-left-bg font-small" :span="6">收货人姓名</el-col>
</el-row> <el-col class="form-border font-small" :span="18">{{currentAddress.name}}</el-col>
<el-row> </el-row>
<el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col> <el-row>
<el-col class="form-border font-small" :span="18">{{currentAddress.phone}}</el-col> <el-col class="form-border form-left-bg font-small" :span="6">所在区域</el-col>
</el-row> <el-col class="form-border font-small" :span="18">{{currentAddress | formatRegion}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">详细地址</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress.detailAddress}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress.phone}}</el-col>
</el-row>
</div>
</div>
<div class="form-container-border" v-show="orderReturnApply.status!==0">
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">处理人员</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleMan}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">处理时间</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleTime | formatTime}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">处理备注</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleNote}}</el-col>
</el-row>
</div>
<div class="form-container-border" v-show="orderReturnApply.status===2">
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">收货人员</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveMan}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" >收货时间</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveTime | formatTime}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">收货备注</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveNote}}</el-col>
</el-row>
</div>
<div class="form-container-border" v-show="orderReturnApply.status===0">
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">处理备注</el-col>
<el-col class="form-border font-small" :span="18">
<el-input size="small" v-model="updateStatusParam.handleNote" style="width:200px;margin-left: 10px"></el-input>
</el-col>
</el-row>
</div>
<div class="form-container-border" v-show="orderReturnApply.status===1">
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">收货备注</el-col>
<el-col class="form-border font-small" :span="18">
<el-input size="small" v-model="updateStatusParam.receiveNote" style="width:200px;margin-left: 10px"></el-input>
</el-col>
</el-row>
</div>
<div style="margin-top:15px;text-align: center" v-show="orderReturnApply.status===0">
<el-button type="primary" size="small" @click="handleUpdateStatus(1)">确认退货</el-button>
<el-button type="danger" size="small" @click="handleUpdateStatus(3)">拒绝退货</el-button>
</div>
<div style="margin-top:15px;text-align: center" v-show="orderReturnApply.status===1">
<el-button type="primary" size="small" @click="handleUpdateStatus(2)">确认收货</el-button>
</div>
</el-card> </el-card>
</div> </div>
</template> </template>
<script> <script>
import {getApplyDetail} from '@/api/returnApply'; import {getApplyDetail,updateApplyStatus} from '@/api/returnApply';
import {fetchList} from '@/api/companyAddress'; import {fetchList} from '@/api/companyAddress';
import {formatDate} from '@/utils/date'; import {formatDate} from '@/utils/date';
const defaultUpdateStatusParam = { const defaultUpdateStatusParam = {
companyAddressId: null, companyAddressId: null,
handleMan: null, handleMan: 'admin',
handleNote: null, handleNote: null,
receiveMan: null, receiveMan: 'admin',
receiveNote: null, receiveNote: null,
returnAmount: 0, returnAmount: 0,
status: 0 status: 0
}; };
const defaultOrderReturnApply = {
id: null,
orderId: null,
companyAddressId: null,
productId: null,
orderSn: null,
createTime: null,
memberUsername: null,
returnAmount: null,
returnName: null,
returnPhone: null,
status: null,
handleTime: null,
productPic: null,
productName: null,
productBrand: null,
productAttr: null,
productCount: null,
productPrice: null,
productRealPrice: null,
reason: null,
description: null,
proofPics: null,
handleNote: null,
handleMan: null,
receiveMan: null,
receiveTime: null,
receiveNote: null
};
export default { export default {
name: 'returnApplyDetail', name: 'returnApplyDetail',
data() { data() {
return { return {
id: null, id: null,
orderReturnApply: null, orderReturnApply: Object.assign({},defaultOrderReturnApply),
productList: null, productList: null,
proofPics: null, proofPics: null,
updateStatusParam: Object.assign({}, defaultUpdateStatusParam), updateStatusParam: Object.assign({}, defaultUpdateStatusParam),
@ -161,7 +252,6 @@
created() { created() {
this.id = this.$route.query.id; this.id = this.$route.query.id;
this.getDetail(); this.getDetail();
this.getCompanyAddressList();
}, },
computed: { computed: {
totalAmount() { totalAmount() {
@ -171,11 +261,13 @@
return 0; return 0;
} }
}, },
currentAddress(){ currentAddress() {
console.log("currentAddress()");
let id = this.updateStatusParam.companyAddressId; let id = this.updateStatusParam.companyAddressId;
for(let i=0;i<this.companyAddressList.length;i++){ if(this.companyAddressList==null)return {};
let address=this.companyAddressList[i]; for (let i = 0; i < this.companyAddressList.length; i++) {
if(address.id===id){ let address = this.companyAddressList[i];
if (address.id === id) {
return address; return address;
} }
} }
@ -201,35 +293,60 @@
let date = new Date(time); let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss') return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}, },
formatRegion(address){ formatRegion(address) {
let str=address.province; let str = address.province;
if(address.city!=null){ if (address.city != null) {
str+=" "+address.city; str += " " + address.city;
} }
str+=" "+address.region; str += " " + address.region;
return str; return str;
} }
}, },
methods: { methods: {
getDetail() { getDetail() {
getApplyDetail(this.id).then(response => { getApplyDetail(this.id).then(response => {
console.log("getDetail")
this.orderReturnApply = response.data; this.orderReturnApply = response.data;
this.productList = []; this.productList = [];
this.productList.push(this.orderReturnApply); this.productList.push(this.orderReturnApply);
if (this.orderReturnApply.proofPics != null) { if (this.orderReturnApply.proofPics != null) {
this.proofPics = this.orderReturnApply.proofPics.split(",") this.proofPics = this.orderReturnApply.proofPics.split(",")
} }
//退货中和完成
if(this.orderReturnApply.status===1||this.orderReturnApply.status===2){
this.updateStatusParam.returnAmount=this.orderReturnApply.returnAmount;
this.updateStatusParam.companyAddressId=this.orderReturnApply.companyAddressId;
}
this.getCompanyAddressList();
}); });
}, },
getCompanyAddressList() { getCompanyAddressList() {
fetchList().then(response => { fetchList().then(response => {
console.log("getCompanyAddressList()")
this.companyAddressList = response.data; this.companyAddressList = response.data;
for(let i=0;i<this.companyAddressList.length;i++){ for (let i = 0; i < this.companyAddressList.length; i++) {
if(this.companyAddressList[i].receiveStatus===1){ if (this.companyAddressList[i].receiveStatus === 1&&this.orderReturnApply.status===0) {
this.updateStatusParam.companyAddressId=this.companyAddressList[i].id; this.updateStatusParam.companyAddressId = this.companyAddressList[i].id;
} }
} }
}); });
},
handleUpdateStatus(status){
this.updateStatusParam.status=status;
this.$confirm('是否要进行此操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateApplyStatus(this.id,this.updateStatusParam).then(response=>{
this.$message({
type: 'success',
message: '操作成功!',
duration:1000
});
this.$router.back();
});
});
} }
} }
} }
@ -247,11 +364,16 @@
.standard-margin { .standard-margin {
margin-top: 15px; margin-top: 15px;
} }
.form-border { .form-border {
border: 1px solid #DCDFE6; border-right: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6;
padding: 10px; padding: 10px;
margin: 0 0 -1px -1px; }
.form-container-border {
border-left: 1px solid #DCDFE6;
border-top: 1px solid #DCDFE6;
margin-top: 15px;
} }
.form-left-bg { .form-left-bg {