Skip to content

M
marketing
Commit 48ae6e08 by crushh
Options

update: 标签选择器

parent bfd0324d
Showing with 208 additions and 47 deletions
src/components/dm-new-member-group/index.vue
......@@ -279,7 +279,7 @@ export default {
.right {
width: 274px;
height: 582px;
// height: 582px;
border-radius: 4px;
border: 1px solid #dcdfe6;
margin-left: 12px;
......
src/components/dm-new-rule/ruleFilter.vue
......@@ -16,25 +16,30 @@
</div>
</div>
<el-dialog title="设置规则" :visible.sync="visiable" width="900px" :before-close="close">
<div class="ruleContainer">
<div class="container">
<div class="left">
<el-tabs tab-position="left" @tab-click="onTabsClick" v-model="activeName">
<el-tab-pane :label="item.chainNodeName" v-for="item in conditionTypeList" :key="item.esScreeningWidgetChainId" :name="item.esScreeningWidgetChainId" v-loading="tabPaneLoading">
<div v-if="item.templateCode == 'tag001' && templateCode == 'tag001'" class="leftContent">
<el-checkbox-group v-model="item.selectValue" @change="val => handleChange(val, item.esScreeningWidgetChainId)" class="checkBoxContainer">
<el-checkbox v-for="row in item.selectList" :key="row.key" :label="row.key">{{ row.value }}</el-checkbox>
</el-checkbox-group>
</div>
<div v-if="item.templateCode == 'com026' && templateCode == 'com026'" class="leftContent">
<div class="line" v-for="(value, index) in item.selectList" :key="index">
<h3>{{ value.title }}</h3>
<el-tab-pane :label="item.chainNodeName" :name="item.esScreeningWidgetChainId" v-for="item in conditionTypeList" :key="item.esScreeningWidgetChainId" v-loading="tabPaneLoading">
<div v-if="!item.disable">
<div v-if="item.templateCode == 'tag001' && templateCode == 'tag001'" class="leftContent">
<el-checkbox-group v-model="item.selectValue" @change="val => handleChange(val, item.esScreeningWidgetChainId)" class="checkBoxContainer">
<el-checkbox v-for="row in value.data" :key="row.key" :label="row.key">{{ row.value }}</el-checkbox>
<el-checkbox v-for="row in item.selectList" :key="row.key" :label="row.key">{{ row.value }}</el-checkbox>
</el-checkbox-group>
</div>
<div v-if="item.templateCode == 'com026' && templateCode == 'com026'" class="leftContent">
<div class="line" v-for="(value, index) in item.selectList" :key="index">
<h3>{{ value.title }}</h3>
<el-checkbox-group v-model="item.selectValue" @change="val => handleChange(val, item.esScreeningWidgetChainId)" class="checkBoxContainer">
<el-checkbox v-for="row in value.data" :key="row.key" :label="row.key">{{ row.value }}</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div v-if="item.templateCode == 'com020' && templateCode == 'com020'" class="leftContent">
<dm-store-selector v-if="item.templateCode == 'com020'" ref="storeSelector" scenes="auth" scenesVal="marketing" @store-change="val => storeChange(val, item.esScreeningWidgetChainId)" :uuid.sync="item.value"></dm-store-selector>
</div>
</div>
<div v-if="item.templateCode == 'com020' && templateCode == 'com020'" class="leftContent">
<dm-store-selector v-if="item.templateCode == 'com020'" ref="storeSelector" scenes="auth" scenesVal="marketing" @store-change="val => storeChange(val, item.esScreeningWidgetChainId)" :uuid.sync="item.value"></dm-store-selector>
<div v-else>
不支持选择
</div>
</el-tab-pane>
</el-tabs>
......@@ -62,6 +67,7 @@
<script>
import qs from 'qs';
import transform from './createParams.js';
export default {
data() {
return {
......@@ -91,6 +97,10 @@ export default {
memberCrowdWidgetId: {
type: [String, Number],
default: ''
},
hideId: {
type: Array,
default: () => []
}
},
mounted() {
......@@ -102,6 +112,14 @@ export default {
this.echoFlag = true;
this.getEchoData();
}
},
hideId(val) {
console.log(val);
if (val && val.length) {
this.conditionTypeList.filter(item => val.includes(item.esScreeningWidgetChainId)).forEach(item => (item.disable = true));
} else {
this.conditionTypeList.forEach(item => (item.disable = false));
}
}
},
computed: {
......@@ -165,25 +183,30 @@ export default {
},
echoStoreSelectorData(key) {
return new Promise((resolve, reject) => {
this.$refs.storeSelector[0].getStoreConfig().then(async data => {
console.log(data);
if (data.type == 0) {
resolve('所有门店');
return;
} else {
const str = data.list.map(item => item.name).join('，');
resolve(str);
}
});
this.$refs.storeSelector[0]
.getStoreConfig()
.then(async data => {
console.log(data);
if (data.type == 0) {
resolve(false);
} else {
const str = data.list.map(item => item.name).join('，');
resolve(str);
}
})
.catch(() => {
resolve(false);
});
});
// 取得门店筛选器的文字回显
},
delAll() {
this.conditionTypeList.forEach(item => {
item.selectValue = [];
item.value = '';
});
this.activeName = this.conditionTypeList.length && this.conditionTypeList[0].esScreeningWidgetChainId;
this.$emit('save', '');
this.$emit('save', '', '');
this.echoFlag = false;
},
edit() {
......@@ -201,13 +224,13 @@ export default {
this.conditionTypeList.find(item => item.esScreeningWidgetChainId == id).value = val.join(' ');
},
storeChange(uuid, esScreeningWidgetChainId) {
this.selectDataLoading = true;
const obj = this.conditionTypeList.find(item => item.esScreeningWidgetChainId == esScreeningWidgetChainId);
obj.value = uuid;
this.$nextTick(() => {
this.echoStoreSelectorData(uuid).then(res => {
obj.selectValue = res;
this.selectDataLoading = false;
if (res) {
obj.selectValue = res;
obj.value = uuid;
}
});
});
console.log(this.conditionTypeList);
......@@ -233,7 +256,7 @@ export default {
.then(res => {
let resData = res.data;
if (resData.errorCode == 0) {
this.$emit('save', resData.result);
this.$emit('save', resData.result, data);
this.echoFlag = true;
this.$emit('update:visiable', false);
}
......@@ -328,7 +351,7 @@ export default {
</script>
<style lang="scss" scoped>
.ruleContainer {
.container {
background: #ffffff;
display: flex;
}
......
src/service/api/aiApi.js
......@@ -41,3 +41,9 @@ export const getMemberCount = params => requests(PREFIX + '/get-member-count', p
export const getLogs = params => requests('/api-marketing/page-activity-event-exec-log', params, true, false, 'get');
export const getCustomDetail = params => requests('/api-marketing/statistics/page-data-statistics-custom-detail', params, true, false, 'get');
//标签库-分页列表数据
export const platformTagPageListV2 = params => requests('/gic-member-tag-web/memberTag/platformTagPageListV2', params, true, false, 'get');
//标签库-标签层级
export const platformHomePageV2 = params => requests('/gic-member-tag-web/memberTag/platformHomePageV2', params, true, false, 'get');
src/views/ai/task/form.vue
......@@ -30,25 +30,26 @@
<div>
<div class="tips" style="margin:0 0 12px 0;">默认为权限范围内的全部客户</div>
<el-button v-if="form.memberType == 0 && !memberCrowdWidgetId && form.scene != 4" size="small" @click="ruleVisible = true">添加其他条件</el-button>
<ruleFilter v-show="form.memberType == 0" :visiable.sync="ruleVisible" @save="handleRuleFilterSave" :memberCrowdWidgetId="memberCrowdWidgetId" />
<el-button v-if="form.memberType == 1 && !selectedGroup.length && form.scene != 4" size="small" @click="groupVisible = true">添加分组</el-button>
<ruleFilter v-show="form.memberType == 0 && form.scene != 4" :visiable.sync="ruleVisible" @save="handleRuleFilterSave" :memberCrowdWidgetId="memberCrowdWidgetId" />
<el-button v-if="form.memberType == 1 && !selectedGroup.length" size="small" @click="groupVisible = true">添加分组</el-button>
<gic-new-member-group v-show="form.memberType == 1" :visiable.sync="groupVisible" :defaltSelected="selectedGroup" @change="confirmGroupDialog" />
</div>
</el-form-item>
<el-form-item label="消费条件" v-if="form.scene == 4">
<div class="consumeLine">
<el-checkbox v-model="form.consume_days_flag" :true-label="1" :false-label="0">最近消费间隔</el-checkbox>
<el-checkbox v-model="form.consume_days_flag" :true-label="1" :false-label="0" :disabled="disabledCheck" @change="handleLastconsume('days')">最近消费间隔</el-checkbox>
<el-input-number v-model="form.consume_days" controls-position="right" :max="730" :min="30" size="small" style="margin:0 10px;" />天
</div>
<div class="consumeLine">
<el-checkbox v-model="form.consume_times_flag" :true-label="1" :false-label="0">最近消费次数</el-checkbox>
<el-checkbox v-model="form.consume_times_flag" :true-label="1" :false-label="0" :disabled="disabledCheck" @change="handleLastconsume('times')">最近消费次数</el-checkbox>
<el-input-number v-model="form.consume_times" controls-position="right" :max="100" :min="1" size="small" style="margin:0 10px;" /> 次
</div>
<div class="consumeLine">
<el-checkbox v-model="form.consume_amount_flag" :true-label="1" :false-label="0">累计消费金额</el-checkbox>
<el-checkbox v-model="form.consume_amount_flag" :true-label="1" :false-label="0" :disabled="disabledCheck" @change="handleLastconsume('amount')">累计消费金额</el-checkbox>
<el-input-number v-model="form.consume_amount" controls-position="right" :max="100000" :min="1" size="small" style="margin:0 10px;" /> 元
</div>
<el-button size="small">添加其它条件</el-button>
<el-button size="small" @click="ruleVisible2 = true" v-if="!memberCrowdWidgetId">添加其它条件</el-button>
<ruleFilter :visiable.sync="ruleVisible2" @save="handleRuleFilterSave" :memberCrowdWidgetId="memberCrowdWidgetId" :hideId="hideId" />
<span class="tips">勾选消费条件后，添加规则不支持选择【金字塔分层】</span>
</el-form-item>
<el-form-item label="预计覆盖人数">
......@@ -223,7 +224,7 @@
</dm-form-bottom>
</el-form>
<lib-message v-if="smsDialogVisible" :show.sync="smsDialogVisible" :useByEcm="false" @sendItem="handleSendItem"></lib-message>
<tagPop :visiable.sync="tagsDialogVisible" />
<el-dialog :title="tipsDialogContent.title" :visible="tipsDialogContent.visible" width="700px" @close="tipsDialogContent.visible = false">
<div class="gradeContent">
<div class="tips">
......@@ -245,6 +246,7 @@ import birthSense from '@/views/ai/task/components/birthActiveTime.vue';
import holidaySense from '@/views/ai/task/components/holidayActiveTime.vue';
import LibMessage from '@/views/ecm/marketing-event/components/lib-message.vue';
import activeTime from '@/views/ai/task/components/activeTime.vue';
import tagPop from '@/views/ai/task/tagPop.vue';
import { formatDateTimeByType } from '@/utils/index';
import gicNewMemberGroup from '@/components/dm-new-member-group/index.vue';
import ruleFilter from '@/components/dm-new-rule/ruleFilter.vue';
......@@ -301,6 +303,7 @@ export default {
isInfo: this.$route.meta.type === 'info',
groupVisible: false, //客户分组弹窗
ruleVisible: false, // 客户筛选弹窗
ruleVisible2: false, // 客户筛选弹窗 复购场景
tagsDialogVisible: false, //选择标签弹窗
smsDialogVisible: false, //短信模板弹窗
gradeOptions: [], //客户意向等级下拉
......@@ -346,9 +349,22 @@ export default {
selectedGroup: [], // 被选中的客户分组
selectedGroupIds: '', // 被选中的客户分组id
memberCrowdWidgetId: '', // 被选的规则id
echoData: false
filterFrontShow: [], // 筛选器回显数据
hideIdVal: ['0f1c75e854ed4b05bd6baa2a757c1701']
};
},
computed: {
hideId() {
if (this.form.consume_days_flag || this.form.consume_times_flag || this.form.consume_amount_flag) {
return ['0f1c75e854ed4b05bd6baa2a757c1701']; // 隐藏客户筛选中的金字塔分层
} else {
return [];
}
},
disabledCheck() {
return this.filterFrontShow.find(item => this.hideIdVal.includes(item.esScreeningWidgetChainId));
}
},
mounted() {
const { scene, id } = this.$route.params;
this.form.scene = scene && Number(scene);
......@@ -368,7 +384,8 @@ export default {
activeTime,
LibMessage,
gicNewMemberGroup,
ruleFilter
ruleFilter,
tagPop
},
methods: {
async getActivityDetail(activityId) {
......@@ -576,10 +593,20 @@ export default {
const { result } = await getMemberCount(data);
this.form.planMemberCount = result;
},
handleLastconsume(val, type) {
if (this.filterFrontShow.find(item => this.hideIdVal.includes(item.esScreeningWidgetChainId))) {
this.form.consume_times_flag = 0;
this.form.consume_days_flag = 0;
this.form.consume_amount_flag = 0;
this.$message.warning('选择了金字塔会员分层不支持选择消费条件');
}
return 0;
},
/**客户筛选 */
handleRuleFilterSave(id) {
handleRuleFilterSave(id, data) {
this.memberCrowdWidgetId = id;
console.log(this.memberCrowdWidgetId);
this.filterFrontShow = data ? JSON.parse(data.filterFrontShow) : [];
console.log(data);
},
/**客户分组 */
confirmGroupDialog(arr, idStr) {
......
src/views/ai/task/tagPop.vue
<template>
<el-dialog title="选择标签" :visible.sync="tagsDialogVisible" width="690px">
<el-dialog title="选择标签" :visible.sync="visiable" width="900px" :before-close="close">
<div class="container">
<el-tabs tab-position="left" @tab-click="onTabsClick" v-model="activeName">
<el-tab-pane :label="item.levelName" v-for="item in tabList" :key="item.id" :name="item.id" v-loading="tabPaneLoading">
<div class="rightContent">
<div class="searchWrap">
<div><el-input prefix-icon="el-icon-search" v-model="search" placeholder="请输入标签名称" @keyup.enter.native="getList" clearable @clear="getList"></el-input></div>
<div class="btn"><el-button size="small" type="primary" @click="addGroup">新增标签</el-button></div>
</div>
<div class="radioContainer">
<el-radio v-for="item in value" :key="item.tagId" :label="item.tagId">{{ item.tagName }}</el-radio>
</div>
<el-pagination layout="prev, pager, next" v-if="totalCount" :total="totalCount" :page-size="pageSize" :current-page.sync="currentPage" @current-change="getGroupList"> </el-pagination>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="tagsDialogVisible = false">取消</el-button>
<el-button type="primary" @click="confirmTagsDialog">确定</el-button>
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="confirm">确定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {};
import { platformTagPageListV2, platformHomePageV2 } from '@/service/api/aiApi.js';
export default {
data() {
return {
activeName: '',
search: '',
tabList: [],
value: [],
tabPaneLoading: false,
totalCount: 0,
currentPage: 1,
pageSize: 40
};
},
props: {
visiable: {
type: Boolean,
default: false
}
},
mounted() {
this.getPlatformHomePageV2();
},
methods: {
getList() {
this.currentPage = 1;
this.getPlatformTagPageListV2();
},
onTabsClick(val) {
const { name } = val;
console.log(name);
this.getPlatformTagPageListV2();
this.currentPage = 1;
},
close() {
this.$emit('update:visiable', false);
},
async getPlatformTagPageListV2() {
const param = {
search: this.search,
tagLevelGroupId: this.activeName != 2 ? this.activeName : 0,
// tagType: 2,
pageNum: this.currentPage,
pageSize: this.pageSize
};
const { result } = await platformTagPageListV2(param);
if (result) {
this.totalCount = result.totalCount;
this.value = result.result;
}
},
async getPlatformHomePageV2() {
const param = {
tagLevelType: 2
};
const { result } = await platformHomePageV2(param);
if (result) {
this.tabList = [{ levelName: '所有活动标签', id: 2 }, ...result[0].children];
}
if (this.tabList.length) {
this.activeName = this.tabList[0].id;
this.getPlatformTagPageListV2();
}
}
}
};
</script>
<style></style>
<style lang="scss" scoped>
.rightContent {
padding: 15px 18px;
box-sizing: border-box;
}
.searchWrap {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}
.container {
height: 521px;
border-radius: 4px;
border: 1px solid #dcdfe6;
}
.radioContainer {
display: flex;
flex-wrap: wrap;
gap: 10px;
height: 400px;
.el-radio + .el-radio {
margin: 0;
}
}
</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