Skip to content

M
memberTag-web
Commit 7fe18579 by caoyanzhi
Options

优化会员标签实现

parent 46ec614c
Showing with 82 additions and 180 deletions
src/view/memberGroup/edit-tag.vue
......@@ -53,11 +53,11 @@ export default {
handleClose() {
this.$emit('update:showEditTagPop', false);
},
async handleSave() {
handleSave() {
const ret = this.$refs.tagConfig.getTemplateData();
this.templateData = JSON.parse(JSON.stringify(ret));
this.tagId = this.tagData.tagId;
this.confirmPost().then(() => {
this.confirmPost().then(_ => {
this.$emit('update:showEditTagPop', false);
});
}
......
src/view/memberGroup/memberGroupEdit.vue
......@@ -303,7 +303,9 @@ export default {
editTags() {
this.editPopType = 'edit';
this.showEditTagPop = true;
this.tagData = Object.assign({}, this.tagData, this.ruleForm.selectedTags[this.activeTagsGroupIndex][this.activeTagIndex]);
this.$nextTick(() => {
this.tagData = Object.assign({}, this.tagData, this.ruleForm.selectedTags[this.activeTagsGroupIndex][this.activeTagIndex]);
});
},
// 选择标签
......
src/view/platformTag/member-tag.vue
......@@ -22,7 +22,7 @@
<el-button type="primary" class="add-newtag" @click="addNewTag" v-show="handTag == 1">新增标签</el-button>
</p>
<tag-container :data="memberTagList" :handTag="handTag" :groupId="groupId" @deleteHandTag="deleteHandTag" @returnTagData="returnTagData" ref="tagContainer"> </tag-container>
<tag-container :data="memberTagList" :handTag="handTag" :groupId="groupId" @deleteHandTag="deleteHandTag" @addTag="selectedTag" ref="tagContainer"> </tag-container>
<div class="page-box" v-if="total > 0">
<el-pagination
......@@ -55,7 +55,13 @@
<el-collapseTransition>
<div class="wapper">
<div class="inner">
<tags-group-list :selectedTagsData="selectedTags" :tagsGroupRelation="tagsGroupRelation" @addTags="addTags" @editTags="editTags" :activeTagsGroupIndex.sync="activeTagsGroupIndex" />
<tags-group-list
:selectedTagsData="selectedTags"
:tagsGroupRelation="tagsGroupRelation"
@editTags="editTags"
:activeTagsGroupIndex.sync="activeTagsGroupIndex"
:activeTagIndex.sync="activeTagIndex"
/>
<div class="form-item">
<label for="">分组名称</label>
<el-input v-model="tagConfig.groupName" :maxlength="10" style="width: 200px;" placeholder="请输入内容"></el-input>
......@@ -63,7 +69,7 @@
</div>
<div class="form-item">
<label for="">分组有效期</label>
<el-date-picker v-model="tagConfig.date" type="date" placeholder="选择日期"> </el-date-picker>
<el-date-picker v-model="tagConfig.date" type="date" placeholder="选择日期"></el-date-picker>
</div>
<div class="form-item">
<label for="">分组描述</label>
......@@ -88,6 +94,7 @@
</div>
</el-collapseTransition>
</div>
<edit-tag :showEditTagPop.sync="showEditTagPop" :tagData="tagData" :title="editPopType === 'add' ? '添加标签' : '编辑标签'" @returnTagData="returnTagData"></edit-tag>
</div>
</template>
......@@ -99,6 +106,7 @@ import TagsGroupList from '../memberGroup/tags-group-list';
import TagType from './tag-type';
import TagContainer from './tag-container';
import { getMemberTag, getMemberTagList, addNewGroup } from '@/request/api';
import EditTag from '../memberGroup/edit-tag';
Vue.component(CollapseTransition.name, CollapseTransition);
......@@ -111,7 +119,8 @@ export default {
navCrumb,
TagType,
TagContainer,
TagsGroupList
TagsGroupList,
EditTag
},
data() {
......@@ -126,6 +135,7 @@ export default {
effectiveStatus: 1 // 有效状态nage
},
activeTagsGroupIndex: 0,
activeTagIndex: 0,
groupShow: false,
selectedTags: [[]],
tagsGroupRelation: [],
......@@ -152,7 +162,6 @@ export default {
tagCategory: '', // 当前标签类别
pageSize: 20,
pageNum: 1,
currentPage: 1,
total: 0,
// 更新频率
......@@ -198,15 +207,23 @@ export default {
'28号'
]
}
]
],
showEditTagPop: false,
tagData: {},
editPopType: 'add'
};
},
computed: {
groupListNumber() {
return this.selectedTags.reduce((curr, el) => {
return curr + el.length;
}, 0);
let listNumber = 0;
let index = 0;
while (index < this.selectedTags.length) {
listNumber += this.selectedTags[index].length;
index++;
}
return listNumber;
}
},
......@@ -253,28 +270,32 @@ export default {
this.groupShow = true;
// }
},
returnTagData(list) {
// 把添加的标签数据加到显示组件中 activeTagsGroupIndex
// 判断是否已经存在于当前二维数组里面
this.selectedTags = JSON.parse(JSON.stringify(list));
// let middleList = this.selectedTags.reduce((curr, el) => {
// return curr.concat(el);
// }, []);
// let index = middleList.findIndex(el => el.tagId === list.tagId);
// // 不存在这个元素
// if (index < 0) {
// this.selectedTags[this.activeTagsGroupIndex].push(list);
// } else {
// // 否则就是修改
// }
returnTagData(tagData) {
let tagParams = JSON.parse(tagData.tagParams);
tagData.newTagVal = JSON.stringify(tagParams.selectedVal);
switch (this.editPopType) {
case 'add':
this.selectedTags[this.activeTagsGroupIndex].push(tagData);
break;
case 'edit':
// 注意有坑
let tagsGroup = this.selectedTags[this.activeTagsGroupIndex];
tagsGroup.splice(this.activeTagIndex, 1, { ...tagsGroup[this.activeTagIndex], ...tagData });
this.selectedTags.splice(this.activeTagsGroupIndex, 1, tagsGroup);
break;
}
},
editTags() {
//
this.$refs.tagContainer.dialogVisible = true;
this.editPopType = 'edit';
this.showEditTagPop = true;
this.$nextTick(() => {
this.tagData = Object.assign({}, this.tagData, this.selectedTags[this.activeTagsGroupIndex][this.activeTagIndex]);
});
},
addTags() {
//
selectedTag(tagData) {
this.editPopType = 'add';
this.showEditTagPop = true;
this.tagData = Object.assign({}, this.tagData, tagData);
},
async getTagList() {
const Data = await getMemberTag();
......
src/view/platformTag/tag-container.vue
<template>
<!-- 具体标签 -->
<div class="tag-some-list">
<div>
<el-table :data="tableData">
<el-table-column label="标签名称" prop="tagName">
<template slot-scope="scope">
<span class="tag-name">{{ scope.row.tagName }}</span>
<el-tooltip class="item" effect="dark" :content="scope.row.refersh ? '更新标签' : '添加标签'" placement="bottom">
<i class="iconfont icon-jia icon-tag-name" :class="{ 'icon-shoudonggengxin': scope.row.refersh }" @click="addTag(scope.row)"></i>
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="标签描述" prop="tagDescribe">
<template slot-scope="scope">
<div>{{ scope.row.tagDescribe ? scope.row.tagDescribe : '--' }}</div>
</template>
</el-table-column>
<el-table-column label="是否实时" prop="isActive">
<template slot-scope="scope">
<span> {{ scope.row.isActive == 1 ? '实时' : '非实时' }} </span>
</template>
</el-table-column>
<el-table-column label="操作" v-if="handTag == 1">
<template slot-scope="scope">
<el-button type="text" @click="editHandTag(scope.row)">编辑</el-button>
<el-button type="text" @click="deleteHandTag(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- <el-dialog title="添加标签" :visible.sync="dialogVisible" width="540" :before-close="handleClose" :append-to-body="true">
<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="optionFlag" :tagId="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="confirmOptions">确 定</el-button>
</span>
</el-dialog> -->
<edit-tag :showEditTagPop.sync="showEditTagPop" :tagData="tagData" :title="editPopType === 'add' ? '添加标签' : '编辑标签'" @returnTagData="returnTagData"></edit-tag>
<el-table :data="tableData">
<el-table-column label="标签名称" prop="tagName">
<template slot-scope="scope">
<span class="tag-name">{{ scope.row.tagName }}</span>
<el-tooltip class="item" effect="dark" :content="scope.row.refersh ? '更新标签' : '添加标签'" placement="bottom">
<i class="iconfont icon-jia icon-tag-name" :class="{ 'icon-shoudonggengxin': scope.row.refersh }" @click="addTag(scope.row)"></i>
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="标签描述" prop="tagDescribe">
<template slot-scope="scope">
<div>{{ scope.row.tagDescribe ? scope.row.tagDescribe : '--' }}</div>
</template>
</el-table-column>
<el-table-column label="是否实时" prop="isActive">
<template slot-scope="scope">
<span> {{ scope.row.isActive == 1 ? '实时' : '非实时' }} </span>
</template>
</el-table-column>
<el-table-column label="操作" v-if="handTag">
<template slot-scope="scope">
<el-button type="text" @click="editHandTag(scope.row)">编辑</el-button>
<el-button type="text" @click="deleteHandTag(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
// import TagMode from '@/components/tag/tag-mode';
import tagDetails from '@/components/tagDetail/mixin/index';
// import TagConfigOptions from '@/components/tag/tag-config-options';
import EditTag from '../memberGroup/edit-tag';
import { delThirdHandTag } from '@/request/api';
export default {
......@@ -62,12 +39,6 @@ export default {
mixins: [tagDetails],
components: {
// TagMode,
// TagConfigOptions,
EditTag
},
props: {
data: {
type: Array,
......@@ -84,59 +55,14 @@ export default {
data() {
return {
successAdd: false,
tableData: [],
dialogVisible: false,
dialogData: {},
TimeOptions: [],
optionFlag: false,
showEditTagPop: false,
tagData: {}, // 单个数据
editPopType: 'add',
templateData: [],
tagId: '',
postTemplateData: {
selectedVal: [],
template: []
},
activeTagsGroupIndex: 0,
selectedTags: [[]]
// tagData: {
// tagId: '',
// tagName: '',
// tagDescribe: '',
// isActive: 0, // 是否实时
// inputSearch: '' // 输入搜索
// }
tableData: []
};
},
methods: {
returnTagData(data) {
switch (this.editPopType) {
case 'add':
this.selectedTags[this.activeTagsGroupIndex].push(data);
break;
case 'edit':
this.selectedTags[this.activeTagsGroupIndex][this.activeTagIndex] = { ...data };
break;
}
this.$emit('returnTagData', this.selectedTags);
},
handleClose() {
this.dialogVisible = false;
this.optionFlag = false;
},
// 添加标签 弹框里面操作
addTag(list) {
this.dialogData = list;
this.tagData = list;
this.middleList = list;
if (list.tagId) {
this.optionFlag = true;
this.tagId = list.tagId;
this.showEditTagPop = true;
}
this.$emit('addTag', list);
},
editHandTag(list) {
this.$router.push({
......@@ -173,32 +99,9 @@ export default {
.catch(err => {
// console.log(err);
});
},
/**
*
*/
async confirmOptions() {
this.successAdd = false;
const ret = this.$refs.tagConfig.getTemplateData();
this.templateData = JSON.parse(JSON.stringify(ret));
this.confirmPost();
setTimeout(_ => {
// 如果成功就修改
if (this.successAdd) {
this.dialogVisible = false;
let index = this.tableData.findIndex(el => el.tagId === this.middleList.tagId);
this.tableData[index].refersh = true;
// 传出数据到tags-group-list
}
}, 200);
}
},
created() {
this.middleList = null;
},
watch: {
data: {
immediate: true,
......@@ -214,29 +117,5 @@ export default {
.tag-some-list {
margin: 0 20px;
overflow-y: auto;
.tag-name {
display: inline-block;
vertical-align: middle;
}
.icon-tag-name {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
.tag-desc {
font-size: 14px;
line-height: 26px;
color: #606266;
}
.tag-name {
font-size: 14px;
font-weight: bold;
}
.tag-value {
margin-top: 10px;
padding-top: 10px;
margin-bottom: 10px;
border-top: 1px solid #ebeef5;
}
}
</style>
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