625 lines
17 KiB
JavaScript
625 lines
17 KiB
JavaScript
import { mapGetters } from 'vuex';
|
|
import * as API from 'api/virtual/orders';
|
|
|
|
export default {
|
|
components: {
|
|
BTable: resolve => require(['components/table'], resolve)
|
|
},
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
source: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
type: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
orderObj: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
},
|
|
computed: {
|
|
filterTotal() {
|
|
return this.filterOrders.reduce((acc, cur) => {
|
|
return acc + cur.counts - cur.shipments;
|
|
}, 0);
|
|
},
|
|
total() {
|
|
return this.orders.reduce((acc, cur) => {
|
|
return acc + cur.counts;
|
|
}, 0);
|
|
},
|
|
...mapGetters(['orders', 'cards', 'selected', 'selectedMapped', 'counts', 'getFilterUsedCards', 'getSelectedByOrderId', 'relations', 'relationObj', 'real_companies', 'real_packages'])
|
|
},
|
|
data() {
|
|
return {
|
|
my_show: false,
|
|
loading: false,
|
|
orderLoading: false,
|
|
cardLoading: false,
|
|
page: {
|
|
total: 0,
|
|
limit: 10,
|
|
page: 1
|
|
},
|
|
params: {
|
|
company_name: '',
|
|
package_name: '',
|
|
carrier_operator: '',
|
|
time: [
|
|
this.moment().subtract('2', 'months').startOf('month').format('YYYY-MM-DD'),
|
|
this.moment().subtract('2', 'months').endOf('month').format('YYYY-MM-DD')
|
|
],
|
|
used: '',
|
|
sim: ''
|
|
},
|
|
sortChecked: false,
|
|
filterOrders: [],
|
|
showOrders: [],
|
|
showCards: [],
|
|
orderColumns: [
|
|
{
|
|
width: 60,
|
|
align: "center",
|
|
renderHeader: (h, context) => {
|
|
let value = false;
|
|
let indeterminate = false;
|
|
|
|
value = !!this.counts;
|
|
indeterminate = this.total !== this.counts;
|
|
|
|
return h("Checkbox", {
|
|
props: {
|
|
indeterminate: value && indeterminate,
|
|
value: value
|
|
},
|
|
on: {
|
|
input: value => {
|
|
let order_id = this.showOrders.filter(el => {
|
|
return el.shipments !== el.counts;
|
|
}).map(item => {
|
|
return item.id;
|
|
});
|
|
|
|
this.handleSelectOrder(order_id, value);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
render: (h, context) => {
|
|
let select = this.getSelectedByOrderId(context.row.id);
|
|
|
|
let value = !!select.length;
|
|
|
|
let indeterminate = select.length && context.row.counts !== select.reduce((acc, cur) => {
|
|
return acc + cur.counts;
|
|
}, 0);
|
|
|
|
return h("Checkbox", {
|
|
props: {
|
|
indeterminate: value && !!indeterminate,
|
|
value: value,
|
|
disabled: context.row.counts === context.row.shipments
|
|
},
|
|
on: {
|
|
input: value => {
|
|
this.handleSelectOrder(context.row.id, value);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
{
|
|
title: "订单编号",
|
|
key: "sn",
|
|
width: 220,
|
|
sortable: true
|
|
},
|
|
|
|
{
|
|
title: "企业名称",
|
|
key: "company_name",
|
|
width: 210,
|
|
sortable: true
|
|
},
|
|
{
|
|
title: "运营商",
|
|
key: "carrier_operator_name",
|
|
width: 80
|
|
},
|
|
{
|
|
title: "套餐名称",
|
|
key: "package_name",
|
|
width: 150,
|
|
sortable: true
|
|
},
|
|
{
|
|
title: "支付方式",
|
|
key: "pay_channel_name",
|
|
width: 90
|
|
},
|
|
{
|
|
title: "数量",
|
|
key: "counts",
|
|
width: 100,
|
|
sortable: true
|
|
},
|
|
{
|
|
title: "已用数量",
|
|
key: "shipments",
|
|
width: 90
|
|
},
|
|
{
|
|
title: "订单金额",
|
|
key: "total_price",
|
|
width: 120,
|
|
sortable: true
|
|
},
|
|
|
|
{
|
|
title: "订单时间",
|
|
key: "order_at",
|
|
width: 150,
|
|
sortable: true
|
|
},
|
|
{
|
|
title: "所需卡量",
|
|
key: "",
|
|
width: 150,
|
|
fixed: 'right',
|
|
render: (h, context) => {
|
|
let select = this.getSelectedByOrderId(context.row.id);
|
|
|
|
let value = select.length ? select.reduce((acc, cur) => {
|
|
return acc + cur.counts;
|
|
}, 0) : 0;
|
|
|
|
return h("InputNumber", {
|
|
props: {
|
|
max: context.row.counts - context.row.shipments,
|
|
min: 0,
|
|
value: value,
|
|
precision: 0
|
|
},
|
|
on: {
|
|
input: value => {
|
|
let bool = !!value;
|
|
this.handleSelectOrder(context.row.id, bool, value);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
],
|
|
cardColumns: [
|
|
{
|
|
width: 60,
|
|
align: "center",
|
|
renderHeader: (h, context) => {
|
|
let value = false;
|
|
let indeterminate = false;
|
|
|
|
value = !!this.selectedMapped.length;
|
|
|
|
indeterminate = this.selectedMapped.length && this.selectedMapped.length !== this.showCards.length;
|
|
return h("Checkbox", {
|
|
props: {
|
|
indeterminate: value && indeterminate,
|
|
value: value
|
|
},
|
|
on: {
|
|
input: value => {
|
|
if (value) {
|
|
let cards = this.getFilterUsedCards(this.showCards);
|
|
this.$store.dispatch('pushSelected', cards);
|
|
} else {
|
|
this.$store.dispatch('removeSelected', this.showCards);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
render: (h, context) => {
|
|
let value = this.selectedMapped.indexOf(context.row._rowIndex) !== -1;
|
|
return h("Checkbox", {
|
|
props: {
|
|
value: value,
|
|
disabled: !!context.row.virtual_order_id
|
|
},
|
|
on: {
|
|
input: value => {
|
|
let action = value ? 'pushSelected' : 'removeSelected';
|
|
this.$store.dispatch(action, [context.row]);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
{
|
|
title: "SIM",
|
|
key: "sim",
|
|
width: 135,
|
|
sortable: true
|
|
|
|
},
|
|
{
|
|
title: "状态",
|
|
key: "",
|
|
width: 100,
|
|
render: (h, { row, column, index }) => {
|
|
return h(
|
|
"Tag", {
|
|
props: {
|
|
color: row.virtual_order_id ? "error" : "primary"
|
|
}
|
|
},
|
|
row.virtual_order_id ? "已使用" : "未使用"
|
|
);
|
|
}
|
|
},
|
|
{
|
|
title: "数量",
|
|
key: "counts",
|
|
width: 60
|
|
},
|
|
{
|
|
title: "VD企业",
|
|
key: "company_name",
|
|
width: 210,
|
|
sortable: true
|
|
},
|
|
{
|
|
title: "VD套餐",
|
|
key: "package_name",
|
|
width: 150,
|
|
sortable: true
|
|
}
|
|
]
|
|
};
|
|
},
|
|
watch: {
|
|
show(bool) {
|
|
this.my_show = bool;
|
|
this.$store.commit('SET_CARDS', []);
|
|
if (bool) {
|
|
this.index();
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
index(force = 0) {
|
|
if (this.params.type != this.type) {
|
|
this.params.type = this.type;
|
|
this.$store.dispatch('initOrder');
|
|
}
|
|
|
|
let params = this.parseParams({ times: this.params.times, type: this.params.type });
|
|
|
|
if (force) {
|
|
this.$store.commit('SET_ORDER_PARAMS', {});
|
|
params.skipCache = 1;
|
|
}
|
|
|
|
this.orderLoading = true;
|
|
|
|
if (this.params.sim !== '') {
|
|
params.sim = this.params.sim;
|
|
|
|
this.cardLoading = true;
|
|
this.$store.dispatch("getCardsByParams", params).then((cards) => {
|
|
this.showCards = cards;
|
|
this.cardLoading = false;
|
|
}).catch(() => {
|
|
this.cardLoading = false;
|
|
});
|
|
}
|
|
|
|
this.$store.dispatch("getOrders", params).then(() => {
|
|
if (this.relationObj && this.relationObj.virtual_company_id) {
|
|
this.sortChecked = true;
|
|
this.sortOrders('updated_at');
|
|
} else {
|
|
this.sortChecked = false;
|
|
this.sortOrders('order_at');
|
|
}
|
|
|
|
this.changePage(1);
|
|
this.orderLoading = false;
|
|
}).catch(() => {
|
|
this.orderLoading = false;
|
|
});
|
|
},
|
|
changeSortChecked(value) {
|
|
let action = value ? 'updated_at' : 'order_at';
|
|
this.sortOrders(action);
|
|
},
|
|
changeLimit(limit) {
|
|
this.page.limit = limit;
|
|
this.changePage(1);
|
|
},
|
|
changePage(page) {
|
|
this.page.page = page;
|
|
|
|
this.filterOrders = JSON.parse(JSON.stringify(this.orders));
|
|
|
|
if (this.params.company_name !== '' && this.params.company_name !== undefined) {
|
|
this.filterOrders = this.filterOrders.filter(el => {
|
|
return el.company_name.indexOf(this.params.company_name) !== -1;
|
|
});
|
|
}
|
|
|
|
if (this.params.package_name !== '' && this.params.package_name !== undefined) {
|
|
this.filterOrders = this.filterOrders.filter(el => {
|
|
return el.package_name.indexOf(this.params.package_name) !== -1;
|
|
});
|
|
}
|
|
|
|
if (this.params.carrier_operator !== '' && this.params.carrier_operator !== undefined) {
|
|
this.filterOrders = this.filterOrders.filter(el => {
|
|
return el.carrier_operator === this.params.carrier_operator;
|
|
});
|
|
}
|
|
|
|
if (this.params.used !== '' && this.params.used !== undefined) {
|
|
this.filterOrders = this.filterOrders.filter(el => {
|
|
switch (this.params.used) {
|
|
case 0:
|
|
return el.shipments === 0;
|
|
case 1:
|
|
return el.shipments > 0 && el.shipments !== el.counts;
|
|
case 2:
|
|
return el.shipments > 0 && el.shipments === el.counts;
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
|
|
this.page.total = this.filterOrders.length;
|
|
|
|
this.showOrders = this.filterOrders.slice((page - 1) * this.page.limit, page * this.page.limit);
|
|
},
|
|
handleOrderRowDblclick(row) {
|
|
this.getCards(row.id);
|
|
},
|
|
visibleChange(bool) {
|
|
if (!bool) {
|
|
this.$emit("update:show", false);
|
|
}
|
|
},
|
|
close() {
|
|
this.my_show = false;
|
|
this.$store.commit('SET_RELATION_OBJ', {});
|
|
},
|
|
clear() {
|
|
this.$store.dispatch('initOrder');
|
|
},
|
|
clearSelect() {
|
|
this.$store.dispatch('setSelected', []);
|
|
},
|
|
cannel() {
|
|
this.clear();
|
|
this.close();
|
|
},
|
|
resetSearch() {
|
|
for (let k in this.params) {
|
|
if (k === 'time') {
|
|
this.params[k] = [
|
|
this.moment().subtract('2', 'months').startOf('month').format('YYYY-MM-DD'),
|
|
this.moment().subtract('2', 'months').endOf('month').format('YYYY-MM-DD')
|
|
];
|
|
} else {
|
|
this.params[k] = '';
|
|
}
|
|
}
|
|
|
|
this.$store.dispatch('initOrder');
|
|
this.index(1);
|
|
},
|
|
getCards(order_id) {
|
|
this.cardLoading = true;
|
|
return new Promise((resolve) => {
|
|
let params = { order_id: order_id, type: this.type };
|
|
this.$store.dispatch('getCards', params).then((cards) => {
|
|
this.cardLoading = false;
|
|
this.showCards = cards;
|
|
// 跳转到选择的行
|
|
// this.$nextTick(() => {
|
|
// if (typeof order_id !== 'object') {
|
|
// let index = this.showCards.findIndex(el => { return el.order_id === order_id; });
|
|
// let toIndex = index - 5 > 0 ? index - 5 : 0;
|
|
// this.$refs.cardSelection.scrollToRow(toIndex);
|
|
// }
|
|
// });
|
|
resolve(cards);
|
|
}).catch((err) => {
|
|
this.cardLoading = false;
|
|
});
|
|
});
|
|
},
|
|
handleSelectOrder(order_id, value, counts = null) {
|
|
this.$store.dispatch('removeSelectedByOrderId', order_id);
|
|
|
|
if (!value) {
|
|
return;
|
|
}
|
|
|
|
this.getCards(order_id).then((cards) => {
|
|
cards = this.getFilterUsedCards(cards);
|
|
|
|
if (!cards.length) {
|
|
return this.$Message.error('所有卡都不可使用');
|
|
}
|
|
|
|
cards.sort((a, b) => {
|
|
return a.counts < b.counts ? -1 : (a.counts > b.counts ? 1 : 0);
|
|
});
|
|
|
|
let arr = cards.map(item => {
|
|
return JSON.parse(JSON.stringify(item));
|
|
});
|
|
|
|
if (counts !== null) {
|
|
let acc = 0;
|
|
|
|
arr = arr.filter(item => {
|
|
acc += item.counts;
|
|
return acc <= counts;
|
|
});
|
|
}
|
|
|
|
this.$store.dispatch('pushSelected', arr);
|
|
});
|
|
},
|
|
order() {
|
|
if (this.selected.findIndex(el => { return el.virtual_order_id !== 0; }) !== -1) {
|
|
return this.$Message.error('所选数据存在已使用的卡');
|
|
}
|
|
|
|
if (this.type !== 0) {
|
|
let group = {};
|
|
|
|
for (let index = 0; index < this.selectedMapped.length; index++) {
|
|
const element = this.selected[index];
|
|
let key = element.company_id + '_' + element.package_id;
|
|
|
|
if (group.hasOwnProperty(key)) {
|
|
group[key].push(element);
|
|
} else {
|
|
group[key] = [element];
|
|
}
|
|
}
|
|
|
|
if (Object.keys(group).length >= 1) {
|
|
this.$store.commit('SET_ORDER_GROUP', group);
|
|
}
|
|
}
|
|
|
|
this.$emit('create-order');
|
|
},
|
|
store() {
|
|
if (!this.orderObj) {
|
|
return this.$Message.error('订单错误');
|
|
}
|
|
|
|
if (this.orderObj.counts !== this.counts) {
|
|
return this.$Message.error('选择的卡数量不正确');
|
|
}
|
|
|
|
let params = {};
|
|
params.type = this.type;
|
|
params.selected = this.selected.map(el => {
|
|
return { order_id: el.order_id, counts: el.counts, sim: el.sim };
|
|
});
|
|
|
|
this.loading = true;
|
|
|
|
// 编辑
|
|
API.update(params, this.orderObj.id).then(res => {
|
|
this.loading = false;
|
|
if (res.code == 0) {
|
|
this.$emit('store-success');
|
|
this.$Message.success('操作成功');
|
|
this.clear();
|
|
}
|
|
}).catch(err => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
sort() {
|
|
this.showCards = this.cards;
|
|
|
|
let mapped = this.orders.map((el, i) => { return { index: i, id: el.id }; });
|
|
|
|
mapped.sort((a, b) => {
|
|
let ac = this.getSelectedByOrderId(a.id).reduce((acc, cur) => { return acc + cur.counts; }, 0);
|
|
let bc = this.getSelectedByOrderId(b.id).reduce((acc, cur) => { return acc + cur.counts; }, 0);
|
|
return ac > bc ? -1 : (ac < bc ? 1 : 0);
|
|
});
|
|
|
|
let orders = mapped.map(el => {
|
|
return this.orders[el.index];
|
|
});
|
|
|
|
this.$store.commit('SET_REAL_ORDERS', orders);
|
|
|
|
this.changePage(1);
|
|
},
|
|
sortOrders(sortBy = 'times') {
|
|
let mapped = [];
|
|
|
|
if (sortBy === 'order_at') {
|
|
mapped = this.orders.map((el, i) => {
|
|
return { index: i, order_at: el.order_at };
|
|
});
|
|
|
|
mapped.sort((a, b) => {
|
|
if (a.shipments === a.counts) {
|
|
return -1;
|
|
}
|
|
|
|
return a.order_at > b.order_at ? -1 : (a.order_at < b.order_at ? 1 : 0);
|
|
});
|
|
} else {
|
|
let virtual_company_id = this.relationObj.virtual_company_id;
|
|
let virtual_package_id = this.relationObj.virtual_package_id;
|
|
|
|
let relations = this.relations;
|
|
|
|
let sortRules = relations.filter(el => {
|
|
if (virtual_company_id == el.virtual_company_id || virtual_package_id == el.virtual_package_id) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
});
|
|
|
|
mapped = this.orders.map((el, i) => {
|
|
let display = -1;
|
|
|
|
for (let index = 0; index < sortRules.length; index++) {
|
|
const element = sortRules[index];
|
|
if (element.real_company_id == el.company_id && element.real_package_id == el.package_id) {
|
|
display = element[sortBy];
|
|
} else if (element.real_company_id == el.company_id) {
|
|
display = 0;
|
|
}
|
|
}
|
|
|
|
return { index: i, display };
|
|
});
|
|
|
|
mapped.sort((a, b) => {
|
|
return a.display > b.display ? -1 : (a.display < b.display ? 1 : 0);
|
|
});
|
|
}
|
|
|
|
let orders = mapped.map(el => {
|
|
return this.orders[el.index];
|
|
});
|
|
|
|
this.$store.commit('SET_REAL_ORDERS', orders);
|
|
|
|
this.changePage(1);
|
|
},
|
|
selectAll() {
|
|
let order_id = this.filterOrders.filter(el => {
|
|
return el.shipments !== el.counts;
|
|
}).map(item => {
|
|
return item.id;
|
|
});
|
|
|
|
if (this.filterTotal > 50000) {
|
|
return this.$Message.error('当前请求数据量过大，请筛选过滤后查询');
|
|
}
|
|
|
|
this.handleSelectOrder(order_id, true);
|
|
}
|
|
}
|
|
};
|