流量池

This commit is contained in:
邓皓元 2019-04-13 19:47:33 +08:00
parent 6f71277e9a
commit ba10fb5274
4 changed files with 335 additions and 261 deletions

View File

@ -1,19 +1,23 @@
import * as API from 'api/virtual/flow_pools'; import * as API from "api/virtual/flow_pools";
export default { export default {
name: 'FlowPools', name: "FlowPools",
components: { components: {
UiEdit: resolve => require(['views/virtual/flow_pools/edit'], resolve), UiEdit: resolve => require(["views/virtual/flow_pools/edit"], resolve),
UiDetail: resolve => require(['views/virtual/flow_pools/detail'], resolve), UiDetail: resolve => require(["views/virtual/flow_pools/detail"], resolve),
UiSetting: resolve => require(['views/virtual/flow_pools/setting'], resolve), UiSetting: resolve =>
UiFlows: resolve => require(['views/virtual/flow_pools/flows'], resolve) require(["views/virtual/flow_pools/setting"], resolve),
UiFlows: resolve => require(["views/virtual/flow_pools/flows"], resolve)
}, },
data() { data() {
return { return {
options: { options: {
company_name: '', company_name: "",
name: '', name: "",
carrier_operator: '', carrier_operator: "",
month: this.moment().subtract('1', 'months').startOf('month').format('YYYY-MM') month: this.moment()
.subtract("1", "months")
.startOf("month")
.format("YYYY-MM")
}, },
list_data: null, list_data: null,
reals: [], reals: [],
@ -37,230 +41,265 @@ export default {
show: true show: true
}, },
importModel: false, importModel: false,
table_titles: [{ table_titles: [
title: 'ID', {
key: 'id', title: "ID",
width: 75 key: "id",
}, width: 75
{ },
title: '名称', {
key: '', title: "名称",
width: 110, key: "",
render: (h, { width: 110,
row, render: (h, { row, column, index }) => {
column, if (row.setting_status) {
index return h("span", row.name);
}) => {
if (row.setting_status) {
return h('span', row.name);
}
return h('Tooltip', {
props: {
theme: 'light'
} }
}, [
h('Badge', { return h(
props: { "Tooltip",
status: 'error' {
} props: {
}), theme: "light"
h('span', row.name), }
h('div', { },
slot: 'content' [
}, [ h("Badge", {
h('p', '当前月份计费规则未设置'), props: {
h('p', '或套餐保底流量未设置') status: "error"
]) }
]); }),
} h("span", row.name),
}, h(
{ "div",
title: '运营商', {
key: 'carrier_operator_name', slot: "content"
width: 80 },
}, [
{ h("p", "当前月份计费规则未设置"),
title: '客户名称', h("p", "或套餐保底流量未设置")
key: 'company_name', ]
width: 300 )
}, ]
{ );
title: '保底流量', }
key: 'minimum_flows', },
width: 110 {
}, title: "运营商",
{ key: "carrier_operator_name",
title: '超出流量', width: 80
key: 'excess_flows', },
width: 110 {
}, title: "客户名称",
{ key: "company_name",
title: '保底收入(元)', width: 300
key: 'minimum_price', },
width: 150 {
}, title: "保底流量",
{ key: "minimum_flows",
title: '超出收入(元)', width: 110
key: 'excess_price', },
width: 150 {
}, title: "超出流量",
{ key: "excess_flows",
title: '收费用户数', width: 110
key: 'members', },
width: 110 {
}, title: "保底收入(元)",
{ key: "minimum_price",
title: '总收入(元)', width: 150
key: 'total_price', },
width: 150 {
}, title: "超出收入(元)",
{ key: "excess_price",
title: '状态', width: 150
key: '', },
width: 100, {
render: (h, { title: "收费用户数",
row, key: "members",
column, width: 110
index },
}) => { {
return h('Tag', { title: "总收入(元)",
props: { key: "total_price",
color: row.status ? 'error' : 'primary' width: 150
},
{
title: "状态",
key: "",
width: 100,
render: (h, { row, column, index }) => {
return h(
"Tag",
{
props: {
color: row.status ? "error" : "primary"
}
},
row.status ? "已禁用" : "启用中"
);
}
},
{
title: "更新时间",
key: "created_at",
width: 170
},
{
title: "操作",
key: "action",
width: 450,
render: (h, { row, column, index }) => {
let html = [];
if (row.deleted_at) {
return h(
"Tag",
{
props: {
color: "default"
}
},
"该流量池已被删除"
);
} }
}, row.status ? '已禁用' : '启用中');
}
},
{
title: '更新时间',
key: 'created_at',
width: 170
},
{
title: '操作',
key: 'action',
width: 450,
render: (h, {
row,
column,
index
}) => {
let html = [];
if (row.deleted_at) { if (this.haveJurisdiction("show")) {
return h('Tag', { html.push(
props: { h(
color: 'default' "Button",
} {
}, '该流量池已被删除'); props: {
} type: "success",
size: "small",
if (this.haveJurisdiction('show')) { disabled: false,
html.push(h('Button', { icon: "md-eye"
props: { },
type: 'success', class: ["btn"],
size: 'small', on: {
disabled: false, click: event => {
icon: 'md-eye' this.detailObj = {
}, show: true,
class: ['btn'], data: row
on: { };
click: (event) => { }
this.detailObj = {
show: true,
data: row
};
}
}
}, '查看'));
}
if (this.haveJurisdiction('update')) {
html.push(h('Button', {
props: {
type: 'primary',
size: 'small',
disabled: false,
icon: 'md-create'
},
class: ['btn'],
on: {
click: (event) => {
this.openEdit(true, row);
}
}
}, '编辑'));
}
if (this.haveJurisdiction('update')) {
html.push(h('Button', {
props: {
type: 'info',
size: 'small',
disabled: false,
icon: 'md-card'
},
class: ['btn'],
on: {
click: (event) => {
this.openFlows(true, row);
}
}
}, '数据设置'));
}
if (this.haveJurisdiction('update')) {
html.push(h('Button', {
props: {
type: 'warning',
size: 'small',
disabled: false,
icon: 'logo-yen'
},
class: ['btn'],
on: {
click: (event) => {
this.openSetting(true, row);
}
}
}, '计费规则'));
}
if (this.haveJurisdiction('destroy')) {
html.push(h('Button', {
props: {
type: 'error',
size: 'small',
disabled: false,
icon: 'md-trash'
},
class: ['btn'],
on: {
click: () => {
this.$Modal.confirm({
title: '提示',
content: '删除后该流量池不可使用,请谨慎操作',
onOk: () => {
API.destroy({
ids: row.id
}).then(res => {
if (res.code == 0) {
this.$Message.success('删除成功');
this.request();
}
});
} }
}); },
} "查看"
} )
}, '删除')); );
} }
if (html.length) { if (this.haveJurisdiction("update")) {
return h('div', html); html.push(
h(
"Button",
{
props: {
type: "primary",
size: "small",
disabled: false,
icon: "md-create"
},
class: ["btn"],
on: {
click: event => {
this.openEdit(true, row);
}
}
},
"编辑"
)
);
}
if (this.haveJurisdiction("update")) {
html.push(
h(
"Button",
{
props: {
type: "info",
size: "small",
disabled: false,
icon: "md-card"
},
class: ["btn"],
on: {
click: event => {
this.openFlows(true, row);
}
}
},
"数据设置"
)
);
}
if (this.haveJurisdiction("update")) {
html.push(
h(
"Button",
{
props: {
type: "warning",
size: "small",
disabled: false,
icon: "logo-yen"
},
class: ["btn"],
on: {
click: event => {
this.openSetting(true, row);
}
}
},
"计费规则"
)
);
}
if (this.haveJurisdiction("destroy")) {
html.push(
h(
"Button",
{
props: {
type: "error",
size: "small",
disabled: false,
icon: "md-trash"
},
class: ["btn"],
on: {
click: () => {
this.$Modal.confirm({
title: "提示",
content: "删除后该流量池不可使用,请谨慎操作",
onOk: () => {
API.destroy({
ids: row.id
}).then(res => {
if (res.code == 0) {
this.$Message.success("删除成功");
this.request();
}
});
}
});
}
}
},
"删除"
)
);
}
if (html.length) {
return h("div", html);
}
} }
} }
}
] ]
}; };
}, },
@ -274,32 +313,42 @@ export default {
* @return {[type]} [description] * @return {[type]} [description]
*/ */
index(page = 1) { index(page = 1) {
let data = this.searchDataHandle({}, { let data = this.searchDataHandle(
page {},
}, this.params()); {
page,
limit: 5
},
this.params()
);
this.isShowLoading(true); this.isShowLoading(true);
API.index(data).then(res => { API.index(data)
this.isShowLoading(false); .then(res => {
if (res.code == 0) { this.isShowLoading(false);
this.list_data = res.data; if (res.code == 0) {
} this.list_data = res.data;
}).catch(() => { }
this.isShowLoading(false); })
}); .catch(() => {
this.isShowLoading(false);
});
}, },
params() { params() {
if (!this.options.month) { if (!this.options.month) {
this.options.month = this.moment().subtract('1', 'months').startOf('month').format('YYYY-MM'); this.options.month = this.moment()
.subtract("1", "months")
.startOf("month")
.format("YYYY-MM");
} }
let params = { let params = {
name: this.options.name, name: this.options.name,
company_name: this.options.company_name, company_name: this.options.company_name,
carrier_operator: this.options.carrier_operator, carrier_operator: this.options.carrier_operator,
month: this.moment(this.options.month).format('YYYY-MM'), month: this.moment(this.options.month).format("YYYY-MM"),
orderBy: 'id', orderBy: "id",
sortedBy: 'asc' sortedBy: "asc"
}; };
return params; return params;
@ -347,7 +396,11 @@ export default {
let page = result.current_page; let page = result.current_page;
if (this.list_data.data.length == 1) { if (this.list_data.data.length == 1) {
page = this.returnPage(result.total, result.current_page, result.per_page); page = this.returnPage(
result.total,
result.current_page,
result.per_page
);
} }
this.index(page); this.index(page);
@ -355,10 +408,13 @@ export default {
resetSearch() { resetSearch() {
for (let k in this.options) { for (let k in this.options) {
if (k === 'month') { if (k === "month") {
this.options[k] = this.moment().subtract('1', 'months').startOf('month').format('YYYY-MM'); this.options[k] = this.moment()
.subtract("1", "months")
.startOf("month")
.format("YYYY-MM");
} else { } else {
this.options[k] = ''; this.options[k] = "";
} }
} }
@ -369,22 +425,25 @@ export default {
this.isShowLoading(true); this.isShowLoading(true);
API.exportList(data).then(res => { API.exportList(data)
if (res.code === 0) { .then(res => {
if (res.data) { if (res.code === 0) {
this.downloadFile(res.data); if (res.data) {
} else { this.downloadFile(res.data);
this.$Modal.success({ } else {
title: '提示', this.$Modal.success({
content: '当前导出数据量大,已进入后台队列导出模式,请稍后至导出列表查看下载。' title: "提示",
}); content:
"当前导出数据量大,已进入后台队列导出模式,请稍后至导出列表查看下载。"
});
}
} }
}
this.isShowLoading(false); this.isShowLoading(false);
}).catch(() => { })
this.isShowLoading(false); .catch(() => {
}); this.isShowLoading(false);
});
}, },
importFlows(file) { importFlows(file) {
this.isShowLoading(true); this.isShowLoading(true);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=\favicon.ico><script src=\config.js></script><title></title><link href=/css/chunk-4443c580.c09b5b64.css rel=prefetch><link href=/css/chunk-996b1e80.5cadf3d0.css rel=prefetch><link href=/js/chunk-00ae0766.d130b440.js rel=prefetch><link href=/js/chunk-07a274ec.55e1b3b0.js rel=prefetch><link href=/js/chunk-4443c580.754ef273.js rel=prefetch><link href=/js/chunk-996b1e80.92847c4e.js rel=prefetch><link href=/css/app.8e379248.css rel=preload as=style><link href=/css/chunk-vendors.3c3b2e85.css rel=preload as=style><link href=/js/app.63b37964.js rel=preload as=script><link href=/js/chunk-vendors.ed6443e8.js rel=preload as=script><link href=/css/chunk-vendors.3c3b2e85.css rel=stylesheet><link href=/css/app.8e379248.css rel=stylesheet></head><body><noscript><strong>很抱歉如果没有启用JavaScript程序不能正常工作若要继续使用请启用它。</strong></noscript><div id=app></div><script src=/js/chunk-vendors.ed6443e8.js></script><script src=/js/app.63b37964.js></script></body></html> <!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=\favicon.ico><script src=\config.js></script><title></title><link href=/css/chunk-4443c580.c09b5b64.css rel=prefetch><link href=/css/chunk-996b1e80.5cadf3d0.css rel=prefetch><link href=/js/chunk-00ae0766.d130b440.js rel=prefetch><link href=/js/chunk-07a274ec.55e1b3b0.js rel=prefetch><link href=/js/chunk-4443c580.0ce681dd.js rel=prefetch><link href=/js/chunk-996b1e80.92847c4e.js rel=prefetch><link href=/css/app.8e379248.css rel=preload as=style><link href=/css/chunk-vendors.3c3b2e85.css rel=preload as=style><link href=/js/app.02a931c9.js rel=preload as=script><link href=/js/chunk-vendors.ed6443e8.js rel=preload as=script><link href=/css/chunk-vendors.3c3b2e85.css rel=stylesheet><link href=/css/app.8e379248.css rel=stylesheet></head><body><noscript><strong>很抱歉如果没有启用JavaScript程序不能正常工作若要继续使用请启用它。</strong></noscript><div id=app></div><script src=/js/chunk-vendors.ed6443e8.js></script><script src=/js/app.02a931c9.js></script></body></html>