Skip to content

W
welfare
Commit 7d9ae12d by 黑潮
Options

update: 履约管理

parent c5b18e13
Showing with 601 additions and 64 deletions
src/api/performance.js
......@@ -15,7 +15,45 @@ let performance = {
url: '/order/get-page-list',
method: 'post'
}, // 发货单
getApplicationList: '/stock/application-list'
getApplicationList: '/stock/application-list',
getRefund: {
url: '/refund-order/get-page-list',
method: 'post'
},
exportRefundData: {
url: '/refund-order/order-export',
method: 'post'
},
exportDeliveryData: {
url: '/delivery-order/order-export',
method: 'post'
},
exportPerformanceData: {
url: '/order/order-export',
method: 'post'
},
getLogisticsInfo: {
url: '/logistics/get-logistics-info',
method: 'post'
},
handleRefundOrder: {
url: '/refund-order/process-refund-order',
method: 'post'
},
getDeliveryDetail: {
url: '/delivery-order/get-delivery-detail',
method: 'post',
useFormData: true
},
delivering: {
url: '/delivery-order/delivering',
method: 'post',
},
closeOrder: {
url: '/delivery-order/close',
method: 'post',
useFormData: true
}
};
performance = getFetch(performance, welfarePrefix);
......
src/assets/styles/component.scss
......@@ -386,7 +386,7 @@ body .damo-goods-selector{
transform: scale(0.9);
&.d {
color: #f56c6c;
}
}
}
> div {
position: relative;
......@@ -542,4 +542,41 @@ p.cell-time {
.gic-upload__img.disabled .el-icon-delete {
display: none;
}
\ No newline at end of file
}
// 履约管理
.performance-order-info { // 履约单信息样式
div {
display: flex;
}
span:first-of-type {
flex-shrink: 0;
}
}
.goods-info { // 商品信息
height: 100%;
display: flex;
img {
width: 62px;
height: 62px;
border: 1px solid rgba(241, 243, 247, 1);
border-radius: 5px;
}
.goods-text {
margin-left: 18px;
font-size: 13px;
color: #303133;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.goods-text-info {
color: #909399;
font-size: 12px;
}
.goods-text-name {
margin-bottom: 5px;
line-height: 16px;
}
}
src/assets/styles/general.scss
......@@ -427,6 +427,9 @@ a:hover {
.w350 {
width: 350px !important;
}
.w360 {
width: 360px !important;
}
.w380 {
width: 380px !important;
}
......@@ -726,4 +729,4 @@ a:hover {
}
.lose-floor-width {
width: calc(100% - 120px);
}
\ No newline at end of file
}
src/views/performance-manage/components/bulk-delivery-dialog.vue
<template>
<el-dialog :visible.sync="visible" title="批量发货" width="510px" @closed="$emit('close')">
<!-- <dm-upload-file></dm-upload-file> -->
<div>
成功<span>{{successCount}}</span>条，失败<span>{{failedCount}}</span>条
<span><span style="color:#FF5152;margin-right:5px">*</span>导入文件：</span>
<dm-upload-file
class="ml10 upload"
action="/api-welfare/delivery-order/batch-delivering"
width="70px"
:show-file-list="true"
:limit="1"
accept=".xls,.xlsx"
:headers="uploadHeader"
style="display:inline-block;">
<span slot="tip"></span>
<el-button icon="iconfont-components4 icon-cp-shangc upload-icon">上传</el-button>
</dm-upload-file>
<el-link class="ml20" type="primary" href="/static/批量发货模板.xlsx">下载批量发货的模版</el-link>
</div>
<div>1.下载批量发货的模版；<el-link type="primary" href="/">点此下载</el-link></div>
<div>2.填入需要发货的发货单号、物流公司名称、物流公司编码、物流单号；</div>
<div>3.仅支持.xlsx .xls的文件导入，最多1000条信息，文件大小不超过2M；</div>
<div class="mt10" style="margin-left:90px">
成功<span style="color:#2f54eb">{{successCount}}</span>条，失败<span style="color:#F5222d">{{failedCount}}</span>条
</div>
<el-divider></el-divider>
<div style="color:#909399;font-size:12px">1.填入需要发货的发货单号、物流公司名称、物流公司编码、物流单号；</div>
<div style="color:#909399;font-size:12px;margin-top:8px">2.仅支持.xlsx .xls的文件导入，最多1000条信息，文件大小不超过2M；</div>
<div slot="footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="handleConfirm">确认</el-button>
......@@ -15,21 +30,44 @@
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
visible: false,
successCount: 0,
failedCount: 0,
uploadHeader: {
isControl: true,
},
};
},
mounted() {
let header = axios.defaults.headers.common;
this.uploadHeader = {
...this.uploadHeader,
project: header.project,
route: header.route,
sign: header.sign
};
this.visible = true;
},
methods: {
handleConfirm() {
console.log(1);
this.visible = false;
},
}
};
</script>
<style lang="scss" scoped>
/deep/ .el-divider--horizontal {
margin: 16px 0;
margin-top: 20px;
}
.upload {
/deep/ .el-button {
border-style: dashed;
}
}
</style>
src/views/performance-manage/components/cancel-order-dialog.vue
<template>
<el-dialog :visible.sync="visible" title="物流发货" width="510px" @closed="$emit('close')">
<div>确认关闭发货单吗？</div>
<div>将恢复礼品的库存，若存在销售单请至商城应用查看退款。</div>
<dm-input type="textarea"></dm-input>
<el-dialog :visible.sync="visible" title="关闭发货单" width="510px" @closed="$emit('close')">
<div v-loading="loading">
<div style="display:flex;align-items:center;margin-left:10px">
<i class="el-icon-warning"></i>
<div class="ml20" style="font-size:16px;color:#303133">确认关闭发货单吗？</div>
</div>
<div style="margin-left:50px;color:#303133;margin-top:10px">将恢复礼品的库存，若存在销售单请至商城应用查看退款。</div>
<dm-input class="mt20" type="textarea" placeholder="请输入关闭原因（必填）" :maxlength="50" :rows="5" show-word-limit v-model="reason"></dm-input>
</div>
<div slot="footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="handleConfirm">确认</el-button>
......@@ -11,12 +16,18 @@
</template>
<script>
import fetch from '@/api/performance.js';
const { closeOrder } = fetch;
export default {
props: {
data: Object,
},
data() {
return {
visible: false,
successCount: 0,
failedCount: 0,
reason: '',
loading: false,
};
},
mounted() {
......@@ -24,8 +35,25 @@ export default {
},
methods: {
handleConfirm() {
console.log(1);
if(this.reason) {
this.loading = true;
closeOrder({
deliveryId: this.data.deliveryId,
desc: this.reason,
}).finally(() => this.loading = false);
this.visible = false;
this.$emit('refresh');
} else {
this.$message.warning('请填写关闭原因');
}
},
}
};
</script>
<style lang="scss" scoped>
.el-icon-warning {
color: #FAAD14;
font-size: 21px;
}
</style>
src/views/performance-manage/components/logistics-delivery-dialog.vue
<template>
<el-dialog :visible.sync="visible" title="物流发货" width="510px" @closed="$emit('close')">
<div>收货信息：</div>
<div>
物流公司：
<el-select>
<el-option label="商品名称" :value="1"></el-option>
</el-select>
</div>
<div>
物流单号：
<el-input></el-input>
</div>
<el-form v-loading="loading" :model="form" :rules="rules" ref="form" label-width="100px">
<el-form-item label="收货信息">
<p>{{data.consignee}} {{data.consigneePhone}}</p>
<p>{{data.consigneeAddress}}</p>
</el-form-item>
<el-form-item label="物流公司" prop="logisticsCompanyCode">
<el-select style="width:100%" placeholder="请选择" v-model="form.logisticsCompanyCode">
<el-option label="顺丰速递" value="SF"></el-option>
<el-option label="中通快递" value="STO"></el-option>
</el-select>
</el-form-item>
<el-form-item label="物流单号" prop="logisticCode">
<dm-input-phone style="width:100%" v-model="form.logisticCode" placeholder="请输入"></dm-input-phone>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="handleConfirm">确认</el-button>
......@@ -19,20 +23,51 @@
</template>
<script>
import fetch from '@/api/performance.js';
const { delivering } = fetch;
export default {
props: {
data: Object
},
data() {
return {
visible: false,
successCount: 0,
failedCount: 0,
form: {
logisticsCompanyCode: '',
logisticCode: '',
},
rules: {
logisticsCompanyCode: [ { required: true, message: '请选择物流公司', trigger: 'blur' } ],
logisticCode: [ { required: true, message: '请填写物流单号', trigger: 'blur' } ]
},
loading: false
};
},
mounted() {
this.visible = true;
},
methods: {
handleConfirm() {
console.log(1);
async handleConfirm() {
let valid = await this.$refs.form.validate();
if(valid) {
let logisticsCompany = {
'SF': '顺丰速递',
'STO': '中通快递'
};
this.loading = true;
await delivering({
companyName: logisticsCompany[this.form.logisticsCompanyCode],
companyCode: this.form.logisticsCompanyCode,
logisticsNo: this.form.logisticCode,
deliveryId: this.data.deliveryId,
}).finally(() => this.loading = false);
this.visible = false;
this.$message.success('发货成功');
this.$emit('refresh');
}
},
}
};
......
src/views/performance-manage/components/logistics-info-dialog.vue
<template>
<el-dialog :visible.sync="visible" title="物流发货" width="510px" @closed="$emit('close')">
<div>收件人：{{1231}}</div>
<div>联系方式：{{1231}}</div>
<div>收货地址：{{1231}}</div>
<div>
快递公司：{{12312}} 运单号：{{123123}}
<el-button type="text" @click="handleModifyOrder"></el-button>
</div>
<div>
物流信息
<el-dialog :visible.sync="visible" title="物流发货" width="780px" @closed="$emit('close')">
<div v-loading="loading">
<div>收货信息：{{data.consignee}} {{data.consigneePhone}} {{data.consigneeAddress}}</div>
<div class="mt20">
<span>
物流公司:
<span v-if="!isEditing">{{data.logisticsCompanyName}}</span>
<el-select class="w160" v-else placeholder="请选择" v-model="logisticsCompanyCode">
<el-option label="顺丰速递" value="SF"></el-option>
<el-option label="中通快递" value="STO"></el-option>
</el-select>
</span>
<span class="ml120">
物流单号：
<span v-if="!isEditing">{{data.logisticsNo}}</span>
<dm-input-phone class="w160" v-else v-model="logisticsNo" placeholder="请输入"></dm-input-phone>
</span>
<template v-if="logisticsList.length == 0">
<div v-if="!isEditing" class="fr">
<el-button type="text" @click="handleEdit">编辑</el-button>
</div>
<div v-else class="fr pt10">
<el-button type="text" @click="handleSave">保存</el-button>
<el-button type="text" @click="isEditing = false">取消</el-button>
</div>
</template>
</div>
<div v-if="logisticsList.length>0" class="logistics-step">
<h3>派送中</h3>
<el-timeline class="hollow logistics-list">
<el-timeline-item
v-for="(activity, index) in logisticsList"
:key="index"
:color="index===0?'':'#c0c4cc'">
<div class="logistics-line-step">
<span class="time">{{ activity.acceptTime || '--' }}</span>
<p class="content">{{ activity.acceptStation }}</p>
</div>
</el-timeline-item>
</el-timeline>
</div>
<div v-else>
<el-divider></el-divider>
<div class="empty_block"></div>
</div>
</div>
<div slot="footer">
<el-button @click="visible = false">取消</el-button>
......@@ -18,21 +53,104 @@
</template>
<script>
import fetch from '@/api/performance.js';
const { updateLogistics, getLogisticsInfo } = fetch;
export default {
props: {
data: Object,
},
data() {
return {
visible: false,
successCount: 0,
failedCount: 0,
logisticsList: [],
isEditing: false,
loading: false,
};
},
mounted() {
this.visible = true;
this.getLogisticsInfo();
},
methods: {
handleConfirm() {
console.log(1);
let logisticsCompany = {
'SF': '顺丰速递',
'STO': '中通快递'
};
this.loading = true;
updateLogistics({
companyName: logisticsCompany[this.logisticsCompanyCode],
companyCode: this.logisticsCompanyCode,
logisticsNo: this.logisticsNo,
deliveryId: this.data.deliveryId,
}).finally(() => this.loading = false);
},
handleEdit() {
this.isEditing = true;
this.logisticsCompanyCode = this.data.logisticsCompanyCode;
this.logisticsNo = this.data.logisticsNo;
},
async getLogisticsInfo() {
this.loading = true;
let { result } = await getLogisticsInfo({
companyCode: /* this.data.refundId */'YD',
logisticsNo: /* this.data.refundLogisticsNo */'4312317986451',
}).finally(() => this.loading = false);
this.logisticsList = result.traces || [];
this.logisticsList.reverse();
}
}
};
</script>
<style lang="scss" scoped>
.logistics-info {
display: flex;
&>div {
flex: 1;
}
span {
display: inline-block;
}
span + span {
margin-left: 10px;
}
}
.logistics-step {
margin-top: 24px;
background: #fafafa;
padding: 15px 0px;
h3 {
color: #303133;
font-size: 16px;
border-bottom: 1px solid #dcdfe6;
padding: 0 20px 15px 20px;
};
.logistics-list {
height: 328px;
overflow-y: auto;
padding: 20px
};
.logistics-item {
position: relative;
padding-bottom: 10px;
}
.logistics-line-step {
display: flex;
font-size: 12px;
}
.logistics-line-step .time {
margin-right: 20px;
width: 160px;
line-height: 22px;
font-weight: 500;
color: #303133;
}
.logistics-line-step .content {
color: #303133;
flex: 1;
line-height: 22px;
}
}
</style>
src/views/performance-manage/components/writeoff-dialog.vue 0 → 100644
<template>
<el-dialog :visible.sync="visible" title="自提核销" width="500px" @closed="$emit('close')">
<div v-loading="loading" class="write-off">
<span>请确认买家出示的提货码</span>
<span class="code">{{data.writeOffCode}}</span>
<span class="mt25">确认无误后，将商品交付给买家，确认核销后发货单完成</span>
</div>
<div slot="footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="handleConfirm">核销</el-button>
</div>
</el-dialog>
</template>
<script>
import fetch from '@/api/performance.js';
const { delivering } = fetch;
export default {
props: {
data: Object,
},
data() {
return {
visible: false,
loading: false,
};
},
mounted() {
this.visible = true;
},
methods: {
async handleConfirm() {
this.loading = true;
await delivering({
deliveryId: this.data.deliveryId,
}).finally(() => this.loading = false);
this.visible = false;
}
}
};
</script>
<style lang="scss" scoped>
.write-off {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 14px;
color: #303133;
.code {
margin-top:20px;
color:#F5222D;
font-size:20px;
}
}
</style>
src/views/performance-manage/delivery-detail.vue
<template>
<div style="padding:20px">
<div>
<div>核销成功</div>
<div>仓库已核销，发货单完成</div>
<div class="p20" v-loading="loading">
<div class="delivery-todo" v-if="deliveryInfo.deliveryType === 2 && deliveryInfo.deliveryFlag === 0">
<div class="status">
<i>1</i>
<span>创建发货单</span>
<div class="line"></div>
<i>2</i>
<span>门店核销</span>
<div class="time">{{ deliveryInfo.deliveryTime | formatDate }}</div>
</div>
<div class="status-text">等待核销</div>
<div class="status-description">发货单创建成功</div>
<div>
<el-button class="specter" type="primary">发货核销</el-button>
<el-button>关闭发货单</el-button>
</div>
</div>
<div class="delivery-todo" v-if="deliveryInfo.deliveryType === 1 && deliveryInfo.deliveryFlag === 0">
<div class="status">
<i>1</i>
<span>创建发货单</span>
<div class="line"></div>
<i>2</i>
<span>仓库发货</span>
<div class="time">{{ deliveryInfo.deliveryTime | formatDate }}</div>
</div>
<div class="status-text">等待仓库发货</div>
<div class="status-description">发货单创建成功</div>
<div>
<el-button class="specter" type="primary">发货核销</el-button>
<el-button>关闭发货单</el-button>
</div>
</div>
<div v-else-if="deliveryInfo.deliveryType === 2 && deliveryInfo.deliveryFlag === 1" class="delivery-complete">
<i class="el-icon-success"></i>
<p>核销成功</p>
<p>仓库已核销，发货单完成</p>
</div>
<div v-else-if="deliveryInfo.deliveryType === 1 && deliveryInfo.deliveryFlag === 1" class="delivery-complete">
<i class="el-icon-success"></i>
<p>已发货</p>
<p>仓库已发货，发货单完成</p>
</div>
<div v-else-if="deliveryInfo.deliveryFlag === 2" class="delivery-complete">
<i class="el-icon-error"></i>
<p>发货单关闭</p>
<p>仓库关闭发货单</p>
<p>{{deliveryInfo.cancelReason}}</p>
</div>
<el-divider></el-divider>
<p>
发货单信息
</p>
<ul class="order-info">
<li>发货单号：</li>
<li>履约单号：</li>
<li>会员姓名：</li>
<li>会员卡号：</li>
<li>配货方式：</li>
<li>收货信息：</li>
<ul v-if="deliveryInfo.deliveryFlag==1" class="order-info">
<li>发货单号：{{deliveryInfo.deliveryId}}</li>
<li>履约单号：{{deliveryInfo.orderId}}</li>
<li>会员姓名：{{deliveryInfo.memberName}}</li>
<li>会员卡号：{{deliveryInfo.memberCardNo}}</li>
<li>配货方式：物流发货</li>
<li>收货信息：{{deliveryInfo.consignee}} {{deliveryInfo.consigneePhone}} {{deliveryInfo.consigneeAddress}}</li>
</ul>
<el-table>
<el-table-column label="商品" width="300"></el-table-column>
<el-table-column label="商品编码"></el-table-column>
<el-table-column label="成本"></el-table-column>
<el-table-column label="数量"></el-table-column>
<el-table-column label="物流公司 | 运单号"></el-table-column>
<ul v-else class="order-info">
<li>发货单号：{{deliveryInfo.deliveryId}}</li>
<li>履约单号：{{deliveryInfo.orderId}}</li>
<li>会员姓名：{{deliveryInfo.memberName}}</li>
<li>会员卡号：{{deliveryInfo.memberCardNo}}</li>
<li>配货方式：上门自提</li>
<li>提货信息：{{deliveryInfo.consignee}} {{deliveryInfo.consigneePhone}}</li>
<li>自提点：{{deliveryInfo.pickUpPointAddress}}</li>
<li>提货地址：{{deliveryInfo.pickUpPointName}}</li>
<li>提货时间：{{deliveryInfo.pickUpStartTime | formatDate}} - {{deliveryInfo.pickUpStopTime | formatDate}}</li>
</ul>
<el-table :data="giftList">
<el-table-column label="礼品" width="300">
<template slot-scope="{ row }">
<div class="goods-info">
<img class="imgs-style" :src="row.giftImgUrl" alt="" />
<div class="goods-text">
<div class="goods-text-name">
{{row.giftName}}
</div>
<div class="goods-text-info">
<div>
<span v-for="(item, i) in JSON.parse(row.giftSkuStrand)" :key="i">{{ item.specStandardName }}：{{ item.specStandardValueName }} &nbsp;&nbsp;</span>
</div>
<div>SKU编码：{{ row.giftSkuCode }}</div>
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="礼品编码" prop="giftId"></el-table-column>
<el-table-column label="成本（元）" prop="costPrice"></el-table-column>
<el-table-column label="数量" prop="exchangeQuantity"></el-table-column>
<el-table-column label="物流公司 | 运单号">
<template slot-scope="{ row }">
<p>{{ row.logisticsCompanyName || '--' }}</p>
<p>{{ row.logisticsNo || '--' }}</p>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import fetch from '@/api/performance.js';
const { getDeliveryDetail } = fetch;
export default {
name: 'DeliveryDetail',
data() {
return {
giftList: [],
deliveryInfo: {},
loading: false,
};
},
created() {
this.getDeliveryDetail();
},
methods: {
async getDeliveryDetail() {
this.loading = true;
let { result } = await getDeliveryDetail({ deliveryId: this.$route.query.deliveryId }).finally(()=> this.loading = false);
this.deliveryInfo = result.orderDelivery,
this.giftList = [ result.orderDelivery ];
}
}
};
</script>
......@@ -36,9 +133,96 @@ export default {
.order-info {
margin: 20px 0;
display: flex;
.li {
flex-wrap: wrap;
li {
width: 33%;
margin: 10px 0
}
}
.delivery-complete {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
.el-icon-success {
color: #33AF4A;
font-size: 63px;
};
.el-icon-error {
color: #F5222D;
font-size: 63px;
}
p {
margin-top: 16px;
color: #606266;
}
p:first-of-type {
margin-top: 28px;
font-size: 24px;
color: #303133;
}
}
.delivery-todo {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.status-text {
margin-top: 50px;
color: #303133;
font-size: 24px;
font-weight: bold;
}
.status-description{
margin-top: 16px;
margin-bottom: 40px;
color: #606266;
}
.status {
width: 100%;
position: relative;
display: flex;
align-items: center;
.time {
position: absolute;
top: 30px;
left: 30px;
color: #909399;
}
.line {
height: 1px;
background-color: #2F54EB;
flex:1;
margin: 0 20px;
}
i {
display: flex;
justify-content: center;
align-items: center;
height: 24px;
width: 24px;
background-color: #2F54EB;
color: #fff;
border-radius: 50%;
flex-shrink: 0;
}
i:last-of-type {
border: 1px solid #C0C4CC;
color: #C0C4CC;
background-color: #fff;
}
span {
display: inline-block;
margin-left: 10px;
font-size: 16px;
color: #303133;
font-weight: bold;
}
span:last-of-type {
color: #909399;
font-weight: bold;
}
}
}
</style>
src/views/performance-manage/delivery.vue
<template>
<el-tabs style="padding:20px" v-model="activeIndex">
<el-tabs class="p20" v-model="activeIndex">
<el-tab-pane label="全部" :name="''">
<delivery-list :type="''"></delivery-list>
</el-tab-pane>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment