Skip to content

Commit

Permalink
#417 收藏功能
Browse files Browse the repository at this point in the history
  • Loading branch information
@allen8203
allen8203 committed Apr 28, 2018
1 parent 21ace27 commit b63f57c
Show file tree
Hide file tree
Showing 5 changed files with 318 additions and 20 deletions.
70 changes: 70 additions & 0 deletions saturn-console-web/src/components/common/favorites/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import Favorites from './src/main';

/* eslint-disable no-param-reassign */
Favorites.install = function install(Vue, options) {
const { key = 'oaName', storage = localStorage } = options || {};
Vue.directive('favorites', {
bind(el, binding, vnode) {
/* eslint-disable no-param-reassign */
function handler() {
let path = location.hash.substring(1);
let title = path.split('?')[0].substring(1);
let group = '';
const map = JSON.parse(storage.getItem(key) || '{}');
const parent = vnode.context;
const self = vnode.componentInstance;
if (binding.modifiers.del) {
const item = map[binding.value];
delete map[binding.value];
storage.setItem(key, JSON.stringify(map));
self.$emit('favorites-del', true, 'del', item);
} else if (binding.modifiers.add) {
if (!Object.prototype.hasOwnProperty.call(map, path)) {
if (typeof binding.value === 'string') {
title = binding.value;
} else if (typeof binding.value === 'object') {
if (binding.value.title) {
title = binding.value.title;
}
if (binding.value.path) {
path = binding.value.path;
}
if (binding.value.group) {
group = binding.value.group;
}
}
map[path] = { title, path, group, date: new Date() };
storage.setItem(key, JSON.stringify(map));
self.$emit('favorites-add', true, 'add', map[path]);
} else {
self.$emit('favorites-add', false, 'add', map[path]);
}
}
parent.$set(parent, binding.arg || 'favorites', Object.values(map));
self.$emit('favorites-show', true, 'show', Object.values(map));
}
if (el.addEventListener) {
el.addEventListener('click', handler, false);
} else if (el.attachEvent) {
el.attachEvent('onclick', handler);
} else {
el.onclick = handler;
}
},
});
Vue.prototype.$favorites = function favorites(path, title, group) {
const map = JSON.parse(storage.getItem(key) || '{}');
if (title) {
const index = path || location.hash.substring(1);
Object.assign(map[index], { title, group });
storage.setItem(key, JSON.stringify(map));
return map[index];
} else if (path) {
return map[path];
}
return Object.values(map);
};
Vue.component(Favorites.name, Favorites);
};

