Skip to content

M
memberTag-web
Commit 8185930e by liuchenxi
Options

update: 会员分组

parent ef1bb1ef
Showing with 566 additions and 160 deletions
index.html
......@@ -5,8 +5,8 @@
<link rel="shortcut icon" href="./static/img/favicon.ico"/>
<title></title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_688955_99jmfacmlpp.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_3276801_mkhlaisq2aq.css">
<script src="//at.alicdn.com/t/font_3276801_w3vkjjmzzz.js"></script>
<link rel="stylesheet" href="//at.alicdn.com/t/font_3276801_5bjk41qthxj.css">
<script src="//at.alicdn.com/t/font_3276801_5bjk41qthxj.js"></script>
</head>
<body style="background-color: #f0f2f5;min-width: 1400px;">
......
src/App.vue
......@@ -36,9 +36,12 @@ export default {
if (res.data.errorCode == 0) {
const uId = res.data.result && res.data.result.userId;
const isSuperAdmin = res.data.result && res.data.result.superAdmin;
// 部门权限,1可见本人，2可见部门，3可见所有
const departAuth = res.data.result && res.data.result.departAuth;
const enableAccessControl = res.data.result && res.data.result.enableAccessControl;
this.$store.commit('changeSuperAdmin', isSuperAdmin);
this.$store.commit('changeEnableAccess', enableAccessControl);
this.$store.commit('changeSuperAdmin', isSuperAdmin);
this.$store.commit('changeDepartAuth', departAuth);
if (this.uniqueId === '') {
this.$store.commit('changeUniqueId', uId);
}
......
src/components/selected-tags-list.vue
<template>
<div class="flex m-t-20 tags">
<div class="flex tags">
<div v-for="(tags, index) in tagsListFilter" :key="tags" :style="`width: ${100 / tagsList.length}%`" class="tag-group">
<ul class="tag-list">
<li class="tag-item" v-for="tag in tags" :key="tag.tagId">
......
src/components/tag/batch-list.vue
<template>
<el-dialog title="" width="400px" top="30vh" custom-class="cre-dialog" :visible.sync="batchDialog" center :modal-append-to-body="false" :before-close="closeBatch">
<el-dialog title="" width="416px" top="30vh" custom-class="cre-dialog" :visible.sync="batchDialog" center :modal-append-to-body="false" :before-close="closeBatch">
<p class="tips" slot="title">{{ operNum == 0 ? '批量失效' : operNum == 1 ? '批量删除' : '修改所属分类' }}</p>
<div class="batch-content">
<div v-if="operNum == 0">
<div class="el-message-box__status el-icon-warning"></div>
<p class="batch-txt">该分组失效后，不再更新数据，确认要失效吗？</p>
<div class="el-message-box__status el-alert__icon el-icon-warning is-big icon"></div>
<p class="batch-txt">{{ list.length ? '当前分组正在被以下模块使用，失效后使用该分组的活动将匹配不到分组下的人群并且分组客户数据将同步清空，是否继续处理为失效？' : '失效后非实时分组客户数据将同步清空，是否继续处理为失效？'}}</p>
</div>
<div v-if="operNum == 1">
<div class="el-message-box__status el-icon-warning"></div>
<p class="batch-txt">一旦删除无法恢复，其对应的固化人群也会删除，确认要批量删除分组吗？</p>
<div class="el-message-box__status el-alert__icon el-icon-warning is-big icon"></div>
<p class="batch-txt">{{ list.length ? '存在分组正在被以以下模块使用，请先删除对应的内容后再来删除分组。' : '删除后无法恢复，确认要删除该分组吗？' }}</p>
</div>
<div v-if="operNum == 2">
<p class="title">
......@@ -23,22 +23,23 @@
</ul>
<p class="group-name">选中的分组：{{ groupName }}</p>
</div>
<template v-if="operNum == 0 || operNum == 1">
<p v-for="(item, index) in list" :key="index" class="item">
{{ item.groupName }}：<a :href="item.businessLink" target="_blank" @click="isOpenPage = true">{{ item.businessModuleName }}-{{ item.businessName }}</a>
</p>
</template>
</div>
<div class="cre-btn">
<div class="cre-btn" v-if="!(operNum == 1 && list.length)">
<el-button @click="closeBatch">取 消</el-button>
<el-button type="primary" @click="confirmBatch">确 定</el-button>
</div>
<!-- <span slot="footer" class="dialog-footer">
<el-button @click="closeBatch">取 消</el-button>
<el-button type="primary" @click="confirmBatch">确 定</el-button>
</span> -->
</el-dialog>
</template>
<script>
import { memberGroupList, batchModifyEffective, batchDeleteGroup, batchChangeGroup, batchDeleteGroupVerify } from '@/request/api';
import { memberGroupList, getGroupUseList, batchModifyEffective, batchDeleteGroup, batchChangeGroup } from '@/request/api';
import errMsg from '@/common/js/error';
export default {
name: 'batch-list',
......@@ -54,13 +55,13 @@ export default {
operNum: -1,
groupList: [],
groupName: '',
listIndex: -1
listIndex: -1,
list: []
};
},
methods: {
confirmBatch() {
console.log(this.operateNumber);
let batchNum = this.operateNumber;
let tagIds = this.selectionList.map(el => el.memberTagGroupId);
const param = {
......@@ -77,23 +78,21 @@ export default {
message: '修改成功'
});
}
this.$emit('submit');
})
.catch(err => {
console.log(err);
});
} else if (batchNum == 1) {
batchDeleteGroupVerify(param).then(res => {
if (res.errorCode != 1) return;
if ((res.result || []).length) return this.$emit('after-del', res.result);
batchDeleteGroup(param).then(res => {
if (res.errorCode == 1) {
(res.result || []).length || this.$message.success({
message: '删除成功'
});
this.$emit('after-del', res.result);
}
});
})
batchDeleteGroup(param).then(res => {
if (res.errorCode == 1) {
(res.result || []).length || this.$message.success({
message: '删除成功'
});
this.$emit('after-del', res.result)
this.$emit('submit', res.result);
}
});
} else if (batchNum == 2) {
if (!this.groupName) {
this.$message.warning({
......@@ -110,6 +109,7 @@ export default {
message: '修改分类成功'
});
}
this.$emit('submit');
})
.catch(err => {
console.log(err);
......@@ -144,7 +144,25 @@ export default {
.catch(err => {
console.log(err);
});
}
},
checkGroup() {
let tagIds = this.multipleSelection;
const params = {
memberTagGroupIds: tagIds.map(el => el.memberTagGroupId).toString(),
requestProject: 'gic-member-tag-web',
operateType: this.operateNumber == 0 ? 1 : this.operateNumber == 1 ? 2 : null
};
getGroupUseList(params).then(res => {
const { errorCode, result } = res;
if (errorCode === 1) {
this.list = result || [];
return;
}
errMsg.errorMsg(res.data);
}).catch(err => {
console.log(err);
});
},
},
created() {
......@@ -153,6 +171,7 @@ export default {
watch: {
batchVisiable(newval) {
newval && [1,0].includes(this.operateNumber) && this.checkGroup();
this.batchDialog = newval;
this.getMemberGroupList();
},
......@@ -170,9 +189,14 @@ export default {
</script>
<style lang="scss" scoped>
/deep/ .el-dialog__body {
padding-bottom: 24px;
}
.batch-txt {
padding-left: 35px;
padding-top: 7px;
color: #303133;
line-height: 20px;
}
.batch-title {
color: #333;
......@@ -182,6 +206,13 @@ export default {
font-size: 14px;
font-weight: bold;
}
.item {
padding-left: 34px;
margin-top: 16px;
}
a {
color: #2f54eb;
}
.batch-ul {
overflow-y: auto;
max-height: 200px;
......@@ -208,4 +239,17 @@ export default {
font-size: 14px;
color: #2F54EB;
}
.item:not(:last-of-type) {
margin-bottom: 10px;
}
a {
color: #2f54eb;
}
.icon {
font-size: 21px;
position: absolute;
color: #fa8c16;
left: 17px;
top: 74px;
}
</style>
src/request/api.js
......@@ -140,6 +140,14 @@ export const batchModifyEffective = params =>
params: params
});
// 失效分组引用校验
export const batchDeactiveGroupVerify = params =>
request({
url: '/member-tag-group/updateBatchVerify',
method: 'get',
params: params
});
// 删除分组校验
export const batchDeleteGroupVerify = params =>
request({
......@@ -156,6 +164,14 @@ export const batchDeleteGroup = params =>
params: params
});
// 获取引用列表
export const getGroupUseList = params =>
request({
url: '/member-tag-group/getGroupUseCondition ',
method: 'get',
params: params
});
// 分组归属
export const batchChangeGroup = params =>
request({
......
src/store/store.js
......@@ -13,7 +13,8 @@ export default new Vuex.Store({
uniqueId: '',
isSuperAdmin: 0,
delTrashNum: 0,
enableAccessControl: 0
enableAccessControl: 0,
departAuth: 0
},
mutations: {
[types.LOGIN]: (state, data) => {
......@@ -45,5 +46,8 @@ export default new Vuex.Store({
['changeEnableAccess'](state, data) {
state.enableAccessControl = data;
},
['changeDepartAuth'](state, data) {
state.departAuth = data;
}
}
});
src/view/manualTag/manualTagEdit.vue
......@@ -28,7 +28,7 @@
<el-input v-model="ruleForm.tagSort" placeholder="请输入1-100000之间的整数" class="w-full" @input="validateInputSort" @blur="blurSort" />
</el-form-item>
<el-form-item label="标签类型：" prop="tagType" v-if="currentType == 'manual'">
<el-radio-group v-model="ruleForm.tagType" :disabled="isEdit">
<el-radio-group v-model="ruleForm.tagType" :disabled="isEdit && isEchoCheck">
<el-radio :label="0">单选</el-radio>
<el-radio :label="1">多选</el-radio>
</el-radio-group>
......@@ -120,7 +120,8 @@ export default {
tagValTableData: [],
preSyncWmStatus: 0,
deleteList: [],
isEdit: false
isEdit: false,
isEchoCheck: false
};
},
watch: {
......@@ -287,6 +288,7 @@ export default {
this.ruleForm.tagSort = result.sort;
this.ruleForm.tagType = result.isMultiple;
this.ruleForm.tagValue = result.itemList || [];
this.isEchoCheck = result.isMultiple;
if (result.itemList.length) {
this.ruleForm.tagValue = result.itemList.map(el => {
el.id = GenNonDuplicateID();
......
src/view/manualTag/tag-value-item.vue
......@@ -5,7 +5,7 @@
<i v-if="currentLength < 50" class="iconfont plus icon margin icon-PlusOutlined" @click="add" />
<i v-else class="icon margin" />
</template>
<i v-if="currentLength > 1" class="iconfont delete icon icon-delete" @click="del" />
<i v-if="currentLength > 1 && !item.tagItemId" class="iconfont delete icon icon-delete" @click="del" />
</div>
</template>
......
src/view/memberGroup/choose-tag-table.vue 0 → 100644
<template>
<!-- 具体标签 -->
<div class="tag-some-list">
<el-table :data="tableData">
<el-table-column label="标签名称" prop="tagName" min-width="120">
<template slot-scope="scope">
<span class="tag-name">{{ scope.row.tagName }}</span>
<el-tooltip class="item" effect="dark" content="添加标签" placement="top">
<i class="iconfont icon-tag-name icon-PlusOutlined" v-if="getCodeAuth" :limit-code="getCode" v-track:common.click="handleTrackParam('addTag', scope.row)" @click="addTag(scope.row)"></i>
</el-tooltip>
</template>
</el-table-column>
<el-table-column v-if="type != 'system'" label="覆盖人数" prop="memberCount" min-width="140" show-overflow-tooltip>
<template slot="header">
覆盖人数
<el-popover width="260" trigger="hover" placement="top">
<div style="color: #303133;">
标签下不同标签值可能覆盖相同的会员，因此此处“标签”覆盖人数去重显示（如“喜欢的颜色-白、红、黑、蓝”，某会员身上可能同时具备“白、黑”二种标签值）
</div>
<i slot="reference" class="iconfont icon-QuestionCircleOutlined refresh"></i>
</el-popover>
</template>
<template slot-scope="scope">
{{ scope.row.memberCount ? (scope.row.memberCount | formatNum) + '人' : '--' }}
</template>
</el-table-column>
<el-table-column v-else label="是否实时" prop="isActive" min-width="40">
<template slot-scope="scope">
<span> {{ scope.row.isActive == 1 ? '实时' : '非实时' }} </span>
</template>
</el-table-column>
<el-table-column min-width="200" label="标签描述" prop="tagDescribe" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.tagDescribe || '--'}}
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import Emitter from '@/mixins/emitter';
import tagDetails from '@/components/tagDetail/mixin/index';
export default {
name: 'tag-container',
mixins: [tagDetails, Emitter],
props: {
data: {
type: Array,
default() {
return [];
}
},
type: String,
refersh: Object
},
data() {
return {
tableData: [],
tagData: {}
};
},
methods: {
addTag(list) {
this.$emit('addTag', list);
},
handleTrackParam(type, data) {
let fn = {
addTag: () => {
return {
data: { id: data.tagId, name: data.tagName }
};
}
}[type];
return { fn: () => {}, data: fn ? fn() : {} };
}
},
watch: {
data: {
immediate: true,
handler(newval) {
this.tableData = newval;
}
},
refersh: {
immediate: true,
handler(newval) {
// 刷新
if (newval.changeRefersh) {
let index = this.tableData.findIndex(el => newval.tagId === el.tagId);
this.tableData[index].refersh = true;
}
}
}
},
computed: {
getCodeAuth() {
let code = 'memberTagCreateGroup';
return this.$getButtonLimit(this.$buttonCode[code]);
},
getCode() {
let code = 'memberTagCreateGroup';
return this.$buttonCode[code];
}
}
};
</script>
<style lang="scss" scoped>
.tag-some-list {
margin-left: 20px;
overflow-y: auto;
}
.icon-tag-name {
display: inline-block;
vertical-align: bottom;
font-size: 16px;
cursor: pointer;
color: #303133;
transition: all 0.3s;
color: #2f54eb;
&:hover {
transform: scale(1.25);
}
}
.refresh {
color: #606266;
position: relative;
top: 1px;
}
</style>
src/view/memberGroup/delete-deactive-dialog.vue 0 → 100644
<template>
<el-dialog :visible.sync="visible" custom-class="delete-dialog" width="416px" @close="onClose">
<div class="dialog-content">
<i class="el-alert__icon el-icon-warning is-big icon" />
<h2>{{ title }}</h2>
<p class="desc">{{ desc }}</p>
<p v-for="(item, index) in list" :key="index" class="item">
<a :href="item.businessLink" target="_blank" @click="isOpenPage = true">{{ item.businessModuleName }}-{{ item.businessName }}</a>
</p>
<footer class="footer" v-if="!(type == 'delete' && list.length)">
<el-button class="ml10" @click="$emit('update:visible',false)">取消</el-button>
<el-button type="primary" @click="onSubmit">{{ type == 'deactive' ? '失效' : '删除' }}</el-button>
</footer>
</div>
</el-dialog>
</template>
<script>
import errMsg from '@/common/js/error';
import {
getGroupUseList
} from '@/request/api';;
export default {
props: {
visible: Boolean,
data: {
type: Object,
default: () => ({})
},
type: String,
title: String
},
data() {
return {
list: [],
isOpenPage: false
};
},
computed: {
desc() {
if (this.type == "deactive") {
return this.list.length ? '当前分组正在被以下模块使用，失效后使用该分组的活动将匹配不到分组下的人群并且分组客户数据将同步清空，是否继续处理为失效？' : '失效后非实时分组客户数据将同步清空，是否继续处理为失效？';
} else {
return this.list.length ? '存在分组正在被以以下模块使用，请先删除对应的内容后再来删除分组。' : '删除后无法恢复，确认要删除该分组吗？';
}
}
},
methods: {
checkGroup() {
const params = {
memberTagGroupIds: this.data.memberTagGroupId,
requestProject: 'gic-member-tag-web',
operateType: this.type == 'deactive' ? 1 : 2
};
getGroupUseList(params).then(res => {
const { errorCode, result } = res;
if (errorCode === 1) {
this.list = result || [];
return;
}
errMsg.errorMsg(res.data);
});
},
onClose() {
this.$emit('update:visible', false);
this.$emit('close');
},
onSubmit() {
this.$emit('update:visible', false);
this.$emit('submit', this.data, this.type);
},
subWindowChange() {
addEventListener('visibilitychange', this.visibleityWindowFn)
},
visibleityWindowFn() {
if (!document.hidden && this.isOpenPage) this.checkGroup();
}
},
watch: {
visible(newVal) {
newVal && this.checkGroup();
this.subWindowChange();
if (!newVal) {
removeEventListener('visibilitychange', this.visibleityWindowFn);
this.isOpenPage = false;
};
}
}
};
</script>
<style scoped lang="scss">
/deep/ .el-dialog__header {
padding: 0;
}
/deep/ .el-dialog__body {
padding-bottom: 20px;
}
.delete-dialog {
position: relative;
.dialog-content {
padding: 5px 10px 4px 50px;
h2 {
color: #303133;
font-weight: bold;
font-size: 16px;
margin-bottom: 9px;
}
.desc {
font-size: 14px;
font-weight: 400;
color: #303133;
line-height: 20px;
margin-bottom: 16px;
}
.item:not(:last-of-type) {
margin-bottom: 10px;
}
a {
color: #2f54eb;
}
.footer {
margin-top: 24px;
text-align: right;
}
}
}
.ml10 {
margin-left: 10px;
}
.icon {
font-size: 21px;
position: absolute;
color: #fa8c16;
left: 30px;
top: 22px;
}
</style>
src/view/memberGroup/index.vue
<template>
<div id="index">
<!-- <div id="index"> -->
<transition name="fade" mode="out-in">
<!-- 缓存已经填好内容的页面 -->
<router-view></router-view>
</transition>
</div>
<!-- </div> -->
</template>
<script>
......@@ -193,85 +193,83 @@ export default {
};
</script>
<style type="text/scss" lang="scss">
#index {
.content {
padding-top: 64px;
/* height: calc(100% - 64px);
overflow-y: auto;*/
min-width: 1400px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.content-body {
display: flex;
overflow: hidden;
.right-wrap {
flex: 1;
overflow: auto;
.content {
padding-top: 64px;
/* height: calc(100% - 64px);
overflow-y: auto;*/
min-width: 1400px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.content-body {
display: flex;
overflow: hidden;
.right-wrap {
flex: 1;
overflow: auto;
width: 100%;
.right-content {
width: 100%;
.right-content {
width: 100%;
padding: 24px;
min-height: 615px;
.right-box {
/*background: #fff;*/
/*padding: 24px;*/
}
}
&.near-store-contain {
.right-content {
min-height: 570px;
}
padding: 24px;
min-height: 615px;
.right-box {
/*background: #fff;*/
/*padding: 24px;*/
}
/deep/ .el-tabs__nav {
z-index: 1;
}
&.near-store-contain {
.right-content {
min-height: 570px;
}
}
.content-body .left-menu {
-ms-flex: 0 0 200px;
flex: 0 0 200px;
width: 200px;
height: 100%;
background: #020b21;
transition: all 0.2s ease;
position: fixed;
z-index: 5;
/deep/ .el-tabs__nav {
z-index: 1;
}
}
.common-wrap {
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
.content-body .left-menu {
-ms-flex: 0 0 200px;
flex: 0 0 200px;
width: 200px;
height: 100%;
background: #020b21;
transition: all 0.2s ease;
position: fixed;
z-index: 5;
}
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 100px);
.common-wrap {
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
.right-box {
background: #fff;
padding: 24px;
}
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 100px);
.right-box {
background: #fff;
padding: 24px;
}
}
}
}
}
/deep/ .el-submenu__title {
height: 40px;
line-height: 40px;
}
/deep/ .el-submenu__title {
height: 40px;
line-height: 40px;
}
/* 表格为空 */
/deep/ .el-table__empty-block {
height: 256px;
}
/* 表格为空 */
/deep/ .el-table__empty-block {
height: 256px;
}
/* 隐藏 头部 */
......
src/view/memberGroup/tags-group-list.vue
<template>
<div :class="{ 'm-l-60': selectedTagsData.length > 1 }">
<tags-group
v-for="(item, index) in selectedTagsData"
:key="item"
:tagsData="item"
:showTagsRelation="index != selectedTagsData.length - 1"
:tagsGroupIndex="index"
:tagsRelation="tagsGroupRelation[index]"
:showAddMenu="showAddMenu"
:show-del-menu="selectedTagsData.length > 1"
:active="activeTagsGroupIndex === index"
@addTags="addTags"
@delTags="delTags"
@editTags="editTags"
@delTagsGroup="delTagsGroup"
@changeTagsGroupRelation="changeTagsGroupRelation"
@checkTagsGroup="checkTagsGroup"
@dragTag="dragTag"
/>
<el-button class="m-t-10 w-400 el-icon-plus color-blue add-group-btn" v-show="selectedTagsData.length < group" @click="addTagsGroup">
&nbsp;&nbsp;添加
<div>
<div :class="{ 'm-l-60': selectedTagsData.length > 1 }">
<tags-group
v-for="(item, index) in selectedTagsData"
:key="item"
:tagsData="item"
:showTagsRelation="index != selectedTagsData.length - 1"
:tagsGroupIndex="index"
:tagsRelation="tagsGroupRelation[index]"
:showAddMenu="showAddMenu"
:show-del-menu="selectedTagsData.length > 1"
:active="activeTagsGroupIndex === index"
@addTags="addTags"
@delTags="delTags"
@editTags="editTags"
@delTagsGroup="delTagsGroup"
@changeTagsGroupRelation="changeTagsGroupRelation"
@checkTagsGroup="checkTagsGroup"
@dragTag="dragTag"
/>
</div>
<el-button class="m-t-20 m-b-10 el-icon-plus color-blue add-group-btn" v-show="selectedTagsData.length < group" @click="addTagsGroup">
&nbsp;&nbsp;添加标签框
</el-button>
</div>
</template>
......@@ -139,6 +141,8 @@ export default {
.add-group-btn {
border-style: dashed;
width: 100%;
border-color: #c4c6cf;
}
.page-box {
......
src/view/memberGroup/tags-group.vue
<template>
<div class="w-400 border-box">
<div class="box">
<div :class="['tags-group', { 'tags-group--active': active }]" @click="checkTagsGroup">
<!--右上角的下拉菜单-->
<el-dropdown class="tags-group__dropdown" placement="bottom-end" v-if="showAddMenu || showDelMenu">
<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 more"></i>
</el-popover>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-if="showAddMenu" @click.native="addTags">添加标签</el-dropdown-item>
<el-dropdown-item v-if="showDelMenu" @click.native="handleDelTagsGroup">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!--展示选中的标签-->
<div class="tags-group__show">
<div class="tags-group__show" :style="{paddingBottom: !showAddMenu && !tagsData.length ? '0' : '16px'}">
<draggable v-model="tagsData" group="article" style="height: 100%" @end="dragTag" :move="checkMove" :sort="false" :data-index="tagsGroupIndex">
<div class="tags-group__tag" v-for="(item, index) in tagsData" :key="item.tagId">
<el-tooltip>
<span>{{ item.tagName }} 【选择:{{ item.newTagVal.replace(/\$\^/g,' ') }}】</span>
<div style="max-width: 400px;font-size: 14px" slot="content">{{ item.tagName }} 【选择:{{ item.newTagVal.replace(/\$\^/g,' ') }}】</div>
</el-tooltip>
<i class="iconfont icon-bianji1 edit" @click="editTags(index)"></i>
<i class="iconfont icon-guanbi" @click="delTags(index)"></i>
<i class="iconfont icon-bianji6 edit icon m-r-8" @click="editTags(index)"></i>
<i class="iconfont icon-delete icon" @click="delTags(index)"></i>
</div>
<div class="btn-options">
<span></span>
<!--分组编辑添加按钮-->
<el-button v-if="showAddMenu" type="text" class="add-btn" @click="addTags">
<i class="iconfont icon-PlusOutlined"/>
添加标签
</el-button>
<!--删除按钮-->
<el-popover width="200" placement="left" v-model="showDelPop" trigger="click">
<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 class="tag-del" slot="reference" v-if="showDelMenu" @click="handleDelTagsGroup">删除</span>
</el-popover>
</div>
</draggable>
</div>
<div class="text-tips empty" v-show="!showAddMenu && !tagsData.length">
请在页面左侧添加所需的客户标签到此处
</div>
</div>
<!--标签组之间的关系-->
<div class="tags-group__relation" v-show="showTagsRelation">
<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>
<span class="text-tips">点击切换运算符</span>
</div>
</div>
</template>
......@@ -157,7 +161,7 @@ export default {
<style lang="less" scoped>
.tags-group {
position: relative;
padding: 12px 0;
padding: 16px 0;
border: 1px solid #dcdfe6;
border-radius: 5px;
......@@ -178,8 +182,8 @@ export default {
}
.tags-group__show {
padding: 0 12px;
height: 120px;
padding: 0 12px 16px 20px;
min-height: 6px;
overflow-y: scroll;
}
......@@ -188,15 +192,14 @@ export default {
display: inline-block;
vertical-align: top;
padding: 0 50px 0 10px;
margin-right: 8px;
margin-bottom: 8px;
max-width: 100%;
margin-bottom: 12px;
width: 100%;
height: 32px;
line-height: 32px;
background: #f3f6f9;
background: #f2f3f5;
border-radius: 2px;
font-size: 14px;
color: #606266;
color: #303133;
cursor: pointer;
&:hover {
......@@ -223,23 +226,39 @@ export default {
align-items: center;
padding: 0 2px;
height: 100%;
color: #999;
color: #303133;
cursor: pointer;
}
i.icon-bianji1 {
i.icon-bianji6 {
right: 25px;
color: #c0c4cc;
&:hover {
color: #2F54EB;
}
}
i.icon-guanbi {
i.icon-delete {
right: 5px;
&:hover {
color: #f56c6c;
}
}
}
.btn-options {
width: 100%;
position: absolute;
bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
left: 0;
padding: 0 16px;
font-size: 14px;
height: 18px;
}
.tag-del {
color: #f5222d;
cursor: pointer;
line-height: 17px;
}
}
.tags-group--active {
......@@ -258,6 +277,7 @@ export default {
line-height: 40px;
border-radius: 40px;
border: none;
margin-right: 14px;
background: #f3f6f9;
}
......@@ -269,18 +289,21 @@ export default {
left: 15px;
z-index: 1;
width: 40px;
height: 60px;
height: 20px;
border-left: 1px solid #dcdfe6;
}
&::before {
top: -65px;
top: -20px;
border-top: 1px solid #dcdfe6;
}
&::after {
bottom: -65px;
bottom: -20px;
border-bottom: 1px solid #dcdfe6;
}
}
.empty {
text-align: center;
}
</style>
static/css/index.less
......@@ -102,7 +102,7 @@
height: 100%;
}
.right-content {
padding-top: 12px;
// padding-top: 12px;
min-height: calc(100vh - 256px);
}
.right-box {
......@@ -124,3 +124,9 @@
color: #1D39C4 !important;
}
}
// 提示样式
.text-tips {
font-size: 12px;
color: #909399;
line-height: 17px;
}
static/css/public.css
......@@ -316,9 +316,15 @@ input:focus {
.m-l-4 {
margin-left: 4px;
}
.m-l-5 {
margin-left: 5px;
}
.m-l-8 {
margin-left: 8px;
}
.m-l-10 {
margin-left: 10px;
}
.m-l-16 {
margin-left: 16px;
}
......@@ -331,15 +337,27 @@ input:focus {
.m-t-05 {
margin-top: -5px;
}
.m-t-8 {
margin-top: 8px;
}
.m-t-10 {
margin-top: 10px;
}
.m-t-12 {
margin-top: 12px;
}
.m-t-18 {
margin-top: 18px;
}
.m-t-16 {
margin-top: 16px;
}
.m-t-20 {
margin-top: 20px;
}
.m-t-34 {
margin-top: 34px;
}
.m-r-6 {
margin-right: 6px;
}
......@@ -355,15 +373,30 @@ input:focus {
.m-r-20 {
margin-right: 20px;
}
.m-b-0 {
margin-bottom: 0px !important;
}
.m-b-5 {
margin-bottom: 5px;
}
.m-b-10 {
margin-bottom: 10px;
}
.m-b-15 {
margin-bottom: 15px !important;
}
.m-b-20 {
margin-bottom: 20px;
}
.m-b-24 {
margin-bottom: 24px;
}
.m-b-26 {
margin-bottom: 26px;
}
.m-b-30 {
margin-bottom: 30px;
}
.p-20 {
padding: 20px;
}
......@@ -948,7 +981,7 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
/* 分页 */
.common-wrap__page {
padding: 24px 0 30px 0;
padding: 24px 0 20px 0;
}
.common-wrap__page .el-input {
font-size: 12px;
......
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