562 lines
18 KiB
JavaScript
562 lines
18 KiB
JavaScript
import * as API from 'api/virtual/orders';
|
|
import * as CONFIGS from 'api/virtual/configs';
|
|
export default {
|
|
name: 'Orders',
|
|
components: {
|
|
UiEdit: resolve => require(['views/virtual/orders/edit'], resolve),
|
|
UiDetail: resolve => require(['views/virtual/orders/detail'], resolve)
|
|
},
|
|
data() {
|
|
return {
|
|
params: {
|
|
type: 0,
|
|
sn: null,
|
|
company_name: null,
|
|
package_name: null,
|
|
order_status: null,
|
|
carrier_operator: null,
|
|
time: []
|
|
},
|
|
list_data: null,
|
|
editObj: {
|
|
show: false,
|
|
data: null
|
|
},
|
|
detailObj: {
|
|
show: false,
|
|
data: null
|
|
},
|
|
search: {
|
|
show: false
|
|
},
|
|
cancel_remark: '',
|
|
logistics: null,
|
|
logisticsParams: {
|
|
logistics_company: '',
|
|
logistics_no: ''
|
|
},
|
|
refundParams: {
|
|
channel: '',
|
|
account: '',
|
|
remark: ''
|
|
},
|
|
table_titles: [
|
|
{
|
|
title: '订单编号',
|
|
key: 'sn',
|
|
width: 280
|
|
},
|
|
{
|
|
title: '企业名称',
|
|
key: 'company_name',
|
|
width: 300
|
|
},
|
|
{
|
|
title: '运营商',
|
|
key: 'carrier_operator',
|
|
width: 90
|
|
},
|
|
{
|
|
title: '套餐名称',
|
|
key: 'package_name',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '套餐单价',
|
|
key: 'unit_price',
|
|
width: 100
|
|
},
|
|
{
|
|
title: '订单卡量',
|
|
key: '',
|
|
width: 100,
|
|
render: (h, { row, column, index }) => {
|
|
return h('span', Number(row.counts) + ' 张');
|
|
}
|
|
},
|
|
{
|
|
title: '订单金额',
|
|
key: 'custom_price',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '订单状态',
|
|
key: '',
|
|
width: 100,
|
|
render: (h, { row, column, index }) => {
|
|
let html = [];
|
|
|
|
html.push(h('Button', {
|
|
props: {
|
|
type: 'primary',
|
|
size: 'small'
|
|
}
|
|
}, row.order_status_name));
|
|
|
|
return h('div', html);
|
|
}
|
|
},
|
|
{
|
|
title: '收款状态',
|
|
key: '',
|
|
width: 100,
|
|
render: (h, { row, column, index }) => {
|
|
let status = ['info', 'success', 'error'];
|
|
|
|
let html = [];
|
|
|
|
html.push(h('Button', {
|
|
props: {
|
|
type: status[row.transaction_status],
|
|
size: 'small'
|
|
}
|
|
}, row.transaction_status_name));
|
|
|
|
return h('div', html);
|
|
}
|
|
},
|
|
{
|
|
title: '下单时间',
|
|
key: 'order_at',
|
|
width: 170
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
width: 340,
|
|
render: (h, {
|
|
row,
|
|
column,
|
|
index
|
|
}) => {
|
|
let html = [];
|
|
|
|
if (row.deleted_at) {
|
|
return h('Tag', { props: { color: 'default' } }, '该订单已被删除');
|
|
}
|
|
|
|
if (this.haveJurisdiction('show')) {
|
|
html.push(h('Button', {
|
|
props: {
|
|
type: 'dashed',
|
|
size: 'small',
|
|
disabled: false,
|
|
icon: 'md-eye'
|
|
},
|
|
class: ['btn'],
|
|
on: {
|
|
click: (event) => {
|
|
this.isShowLoading(true);
|
|
API.show(row.id).then(res => {
|
|
this.isShowLoading(false);
|
|
if (res.code === 0) {
|
|
this.detailObj = {
|
|
show: true,
|
|
data: res.data
|
|
};
|
|
}
|
|
}).catch(() => { this.isShowLoading(false); });
|
|
}
|
|
}
|
|
}, '查看'));
|
|
}
|
|
|
|
if (this.haveJurisdiction('update')) {
|
|
// 未收款 -> 已收款
|
|
if (row.transaction_status === 0) {
|
|
html.push(h('Button', {
|
|
props: {
|
|
type: 'success',
|
|
size: 'small',
|
|
disabled: false,
|
|
ghost: true
|
|
},
|
|
class: ['btn'],
|
|
on: {
|
|
click: () => {
|
|
this.$Modal.confirm({
|
|
title: '提示',
|
|
content: '请确认是否已收款?',
|
|
onOk: () => {
|
|
API.update({
|
|
transaction_status: 1
|
|
}, row.id).then(res => {
|
|
if (res.code == 0) {
|
|
this.$Message.success('修改成功');
|
|
this.request();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, '确认收款'));
|
|
}
|
|
|
|
// 已收款 -> 已退款 (要先取消订单)
|
|
if (row.transaction_status === 1 && row.order_status === 1) {
|
|
html.push(h('Button', {
|
|
props: {
|
|
type: 'error',
|
|
size: 'small',
|
|
disabled: false,
|
|
ghost: true
|
|
},
|
|
class: ['btn'],
|
|
on: {
|
|
click: () => {
|
|
this.$Modal.confirm({
|
|
title: '请填写退款信息并确认',
|
|
render: (h) => {
|
|
let refundHtml = [];
|
|
|
|
let Options = [];
|
|
Options.push(h('Option', { props: { key: 'bank', value: 'bank' } }, '银行转账'));
|
|
Options.push(h('Option', { props: { key: 'alipay', value: 'alipay' } }, '支付宝转账'));
|
|
|
|
refundHtml.push(h('Select', {
|
|
props: {
|
|
value: this.refundParams.channel,
|
|
placeholder: '请选择退款方式...'
|
|
},
|
|
class: ['umar-b10'],
|
|
on: {
|
|
'on-change': (val) => {
|
|
this.refundParams.channel = val;
|
|
}
|
|
}
|
|
}, Options));
|
|
|
|
refundHtml.push(h('Input', {
|
|
props: {
|
|
value: this.refundParams.account,
|
|
autofocus: true,
|
|
placeholder: '请输入退款账号...'
|
|
},
|
|
class: ['umar-b10'],
|
|
on: {
|
|
'input': (val) => {
|
|
this.refundParams.account = val;
|
|
}
|
|
}
|
|
}));
|
|
|
|
refundHtml.push(h('Input', {
|
|
props: {
|
|
value: this.refundParams.remark,
|
|
autofocus: true,
|
|
placeholder: '请输入退款备注...'
|
|
},
|
|
class: ['umar-b10'],
|
|
on: {
|
|
'input': (val) => {
|
|
this.refundParams.remark = val;
|
|
}
|
|
}
|
|
}));
|
|
|
|
return h('div', refundHtml);
|
|
},
|
|
onOk: () => {
|
|
if (!this.refundParams.channel) {
|
|
this.$Message.error('请选择退款方式');
|
|
return;
|
|
}
|
|
|
|
if (!this.refundParams.account) {
|
|
this.$Message.error('请输入退款账号');
|
|
return;
|
|
}
|
|
|
|
API.update({
|
|
transaction_status: 2,
|
|
extends: {
|
|
refund_channel: this.refundParams.channel,
|
|
refund_account: this.refundParams.account,
|
|
refund_remark: this.refundParams.remark
|
|
}
|
|
}, row.id).then(res => {
|
|
if (res.code == 0) {
|
|
this.$Message.success('修改成功');
|
|
this.request();
|
|
}
|
|
|
|
this.refundParams.channel = '';
|
|
this.refundParams.account = '';
|
|
this.refundParams.remark = '';
|
|
});
|
|
}
|
|
|
|
});
|
|
}
|
|
}
|
|
}, '确认退款'));
|
|
}
|
|
|
|
// 已下单 -> 取消订单 | 出库
|
|
if (row.order_status === 0) {
|
|
html.push(h('Button', {
|
|
props: {
|
|
type: 'info',
|
|
size: 'small',
|
|
disabled: false,
|
|
ghost: true
|
|
},
|
|
class: ['btn'],
|
|
on: {
|
|
click: () => {
|
|
this.$Modal.confirm({
|
|
render: (h) => {
|
|
return h('Input', {
|
|
props: {
|
|
value: this.cancel_remark,
|
|
autofocus: true,
|
|
placeholder: '...'
|
|
},
|
|
on: {
|
|
'input': (val) => {
|
|
this.cancel_remark = val;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
title: '请输入取消理由',
|
|
onOk: () => {
|
|
if (!this.cancel_remark) {
|
|
this.$Message.error('请输入取消理由');
|
|
return;
|
|
}
|
|
|
|
API.update({
|
|
order_status: 1,
|
|
extends: {
|
|
cancel_remark: this.cancel_remark
|
|
}
|
|
}, row.id).then(res => {
|
|
if (res.code == 0) {
|
|
this.$Message.success('取消成功');
|
|
this.request();
|
|
}
|
|
|
|
this.cancel_remark = '';
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, '取消订单'));
|
|
|
|
html.push(h('Button', {
|
|
props: {
|
|
type: 'warning',
|
|
size: 'small',
|
|
disabled: false,
|
|
ghost: true
|
|
},
|
|
class: ['btn'],
|
|
on: {
|
|
click: () => {
|
|
this.$Modal.confirm({
|
|
title: '提示',
|
|
content: '请确认订单是否已出库?',
|
|
onOk: () => {
|
|
API.update({
|
|
order_status: 2
|
|
}, row.id).then(res => {
|
|
if (res.code == 0) {
|
|
this.$Message.success('修改成功');
|
|
this.request();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, '确认出库'));
|
|
}
|
|
|
|
// 已出库 -> 已发货
|
|
if (row.order_status === 2) {
|
|
html.push(h('Button', {
|
|
props: {
|
|
type: 'warning',
|
|
size: 'small',
|
|
disabled: false,
|
|
ghost: true
|
|
},
|
|
class: ['btn'],
|
|
on: {
|
|
click: () => {
|
|
this.getLogistics().then(logistics => {
|
|
this.$Modal.confirm({
|
|
title: '请填写发货信息',
|
|
render: (h) => {
|
|
let Options = [];
|
|
for (const key in logistics) {
|
|
Options.push(h('Option', { props: { key: key, value: key } }, logistics[key]));
|
|
}
|
|
|
|
let Select = h('Select', {
|
|
props: {
|
|
value: this.logisticsParams.logistics_company,
|
|
placeholder: '请选择快递公司...'
|
|
},
|
|
class: ['umar-b10'],
|
|
on: {
|
|
'on-change': (val) => {
|
|
this.logisticsParams.logistics_company = val;
|
|
}
|
|
}
|
|
}, Options);
|
|
|
|
let Input = h('Input', {
|
|
props: {
|
|
value: this.logisticsParams.logistics_no,
|
|
autofocus: true,
|
|
placeholder: '请输入快递单号...'
|
|
},
|
|
on: {
|
|
'input': (val) => {
|
|
this.logisticsParams.logistics_no = val;
|
|
}
|
|
}
|
|
});
|
|
|
|
return h('div', [Select, Input]);
|
|
},
|
|
onOk: () => {
|
|
API.update({
|
|
order_status: 3,
|
|
logistics_company: this.logisticsParams.logistics_company,
|
|
logistics_no: this.logisticsParams.logistics_no
|
|
}, row.id).then(res => {
|
|
if (res.code == 0) {
|
|
this.$Message.success('修改成功');
|
|
this.request();
|
|
}
|
|
});
|
|
}
|
|
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}, '订单发货'));
|
|
}
|
|
|
|
// 已发货 -> 已签收
|
|
if (row.order_status === 3) {
|
|
html.push(h('Button', {
|
|
props: {
|
|
type: 'warning',
|
|
size: 'small',
|
|
disabled: false,
|
|
ghost: true
|
|
},
|
|
class: ['btn'],
|
|
on: {
|
|
click: () => {
|
|
this.$Modal.confirm({
|
|
title: '提示',
|
|
content: '请确认订单是否确认签收?',
|
|
onOk: () => {
|
|
API.update({
|
|
order_status: 4
|
|
}, row.id).then(res => {
|
|
if (res.code == 0) {
|
|
this.$Message.success('修改成功');
|
|
this.request();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, '确认签收'));
|
|
}
|
|
}
|
|
|
|
if (html.length) {
|
|
return h('div', html);
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
},
|
|
created() {
|
|
this.index(1);
|
|
},
|
|
methods: {
|
|
/**
|
|
* [index 列表]
|
|
* @param {Number} page [description]
|
|
* @return {[type]} [description]
|
|
*/
|
|
index(page = 1) {
|
|
this.params.type = Number(this.$route.params.type);
|
|
let data = this.searchDataHandle({}, { page }, this.params);
|
|
this.isShowLoading(true);
|
|
API.index(data).then(res => {
|
|
this.isShowLoading(false);
|
|
if (res.code == 0) {
|
|
this.list_data = res.data;
|
|
}
|
|
}).catch(() => {
|
|
this.isShowLoading(false);
|
|
});
|
|
},
|
|
|
|
/**
|
|
* [openEdit 打开编辑弹窗]
|
|
* @return {[type]} [description]
|
|
*/
|
|
openEdit(bool, data = null) {
|
|
this.editObj = {
|
|
show: bool,
|
|
data
|
|
};
|
|
},
|
|
|
|
/**
|
|
* [request 刷新]
|
|
* @return {[type]} [description]
|
|
*/
|
|
request() {
|
|
const result = this.list_data;
|
|
let page = result.current_page;
|
|
|
|
if (result && result.data.length == 1) {
|
|
page = this.returnPage(result.total, result.current_page, result.per_page);
|
|
}
|
|
|
|
this.index(page);
|
|
},
|
|
|
|
resetSearch() {
|
|
for (let k in this.params) {
|
|
if (k === 'time') {
|
|
this.params[k] = [];
|
|
} else {
|
|
this.params[k] = null;
|
|
}
|
|
}
|
|
this.index(1);
|
|
},
|
|
getLogistics() {
|
|
return new Promise(resolve => {
|
|
if (this.logistics) {
|
|
resolve(this.logistics);
|
|
} else {
|
|
CONFIGS.get('logistics').then(res => {
|
|
if (res.code === 0) {
|
|
this.logistics = res.data;
|
|
}
|
|
resolve(this.logistics);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|