export default Favorites;
202 changes: 202 additions & 0 deletions saturn-console-web/src/components/common/favorites/src/main.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
<template>
<div class="fav-container">
<el-popover trigger="click" ref="popover" title="我的收藏" @show="show = true" @hide="show = false" popper-class="my-fav" placement="bottom" width="400">
<el-form :model="form">
<el-table :data="favorites" :show-header="true" v-if="show">
<el-table-column property="title" label="名称" show-overflow-tooltip>
<template slot-scope="scope">
<el-form-item v-if="scope.row.path === editPath" style="margin-bottom: 0;">
<el-input v-model="form.title" :placeholder="scope.row.title"></el-input>
</el-form-item>
<router-link :to="{ path: scope.row.path}" v-else>
{{scope.row.title}}
</router-link>
</template>
</el-table-column>
<!-- <el-table-column property="date" label="日期" show-overflow-tooltip>
<template slot-scope="scope">
{{scope.row.date | formatDate}}
</template>
</el-table-column> -->
<el-table-column
property="group"
label="分组"
show-overflow-tooltip
:filters="groupsList"
:filter-method="filterGroup"
filter-placement="bottom-end">
<template slot-scope="scope">
<el-form-item v-if="scope.row.path === editPath" style="margin-bottom: 0;">
<el-select allow-create filterable size="small" v-model="form.group" style="width: 100%">
<el-option v-for="item in groupsList" :label="item.text" :value="item.value" :key="item.value"></el-option>
</el-select>
</el-form-item>
<span v-else>{{scope.row.group || '暂无分组'}}</span>
</template>
</el-table-column>
<el-table-column width="70" label="操作">
<template slot-scope="scope">
<div v-if="scope.row.path === editPath">
<el-tooltip class="item" effect="dark" content="保存" placement="top" key="floppy">
<el-button type="text" @click="submitForm(scope.row.path)"><i class="fa fa-floppy-o" aria-hidden="true"></i></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="取消" placement="top" key="undo">
<el-button type="text" @click.stop="resetFields"><i class="fa fa-undo" aria-hidden="true"></i></el-button>
</el-tooltip>
</div>
<div v-else>
<el-tooltip class="item" effect="dark" content="修改" placement="top" key="edit">
<el-button type="text" icon="el-icon-edit" @click="edit(scope.row, scope.row.path)"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top" key="delete">
<el-button type="text" icon="el-icon-delete text-danger" v-favorites:favorites.del="scope.row.path" @favorites-del="showMessage"></el-button>
</el-tooltip>
</div>
</template>
</el-table-column>
</el-table>
</el-form>
</el-popover>
<el-popover
trigger="click"
ref="popover1"
title="添加收藏"
placement="bottom"
v-model="visible"
popper-class="my-fav"
width="350">
<el-form :model="form">
<el-form-item label="名称" label-width="40px" style="margin: 9px 0;">
<el-input v-model="form.title" size="small" auto-complete="off" placeholder="输入名称"></el-input>
</el-form-item>
<el-form-item label="分组" label-width="40px" style="margin-bottom: 9px;">
<el-select clearable allow-create filterable size="small" v-model="form.group" style="width: 100%">
<el-option v-for="item in groupsList" :label="item.text" :value="item.value" :key="item.value"></el-option>
</el-select>
</el-form-item>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="default" @click="resetFields">取 消</el-button>
<el-button type="primary" size="mini" @click="submitForm()">确 定</el-button>
</div>
</el-form>
</el-popover>
<el-tooltip class="item" effect="dark" content="添加收藏" placement="top-start">
<el-button type="text" v-popover:popover1 v-favorites:favorites.add="unit" @favorites-add="showMessage">
<i :class="['fa', isFav ? 'fa-heart' : 'fa-heart-o']" aria-hidden="true"></i>
</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="查看收藏" placement="top-start">
<el-button type="text" v-popover:popover v-favorites:favorites>
<i :class="['fa', hasFav ? 'fa-star' : 'fa-star-o']" aria-hidden="true"></i>
</el-button>
</el-tooltip>
</div>
</template>
<script>
export default {
name: 'Favorites',
props: ['unit'],
data() {
return {
show: false,
visible: false,
favorites: this.$favorites(),
editPath: '',
form: {
title: '',
group: '',
},
};
},
watch: {
$route: function init() {
this.favorites = this.$favorites();
},
},
computed: {
isFav() {
return this.favorites.some(item => item.path === location.hash.substring(1));
},
hasFav() {
return this.favorites.length;
},
groupsList() {
const arr = [];
this.favorites.forEach((ele) => {
arr.push(ele.group);
});
const groupArr = Array.from(new Set(arr));
return groupArr.map((obj) => {
const rObj = {};
rObj.text = obj;
rObj.value = obj;
return rObj;
});
},
},
methods: {
filterGroup(value, row) {
return row.group === value;
},
resetFields() {
this.form.title = '';
this.form.group = '';
this.favorites = this.$favorites();
this.visible = false;
this.$nextTick(() => { this.editPath = ''; });
},
submitForm(path) {
this.$favorites(path, this.form.title, this.form.group);
this.favorites = this.$favorites();
this.resetFields();
this.editPath = '';
},
edit(data, editPath) {
this.form.title = data.title;
this.form.group = data.group;
this.editPath = editPath;
},
showMessage(status, op, data) {
if (op === 'add') {
this.edit(data);
const messageText = status ? '该资源收藏成功！' : '该资源已收藏，勿重复收藏！';
const messageType = status ? 'success' : 'error';
this.$message.customMessage(messageType, messageText);
} else if (op === 'del') {
this.$message.customMessage('success', '该收藏资源已移除成功!');
}
},
},
};
</script>
<style lang="sass">
.fav-container {
display: inline-block;
margin: 0 10px;
height: 40px;
line-height: 40px;
}
.my-fav {
&.el-popover {
padding: 8px;
}
.el-popover__title {
margin-bottom: 5px;
padding: 5px 0;
font-weight: 800;
font-size: 15px;
}
.el-table {
td, th {
height: 30px;
}
}
.el-table__column-filter-trigger {
i {
color: #0000ff;
font-size: 14px;
font-weight: bolder;
}
}
}
</style>
55 changes: 36 additions & 19 deletions saturn-console-web/src/components/common/top_bar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
<template>
<div>
<div class="top-bar">
<i class="fa fa-home"></i>
<span>当前域:
<router-link tag="a" :to="{ name: 'job_overview', params: { domain: domain } }">{{this.domain}}</router-link>
</span>
<span>所属集群: <router-link tag="a" :to="{ name: 'clusters_manage' }">{{domainInfo.zkAlias}}</router-link></span>
<el-tooltip placement="right">
<div slot="content">
运维负责人：<span>{{domainInfo.sysAdmin || '空'}}</span><br/>
开发负责人：<span>{{domainInfo.techAdmin || '空'}}</span>
</div>
<i class="el-icon-warning"></i>
</el-tooltip>
<div class="top-bar-left">
<i class="fa fa-home"></i>
<span>当前域:
<router-link tag="a" :to="{ name: 'job_overview', params: { domain: domain } }">{{this.domain}}</router-link>
</span>
<span>所属集群: <router-link tag="a" :to="{ name: 'clusters_manage' }">{{domainInfo.zkAlias}}</router-link></span>
<el-tooltip placement="right">
<div slot="content">
运维负责人：<span>{{domainInfo.sysAdmin || '空'}}</span><br/>
开发负责人：<span>{{domainInfo.techAdmin || '空'}}</span>
</div>
<i class="el-icon-warning"></i>
</el-tooltip>
</div>
<div class="top-bar-right">
<Favorites></Favorites>
</div>
</div>

