Skip to content

M
memberTag-web
Commit 76ad6749 by member
Options

会员标签合并详情的代码

parent 0ca46fe7
Showing with 525 additions and 34 deletions
build/webpack.dev.conf.js
......@@ -13,12 +13,14 @@ const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
console.log(config.dev.devtool);
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
......@@ -46,7 +48,9 @@ const devWebpackConfig = merge(baseWebpackConfig, {
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
'process.env': {
NODE_ENV: '"development"'
}
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
......
package-lock.json deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
src/main.js
......@@ -87,3 +87,6 @@ new Vue({
components: { App },
template: '<App/>'
});
console.log(typeof Vue);
src/request/api.js
......@@ -65,3 +65,41 @@ export const memberGroupList = params =>
method: 'get',
params: params
});
// 会员分组分类 新增 编辑 memberTagGroupClassifyId 新增不需要，编辑需要
export const memberGroupModify = params =>
request({
url: '/member-tag-group-classify/save',
method: 'get',
params: params
});
// 会员分组删除分类
export const memberGroupDelete = params =>
request({
url: '/member-tag-group-classify/delete',
method: 'get',
params: params
});
export const recommendGroupList = () =>
request({
url: '/member-tag-group-recommend/list?requestProject=gic-member-tag-web',
method: 'get'
});
// 推荐会员分组-列表
export const recommendList = params =>
request({
url: '/member-tag-group-recommend/group',
method: 'get',
params: params
});
// 会员分组查列表第二级别
export const findSecondMemberList = params =>
request({
url: '/member-tag-group/findList.json',
method: 'get',
params: params
});
src/view/memberGroup/group-list.vue
<template>
<div class="group-list">
<ul>
<li></li>
</ul>
<div class="member-group">
<i class="icon-list el-icon-caret-top icon-transform" :class="expendClass" @click="handleExpend"></i>
我的会员分组
<i class="el-icon-plus icon-right icon-list" @click="addGroupDialog = true"></i>
</div>
<el-collapseTransition>
<ul class="lists" v-show="expendTxt == '展开'">
<li v-for="(list, i) in lists" :key="i" class="member-list" :class="{ 'active-li': i == currentIndex }" @click="handleChangeIndex(i, list)">
<span v-show="!list.edit">{{ list.classifyName }}</span>
<el-input style="width: 100px;" size="mini" v-show="list.edit" v-model="list.classifyName" @keyup.native.enter="modifyName(list)" />
<div class="oper-area">
<i class="el-icon-edit icon-list icon-list-oper" @click="editGroupName(list)"></i>
<i class="icon-list el-icon-circle-close icon-list-oper" @click="deleteGroupName(list)"></i>
</div>
</li>
</ul>
</el-collapseTransition>
<div class="recommend-list" :class="{ 'recommend-active': active }" @click="getRecommendList">
推荐会员分组
</div>
<el-dialog :title="title" :visible.sync="addGroupDialog" width="320px" top="30vh" :close-on-click-modal="false">
<div>
分组名称：
<el-input style="width: 200px;" placeholder="请输入分组名称" v-model="groupName" :maxlength="10" clearable></el-input>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="addGroupDialog = false">取 消</el-button>
<el-button type="primary" @click="handleGroupDialog">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import Vue from 'vue';
import { CollapseTransition } from 'element-ui';
import { memberGroupList, memberGroupModify, memberGroupDelete } from '@/request/api';
Vue.component(CollapseTransition.name, CollapseTransition);
export default {
name: 'group-list',
data() {
return {
lists: [],
addGroupDialog: false,
expendTxt: '展开',
groupName: '',
title: '新增分组名称',
currentIndex: -1,
active: false
};
},
computed: {
expendClass() {
if (this.expendTxt != '展开') {
return 'is-caret';
} else {
return '';
}
}
},
methods: {
handleChangeIndex(i, list) {
this.active = false;
this.currentIndex = i;
// 第二级的分组数据
this.$emit('second-list', list);
},
/**
* 修改和删除分组
*/
editGroupName(list) {
if (!this.operatorName(list)) {
return;
}
list.edit = true;
},
// 删除
deleteGroupName(list) {
if (!this.operatorName(list)) {
return;
}
this.$confirm('是否删除分组名称？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
// 删除操作
this.excludeName(list);
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
excludeName(list) {
const param = {
requestProject: 'gic-member-tag-web',
memberTagGroupClassifyId: list.memberTagGroupClassifyId
};
memberGroupDelete(param).then(res => {
if (res.errorCode == 1) {
this.getMemberGroupList();
this.$message({
type: 'success',
message: '删除成功!'
});
}
});
},
// 修改分组名称
modifyName(list) {
if (!list.classifyName) {
this.$message({
message: `分组名称不能为空！`,
type: 'warning',
duration: 2000
});
return;
}
const param = {
requestProject: 'gic-member-tag-web',
classifyName: list.classifyName,
memberTagGroupClassifyId: list.memberTagGroupClassifyId
};
memberGroupModify(param).then(res => {
if (res.errorCode == 1) {
list.edit = false;
this.getMemberGroupList();
this.$message({
type: 'success',
message: '修改成功',
duration: 2000
});
}
});
},
operatorName(list) {
if (list.memberTagGroupClassifyId == '0') {
this.$message({
message: `${list.classifyName}的不能操作`,
type: 'warning',
duration: 2000
});
return false;
}
return true;
},
/**
* 新增会员分组分类
*/
handleGroupDialog() {
if (!this.groupName) {
this.$message({
type: 'warning',
message: '分组名称不能为空'
});
return;
}
const param = {
requestProject: 'gic-member-tag-web',
classifyName: this.groupName
};
memberGroupModify(param).then(res => {
if (res.errorCode == 1) {
this.getMemberGroupList();
this.addGroupDialog = false;
this.$message({
type: 'success',
message: '添加成功'
});
}
});
},
/**
* 会员分组分类
*/
getMemberGroupList() {
memberGroupList({
requestProject: 'gic-member-tag-web'
}).then(res => {
if (res.errorCode === 1) {
this.lists = res.result.map(el => ({
...el,
edit: false
}));
}
});
},
// 收起
handleExpend() {
this.expendTxt = this.expendTxt === '展开' ? '收起' : '展开';
},
getRecommendList() {
this.active = true;
this.currentIndex = -1;
this.$emit('getRecommend');
}
},
beforeMount() {
this.getMemberGroupList();
}
};
</script>
<style lang="scss" scoped>
.group-list {
padding-top: 20px;
.recommend-list {
margin-top: 10px;
padding-left: 37px;
line-height: 30px;
font-size: 14px;
font-weight: bold;
color: #303133;
cursor: pointer;
}
}
.member-group {
padding: 5px 10px 20px 20px;
font-size: 14px;
color: #303133;
font-weight: bold;
cursor: pointer;
.icon-right {
float: right;
}
.icon-list {
color: #c0c4cc;
}
}
.member-list {
height: 32px;
line-height: 32px;
padding-left: 37px;
font-size: 14px;
color: #606266;
cursor: pointer;
&:hover {
background-color: #f3f6f9;
.oper-area {
display: inline;
}
}
.oper-area {
display: none;
float: right;
margin-right: 10px;
}
}
.active-li {
background-color: #f3f6f9;
}
.icon-list-oper {
color: #c0c4cc;
margin: 0 3px;
}
.icon-transform {
transition: transform 0.3s;
transform: rotate(180deg);
&.is-caret {
transform: rotate(0deg);
}
}
.recommend-active {
background-color: #f3f6f9;
}
</style>
src/view/memberGroup/memberGroupList.vue
......@@ -3,9 +3,11 @@
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<!-- 左边的会员分组 -->
<div class="group-list"></div>
<div class="left-box">
<group-list @getRecommend="getRecommend" @second-list="getsecondList"></group-list>
</div>
<!-- 右边的表格 -->
<div class="right-box">
<div class="right-box" v-show="!isRecommend">
<div class="common-wrap__opt">
<el-input class="w-220 m-r-8" placeholder="请输入关键字搜索人群" prefix-icon="el-icon-search" v-model="tagSearch" clearable @clear="clearSearch" @keyup.enter.native="searchEnterFun"> </el-input>
<el-select v-model="statusSelect" @change="searchByStatus" placeholder="请选择" class="w-220 m-l-0">
......@@ -13,10 +15,18 @@
<el-option :key="1" label="有效" :value="1"> </el-option>
<el-option key="" label="全部" value=""> </el-option>
</el-select>
<el-button type="primary" @click="toAddGroup" class="fr">新增分组</el-button>
<div class="batch-option">
<el-select v-model="batchSelect" @change="batchHandleSelect" style="width: 150px;" placeholder="批量操作" class="w-220 m-l-0">
<el-option :key="0" label="失效" :value="0"> </el-option>
<el-option :key="1" label="删除" :value="1"> </el-option>
<el-option :key="2" label="修改所属分类" :value="2"> </el-option>
</el-select>
<el-button type="primary" @click="toAddGroup" class="fr">新增分组</el-button>
</div>
</div>
<div class="common-wrap__table m-t-20">
<el-table v-loading="loading" :row-class-name="setRowClassName" ref="multipleTable" :data="groupTableData" tooltip-effect="dark" style="width: 100%">
<el-table v-loading="loading" :row-class-name="setRowClassName" ref="multipleTable" :data="groupTableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="分组名称" width="150px">
<template slot-scope="scope">
<el-popover placement="top-start" width="200" trigger="hover">
......@@ -63,7 +73,13 @@
><!-- width="150px" -->
<template slot="header">
覆盖人数
<i class="el-icon-more"></i>
<el-popover placement="top-start" width="200" trigger="hover">
<div>
默认显示上次页面缓存人数，可点击刷新按钮查看当页分组最新人数。
</div>
<el-button type="text" @click="getGroupList">刷新</el-button>
<i slot="reference" class="el-icon-more icon-transform-nine"></i>
</el-popover>
</template>
<template slot-scope="scope">
......@@ -92,7 +108,7 @@
</el-table-column>
<el-table-column label="操作" width="257px">
<template slot-scope="scope">
<el-button type="text" size="small" class="p-r-12" v-if="scope.row.effectiveStatus == 1" @click="toInvalid(scope.row)">失效</el-button>
<!-- <el-button type="text" size="small" class="p-r-12" v-if="scope.row.effectiveStatus == 1" @click="toInvalid(scope.row)">失效</el-button> -->
<router-link
:to="{
path: '/memberGroupDetail',
......@@ -110,11 +126,11 @@
class="edit-btn el-button--text p-r-12"
>编辑</router-link
>
<el-button type="text" size="small" class="p-r-12" @click="toDelTag(scope.row, scope.$index)">删除</el-button>
<!-- <el-button type="text" size="small" class="p-r-12" @click="toDelTag(scope.row, scope.$index)">删除</el-button>
<el-popover placement="top" width="50" trigger="hover">
刷新覆盖人数
<el-button slot="reference" type="text" size="small" @click="refreshGroup(scope.row)">刷新</el-button>
</el-popover>
</el-popover> -->
</template>
</el-table-column>
</el-table>
......@@ -133,6 +149,14 @@
</el-pagination>
</div>
</div>
<div class="right-box recommend-box" v-show="isRecommend">
<el-tabs v-model="activeName" @tab-click="handleTabClick">
<el-tab-pane :label="item.recommendName" :name="item.recommendName" v-for="item in recommendItems" :key="item.tagGroupRecommendId">
<recommend-table :data="recommendData"></recommend-table>
</el-tab-pane>
</el-tabs>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
......@@ -146,17 +170,26 @@ import errMsg from '@/common/js/error';
import timeFormat from '@/common/js/timeFormat';
import { _debounce } from '@/common/js/public';
import { getRequest } from '@/api/api';
import { memberGroupList } from '@/request/api';
import { recommendList, recommendGroupList, findSecondMemberList } from '@/request/api';
import GroupList from './group-list';
import RecommendTable from './recommend-table';
// import { memberGroupList } from '@/request/api';
// import groupTransfer from '@/components/groupTransfer';
export default {
name: 'memberGroupList',
components: {
// groupTransfer,
navCrumb
navCrumb,
GroupList,
RecommendTable
},
data() {
return {
dialogVisible: true,
isRecommend: false,
recommendItems: [],
recommendData: [], // 推荐分组的数据
activeName: '',
// 面包屑参数
navpath: [
{
......@@ -185,12 +218,13 @@ export default {
total: 0,
groupSetShow: false,
loading: false,
statusSelect: ''
statusSelect: '',
batchSelect: ''
};
},
created() {
this.loading = true;
this.getMemberGroupList();
// this.getMemberGroupList();
},
filters: {
formatTimeYMD(data) {
......@@ -221,6 +255,89 @@ export default {
}
},
methods: {
// 会员分组二级
getsecondList(list) {
const param = {
pageNum: 1,
pageSize: 20,
requestProject: 'gic-member-tag-web',
memberTagGroupClassifyId: list.memberTagGroupClassifyId
};
findSecondMemberList(param).then(res => {
if (res.errorCode == 1) {
this.groupTableData = res.result.result.map(el => ({
...el,
createTime: timeFormat.timeToDateTime(el.createTime)
}));
} else {
this.groupTableData = [];
}
}).catch(err => {
console.log(err);
});
},
// 切换推荐分组
handleTabClick(instance) {
let tabId = this.checkTabIndex(instance);
if (tabId) {
this.getRecommendList(tabId);
}
},
// 查找列表请求需要的id
checkTabIndex(instance) {
let index = this.recommendItems.findIndex(el => el.recommendName == instance.name);
if (index >= 0) {
return this.recommendItems[index].tagGroupRecommendId;
}
},
// 推荐分组
getRecommend() {
this.isRecommend = true;
recommendGroupList().then(res => {
if (res.errorCode == 1) {
this.recommendItems = res.result;
if (this.recommendItems && this.recommendItems.length) {
this.activeName = this.recommendItems[0].recommendName;
// 查第一个列表的数据
this.getRecommendList(this.recommendItems[0].tagGroupRecommendId);
} else {
this.recommendItems = [];
}
}
}).catch(err => {
console.log(err);
});
},
/**
* 推荐分组列
*/
getRecommendList(id) {
const param = {
tagGroupRecommendId: id,
requestProject: 'gic-member-tag-web',
};
recommendList(param).then(res => {
if (res.errorCode == 1) {
this.recommendData = res.result;
} else {
this.recommendData = [];
}
}).catch(err => {
console.log(err);
});
},
// 勾选框全选
handleSelectionChange() {
},
/**
* 批量操作
*/
batchHandleSelect(val) {
},
setRowClassName({ row, rowIndex }) {
// console.log(row, rowIndex);
},
......@@ -228,8 +345,7 @@ export default {
*
*/
showGroupSet() {
const that = this;
that.groupSetShow = true;
this.groupSetShow = true;
},
/**
......@@ -243,17 +359,15 @@ export default {
* 新增分组
*/
toAddGroup() {
const that = this;
that.changeRoute('/memberGroupEdit');
this.changeRoute('/memberGroupEdit');
},
/**
* 搜索分组清空
*/
clearSearch() {
const that = this;
that.currentPage = 1;
that.getGroupList();
this.currentPage = 1;
this.getGroupList();
},
/**
......@@ -498,16 +612,6 @@ export default {
message: error.message
});
});
},
/**
* 会员分组分类
*/
getMemberGroupList() {
memberGroupList({
requestProject: 'gic-member-tag-web'
}).then(res => {
console.log(res);
});
}
},
mounted() {
......@@ -526,4 +630,21 @@ export default {
height: 18px;
line-height: 18px;
}
.right-content {
display: flex;
.left-box {
flex: 0 0 200px;
background-color: #fff;
border-right: 1px solid rgba(220,223,230,1);
}
.right-box {
flex: 1;
.batch-option {
float: right;
.fr {
margin-left: 10px;
}
}
}
}
</style>
src/view/memberGroup/recommend-table.vue 0 → 100644
<template>
<el-table :data="tableData">
<el-table-column label="查看详情" type="expand" width="200"> </el-table-column>
<el-table-column prop="groupName" label="分组名称"> </el-table-column>
<el-table-column prop="describle" label="分组描述"> </el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" @click="createMemberGroup(scope)">创建会员分组</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'recommend-table',
props: {
data: Array
},
data() {
return {
tableData: []
};
},
watch: {
data: {
immediate: true,
handler(newval) {
this.tableData = newval;
}
}
},
methods: {
createMemberGroup(list) {
console.log(list);
}
}
};
</script>
static/css/index.less
......@@ -36,3 +36,8 @@
.el-popover {
min-width: 100px;
}
.icon-transform-nine {
transition: transform .3s;
transform: rotate(-90deg);
color: #c0c4cc;
}
\ No newline at end of file
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