Skip to content

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

Merge branch 'xym' into dev

parents 14de8ffc 3fb1c3c9
Expand all Hide 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>
<div class="side_nav_bar">
<h3 class="side_nav_bar_title" @click="titleAction">
<img
:src="require('../assets/imgs/' + imgSrc + '.png')"
width="20"
style="margin-right: 10px;"
/>
<img :src="titleIcon" width="20" style="margin-right: 10px;" />
<span v-text="title"></span>
</h3>
<ul class="side_nav_bar_list">
......@@ -31,6 +27,10 @@ export default {
type: String,
default: () => "我的服务",
},
titleIcon: {
type: String,
default: () => require("../assets/imgs/tool_fuwu.png"),
},
titlePath: {
type: String,
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 @@
v-if="filterList && filterList.length"
size="small"
style="float: left;"
@click="filterAction"
@click="showFliterList = !showFliterList"
>
{{ showFliterList ? "收起" : "筛选" }}
<i
......@@ -30,53 +30,17 @@
prefix-icon="el-icon-search"
v-if="searchShow"
v-model="search"
placeholder="请输入账号、中文名"
style="max-width:220px;"
size="mini"
:placeholder="inputPlaceholder"
style="width:180px;"
@input="searchVal"
class="ces_toolbar_inp"
></el-input>
</div>
<ul
class="ces_filter_container"
ref="filterContainer"
v-if="filterList && filterData && filterToggle"
v-show="showFliterList"
>
<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>
<v-apaas-table-filter
:show="showFliterList"
:filter-list="filterList"
@filter-change="filterChange"
></v-apaas-table-filter>
<el-table
:data="selectedTabsPage"
:size="size"
......@@ -139,6 +103,28 @@
</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
class="cur_pointer"
v-else-if="btn.label == '删除' && btn.local"
......@@ -265,12 +251,14 @@ import tableSelect from "@/components/table-select";
import helper from "@/services/helper";
import DConfirm from "@/components/dialog-remove";
import tableUmhref from "@/components/table-umhref";
import tableFilter from "@/components/table-filter";
export default {
components: {
"v-apaas-table-input": tableInput,
"v-apaas-table-select": tableSelect,
"v-apaas-table-umhref": tableUmhref,
"d-confirm": DConfirm,
"v-apaas-table-filter": tableFilter,
},
props: {
// 表格型号：mini,medium,small
......@@ -297,6 +285,10 @@ export default {
type: Boolean,
default: false,
},
inputPlaceholder: {
type: String,
default: "请输入账号、中文名",
},
url: {
type: String,
default: "",
......@@ -401,19 +393,10 @@ export default {
search: "",
times: null,
showFliterList: false,
filterData: null, // 筛选条件
filterToggle: null, // 控制筛选条件的展开和收起
filterLength: 0, // 每行最多可容纳多少个过滤条件
};
},
mounted() {
this.getDataFromApiSync();
this.initFilterData();
window.addEventListener("resize", this.getFilterLength);
},
destroyed() {
window.removeEventListener("resize", this.getFilterLength);
},
watch: {
refreshInit: {
......@@ -429,12 +412,6 @@ export default {
},
deep: true,
},
filterList: {
handler(val) {
this.initFilterData();
},
deep: true,
},
},
methods: {
//本地删除
......@@ -561,52 +538,8 @@ export default {
getTableData() {
return this.selectedTabsPage;
},
isCurrentFilter(prop, filter) {
return (
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);
filterChange(filter) {
console.log(filter);
},
},
};
......@@ -761,9 +694,6 @@ em {
.ces_toolbar .ces_toolbar_btn {
margin-right: 10px;
}
.ces_toolbar .ces_toolbar_inp {
margin-right: 10px;
}
.ces-pagination {
margin-top: 20px;
padding-bottom: 20px;
......@@ -796,75 +726,6 @@ em {
text-overflow: ellipsis;
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 {
display: flex;
justify-content: flex-end;
......
src/pages/fwglList.vue
View file @ 0099d224
......@@ -6,7 +6,7 @@
<el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="table_container">
<div class="main_container">
<ces-table
class="r_yhgl_table"
size="mini"
......@@ -392,10 +392,9 @@ export default {
},
];
}
// Error
else {
this.headers = [];
throw Error("The page doesn't exist");
}
},
......@@ -468,14 +467,14 @@ export default {
.list_container {
padding: 0 20px;
}
.table_container {
.main_container {
height: calc(100% - 75px);
padding: 15px 20px;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
}
.table_container .ces-table-page {
.main_container .ces-table-page {
margin-top: 42px;
}
</style>
src/pages/yygl.vue
View file @ 0099d224
......@@ -2,6 +2,8 @@
<div class="yygl_container">
<side-nav-bar
:nav-list="navList"
title="我的应用"
:title-icon="require('../assets/imgs/tool_yingyong.png')"
:title-path="navList[0] && navList[0].path"
></side-nav-bar>
<div class="main_container">
......
src/pages/yyglList.vue
View file @ 0099d224
This diff is collapsed.
static/data.json
View file @ 0099d224
......@@ -27,7 +27,7 @@
"name": "王小虎",
"address": "0",
"id": "ssss22",
"state": 0
"state": 2
}
],
"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