Skip to content

M
memberTag-web
Commit 727113a5 by caoyanzhi
Options

将添加标签和编辑标签的弹窗抽出来做成一个组件

parent d0aebbfb
Showing with 276 additions and 174 deletions
src/view/memberGroup/edit-tag.vue 0 → 100644
<template>
<div>
<!-- 添加标签、编辑标签 -->
<el-dialog :title="title" :visible.sync="showEditTagPop" width="540" :before-close="handleClose">
<div class="dialog-box">
<p class="tag-name">{{ tagData.tagName }}</p>
<p class="tag-desc">根据会员信息扩展字段统计而来</p>
<p class="tag-desc">标签值设置</p>
<!-- 所有标签的配置项 -->
<tag-config-options v-if="tagData.tagId" :tagId="tagData.tagId" ref="tagConfig"></tag-config-options>
<div class="tag-mode">
<p>营销方式</p>
<tag-mode></tag-mode>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleSave">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import TagMode from '@/components/tag/tag-mode';
import TagConfigOptions from '@/components/tag/tag-config-options';
import tagDetails from '@/components/tagDetail/mixin/index';
export default {
name: 'edit-tag',
components: {
TagMode,
TagConfigOptions
},
props: {
// 是否现在编辑标签的弹窗
showEditTagPop: Boolean,
// 编辑标签的弹窗标题
title: String,
// 标签数据
tagData: Object
},
data() {
return {
tagId: '',
postTemplateData: {
selectedVal: [],
template: []
},
templateData: []
};
},
mixins: [tagDetails],
methods: {
handleClose() {
this.$emit('update:showEditTagPop', false);
},
async handleSave() {
const ret = this.$refs.tagConfig.getTemplateData();
this.templateData = JSON.parse(JSON.stringify(ret));
this.tagId = this.tagData.tagId;
this.confirmPost().then(() => {
this.$emit('update:showEditTagPop', false);
console.log('res', this.tagData);
});
}
}
};
</script>
<style scoped></style>
src/view/memberGroup/memberGroupEdit.vue
......@@ -14,6 +14,7 @@
:selectedTagsData="ruleForm.selectedTags"
:tagsGroupRelation="ruleForm.tagsGroupRelation"
:activeTagsGroupIndex.sync="activeTagsGroupIndex"
:activeTagIndex.sync="activeTagIndex"
:showAddMenu="true"
@addTags="addTags"
@editTags="editTags"
......@@ -59,20 +60,51 @@
</div>
</div>
</div>
<!-- 选择标签 -->
<el-dialog :visible.sync="showSelectTagPop" 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" v-model="searchData" @keydown.native.enter="searchTags"></el-input>
</div>
<tag-container :data="tagsGroupList" @addTag="selectedTag"></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>
<!-- 添加标签、编辑标签 -->
<edit-tag :showEditTagPop.sync="showEditTagPop" :tagData="tagData" :title="editPopType === 'add' ? '添加标签' : '编辑标签'" @returnTagData="returnTagData"></edit-tag>
<vue-gic-footer></vue-gic-footer>
</div>
</template>
<script>
/**
* #/member-tag
* */
import './tags-detail.css';
import navCrumb from '@/components/nav/nav.vue';
import tagContainer from '@/view/platformTag/tag-container.vue';
import editTag from './edit-tag';
import tagsGroupList from './tags-group-list.vue';
import strLength from '@/common/js/strlen';
import showMsg from '@/common/js/showmsg';
import { _debounce } from '@/common/js/public';
import { postRequest } from '@/api/api';
import { getMemberTagCount } from '@/request/memberGroup.js';
import { getMemberTagList } from '@/request/api.js';
export default {
name: 'memberGroupEdit',
......@@ -136,7 +168,12 @@ export default {
updateDay: '',
effectiveStatus: 1
},
// 标签组的索引
activeTagsGroupIndex: 0,
// 标签的索引
activeTagIndex: 0,
// 有效期时间选择器的配置
pickerOptions: {
disabledDate(time) {
......@@ -198,7 +235,28 @@ export default {
'28号'
]
}
]
],
// 是否显示选择标签的弹窗
showSelectTagPop: false,
// 标签分组的数据
tagsList: [],
// 一组标签的数据
tagsGroupList: [],
// 搜索框
searchData: '',
// 是否显示编辑标签的弹窗
showEditTagPop: false,
// 编辑标签的弹窗类型 add=新增 edit=编辑
editPopType: 'add',
// 单个标签的数据
tagData: {},
// 分页相关
pageNum: 1,
pageSize: 20,
total: 0
};
},
computed: {
......@@ -235,13 +293,33 @@ export default {
},
// 添加标签
addTags(data) {
console.log(`添加标签，标签组的索引是${this.activeTagsGroupIndex}`);
addTags() {
this.editPopType = 'add';
this.showSelectTagPop = true;
},
// 编辑标签
editTags(data) {
console.log(`编辑标签，标签组的索引是${data.tagsGroupIndex}，标签的索引是${data.tagsIndex}`);
editTags() {
this.editPopType = 'edit';
this.showEditTagPop = true;
this.tagData = [...this.ruleForm.selectedTags[this.activeTagsGroupIndex][this.activeTagIndex]];
},
// 选择标签
selectedTag(tagData) {
this.showEditTagPop = true;
this.tagData = { ...tagData };
},
// 保存选择的标签数据
returnTagData(data) {
switch (this.editPopType) {
case 'add':
this.ruleForm.selectedTags[this.activeTagsGroupIndex].push(data);
break;
case 'edit':
this.ruleForm.selectedTags[this.activeTagsGroupIndex][this.activeTagIndex] = { ...data };
break;
}
},
/**
......@@ -345,8 +423,82 @@ export default {
});
},
// 获取标签分类
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() {
if (this.searchData.length > 0) {
this.pageNum = 1;
this.getTagsGroupList({
searchName: this.searchData
});
}
},
// 点击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();
},
/**
* 编辑时候---获取分组数据
* 编辑会员分组的时候时候---获取会员分组数据
*/
getGroupData() {
postRequest('/member-tag-group/findOneDetial.json', { memberTagGroupId: this.ruleForm.memberTagGroupId })
......@@ -403,10 +555,14 @@ export default {
let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
this.ruleForm.effectiveDateTmp = Y + M + D + '23:59:59';
}
this.getTagsList();
this.getTagsGroupList();
},
components: {
navCrumb,
tagsGroupList
tagsGroupList,
tagContainer,
editTag
}
};
</script>
......@@ -444,4 +600,25 @@ export default {
color: #909399;
}
}
.tags {
display: flex;
border-top: 1px solid #aaa;
.tags-list {
padding-top: 20px;
width: 20%;
height: 620px;
border-right: 1px solid #aaa;
overflow-x: scroll;
}
.tags-table {
padding-top: 20px;
width: 80%;
.tags-search {
margin: 0 0 20px 20px;
width: 300px;
}
}
}
</style>
src/view/memberGroup/tags-group-list.vue
......@@ -19,33 +19,6 @@
<el-button class="m-t-10 w-548 el-icon-plus color-blue add-group-btn" v-show="selectedTagsData.length < 3" @click="addTagsGroup">
&nbsp;&nbsp;添加
</el-button>
<!-- 添加标签 -->
<el-dialog :visible.sync="showSelectTagPop" 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" v-model="searchData" @keydown.native.enter="searchTags"></el-input>
</div>
<tag-container :data="tagsGroupList" @returnTagData="returnTagData"></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>
......@@ -58,11 +31,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',
......@@ -72,6 +41,10 @@ export default {
type: Number,
default: 0
},
activeTagIndex: {
type: Number,
default: 0
},
// 选中的标签数据
selectedTagsData: Array,
// 标签组之间的关系
......@@ -83,25 +56,10 @@ export default {
}
},
components: {
tagsGroup,
tagContainer
tagsGroup
},
data() {
return {
// 显示添加标签的弹窗
showSelectTagPop: false,
// 标签分组的数据
tagsList: [],
// 一组标签的数据
tagsGroupList: [],
// 搜索框
searchData: '',
// 分页相关
pageNum: 1,
pageSize: 20,
total: 0
};
return {};
},
methods: {
// 添加一个标签组，最多只能有3个标签组
......@@ -110,7 +68,6 @@ export default {
this.selectedTagsData.push([]);
this.selectedTagsData.length > 1 && this.tagsGroupRelation.push('or');
}
// this.$emit('addTagsGroup');
this.checkTagsGroup({ tagsGroupIndex: this.selectedTagsData.length - 1 });
},
// 删除一个标签组
......@@ -121,21 +78,24 @@ export default {
},
// 添加标签
addTags(data) {
// 添加之前先判断已选中的标签中是否存在即将添加的标签
this.showSelectTagPop = true;
this.checkTagsGroup({ tagsGroupIndex: data.tagsGroupIndex });
this.$emit('addTags');
},
// 删除标签
delTags(data) {
this.selectedTagsData[data.tagsGroupIndex].splice(data.tagIndex, 1);
// this.checkTagsGroup({ tagsGroupIndex: data.tagsGroupIndex });
this.$confirm('确定要删除这个标签吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.selectedTagsData[data.tagsGroupIndex].splice(data.tagIndex, 1);
});
},
// 编辑一个标签
editTags(data) {
// 保存之前先判断已选中的标签中是否存在即将添加的标签
// this.checkTagsGroup({ tagsGroupIndex: data.tagsGroupIndex });
this.$emit('editTags', { tagsGroupIndex: data.tagsGroupIndex, tagIndex: data.tagIndex });
this.$emit('editTags');
this.$emit('update:activeTagsGroupIndex', data.tagsGroupIndex);
this.$emit('update:activeTagIndex', data.tagIndex);
},
// 修改两个标签组之间的关系
changeTagsGroupRelation(data) {
......@@ -145,94 +105,7 @@ export default {
checkTagsGroup(data) {
this.activeTagsGroupIndex = data.tagsGroupIndex;
this.$emit('update:activeTagsGroupIndex', 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() {
if (this.searchData.length > 0) {
this.pageNum = 1;
this.getTagsGroupList({
searchName: this.searchData
});
}
},
// 点击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();
},
// 判断已选中的标签中是否存在将要添加的标签
isSelected(tagData) {
return this.selectedTagsData.some(tagsGroup => {
return tagsGroup.some(el => el.tagId === tagData.tagId);
});
},
returnTagData(tagData) {
this.selectedTagsData[this.activeTagsGroupIndex].push(tagData);
}
},
mounted() {
this.getTagsList();
this.getTagsGroupList();
}
};
</script>
......@@ -246,27 +119,6 @@ export default {
border-style: dashed;
}
.tags {
display: flex;
border-top: 1px solid #aaa;
.tags-list {
padding-top: 20px;
width: 20%;
height: 620px;
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);
}
......
src/view/platformTag/tag-container.vue
......@@ -124,6 +124,8 @@ export default {
},
// 添加标签 弹框里面操作
addTag(list) {
this.$emit('addTag', list);
return;
this.dialogData = list;
this.tagData = list;
this.middleList = list;
......
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