</div>
Expand All @@ -22,20 +27,32 @@ export default {
props: ['domain', 'domainInfo'],
};
</script>
<style lang="sass" scoped>
<style lang="sass">
.top-bar {
padding: 0 30px;
height: 40px;
background: #38465a;
font-size: 15px;
line-height: 40px;
color: #97a8be;
>span {
margin-right: 15px;
a {
color: #c2d0d7;
&:hover {
color: #fff;
.top-bar-left {
float: left;
>span {
margin-right: 15px;
a {
color: #c2d0d7;
&:hover {
color: #fff;
}
}
}
}
.top-bar-right {
float: right;
.el-button--text {
.fa {
font-size: 16px;
color: #c2d0d7;
}
}
}
Expand Down
2 changes: 2 additions & 0 deletions saturn-console-web/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Vue from 'vue';
import ElementUI from 'element-ui';
import 'font-awesome/css/font-awesome.css';
import '@cloudux/noah-theme/lib/index.css';
import Favorites from './components/common/favorites/';
import './components';
import './components/filter';
import App from './App';
Expand All @@ -12,6 +13,7 @@ import './styles/iconfont/iconfont.css';
import './styles/main.scss';

Vue.use(ElementUI);
Vue.use(Favorites, { key: '' });
Vue.use(Utils);

/* eslint-disable no-new */
Expand Down
9 changes: 8 additions & 1 deletion saturn-console-web/src/utils/message.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { MessageBox, Loading, Notification } from 'element-ui';
import { MessageBox, Loading, Notification, Message } from 'element-ui';

export default {
openMessage(text) {
Expand Down Expand Up @@ -48,4 +48,11 @@ export default {
type: 'success',
});
},
customMessage(type, text) {
Message({
type,
message: text,
showClose: true,
});
},
};

0 comments on commit b63f57c

Please sign in to comment.