Skip to content

H
haoban-3
Commit a9e5a509 by crushh
Options

Merge branch 'feature/act-code' of http://git.gicdev.com/office/haoban-3 into feature/act-code

parents a255616c edbbf9af
Showing with 329 additions and 138 deletions
src/views/salesleads/actCodeManage/components/select-clerk/index.vue 0 → 100644
<template>
<div>
<el-button class="select-clerk-trigger" v-if="!Array.isArray(data) || data.length == 0" @click="showSelectClerk = true">
<i class="iconfont-hb3 icontianjia trigger-icon"></i>
添加成员
</el-button>
<template v-if="Array.isArray(data) && data.length > 0">
<div v-if="multiple" class="multiple-preview">
<dm-sub-title style="margin-left: 4px" title-align="space-between">
<div>{{ `已选成员（${data.length}）` }}</div>
<div class="edit-btns">
<el-button class="del-btn" type="text" @click="onDelAll">清除</el-button>
<el-button class="update-clerk-trigger" type="text" @click="showSelectClerk = true">编辑</el-button>
</div>
</dm-sub-title>
<div class="clerk-list">
<selected-clerk-item v-for="el in data" :key="el.clerkId" :clerk-data="el" @del="onDel" class="clerk-item"></selected-clerk-item>
</div>
</div>
<div v-else class="single-preview">
<selected-clerk-item :clerk-data="data[0]" :show-del="false"></selected-clerk-item>
<el-button type="text" class="update-clerk-trigger" @click="showSelectClerk = true">修改成员</el-button>
</div>
</template>
<select-clerk :visible.sync="showSelectClerk" :multiple="multiple" :max="max" :data="data" @save="onChange"></select-clerk>
</div>
</template>
<script>
import SelectClerk from './select-clerk.vue';
import SelectedClerkItem from './selected-clerk-item.vue';
export default {
name: 'Index',
components: { SelectClerk, SelectedClerkItem },
props: {
// 是否多选
multiple: {
type: Boolean,
default: true
},
// 多选时最多可以选几条数据，默认100条
max: {
type: Number,
default: 100
},
// 选中的数据
data: {
type: Array,
default: () => []
}
},
data() {
return {
showSelectClerk: false
};
},
methods: {
onChange(data) {
this.$emit('change', data);
},
onDel(clerkId) {
const data = JSON.parse(JSON.stringify(this.data));
this.onChange(data.filter(el => el.clerkId != clerkId));
},
onDelAll() {
this.onChange([]);
}
}
};
</script>
<style lang="scss" scoped>
.select-clerk-trigger {
color: #2f54eb;
border-color: #2f54eb;
.trigger-icon {
font-size: 12px;
}
}
.multiple-preview {
padding: 10px 12px 12px;
width: 720px;
max-height: 500px;
overflow-y: auto;
border-radius: 2px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
.edit-btns {
display: flex;
justify-content: flex-start;
align-items: center;
.del-btn {
color: #f5222d;
}
.update-clerk-trigger {
margin-left: 20px;
}
}
.clerk-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
margin-top: 6px;
.clerk-item {
margin: 4px;
}
}
}
.single-preview {
display: flex;
justify-content: flex-start;
align-items: center;
.update-clerk-trigger {
margin-left: 16px;
}
}
</style>
src/views/salesleads/actCodeManage/components/select-clerk/selected-clerk-item.vue 0 → 100644
<template>
<div class="clerk-info-box">
<div class="clerk-info">
{{ clerkData.clerkName }}
<div class="clerk-code">{{ clerkData.clerkCode }}</div>
</div>
<i v-if="showDel" @click="$emit('del', clerkData.clerkId)" class="iconfont-hb3 iconclose1 del-clerk"></i>
</div>
</template>
<script>
export default {
name: 'SelectedClerkItem',
props: {
clerkData: {
type: Object,
default: () => ({})
},
showDel: {
type: Boolean,
default: true
}
}
};
</script>
<style lang="scss" scoped>
.clerk-info-box {
display: flex;
justify-content: center;
align-items: center;
padding: 4px 8px;
height: 51px;
background: #ebeffe;
border-radius: 4px;
box-sizing: border-box;
.clerk-info {
font-size: 14px;
font-weight: 500;
color: #303133;
line-height: 20px;
.clerk-code {
margin-top: 2px;
font-weight: 400;
}
}
.del-clerk {
margin-left: 10px;
flex-shrink: 0;
font-size: 12px;
color: #909399;
cursor: pointer;
&:hover {
color: #2f54eb;
}
}
}
</style>
src/views/salesleads/actCodeManage/staffActCode/actCodeDetail.vue
...@@ -20,14 +20,14 @@ ...@@ -20,14 +20,14 @@
<div class="font-14 line-22 flex-1">创建时间：{{ codeInfo.createTime | formatTimeStamp }}</div> <div class="font-14 line-22 flex-1">创建时间：{{ codeInfo.createTime | formatTimeStamp }}</div>
</div> </div>
<div class="flex font-14" style="padding-top:15px;"> <div class="flex font-14" style="padding-top:15px;">
<div class="font-14 line-22 flex-1">所属分组：分组名称</div> <div class="font-14 line-22 flex-1">所属分组：{{ codeInfo.hmGroupName }}</div>
<div class="flex flex-1"> <div class="flex flex-1">
<div class="font-14 line-22">自动通过好友：</div> <div class="font-14 line-22">自动通过好友：</div>
<el-tag :type="codeInfo.passFlag == 1 ? '' : 'danger'">{{ codeInfo.passFlag == 1 ? '已开启' : '已关闭' }}</el-tag> <el-tag :type="codeInfo.passFlag == 1 ? '' : 'danger'">{{ codeInfo.passFlag == 1 ? '已开启' : '已关闭' }}</el-tag>
</div> </div>
<div class="flex flex-1"> <div class="flex flex-1">
<div class="font-14 line-22">活码标签：</div> <div class="font-14 line-22">活码标签：</div>
<el-tag type="info">标签名称</el-tag> <el-tag type="info">{{ codeInfo.memberLabelName }}</el-tag>
</div> </div>
</div> </div>
<div v-if="codeInfo.statusFlag != 2" class="flex" style="padding-top:20px;"> <div v-if="codeInfo.statusFlag != 2" class="flex" style="padding-top:20px;">
...@@ -47,10 +47,10 @@ ...@@ -47,10 +47,10 @@
</div> </div>
<el-tabs v-model="activeName" type="card"> <el-tabs v-model="activeName" type="card">
<el-tab-pane label="详情信息" name="first"> <el-tab-pane label="详情信息" name="first">
<act-code-detail-info :enterprise-id="codeInfo.enterpriseId" :welcome-id="codeInfo.welcomeId"></act-code-detail-info> <act-code-detail-info :enterprise-id="codeInfo.enterpriseId" :welcome-id="codeInfo.welcomeId" :hm-id="hmId"></act-code-detail-info>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="数据统计" name="second"> <el-tab-pane label="数据统计" name="second">
<act-code-detail-statistics></act-code-detail-statistics> <act-code-detail-statistics :hm-id="hmId"></act-code-detail-statistics>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
...@@ -59,13 +59,13 @@ ...@@ -59,13 +59,13 @@
import actCodeDetailInfo from './actCodeDetailInfo.vue'; import actCodeDetailInfo from './actCodeDetailInfo.vue';
import actCodeDetailStatistics from './actCodeDetailStatistics.vue'; import actCodeDetailStatistics from './actCodeDetailStatistics.vue';
import { _throttle } from '@/common/js/public'; import { _throttle } from '@/common/js/public';
// import { getRequest } from '@/api/api'; // import { getRequest, deleteRequest } from '@/api/api';
import errMsg from '@/common/js/error'; import errMsg from '@/common/js/error';
export default { export default {
name: 'actCodeDetail', name: 'actCodeDetail',
components: { actCodeDetailInfo, actCodeDetailStatistics }, components: { actCodeDetailInfo, actCodeDetailStatistics },
props: { props: {
actCode: { hmId: {
type: String, type: String,
default: '' default: ''
} }
...@@ -92,12 +92,12 @@ export default { ...@@ -92,12 +92,12 @@ export default {
window.open(this.codeInfo.wxQrcode); window.open(this.codeInfo.wxQrcode);
}, },
modifyCode() { modifyCode() {
// this.$router.push(`/addActCode?actCodeData=`); this.$router.push(`/actCodeEdit?hmId=${this.hmId}`);
}, },
discardCode() { discardCode() {
// const that = this; // const that = this;
// that.loading = true; // that.loading = true;
// deleteRequest('/hm/qrcode/del', { hmId: that.actCode }) // deleteRequest('/hm/qrcode/del', { hmId: that.hmId })
// .then(res => { // .then(res => {
// let resData = res.data; // let resData = res.data;
// that.loading = false; // that.loading = false;
...@@ -116,10 +116,10 @@ export default { ...@@ -116,10 +116,10 @@ export default {
}, },
async getActCodeInfo() { async getActCodeInfo() {
const that = this; const that = this;
that.actCode = '999'; that.hmId = '999';
if (that.actCode.length <= 0) return; if (that.hmId.length <= 0) return;
that.loading = true; that.loading = true;
// getRequest('/hm/qrcode/detail', { hmId: that.actCode }) // getRequest('/hm/qrcode/detail', { hmId: that.hmId })
// .then(res => { // .then(res => {
let res = { let res = {
data: { data: {
...@@ -135,7 +135,9 @@ export default { ...@@ -135,7 +135,9 @@ export default {
passFlag: 0, passFlag: 0,
welcomeId: 'b680a2cf18b742cc9f4560f6195c9ec6', welcomeId: 'b680a2cf18b742cc9f4560f6195c9ec6',
enterpriseId: '5bd929fd3b2c49deaa1184bcb0d669b3', enterpriseId: '5bd929fd3b2c49deaa1184bcb0d669b3',
wxQrcode: '' wxQrcode: '',
memberLabelName: '稍加稳得',
hmGroupName: '测试分组'
} }
} }
}; };
...@@ -156,13 +158,9 @@ export default { ...@@ -156,13 +158,9 @@ export default {
// }); // });
}, },
scrollMethod: _throttle(function() { scrollMethod: _throttle(function() {
// 节流会不自然 左右不滑动
this.scrollTop = document.getElementById('hb-layout-pager-one').scrollTop; this.scrollTop = document.getElementById('hb-layout-pager-one').scrollTop;
}, 100) }, 100)
// scrollMethod(res) { // 节流不自然
// // console.log(document.getElementById('hb-layout-pager-one').scrollTop);
// // if (this.scrollTop > 280) return;
// this.scrollTop = document.getElementById('hb-layout-pager-one').scrollTop;
// }
}, },
mounted() { mounted() {
let that = this; let that = this;
...@@ -200,12 +198,13 @@ export default { ...@@ -200,12 +198,13 @@ export default {
white-space: nowrap; white-space: nowrap;
} }
.fixed-tab { .fixed-tab {
position: fixed; position: absolute;
top: 75px; top: 75px;
z-index: 1; z-index: 1;
padding-bottom: 0; padding-bottom: 0;
height: 40px; height: 40px;
background: white; background: white;
width: 100%; width: 100%;
// left: 50px;
} }
</style> </style>
src/views/salesleads/actCodeManage/staffActCode/actCodeDetailInfo.vue
...@@ -39,25 +39,24 @@ ...@@ -39,25 +39,24 @@
<el-table ref="useMemberTableRef" v-loading="loading" :data="useMemberData" tooltip-effect="dark"> <el-table ref="useMemberTableRef" v-loading="loading" :data="useMemberData" tooltip-effect="dark">
<el-table-column prop="" label="导购信息" show-overflow-tooltip min-width="185px"> <el-table-column prop="" label="导购信息" show-overflow-tooltip min-width="185px">
<template slot-scope="scope"> <template slot-scope="scope">
<p class="line-20 text-ellipsis">{{ scope.row.cardName }}</p> <p class="line-20 text-ellipsis">{{ scope.row.clerkName }}</p>
<p class="color-606266 line-18 text-ellipsis font-12">D3433433456</p> <p class="color-606266 line-18 text-ellipsis font-12">{{ scope.row.clerkCode }}</p>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="" label="导购所属门店" show-overflow-tooltip min-width="185px"> <el-table-column prop="" label="导购所属门店" show-overflow-tooltip min-width="185px">
<template slot-scope="scope"> <template slot-scope="scope">
<p class="line-20 text-ellipsis">{{ scope.row.cardName }}</p> <p class="line-20 text-ellipsis">{{ scope.row.storeName }}</p>
<p class="color-606266 line-18 text-ellipsis font-12">D3433433456</p> <p class="color-606266 line-18 text-ellipsis font-12">{{ scope.row.storeCode }}</p>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="" label="企微号" show-overflow-tooltip min-width="185px"> <el-table-column prop="" label="企微号" show-overflow-tooltip min-width="185px">
<template slot-scope="scope"> <template slot-scope="scope">
<p class="line-20 text-ellipsis">{{ scope.row.cardName }}</p> {{ scope.row.staffName }}
<p class="color-606266 line-18 text-ellipsis font-12">D3433433456</p>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="" label="今日已达上限" show-overflow-tooltip min-width="185px"> <el-table-column prop="" label="今日已达上限" show-overflow-tooltip min-width="185px">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.cardName }} {{ scope.row.overFlag == 1 ? '是' : '否' }}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -70,6 +69,7 @@ ...@@ -70,6 +69,7 @@
<script> <script>
import previewWelcome from '@/components/preview-welcome.vue'; import previewWelcome from '@/components/preview-welcome.vue';
import { getRequest } from '@/api/api'; import { getRequest } from '@/api/api';
// import errMsg from '@/common/js/error';
export default { export default {
name: 'act-code-detail-info', name: 'act-code-detail-info',
components: { previewWelcome }, components: { previewWelcome },
...@@ -85,6 +85,10 @@ export default { ...@@ -85,6 +85,10 @@ export default {
default() { default() {
return ''; return '';
} }
},
hmId: {
type: String,
default: ''
} }
}, },
data() { data() {
...@@ -99,7 +103,12 @@ export default { ...@@ -99,7 +103,12 @@ export default {
6: 'iconwenjianleixing-xiaochengxu', // 带参小程序 6: 'iconwenjianleixing-xiaochengxu', // 带参小程序
7: 'icongongzhonghao1' // 带参公众号 7: 'icongongzhonghao1' // 带参公众号
}, },
useMemberData: [{ cardName: '电话电话电话' }, { cardName: '电话电话电话' }, { cardName: '电话电话电话' }, { cardName: '电话电话电话' }, { cardName: '电话电话电话' }], useMemberData: [
{ clerkName: '电话电电话', clerkCode: '882292929233', overFlag: 0, storeName: '门店叫什么', storeCode: 's837373772', staffName: '的后视镜设计' },
{ clerkName: '话', clerkCode: '882292929233', overFlag: 1, storeName: '门店叫什么', storeCode: 's837373772', staffName: '的后视镜设计' },
{ clerkName: '电', clerkCode: '882292929233', overFlag: 1, storeName: '门店叫什么', storeCode: 's837373772', staffName: '的后视镜设计' },
{ clerkName: '电话电电话', clerkCode: '882292929233', overFlag: 1, storeName: '门店叫什么', storeCode: 's837373772', staffName: '的后视镜设计' }
],
loading: false, loading: false,
currentPage: 1, currentPage: 1,
pageSize: 20, pageSize: 20,
...@@ -150,20 +159,23 @@ export default { ...@@ -150,20 +159,23 @@ export default {
}); });
}, },
getUseTableList() { getUseTableList() {
const that = this; // const that = this;
that.loading = true; // that.loading = true;
let para = { // let para = {
pageNum: that.currentPage, // 当前页 // startTime: '',
pageSize: that.pageSize // 一页显示个数 // endTime: '',
}; // storeSearch: '',
console.log(para); // clerkSearch: '',
that.loading = false; // hmId: that.hmId,
// postRequest('/haoban-app-customer-web/cardCoupon/find-card-page', para) // pageNum: that.currentPage, // 当前页
// pageSize: that.pageSize // 一页显示个数
// };
// postRequest('/hm/qrcode/detail-clerk-list', para)
// .then(res => { // .then(res => {
// let resData = res.data; // let resData = res.data;
// that.loading = false; // that.loading = false;
// if (resData.errorCode == 1) { // if (resData.errorCode == 1) {
// that.tableData = resData.result.list || []; // that.useMemberData = resData.result.list || [];
// that.total = resData.result.pageInfo ? resData.result.pageInfo.total : 0; // that.total = resData.result.pageInfo ? resData.result.pageInfo.total : 0;
// return; // return;
// } // }
......
src/views/salesleads/actCodeManage/staffActCode/actCodeDetailStatistics.vue
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</div> </div>
<div class="m-l-16"> <div class="m-l-16">
<div class="font-14 color-606266 line-20">新增总人数</div> <div class="font-14 color-606266 line-20">新增总人数</div>
<span class="font-30 font-din" style="margin-top:1;">12345</span> <span class="font-30 font-din" style="margin-top:1;">{{ overViewData.addNumT || 0 }}</span>
</div> </div>
</div> </div>
</li> </li>
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</div> </div>
<div class="m-l-16"> <div class="m-l-16">
<div class="font-14 color-606266 line-20">今日新增人数</div> <div class="font-14 color-606266 line-20">今日新增人数</div>
<span class="font-30 font-din" style="margin-top:1;">520</span> <span class="font-30 font-din" style="margin-top:1;">{{ overViewData.addNum || 0 }}</span>
</div> </div>
</div> </div>
</li> </li>
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<el-date-picker class="w256" v-model="dateDefault" type="daterange" range-separator="~" start-placeholder="创建开始日期" end-placeholder="创建结束日期" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions()" @change="onDateChange"> </el-date-picker> <el-date-picker class="w256" v-model="dateDefault" type="daterange" range-separator="~" start-placeholder="创建开始日期" end-placeholder="创建结束日期" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions()" @change="onDateChange"> </el-date-picker>
</div> </div>
</div> </div>
<new-add-chart :charData="charData" id="new-add-chart"></new-add-chart> <new-add-chart :charData="overViewData.dateList" id="new-add-chart"></new-add-chart>
</div> </div>
<div> <div>
<div class="flex justify-between title"> <div class="flex justify-between title">
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
<div class="color-1890ff font-14 p-l-6" @click="explain('http://baidu.com')">指标说明</div> <div class="color-1890ff font-14 p-l-6" @click="explain('http://baidu.com')">指标说明</div>
</div> </div>
</div> </div>
<data-detail :id="actCode"></data-detail> <data-detail :id="hmId"></data-detail>
</div> </div>
</div> </div>
<!-- </div> --> <!-- </div> -->
...@@ -69,7 +69,7 @@ export default { ...@@ -69,7 +69,7 @@ export default {
name: 'act-code-detail-statistics', name: 'act-code-detail-statistics',
components: { dataDetail, newAddChart }, components: { dataDetail, newAddChart },
props: { props: {
actCode: { hmId: {
type: String, type: String,
default() { default() {
return ''; return '';
...@@ -78,7 +78,6 @@ export default { ...@@ -78,7 +78,6 @@ export default {
}, },
data() { data() {
return { return {
useMemberData: [{ cardName: '电话电话电话' }],
loading: false, loading: false,
dateKey: 0, dateKey: 0,
dateLis: [ dateLis: [
...@@ -116,45 +115,69 @@ export default { ...@@ -116,45 +115,69 @@ export default {
} }
}; };
}, },
charData: [ overViewData: { addNumT: 0, addNum: 0, dateList: [] }
{ date: '2018/8/1', value: 4623 },
{ date: '2018/8/2', value: 6145 },
{ date: '2018/8/3', value: 508 },
{ date: '2018/8/4', value: 289 }
]
}; };
}, },
methods: { methods: {
explain(url) { explain(url) {
window.open(url); window.open(url);
}, },
getUseTableList() { getChartList() {
const that = this; const that = this;
that.loading = true; // that.loading = true;
let para = { // getRequest('/hm/qrcode/detail-data-statistics', {hmId: that.hmId})
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize // 一页显示个数
};
console.log(para);
that.loading = false;
// postRequest('/haoban-app-customer-web/cardCoupon/find-card-page', para)
// .then(res => { // .then(res => {
// let resData = res.data; // let resData = res.data;
// that.loading = false; // that.loading = false;
// if (resData.errorCode == 1) { // if (resData.errorCode == 1) {
// that.tableData = resData.result.list || []; let resData = {
// that.total = resData.result.pageInfo ? resData.result.pageInfo.total : 0; result: {
// return; addNumT: 20,
// } addNum: 10,
// errMsg.errorMsg(resData); dateList: [
// }) { date: '2018/8/1', addNum: 4623 },
// .catch(function(error) { { date: '2018/8/2', addNum: 6145 },
// that.loading = false; { date: '2018/8/3', addNum: 508 },
// that.$message.error({ { date: '2018/8/4', addNum: 289 },
// duration: 1000, { date: '2018/8/5', addNum: 289 },
// message: error.message { date: '2018/8/6', addNum: 289 },
// }); { date: '2018/8/7', addNum: 289 },
// }); { date: '2018/8/8', addNum: 289 },
{ date: '2018/8/9', addNum: 289 },
{ date: '2018/8/10', addNum: 289 },
{ date: '2018/8/11', addNum: 289 },
{ date: '2018/8/12', addNum: 289 },
{ date: '2018/8/13', addNum: 2589 },
{ date: '2018/8/14', addNum: 289 },
{ date: '2018/8/15', addNum: 289 },
{ date: '2018/8/16', addNum: 29 },
{ date: '2018/8/17', addNum: 289 },
{ date: '2018/8/18', addNum: 9 },
{ date: '2018/8/19', addNum: 2189 },
{ date: '2018/8/20', addNum: 289 },
{ date: '2018/8/21', addNum: 2869 },
{ date: '2018/8/22', addNum: 289 },
{ date: '2018/8/23', addNum: 2809 }
]
}
};
resData.result.dateList.map(function(date) {
date['新增人数'] = date.addNum;
});
that.overViewData = resData.result;
// return;
// }
// errMsg.errorMsg(resData);
// })
// .catch(function(error) {
// that.loading = false;
// that.$message.error({
// duration: 1000,
// message: error.message
// });
// });
}, },
getDateRange(setEndDate) { getDateRange(setEndDate) {
const start = new Date(); const start = new Date();
...@@ -214,16 +237,18 @@ export default { ...@@ -214,16 +237,18 @@ export default {
const [start, end] = that.getDateRange(setDate); const [start, end] = that.getDateRange(setDate);
that.dateDefault.push(end); that.dateDefault.push(end);
that.dateDefault.push(start); that.dateDefault.push(start);
this.getChartList();
}, },
onDateChange() { onDateChange() {
this.dateKey = -1; this.dateKey = -1;
this.getChartList();
} }
}, },
mounted() { mounted() {
let that = this; let that = this;
// 默认显示近七天 // 默认显示近七天
that.btnChange(0); that.btnChange(0);
that.getUseTableList(); that.getChartList();
} }
}; };
</script> </script>
......
src/views/salesleads/actCodeManage/staffActCode/actCodeRecord.vue
<template> <template>
<section class="common-right-wrap"> <section class="common-right-wrap">
<div class="p-20"> <div class="p-20">
<div class="flex m-b-20"> <!-- <div class="flex m-b-20">
<el-input placeholder="请输入门店名称/code" v-model="searchInputStore" class="m-r-10" style="width: 260px;" @keyup.native="value => toInput(value, searchInputStore)" clearable @clear="clearInput()" prefix-icon="el-icon-search"></el-input> <el-input placeholder="请输入门店名称/code" v-model="searchInputStore" class="m-r-10" style="width: 260px;" @keyup.native="value => toInput(value, searchInputStore)" clearable @clear="clearInput()" prefix-icon="el-icon-search"></el-input>
<el-input placeholder="请输入导购名称/code" v-model="searchInputGuide" style="width: 260px;" @keyup.native="value => toInput(value, searchInputGuide)" clearable @clear="clearInput()" prefix-icon="el-icon-search"></el-input> <el-input placeholder="请输入导购名称/code" v-model="searchInputGuide" style="width: 260px;" @keyup.native="value => toInput(value, searchInputGuide)" clearable @clear="clearInput()" prefix-icon="el-icon-search"></el-input>
</div> </div> -->
<el-table ref="recordTableRef" v-loading="loading" :data="tableData" tooltip-effect="dark" class="act-code-table" @sort-change="sortChange"> <el-table ref="recordTableRef" v-loading="loading" :data="tableData" tooltip-effect="dark" class="act-code-table" @sort-change="sortChange">
<el-table-column prop="" label="基本信息" show-overflow-tooltip min-width="210px" fixed> <el-table-column prop="" label="基本信息" show-overflow-tooltip min-width="210px" fixed>
<template> <template>
...@@ -64,6 +64,11 @@ ...@@ -64,6 +64,11 @@
{{ scope.row.cardName }} {{ scope.row.cardName }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="" label="关联信息" show-overflow-tooltip min-width="103px">
<template slot-scope="scope">
{{ scope.row.cardName }}
</template>
</el-table-column>
</el-table> </el-table>
</div> </div>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0"> <div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
...@@ -73,13 +78,13 @@ ...@@ -73,13 +78,13 @@
</template> </template>
<script> <script>
// import errMsg from '@/common/js/error'; // import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public'; // import { _debounce } from '@/common/js/public';
// import { postRequest } from '@/api/api'; // import { postRequest } from '@/api/api';
export default { export default {
name: 'actCodeRecord', name: 'actCodeRecord',
components: {}, components: {},
props: { props: {
actCode: { hmId: {
type: String, type: String,
default: '' default: ''
} }
...@@ -87,8 +92,8 @@ export default { ...@@ -87,8 +92,8 @@ export default {
data() { data() {
return { return {
loading: false, loading: false,
searchInputStore: '', // searchInputStore: '',
searchInputGuide: '', // searchInputGuide: '',
tableData: [{ cardName: '常常常常常常常常常常常常常常常常', createTime: 1891282736363 }], tableData: [{ cardName: '常常常常常常常常常常常常常常常常', createTime: 1891282736363 }],
// 分页参数 // 分页参数
currentPage: 1, currentPage: 1,
...@@ -99,27 +104,20 @@ export default { ...@@ -99,27 +104,20 @@ export default {
// 面包屑 // 面包屑
}; };
}, },
// watch: {
// brandId(val) {
// if (!!val) {
// this.getTableList();
// }
// }
// },
methods: { methods: {
/** // /**
* 输入 // * 输入
*/ // */
toInput: _debounce(function(e, value, type) { // toInput: _debounce(function(e, value, type) {
const that = this; // const that = this;
that.currentPage = 1; // that.currentPage = 1;
that.getTableList(); // that.getTableList();
}, 500), // }, 500),
clearInput() { // clearInput() {
const that = this; // const that = this;
that.currentPage = 1; // that.currentPage = 1;
that.getTableList(); // that.getTableList();
}, // },
/** /**
* 排序 * 排序
*/ */
...@@ -157,10 +155,11 @@ export default { ...@@ -157,10 +155,11 @@ export default {
that.loading = true; that.loading = true;
let para = { let para = {
// gicEnterpriseId: that.brandId, // gicEnterpriseId: that.brandId,
store: that.searchInputStore || '', // 搜索字段 // store: that.searchInputStore || '', // 搜索字段
guide: that.searchInputGuide || '', // 搜索字段 // guide: that.searchInputGuide || '', // 搜索字段
pageNum: that.currentPage, // 当前页 pageNum: that.currentPage, // 当前页
pageSize: that.pageSize // 一页显示个数 pageSize: that.pageSize, // 一页显示个数
hmId: that.hmId
}; };
console.log(para); console.log(para);
that.loading = false; that.loading = false;
......
src/views/salesleads/actCodeManage/staffActCode/index.vue
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
<span class="info-content cur-po"><i class="el-icon-info info-icon"></i>指标说明</span> <span class="info-content cur-po"><i class="el-icon-info info-icon"></i>指标说明</span>
</div> </div>
</dm-sub-title> </dm-sub-title>
<select-clerk @change="onChange"></select-clerk>
<act-code-table></act-code-table> <act-code-table></act-code-table>
</div> </div>
</div> </div>
...@@ -21,14 +22,21 @@ ...@@ -21,14 +22,21 @@
<script> <script>
import GroupList from './views/group-list.vue'; import GroupList from './views/group-list.vue';
import ActCodeTable from './views/act-code-table.vue'; import ActCodeTable from './views/act-code-table.vue';
import SelectClerk from '../components/select-clerk/index.vue';
export default { export default {
name: 'staffActCode', name: 'staffActCode',
components: { components: {
GroupList, GroupList,
ActCodeTable ActCodeTable,
SelectClerk
}, },
data() { data() {
return {}; return {};
},
methods: {
onChange(data) {
console.log(data);
}
} }
}; };
</script> </script>
......
src/views/salesleads/actCodeManage/staffActCode/newAddChart.vue
...@@ -51,17 +51,17 @@ export default { ...@@ -51,17 +51,17 @@ export default {
padding: [20, 40, 80, 80] padding: [20, 40, 80, 80]
}); });
//装载数据 //装载数据
// { date: '2018/8/1', type: '首页', value: 4623 }, // { date: '2018/8/1', 新增人数: 4623 },
// { date: '2018/8/2', type: '首页', value: 6145 }, // { date: '2018/8/2', 新增人数: 6145 },
// { date: '2018/8/3', type: '首页', value: 508 }, // { date: '2018/8/3', 新增人数: 508 },
// { date: '2018/8/4', type: '首页', value: 289 } // { date: '2018/8/4', 新增人数: 289 }
// this.chart.data(this.charData); // 载入数据源 // this.chart.data(this.charData); // 载入数据源
this.chart.data(this.charData, { this.chart.data(this.charData, {
date: { date: {
// type: 'cat', //分类 // type: 'cat', //分类
alias: '日期' //别名 alias: '日期' //别名
}, },
value: { 新增人数: {
alias: '新增人数' alias: '新增人数'
} }
}); });
...@@ -85,7 +85,7 @@ export default { ...@@ -85,7 +85,7 @@ export default {
} }
} }
}); });
this.chart.axis('value', { this.chart.axis('新增人数', {
grid: { grid: {
line: { line: {
type: 'line', type: 'line',
...@@ -101,7 +101,7 @@ export default { ...@@ -101,7 +101,7 @@ export default {
}, },
formatter: val => { formatter: val => {
// 格式化参数值 // 格式化参数值
return val + '万'; return val;
} }
} }
}); });
...@@ -109,43 +109,15 @@ export default { ...@@ -109,43 +109,15 @@ export default {
this.chart.legend({ this.chart.legend({
custom: true, custom: true,
position: 'top-left', position: 'top-left',
items: [{ name: '新增人数', value: 'value', marker: { symbol: 'line', style: { stroke: '#4B74E8', lineWidth: 12, lineHeight: 8 } } }] items: [{ name: '新增人数', value: '新增人数', marker: { symbol: 'line', style: { stroke: '#4B74E8', lineWidth: 12, lineHeight: 8 } } }]
}); });
//绘制折线图
// this.chart
// .line()
// .position('date*value')
// .color('type'); //x轴:date y轴：value ，折线根据type分颜色
// //设置折点样式
// this.chart
// .point()
// .position('date*value')
// .size(3)
// .color('type')
// .shape('circle');
this.chart this.chart
.line() .line()
.position('date*value') .position('date*新增人数')
.color('#4B74E8'); .color('#4B74E8');
// chart.line().position('date*nlp').color('#2fc25b')
// this.chart.annotation().dataMarker({
// top: true,
// position: ['2016-02-28', 9],
// text: {
// content: 'Blockchain 首超 NLP',
// style: {
// textAlign: 'left'
// }
// },
// line: {
// length: 30
// }
// });
this.chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互 this.chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
//图表绘制的最后一步，用于将图表渲染至画布 //图表绘制的最后一步，用于将图表渲染至画布
this.chart.render(); this.chart.render();
} }
......
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