Skip to content

M
memberTag-web
Commit 94a4f69b by 无尘
Options

add: 增加会员分组部分以及修改excel上传下载问题

parent 6bd4c598
Showing with 524 additions and 27 deletions
src/components/addTagView.vue
......@@ -4,7 +4,7 @@
import addTagView from '@/components/addTagView.vue';
-->
<template>
<div class="addTag-tab">
<div class="addTag-tab" v-if="addTagShow">
<div class="addTag-tab-wrap">
<el-tabs v-model="addTagTabActive" @tab-click="addTagTabClick">
<el-tab-pane label="我的标签列表" name="first">
......@@ -103,14 +103,14 @@
props: {
tagLibName: {
type: String
}
},
addTagShow: Boolean
},
data() {
return {
// 我的标签列表和暂存架
addTagTabActive: 'first',
// 我的标签列表数据
myTagTableData:[
{
......
src/components/uploadExcel/index.vue
......@@ -2,7 +2,7 @@
<div>
<input id="excel-upload-input" :ref="'excel-upload-input'+currentIndex" type="file" accept=".xlsx, .xls, .csv" class="c-hide excel-upload-input" @change="handkeFileChange">
<div id="drop">
<el-button style="margin-left:16px;" size="mini" type="text" @click="handleUpload">点击导入会员</el-button>
<el-button style="margin-left:16px;" size="mini" type="text" @click="handleUpload"><span class="p-r-8">点击导入会员</span><span class="p-l-8 border-l-dcdfe6 color-e55858" v-if="!!failedData.length" @click="handleDownload">下载失败会员清单</span></el-button>
<div class="excel-upload__tip">只能上传一个excle文件（2003版本以上），且数据不超过5000条</div>
</div>
</div>
......@@ -17,7 +17,19 @@ export default {
type: [String,Number]
},
excelBodyData: Array,
excelHeader: Array
excelHeader: Array,
failHead: {
type: Array,
default: function () {
return []
}
},
failData: {
type: Array,
default: function () {
return []
}
}
},
data() {
return {
......@@ -27,7 +39,8 @@ export default {
header: null,
results: null,
name: null
}
},
failedData: []
}
},
methods: {
......@@ -132,17 +145,51 @@ export default {
headers.push(hdr)
}
return headers
}
},
/**
* 导出 excel
*/
handleDownload() {
const that = this
require.ensure([], () => {
const { export_json_to_excel } = require('@/vendor/Export2Excel')
const tHeader = ['phoneNum']
const filterVal = ['phoneNum']
const list = that.currentExcelData;
if (!list.length) {
that.$message.error({
duration: 1000,
message: "数据为空"
})
return false;
}
const data = that.formatJson(filterVal, list)
console.log(data)
export_json_to_excel(tHeader, data, '导出列表');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
},
watch: {
currentIndex: function(newdata,oldData){
console.log("watch:",newdata)
this.useIndex = newdata
}
},
failData: function(newdata,oldData){
console.log("watch:",newdata)
this.failedData = newdata
},
},
mounted() {
console.log(this.currentIndex)
console.log(this.currentIndex,this.failData)
this.useIndex = this.currentIndex
this.failedData = this.failData
}
}
</script>
......@@ -172,4 +219,8 @@ export default {
font-size: 12px;
color: #909399;
}
.color-e55858 {
color: #e55858;
}
</style>
src/components/userDefined.vue 0 → 100644
<template>
<!--自定义字段列表-弹框-->
<el-dialog title="自定义字段列表"
:visible.sync="showFlag"
:before-close="handleClose"
width="600px">
<div class="checkwtip mBottom10">请选择您想显示的列表详细信息，最多勾选8个选项，已经勾选了 <span class="curcheck">{{ checkedFields.length }}</span> 个</div>
<el-checkbox-group v-model="checkedFields" :min="0" :max="8">
<div class="checkwrap flex flex-wrap">
<div class="checkwrap-item line-30" v-for="(item, index) in memberFields" :key="index" >
<el-checkbox :label="item.code" :key="item.code">{{ item.name }}</el-checkbox>
</div>
</div>
</el-checkbox-group>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelSel">取 消</el-button>
<el-button type="primary" @click="submitFields">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
name: "userDefined",
props:{
showUserDefined: Boolean
},
data() {
return {
checkedFields: [],
memberFields: [],
showFlag: false,
}
},
methods: {
/**
* 关闭
*/
handleClose(done) {
const that = this
done();
this.$emit('hideUserDefined',false)
},
/**
* 获取自定义列表字段
*/
getList() {
const that = this
const para = {
pageName: "wxMember"
}
that.checkedFields = [];
postJson('/api-member/find-member-fields',para)
.then((res) => {
console.log(res,res.data,res.data.errorCode)
const resData = res.data
if (resData.errorCode == 0) {
// showMsg.showmsg('保存成功','success')
that.memberFields = resData.result
resData.result.forEach(function(ele,index){
if (!!ele.check) {
that.checkedFields.push(ele.code)
}
})
return;
}
errMsg.errorMsg(resData)
})
.catch(function (error) {
console.log(error);
that.$message.error({
duration: 1000,
message: error.message
})
});
},
submitFields() {
const that = this
},
/**
* 取消选择
*/
cancelSel() {
this.handleClose()
}
},
watch: {
showUserDefined: function(newData,oldData){
this.showFlag = newData
}
},
mounted() {
this.showFlag = this.showUserDefined
this.getList()
},
}
</script>
<style lang="scss" scoped>
.checkwtip {
padding: 10px;
background-color: #f8f9fb;
}
.mBottom10 {
margin-bottom: 10px;
}
.el-checkbox-group {
font-size: 0;
}
.checkwrap {
width: 100%;
}
.checkwrap-item {
/*-ms-flex: 25%;
flex: 25%;*/
width: 25%;
}
.line-30 {
line-height: 30px;
}
</style>
src/view/manualTag/manualTagEdit.vue
......@@ -84,7 +84,18 @@
<el-table-column label=" ">
<template slot-scope="scope" >
<template >
<upload-excel-component v-show="excelExistIndex != scope.$index" :excelBodyData="currentExcelData" :excelHeader="currentExcelHeader" :currentIndex="scope.$index" @on-selected-file='selectedFile' @selectIndex="setSelectIndex" @clearOldData="clearOldData" ></upload-excel-component>
<upload-excel-component
v-show="excelExistIndex != scope.$index"
:excelBodyData="currentExcelData"
:excelHeader="currentExcelHeader"
:currentIndex="scope.$index"
:failHead="scope.row.header"
:failData="scope.row.data"
@on-selected-file='selectedFile'
@selectIndex="setSelectIndex"
@clearOldData="clearOldData" >
</upload-excel-component>
</template>
<template v-if="excelExistIndex == scope.$index && !!currentExcelHeader.length">
<div class="flex excel-upload-content">
......@@ -105,7 +116,7 @@
</el-table-column>
<el-table-column label=" " width="150px">
<template slot-scope="scope" >
<el-button type="primary" :disabled="scope.$index != excelExistIndex" @click.stop="toUploadFile(scope.$index,scope.row)">上传</el-button>
<el-button type="primary" :disabled="scope.$index != excelExistIndex" @click.stop="toUploadFile(scope.$index,scope.row)">{{ !!scope.row.upStatus? '上传中':'上传' }}</el-button>
</template>
</el-table-column>
</el-table>
......@@ -209,6 +220,10 @@
inputValue: '', // 编辑输入框的值
editAble: false, // 是否在编辑
check: true, // 是否选择清空已有标签
upStatus: 0, // 记录上传的状态
// 上传失败的数据,供下载使用
header: [],
data: []
},
{
id: 2,
......@@ -216,6 +231,9 @@
inputValue: '',
editAble: false,
check: false,
upStatus: 0,
header: [],
data: []
},
{
id: 3,
......@@ -223,6 +241,9 @@
inputValue: '',
editAble: false,
check: false,
upStatus: 0,
header: [],
data: []
},
{
id: 4,
......@@ -230,6 +251,9 @@
inputValue: '',
editAble: false,
check: false,
upStatus: 0,
header: [],
data: []
}
],
......@@ -316,6 +340,9 @@
inputValue: '',
editAble: false,
check: false,
upStatus: 0,
header: [],
data: []
})
showMsg.showmsg('添加成功','success');
......@@ -453,6 +480,14 @@
toUploadFile:_debounce(function(index,row){
var that = this;
console.log(index,row);
row.upStatus = 1; // 上传中
row.data =[
{
phoneNum: "13013457892"
}
]
//
that.excelExistIndex = null
},500),
/**
......
src/view/memberGroup/memberGroupDetail.vue
......@@ -3,34 +3,258 @@
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<div class="right-box">
<div class="memberGroupDetail-wrap__head">
<p class="m-b-20"><span class="group-name">{{groupName}}</span><span class="font-10 real-time inline-block">{{!!groupIsRealTime? '实时':''}}</span></p>
<div>
<span>筛选标签</span>
<div class="inline-block tag-cell-wrap">
<template v-for="(item,index) in selectedTagData">
<span v-if="index != 0" class="p-lr-18">并且</span>
<span class="tag-cell inline-block border-box">
<span >{{item.name}}</span>
<span >【选择:{{item.value}}】</span>
</span>
</template>
</div>
</div>
</div>
<div class="memberGroupDetail-wrap__info">
<span>覆盖人数 人</span>
<span class="fr inline-block middle"><el-button type="primary" icon="el-icon-setting " @click="showDefined"></el-button></span>
</div>
<div class="memberGroupDetail-wrap__table">
<el-table
:data="memberGroupDetailData"
style="width: 100%">
<el-table-column
prop="memberId"
label="基本信息">
<template slot-scope="scope">
<span class="table-member__img inline-block border-box m-r-8"><i class="iconfont icon-huiyuanguanli"></i></span><span>{{scope.row.memberName}}</span>
</template>
</el-table-column>
<el-table-column
label="会员等级">
<template slot-scope="scope">
{{scope.row.gradeName}}
</template>
</el-table-column>
<el-table-column
label="状态">
<template slot-scope="scope">
{{scope.row.wxStatus}}
<i class="iconfont icon-weixin- table-member__wxStatus" ></i>
</template>
</el-table-column>
<el-table-column
prop="costCount"
sortable
label="消费总额">
<template slot-scope="scope">
{{scope.row.costCount}}
</template>
</el-table-column>
<el-table-column
prop="costTimes"
sortable
label="消费次数">
</el-table-column>
<el-table-column
prop="lastCost"
sortable
label="最近消费">
<template slot-scope="scope">
{{scope.row.lastCost}}
</template>
</el-table-column>
<el-table-column
prop="newAddTime"
sortable
label="新增时间">
<template slot-scope="scope">
{{scope.row.newAddTime}}
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<a :href="'/member/#/wechatmemberDetail?memberId='+scope.row.memberId +'&channel=wxMember'" class="el-button el-button--text">查看</a>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
<!-- 自定义字段列表 -->
<userDefined :showUserDefined="showUserDefined" @hideUserDefined="hideUserDefined"></userDefined>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import userDefined from '@/components/userDefined.vue';
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
name: "memberGroupDetail",
data() {
return {
// 面包屑参数
navpath: [
{
name: '首页',
path: ''
},
{
name: '会员标签',
path: ''
}
],
// 自定义字段列表是否显示
showUserDefined: false,
groupName: '分组名称',
groupIsRealTime: 1,
// 分组中已选标签
selectedTagData: [
{
id: 1,
name: '有车一族',
value: '233',
isRealTime: 0,
},
{
id: 2,
name: '有车一族',
value: '233',
isRealTime: 1,
},
{
id: 2,
name: '有车一族',
value: '233,有车一族,有车一族,有车一族,有车一族',
isRealTime: 1,
},
{
id: 2,
name: '有车一族',
value: '233,有车一族,有车一族,有车一族,有车一族',
isRealTime: 1,
},
{
id: 2,
name: '有车一族',
value: '233,有车一族,有车一族,有车一族,有车一族',
isRealTime: 1,
}
],
// memberGroupDetailData
memberGroupDetailData:[
{
memberId: "ff80808166bda81f0166bdb32c5b001a",
memberName: "谭向",
gradeName: "普卡",
thirdImgUrl: "http://thirdwx.qlogo.cn/mmopen/3eCPhvaTxDmXCOLwiaeLskRMeNLyq3azIXFyM8ib8QvLXxbicevPuP9ZzX6m1X9YDbZc9XW8mfJZhJrJTCFL6nTCvDTXuoCUD6A/0",
wxStatus: 1, // 状态
costCount: 3333, // 消费总额
costTimes: 0, // 消费次数
lastCost: 0, // 最近消费
lastCostTime: '2018-05-01',
newAddTime: '2018-05-01 17:33:12'
},
{
memberId: "ff80808166bda81f0166bdb32c5b001a",
memberName: "谭向",
gradeName: "普卡",
thirdImgUrl: "http://thirdwx.qlogo.cn/mmopen/3eCPhvaTxDmXCOLwiaeLskRMeNLyq3azIXFyM8ib8QvLXxbicevPuP9ZzX6m1X9YDbZc9XW8mfJZhJrJTCFL6nTCvDTXuoCUD6A/0",
wxStatus: 1, // 状态
costCount: 3338, // 消费总额
costTimes: 99, // 消费次数
lastCost: 666, // 最近消费
lastCostTime: '2018-06-01',
newAddTime: '2018-07-01 17:33:12'
}
]
}
},
methods: {
/**
* 弹层显示
*/
showDefined() {
const that = this
that.showUserDefined = true;
},
/**
* 取消选择-弹层隐藏
*/
hideUserDefined(flag) {
this.showUserDefined = flag
}
},
mounted() {
},
components: {
navCrumb
navCrumb,
userDefined
}
}
</script>
<style lang="scss" scoped>
.memberGroupDetail-wrap__head {
font-size: 14px;
border-bottom: 1px solid #EBEEF5;
padding-bottom: 24px;
.group-name {
font-weight: bold;
}
.real-time {
padding: 3px 5px;
border-radius: 10px;
color: #fff;
background: #1890ff;
}
.tag-cell-wrap {
width: calc(100% - 60px);
white-space: pre-wrap;
word-break: break-word;
vertical-align: top;
}
.tag-cell {
padding: 0 10px;
margin-bottom: 10px;
height: 36px;
line-height: 36px;
background: #EBEEF5;
border-radius: 2px;
}
}
.memberGroupDetail-wrap__info {
height: 87px;
line-height: 87px;
}
.table-member__img {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
background: #F3F6F9;
i {
font-size: 30px;
color: #DFE6F0;
}
}
.table-member__wxStatus {
font-size: 20px;
color: #37C583;
}
</style>
src/view/memberGroup/memberGroupList.vue
......@@ -21,7 +21,7 @@
style="width: 100%">
<el-table-column
prop="name"
label="标签名称"
label="分组名称"
width="150px"
show-overflow-tooltip>
<!-- <template slot-scope="scope">{{ scope.row.name }}</template> -->
......
static/css/public.css
......@@ -338,6 +338,10 @@ input:focus {
margin-left: 20px;
}
.m-l-220 {
margin-left: 220px;
}
.m-t-05 {
margin-top: -5px;
}
......@@ -378,6 +382,10 @@ input:focus {
padding: 0 4px;
}
.p-lr-18 {
padding: 0 18px;
}
.p-l-8 {
padding-left: 8px;
}
......@@ -426,6 +434,18 @@ input:focus {
width: 200px;
}
.w-220 {
width: 220px;
}
.w-223 {
width: 223px;
}
.w-243 {
width: 243px;
}
.w-290 {
width: 290px;
}
......@@ -442,12 +462,21 @@ input:focus {
width: 485px;
}
.w-548 {
width: 548px;
}
.border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* border */
.border-l-dcdfe6 {
border-left: 1px solid #dcdfe6;
}
/* display */
.inline-block {
display: inline-block;
......@@ -474,10 +503,10 @@ input:focus {
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-row {
......@@ -489,17 +518,25 @@ input:focus {
}
.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
......@@ -513,6 +550,10 @@ i {
font-weight: normal;
}
.font-10 {
font-size: 10px;
}
.font-12 {
font-size: 12px;
}
......@@ -543,6 +584,14 @@ i {
color: #909399;
}
.color-c0c4cc {
color: #c0c4cc;
}
.color-606266 {
color: #606266;
}
.pagewrap {
margin: 20px 0;
text-align: right;
......@@ -1213,3 +1262,11 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.memberGroupEdit-wrap__body .el-textarea__inner {
resize: none;
height: 96px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
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