Skip to content

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

Merge branch 'xym' into dev

parents 14de8ffc 3fb1c3c9
Show whitespace changes
Inline Side-by-side
Showing with 939 additions and 196 deletions
src/components/app-card.vue 0 → 100644
View file @ 0099d224
<template>
<div class="app_card">
<a class="remove_btn" @click.prevent="deleteAction">
<i class="el-icon-close"></i>
</a>
<div class="app_card-icon">
<el-avatar shape="square" :size="56" fit="cover" :src="data.img" />
</div>
<div class="app_card-info">
<p class="app_card-name text_clip" v-text="data.name"></p>
<p class="app_card-version text_clip" v-text="data.version"></p>
</div>
<div class="app_card-action" v-if="cardType == 0">
<el-button type="primary" plain @click="deploymentAction">
一键部署
</el-button>
</div>
<p class="app_card-text" v-if="cardType == 1">
<span>
<i class="el-icon-time"></i>
<span>上线时间：</span>
</span>
<span class="text_clip" v-text="data.time"></span>
</p>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
default: {},
},
cardType: {
type: [String, Number],
default: 0,
},
},
methods: {
deploymentAction() {
this.$emit("deployment-action", this.data);
},
deleteAction() {
this.$emit("delete-action", this.data);
},
},
};
</script>
<style scoped>
.app_card {
width: calc(20% - 36px);
background-image: url(../assets/imgs/bg_block.png);
background-size: 100% 100%;
padding: 33px 25px 34px;
box-sizing: border-box;
margin: 0 18px 38px;
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
position: relative;
}
.app_card:hover {
background-image: url(../assets/imgs/bg_block_hov.png);
}
.app_card > .remove_btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
color: #8890a7;
cursor: pointer;
}
.app_card > .app_card-icon {
margin-right: 18px;
}
.app_card > .app_card-info {
width: calc(100% - 56px - 20px);
}
.app_card-info > .app_card-name {
font-size: 18px;
line-height: 32px;
color: #0d1847;
}
.app_card-info > .app_card-version {
font-size: 14px;
line-height: 25px;
color: #8890a7;
margin-top: 5px;
}
.app_card > .app_card-action {
width: 100%;
text-align: center;
margin: 34px 0 5px;
}
.app_card-action > .el-button {
width: 100%;
}
.app_card-text {
width: 100%;
font-size: 14px;
color: #8890a7;
line-height: 25px;
margin-top: 19px;
display: flex;
justify-content: space-between;
align-items: center;
}
.app_card-text > span:nth-child(1) {
flex-shrink: 0;
}
</style>
<style>
.app_card-action > .el-button--primary.is-plain {
background-color: #d0d5e7;
border-color: #a5afd6;
color: #0f2683;
}
</style>
src/components/app-list.vue 0 → 100644
View file @ 0099d224
<template>
<div class="app_list">
<app-card
v-for="(item, index) in data"
:key="'app_card_' + index"
:data="item"
:card-type="cardType"
@deployment-action="deploymentAction"
@delete-action="deleteAction"
></app-card>
</div>
</template>
<script>
import appCard from "./app-card";
export default {
components: {
appCard,
},
props: {
data: {
type: Array,
default: [],
},
cardType: {
type: [String, Number],
default: 0,
},
},
methods: {
deploymentAction(item) {
this.$emit("deployment-action", item);
},
deleteAction(item) {
this.$emit("delete-action", item);
},
},
};
</script>
<style scoped>
.app_list {
margin: 20px -25px 0;
padding: 30px 0 0;
border-top: 1px solid #e3e5ef;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
</style>
src/components/side-nav-bar.vue
View file @ 0099d224
<template> <template>
<div class="side_nav_bar"> <div class="side_nav_bar">
<h3 class="side_nav_bar_title" @click="titleAction"> <h3 class="side_nav_bar_title" @click="titleAction">
<img <img :src="titleIcon" width="20" style="margin-right: 10px;" />
:src="require('../assets/imgs/' + imgSrc + '.png')"
width="20"
style="margin-right: 10px;"
/>
<span v-text="title"></span> <span v-text="title"></span>
</h3> </h3>
<ul class="side_nav_bar_list"> <ul class="side_nav_bar_list">
...@@ -31,6 +27,10 @@ export default { ...@@ -31,6 +27,10 @@ export default {
type: String, type: String,
default: () => "我的服务", default: () => "我的服务",
}, },
titleIcon: {
type: String,
default: () => require("../assets/imgs/tool_fuwu.png"),
},
titlePath: { titlePath: {
type: String, type: String,
default: () => "", default: () => "",
......
src/components/table-filter.vue 0 → 100644
View file @ 0099d224
<template>
<ul
class="ces_filter_container"
ref="filterContainer"
v-if="filterList && filterData && filterToggle"
v-show="show"
>
<li v-for="(item, index) in filterList" :key="'f_l_' + index">
<div class="ces_filter_name">
<span v-text="item.name + '：'"></span>
</div>
<ul class="ces_filter_data">
<li
v-for="(v, i) in item.data"
:key="'f_l_d_' + index + '_' + i"
v-show="filterToggle[item.prop] || i < filterLength"
:style="{
'margin-top': i < filterLength ? '0' : '10px',
}"
>
<a
:class="{ current: isCurrentFilter(item.prop, v) }"
@click.prevent="selectFilter(item.prop, v)"
v-text="v"
></a>
</li>
<div
class="toggle_bar"
v-if="item.data.length > filterLength"
@click="filterToggleAction(item.prop)"
>
<span>{{ filterToggle[item.prop] ? "收起" : "展开" }}</span>
<i
:class="
filterToggle[item.prop]
? 'el-icon-caret-bottom'
: 'el-icon-caret-top'
"
></i>
</div>
</ul>
</li>
</ul>
</template>
<script>
export default {
props: {
filterList: {
type: Array,
default: [],
},
show: {
type: Boolean,
default: false,
},
},
data: () => ({
filterData: null, // 筛选条件
filterToggle: null, // 控制筛选条件的展开和收起
filterLength: 0, // 每行最多可容纳多少个过滤条件
}),
watch: {
filterList: {
handler(val) {
this.initFilterData();
},
deep: true,
},
show(value) {
if (value) {
this.getFilterLength();
}
},
},
methods: {
initFilterData() {
if (this.filterList && this.filterList.length) {
this.filterData = {};
this.filterToggle = {};
this.filterList.forEach((item) => {
this.$set(this.filterData, item.prop, []);
this.$set(this.filterToggle, item.prop, false);
});
}
},
getFilterLength() {
if (this.show) {
this.$nextTick(() => {
let width =
this.$refs.filterContainer.getBoundingClientRect().width -
20 * 2 - // 两侧padding
100 - // 左侧标题
20 - // 距左侧标题的边距
110; // 折叠按钮的宽度
this.filterLength = Math.floor(width / 110);
// console.log("每行最多可容纳" + this.filterLength + "个filter");
});
}
},
filterToggleAction(prop) {
this.$set(this.filterToggle, prop, !this.filterToggle[prop]);
},
isCurrentFilter(prop, filter) {
return (
this.filterData &&
this.filterData[prop] &&
this.filterData[prop].indexOf(filter) > -1
);
},
selectFilter(prop, filter) {
if (this.isCurrentFilter(prop, filter)) {
this.filterData[prop].splice(this.filterData[prop].indexOf(filter), 1);
} else {
this.filterData[prop].push(filter);
}
this.$emit("filter-change", this.filterData);
},
},
mounted() {
this.initFilterData();
window.addEventListener("resize", this.getFilterLength);
},
destroyed() {
window.removeEventListener("resize", this.getFilterLength);
},
};
</script>
<style scoped>
.ces_filter_container {
padding: 14px 19px;
border: 1px solid #e3e5ef;
border-radius: 6px;
margin: 0 0 10px;
}
.ces_filter_container > li {
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding-top: 12px;
}
.ces_filter_name {
width: 100px;
height: 30px;
flex-shrink: 0;
text-align: right;
font-size: 14px;
line-height: 30px;
font-weight: bold;
color: #1a2236;
}
.ces_filter_data {
width: calc(100% - 120px);
min-height: 42px;
padding-right: 110px;
box-sizing: border-box;
margin-left: 20px;
flex-grow: 1;
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
padding-bottom: 11px;
position: relative;
}
.ces_filter_container > li:not(:last-child) > .ces_filter_data {
border-bottom: 1px solid #e9ecf3;
}
.ces_filter_data > li {
flex-shrink: 0;
padding-right: 20px;
}
.ces_filter_data > .toggle_bar {
height: 30px;
position: absolute;
top: 0;
right: 0;
font-size: 14px;
line-height: 30px;
color: #0f2683;
cursor: pointer;
}
.ces_filter_data > li > a {
display: block;
height: 30px;
width: 90px;
box-sizing: border-box;
border-radius: 12px;
text-align: center;
cursor: pointer;
font-size: 14px;
line-height: 30px;
color: #58617a;
}
.ces_filter_data > li > a.current {
background-color: #515fe7;
color: #f4f7fc;
}
</style>
src/components/table-um.vue
View file @ 0099d224
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
v-if="filterList && filterList.length" v-if="filterList && filterList.length"
size="small" size="small"
style="float: left;" style="float: left;"
@click="filterAction" @click="showFliterList = !showFliterList"
> >
{{ showFliterList ? "收起" : "筛选" }} {{ showFliterList ? "收起" : "筛选" }}
<i <i
...@@ -30,53 +30,17 @@ ...@@ -30,53 +30,17 @@
prefix-icon="el-icon-search" prefix-icon="el-icon-search"
v-if="searchShow" v-if="searchShow"
v-model="search" v-model="search"
placeholder="请输入账号、中文名" :placeholder="inputPlaceholder"
style="max-width:220px;" style="width:180px;"
size="mini"
@input="searchVal" @input="searchVal"
class="ces_toolbar_inp" class="ces_toolbar_inp"
></el-input> ></el-input>
</div> </div>
<ul <v-apaas-table-filter
class="ces_filter_container" :show="showFliterList"
ref="filterContainer" :filter-list="filterList"
v-if="filterList && filterData && filterToggle" @filter-change="filterChange"
v-show="showFliterList" ></v-apaas-table-filter>
>
<li v-for="(item, index) in filterList" :key="'f_l_' + index">
<div class="ces_filter_name">
<span v-text="item.name + '：'"></span>
</div>
<ul class="ces_filter_data">
<li
v-for="(v, i) in item.data"
:key="'f_l_d_' + index + '_' + i"
v-show="filterToggle[item.prop] || i < filterLength"
>
<a
:class="{ current: isCurrentFilter(item.prop, v) }"
@click.prevent="selectFilter(item.prop, v)"
v-text="v"
></a>
</li>
<div
class="toggle_bar"
v-if="item.data.length > filterLength"
@click="filterToggleAction(item.prop)"
>
<span>{{ filterToggle[item.prop] ? "收起" : "展开" }}</span>
<i
:class="
filterToggle[item.prop]
? 'el-icon-caret-bottom'
: 'el-icon-caret-top'
"
></i>
</div>
</ul>
</li>
</ul>
<el-table <el-table
:data="selectedTabsPage" :data="selectedTabsPage"
:size="size" :size="size"
...@@ -139,6 +103,28 @@ ...@@ -139,6 +103,28 @@
</em> </em>
</em> </em>
<em v-if="btn.type == 'goods-shelf'">
<em
v-if="scope.row.state == 0"
class="cur_pointer"
style="color: #0f2683"
@click="handleClick(btn.type, scope.row)"
>
上架
</em>
<em
v-if="scope.row.state == 1"
class="cur_pointer"
style="color: #0f2683"
@click="handleClick(btn.type, scope.row)"
>
下架
</em>
<em v-if="scope.row.state == 2">
下架
</em>
</em>
<em <em
class="cur_pointer" class="cur_pointer"
v-else-if="btn.label == '删除' && btn.local" v-else-if="btn.label == '删除' && btn.local"
...@@ -265,12 +251,14 @@ import tableSelect from "@/components/table-select"; ...@@ -265,12 +251,14 @@ import tableSelect from "@/components/table-select";
import helper from "@/services/helper"; import helper from "@/services/helper";
import DConfirm from "@/components/dialog-remove"; import DConfirm from "@/components/dialog-remove";
import tableUmhref from "@/components/table-umhref"; import tableUmhref from "@/components/table-umhref";
import tableFilter from "@/components/table-filter";
export default { export default {
components: { components: {
"v-apaas-table-input": tableInput, "v-apaas-table-input": tableInput,
"v-apaas-table-select": tableSelect, "v-apaas-table-select": tableSelect,
"v-apaas-table-umhref": tableUmhref, "v-apaas-table-umhref": tableUmhref,
"d-confirm": DConfirm, "d-confirm": DConfirm,
"v-apaas-table-filter": tableFilter,
}, },
props: { props: {
// 表格型号：mini,medium,small // 表格型号：mini,medium,small
...@@ -297,6 +285,10 @@ export default { ...@@ -297,6 +285,10 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
inputPlaceholder: {
type: String,
default: "请输入账号、中文名",
},
url: { url: {
type: String, type: String,
default: "", default: "",
...@@ -401,19 +393,10 @@ export default { ...@@ -401,19 +393,10 @@ export default {
search: "", search: "",
times: null, times: null,
showFliterList: false, showFliterList: false,
filterData: null, // 筛选条件
filterToggle: null, // 控制筛选条件的展开和收起
filterLength: 0, // 每行最多可容纳多少个过滤条件
}; };
}, },
mounted() { mounted() {
this.getDataFromApiSync(); this.getDataFromApiSync();
this.initFilterData();
window.addEventListener("resize", this.getFilterLength);
},
destroyed() {
window.removeEventListener("resize", this.getFilterLength);
}, },
watch: { watch: {
refreshInit: { refreshInit: {
...@@ -429,12 +412,6 @@ export default { ...@@ -429,12 +412,6 @@ export default {
}, },
deep: true, deep: true,
}, },
filterList: {
handler(val) {
this.initFilterData();
},
deep: true,
},
}, },
methods: { methods: {
//本地删除 //本地删除
...@@ -561,52 +538,8 @@ export default { ...@@ -561,52 +538,8 @@ export default {
getTableData() { getTableData() {
return this.selectedTabsPage; return this.selectedTabsPage;
}, },
isCurrentFilter(prop, filter) { filterChange(filter) {
return ( console.log(filter);
this.filterData &&
this.filterData[prop] &&
this.filterData[prop].indexOf(filter) > -1
);
},
filterAction() {
this.showFliterList = !this.showFliterList;
this.getFilterLength();
},
getFilterLength() {
if (this.showFliterList) {
this.$nextTick(() => {
let width =
this.$refs.filterContainer.getBoundingClientRect().width -
20 * 2 - // 两侧padding
100 - // 左侧标题
20 - // 距左侧标题的边距
110; // 折叠按钮的宽度
this.filterLength = Math.floor(width / 110);
// console.log("每行最多可容纳" + this.filterLength + "个filter");
});
}
},
filterToggleAction(prop) {
this.$set(this.filterToggle, prop, !this.filterToggle[prop]);
},
initFilterData() {
if (this.filterList && this.filterList.length) {
this.filterData = {};
this.filterToggle = {};
this.filterList.forEach((item) => {
this.$set(this.filterData, item.prop, []);
this.$set(this.filterToggle, item.prop, false);
});
}
},
selectFilter(prop, filter) {
if (this.isCurrentFilter(prop, filter)) {
this.filterData[prop].splice(this.filterData[prop].indexOf(filter), 1);
} else {
this.filterData[prop].push(filter);
}
console.log(this.filterData);
}, },
}, },
}; };
...@@ -761,9 +694,6 @@ em { ...@@ -761,9 +694,6 @@ em {
.ces_toolbar .ces_toolbar_btn { .ces_toolbar .ces_toolbar_btn {
margin-right: 10px; margin-right: 10px;
} }
.ces_toolbar .ces_toolbar_inp {
margin-right: 10px;
}
.ces-pagination { .ces-pagination {
margin-top: 20px; margin-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
...@@ -796,75 +726,6 @@ em { ...@@ -796,75 +726,6 @@ em {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.ces_filter_container {
background-color: #f7f8f9;
padding: 14px 19px;
border: 1px solid #e3e5ef;
border-radius: 6px;
margin: 0 0 10px;
}
.ces_filter_container > li {
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding-top: 12px;
}
.ces_filter_name {
width: 100px;
height: 30px;
flex-shrink: 0;
text-align: right;
font-size: 14px;
line-height: 30px;
font-weight: bold;
color: #1a2236;
}
.ces_filter_data {
width: calc(100% - 120px);
padding-right: 110px;
box-sizing: border-box;
margin-left: 20px;
flex-grow: 1;
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
padding-bottom: 11px;
position: relative;
}
.ces_filter_container > li:not(:last-child) > .ces_filter_data {
border-bottom: 1px solid #e9ecf3;
}
.ces_filter_data > li {
flex-shrink: 0;
padding-right: 20px;
}
.ces_filter_data > .toggle_bar {
height: 30px;
position: absolute;
top: 0;
right: 0;
font-size: 14px;
line-height: 30px;
color: #0f2683;
cursor: pointer;
}
.ces_filter_data > li > a {
display: block;
height: 30px;
width: 90px;
box-sizing: border-box;
border-radius: 12px;
text-align: center;
cursor: pointer;
font-size: 14px;
line-height: 30px;
color: #58617a;
}
.ces_filter_data > li > a.current {
background-color: #515fe7;
color: #f4f7fc;
}
.ces_page_item { .ces_page_item {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
......
src/pages/fwglList.vue
View file @ 0099d224
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item> <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="table_container"> <div class="main_container">
<ces-table <ces-table
class="r_yhgl_table" class="r_yhgl_table"
size="mini" size="mini"
...@@ -395,7 +395,6 @@ export default { ...@@ -395,7 +395,6 @@ export default {
// Error // Error
else { else {
this.headers = [];
throw Error("The page doesn't exist"); throw Error("The page doesn't exist");
} }
}, },
...@@ -468,14 +467,14 @@ export default { ...@@ -468,14 +467,14 @@ export default {
.list_container { .list_container {
padding: 0 20px; padding: 0 20px;
} }
.table_container { .main_container {
height: calc(100% - 75px); height: calc(100% - 75px);
padding: 15px 20px; padding: 15px 20px;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
} }
.table_container .ces-table-page { .main_container .ces-table-page {
margin-top: 42px; margin-top: 42px;
} }
</style> </style>
src/pages/yygl.vue
View file @ 0099d224
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
<div class="yygl_container"> <div class="yygl_container">
<side-nav-bar <side-nav-bar
:nav-list="navList" :nav-list="navList"
title="我的应用"
:title-icon="require('../assets/imgs/tool_yingyong.png')"
:title-path="navList[0] && navList[0].path" :title-path="navList[0] && navList[0].path"
></side-nav-bar> ></side-nav-bar>
<div class="main_container"> <div class="main_container">
......
src/pages/yyglList.vue
View file @ 0099d224
...@@ -6,19 +6,229 @@ ...@@ -6,19 +6,229 @@
<el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item> <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="table_container"></div> <div class="main_container card" v-if="listType == 'card'">
<div class="filter_contaner">
<div class="filter_action">
<el-button
v-if="filterList && filterList.length"
size="small"
@click="showFliterList = !showFliterList"
>
{{ showFliterList ? "收起" : "筛选" }}
<i
class="el-icon--right"
:class="
showFliterList ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
"
></i>
</el-button>
<el-input
v-model="search"
prefix-icon="el-icon-search"
placeholder="请输入应用名称"
style="width:180px;"
@input="searchChange"
class="ces_toolbar_inp"
></el-input>
</div>
<table-filter
:show="showFliterList"
:filter-list="filterList"
@filter-change="filterChange"
style="margin-top: 5px;"
></table-filter>
</div>
<app-list
:data="appList"
:card-type="cardType"
@deployment-action="deploymentAction"
@delete-action="deleteAction"
></app-list>
<div class="flex_grow"></div>
<comments-pagination
:total="100"
:page-sizes="pageSizes"
:page-size="pageSize"
:current-page="currentPage"
@size-change="changePageSize"
@current-change="changeCurrentPage"
></comments-pagination>
</div>
<div class="main_container" v-if="listType == 'table'">
<ces-table
class="r_yhgl_table"
size="mini"
url="tableData"
input-placeholder="请输入应用名称"
empty-text="暂时没数据"
:detailsUrl="detailsUrl"
:border="false"
:headers="headers"
:searchShow="true"
:autoAdd="false"
:stripe="true"
:pageSizeShow="true"
:filterList="filterList"
:isIndex="false"
@action-approval="approvalItem"
@action-delete="deleteItem"
@action-edit="editItem"
@off-line="offLine"
@goods-shelf="goodsShelf"
style="margin-top: 44px;"
></ces-table>
</div>
<dialog-action
ref="myConfirm"
:confirm-options="confirmOptions"
></dialog-action>
</div> </div>
</template> </template>
<script> <script>
import tableFilter from "@/components/table-filter";
import appList from "@/components/app-list";
import cesTable from "@/components/table-um"; import cesTable from "@/components/table-um";
import dialogAction from "@/components/dialog-action"; import dialogAction from "@/components/dialog-action";
import commentsPagination from "@/components/comments-pagination";
import { mapState } from "vuex"; import { mapState } from "vuex";
export default { export default {
components: {
tableFilter,
appList,
cesTable,
dialogAction,
commentsPagination,
},
data: () => ({ data: () => ({
level: 0, // 用户等级 level: 0, // 用户等级
type: 0, // 访问的页面 type: 0, // 访问的页面
listType: "",
cardType: "",
showFliterList: false,
filterList: [
{
name: "在线状态",
prop: "zxzt",
data: ["平台应用", "开发者应用", "未上架"],
},
{
name: "应用类型",
prop: "yylx",
data: ["基础工具", "通用工具", "业务应用"],
},
{
name: "业务领域",
prop: "ywly",
data: [
"公安应用",
"应急应用",
"政务服务应用",
"金融应用",
"交通应用",
"旅游应用",
],
},
{
name: "是否支持开发",
prop: "sfzckf",
data: ["全部", "支持开发", "不支持开发"],
},
],
appList: [
{
id: 1000001,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "mapvideos",
version: "V2.0",
time: "2019-04-11 12:50:30",
},
{
id: 1000002,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "语音识别",
version: "V2.0",
time: "2019-04-11 12:50:30",
},
{
id: 1000003,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
version: "V2.0",
time: "2019-04-11 12:50:30",
},
{
id: 1000004,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
version: "V2.1",
time: "2019-04-11 12:50:30",
},
{
id: 1000005,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
version: "V2.2",
time: "2019-04-11 12:50:30",
},
{
id: 1000006,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
version: "V2.3",
time: "2019-04-11 12:50:30",
},
{
id: 1000007,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
version: "V2.4",
time: "2019-04-11 12:50:30",
},
{
id: 100000,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
version: "V2.5",
time: "2019-04-11 12:50:30",
},
{
id: 1000009,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
version: "V2.6",
time: "2019-04-11 12:50:30",
},
{
id: 1000010,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
version: "V2.7",
time: "2019-04-11 12:50:30",
},
],
search: "",
pageSizes: [10, 50, 100],
pageSize: 10,
currentPage: 1,
confirmOptions: {
title: "",
message: "",
btnCancelText: "",
btnSubmitText: "",
item: null,
},
}), }),
computed: { computed: {
...mapState({ ...mapState({
...@@ -27,31 +237,324 @@ export default { ...@@ -27,31 +237,324 @@ export default {
pathName() { pathName() {
return this.yyglNav[this.level][this.type]; return this.yyglNav[this.level][this.type];
}, },
detailsUrl() {
let url = "";
if (this.level == 0 && this.type == 1) {
url = `/fwgl/${this.level}/${this.type}/applyserviceedit/`;
} else {
url = `/fwgl/${this.level}/${this.type}/servicedetail/`;
}
return url;
},
},
methods: {
searchChange(value) {
console.log(value);
},
filterChange(filter) {
console.log(filter);
},
deploymentAction(item) {
console.log("deployment " + item.name);
},
deleteAction(item) {
if (this.cardType === 0) {
this.confirmOptions.title = "删除提示";
this.confirmOptions.message =
"您需要先进行应用商店下架申请，应用处于下架状态时才能进行删除操作。";
this.confirmOptions.btnCancelText = "";
this.confirmOptions.btnSubmitText = "";
this.confirmOptions.confirmSubmit = () => {
console.log("deleteItem - " + item.name);
this.$refs.myConfirm.hideModel();
};
} else if (this.cardType === 1) {
this.confirmOptions.title = "是否删除部署的应用";
this.confirmOptions.message =
"该操作会导致正在调用该应用的用户被迫终止对应用的调用，删除前需向正在调用该应用的用户发送通知，自通知发送之日起，2日后应用将被删除。";
this.confirmOptions.btnCancelText = "";
this.confirmOptions.btnSubmitText = "发送通知";
this.confirmOptions.confirmSubmit = () => {
console.log("deleteItem - " + item.name);
this.$refs.myConfirm.hideModel();
};
}
this.$refs.myConfirm.showModel();
},
changePageSize(value) {
this.pageSize = value;
this.currentPage = 1;
},
changeCurrentPage(value) {
this.currentPage = value;
},
approvalItem(item) {
console.log("approval --- " + item.id);
},
deleteItem(item) {
console.log("delete --- " + item.id);
},
editItem(item) {
console.log("edit --- " + item.id);
/* this.$router.push(
`/fwgl/${this.level}/${this.type}/serviceedit/${item.id}`
); */
},
offLine(item) {
console.log("off line --- " + item.id);
},
goodsShelf(item) {
console.log("goods shelf", item.state);
}, },
components: {
cesTable,
dialogAction,
}, },
methods: {},
created() { created() {
this.level = parseInt(this.$route.params.level); this.level = parseInt(this.$route.params.level);
this.type = parseInt(this.$route.params.type); this.type = parseInt(this.$route.params.type);
let level = this.level;
let type = this.type;
// 普通用户 --- 应用仓库 card列表形式
if (level === 0 && type === 0) {
this.listType = "card";
this.cardType = 0;
}
// 普通用户 --- 我部署的应用
else if (level === 0 && type === 1) {
this.listType = "card";
this.cardType = 1;
}
// 普通用户 --- 申请的应用 card列表形式
else if (level === 0 && type === 2) {
this.listType = "table";
this.headers = [
{ label: "应用名称", prop: "name", type: "href", align: "left" },
{ label: "应用版本", prop: "date", type: "", align: "center" },
{ label: "应用类型", prop: "address", type: "", align: "center" },
{ label: "业务领域", prop: "address", type: "", align: "center" },
{ label: "在线区域", prop: "address", type: "", align: "center" },
{ label: "申请类型", prop: "address", type: "", align: "center" },
{ label: "申请时间", prop: "address", type: "", align: "center" },
{ label: "申请状态", prop: "address", type: "", align: "center" },
];
}
// 普通用户 --- 审批的应用
else if (level === 0 && type === 3) {
this.listType = "table";
this.headers = [
{ label: "应用名称", prop: "name", type: "href", align: "left" },
{ label: "应用版本", prop: "date", type: "", align: "center" },
{ label: "应用类型", prop: "address", type: "", align: "center" },
{ label: "业务领域", prop: "address", type: "", align: "center" },
{ label: "在线区域", prop: "address", type: "", align: "center" },
{ label: "申请类型", prop: "address", type: "", align: "center" },
{ label: "审批时间", prop: "address", type: "", align: "center" },
{ label: "审批状态", prop: "address", type: "", align: "center" },
{
label: "操作",
type: "Button",
align: "center",
width: 160,
btnList: [
{
type: "action-approval",
label: "审批",
line: "|",
},
{
type: "action-delete",
label: "删除",
},
],
},
];
}
// 组织管理员 --- 应用仓库管理
else if (level === 1 && type === 0) {
this.listType = "table";
this.headers = [
{ label: "应用名称", prop: "name", type: "href", align: "left" },
{ label: "应用版本", prop: "date", type: "", align: "center" },
{ label: "应用类型", prop: "address", type: "", align: "center" },
{ label: "业务领域", prop: "address", type: "", align: "center" },
{ label: "在线状态", prop: "address", type: "", align: "center" },
{ label: "创建时间", prop: "address", type: "", align: "center" },
{
label: "操作",
type: "Button",
align: "center",
width: 160,
btnList: [
{
type: "goods-shelf",
},
],
},
];
}
// 组织管理员 --- 部署的应用
else if (level === 1 && type === 1) {
this.listType = "table";
this.headers = [
{ label: "应用名称", prop: "name", type: "href", align: "left" },
{ label: "应用版本", prop: "date", type: "", align: "center" },
{ label: "应用类型", prop: "address", type: "", align: "center" },
{ label: "业务领域", prop: "address", type: "", align: "center" },
{ label: "上架区域", prop: "address", type: "", align: "center" },
{ label: "部署时间", prop: "address", type: "", align: "center" },
{ label: "部署区域", prop: "address", type: "", align: "center" },
];
}
// 组织管理员 --- 应用审批管理
else if (level === 1 && type === 2) {
this.listType = "table";
this.headers = [
{ label: "应用名称", prop: "name", type: "", align: "left" },
{ label: "应用版本", prop: "date", type: "", align: "center" },
{ label: "应用类型", prop: "address", type: "", align: "center" },
{ label: "业务领域", prop: "address", type: "", align: "center" },
{ label: "在线区域", prop: "address", type: "", align: "center" },
{ label: "申请类型", prop: "address", type: "", align: "center" },
{ label: "审批时间", prop: "address", type: "", align: "center" },
{ label: "申请状态", prop: "address", type: "", align: "center" },
{
label: "操作",
type: "Button",
align: "center",
width: 160,
btnList: [
{
type: "action-approval",
label: "审批",
line: "|",
},
{
type: "action-delete",
label: "删除",
},
],
},
];
}
// 超级管理员 --- 平台应用管理
else if (level === 2 && type === 0) {
this.listType = "table";
this.headers = [
{ label: "应用名称", prop: "name", type: "href", align: "left" },
{ label: "应用版本", prop: "date", type: "", align: "center" },
{ label: "应用类型", prop: "address", type: "", align: "center" },
{ label: "业务领域", prop: "address", type: "", align: "center" },
{ label: "在线状态", prop: "address", type: "", align: "center" },
{ label: "所属组织", prop: "address", type: "", align: "center" },
{
label: "操作",
type: "Button",
align: "center",
width: 240,
btnList: [
{
type: "action-edit",
label: "编辑",
line: "|",
},
{
type: "off-line",
label: "下线",
line: "|",
},
{
type: "action-delete",
label: "删除",
},
],
},
];
}
// 超级管理员 --- 应用部署管理
else if (level === 2 && type === 1) {
this.listType = "table";
this.headers = [
{ label: "应用名称", prop: "name", type: "href", align: "left" },
{ label: "应用版本", prop: "date", type: "", align: "center" },
{ label: "应用类型", prop: "address", type: "", align: "center" },
{ label: "业务领域", prop: "address", type: "", align: "center" },
{ label: "上架区域", prop: "address", type: "", align: "center" },
{ label: "所属组织", prop: "address", type: "", align: "center" },
{ label: "部署时间", prop: "address", type: "", align: "center" },
{ label: "部署区域", prop: "address", type: "", align: "center" },
];
}
// 超级管理员 --- 应用审批管理
else if (level === 2 && type === 2) {
this.listType = "table";
this.headers = [
{ label: "应用名称", prop: "name", type: "", align: "left" },
{ label: "应用版本", prop: "date", type: "", align: "center" },
{ label: "应用类型", prop: "address", type: "", align: "center" },
{ label: "业务领域", prop: "address", type: "", align: "center" },
{ label: "在线区域", prop: "address", type: "", align: "center" },
{ label: "申请类型", prop: "address", type: "", align: "center" },
{ label: "审批时间", prop: "address", type: "", align: "center" },
{ label: "申请状态", prop: "address", type: "", align: "center" },
{
label: "操作",
type: "Button",
align: "center",
width: 160,
btnList: [
{
type: "action-approval",
label: "审批",
line: "|",
},
{
type: "action-delete",
label: "删除",
},
],
},
];
}
// Error
else {
throw Error("The page doesn't exist");
}
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.list_container { .list_container {
height: 100%;
padding: 0 20px; padding: 0 20px;
} }
.table_container { .main_container {
height: calc(100% - 75px); height: calc(100% - 75px);
padding: 15px 20px; padding: 15px 20px;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
} }
.table_container .ces-table-page { .main_container.card {
margin-top: 42px; display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
.flex_grow {
flex-grow: 1;
}
.filter_action {
display: flex;
justify-content: space-between;
align-items: center;
} }
</style> </style>
static/data.json
View file @ 0099d224
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
"name": "王小虎", "name": "王小虎",
"address": "0", "address": "0",
"id": "ssss22", "id": "ssss22",
"state": 0 "state": 2
} }
], ],
"tableData1": [ "tableData1": [
......
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