Skip to content

M
memberTag-web
Commit 58d6961c by caoyanzhi
Options

新增会员分组

parent 54b4f003
Showing with 309 additions and 106 deletions
src/components/tags-detail/tags-detail.vue deleted 100644 → 0
<template>
<div class="m-l-60">
<tags-group
v-for="(item, index) in selectedTagData"
:key="index"
:tagsData="item"
:showTagsRelation="(index === 0 && selectedTagData.length > 1) || (index === 1 && selectedTagData.length > 2)"
:tagsGroupIndex="index"
tagsRelation="or"
@addTags="addTags"
@delTags="delTags"
@editTags="editTags"
@delTagsGroup="delTagsGroup"
@changeTagsGroupRelation="changeTagsGroupRelation"
/>
<el-button class="m-t-10 m-l-60 w-548 el-icon-plus color-blue" v-show="selectedTagData.length < 3" @click="addTagsGroup">
&nbsp;&nbsp;添加
</el-button>
</div>
</template>
<script>
import tagsGroup from './tags-group';
export default {
name: 'tags-detail',
props: {
selectedTagData: Array
},
components: {
tagsGroup
},
methods: {
// 添加一个标签组，最多只能有3个标签组
addTagsGroup() {
this.selectedTagData.length < 3 && this.selectedTagData.push([]);
},
// 删除一个标签组
delTagsGroup(tagGroupIndex) {
this.selectedTagData.splice(tagGroupIndex, 1);
},
// 添加标签
addTags(data) {
this.selectedTagData[data.tagsGroupIndex].push(data.tagData);
},
// 删除标签
delTags(data) {
this.selectedTagData[data.tagsGroupIndex].splice(data.tagIndex, 1);
},
// 编辑一个标签
editTags(data) {
this.selectedTagData[data.tagsGroupIndex].splice(data.tagIndex, 1, data.tagData);
},
// 修改两个标签组之间的关系
changeTagsGroupRelation(data) {
alert('修改两个标签组之间的关系');
}
}
};
</script>
<style lang="less" scoped>
.m-l-60 {
margin-left: 60px;
}
</style>
src/request/memberGroup.js 0 → 100644
import request from './index.js';
// 获取带标签数量的标签分组
export const getMemberTagCount = () =>
request({
url: '/memberTag/platformHomePageCountV2',
method: 'get',
params: {
requestProject: 'gic-member-tag-web'
}
});
src/view/memberGroup/memberGroupEdit.vue
......@@ -10,7 +10,7 @@
已选标签
<span class="color-c0c4cc font-14">（同一个输入框内标签关系为且）</span>
</div>
<tags-detail :selectedTagData="selectedTagData" v-model="selectedTagData" />
<tags-group-list :selectedTagData="selectedTagData" v-model="selectedTagData" />
</el-form-item>
<el-form-item label="" prop="groupName" class="w-220">
<div>分组名称</div>
......@@ -89,7 +89,7 @@
import navCrumb from '@/components/nav/nav.vue';
import addTagView from '@/components/addTagView.vue';
import tagShortDetail from '@/components/tagShortDetail.vue';
import tagsDetail from '@/components/tags-detail/tags-detail.vue';
import tagsGroupList from './tags-group-list.vue';
import strLength from '@/common/js/strlen';
import showMsg from '@/common/js/showmsg';
// import errMsg from '@/common/js/error';
......@@ -173,10 +173,10 @@ export default {
// tagId: 1,
// tagName: '有车一族',
// tagValue: '233',
// newTagVal: ''
// newTagVal: '',
// tagParams: '',
// isActive: 0,
// },
// isActive: 0
// }
]
],
......@@ -694,7 +694,7 @@ export default {
navCrumb,
addTagView,
tagShortDetail,
tagsDetail
tagsGroupList
}
};
</script>
......
src/view/memberGroup/tags-detail.css 0 → 100644
.tags-body .el-dialog__body {
padding: 0 !important;
}
src/view/memberGroup/tags-group-list.vue 0 → 100644
<template>
<div class="m-l-60">
<tags-group
v-for="(item, index) in selectedTagData"
:key="index"
:tagsData="item"
:showTagsRelation="(index === 0 && selectedTagData.length > 1) || (index === 1 && selectedTagData.length > 2)"
:tagsGroupIndex="index"
tagsRelation="or"
:showAddMenu="true"
:active="activeTagsGroup === index"
@addTags="addTags"
@delTags="delTags"
@editTags="editTags"
@delTagsGroup="delTagsGroup"
@changeTagsGroupRelation="changeTagsGroupRelation"
@checkTagsGroup="checkTagsGroup"
/>
<el-button class="m-t-10 m-l-60 w-548 el-icon-plus color-blue" v-show="selectedTagData.length < 3" @click="addTagsGroup">
&nbsp;&nbsp;添加
</el-button>
<!-- 添加标签 -->
<el-dialog :visible.sync="showAddTagPop" title="选择标签" custom-class="tags-body" width="980px">
<div class="tags">
<div class="tags-list">
<el-tree :data="tagsList" :props="{ label: 'nameStr', children: 'children' }" :default-expand-all="true" :highlight-current="true" @node-click="treeClick"></el-tree>
</div>
<div class="tags-table">
<div class="tags-search">
<el-input type="search" placeholder="请输入关键词回车搜索标签" prefix-icon="el-icon-search" @keydown.native.enter="searchTags"></el-input>
</div>
<tag-container :data="tagsGroupList"></tag-container>
<div class="page-box">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[20, 30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
v-if="total > 0"
></el-pagination>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
/**
* 添加标签的弹窗
* 7个地方需要切换标签组选中状态，分别是
* 默认标签组
* 点击下拉菜单添加按钮
* 点击下拉菜单删除按钮
* 新增一个标签组
* 编辑标签
* 删除标签
* 点击选择标签组
* */
import './tags-detail.css';
import tagsGroup from './tags-group';
import tagContainer from '@/view/platformTag/tag-container.vue';
import { getMemberTagList } from '@/request/api.js';
import { getMemberTagCount } from '@/request/memberGroup.js';
export default {
name: 'tags-detail',
props: {
selectedTagData: Array
},
components: {
tagsGroup,
tagContainer
},
data() {
return {
// 显示添加标签的弹窗
showAddTagPop: false,
// 标签分组的数据
tagsList: [],
// 一组标签的数据
tagsGroupList: [],
// 标签组选中状态的索引
activeTagsGroup: 0,
// 分页相关
pageNum: 1,
pageSize: 20,
total: 0
};
},
methods: {
// 添加一个标签组，最多只能有3个标签组
addTagsGroup() {
this.selectedTagData.length < 3 && this.selectedTagData.push([]);
this.activeTagsGroup = this.selectedTagData.length - 1;
},
// 删除一个标签组
delTagsGroup(data) {
this.selectedTagData.splice(data.tagsGroupIndex, 1);
this.activeTagsGroup = 0;
},
// 添加标签
addTags(data) {
this.activeTagsGroup = data.tagsGroupIndex;
this.showAddTagPop = true;
},
// 删除标签
delTags(data) {
this.selectedTagData[data.tagsGroupIndex].splice(data.tagIndex, 1);
this.activeTagsGroup = data.tagsGroupIndex;
},
// 编辑一个标签
editTags(data) {
this.selectedTagData[data.tagsGroupIndex].splice(data.tagIndex, 1, data.tagData);
this.activeTagsGroup = data.tagsGroupIndex;
},
// 修改两个标签组之间的关系
changeTagsGroupRelation(data) {
alert('修改两个标签组之间的关系');
},
// 点击标签组切换标签组的选中状态
checkTagsGroup(data) {
this.activeTagsGroup = data.tagsGroupIndex;
},
// 获取标签分类
getTagsList() {
getMemberTagCount().then(res => {
if (res.result && res.result.length) {
this.tagsList = res.result;
this.tagsList.forEach(first => {
first.nameStr = first.name;
first.children.forEach(second => {
second.nameStr = second.name;
second.children.forEach(item => {
item.nameStr = item.name;
if (item.count && item.count > 0) {
item.nameStr = `${item.name} (${item.count})`;
}
});
});
});
} else {
this.tagsList = [];
}
});
},
// 获取一组标签
getTagsGroupList(opt) {
opt = opt ? opt : {};
const params = {
requestProject: 'gic-member-tag-web',
search: opt.searchName || null, // 模糊查询的标签名
tagLevelGroupId: opt.id || 0, // 标签层级
tagType: opt.type || null, // 标签类型 手工标签传1
pageNum: this.pageNum,
pageSize: this.pageSize
};
getMemberTagList(params).then(res => {
if (res.result.result && res.result.result.length) {
this.tagsGroupList = res.result.result;
this.total = res.result.totalCount;
} else {
this.tagsGroupList = [];
this.total = 0;
}
console.log('tagsGroupList', this.tagsGroupList);
});
},
// 搜索标签
searchTags(e) {
if (e.target.value) {
this.pageNum = 1;
this.getTagsGroupList({
searchName: e.target.value
});
}
},
// 点击tree 选择标签组
treeClick(data, node) {
if (node.level === 3) {
this.pageNum = 1;
this.getTagsGroupList({
id: data.id,
type: data.handTag
});
}
},
// 每页条数改变
handleSizeChange(val) {
this.pageSize = val;
this.pageNum = 1;
this.getTagsGroupList();
},
// 页码改变
handleCurrentChange(val) {
this.pageNum = val;
this.getTagsGroupList();
}
},
mounted() {
this.getTagsList();
this.getTagsGroupList();
}
};
</script>
<style lang="less" scoped>
.m-l-60 {
margin-left: 60px;
}
.tags {
display: flex;
border-top: 1px solid #aaa;
.tags-list {
padding-top: 20px;
width: 20%;
height: 540px;
border-right: 1px solid #aaa;
overflow-x: scroll;
}
.tags-table {
padding-top: 20px;
width: 80%;
.tags-search {
margin: 0 0 20px 20px;
width: 300px;
}
}
}
.page-box {
transform: translate(0, -20px);
}
</style>
src/components/tags-detail/tags-group.vue → src/view/memberGroup/tags-group.vue
<template>
<div class="w-548 border-box m-l-60">
<div class="tags-group">
<div :class="['tags-group', { 'tags-group--active': active }]" @click="checkTagsGroup">
<!--右上角的下拉菜单-->
<el-dropdown class="tags-group__dropdown" placement="bottom-end">
<i class="el-icon-more"></i>
<el-popover width="200" placement="top" v-model="showDelPop" trigger="manual">
<p class="m-b-20">确认删除输入框及内部所有标签？</p>
<div class="text-right">
<el-button @click="showDelPop = false">取消</el-button>
<el-button type="primary" @click="delTagsGroup">确认</el-button>
</div>
<i slot="reference" class="el-icon-more"></i>
</el-popover>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="addTags">添加标签</el-dropdown-item>
<el-dropdown-item v-if="showAddMenu" @click.native="addTags">添加标签</el-dropdown-item>
<el-dropdown-item @click.native="showDelPop = true">删除</el-dropdown-item>
<el-dropdown-item class="tags-group__popover">
<el-popover width="200" placement="top" v-model="showDelPop">
<p class="m-b-20">确认删除输入框及内部所有标签？</p>
<div class="text-right">
<el-button @click="showDelPop = false">取消</el-button>
<el-button type="primary" @click="delTagsGroup">确认</el-button>
</div>
<span slot="reference"></span>
</el-popover>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!--展示选中的标签-->
<div class="tags-group__show">
<div class="tags-group__tag" v-for="(item, index) in tagsData" :key="index">
<div class="tags-group__tag" v-for="(item, index) in tagsData" :key="`${item.tagName}${index}`">
<span>{{ item.tagName }}</span>
<span class="tags-group__tag-name">【选择:{{ item.newTagVal }}】</span>
<i class="el-icon-edit" @click="editTags(index)"></i>
......@@ -31,14 +28,30 @@
</div>
<!--标签组之间的关系-->
<div class="tags-group__relation" v-show="showTagsRelation">
<el-button type="btn btn-default tags-group__btn" @click="changeTagsGroupRelation">
{{ tagsRelation === 'or' ? '或者' : tagsRelation === 'andNot' ? '剔除' : '' }}
</el-button>
<el-tooltip content="点击切换运算符" placement="bottom-start">
<el-button type="btn btn-default tags-group__btn" @click="changeTagsGroupRelation">
{{ tagsRelation === 'or' ? '或者' : tagsRelation === 'andNot' ? '剔除' : '' }}
</el-button>
</el-tooltip>
</div>
</div>
</template>
<script>
/**
* props
* @tagsData 一组标签的数据
* @showTagsRelation 是否显示与下一组标签之间的关系
* @tagsRelation 与下一组标签之间的关系（or或者，andNot剔除）
* @tagsGroupIndex 当前标签组的索引
* @showAddMenu 下拉菜单是否显示“添加标签”菜单项
* methods
* @delTagsGroup 删除一个标签组，将会emit(delTagsGroup事件，{tagsGroupIndex: 当前标签组的索引})
* @delTags 删除一个标签，将会emit(delTags事件， {tagsGroupIndex: 当前标签组的索引, tagIndex: 当前标签的索引})
* @addTags 添加一个标签，将会emit(addTags事件, {tagsGroupIndex: 当前标签组的索引})
* @editTags 编辑一个标签，将会emit(editTags事件, {tagsGroupIndex: 当前标签组的索引, tagIndex: 当前标签的索引})
* @changeTagsGroupRelation 切换与下一组标签之间的关系，将会emit(changeTagGroupRelation事件)
* */
export default {
name: 'tags-group',
props: {
......@@ -49,10 +62,15 @@ export default {
// 与下一组标签之间的关系 or 、andNot
tagsRelation: String,
// 当前标签组的索引
tagsGroupIndex: Number
tagsGroupIndex: Number,
// 下拉菜单是否显示"添加标签"菜单项
showAddMenu: Boolean,
// 标签组是否选中
active: Boolean
},
data() {
return {
// 确认删除标签组的弹窗
showDelPop: false
};
},
......@@ -61,21 +79,13 @@ export default {
delTagsGroup() {
this.showDelPop = false;
this.$emit('delTagsGroup', {
index: this.tagsGroupIndex
tagsGroupIndex: this.tagsGroupIndex
});
},
// 添加一个标签
addTags() {
this.$emit('addTags', {
tagsGroupIndex: this.tagsGroupIndex,
tagData: {
tagId: 1,
tagName: '有车一族',
tagValue: '233',
newTagVal: '',
tagParams: '',
isActive: 0
}
tagsGroupIndex: this.tagsGroupIndex
});
},
// 删除一个标签
......@@ -103,6 +113,11 @@ export default {
// 切换与下一个标签组之间的关系
changeTagsGroupRelation() {
this.$emit('changeTagsGroupRelation');
},
checkTagsGroup() {
this.$emit('checkTagsGroup', {
tagsGroupIndex: this.tagsGroupIndex
});
}
}
};
......@@ -113,17 +128,11 @@ export default {
margin-left: 60px;
}
/* 控制popover弹出位置的hack方法 */
.tags-group__popover {
height: 0;
transform: translate(82px, -100px);
}
.tags-group {
position: relative;
padding: 12px 0;
border: 1px solid #dcdfe6;
border-radius: 4px;
border-radius: 5px;
.tags-group__dropdown {
position: absolute;
......@@ -189,6 +198,10 @@ export default {
}
}
.tags-group--active {
box-shadow: 0 0 5px #1890ff;
}
.tags-group__relation {
position: relative;
transform: translate(-60px, 0);
......
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