Skip to content

M
memberTag-web
Commit 61f9cb87 by 无尘
Options

add: 增加暂存架和分类面包屑公共组件

parent fb6bc9d8
Showing with 538 additions and 3 deletions
src/components/tagCategory.vue
......@@ -2,7 +2,7 @@
公共标签列表分类面包屑组件,通过 tagLibName 参数不同,区分不同的标签列表,请求不同的标签库字段
-->
<template>
<div class="common-wrap__temp">
<div class="common-wrap__temp flex">
<div class="common-wrap__currentTag inline-block">
<a :href="'#/'+tagLibName+'Lib'" class="common-wrap__currentTag__name">全部</a>
<i class="el-icon-arrow-right m-l-8 m-r-8"></i>
......@@ -16,6 +16,22 @@
<a href="" class="common-wrap__childTag__name">{{item.name}}</a>
</template>
</div>
<div class="common-wrap__moreTag p-l-20">
<el-popover
placement="bottom-end"
trigger="click"
width="1049">
<!-- 更多列表 -->
<div class="common-wrap__moreTag__body">
<template v-for="(item,index) in childTagDatas">
<a href="" class="common-wrap__childTag__name">{{item.name}}</a>
</template>
</div>
<i slot="reference" class="el-icon-more"></i>
</el-popover>
</div>
</div>
</template>
<script>
......@@ -51,6 +67,116 @@
name: '其他二',
num: 12
},
{
id: 1,
name: '其他一',
num: 12
},
{
id: 2,
name: '其他二',
num: 12
},
{
id: 1,
name: '其他一',
num: 12
},
{
id: 2,
name: '其他二',
num: 12
},
{
id: 1,
name: '其他一',
num: 12
},
{
id: 2,
name: '其他二',
num: 12
},
{
id: 1,
name: '其他一',
num: 12
},
{
id: 2,
name: '其他二',
num: 12
},
{
id: 1,
name: '其他一',
num: 12
},
{
id: 2,
name: '其他二',
num: 12
},
{
id: 1,
name: '其他一',
num: 12
},
{
id: 2,
name: '其他二',
num: 12
},
{
id: 1,
name: '其他一',
num: 12
},
{
id: 2,
name: '其他二',
num: 12
},
{
id: 1,
name: '其他一',
num: 12
},
{
id: 2,
name: '其他二',
num: 12
},
{
id: 1,
name: '其他一',
num: 12
},
{
id: 2,
name: '其他二',
num: 12
},
{
id: 1,
name: '其他一',
num: 12
},
{
id: 2,
name: '其他二',
num: 12
},
{
id: 1,
name: '其他一',
num: 12
},
{
id: 2,
name: '其他二',
num: 12
},
],
}
},
......@@ -74,5 +200,20 @@
}
</script>
<style lang="scss" scoped>
.common-wrap__temp {
padding-right: 82px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.common-wrap__moreTag {
position: relative;
/*margin-left: 60px;*/
}
.el-icon-more {
font-size: 14px;
color: #909399;
cursor: pointer;
}
}
</style>
src/components/tagTemporary.vue 0 → 100644
<!--
公共暂存架组件
-->
<template>
<div class="common-wrap__fix">
<div class="common-wrap__fix__div">
<div class="common-wrap__fix__showSection clearfix">
<div class="common-wrap__fix__left" @click.stop="toggleTagList"><i class="iconfont icon-17 inline-block"></i><span class="inline-block">已选择<i class="p-lr-4 font-18">{{selectTag.length}}</i>个标签</span></div>
<el-button type="primary" class="fr" @click.stop="toMemberGroupEdit">新增会员组<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</div>
<div :class="['common-wrap__fix__hideList',!toggleTagListFlag? 'hide':'']" ><!-- v-if="toggleTagListFlag" -->
<div class="common-wrap__fix__title">已选标签</div>
<div class="common-wrap__fix__table">
<el-table
ref="multipleTable"
:data="tagListData"
tooltip-effect="dark"
max-height="333"
style="width: 100%"
@selection-change="handleSelectChange">
<el-table-column
type="selection"
fixed
>
</el-table-column>
<el-table-column
prop="name"
label="标签名称"
show-overflow-tooltip>
<!-- <template slot-scope="scope">{{ scope.row.name }}</template> -->
</el-table-column>
<el-table-column
prop="tagValue"
label="已选标签值"
show-overflow-tooltip>
</el-table-column>
<el-table-column
label="是否实时"
>
<template slot-scope="scope">
{{scope.row.isRealTime == 1? '实时':'非实时'}}
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" class="" @click="toDelTag(scope.row.id,scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
name: "TagTemporary",
props: {
},
data() {
return {
// 暂存架参数
toggleTagListFlag: false, // 是否显示参数
selectTag: [],// 已选择标签数据
tagListData: [
{
id: 1,
name: "123",
tagValue: '描述描述，最多200字，一行显示50字，默认显示一行',
isRealTime: 1
},
{
id: 1,
name: "123",
tagValue: '描述描述，最多200字，一行显示50字，默认显示一行',
isRealTime: 1
},
{
id: 1,
name: "123",
tagValue: '描述描述，最多200字，一行显示50字，默认显示一行',
isRealTime: 1
},
{
id: 1,
name: "123",
tagValue: '描述描述，最多200字，一行显示50字，默认显示一行',
isRealTime: 1
},
{
id: 1,
name: "123",
tagValue: '描述描述，最多200字，一行显示50字，默认显示一行',
isRealTime: 1
},
{
id: 1,
name: "123",
tagValue: '描述描述，最多200字，一行显示50字，默认显示一行',
isRealTime: 1
},
{
id: 1,
name: "123",
tagValue: '描述描述，最多200字，一行显示50字，默认显示一行',
isRealTime: 1
}
]
}
},
methods: {
/**
* 路由跳转
*/
changeRoute(route) {
this.$router.push(route);
},
/**
* 显示隐藏暂存架标签列表
*/
toggleTagList() {
var that = this
that.toggleTagListFlag = !!that.toggleTagListFlag? false: true;
},
/**
* 表格---多选
*/
handleSelectChange(val) {
var that = this
console.log(val);
that.selectTag = val;
},
/**
* 表格---删除
*/
toDelTag(id,index) {
var that = this
console.log(id,index)
that.tagListData.splice(index,1)
},
/**
* 跳转会员分组
*/
toMemberGroupEdit() {
var that = this
that.changeRoute('/memberGroupEdit')
}
},
watch:{
},
mounted() {
var that = this
console.log()
},
components: {
}
}
</script>
<style lang="scss" scoped>
</style>
src/view/platformTag/platformTagLib.vue
......@@ -51,7 +51,7 @@
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import tagLib from '@/components/taglib.vue';
import tagLib from '@/components/tagLib.vue';
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
name: "platformTagLib",
......
src/view/platformTag/platformTagList.vue
......@@ -83,11 +83,64 @@
</div>
</div>
<vue-gic-footer></vue-gic-footer>
<!-- 底部固定暂存架 -->
<!-- <div class="common-wrap__fix">
<div class="common-wrap__fix__div">
<div class="common-wrap__fix__showSection clearfix">
<div class="common-wrap__fix__left" @click.stop="toggleTagList"><i class="iconfont icon-17 inline-block"></i><span class="inline-block">已选择1个标签</span></div>
<el-button type="primary" class="fr">新增会员组<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</div>
<div :class="['common-wrap__fix__hideList',!toggleTagListFlag? 'hide':'']" >v-if="toggleTagListFlag"
<div class="common-wrap__fix__title">已选标签</div>
<div class="common-wrap__fix__table">
<el-table
ref="multipleTable"
:data="TagListData"
tooltip-effect="dark"
max-height="333"
style="width: 100%"
@selection-change="handleSelectChange">
<el-table-column
type="selection"
fixed
>
</el-table-column>
<el-table-column
prop="name"
label="标签名称"
>
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column
prop="tagValue"
label="已选标签值"
show-overflow-tooltip>
</el-table-column>
<el-table-column
label="是否实时"
>
<template slot-scope="scope">
{{scope.row.isRealTime == 1? '实时':'非实时'}}
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" class="" @click="toAddMyTagLib(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div> -->
<tag-temporary></tag-temporary>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import tagCategory from '@/components/tagCategory.vue';
import tagTemporary from '@/components/tagTemporary.vue';
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
name: "platformTagList",
......@@ -147,6 +200,9 @@
num: 12
},
],
}
},
methods: {
......@@ -194,6 +250,7 @@
var that = this
},
},
mounted() {
var that = this
......@@ -202,7 +259,8 @@
},
components: {
navCrumb,
tagCategory
tagCategory,
tagTemporary
}
}
</script>
......
static/css/public.css
......@@ -342,6 +342,14 @@ input:focus {
margin-right: 8px;
}
.p-lr-4 {
padding: 0 4px;
}
.p-l-20 {
padding-left: 20px;
}
.p-l-32 {
padding-left: 32px;
}
......@@ -403,6 +411,15 @@ input:focus {
font-size: 0;
}
/* 字号 */
i {
font-style: normal;
font-weight: normal;
}
.font-18 {
font-size: 18px;
}
.pagewrap {
margin: 20px 0;
text-align: right;
......@@ -633,6 +650,10 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
margin-bottom: 40px;
}
.common-wrap__fix__table .el-table__empty-text {
margin-bottom: 40px;
}
/* 会员标签 */
.common-lib__cell__fieldName::before {
content: '';
......@@ -762,6 +783,7 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
}
.common-wrap__cateTags .common-wrap__currentTag {
white-space: nowrap;
font-size: 0;
color: #303133;
}
......@@ -778,14 +800,53 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
}
.common-wrap__cateTags .common-wrap__childTag {
/*max-width: calc(100% - 280px);*/
vertical-align: middle;
margin-left: 6px;
padding-left: 10px;
font-size: 14px;
color: #606266;
border-left: 1px solid #979797;
white-space: nowrap;
overflow: hidden;
/*text-overflow: ellipsis;*/
}
.common-wrap__childTag .common-wrap__childTag__name{
margin-right: 10px;
padding: 2px 5px;
font-size: 14px;
color: #606266;
background: #F0F2F5;
border-radius: 2px;
}
.common-wrap__moreTag__body {
/*position: absolute;
top: 20px;
right: -10px;
min-width: 500px;
max-width: 1049px;
padding: 24px 12px 14px 22px;
background: #FFFFFF;
border: 1px solid rgba(235,238,245,1);
-webkit-box-shadow: 0px 2px 12px 0px rgba(6,19,33,0.10);
box-shadow: 0px 2px 12px 0px rgba(6,19,33,0.10);
z-index: 1;*/
}
.el-popover .common-wrap__childTag__name {
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
padding: 2px 5px;
font-size: 14px;
color: #606266;
background: #F0F2F5;
border-radius: 2px;
}
/* 分页 */
.common-wrap__page {
......@@ -800,3 +861,107 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
height: 28px;
line-height: 28px;
}
/* 公共底部固定部分 */
.common-wrap__fix {
position: fixed;
right: 0;
bottom: 0;
width: 706px;
height: 70px;
background: #04143A;
font-size: 16px;
color: #fff;
z-index: 2;
}
.common-wrap__fix__div {
position: relative;
width: 100%;
z-index: 2;
}
.common-wrap__fix__div .common-wrap__fix__showSection {
position: relative;
width: 100%;
line-height: 70px;
background: #04143A;
z-index: 2;
}
.common-wrap__fix__showSection .common-wrap__fix__left {
display: inline-block;
width: 528px;
cursor: pointer;
}
.common-wrap__fix__left i {
vertical-align: top;
padding: 0 15px;
font-size: 27px;
color: rgba(255,255,255,0.70);
}
.common-wrap__fix__left span {
position: relative;
vertical-align: top;
padding-left: 15px;
}
.common-wrap__fix__left span::before {
content: '';
position: absolute;
top: 26px;
left: 0;
width: 0;
height: 20px;
border-left: 1px solid #243969;
}
.common-wrap__fix__left span i {
padding: 0 4px;
font-weight: normal;
font-size: 22px;
color: #fff;
}
.common-wrap__fix__showSection .el-button {
width: 178px;
height: 70px;
padding: 0;
line-height: 70px;
border-radius: 0;
font-size: 16px;
}
.common-wrap__fix__hideList {
position: absolute;
bottom: 70px;
left: 0;
right: 0;
height: 404px;
padding: 24px 22px;
background: #fff;
-webkit-box-shadow: -3px -3px 10px 0px rgba(198,198,198,0.50);
box-shadow: -3px -3px 10px 0px rgba(198,198,198,0.50);
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 1;
}
.common-wrap__fix__hideList.hide {
bottom: -404px;
}
.common-wrap__fix__hideList .common-wrap__fix__title {
width: 100%;
margin-bottom: 20px;
font-size: 18px;
color: #303133;
}
.common-wrap__fix__hideList .common-wrap__fix__table {
width: 100%;
height: 333px;
}
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