Commit 17967765 by crushh

update: dist

parent 6f0fcdf6
import gicNewMemberGroup from './index.vue'; // 导入组件
// gicNewMemberGroup.install = function(Vue) {
// Vue.component(gicNewMemberGroup.name, gicNewMemberGroup);
// };
// if (typeof window !== 'undefined' && window.Vue) {
// window.Vue.use(gicNewMemberGroup);
// }
const host = window.location.origin;
export let baseUrl = '';
export default gicNewMemberGroup;
<template>
<div>
<div class="echo-member-group" v-if="echo">
<div class="subTitle">
<div class="line"></div>
<div class="text">
<div class="space-between">
已选分组
<span><el-button type="text" class="delBtn" @click="del">删除</el-button><el-button type="text" @click="edit">编辑</el-button></span>
</div>
</div>
</div>
<div class="echoLine" v-for="item in defaltSelected" :key="item.memberTagGroupId">
<div class="dot"></div>
<el-tag size="mini" v-if="item.isRealTime">实时</el-tag>
<el-tag size="mini" type="warning" v-else>非实时</el-tag>
<span class="groupName"> {{ item.groupName }}</span>
</div>
</div>
<el-dialog title="选择客户分组" :visible.sync="visiable" width="1000px">
<div class="member-group">
<div class="left">
<el-tabs v-model="activeName">
<el-tab-pane label="我的客户分组" name="0" v-if="!onlyFixedType">
<dm-table ref="table0" name="0" :creatorId="creatorId" :effectiveStatus="effectiveStatus" :readonly="readonly" :realTimeType="realTimeType" :activeName="activeName" :selected="selectedArray" @handleSelectionChange="handleSelectionChange" @deleteRow="deleteRow" />
</el-tab-pane>
<el-tab-pane label="固化分组" name="1">
<dm-table ref="table1" name="1" :creatorId="creatorId" :effectiveStatus="effectiveStatus" :readonly="readonly" :realTimeType="realTimeType" :activeName="activeName" :selected="selectedArray" @handleSelectionChange="handleSelectionChange" @deleteRow="deleteRow" />
</el-tab-pane>
<el-tab-pane label="金字塔会员分层" name="2" v-if="!onlyFixedType">
<dm-table ref="table2" name="2" :creatorId="creatorId" :effectiveStatus="effectiveStatus" :readonly="readonly" :realTimeType="realTimeType" :activeName="activeName" :selected="selectedArray" @handleSelectionChange="handleSelectionChange" @deleteRow="deleteRow" />
</el-tab-pane>
</el-tabs>
</div>
<div class="right">
<div class="right-top">
已选分组
</div>
<ul class="right-content">
<li class="contact-li" v-for="item in selectedArray" :key="item.memberTagGroupId">
<div class="li-cell cursor-pointer">
<div>
<el-tag size="mini" v-if="item.isRealTime">实时</el-tag>
<el-tag size="mini" type="warning" v-else>非实时</el-tag>
<span class="groupName"> {{ item.groupName }}</span>
</div>
<i v-if="!readonly" class="el-icon-close" @click="deleteRow(item)"></i>
</div>
</li>
</ul>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="visiable = false">取消</el-button>
<el-button type="primary" @click="confirm">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { baseUrl } from './index.js';
import table from './table';
export default {
name: 'gic-new-member-group',
props: {
defaltSelected: {
type: Array,
default() {
return [];
}
},
visiable: {
type: Boolean,
default: false
},
height: {
type: Number,
default: 543
},
projectName: {
type: String,
default: 'memberTag'
},
creatorId: {
type: String,
default: ''
},
effectiveStatus: {
type: [String, Number],
default: 1
},
maxLimit: {
type: Number,
default: 5
},
onlyFixedType: {
// 仅展示固化分组
type: Boolean,
default: false
},
readonly: {
// 只读
type: Boolean,
default: false
},
realTimeType: {
// 实时与非实时分组的可选
// 0:可选非实时分组 1:可选实时分组
type: Array,
default: () => [0, 1]
},
echo: {
// 使用回显样式
type: Boolean,
default: false
}
},
components: {
'dm-table': table
},
data() {
return {
activeName: '0', //0 我的客户分组 1固化分组 2金字塔会员分层
baseUrl,
showEcho: false,
selected: {}
};
},
mounted() {
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
this.$refs[`table${this.activeName}`] && this.$refs[`table${this.activeName}`].getGroupList();
}
});
if (this.defaltSelected.length) {
this.handleSelectionChange(this.defaltSelected);
}
if (this.onlyFixedType) {
this.activeName = '1';
}
},
watch: {
selected(val) {
console.log(val);
let arr = [];
Object.keys(val).forEach(key => {
arr.push(val[key]);
});
this.$emit('change', arr);
},
echo(val) {
console.log('echo-->', val);
this.showEcho = val;
}
},
computed: {
selectedArray() {
let arr = [];
Object.keys(this.selected).forEach(item => {
arr.push(this.selected[item]);
});
return arr;
}
},
methods: {
confirm() {
let arr = [];
Object.keys(this.selected).forEach(key => {
arr.push(this.selected[key]);
});
const str = arr.map(item => item.memberTagGroupId).join(',');
this.$emit('update:visiable', false);
this.$emit('confirm', str);
},
del() {
this.selected = {};
},
edit() {
this.$emit('update:visiable', true);
},
handleSelectionChange(val) {
const obj = JSON.parse(JSON.stringify(this.selected));
if (val.length) {
val.forEach(item => {
obj[item.memberTagGroupId] = item;
});
if (Object.keys(obj).length > this.maxLimit) {
this.deleteRow(val[val.length - 1]);
this.$message.error(`最多支持选择${this.maxLimit}个分组`);
return false;
}
}
this.selected = obj;
},
deleteRow(row) {
delete this.selected[row.memberTagGroupId];
this.selected = Object.assign({}, this.selected);
this.$refs[`table${this.activeName}`].$refs.table.toggleRowSelection(row, false);
}
}
};
</script>
<style lang="scss" scoped>
.delBtn {
color: #f5222d;
}
.space-between {
display: flex;
justify-content: space-between;
}
.subTitle {
width: 100%;
height: 40px;
display: flex;
box-sizing: border-box;
align-items: center;
.line {
width: 2px;
height: 14px;
background: #2f54eb;
margin-right: 8px;
}
.text {
font-size: 14px;
color: #303133;
width: 100%;
}
}
.echo-member-group {
width: 400px;
background: #f7f8fa;
border-radius: 4px;
padding: 12px 15px;
box-sizing: border-box;
.echoLine {
margin-bottom: 8px;
line-height: 20px;
.dot {
display: inline-block;
width: 6px;
height: 6px;
background: #2f54eb;
border-radius: 3px;
margin-right: 6px;
}
.groupName {
font-weight: 400;
margin-left: 5px;
}
&:first-child {
margin-top: 20px;
}
}
}
.member-group {
background: #ffffff;
display: flex;
.left {
width: 666px;
height: 582px;
border-radius: 4px;
border: 1px solid #dcdfe6;
padding: 5px 17px;
}
.right {
width: 274px;
height: 582px;
border-radius: 4px;
border: 1px solid #dcdfe6;
margin-left: 12px;
.right-top {
padding: 20px 15px;
display: flex;
justify-content: space-between;
color: #303133;
box-sizing: border-box;
line-height: 20px;
background: #fff;
}
.right-content {
color: #303133;
overflow-y: auto;
height: 89%;
}
.contact-li {
padding: 0 12px 0 16px;
margin-top: 4px;
&:hover {
background: #f7f8fa;
}
&:first-child {
margin-top: 0;
}
.li-cell {
border-radius: 2px;
line-height: 32px;
display: inline-flex;
width: 100%;
justify-content: space-between;
padding: 0 4px;
align-items: center;
box-sizing: border-box;
i {
width: 20px;
height: 20px;
border-radius: 10px;
cursor: pointer;
font-size: 12px;
display: inline-flex;
justify-content: center;
align-items: center;
&:hover {
background: #e5e6eb;
}
}
}
}
.contact-li + .contact-li {
margin-top: 4px;
}
}
}
</style>
客户分组
\ No newline at end of file
<template>
<div>
<div class="leftHead">
<div class="tips">
<li><span class="dots"></span> 选择多个分组时,会自动去重分组下的客户;</li>
<li><span class="dots"></span> 非实时分组到期后,客户数据会清空,任务将不在继续执行;</li>
</div>
<div class="searchWrap">
<div><el-input prefix-icon="el-icon-search" v-model="dataSearch" placeholder="请输入分组名称" @keyup.enter.native="search" clearable @clear="search"></el-input></div>
<div class="btn"><el-button size="small" type="primary" @click="addGroup">新增分组</el-button></div>
</div>
</div>
<el-table :data="tableData" ref="table" v-loading="loading" @select="handleSelect" @selection-change="handleSelectionChange" row-key="memberTagGroupId" @row-click="selectRow">
<el-table-column type="selection" width="55" :selectable="selectable"> </el-table-column>
<el-table-column label="分组名称" min-width="180px" prop="groupName">
<template slot-scope="{ row }">
<el-tag size="mini" :type="!row.isRealTime ? 'warning' : ''"> {{ !row.isRealTime ? '非实时' : '实时' }}</el-tag>
{{ row.groupName }}
</template>
</el-table-column>
<el-table-column label="覆盖人群" prop="memberCount" />
<el-table-column label="最近更新时间" min-width="120px" prop="latestUpdateTime">
<template slot-scope="scope">
<p class="h-18">{{ scope.row.latestUpdateTime | formatTimeYMD }}</p>
<p class="h-18">{{ scope.row.latestUpdateTime | formatTimeHMS }}</p>
</template>
</el-table-column>
<el-table-column label="到期时间" v-if="activeName != 2" min-width="120px" prop="recentUpdateDate">
<template slot-scope="scope">
<p class="h-18">{{ scope.row.recentUpdateDate | formatTimeYMD }}</p>
<p class="h-18">{{ scope.row.recentUpdateDate | formatTimeHMS }}</p>
</template>
</el-table-column>
</el-table>
<div class="pageBtn">
<el-pagination layout="prev, pager, next" v-if="totalCount" :total="totalCount" :page-size="pageSize" :current-page.sync="currentPage" @current-change="getGroupList"> </el-pagination>
</div>
</div>
</template>
<script>
import { baseUrl } from './index.js';
export default {
props: {
realTimeType: {
type: Array,
default: () => [0, 1]
},
selected: {
type: Array,
default: () => []
},
activeName: {
type: String,
default: ''
},
projectName: {
type: String,
default: 'memberTag'
},
creatorId: {
type: String,
default: ''
},
effectiveStatus: {
type: [String, Number],
default: 1
},
maxLimit: {
type: Number
},
readonly: {
// 只读
type: Boolean,
default: false
},
name: {
type: String,
default: '0'
}
},
data() {
return {
baseUrl,
loading: false,
tableData: [],
totalCount: 0,
pageSize: 5,
currentPage: 1,
dataSearch: '',
fixedType: 0 // 0普通的分组, 1固化分组 3固化分组分堆
};
},
filters: {
formatTimeYMD(data) {
return data && data != '- -' ? String(data).split(' ')[0] : '--';
},
formatTimeHMS(data) {
return data && data != '- -' ? String(data).split(' ')[1] : '--';
}
},
mounted() {
console.log('mounted');
},
watch: {
tableData(val) {
if (val.length) {
this.$nextTick(() => {
this.selected.forEach(item => {
val.forEach(row => {
if (item.memberTagGroupId == row.memberTagGroupId) {
// 必须要传入从this.tableData里查询到的对象才能出现被勾选样式
this.$refs.table.toggleRowSelection(
this.tableData.find(row => {
return row.memberTagGroupId == item.memberTagGroupId;
}),
true
);
}
});
});
});
}
},
activeName: {
handler(val) {
if (val == '0' && this.name == '0') {
this.fixedType = 0;
this.getGroupList();
} else if (val == '1' && this.name == '1') {
this.fixedType = 1;
this.getGroupList();
} else if (val == '2' && this.name == '2') {
this.getGroupList();
}
},
immediate: true
}
},
methods: {
selectable(row) {
if (this.readonly) {
return false;
} else if (!this.realTimeType.includes(row.isRealTime)) {
return false;
} else {
return true;
}
},
addGroup() {
window.open('http://gicdev.demogic.com/member-tag/#/memberGroupEdit?refresh', '_blank');
},
selectRow(row) {
if (this.realTimeType.some(el => el == row.isRealTime)) {
if (this.selected.length && this.selected.find(item => item.memberTagGroupId == row.memberTagGroupId)) {
this.$emit('deleteRow', row);
} else {
this.$refs.table.toggleRowSelection(row);
}
}
},
handleSelectionChange(val) {
if (val.length) {
this.$emit('handleSelectionChange', val);
}
},
handleSelect(selection, row) {
if (this.selected.length && this.selected.find(item => item.memberTagGroupId == row.memberTagGroupId)) {
this.$emit('deleteRow', row);
}
},
search() {
this.currentPage = 1;
this.getGroupList();
},
/**
* 获取 列表数据
*/
getGroupList() {
this.loading = true;
this.tableData = [];
this.totalCount = 0;
let url = `${this.baseUrl}/gic-member-tag-web/member-tag-group/findList.json?requestProject=${this.projectName}&fixedType=${this.fixedType}&creatorId=${this.creatorId}&pageSize=${this.pageSize}&pageNum=${this.currentPage}&groupName=${this.dataSearch}&effectiveStatus=${this.effectiveStatus}`;
if (this.activeName == '2') {
url = `${this.baseUrl}/gic-member-tag-web/memberTagGrade/gradeGroupList?requestProject=${this.projectName}&pageSize=${this.pageSize}&pageNum=${this.currentPage}&groupName=${this.dataSearch}`;
}
this.axios
.get(url)
.then(res => {
if (res.data.errorCode == 1) {
this.tableData = res.data.result.result;
this.totalCount = res.data.result.totalCount;
return;
}
this.$message.error({
duration: 2000,
message: res.data.message
});
})
.catch(error => {
this.$message.error({
duration: 2000,
message: error.message
});
})
.finally(() => {
this.loading = false;
});
}
}
};
</script>
<style lang="scss" scoped>
.leftHead {
.tips {
padding-bottom: 15px;
li {
display: flex;
align-items: center;
line-height: 17px;
&:last-child {
margin-top: 4px;
}
}
.dots {
width: 5px;
height: 5px;
background: #c4c6cf;
display: inline-block;
border-radius: 2.5px;
margin-right: 6px;
}
}
.searchWrap {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}
}
.pageBtn {
float: right;
margin: 13px 0 18px 0;
}
.h-18 {
line-height: 18px;
}
</style>
......@@ -33,3 +33,6 @@ export const tempDetail = params => requests('/api-marketing/template/query', pa
//节日分类信息
export const listAllHolidays = params => requests('/api-marketing/list-all-holidays', params, true, false, 'get');
//获取活动计划预估人数
export const getMemberCount = params => requests(PREFIX + '/get-member-count', params, true, false, 'get');
<template>
<el-dialog title="选择标签" :visible.sync="tagsDialogVisible" width="690px">
<div slot="footer" class="dialog-footer">
<el-button @click="tagsDialogVisible = false">取消</el-button>
<el-button type="primary" @click="confirmTagsDialog">确定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {};
</script>
<style></style>
......@@ -195,6 +195,12 @@ export default {
content: '节日活动邀约,会员专享权益,提升门店营业额'
},
{
title: '加企微好友',
scene: 3,
iconName: 'icon-qiweihaoyou',
content: '针对未添加企微好友的客户进行营销,添加企微好友'
},
{
title: '客户复购',
scene: 4,
iconName: 'icon-kehufugouguanli',
......
......@@ -7,7 +7,7 @@
</span>
<div class="pb22 clearfix">
<div class="fl">
<span class="pr10">{{ total }}</span><el-input clearable v-model="listParams.search" class="w200" placeholder="请输入标题/作者" @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
<el-input clearable v-model="listParams.search" class="w260" placeholder="请输入短信模板名称" @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
</div>
<div class="fr" v-if="useByEcm">
<el-button type="primary" @click="add">新建短信</el-button>
......
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