Skip to content

A
apaas-ui
Commit ac05c908 authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

我的服务页面优化

parent 40ef749f
Hide whitespace changes
Inline Side-by-side
Showing with 691 additions and 279 deletions
src/components/apass-dialog.vue
View file @ ac05c908
...@@ -7,27 +7,35 @@ ...@@ -7,27 +7,35 @@
top="25vh" top="25vh"
> >
<h3 class="dialog_title" slot="title"> <h3 class="dialog_title" slot="title">
<span v-text="title"></span> <span v-text="title || '提示'"></span>
</h3> </h3>
<div v-if="$slots.content" class="dialog_content appas_table"> <div class="dialog_content appas_table" v-if="$slots.content">
<slot name="content"></slot> <slot name="content"></slot>
</div> </div>
<p v-else class="dialog_msg" v-text="msg"></p> <p class="dialog_msg" v-html="msg" v-else></p>
<div <div
v-if="$slots.action"
slot="footer" slot="footer"
class="dialog_action apass_button" class="dialog_action apass_button"
v-if="$slots.action"
> >
<slot name="action"></slot> <slot name="action"></slot>
</div> </div>
<div v-else slot="footer" class="dialog_action apass_button"> <div slot="footer" class="dialog_action apass_button" v-else>
<el-button type="defalut" size="mini" @click="hide"> <el-button
取消 type="defalut"
size="mini"
v-text="cancelText || '取消'"
@click="hide"
>
</el-button> </el-button>
<el-button type="primary" size="mini" @click="dialogSubmit"> <el-button
确定 type="primary"
size="mini"
v-text="sunbmitText || '确定'"
@click="dialogSubmit"
>
</el-button> </el-button>
</div> </div>
</el-dialog> </el-dialog>
...@@ -40,16 +48,28 @@ export default { ...@@ -40,16 +48,28 @@ export default {
props: { props: {
width: { width: {
type: String, type: String,
default: () => "400px", default: () => "420px",
}, },
title: { title: {
type: String, type: String,
default: () => "提示", default: () => "",
}, },
msg: { msg: {
type: String, type: String,
default: () => "", default: () => "",
}, },
cancelText: {
type: String,
default: () => "",
},
sunbmitText: {
type: String,
default: () => "",
},
submit: {
type: Function,
default: () => null,
},
}, },
data: () => ({ data: () => ({
showDialog: false, showDialog: false,
...@@ -62,7 +82,11 @@ export default { ...@@ -62,7 +82,11 @@ export default {
this.showDialog = false; this.showDialog = false;
}, },
dialogSubmit() { dialogSubmit() {
this.$emit("submit"); if (typeof this.submit === "function") {
this.submit();
} else {
this.$emit("submit");
}
this.hide(); this.hide();
}, },
}, },
......
src/components/apass-list.vue
View file @ ac05c908
...@@ -6,6 +6,18 @@ ...@@ -6,6 +6,18 @@
<div class="main-container"> <div class="main-container">
<div class="header-container" v-if="!hideHeader"> <div class="header-container" v-if="!hideHeader">
<div class="header-left apass_button"> <div class="header-left apass_button">
<el-button
v-if="listFilter.length"
@click="showListFilter = !showListFilter"
>
{{ showListFilter ? "收起" : "筛选" }}
<i
class="el-icon--right"
:class="
showListFilter ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
"
></i>
</el-button>
<slot name="header-left"></slot> <slot name="header-left"></slot>
</div> </div>
<div class="header-center"> <div class="header-center">
...@@ -13,7 +25,7 @@ ...@@ -13,7 +25,7 @@
</div> </div>
<div class="header-right"> <div class="header-right">
<el-input <el-input
v-model="searchFilter" v-model="searchValue"
prefix-icon="el-icon-search" prefix-icon="el-icon-search"
:placeholder="searchPlaceholder" :placeholder="searchPlaceholder"
style="width:240px;" style="width:240px;"
...@@ -21,10 +33,28 @@ ...@@ -21,10 +33,28 @@
></el-input> ></el-input>
</div> </div>
</div> </div>
<list-filter
v-if="!hideHeader"
class="apass_filter"
:show="showListFilter"
:filter-list="listFilter"
@filter-change="filterChange"
></list-filter>
<div class="cross_line" v-if="!hideHeader"></div> <div class="cross_line" v-if="!hideHeader"></div>
<div class="list-container appas_table">
<div class="list-container appas_table" v-if="$slots.content">
<slot name="list"></slot> <slot name="list"></slot>
</div> </div>
<div class="list-container appas_table" v-else>
<list-table
:header="listHeader"
:data="listData"
:padding-left="35"
></list-table>
</div>
<list-pagination <list-pagination
:total="listTotal" :total="listTotal"
:page-sizes="pageSizes" :page-sizes="pageSizes"
...@@ -38,28 +68,49 @@ ...@@ -38,28 +68,49 @@
</template> </template>
<script> <script>
import listTable from "@/components/apass-table";
import ListPagination from "@/components/comments-pagination"; import ListPagination from "@/components/comments-pagination";
import ListFilter from "@/components/table-filter";
export default { export default {
components: { components: {
ListFilter,
listTable,
ListPagination, ListPagination,
}, },
props: { props: {
listFilter: {
type: Array,
default: () => [],
},
listHeader: {
type: Array,
default: () => [],
},
listData: {
type: Array,
default: () => [],
},
listPaddingLeft: {
type: [Number, String],
},
listTotal: { listTotal: {
type: Number, type: Number,
default: 0, default: () => 0,
}, },
hideHeader: { hideHeader: {
type: Boolean, type: Boolean,
default: false, default: () => false,
}, },
searchPlaceholder: { searchPlaceholder: {
type: String, type: String,
default: "请输入关键字" default: () => "请输入关键字",
} },
}, },
data: () => ({ data: () => ({
searchFilter: "", showListFilter: false,
filter: {},
searchValue: "",
pageSize: 10, pageSize: 10,
currentPage: 1, currentPage: 1,
timer: null, timer: null,
...@@ -69,6 +120,10 @@ export default { ...@@ -69,6 +120,10 @@ export default {
searchAction(value) { searchAction(value) {
this.listAction(); this.listAction();
}, },
filterChange(filter) {
this.filter = filter;
this.listAction();
},
changePageSize(value) { changePageSize(value) {
this.pageSize = value; this.pageSize = value;
this.currentPage = 1; this.currentPage = 1;
...@@ -85,13 +140,17 @@ export default { ...@@ -85,13 +140,17 @@ export default {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
this.$emit("list-action", { this.$emit("list-action", {
filter: this.searchFilter, ...this.filter,
pageSize: this.pageSize, keyword: this.searchValue,
currentPage: this.currentPage, size: this.pageSize,
page: this.currentPage,
}); });
}, 200); }, 200);
}, },
}, },
mounted() {
this.listAction();
},
}; };
</script> </script>
...@@ -125,6 +184,9 @@ export default { ...@@ -125,6 +184,9 @@ export default {
.header-container .el-button + .el-button { .header-container .el-button + .el-button {
margin-left: 25px; margin-left: 25px;
} }
.apass_filter {
margin-top: 10px;
}
.cross_line { .cross_line {
border-top: 1px solid #e3e5ef; border-top: 1px solid #e3e5ef;
margin: 20px -20px 0; margin: 20px -20px 0;
......
src/components/apass-table.vue 0 → 100644
View file @ ac05c908
<template>
<div class="appas_table">
<el-table slot="list" :border="false" :data="data">
<el-table-column :width="paddingLeft - 10"></el-table-column>
<el-table-column
v-for="(item, index) in header"
:label="item.label"
:align="item.align || 'left'"
:width="item.width"
:key="'head_' + index"
>
<template slot-scope="scope">
<div v-if="item.type === 'buttons'" class="row_action">
<template v-for="(v, i) in item.actionList">
<a
class="btn"
:class="{ warn: v.label === '删除' }"
:key="'btn_' + index + '_' + i"
@click="v.callback && v.callback(scope.row)"
v-text="v.label"
>
</a>
<span
v-if="i < item.actionList.length - 1"
class="interval_line"
:key="'line_' + index + '_' + i"
>|</span
>
</template>
</div>
<div v-else-if="item.type === 'button'" class="row_action">
<a
class="btn"
v-text="scope.row[item.prop]"
@click="item.callback && item.callback(scope.row)"
></a>
</div>
<span v-else v-text="scope.row[item.prop]"></span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: {
header: {
type: Array,
default: () => [],
},
data: {
type: Array,
default: () => [],
},
paddingLeft: {
type: [Number, String],
default: () => 50,
},
},
};
</script>
src/pages/workbench/fwgl/fwglList.vue
View file @ ac05c908
<template> <template>
<div class="list_container"> <div class="service_management_list">
<div class="apass_breadcrumb"> <apass-list
<el-breadcrumb separator="/"> search-placeholder="请输入关键字"
<el-breadcrumb-item>我的服务</el-breadcrumb-item> :list-total="listTotal"
:list-filter="filterList"
:list-header="listHeader"
:list-data="listData"
:list-padding-left="35"
@list-action="initDatas"
>
<el-breadcrumb separator="/" slot="breadcrumb">
<el-breadcrumb-item :to="`/fwgl/${level}`">我的服务</el-breadcrumb-item>
<el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item> <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </apass-list>
<div class="main_container">
<ces-table <apass-dialog
class="r_yhgl_table" ref="dialog"
size="mini" :title="dialogInfo.title"
:detailsUrl="detailsUrl" :msg="dialogInfo.msg"
:border="false" :submit="dialogInfo.submit"
:headers="headers" ></apass-dialog>
:datas="datas"
:searchShow="true"
:autoAdd="false"
:emptyText="emptyText"
:stripe="true"
:pageSizeShow="true"
:filterList="filterList"
:isIndex="false"
@action-delete="deleteItem"
@action-edit="editItem"
@action-sold-out="soldOutItem"
@action-sold-out-2="soldOutItem2"
@action-cancel="cancelItem"
@action-approval="approvalItem"
@action-detail="detailItem"
@action-allot="allotItem"
style="margin-top: 50px;"
></ces-table>
</div>
<dialog-action
ref="myConfirm"
:confirm-options="confirmOptions"
></dialog-action>
</div> </div>
</template> </template>
<script> <script>
import cesTable from "@/components/table-um";
import dialogAction from "@/components/dialog-action";
import { mapState } from "vuex"; import { mapState } from "vuex";
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";
export default { export default {
components: { apassList, apassDialog },
data: () => ({ data: () => ({
level: 0, // 用户等级 level: 0, // 用户等级
type: 0, // 访问的页面 type: 0, // 访问的页面
headers: [], listTotal: 0,
datas: [], listHeader: [],
url: "", listData: [
confirmOptions: { {
title: "", id: 1000001,
message: "", img:
btnCancelText: "", "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
btnSubmitText: "", name: "贵阳市公安局",
item: null, system_count: 6,
}, organization_manager: 3,
emptyText: "暂时没数据", time: "2019-04-11 12:50:30",
},
{
id: 1000002,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "语音识别",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 1000003,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 1000004,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 1000005,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 1000006,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 1000007,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 100000,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 1000009,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 1000010,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
],
filterList: [ filterList: [
{ {
name: "服务类型", name: "服务类型",
prop: "fwlx", prop: "data_service_type",
data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"], data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
}, },
{ {
name: "服务领域", name: "服务领域",
prop: "fwly", prop: "sectors",
data: [ data: [
"数据服务", "数据服务",
"时空服务", "时空服务",
...@@ -85,15 +154,20 @@ export default { ...@@ -85,15 +154,20 @@ export default {
}, },
{ {
name: "开放程度", name: "开放程度",
prop: "kfcd", prop: "openness",
data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"], data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
}, },
{ {
name: "服务状态", name: "服务状态",
prop: "fwzt", prop: "state",
data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"], data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
}, },
], ],
dialogInfo: {
title: "",
msg: "",
submit: null,
},
}), }),
computed: { computed: {
...mapState({ ...mapState({
...@@ -114,10 +188,6 @@ export default { ...@@ -114,10 +188,6 @@ export default {
return url; return url;
}, },
}, },
components: {
cesTable,
dialogAction,
},
methods: { methods: {
initFilter() { initFilter() {
/* this.$http /* this.$http
...@@ -131,35 +201,19 @@ export default { ...@@ -131,35 +201,19 @@ export default {
console.log(error); console.log(error);
}); */ }); */
}, },
initDatas() {
this.$http
.get("/apaas/service/v3/service/manager/list", {
params: {
data_service_type: 0,
sectors: 0,
openness: 0,
state: "",
keyword: "",
page: 1,
size: 20,
},
})
.then(({ data }) => {
this.datas = data.data.data;
// console.log(this.datas);
})
.catch((error) => {
console.log(error);
});
},
initHeader() { initHeader() {
let level = this.level; let level = this.level;
let type = this.type; let type = this.type;
// 普通用户 --- 注册发布的服务 // 普通用户 --- 注册发布的服务
if (level == 0 && type == 0) { if (level == 0 && type == 0) {
this.headers = [ this.listHeader = [
{ label: "服务名称", prop: "name", type: "href", align: "left" }, {
label: "服务名称",
prop: "name",
type: "button",
callback: this.detailItem,
},
{ {
label: "服务领域", label: "服务领域",
prop: "sectors_name", prop: "sectors_name",
...@@ -172,7 +226,10 @@ export default { ...@@ -172,7 +226,10 @@ export default {
type: "", type: "",
align: "center", align: "center",
}, },
{ label: "服务描述", prop: "descript", type: "", align: "left" }, {
label: "服务描述",
prop: "descript",
},
{ {
label: "注册发布时间", label: "注册发布时间",
prop: "create_time", prop: "create_time",
...@@ -187,23 +244,21 @@ export default { ...@@ -187,23 +244,21 @@ export default {
}, },
{ {
label: "操作", label: "操作",
type: "Button", type: "buttons",
align: "center", align: "center",
width: 240, width: 240,
btnList: [ actionList: [
{ {
type: "action-edit",
label: "编辑", label: "编辑",
line: "|", callback: this.editItem,
}, },
{ {
type: "action-sold-out",
label: "申请下架", label: "申请下架",
line: "|", callback: this.applyForSoldOutItem,
}, },
{ {
type: "action-delete",
label: "删除", label: "删除",
callback: this.deleteItem,
}, },
], ],
}, },
...@@ -211,77 +266,106 @@ export default { ...@@ -211,77 +266,106 @@ export default {
} }
// 普通用户 --- 申请的服务 // 普通用户 --- 申请的服务
else if (level == 0 && type == 1) { else if (level == 0 && type == 1) {
this.headers = [ this.listHeader = [
{ label: "服务名称", prop: "name", type: "href", align: "left" },
{ label: "服务领域", prop: "date", type: "", align: "center" },
{ label: "开放程度", prop: "address", type: "", align: "center" },
{ label: "服务描述", prop: "address", type: "", align: "left" },
{ label: "申请时间", prop: "address", type: "", align: "center" },
{ label: "服务类型", prop: "address", type: "", align: "center" },
{ label: "申请状态", prop: "address", type: "", align: "center" },
{ {
label: "操作", label: "服务名称",
type: "Button", prop: "name",
type: "button",
callback: this.detailItem,
},
{
label: "服务领域",
prop: "date",
align: "center",
},
{
label: "开放程度",
prop: "address",
align: "center",
},
{
label: "服务描述",
prop: "address",
},
{
label: "申请时间",
prop: "address",
align: "center",
},
{
label: "服务类型",
prop: "address",
align: "center",
},
{
label: "申请状态",
prop: "address",
align: "center", align: "center",
btnList: [
{
type: "action-delete",
label: "删除",
},
],
}, },
];
}
// 普通用户 --- 审批的服务
else if (level == 0 && type == 2) {
this.headers = [
{ label: "服务名称", prop: "name", type: "", align: "left" },
{ label: "服务领域", prop: "address", type: "", align: "center" },
{ label: "开放程度", prop: "address", type: "", align: "center" },
{ label: "请求方式", prop: "address", type: "", align: "center" },
{ label: "服务描述", prop: "address", type: "", align: "left" },
{ label: "审批时间", prop: "address", type: "", align: "center" },
{ label: "服务类型", prop: "address", type: "", align: "center" },
{ label: "审批状态", prop: "address", type: "", align: "center" },
{ {
label: "操作", label: "操作",
type: "Button", type: "buttons",
align: "center", align: "center",
width: 160, actionList: [
btnList: [
{ {
type: "action-approval",
label: "审批",
line: "|",
},
{
type: "action-delete",
label: "删除", label: "删除",
callback: this.deleteItem,
}, },
], ],
}, },
]; ];
} }
// 普通用户 --- 云资源服务 // 普通用户 --- 云资源服务
else if (level == 0 && type == 3) { else if (level == 0 && type == 2) {
this.headers = [ this.listHeader = [
{ label: "工作区域", prop: "name", type: "", align: "center" }, {
{ label: "网络环境", prop: "name", type: "", align: "center" }, label: "工作区域",
{ label: "CPU（核）", prop: "name", type: "", align: "center" }, prop: "name",
{ label: "内存（GB）", prop: "name", type: "", align: "center" }, },
{ label: "资源总量（GB）", prop: "name", type: "", align: "center" }, {
{ label: "实例数（个）", prop: "name", type: "", align: "center" }, label: "网络环境",
{ label: "申请时间", prop: "name", type: "", align: "center" }, prop: "name",
{ label: "申请状态", prop: "name", type: "", align: "center" }, align: "center",
},
{
label: "CPU（核）",
prop: "name",
align: "center",
},
{
label: "内存（GB）",
prop: "name",
align: "center",
},
{
label: "资源总量（GB）",
prop: "name",
align: "center",
},
{
label: "实例数（个）",
prop: "name",
align: "center",
},
{
label: "申请时间",
prop: "name",
align: "center",
},
{
label: "申请状态",
prop: "name",
align: "center",
},
{ {
label: "操作", label: "操作",
type: "Button", type: "buttons",
align: "center", align: "center",
width: 160, width: 160,
btnList: [ actionList: [
{ {
type: "action-detail",
label: "查看详情", label: "查看详情",
callback: this.detailItem,
}, },
], ],
}, },
...@@ -290,42 +374,103 @@ export default { ...@@ -290,42 +374,103 @@ export default {
// 组织管理员 --- 组织服务管理 // 组织管理员 --- 组织服务管理
else if (level == 1 && type == 0) { else if (level == 1 && type == 0) {
this.headers = [ this.listHeader = [
{ label: "服务名称", prop: "name", type: "href", align: "left" }, {
{ label: "服务领域", prop: "date", type: "", align: "center" }, label: "服务名称",
{ label: "开放程度", prop: "date", type: "", align: "center" }, prop: "name",
{ label: "请求方式", prop: "date", type: "", align: "center" }, type: "button",
{ label: "服务描述", prop: "date", type: "", align: "left" }, callback: this.detailItem,
{ label: "注册发布时间", prop: "date", type: "", align: "center" }, },
{ label: "服务类型", prop: "date", type: "", align: "center" }, {
{ label: "服务状态", prop: "date", type: "", align: "center" }, label: "服务领域",
prop: "date",
align: "center",
},
{
label: "开放程度",
prop: "date",
align: "center",
},
{
label: "请求方式",
prop: "date",
align: "center",
},
{
label: "服务描述",
prop: "date",
},
{
label: "注册发布时间",
prop: "date",
align: "center",
},
{
label: "服务类型",
prop: "date",
align: "center",
},
{
label: "服务状态",
prop: "date",
align: "center",
},
]; ];
} }
// 组织管理员 --- 服务审批管理 // 组织管理员 --- 服务审批管理
else if (level == 1 && type == 1) { else if (level == 1 && type == 1) {
this.headers = [ this.listHeader = [
{ label: "服务名称", prop: "name", type: "", align: "left" }, {
{ label: "服务领域", prop: "date", type: "", align: "center" }, label: "服务名称",
{ label: "开放程度", prop: "date", type: "", align: "center" }, prop: "name",
{ label: "请求方式", prop: "date", type: "", align: "center" }, },
{ label: "服务描述", prop: "date", type: "", align: "left" }, {
{ label: "审批时间", prop: "date", type: "", align: "center" }, label: "服务领域",
{ label: "服务类型", prop: "date", type: "", align: "center" }, prop: "date",
{ label: "审批状态", prop: "date", type: "", align: "center" }, align: "center",
},
{
label: "开放程度",
prop: "date",
align: "center",
},
{
label: "请求方式",
prop: "date",
align: "center",
},
{
label: "服务描述",
prop: "date",
},
{
label: "审批时间",
prop: "date",
align: "center",
},
{
label: "服务类型",
prop: "date",
align: "center",
},
{
label: "审批状态",
prop: "date",
align: "center",
},
{ {
label: "操作", label: "操作",
type: "Button", type: "buttons",
align: "center", align: "center",
width: 160, width: 160,
btnList: [ actionList: [
{ {
type: "action-approval",
label: "审批", label: "审批",
line: "|", callback: this.approvalItem,
}, },
{ {
type: "action-delete",
label: "删除", label: "删除",
callback: this.deleteItem,
}, },
], ],
}, },
...@@ -333,24 +478,55 @@ export default { ...@@ -333,24 +478,55 @@ export default {
} }
// 组织管理员 --- 云资源管理 // 组织管理员 --- 云资源管理
else if (level == 1 && type == 2) { else if (level == 1 && type == 2) {
this.headers = [ this.listHeader = [
{ label: "工作区域", prop: "name", type: "", align: "center" }, {
{ label: "网络环境", prop: "name", type: "", align: "center" }, label: "工作区域",
{ label: "CPU（核）", prop: "name", type: "", align: "center" }, prop: "name",
{ label: "内存（GB）", prop: "name", type: "", align: "center" }, },
{ label: "资源总量（GB）", prop: "name", type: "", align: "center" }, {
{ label: "实例数（个）", prop: "name", type: "", align: "center" }, label: "网络环境",
{ label: "使用用户", prop: "name", type: "", align: "center" }, prop: "name",
{ label: "用户申请时间", prop: "name", type: "", align: "center" }, align: "center",
},
{
label: "CPU（核）",
prop: "name",
align: "center",
},
{
label: "内存（GB）",
prop: "name",
align: "center",
},
{
label: "资源总量（GB）",
prop: "name",
align: "center",
},
{
label: "实例数（个）",
prop: "name",
align: "center",
},
{
label: "使用用户",
prop: "name",
align: "center",
},
{
label: "用户申请时间",
prop: "name",
align: "center",
},
{ {
label: "操作", label: "操作",
type: "Button", type: "buttons",
align: "center", align: "center",
width: 160, width: 160,
btnList: [ actionList: [
{ {
type: "action-allot",
label: "分配", label: "分配",
callback: this.allotItem,
}, },
], ],
}, },
...@@ -359,33 +535,59 @@ export default { ...@@ -359,33 +535,59 @@ export default {
// 超级管理员 --- 组织服务管理 // 超级管理员 --- 组织服务管理
else if (level == 2 && type == 0) { else if (level == 2 && type == 0) {
this.headers = [ this.listHeader = [
{ label: "服务名称", prop: "name", type: "href", align: "left" }, {
{ label: "服务领域", prop: "date", type: "", align: "center" }, label: "服务名称",
{ label: "开放程度", prop: "date", type: "", align: "center" }, prop: "name",
{ label: "请求方式", prop: "date", type: "", align: "center" }, type: "button",
{ label: "服务描述", prop: "date", type: "", align: "left" }, callback: this.detailItem,
{ label: "注册发布时间", prop: "date", type: "", align: "center" }, },
{ label: "服务类型", prop: "date", type: "", align: "center" }, {
label: "服务领域",
prop: "date",
align: "center",
},
{
label: "开放程度",
prop: "date",
align: "center",
},
{
label: "请求方式",
prop: "date",
align: "center",
},
{
label: "服务描述",
prop: "date",
},
{
label: "注册发布时间",
prop: "date",
align: "center",
},
{
label: "服务类型",
prop: "date",
align: "center",
},
{ {
label: "操作", label: "操作",
type: "Button", type: "buttons",
align: "center", align: "center",
width: 240, width: 240,
btnList: [ actionList: [
{ {
type: "action-edit",
label: "编辑", label: "编辑",
line: "|", callback: this.editItem,
}, },
{ {
type: "action-sold-out-2",
label: "下架", label: "下架",
line: "|", callback: this.soldOutItem,
}, },
{ {
type: "action-delete",
label: "删除", label: "删除",
callback: this.deleteItem,
}, },
], ],
}, },
...@@ -393,29 +595,58 @@ export default { ...@@ -393,29 +595,58 @@ export default {
} }
// 超级管理员 --- 服务审批管理 // 超级管理员 --- 服务审批管理
else if (level == 2 && type == 1) { else if (level == 2 && type == 1) {
this.headers = [ this.listHeader = [
{ label: "服务名称", prop: "name", type: "", align: "left" }, {
{ label: "服务领域", prop: "date", type: "", align: "center" }, label: "服务名称",
{ label: "开放程度", prop: "date", type: "", align: "center" }, prop: "name",
{ label: "请求方式", prop: "date", type: "", align: "center" }, },
{ label: "服务描述", prop: "date", type: "", align: "left" }, {
{ label: "审批时间", prop: "date", type: "", align: "center" }, label: "服务领域",
{ label: "服务类型", prop: "date", type: "", align: "center" }, prop: "date",
{ label: "审批状态", prop: "date", type: "", align: "center" }, align: "center",
},
{
label: "开放程度",
prop: "date",
align: "center",
},
{
label: "请求方式",
prop: "date",
align: "center",
},
{
label: "服务描述",
prop: "date",
},
{
label: "审批时间",
prop: "date",
align: "center",
},
{
label: "服务类型",
prop: "date",
align: "center",
},
{
label: "审批状态",
prop: "date",
align: "center",
},
{ {
label: "操作", label: "操作",
type: "Button", type: "buttons",
align: "center", align: "center",
width: 160, width: 160,
btnList: [ actionList: [
{ {
type: "action-approval",
label: "审批", label: "审批",
line: "|", callback: this.approvalItem,
}, },
{ {
type: "action-delete",
label: "删除", label: "删除",
callback: this.deleteItem,
}, },
], ],
}, },
...@@ -423,20 +654,39 @@ export default { ...@@ -423,20 +654,39 @@ export default {
} }
// 超级管理员 --- 云资源管理 // 超级管理员 --- 云资源管理
else if (level == 2 && type == 2) { else if (level == 2 && type == 2) {
this.headers = [ this.listHeader = [
{ label: "所属组织", prop: "name", type: "", align: "center" }, {
{ label: "CPU使用量", prop: "name", type: "", align: "center" }, label: "所属组织",
{ label: "内存使用量", prop: "name", type: "", align: "center" }, prop: "name",
{ label: "工作区域数量", prop: "name", type: "", align: "center" }, },
{ label: "创建时间", prop: "name", type: "", align: "center" }, {
label: "CPU使用量",
prop: "name",
align: "center",
},
{
label: "内存使用量",
prop: "name",
align: "center",
},
{
label: "工作区域数量",
prop: "name",
align: "center",
},
{
label: "创建时间",
prop: "name",
align: "center",
},
{ {
label: "操作", label: "操作",
type: "Button", type: "buttons",
align: "center", align: "center",
btnList: [ actionList: [
{ {
type: "action-delete",
label: "删除", label: "删除",
callback: this.deleteItem,
}, },
], ],
}, },
...@@ -448,61 +698,83 @@ export default { ...@@ -448,61 +698,83 @@ export default {
throw Error("The page doesn't exist"); throw Error("The page doesn't exist");
} }
}, },
deleteItem(item) { initDatas(filter) {
this.confirmOptions.title = ""; // console.log(filter);
this.confirmOptions.message = "是否删除该条服务？";
this.confirmOptions.btnCancelText = ""; this.$http
this.confirmOptions.btnSubmitText = ""; .get("/apaas/service/v3/service/manager/list", {
this.confirmOptions.confirmSubmit = () => { params: {
console.log("deleteItem - " + item.name); data_service_type: 0,
this.$refs.myConfirm.hideModel(); sectors: 0,
}; openness: 0,
this.$refs.myConfirm.showModel(); state: "",
keyword: filter.keyword,
page: filter.page,
size: filter.size,
},
})
.then(({ data }) => {
// console.log(data);
this.listTotal = data.data.total;
this.listData = data.data.data;
})
.catch((error) => {
console.log(error);
});
},
showDialog() {
this.$refs.dialog.show();
}, },
editItem(item) { editItem(item) {
this.$router.push( this.$router.push(
`/fwgl/${this.level}/${this.type}/serviceedit/${item.id}` `/fwgl/${this.level}/${this.type}/serviceedit/${item.id}`
); );
}, },
soldOutItem(item) { applyForSoldOutItem(item) {
this.confirmOptions.title = "提示"; this.dialogInfo.title = "是否确定下架服务";
this.confirmOptions.message = this.dialogInfo.msg =
"下架此服务会导致用户被迫暂停对服务的调用，下架前需向超级管理员发送通知，超级管理员通过后此服务将会从服务超市中下架。"; "下架此服务会导致用户被迫暂停对服务的调用，下架前需向超级管理员发送通知，超级管理员通过后此服务将会从服务超市中下架。";
this.confirmOptions.btnCancelText = ""; this.dialogInfo.cancelText = "取消";
this.confirmOptions.btnSubmitText = "发送通知"; this.dialogInfo.sunbmitText = "发送通知";
this.confirmOptions.confirmSubmit = () => { this.dialogInfo.submit = () => {
console.log("soldOutItem - " + item.name); console.log("applyForSoldOutItem - " + item.name);
this.$refs.myConfirm.hideModel();
}; };
this.$refs.myConfirm.showModel(); this.showDialog();
}, },
soldOutItem2(item) { deleteItem(item) {
this.confirmOptions.title = "提示"; this.dialogInfo.title = "";
this.confirmOptions.message = "下架此服务会导致用户被迫暂停对服务的调用"; this.dialogInfo.msg = "是否删除该条服务？";
this.confirmOptions.btnCancelText = ""; this.dialogInfo.cancelText = "";
this.confirmOptions.btnSubmitText = "确定"; this.dialogInfo.sunbmitText = "";
this.confirmOptions.confirmSubmit = () => { this.dialogInfo.submit = () => {
console.log("soldOutItem2 - " + item.name); console.log("deleteItem - " + item.name);
this.$refs.myConfirm.hideModel();
}; };
this.$refs.myConfirm.showModel(); this.showDialog();
}, },
cancelItem(item) { detailItem(item) {
console.log("cancelItem - " + item.name); this.$router.push(`${this.detailsUrl + item.id}`);
}, },
approvalItem(item) { approvalItem(item) {
this.$router.push( this.$router.push(
`/fwgl/${this.level}/${this.type}/approvalserviceedit/${item.id}` `/fwgl/${this.level}/${this.type}/approvalserviceedit/${item.id}`
); );
}, },
detailItem(item) {
console.log("detailItem - " + item.name);
},
allotItem(item) { allotItem(item) {
console.log("allotItem - " + item.name); console.log("allotItem - " + item.name);
}, },
confirmSubmit(item) { soldOutItem(item) {
console.log(item.name); this.dialogInfo.title = "提示";
this.dialogInfo.msg =
"下架此服务会导致调用该服务的<br />用户被迫暂停对服务的调用";
this.dialogInfo.cancelText = "";
this.dialogInfo.sunbmitText = "确定";
this.dialogInfo.confirmSubmit = () => {
console.log("submit - " + item.name);
};
this.showDialog();
},
dialogSubmit() {
console.log("dialog submit");
}, },
}, },
created() { created() {
...@@ -510,20 +782,12 @@ export default { ...@@ -510,20 +782,12 @@ export default {
this.type = parseInt(this.$route.params.type); this.type = parseInt(this.$route.params.type);
this.initFilter(); this.initFilter();
this.initHeader(); this.initHeader();
this.initDatas();
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.list_container { .service_management_list {
padding: 0 20px; height: 100%;
}
.main_container {
height: calc(100% - 75px);
padding: 15px 20px;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
} }
</style> </style>
src/store/index.js
View file @ ac05c908
...@@ -7,7 +7,7 @@ const store = new Vuex.Store({ ...@@ -7,7 +7,7 @@ const store = new Vuex.Store({
role: 2, // 0：普通用户，1：组织管理员，2：超级管理员 role: 2, // 0：普通用户，1：组织管理员，2：超级管理员
serviceShopMenu: "shopDataList", // 服务超市侧边栏 serviceShopMenu: "shopDataList", // 服务超市侧边栏
fwglNav: [ fwglNav: [
["注册发布的服务", "申请的服务", "审批的服务", "云资源服务"], // 普通用户 ["注册发布的服务", "申请的服务", "云资源服务"], // 普通用户
["组织服务管理", "服务审批管理", "云资源管理"], // 组织管理员 ["组织服务管理", "服务审批管理", "云资源管理"], // 组织管理员
["平台服务管理", "服务审批管理", "云资源管理"], // 超级管理员 ["平台服务管理", "服务审批管理", "云资源管理"], // 超级管理员
], // 服务管理列表，onlyRead ], // 服务管理列表，onlyRead
......
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