Skip to content

H
haoban-4
Commit 16a5aca4 by 无尘
Options

feat: 增加路由配置

parent 2737e07b
Showing with 5000 additions and 3 deletions
.eslintrc.js
......@@ -123,12 +123,12 @@ module.exports = {
],
// 定义过的变量必须使用 【正规应该是这样的，具体可以大家讨论】
"no-unused-vars": [
2,
1,
{
vars: "all",
vars: "local",
args: "none",
caughtErrors: "none",
ignoreRestSiblings: true
ignoreRestSiblings: false
}
],
// 变量必须先定义后使用 【ps:涉及到es6存在不允许变量提升的问题，以免引起意想不到的错误，具体可以大家讨论】
......
package.json
......@@ -10,6 +10,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"awesome-phonenumber": "^2.35.0",
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"clipboard": "^2.0.4",
......
src/components/app/app-detail-left.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2020-03-05 12:05:14
-->
<!--
应用公共左侧菜单：
<common-detail-left
:tabListData="tabListData"
:activeSelTab="activeSelTab"
@setSelectTab="setSelectTab">
</common-detail-left>
// activeSelTab: 刷新时候传入的选中 tabId
// tabListData: 列表数据
// @setSelectTab: 选择后把选择的 tabId 返给父级
-->
<template>
<div class="p-t-12">
<ul class="tab-left-list">
<template v-for="(item, index) in tabData">
<li :class="['tab-left-list-cell color-303133 font-14 border-box p-l-14', item.tabId == activeTab ? 'active-tab' : '']" :key="index" @click="selectTab(item, false, index)">
<i :class="['p-r-10 color-303133 iconfont', item.icon, !!item.onlyIconActive ? '' : '']"></i>{{ item.tabName }}
<!-- iconActive <i v-if="!!item.children && !!item.children.length" :class="[!!collapsFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i> -->
</li>
<ul class="child-tab-left-list" :key="'childitem' + index">
<!-- v-if="!!item.collapsFlag"-->
<template v-for="(childitem, childIndex) in item.children">
<li :class="['tab-left-list-cell color-303133 font-14 border-box p-l-40', childitem.tabId == activeTab ? 'active-tab' : '']" :key="childIndex" @click="selectTab(childitem, 'child', index)">{{ childitem.tabName }}</li>
<ul class="third-tab-left-list" :key="'thirditem' + childIndex">
<template v-for="(thirditem, thirdIndex) in childitem.children">
<li :class="['tab-left-list-cell color-303133 font-14 border-box p-l-60', thirditem.tabId == activeTab ? 'active-tab' : '']" :key="thirdIndex" @click="selectTab(thirditem, 'child', index)">{{ thirditem.tabName }}</li>
</template>
</ul>
</template>
</ul>
</template>
</ul>
</div>
</template>
<script>
export default {
name: 'common-detail-left',
props: {
appName: {
type: String,
default() {
return '';
}
},
// 刷新时候传入的选中 tabId
activeSelTab: {
type: [String, Number],
default() {
return '1';
}
},
// 传入的 tabListData
tabListData: {
type: [Array, Object],
default() {
return [];
}
}
},
data() {
return {
projectName: '', // 当前项目名
activeTab: '1',
tabData: this.tabListData,
collapsFlag: true
};
},
methods: {
/**
* 路由跳转
*/
returnBack() {
let that = this;
that.$router.push('appcenter');
},
/**
* 选择后触发方法，返回 tabId
*/
selectTab(item, flag, index) {
let that = this;
if (!!flag) {
that.tabData[index].onlyIconActive = true;
} else {
that.tabData.forEach(ele => {
ele.onlyIconActive = false;
});
if (item.hasOwnProperty('children') && !!item.children.length) {
that.collapsFlag = !!that.collapsFlag && item.hasOwnProperty('children') && !!item.children.length ? false : true;
}
}
// 判断已选 item, 判断只让 icon 变色
if (item.hasOwnProperty('children')) {
that.tabData[index].onlyIconActive = true;
if (item.children[0].hasOwnProperty('children')) {
that.activeTab = item.children[0].children[0].tabId;
that.$emit('setSelectTab', item);
return false;
}
that.activeTab = item.children[0].tabId;
that.$emit('setSelectTab', item);
return false;
}
that.activeTab = item.tabId;
that.$emit('setSelectTab', item);
}
},
watch: {
tabListData: function(newData, oldData) {
let that = this;
that.tabData = newData;
},
activeSelTab: function(newData, oldData) {
let that = this;
that.activeTab = newData;
}
},
mounted() {
this.activeTab = this.activeSelTab;
}
};
</script>
<style type="text/less" lang="less" scoped>
.tab-left-list {
.tab-left-list-cell {
position: relative;
text-align: left; /* margin-top: 15px; */
height: 40px;
line-height: 40px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
.iconActive {
color: #2f54eb;
}
&:hover {
color: #2f54eb;
background: rgba(47, 84, 235, 0.05);
i {
color: #2f54eb;
}
}
&.active-tab {
color: #2f54eb;
background: rgba(47, 84, 235, 0.05); /* &::before { content: ' '; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #2F54EB; z-index: 1; } */
i {
color: #2f54eb;
}
}
}
.child-tab-left-list {
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
li {
position: relative;
text-align: left;
height: 40px;
line-height: 40px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
&:hover {
color: #2f54eb;
background: rgba(47, 84, 235, 0.05);
i {
color: #2f54eb;
}
}
&.active-tab {
color: #2f54eb;
background: rgba(47, 84, 235, 0.05); /* &::before { content: ' '; position:
absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #2f54eb; z-index: 1; } */
i {
color: #2f54eb;
}
}
}
}
}
</style>
src/components/app/card-list-table.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-10-25 14:05:56
* @LastEditors: 无尘
* @LastEditTime: 2019-10-31 11:11:00
-->
<!--
<card-list-table :tableData="tableData" @delCard="delCard"></card-list-table>
import cardListTable from '@/components/app/card-list-table
-->
<template>
<div>
<el-table class="select-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: calc(100% - 3px);">
<el-table-column prop="" label="卡券名称" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.cardName }}
</template>
</el-table-column>
<el-table-column prop="" label="卡券类型">
<template slot-scope="scope">
<span v-if="scope.row.cardType == 0">抵金券</span>
<span v-if="scope.row.cardType == 1">折扣券</span>
<span v-if="scope.row.cardType == 2">兑换券</span>
</template>
</el-table-column>
<el-table-column prop="" label="有效期" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.effectDateString || '--' }}</template>
</el-table-column>
<el-table-column prop="" label="库存">
<template slot-scope="scope">
<div>{{ scope.row.couponStock }}</div>
</template>
</el-table-column>
<el-table-column prop="" label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button type="text" size="small" @click="toEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="text" size="small" @click="toDel(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'card-list-table',
props: {
tableData: {
type: [Array, Object],
default() {
return [];
}
},
activeTab: {
type: [String, Number],
default() {
return '51';
}
}
},
data() {
return {};
},
methods: {
/**
* 删除
*/
toDel(index, row) {
const that = this;
that
.$confirm('是否要删除选中的分类?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.$emit('delCard', row.coupCardId);
})
.catch(() => {});
},
/**
* 编辑卡券
*/
toEdit(index, row) {
const that = this;
that.$router.push(`/newCard?activeTab=${that.activeTab}&appIcon=${this.$route.query.appIcon}&coupCardId=${row.coupCardId}`);
}
}
};
</script>
<style lang="less" scoped></style>
src/components/app/card-record-table.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-10-25 14:05:56
* @LastEditors: 无尘
* @LastEditTime: 2020-07-20 11:32:47
-->
<!--
<card-record-table :activeTab="activeTab" :tableData="tableData"></card-record-table>
import cardRecordTable from '@/components/app/card-record-table
-->
<template>
<div class="card-record-table m-t-20">
<el-table class="select-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: calc(100% - 3px);">
<el-table-column prop="" label="卡券名称" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.cardName }}
</template>
</el-table-column>
<el-table-column prop="" label="" width="96">
<template slot="header" >
<el-tooltip class="item" effect="dark" content="发送卡券数量，包含扫码发券数" placement="right">
<span style="cursor: pointer;">发送数量<i class="el-icon-info font-12 color-606266"></i></span>
</el-tooltip>
</template>
<template slot-scope="scope">
{{ scope.row.issuingQuantity }}
</template>
</el-table-column>
<el-table-column prop="" label="领取数量">
<template slot-scope="scope">{{ scope.row.getedQuantity }}</template>
</el-table-column>
<el-table-column prop="" label="领取率">
<template slot-scope="scope">{{ scope.row.getedRate | percenteNum }}</template>
</el-table-column>
<el-table-column prop="" label="使用数量">
<template slot-scope="scope">
<div>{{ scope.row.usageQuantity }}</div>
</template>
</el-table-column>
<el-table-column prop="" label="核销率">
<template slot-scope="scope">
<div>{{ scope.row.verificationRate | percenteNum }}</div>
</template>
</el-table-column>
<el-table-column prop="" label="销售额">
<template slot-scope="scope">
<div>{{ scope.row.saleAmount }}</div>
</template>
</el-table-column>
<el-table-column width="150">
<template slot="header" >
<el-tooltip class="item" effect="dark" content="导购发送卡券的总人数统计，次日刷新" placement="right">
<span style="cursor: pointer;">导购发送卡券人数<i class="el-icon-info font-12 color-606266"></i></span>
</el-tooltip>
</template>
<template slot-scope="scope">
{{ scope.row.sendMemberCount }}
</template>
</el-table-column>
<el-table-column prop="" width="200" label="操作" fixed="right">
<template slot-scope="scope">
<el-button type="text" size="small" @click="toSendDetail(scope.$index, scope.row, '1')">发送记录</el-button>
<el-button type="text" size="small" @click="toSendDetail(scope.$index, scope.row, '2')">领取记录</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'card-record-table',
props: {
tableData: {
type: [Array, Object],
default() {
return [];
}
},
activeTab: {
type: [String, Number],
default() {
return '52';
}
}
},
data() {
return {};
},
filters: {
percenteNum(val) {
return val > 0 ? Number(val * 100).toFixed(2) + '%' : Number(val).toFixed(2) + '%';
}
},
methods: {
/**
* 发送记录
*/
toSendDetail(index, row, tabType) {
const that = this;
that.$router.push(`/${tabType == 1 ? 'cardSendRecord' : 'cardGetRecord'}?activeTab=${that.activeTab}&appIcon=${this.$route.query.appIcon}&coupCardId=${row.coupCardId}`);
}
}
};
</script>
<style lang="less" scoped>
.card-record-table {
width: 100%;
}
</style>
src/components/app/card/select-card.vue 0 → 100644
<!--
<select-card :brandId="brandId" @closeCard="closeCard" @returnId="returnId"></select-card>
import selectCard from '@/components/app/card/select-card.vue';
-->
<template>
<el-dialog title="卡券选择" :visible.sync="dialogVisible" width="994px" :before-close="handleClose">
<div class="search-div">
<el-input placeholder="请输入卡券名称" v-model="searchInput" class="w-264" style="width: 264px;" clearable @keyup.native="value => toInput(value, searchInput)" @clear="clearInput"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input><span class="search-tip p-l-20 font-14 color-909399">仅支持选择“领取限制&gt;=100”的卡券，系统已自动过滤不符合条件的卡券，符合条件的卡券共{{ total }}张</span>
</div>
<div class="chat-log-content boder-box m-t-20">
<el-table :data="tableData" style="width: 100%">
<el-table-column class-name="hide-ellipsis" label="" width="50">
<template slot-scope="scope">
<el-radio v-model="selectCoupCardId" :disabled="scope.row.selected == 1 ? true : false" :label="scope.row.coupCardId">{{ '' }}</el-radio>
</template>
</el-table-column>
<el-table-column prop="cardName" label="卡券名称" show-overflow-tooltip></el-table-column>
<el-table-column label="备注名" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.subName }}
</template>
</el-table-column>
<el-table-column prop="effectDateString" label="有效期" show-overflow-tooltip> </el-table-column>
<el-table-column prop="cardLimit" label="领取限制" show-overflow-tooltip> </el-table-column>
<el-table-column prop="storeMode" label="适用门店" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.storeMode == 0 ? '所有门店' : scope.row.storeMode == 1 ? '部分分组' : '部分门店' }}
</template>
</el-table-column>
<el-table-column prop="couponStock" label="库存" show-overflow-tooltip> </el-table-column>
<el-table-column prop="getedQuantity" label="领取次数" show-overflow-tooltip> </el-table-column>
</el-table>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
<dm-pagination background @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout=" prev, pager, next" :total="total"> </dm-pagination>
</div>
</div>
<div slot="footer" class="dialog-footer m-b-20">
<el-button @click="toCancel">取 消</el-button>
<el-button type="primary" @click="toConfirm">确认</el-button>
</div>
</el-dialog>
</template>
<script>
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
import { _debounce } from '@/common/js/public';
export default {
props: {
brandId: {
type: String,
default() {
return '';
}
},
coupCardId: {
type: String,
default() {
return '';
}
}
},
data() {
return {
dialogVisible: true,
selectCoupCardId: this.coupCardId || '',
tableData: [],
// 分页参数
currentPage: 1,
pageSize: 6,
total: 0
};
},
methods: {
handleClose(done) {
const that = this;
that.$emit('closeCard');
},
toConfirm() {
const that = this;
let row = {};
that.tableData.forEach(ele => {
if (ele.coupCardId == that.selectCoupCardId) {
row = ele;
}
});
that.$emit('returnId', that.selectCoupCardId, row);
},
toCancel() {
const that = this;
that.$emit('closeCard');
},
/**
* 输入
*/
toInput: _debounce(function(e, value) {
const that = this;
that.currentPage = 1;
that.getTableList();
}, 200),
// 搜索清除
clearInput() {
const that = this;
that.currentPage = 1;
that.getTableList();
},
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.currentPage = 1;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 获取列表数据
*/
getTableList(val) {
const that = this;
let para = {
cardName: that.searchInput || '', // 搜索字段
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize, // 一页显示个数
gicEnterpriseId: that.brandId
// taskType: 1 //0不良评价，1话务任务
};
getRequest('/haoban-app-customer-web/cardCoupon/find-select-card-page', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.pageInfo.total;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
brandId: function(newData, oldData) {
const that = this;
if (!!newData) {
that.getTableList();
}
},
coupCardId: function(newData, oldData) {
const that = this;
if (!!newData) {
that.selectCoupCardId = newData;
}
}
},
mounted() {
const that = this;
that.selectCoupCardId = that.coupCardId;
if (that.brandId) {
that.getTableList();
}
}
};
</script>
<style lang="less" scoped>
.m-b-20 {
margin-bottom: 20px;
}
.p-l-18 {
padding-left: 18px;
}
</style>
src/components/app/chat-log-list.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-09-19 10:44:47
* @LastEditors: 无尘
* @LastEditTime: 2019-11-13 15:46:54
-->
<!--
<chat-log-list :brandId="brandId" :itemRow="itemRow" :showFlag='showFlag' @hideDetail="hideDetail"></chat-log-list>
import chatLogList from '@/components/app/chat-log-list.vue';
components: {
chatLogList
}
-->
<template>
<div :class="['chat-log-detail', !showFlag ? 'hide-detail' : '']">
<div v-if="showFlag" class="log-mask" @click="hideLog"></div>
<div class="chat-log-wrap">
<div class="chat-log-detail_top border-box" @click="hideLog">
<i class="iconfont icon-zhankai"></i>
</div>
<ul class="chat-log-list border-box" v-infinite-scroll="load">
<li v-for="(item, index) in chatDetailData" class="infinite-list-item" :key="index">
<div v-if="item.type == 0" class="chat-list-cell flex">
<div class="chat-list-cell_img"><img :src="item.headPic" alt="" /></div>
<div class="chat-list-right p-l-3 flex flex-column flex-space-between">
<div class="chat-list-user font-12 color-909399">
<span>{{ item.name }} </span> <span>{{ item.createTime | formatTimeYmdHms }}</span>
</div>
<div class="chat-list-msg font-14 color-303133 m-t-3">
<div v-if="item.msgType == 'image'" class="img"><img class="w-100" :src="item.content" alt="" /></div>
<div v-if="item.msgType == 'text'" class="text">{{ item.content }}</div>
<div v-if="item.msgType == 'wechat_news' || item.msgType == 'wechat_app'" class="no-consist">收到一条图文消息，请在手机上查看</div>
</div>
</div>
</div>
<div v-if="item.type == 1" class="chat-list-cell flex flex-end">
<div class="chat-list-right p-r-3 flex flex-column flex-space-between">
<div class="chat-list-user font-12 color-909399 text-right ">
<span>{{ item.name }} </span> <span>{{ item.createTime | formatTimeYmdHms }}</span>
</div>
<div class="chat-list-msg font-14 color-303133 text-right ">
<div v-if="item.msgType == 'image'" class="img"><img class="w-100" :src="item.content" alt="" /></div>
<div v-if="item.msgType == 'text'" class="text">{{ item.content }}</div>
<div v-if="item.msgType == 'wechat_news' || item.msgType == 'wechat_app'" class="no-consist">收到一条图文消息，请在手机上查看</div>
</div>
</div>
<div class="chat-list-cell_img"><img :src="item.headPic" alt="" /></div>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
// import EXIF from 'exif-js';
import { postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
name: 'chat-log-list',
props: {
brandId: {
type: String,
default() {
return '';
}
},
activeGroupId: {
type: String,
default() {
return '';
}
},
showFlag: {
type: Boolean,
default() {
return false;
}
},
itemRow: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
chatDetailData: [],
pageSize: 20,
pageNum: 1,
total: 0,
currentRow: this.itemRow
};
},
methods: {
/**
* 隐藏详情
*/
hideLog() {
const that = this;
that.chatDetailData = [];
that.pageNum = 1;
that.total = 0;
that.currentRow = {};
that.$emit('hideDetail');
that.$nextTick(() => {
document.body.style.overflow = 'auto';
});
},
load() {
const that = this;
if (that.chatDetailData[that.chatDetailData.length - 1]) {
that.getData(that.chatDetailData[that.chatDetailData.length - 1].userMessageId);
}
},
/**
* 获取消息详情
*/
getData(userMessageId) {
const that = this;
let para = {
brandId: that.brandId,
size: that.pageSize,
messageId: that.currentRow.messageId,
userMessageId: userMessageId,
userId: that.currentRow.userId
};
postRequest('/haoban-app-member-web/customer/find_message_detail', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (resData.result && resData.result.length) {
// resData.result.forEach(ele => {
for (let i = 0; i < resData.result.length; i++) {
/* if (resData.result[i].msgType == 'image') {
let img = new Image();
let orientation;
img.src = resData.result[i].content;
img.setAttribute('crossOrigin', 'Anonymous');
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
img.onload = function() {
console.log(img, img.width);
ctx.drawImage(img, 0, 0);
let baseUrl = canvas.toDataURL('image/png');
console.log(baseUrl);
EXIF.getData(img, function() {
//获取图片原数据orientation
orientation = EXIF.getTag(img, 'Orientation');
});
console.log(orientation);
};
} */
that.chatDetailData.push(resData.result[i]);
}
// });
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
brandId: function(newData, oldData) {
const that = this;
if (!!newData) {
that.activeBrand = newData;
}
},
activeGroupId: function(newData, oldData) {
const that = this;
if (!!newData) {
that.activeGroup = newData;
}
},
// showFlag: function(newData, oldData) {
// const that = this;
// if (!!newData) {
// // that.getData();
// }
// },
itemRow: function(newData, oldData) {
const that = this;
document.body.style.overflow = 'hidden';
that.chatDetailData = [];
if (Object.keys(newData).length) {
that.currentRow = newData;
that.getData();
}
}
},
mounted() {
const that = this;
that.chatDetailData = [];
if (Object.keys(that.itemRow).length) {
that.currentRow = that.itemRow;
that.getData();
}
}
};
</script>
<style lang="less" scoped>
.m-t-3 {
margin-top: 3px;
}
.p-l-3 {
padding-left: 3px;
}
.p-r-3 {
padding-right: 3px;
}
.w-100 {
width: 100px;
}
.chat-log-detail {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 399px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
overflow: hidden;
z-index: 100;
background: #fff;
.log-mask {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
margin: 0;
opacity: 0.5;
background: #000;
z-index: 9;
}
&.hide-detail {
right: -399px;
}
.chat-log-wrap {
position: relative;
background: #fff;
z-index: 101;
}
.chat-log-detail_top {
width: 100%;
height: 50px;
line-height: 50px;
padding-left: 15px;
border-bottom: 1px solid #e4e7ed;
cursor: pointer;
i {
font-size: 13px;
color: #c0c4cc;
}
}
.chat-log-list {
height: calc(100vh - 50px);
padding: 8px 10px 0 12px;
overflow-y: auto;
overflow-x: hidden;
li {
margin-bottom: 40px;
.chat-list-cell {
text-overflow: ellipsis;
overflow: hidden;
.chat-list-right {
.chat-list-msg {
word-break: break-all;
}
.chat-list-user {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.chat-list-cell_img {
width: 36px;
min-width: 36px;
max-width: 36px;
height: 36px;
border-radius: 50%;
img {
width: 36px;
height: 36px;
border-radius: 50%;
}
}
&.flex-end {
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
-o-justify-content: flex-end;
justify-content: flex-end;
.chat-list-user {
padding-right: 8px;
}
}
}
}
}
}
</style>
src/components/app/cloudDaily/birthday-membership-data.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2020-03-06 17:34:39
-->
<!--
<birthday-membership-data
:fieldName="fieldName">
</birthday-membership-data>
-->
<template>
<div class="birth-number-contain">
<h3 class="build-title title-flag">
<span>{{ fieldName }}</span>
</h3>
<div class="data-list">
<div class="data-item">
<div class="data-progress">
<span class="data-item-title">订单数占比</span>
<div class="data-bottom">
<div class="data-num">80.00%</div>
<div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
<div class="data-top"></div>
</div>
</div>
<div class="data-title">
<p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
</div>
</div>
<div class="data-item">
<div class="data-progress">
<span class="data-item-title">消费人数占比</span>
<div class="data-bottom">
<div class="data-num">80.00%</div>
<div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
<div class="data-top"></div>
</div>
</div>
<div class="data-title">
<p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
</div>
</div>
<div class="data-item">
<div class="data-progress">
<span class="data-item-title">消费金额占比</span>
<div class="data-bottom">
<div class="data-num">80.00%</div>
<div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
<div class="data-top"></div>
</div>
</div>
<div class="data-title">
<p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'birthday-membership-data',
props: {
fieldName: {
type: String,
default() {
return '';
}
}
},
data() {
return {};
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.birth-number-contain {
background: #fff;
padding: 0 12px;
position: relative;
.build-title {
height: 56px;
line-height: 56px;
// padding-left: 10px;
text-align: left;
background: #fff;
span {
display: inline-block;
height: 14px;
line-height: 10px;
border-left: 2px solid #2b3953;
padding-left: 12px;
font-size: 17px;
font-weight: 600;
}
}
.data-item {
margin-top: 10px;
.data-item-title {
width: 90px;
display: inline-block;
}
.data-bottom {
width: 204px;
height: 10px;
background: #f3f3f9;
display: inline-block;
position: relative;
margin-top: 20px;
border-radius: 2px;
}
.data-num {
position: absolute;
color: #508cee;
top: -21px;
left: 0;
font-size: 14px;
font-weight: 600;
}
.data-percent {
position: absolute;
top: -20px;
right: 0;
}
.data-top {
background: #508cee;
height: 10px;
position: absolute;
left: 0;
top: 0;
width: 50%;
border-radius: 2px;
}
.data-ratio {
font-size: 14px;
font-weight: 600;
margin-left: 5px;
}
.data-percent-first {
margin-right: 5px;
}
.data-percent-second {
margin-left: 5px;
}
.data-title {
height: 30px;
}
.gic-pull-right {
float: right;
}
}
}
</style>
src/components/app/cloudDaily/custom-set.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-02-05 10:50:57
* @LastEditors: 无尘
* @LastEditTime: 2020-03-10 16:09:27
-->
<!--
系统模板设置
<custom-set v-if="setVisible" :templateObj="templateObj" :storeList="storeList" @closeSet="closeSet"></custom-set>
import customSet from '@/components/app/cloudDaily/custom-set.vue';
-->
<template>
<el-dialog width="600px" title="模板设置" :visible.sync="setVisible" append-to-body :before-close="handleClose">
<div class="m-t-20">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="模板名称" prop="title">
<limitInput :inputWidth="340" :inputValue.sync="ruleForm.title" :holder="''" :disflag="false" :getByType="'word'" :maxLength="10"> </limitInput>
</el-form-item>
<el-form-item label="模板描述" prop="description">
<limitInput :inputWidth="340" :inputValue.sync="ruleForm.description" :holder="''" :disflag="false" :getByType="'word'" :maxLength="20"> </limitInput>
</el-form-item>
<el-form-item label="门店类型" prop="storeType">
<div class="store-type-cell m-b-20" v-for="(item, index) in storeList" :key="item.name + index">
<el-radio v-model="ruleForm.storeType" :label="item.id" :disabled="item.disabled">{{ item.name }}</el-radio>
</div>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
/* eslint-disable */
export default {
props: {
templateObj: {
type: [Array, Object],
default () {
return {};
}
},
storeList: {
type: [Array, Object],
default () {
return [];
}
},
},
data() {
return {
setVisible: true,
rules: {
title: [
{ required: true, message: '请输入模板名称', trigger: 'blur' },
],
description: [
{ required: true, message: '请输入模板描述', trigger: 'blur' },
],
storeType: [
{ required: true, message: '请选择门店类型', trigger: 'change' }
],
},
ruleForm: {
title: '',
description: '',
storeType: ''
}
};
},
computed: {},
watch: {
templateObj(val) {
const that = this;
if(Object.keys('val').length) {
that.ruleForm = JSON.parse(JSON.stringify(val));
}
}
},
methods: {
/**
* 关闭弹窗
*/
handleClose(done) {
const that = this;
done();
that.$emit('closeSet','close');
that.selectId = '';
},
cancel() {
const that = this;
that.$emit('closeSet','close');
that.selectId = '';
},
/**
* 确定
*/
submitForm(formName) {
const that = this;
that.$refs[formName].validate((valid) => {
if (valid) {
that.$emit('closeSet', that.ruleForm);
} else {
console.log('error submit!!');
return false;
}
});
}
},
components: {limitInput},
mounted() {
const that = this;
that.ruleForm = JSON.parse(JSON.stringify(that.templateObj));
}
};
</script>
<style scoped>
.m-t-5 {
margin-top: 5px;
}
.m-l-40 {
margin-left: 40px;
}
.dialog-top {
margin-bottom: 20px;
}
.dialog-top img {
width: 40px;
height: 40px;
border: 1px solid #e4e7ed;
border-radius: 50%;
vertical-align: middle;
margin-right: 10px;
}
.dialog-top span {
font-size: 14px;
font-weight: 600;
color: #303133;
}
.select-info {
display: inline-block;
vertical-align: middle;
}
.dialog-operate {
display: flex;
align-items: center;
justify-content: space-between;
}
.pagination-content {
text-align: right;
}
.dialog-form {
width: 430px;
padding-top: 20px;
}
.w-215 {
width: 215px;
}
.w-115 {
width: 115px;
}
.select-tree-wrap {
height: 445px;
overflow-y: auto;
border: 1px solid #e4e7ed;
}
</style>
src/components/app/cloudDaily/error-mointor.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2020-03-06 17:35:58
-->
<!--
<error-mointor
:fieldName="fieldName">
</error-mointor>
-->
<template>
<div class="anomal-monitor-contain">
<h3 class="build-title title-flag">
<span>{{ fieldName }}</span>
</h3>
<div class="progress-contain">
<div class="progress-center">
<div id="container_progress1" class="container-progress" style="position: relative;">
<svg viewBox="0 0 100 100" style="display: block; width: 100%;">
<path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#eee" stroke-width="8" fill-opacity="0"></path>
<path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#2f54eb" stroke-width="8" fill-opacity="0" style="stroke-dasharray: 289.067, 289.067; stroke-dashoffset: 72.2668; transition: stroke-dashoffset 1.5s ease-in;"></path>
</svg>
<div class="progressbar-text progressbar-text-left" style="position: absolute; left: 50%; top: 50%; padding: 0px; margin: 0px; transform: translate(-50%, -50%); color: #2f54eb; font-size: 14px; font-weight: 600;">75.00%</div>
</div>
<p class="progress-text">无导购率</p>
</div>
<div class="progress-center">
<div id="container_progress2" class="container-progress" style="position: relative;">
<svg viewBox="0 0 100 100" style="display: block; width: 100%;">
<path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#eee" stroke-width="8" fill-opacity="0"></path>
<path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#2f54eb" stroke-width="8" fill-opacity="0" style="stroke-dasharray: 289.067, 289.067; stroke-dashoffset: 216.8; transition: stroke-dashoffset 1.5s ease-in;"></path>
</svg>
<div class="progressbar-text progressbar-text-mid" style="position: absolute; left: 50%; top: 50%; padding: 0px; margin: 0px; transform: translate(-50%, -50%); color: #2f54eb; font-size: 14px; font-weight: 600;">25.00%</div>
</div>
<p class="progress-text">退单率</p>
</div>
<div class="progress-center">
<div id="container_progress3" class="container-progress" style="position: relative;">
<svg viewBox="0 0 100 100" style="display: block; width: 100%;">
<path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#eee" stroke-width="8" fill-opacity="0"></path>
<path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#2f54eb" stroke-width="8" fill-opacity="0" style="stroke-dasharray: 289.067, 289.067; stroke-dashoffset: 14.4534; transition: stroke-dashoffset 1.5s ease-in;"></path>
</svg>
<div class="progressbar-text progressbar-text-right" style="position: absolute; left: 50%; top: 50%; padding: 0px; margin: 0px; transform: translate(-50%, -50%); color: #2f54eb; font-size: 14px; font-weight: 600;">95.00%</div>
</div>
<p class="progress-text">凭空退单率</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'error-mointor',
props: {
fieldName: {
type: String,
default() {
return '';
}
}
},
data() {
return {};
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.build-title {
height: 56px;
line-height: 56px;
padding-left: 10px;
text-align: left;
background: #fff;
span {
display: inline-block;
height: 14px;
line-height: 10px;
border-left: 2px solid #2b3953;
padding-left: 12px;
font-size: 17px;
font-weight: 600;
}
}
.progress-contain {
display: flex;
background: #fff;
padding: 15px 0 30px 0;
.progress-center {
display: flex;
align-items: center;
flex-flow: column;
flex: 1;
.progress-text {
margin-top: 10px;
font-size: 12px;
}
.container-progress {
position: relative;
width: 60px;
height: 60px;
svg {
display: block;
width: 100%;
}
svg:not(:root) {
overflow: hidden;
}
.progressbar-text-left {
position: absolute;
left: 50%;
top: 50%;
padding: 0px;
margin: 0px;
transform: translate(-50%, -50%);
color: #2f54eb;
font-size: 14px;
font-weight: 600;
}
}
}
}
</style>
src/components/app/cloudDaily/membership-data.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2020-03-06 17:36:30
-->
<!--
<membership-data
:fieldName="fieldName">
</membership-data>
-->
<template>
<div class="data-number-contain">
<h3 class="build-title title-flag">
<span>{{ fieldName }}</span>
</h3>
<table class="data-number-table">
<thead>
<tr>
<th class="w_22"></th>
<th class="w_26">日</th>
<th class="w_26">月</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="1">会员总数</td>
<td colspan="2">9,000,000</td>
</tr>
<tr>
<td>新增会员</td>
<td>473,960</td>
<td>473,960</td>
</tr>
<tr>
<td>同比</td>
<td>100%</td>
<td>100%</td>
</tr>
<tr>
<td>环比</td>
<td>100%</td>
<td>100%</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'membership-data',
props: {
fieldName: {
type: String,
default() {
return '';
}
}
},
data() {
return {};
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.data-number-contain {
position: relative;
.build-title {
height: 56px;
line-height: 56px;
padding-left: 10px;
text-align: left;
background: #fff;
span {
display: inline-block;
height: 14px;
line-height: 10px;
border-left: 2px solid #2b3953;
padding-left: 12px;
font-size: 17px;
font-weight: 600;
}
}
.data-number-table {
width: 100%;
text-align: center;
thead {
font-weight: 700;
tr {
height: 50px;
line-height: 50px;
background: #f3f4f8;
font-size: 12px;
text-align: left;
}
th {
text-align: center;
}
.w_22 {
width: 22%;
}
.w_26 {
width: 26%;
}
}
tbody {
tr {
height: 50px;
line-height: 50px;
font-size: 12px;
td:first-child {
font-size: 13px;
font-weight: 600;
}
}
tr:first-child {
font-weight: 600;
color: #7ca5f1;
}
tr:nth-child(odd) {
background: #fff;
}
}
}
}
</style>
src/components/app/cloudDaily/multiple-del.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2020-03-18 10:00:12
-->
<!--
<multiple-del
:showDialog="showDialog"
:detailFlag="true" # true/false 是否是详情页，判断一个选项用
@hideDialog="hideDialog">
</multiple-del>
-->
<template>
<div v-show="customDialog">
<el-dialog class="app-dialog" title="批量删除" :visible.sync="customDialog" width="600px" :before-close="handleClose">
<!-- <div class="app-dialog-body p-l-15"> -->
<el-form ref="form" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="">
<el-radio v-model="formData.delOptFlag" label="0">仅删除逾期任务</el-radio>
<el-radio v-model="formData.delOptFlag" label="1">删除所有待完成任务</el-radio>
</el-form-item>
<!-- <div v-if="detailShowFlag" class="el-message-box__title">
<div class="el-message-box__status el-icon-warning"></div>
<span>仅可删除历史月份逾期未完成任务</span>
</div> -->
<el-form-item label="原因备注" prop="reason">
<limit-textarea class="mult-del-textarea" :inputWidth="450" :inputValue.sync="formData.reason" :holder="''" :getByType="'char'" :maxLength="50"> </limit-textarea>
</el-form-item>
</el-form>
<!-- </div> -->
<div slot="footer" class="dialog-footer">
<el-button @click="customCancel">取 消</el-button>
<el-button type="primary" @click="customConfirm('form')">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import limitTextarea from '@/components/limit-textarea.vue';
export default {
name: 'multiple-del',
props: {
showDialog: {
type: Boolean,
default: false
},
detailFlag: {
type: Boolean,
default: false
},
detailShowFlag: {
type: Boolean,
default: false
}
},
components: {
limitTextarea
},
data() {
return {
repProjectName: 'haoban-manage-web', // 项目名
customDialog: false, // 弹框显示
rules: {
reason: [{ required: true, message: '请输入原因内容', trigger: 'blur' }]
},
formData: {
delOptFlag: '0',
reason: ''
}
};
},
methods: {
/**
* 关闭
*/
handleClose(done) {
const that = this;
done();
that.hideDialog();
},
/**
* 取消
*/
customCancel() {
const that = this;
that.hideDialog();
},
hideDialog() {
const that = this;
that.customDialog = false;
that.$refs['form'].resetFields();
that.$emit('hideDialog', {});
},
/**
* 确定
*/
customConfirm(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
that.$emit('hideDialog', that.formData);
} else {
return false;
}
});
}
},
watch: {
showDialog: function(newData, oldData) {
const that = this;
that.customDialog = newData;
}
},
/* 接收数据 */
mounted() {
const that = this;
that.customDialog = that.showDialog;
}
};
</script>
<style lang="scss" scoped>
.el-message-box__title {
position: relative;
text-align: center;
margin-bottom: 30px;
.el-message-box__status {
position: relative;
top: auto;
padding-right: 5px;
text-align: center;
transform: translateY(3px);
}
span {
font-size: 14px;
line-height: 20px;
color: #606266;
}
}
</style>
src/components/app/cloudDaily/old-customer-data.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2020-03-06 17:33:01
-->
<!--
<old-customer-data
:fieldName="fieldName">
</old-customer-data>
-->
<template>
<div class="birth-number-contain">
<h3 class="build-title title-flag">
<span>{{ fieldName }}</span>
</h3>
<div class="data-list">
<div class="data-item">
<div class="data-progress">
<span class="data-item-title">订单数占比</span>
<div class="data-bottom">
<div class="data-num">80.00%</div>
<div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
<div class="data-top"></div>
</div>
</div>
<div class="data-title">
<p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
</div>
</div>
<div class="data-item">
<div class="data-progress">
<span class="data-item-title">消费人数占比</span>
<div class="data-bottom">
<div class="data-num">80.00%</div>
<div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
<div class="data-top"></div>
</div>
</div>
<div class="data-title">
<p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
</div>
</div>
<div class="data-item">
<div class="data-progress">
<span class="data-item-title">消费金额占比</span>
<div class="data-bottom">
<div class="data-num">80.00%</div>
<div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
<div class="data-top"></div>
</div>
</div>
<div class="data-title">
<p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'old-customer-data',
props: {
fieldName: {
type: String,
default() {
return '';
}
}
},
data() {
return {};
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.birth-number-contain {
background: #fff;
padding: 0 12px;
position: relative;
.build-title {
height: 56px;
line-height: 56px;
// padding-left: 10px;
text-align: left;
background: #fff;
span {
display: inline-block;
height: 14px;
line-height: 10px;
border-left: 2px solid #2b3953;
padding-left: 12px;
font-size: 17px;
font-weight: 600;
}
}
.data-item {
margin-top: 10px;
.data-item-title {
width: 90px;
display: inline-block;
}
.data-bottom {
width: 204px;
height: 10px;
background: #f3f3f9;
display: inline-block;
position: relative;
margin-top: 20px;
border-radius: 2px;
}
.data-num {
position: absolute;
color: #508cee;
top: -21px;
left: 0;
font-size: 14px;
font-weight: 600;
}
.data-percent {
position: absolute;
top: -20px;
right: 0;
}
.data-top {
background: #508cee;
height: 10px;
position: absolute;
left: 0;
top: 0;
width: 50%;
border-radius: 2px;
}
.data-ratio {
font-size: 14px;
font-weight: 600;
margin-left: 5px;
}
.data-percent-first {
margin-right: 5px;
}
.data-percent-second {
margin-left: 5px;
}
.data-title {
height: 30px;
}
.gic-pull-right {
float: right;
}
}
}
</style>
src/components/app/cloudDaily/store-performance.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2020-03-06 17:34:18
-->
<!--
<store-performance
:fieldName="fieldName">
</store-performance>
-->
<template>
<div class="data-number-contain">
<h3 class="build-title title-flag">
<span>{{ fieldName }}</span>
</h3>
<table class="data-number-table">
<thead>
<tr>
<th class="w_22"></th>
<th class="w_26">日</th>
<th class="w_26">月</th>
</tr>
</thead>
<tbody>
<tr>
<td>指标</td>
<td>473,960</td>
<td>473,960</td>
</tr>
<tr>
<td>累计销售额</td>
<td>473,960</td>
<td>999,476,960</td>
</tr>
<tr>
<td>达成率</td>
<td>100%</td>
<td>100%</td>
</tr>
<tr>
<td>同比</td>
<td>100%</td>
<td>100%</td>
</tr>
<tr>
<td>环比</td>
<td>100%</td>
<td>100%</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'store-performance',
props: {
fieldName: {
type: String,
default() {
return '';
}
}
},
data() {
return {};
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.data-number-contain {
position: relative;
.build-title {
height: 56px;
line-height: 56px;
padding-left: 10px;
text-align: left;
background: #fff;
span {
border-left: 2px solid #2b3953;
padding-left: 12px;
font-size: 17px;
font-weight: 600;
display: inline-block;
height: 14px;
line-height: 10px;
}
}
.data-number-table {
width: 100%;
text-align: center;
thead {
font-weight: 700;
tr {
height: 50px;
line-height: 50px;
background: #f3f4f8;
font-size: 12px;
text-align: left;
}
th {
text-align: center;
}
.w_22 {
width: 22%;
}
.w_26 {
width: 26%;
}
}
tbody {
tr {
height: 50px;
line-height: 50px;
font-size: 12px;
td:first-child {
font-size: 12px;
font-weight: 600;
}
}
tr:first-child {
font-weight: 600;
color: #7ca5f1;
}
tr:nth-child(odd) {
background: #fff;
}
}
}
}
</style>
src/components/app/cloudDaily/system-set.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-02-05 10:50:57
* @LastEditors : 无尘
* @LastEditTime : 2020-03-02 10:55:50
-->
<!--
系统模板设置
<system-set v-if="setVisible" @closeSet="closeSet"></system-set>
import systemSet from '@/components/app/cloudDaily/system-set.vue';
-->
<template>
<el-dialog width="600px" title="模板设置" :visible.sync="setVisible" append-to-body :before-close="handleClose">
<div class="m-t-20">
<el-radio v-model="selectId" label="0">定义在日报自定义上报模板上面</el-radio>
<el-radio class="m-l-40" v-model="selectId" label="1">定义在日报自定义上报模板下面</el-radio>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</div>
</el-dialog>
</template>
<script>
/* eslint-disable */
export default {
props: {
setting: {
type: [Number, String],
default () {
return '0';
}
}
},
data() {
return {
setVisible: true,
selectId: '0',
};
},
computed: {},
watch: {
setting(val) {
this.selectId = val;
}
},
methods: {
/**
* 关闭弹窗
*/
handleClose(done) {
const that = this;
done();
that.$emit('closeSet','close');
that.selectId = '';
},
cancel() {
const that = this;
that.$emit('closeSet','close');
that.selectId = '';
},
/**
* 确定
*/
submitForm() {
const that = this;
that.$emit('closeSet', that.selectId);
}
},
components: {},
mounted() {
this.selectId = this.setting;
}
};
</script>
<style scoped>
.m-t-5 {
margin-top: 5px;
}
.m-l-40 {
margin-left: 40px;
}
.dialog-top {
margin-bottom: 20px;
}
.dialog-top img {
width: 40px;
height: 40px;
border: 1px solid #e4e7ed;
border-radius: 50%;
vertical-align: middle;
margin-right: 10px;
}
.dialog-top span {
font-size: 14px;
font-weight: 600;
color: #303133;
}
.select-info {
display: inline-block;
vertical-align: middle;
}
.dialog-operate {
display: flex;
align-items: center;
justify-content: space-between;
}
.pagination-content {
text-align: right;
}
.dialog-form {
width: 430px;
padding-top: 20px;
}
.w-215 {
width: 215px;
}
.w-115 {
width: 115px;
}
.select-tree-wrap {
height: 445px;
overflow-y: auto;
border: 1px solid #e4e7ed;
}
</style>
src/components/app/cloudDaily/time-progress.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2019-03-20 14:36:37
-->
<!--
<time-progress
:fieldName="fieldName">
</time-progress>
-->
<template>
<div class="time-progress-contain">
<div>
<p class="build-title title-flag">
<span>{{ fieldName }}</span>
</p>
</div>
<div class="time-progress-item">
<div class="time-progress-title">
<p class="gic-pull-left">50.00%</p>
<p class="gic-pull-right"><span>15</span>/<span>30</span></p>
</div>
<div class="time-progress-bottom">
<div class="time-progress-top"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'time-progress',
props: {
fieldName: {
type: String,
default() {
return '';
}
}
},
data() {
return {};
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.gic-pull-left {
float: left;
}
.gic-pull-right {
float: right;
}
.time-progress-contain {
background: #fff;
position: relative;
.time-progress-item {
padding: 0 15px 30px 15px;
.time-progress-title {
height: 30px;
}
.time-progress-bottom {
position: relative;
width: 100%;
height: 10px;
background: #f3f3f9;
border-radius: 2px;
}
.time-progress-top {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 10px;
background: #508cee;
border-radius: 2px;
}
}
}
.build-title {
padding-left: 10px;
height: 56px;
line-height: 56px;
text-align: left;
background: #fff;
span {
display: inline-block;
height: 14px;
line-height: 10px;
border-left: 2px solid #2b3953;
padding-left: 12px;
font-size: 17px;
font-weight: 600;
}
}
</style>
src/components/app/common-app-top.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors : 无尘
* @LastEditTime : 2019-12-25 09:28:36
-->
<!--
应用公共顶部：
<common-app-top
:appName="appName"
:appIcon="appIcon"
@selectBrandId="selectBrandId">
</common-app-top>
-->
<template>
<div class="app-top-wrap app-detail-wrap">
<div class="my-customer-top">
<div class="my-customer-name">
<span class="app-icon "><img class="" :src="appIcon"/></span><span class="p-l-8">{{ appName }}</span>
</div>
<el-button class="border-radius-18 my-customer-return" @click="returnBack">返回</el-button>
<div v-if="$route.path != '/workSet' && $route.path != '/workGroupSet' && $route.path != '/dayStatistics' && $route.path != '/workGroupSet' && $route.path != '/dayStatistics' && $route.path != '/workTimeManage'" class="my-customer-brand">
<el-tooltip class="item" effect="dark" content="不同品牌的工作台可分别进行管理。点击后切换，可以管理不同品牌下的应用" placement="top-start">
<span class="font-14 color-606266" style="cursor: pointer;">品牌名称<span class="el-icon-info font-12 color-909399 p-l-6"></span> </span>
</el-tooltip>
<el-select class="p-l-10" v-model="activeBrand" placeholder="请选择" @change="changeSelect">
<el-option v-for="item in brandListData" :key="item.brandId" :label="item.name" :value="item.brandId"> </el-option>
</el-select>
</div>
</div>
</div>
</template>
<script>
import errMsg from '@/common/js/error';
import { postRequest } from '@/api/api';
export default {
name: 'common-app-top',
props: {
appName: {
type: String,
default() {
return '';
}
},
appIcon: {
type: String,
default() {
return '';
}
}
},
data() {
return {
projectName: '', // 当前项目名
activeBrand: '',
brandListData: []
};
},
methods: {
/**
* 返回
*/
returnBack() {
let that = this;
that.$router.push('appcenter');
},
/**
* 选择品牌
*/
changeSelect(val) {
let that = this;
let groupId = '';
that.brandListData.forEach(ele => {
if (ele.brandId == val) {
groupId = ele.groupId;
}
});
that.$emit('selectBrandId', val, groupId);
},
/**
* 获取品牌
*/
getBrandData() {
const that = this;
postRequest('/haoban-manage-web/application-brand-list', {})
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result && !!resData.result.length) {
that.brandListData = resData.result;
if (!!that.$route.query.brandId) {
that.activeBrand = that.$route.query.brandId;
that.$emit('selectBrandId', that.$route.query.brandId);
return false;
}
that.activeBrand = that.brandListData[0].brandId;
// 由于门店选择组件中没有品牌id ,只有 groupId
that.$emit('selectBrandId', that.brandListData[0].brandId, that.brandListData[0].groupId);
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
brandId: function(newData, oldData) {
const that = this;
that.getBrandData();
}
},
mounted() {
const that = this;
that.getBrandData();
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.w-500 {
width: 500px;
}
.color-1890ff {
color: #2f54eb;
}
.app-detail-wrap {
.my-customer-top {
position: relative;
height: 43px;
line-height: 43px;
.my-customer-return {
position: absolute;
left: 0px;
bottom: 10px;
width: 78px;
height: 32px;
border-radius: 18px;
}
.my-customer-brand {
position: absolute;
right: 0;
bottom: 18px;
// width: 93px;
height: 32px;
}
.my-customer-name {
width: 200px;
margin: 0 auto;
i {
font-size: 14px;
color: #fff;
}
span {
font-size: 16px;
color: #000;
}
.app-icon {
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 4px;
/* background: -webkit-gradient(linear, right top, left top, from(#7ab6fb), to(#508bfe));
background: -webkit-linear-gradient(right, #7ab6fb, #508bfe);
background: -moz-linear-gradient(right, #7ab6fb, #508bfe);
background: linear-gradient(right, #7ab6fb, #508bfe);
background: -webkit-linear-gradient(right, #7ab6fb, #508bfe); */
img {
display: inline-block;
max-width: 22px;
max-height: 22px;
vertical-align: bottom;
}
}
}
}
}
</style>
src/components/app/common-detail-top.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2019-10-28 11:31:25
-->
<!--
应用公共头部：
<common-detail-top
:topMenuData="topMenuData"
:activeId="activeId">
</common-detail-top>
-->
<template>
<div class="app-detail-top">
<div class="el-tabs__header is-top">
<div class="el-tabs__nav-wrap is-top">
<div class="el-tabs__nav-scroll">
<ul>
<li v-for="(item, index) in topData" :key="index" :class="['top-cell', item.id == activeId ? 'cell-active' : '']">
<div class="top-name" @click="changeRoute(item.path)">{{ item.name }}</div>
<i v-if="topData.length > 1 && index != topData.length - 1" class="el-icon-arrow-right p-lr-11"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'common-detail-top',
props: {
topMenuData: {
type: Array,
default() {
return [];
}
},
activeId: {
type: [String, Number],
default() {
return '';
}
}
},
data() {
return {
projectName: '', // 当前项目名
topData: []
};
},
methods: {
/**
* 路由跳转
*/
changeRoute(route) {
if (!!route) {
this.$router.push(route);
}
},
/**
* 返回
*/
returnBack() {
let that = this;
that.$router.push('appcenter');
}
},
watch: {
topMenuData: function(newData, oldData) {
const that = this;
that.topData = newData;
}
},
mounted() {
const that = this;
that.topData = this.topMenuData;
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.app-detail-top {
.el-tabs__header {
position: relative;
padding: 0;
margin: 0;
.el-tabs__nav-wrap::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #e4e7ed;
z-index: 1;
}
.el-tabs__nav-scroll {
padding-left: 20px;
ul {
font-size: 0;
li {
position: relative;
display: inline-block;
padding: 0;
height: 48px;
line-height: 48px;
list-style: none;
font-size: 14px;
color: #606266;
font-weight: 500;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
.top-name {
display: inline-block;
height: 48px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
&.cell-active {
.top-name {
border-bottom: 3px solid #303133;
color: #303133;
}
}
}
}
}
.el-tabs__active-bar {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background-color: #2f54eb;
z-index: 1;
}
.el-tabs__item {
padding: 0;
height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 40px;
display: inline-block;
list-style: none;
font-size: 14px;
font-weight: 500;
color: #303133;
position: relative;
}
}
}
</style>
src/components/app/create-classify.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-07-23 17:26:09
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:00:17
-->
<!--
<create-classify
:classifyName="classifyName"
:classifyId="classifyId"
:showDialog="showDialog"
@hideDialog="hideDialog">
</create-classify>
-->
<template>
<div v-show="customDialog">
<el-dialog class="app-dialog" :title="classifyName == '' ? '新增分类' : '编辑分类'" :visible.sync="customDialog" width="600px" :before-close="handleClose">
<div class="app-dialog-body">
<div role="alert" class="el-alert el-alert--info">
<i class="el-alert__icon el-icon-info"></i>
<div class="el-alert__content">
<span class="el-alert__title">新建分类默认排序最后，可在分类列表中调整显示排序</span>
</div>
</div>
<el-form :model="formData" label-width="94px" :rules="rules" ref="classifyForm">
<el-form-item label="分类名称：" prop="classifyName">
<limitInputBlur :inputWidth="440" :inputValue.sync="formData.classifyName" :holder="'请输入分类名称'" :getByType="'word'" :maxLength="8"> </limitInputBlur>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer" style="padding-bottom: 10px;">
<el-button @click="customCancel">取 消</el-button>
<el-button type="primary" @click="customConfirm('classifyForm')">{{ classifyName == '' ? '新 建' : '保 存' }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import limitInputBlur from '@/components/limit-input-blur.vue';
export default {
name: 'create-classify',
props: {
showDialog: {
type: Boolean,
default: false
},
classifyName: {
type: String,
default: ''
},
classifyId: {
type: String,
default: ''
},
appName: {
type: String,
default: ''
}
},
components: {
limitInputBlur
},
data() {
return {
repProjectName: 'haoban-manage-web', // 项目名
customDialog: false, // 弹框显示
formData: {
classifyName: '',
classifyId: this.classifyId
},
rules: {
classifyName: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
}
};
},
methods: {
/**
* 关闭
*/
handleClose(done) {
const that = this;
done();
that.hideDialog();
},
/**
* 取消
*/
customCancel() {
const that = this;
that.hideDialog();
},
hideDialog() {
const that = this;
that.customDialog = false;
that.formData.classifyName = '';
that.$emit('hideDialog', '', '');
/* that.$nextTick(() => {
that.formData.classifyName = '';
}); */
},
/**
* 确定
*/
customConfirm(formName) {
const that = this;
that.formData.classifyName = that.formData.classifyName.replace(/\s+/g, '');
that.$refs[formName].validate(valid => {
if (valid) {
that.setData();
} else {
return false;
}
});
},
/**
* 提交数据
*/
setData(list) {
const that = this;
that.$emit('hideDialog', that.formData.classifyName.replace(/\s+/g, ''), that.formData.classifyId);
/* that.$nextTick(() => {
that.formData.classifyName = '';
}); */
}
},
watch: {
showDialog: function(newData, oldData) {
const that = this;
that.customDialog = newData;
},
classifyName: function(newData, oldData) {
const that = this;
that.formData.classifyName = newData;
},
classifyId: function(newData, oldData) {
const that = this;
that.formData.classifyId = newData;
}
},
/* 接收数据 */
mounted() {
const that = this;
that.customDialog = that.showDialog;
that.formData.classifyName = that.classifyName;
that.formData.classifyId = that.classifyId;
}
};
</script>
<style lang="scss" scoped>
.app-dialog {
/deep/ .el-dialog__body {
padding: 7px 20px 0 20px;
}
&-wrap {
}
&__title {
width: 100%;
height: 38px;
padding: 12px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: rgba(235, 238, 245, 1);
}
.el-alert--info {
width: 400px;
font-size: 14px;
color: #606266;
background: #e6f7ff;
border: 1px solid rgba(145, 213, 255, 1);
}
.el-icon-info {
width: 12px;
font-size: 12px;
color: #2f54eb;
}
.el-form {
margin-top: 40px;
}
}
</style>
src/components/app/customer/add-template.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-04-14 09:50:16
* @LastEditors: 无尘
* @LastEditTime: 2020-06-16 15:23:15
-->
<!--
<add-template :brandId="brandId" @closeTemplate="closeTemplate" @submitTemplate="submitTemplate"></add-template>
import addTemplate from '@/components/set/add-template.vue';
-->
<template>
<el-dialog :title="!!editRow.templateId ? '编辑模板' : '新建模板'" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
<div class="">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="模板名称" prop="templateName">
<limitInput :inputWidth="440" :inputValue.sync="ruleForm.templateName" :holder="'请输入模板名称'" :getByType="'word'" :maxLength="20"> </limitInput>
</el-form-item>
<el-form-item label="会员分组" prop="memberTagGroupIds">
<el-select v-model="ruleForm.memberTagGroupIds" placeholder="请选择">
<el-option
v-for="item in groupListData"
:key="item.memberTagGroupId"
:label="item.groupName"
:value="item.memberTagGroupId">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="toCancel">取消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import { _debounce } from '@/common/js/public';
import { postRequest } from '@/api/api';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
export default {
props: {
editRow: {
type: Object,
default() {
return {};
}
},
categoryId: {
type: Object,
default() {
return '';
}
}
},
components: {
limitInput
},
data() {
return {
editPersion: localStorage.getItem('userInfos') && JSON.parse(localStorage.getItem('userInfos')).staffDTO ? JSON.parse(localStorage.getItem('userInfos')).staffDTO.staffName : '',
wxEnterpriseRelatedId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
dialogVisible: true,
groupListData: [],
ruleForm: {
templateId: '',
templateName: '',
memberTagGroupIds: ''
},
rules: {
templateName: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
memberTagGroupIds: [
{ type: 'array', required: true, message: '请至少选择一个会员分组', trigger: 'change' }
],
},
};
},
methods: {
toCancel() {
const that = this;
that.$emit('closeTemplate');
that.$refs['ruleForm'].resetFields();
},
handleClose(done) {
const that = this;
that.$emit('closeTemplate');
that.$refs['ruleForm'].resetFields();
},
submitForm: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
that.postSave();
}
});
}, 300),
postSave() {
const that = this;
const data = {
templateId: that.ruleForm.templateId,
templateName: that.ruleForm.templateName,
memberTagGroupIds: that.ruleForm.memberTagGroupIds.join(','),
editPerson: that.editPerson
};
postRequest(that.ruleForm.templateId ? '/haoban-app-customer-web/memberGroup/save-group-template' : '/haoban-app-customer-web/memberGroup/save-group-template', data)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('操作成功', 'success');
that.$refs['ruleForm'].resetFields();
that.$emit('submitTemplate');
} else {
errMsg.errorMsg(resData);
}
})
.catch(error => {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取会员分组列表
*/
getGroupList(brandId) {
const that = this;
let para = {
enterpriseId: that.brandId,
wxEnterpriseRelatedId: that.wxEnterpriseRelatedId,
pageNum: 1,
pageSize: 500
};
postRequest('/haoban-app-customer-web/memberGroup/member-tag-group-list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.groupListData = resData.result.list || [];
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
editRow(newData) {
const that = this;
if (Object.keys(newData).length) {
that.ruleForm = JSON.parse(JSON.stringify(newData));
}
}
},
mounted() {
const that = this;
if (Object.keys(that.editRow).length) {
that.ruleForm = JSON.parse(JSON.stringify(that.editRow));
}
}
};
</script>
<style lang="less" scoped>
.m-b-20 {
margin-bottom: 20px;
}
.p-l-18 {
padding-left: 18px;
}
.material-content {
position: relative;
.material-body {
/* resize: none;
width: 440px;
height: 273px;
border-radius: 2px;
border: 1px solid rgba(196, 198, 207, 1); */
.el-textarea {
/deep/ .el-textarea__inner {
height: 273px;
}
}
}
.emoji-img {
position: absolute;
left: 10px;
bottom: 10px;
}
}
.el-textarea {
/deep/ .el-textarea__inner {
height: 273px;
}
}
</style>
src/components/app/customer/select-group.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-04-14 09:50:16
* @LastEditors: 无尘
* @LastEditTime: 2020-07-20 11:14:08
-->
<!--
<select-group :brandId="brandId" @closeGroup="closeGroup" @submitGroup="submitGroup"></select-group>
import selectGroup from '@/components/app/customer/select-group.vue';
-->
<template>
<el-dialog title="选择分组" :visible.sync="dialogVisible" width="833px" :before-close="handleClose">
<div class="">
<div class="search-top m-b-20">
<el-input placeholder="请输入分组名称搜索" prefix-icon="el-icon-search" v-model="searchInput" class="w-280" @keyup.native="value => toInput(value, searchInput)" clearable @clear="clearInput"> </el-input>
</div>
<el-table class="select-table" ref="multipleTable" v-loading="loading" :data="tableData" height="450" tooltip-effect="dark" :style="{ width: '100%' }" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="分组名称">
<template slot-scope="scope">
{{ scope.row.groupName || '--' }}
</template>
</el-table-column>
<el-table-column label="分类">
<template slot-scope="scope">
{{ scope.row.memberTagGroupClassifyName || '--' }}
</template>
</el-table-column>
<el-table-column prop="" label="是否实时" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.isRealTime == 1 ? '是' : '否' }}</template>
</el-table-column>
<el-table-column prop="" label="更新频率" show-overflow-tooltip>
<template slot-scope="scope"
>{{ scope.row.updateType == 1 ? '每日' : scope.row.updateType == 2 ? '每周' : scope.row.updateType == 3 ? '每月' : '-' }} {{ scope.row.updateType == 1 ? '一次' : scope.row.updateType == 2 ? '周' + scope.row.updateDay : scope.row.updateType == 3 ? scope.row.updateDay + '号' : '-' }}
</template>
</el-table-column>
<el-table-column prop="" label="状态" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.effectiveStatus == '1' ? '有效' : '失效' }}</template>
</el-table-column>
<el-table-column prop="" label="覆盖人数" show-overflow-tooltip>
<template slot-scope="scope"
>{{ scope.row.memberCount || 0 }}人</template
>
</el-table-column>
<el-table-column prop="" label="到期时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="line-18">{{ scope.row.effectiveDate | timeStampToYmd }}</div>
<div class="line-18">{{ scope.row.effectiveDate | timeStampToHms }}</div>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
<dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="toCancel">取消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import { _debounce } from '@/common/js/public';
import { postRequest } from '@/api/api';
// import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
export default {
props: {
brandId: {
type: Object,
default() {
return '';
}
}
},
components: {
},
data() {
return {
editPersion: localStorage.getItem('userInfos') && JSON.parse(localStorage.getItem('userInfos')).staffDTO ? JSON.parse(localStorage.getItem('userInfos')).staffDTO.staffName : '',
wxEnterpriseRelatedId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
loading: false,
dialogVisible: true,
tableData: [],
searchInput: '',
multipleSelection: [],
// 分页参数
currentPage: 1,
pageSize: 20,
total: 0
};
},
methods: {
/**
* 多选分组
*/
handleSelectionChange(val) {
const that = this;
that.multipleSelection = val;
},
/**
* 输入
*/
toInput: _debounce(function(e, value) {
const that = this;
that.currentPage = 1;
that.getTableList();
}, 500),
// 搜索清除
clearInput() {
const that = this;
that.currentPage = 1;
that.getTableList();
},
toCancel() {
const that = this;
that.$emit('closeGroup');
that.$refs.multipleTable.clearSelection();
},
handleClose(done) {
const that = this;
that.$emit('closeGroup');
that.$refs.multipleTable.clearSelection();
},
submitForm: _debounce(function(formName) {
const that = this;
that.$emit('submitGroup', that.multipleSelection);
}, 300),
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.currentPage = 1;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 获取列表数据
*/
getTableList(val) {
const that = this;
that.loading = true;
let para = {
memberGroupName: that.searchInput || '', // 搜索字段
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize, // 一页显示个数
wxEnterpriseRelatedId: that.wxEnterpriseRelatedId,
enterpriseId: that.brandId
};
postRequest('/haoban-app-customer-web/memberGroup/member-tag-group-list', para)
.then(res => {
let resData = res.data;
that.loading = false;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.pageInfo.total;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.loading = false;
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {},
mounted() {
const that = this;
that.getTableList();
}
};
</script>
<style lang="less" scoped>
.m-b-20 {
margin-bottom: 20px;
}
.p-l-18 {
padding-left: 18px;
}
.w-280 {
width: 280px;
}
.material-content {
position: relative;
.material-body {
/* resize: none;
width: 440px;
height: 273px;
border-radius: 2px;
border: 1px solid rgba(196, 198, 207, 1); */
.el-textarea {
/deep/ .el-textarea__inner {
height: 273px;
}
}
}
.emoji-img {
position: absolute;
left: 10px;
bottom: 10px;
}
}
.el-textarea {
/deep/ .el-textarea__inner {
height: 273px;
}
}
</style>
src/components/app/customer/set-visiable.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-04-14 09:50:16
* @LastEditors: 无尘
* @LastEditTime: 2020-07-03 15:25:45
-->
<!--
<set-visiable :brandId="brandId" @closeStore="closeStore" @submitStore="submitStore"></set-visiable>
import setVisiable from '@/components/app/customer/set-visiable.vue';
-->
<template>
<el-dialog :title="!!editRow.templateId ? '可见范围' : '可见范围'" :visible.sync="dialogVisible" width="873px" :before-close="handleClose">
<div class="">
<div class="el-form-item el-form-item--large">
<label for="name" class="el-form-item__label" style="width: 100px; cursor: pointer;">
选择范围
</label>
<div class="el-form-item__content" style="margin-left: 100px;">
<el-radio v-model="formData.sendRange" label="1" @change="changeRange">所有门店</el-radio>
<el-radio class="m-l-40 m-r-8" v-model="formData.sendRange" label="2" @change="changeRange">部分分组</el-radio>
<div v-if="formData.sendRange == 2" class="w-240 inline-block item-cell-select">
<gic-select-group-mult :brandId="brandId" class="m-l-10" :width="213" :selectData="formData.selectList" @checkGroupIds="checkGroupIds"> </gic-select-group-mult>
</div>
<el-radio class="m-l-40 m-r-8" v-model="formData.sendRange" label="3" @change="changeRange">部分门店</el-radio>
<div v-if="formData.sendRange == 3" class="w-240 inline-block item-cell-select">
<gic-select-store :brandId="brandId" :selectData="formData.selectList" @returnStores="returnStores"> </gic-select-store>
</div>
<div v-if="(formData.sendRange == '2' || formData.sendRange == '3') && !formData.selectList.length" class="el-form-item__error">请选择可见范围</div>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="toCancel">取消</el-button>
<el-button type="primary" :loading="loadingBtn" @click="submitForm('ruleForm')">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import gicSelectStore from '@/components/common/gic-select-store.vue';
import gicSelectGroupMult from '@/components/common/gic-select-group-mult.vue';
import { _debounce } from '@/common/js/public';
import { postRequest } from '@/api/api';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
export default {
props: {
brandId: {
type: String,
default() {
return '';
}
},
setStoreShow: {
type: Boolean,
default() {
return false;
}
},
editRow: {
type: Object,
default() {
return {};
}
},
categoryId: {
type: Object,
default() {
return '';
}
}
},
components: {
gicSelectGroupMult,
gicSelectStore
},
data() {
return {
editPersion: localStorage.getItem('userInfos') && JSON.parse(localStorage.getItem('userInfos')).staffDTO ? JSON.parse(localStorage.getItem('userInfos')).staffDTO.staffName : '',
wxEnterpriseRelatedId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
loading: false,
dialogVisible: this.setStoreShow,
formData: {
sendRange: '1',
selectList: []
},
loadingBtn: false
};
},
methods: {
/**
* 改变选择范围
*/
changeRange(e) {
const that = this;
that.formData.selectList = [];
},
/**
* 选择门店
*/
returnStores: function(nodes) {
const that = this;
that.formData.selectList = JSON.parse(JSON.stringify(nodes));
},
/**
* 选择门店分组
*/
checkGroupIds: function(nodes) {
const that = this;
that.formData.selectList = JSON.parse(JSON.stringify(nodes));
},
toCancel() {
const that = this;
that.$emit('closeStore');
},
handleClose(done) {
const that = this;
that.$emit('closeStore');
},
submitForm: _debounce(function(formName) {
const that = this;
if ((that.formData.sendRange == '2' || that.formData.sendRange == '3') && !that.formData.selectList.length) {
return false;
}
that.loadingBtn = true;
that.postSave();
}, 300),
postSave() {
const that = this;
const data = {
enterpriseId: that.brandId,
templateId: that.$route.query.templateId,
selectType: that.formData.sendRange,
groupIds: that.formData.sendRange == 2 ? that.formData.selectList.map(ele => ele.storeGroupId).join(',') : '',
storeIds: that.formData.sendRange == 3 ? that.formData.selectList.join(',') : ''
};
postRequest('/haoban-app-customer-web/save-template-store', data)
.then(res => {
let resData = res.data;
that.loadingBtn = false;
if (resData.errorCode == 1) {
showMsg.showmsg('操作成功', 'success');
that.$emit('submitStore');
} else {
errMsg.errorMsg(resData);
}
})
.catch(error => {
that.loadingBtn = false;
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
setStoreShow(newData) {
const that = this;
that.dialogVisible = newData;
}
},
mounted() {
const that = this;
that.dialogVisible = that.setStoreShow;
}
};
</script>
<style lang="less" scoped>
.m-b-20 {
margin-bottom: 20px;
}
.p-l-18 {
padding-left: 18px;
}
.material-content {
position: relative;
.material-body {
/* resize: none;
width: 440px;
height: 273px;
border-radius: 2px;
border: 1px solid rgba(196, 198, 207, 1); */
.el-textarea {
/deep/ .el-textarea__inner {
height: 273px;
}
}
}
.emoji-img {
position: absolute;
left: 10px;
bottom: 10px;
}
}
.el-textarea {
/deep/ .el-textarea__inner {
height: 273px;
}
}
</style>
src/components/app/customer/store-list.vue 0 → 100644
<!--
* @Descripttion : 当前组件信息
* @Author : 无尘
* @Date : 2020-02-13 14:02:22
* @LastEditors: 无尘
* @LastEditTime: 2020-06-28 11:11:11
* @FilePath : haoban-3\src\components\app\customer\store-list.vue
-->
<!--
<store-list :brandId="brandId" :departObj="departObj" @getStore="getStore"></store-list>
import storeList from '@/components/app/customer/store-list.vue';
-->
<template>
<div class="depart-list-body">
<div class="depart-name-wrap m-b-20">
<div class="font-14 color-303133">门店 {{ total }} 家</div>
<div class="flex flex-space-between m-t-20">
<div>
<el-input placeholder="请输入门店名称/代码" prefix-icon="el-icon-search" v-model="searchInput" class="w-274" @keyup.native="value => toInput(value, searchInput)" clearable @clear="clearInput"></el-input>
</div>
<div class="to-log flex m-t-20"></div>
</div>
</div>
<div class="depart-children-list border-box m-t-18">
<div class="m-t-20">
<el-table class="select-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }">
<el-table-column class="cursor-pointer" label="门店名称" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.storeName || '--' }}</template>
</el-table-column>
<el-table-column class="cursor-pointer" prop="" label="门店类型" show-overflow-tooltip>
<template slot-scope="scope">{{ storeType[scope.row.storeType] || '--' }}</template>
</el-table-column>
<el-table-column class="cursor-pointer" prop="" label="门店分组" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.storeGroupName || '--' }}
</template>
</el-table-column>
<el-table-column prop="" label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button type="text" @click="showMember(scope.row)">查看会员</el-button>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
<dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import { _debounce } from '@/common/js/public';
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
// import showMsg from '@/common/js/showmsg';
export default {
name: 'depart-list',
components: {},
props: {
brandId: {
type: String,
default() {
return '';
}
},
departObj: {
type: Object,
default() {
return {
departmentId: '',
departmentName: '',
wxDepartmentId: '',
parentId: '',
isStore: '',
staffCount: '',
bindFlag: ''
};
}
}
},
data() {
return {
nameVisible: false,
departmentName: this.departObj.departmentName || '',
searchInput: '',
storeType: {
'0': '自营',
'1': '联营',
'2': '代理(加盟)',
'3': '代销',
'4': '托管'
},
// 分页参数
currentPage: 1,
pageSize: 20,
total: 0,
tableData: []
};
},
methods: {
showMember(item) {
const that = this;
that.$emit('getStore', item);
},
/**
* 输入
*/
toInput: _debounce(function(e, value) {
const that = this;
that.currentPage = 1;
that.getTableList();
}, 500),
// 搜索清除
clearInput() {
const that = this;
that.currentPage = 1;
that.getTableList();
},
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.currentPage = 1;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 获取列表数据
*/
getTableList() {
const that = this;
let para = {
departmentId: that.departObj.storeGroupId,
enterpriseId: that.brandId,
searchName: that.searchInput || '', // 搜索字段
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize // 一页显示个数
};
getRequest('/haoban-app-customer-web/store-list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.total;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
departObj(newData, oldData) {
const that = this;
if (Object.keys(newData)) {
that.currentPage = 1;
that.getTableList();
}
},
brandId(newData) {
const that = this;
if (newData) {
that.searchInput = '';
}
}
},
mounted() {
const that = this;
if (Object.keys(that.departObj)) {
that.currentPage = 1;
that.getTableList();
}
}
};
</script>
<style lang="less" scoped>
.m-b-10 {
margin-bottom: 10px;
}
.el-breadcrumb__inner.is-link:hover,
.el-breadcrumb__inner a:hover {
color: #2f54eb;
}
.log-icon {
width: 28px;
height: 28px;
border-radius: 2px;
margin-right: 15px;
span {
color: #c0c4cc;
}
&:hover {
background: rgba(240, 245, 255, 1);
span {
color: #909399;
}
}
}
.to-log-btn {
width: 102px;
height: 28px;
line-height: 28px;
text-align: center;
background: rgba(245, 247, 250, 1);
&:hover {
color: #597ef7;
}
}
.w-274 {
width: 274px;
}
.iconchangyongicon- {
&:hover {
background: #eaedfd;
border-radius: 2px;
}
}
</style>
src/components/app/material/material-preview.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-10-22 15:12:41
* @LastEditors: 无尘
* @LastEditTime: 2019-12-18 12:47:45
-->
<!--
<material-preview ref="materialPreview" :materialPreviewData="materialPreviewData" v-model="previewVisible" @closePre="closePre"></material-preview>
import materialPreview from '@/components/app/material/material-preview.vue';
components: {
materialPreview
}
previewVisible: false,
-->
<template>
<div class="qr-dialog-content" style="opacity: 1;" v-if="value">
<div class="qr-mask" @click.stop="closeDialog"></div>
<div class="qr-dialog border-box">
<div class="qr-dialog-body border-box">
<h2 class="font-20 color-222 text-left main-title">{{ materialData.materialTitle }}</h2>
<div class="notice-date m-t-10 flex flex-space-between">
<div class="notice-date-left font-10 color-88949C">{{ materialData.materialId ? materialData.createTime : new Date().getTime() | timeStampToYmd }}</div>
<div class="notice-date-right font-10 color-4d7fd0"></div>
</div>
<div class="notice-body border-box font-14 color-222" v-htmlContent="materialData.materialContent"></div>
<div v-if="!!materialData.imgUrlList && !!materialData.imgUrlList.length" class="img-list-wrap">
<ul class="flex flex-wrap">
<li v-for="(item, index) in materialData.imgUrlList" :key="index + 'img'" class="border-box flex flex-align-center flex-pack-center">
<img :src="item.imgUrl" alt="" />
</li>
</ul>
</div>
<div v-if="!!materialData.imageTextWechatId" class="image-text-link">
<div class="flex cursor-pointer" @click="toUrl(materialData.mediaUrl)">
<div class="flex-left-img flex flex-align-center flex-pack-center">
<img :src="materialData.imageUrl" alt="" />
</div>
<div class="flex-right-title border-box">
<div class="title-content font-14 color-606266">{{ materialData.titleName }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- 关闭 -->
<div class="qr-dialog__hd">
<i class="el-icon-plus" @click.stop="closeDialog"></i>
</div>
</div>
</template>
<script>
export default {
name: 'material-preview',
props: {
value: {
type: Boolean,
default() {
return false;
}
},
materialPreviewData: {
type: [Object, Array],
default() {
return {
materialId: '',
imageTextWechatId: '', // 选择的参数
imageTextGicId: '', // 选择的参数
titleName: '', //预览需要
imageUrl: '', //预览需要
mediaUrl: '',
rangeList: [],
imgUrlList: [],
materialTitle: '', // 标题
materialContent: '', // 发送内容
topFlag: false // 置顶
};
}
}
},
directives: {
htmlContent: {
// 指令的定义
bind: function(el, param) {
el.innerHTML = param.value;
},
update: function(el, param) {
el.innerHTML = param.value;
}
}
},
data() {
return {
materialData: {
materialId: '',
imageTextWechatId: '', // 选择的参数
imageTextGicId: '', // 选择的参数
rangeList: [],
imgUrlList: [],
mediaUrl: '',
materialTitle: '', // 标题
materialContent: '', // 发送内容
topFlag: false // 置顶
}
};
},
methods: {
toUrl(url) {
window.open(url);
},
/**
* 关闭预览窗口
*/
closeDialog() {
const that = this;
that.$emit('input', false);
that.$emit('closePre');
}
},
watch: {
value(newData, oldData) {
const that = this;
that.materialData = JSON.parse(JSON.stringify(that.materialPreviewData));
},
materialPreviewData(newData, oldData) {
const that = this;
that.materialData = JSON.parse(JSON.stringify(newData));
}
},
mounted() {
const that = this;
that.materialData = JSON.parse(JSON.stringify(that.materialPreviewData));
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.font-10 {
font-size: 10px;
}
.color-222 {
color: #222222;
}
.color-88949C {
color: #88949c;
}
.color-4d7fd0 {
color: #4d7fd0;
}
.color-a5afb8 {
color: #a5afb8;
}
.p-lr-5 {
padding: 0 5px;
}
.qr-mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.qr-dialog {
position: fixed;
z-index: 5000;
width: 220px;
height: 440px;
padding: 58px 12px 30px 12px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #fff;
text-align: center;
border-radius: 3px;
overflow: hidden;
background: url('../../../assets/iPhone_preview.png') no-repeat;
.qr-dialog-body {
position: relative;
width: 100%;
height: 100%;
padding: 15px 8px;
text-align: left;
// background: #ccc;
overflow-y: auto;
.main-title {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.notice-body {
margin: 20px auto;
font-size: 14px;
white-space: pre-wrap;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
/deep/ video {
width: 100%;
height: auto;
}
/deep/ img {
width: 100%;
height: auto;
}
/deep/ p {
iframe {
width: 100%;
height: auto;
}
}
}
.img-list-wrap {
li {
width: calc((100% - 4px) / 3);
max-width: calc((100% - 4px) / 3);
height: 60px;
margin-bottom: 2px;
margin-right: 2px;
&:nth-child(3n + 3) {
margin-right: 0px;
}
img {
max-width: 100%;
max-height: 60px;
}
}
}
.image-text-link {
background: rgba(0, 0, 0, 0.4);
.flex-left-img {
width: 60px;
height: 60px;
max-width: 60px;
img {
max-width: 60px;
max-height: 60px;
}
}
.flex-right-title {
width: calc(100% - 60px);
padding: 12px;
.title-content {
white-space: pre-wrap;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 18px;
}
}
}
}
.qr-dialog__bd {
padding: 0 1.6em 0.8em;
min-height: 40px;
font-size: 15px;
line-height: 1.3;
word-wrap: break-word;
word-break: break-all;
color: #808080;
#qrcode {
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.qr-dialog__p {
padding: 20px 0;
font-size: 14px;
color: #606266;
}
}
}
.qr-dialog__hd {
position: fixed;
width: 45px;
height: 45px;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 50%;
bottom: 15%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 5001;
i {
position: absolute;
top: 0;
right: 0;
display: block;
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
color: #fff;
font-size: 20px;
cursor: pointer;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
</style>
src/components/app/material/material-record.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-10-21 14:27:29
* @LastEditors : 无尘
* @LastEditTime : 2019-12-27 16:09:42
-->
<!--
<material-record
:detailShow="detailShow"
@hideDetailDialog="hideDetailDialog">
</material-record>
import materialRecord from '@/components/app/material/material-record.vue'
-->
<template>
<div v-show="customDialog">
<el-dialog class="edit-dialog" title="记录" :visible.sync="customDialog" width="739px" :before-close="handleClose">
<div class="edit-dialog-body">
<el-tabs v-model="activeName" type="card" @tab-click="handleTab">
<el-tab-pane label="点赞记录" name="first">
<div class="m-b-20 flex">
<el-input placeholder="请输入姓名/手机号/code" prefix-icon="el-icon-search" v-model="conditionObj.searchInput" class="w-223" @keyup.native="value => toInput(value, conditionObj.searchInput)" clearable @clear="clearInput"> </el-input>
<span class="p-l-10 l-h-32">共{{ total }}条点赞记录</span>
</div>
<el-table :data="tableData" style="width: 100%" height="332">
<el-table-column label="点赞人" width="150" show-overflow-tooltip>
<template slot-scope="scope">
<div class="flex">
<div class="flex flex-align-center flex-pack-center bg-82C5FF table-head-pic">
<i v-if="!scope.row.headImg" class="iconfont icon-yewuduanmorentouxian"></i>
<img v-else :src="scope.row.headImg" alt="img" />
</div>
<div class="flex flex-column apply-info">
<span class="text-ellipsis">{{ scope.row.userName }}</span>
<span class="font-13 text-ellipsis">{{ scope.row.storeName }}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="手机号" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.phoneNumber || '--' }}
</template>
</el-table-column>
<el-table-column label="点赞时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToYmd }}</div>
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToHms }}</div>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="转发记录" name="second">
<div class="m-b-20 flex">
<el-input placeholder="请输入姓名/手机号/code" prefix-icon="el-icon-search" v-model="conditionObj.searchInput" class="w-223" @keyup.native="value => toInput(value, conditionObj.searchInput)" clearable @clear="clearInput"> </el-input>
<span class="p-l-10 l-h-32">共{{ total }}条转发记录</span>
</div>
<el-table :data="tableData" style="width: 100%" height="332">
<el-table-column label="转发人" width="150" show-overflow-tooltip>
<template slot-scope="scope">
<div class="flex">
<div class="flex flex-align-center flex-pack-center bg-82C5FF table-head-pic">
<i v-if="!scope.row.headImg" class="iconfont icon-yewuduanmorentouxian"></i>
<img v-else :src="scope.row.headImg" alt="img" />
</div>
<div class="flex flex-column apply-info">
<span class="text-ellipsis">{{ scope.row.userName || '--' }}</span>
<span class="font-13 text-ellipsis">{{ scope.row.storeName || '--' }}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="手机号" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.phoneNumber || '--' }}
</template>
</el-table-column>
<el-table-column label="转发时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToYmd }}</div>
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToHms }}</div>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
<dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="prev, pager, next" :total="total"> </dm-pagination>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
export default {
name: 'material-record',
props: {
detailShow: {
type: Boolean,
default: false
},
materialId: {
type: String,
default: ''
}
},
data() {
return {
customDialog: false, // 弹框显示
activeName: 'first',
tableData: [],
conditionObj: {
searchInput: '',
materialId: this.materialId
},
// 分页参数
currentPage: 1,
pageSize: 5,
total: 0
};
},
methods: {
/**
* 切换tab
*/
handleTab() {
const that = this;
that.conditionObj.searchInput = '';
that.currentPage = 1;
that.getTableList();
},
/**
* 输入
*/
toInput: _debounce(function(e, value) {
const that = this;
that.currentPage = 1;
that.getTableList();
}, 500),
// 搜索清除
clearInput() {
const that = this;
that.currentPage = 1;
that.getTableList();
},
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.currentPage = 1;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 关闭
*/
handleClose(done) {
const that = this;
done();
that.hideDialog();
},
/**
* 取消
*/
customCancel() {
const that = this;
that.hideDialog();
},
hideDialog() {
const that = this;
that.customDialog = false;
that.$emit('hideDetailDialog');
},
/**
* 获取列表数据
*/
getTableList(val) {
const that = this;
let para = {
materialId: that.conditionObj.materialId,
imgTextTitle: that.conditionObj.searchInput || '', // 搜索字段
relatedType: that.activeName == 'first' ? 2 : 1,
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize, // 一页显示个数
brandId: that.activeBrand
};
getRequest('/haoban-app-material-web/material-log', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.total;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
detailShow: function(newData, oldData) {
const that = this;
that.customDialog = newData;
},
materialId: function(newData, oldData) {
const that = this;
if (newData) {
that.conditionObj.materialId = newData;
that.currentPage = 1;
that.getTableList();
}
}
},
/* 接收数据 */
mounted() {
const that = this;
that.customDialog = that.detailShow;
if (that.materialId) {
that.conditionObj.materialId = that.materialId;
that.currentPage = 1;
that.getTableList();
}
}
};
</script>
<style lang="less" scoped>
.bg-82C5FF {
background: #82c5ff;
}
.w-223 {
width: 223px;
}
.l-h-32 {
line-height: 32px;
}
.table-head-pic {
width: 35px;
height: 35px;
padding: 10px;
border-radius: 4px;
i {
font-size: 20px;
color: #e5f3ff;
}
img {
max-width: 35px;
max-height: 35px;
}
}
.apply-info {
margin-left: 15px;
line-height: 18px;
.text-ellipsis {
display: block;
width: 96px;
max-width: 96px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.edit-dialog {
/deep/ .el-dialog__body {
padding: 25px 20px 17px 20px;
min-height: 352px;
}
/deep/ .el-dialog__footer {
border: none;
padding-top: 3px;
}
&__title {
width: 100%;
height: 38px;
padding: 12px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: rgba(235, 238, 245, 1);
}
.el-alert--info {
width: 400px;
font-size: 14px;
color: #606266;
background: #e6f7ff;
border: 1px solid rgba(145, 213, 255, 1);
}
.el-icon-info {
width: 12px;
font-size: 12px;
color: #2f54eb;
}
.el-form {
margin-top: 40px;
}
}
</style>
src/components/app/material/use-record.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-10-21 14:27:29
* @LastEditors: 无尘
* @LastEditTime: 2020-06-28 11:18:00
-->
<!--
<use-record
:detailShow="detailShow"
@hideDetailDialog="hideDetailDialog">
</use-record>
import useRecord from '@/components/app/material/use-record.vue'
-->
<template>
<div v-show="customDialog">
<el-dialog class="edit-dialog" title="记录" :visible.sync="customDialog" width="739px" :before-close="handleClose">
<div class="edit-dialog-body">
<div class="m-b-20 flex">
<el-input placeholder="请输入标题" prefix-icon="el-icon-search" v-model="conditionObj.searchInput" class="w-203" @keyup.native="value => toInput(value, conditionObj.searchInput)" clearable @clear="clearInput"> </el-input>
<!-- <span class="p-l-10 l-h-32">共{{ total }}条点赞记录</span> -->
</div>
<el-table :data="tableData" style="width: 100%" height="332">
<el-table-column label="发布人" width="150" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.userName || '--' }}
</template>
</el-table-column>
<el-table-column label="标题" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.imgTextTitle || '--' }}
</template>
</el-table-column>
<el-table-column label="发布时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToYmd }}</div>
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToHms }}</div>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
<dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout=" prev, pager, next" :total="total"> </dm-pagination>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
export default {
name: 'use-record',
props: {
detailShow: {
type: Boolean,
default: false
},
materialId: {
type: String,
default: ''
}
},
data() {
return {
customDialog: false, // 弹框显示
activeName: 'first',
tableData: [],
conditionObj: {
searchInput: '',
materialId: this.materialId
},
// 分页参数
currentPage: 1,
pageSize: 5,
total: 0
};
},
methods: {
/**
* 输入
*/
toInput: _debounce(function(e, value) {
const that = this;
that.currentPage = 1;
that.getTableList();
}, 500),
// 搜索清除
clearInput() {
const that = this;
that.currentPage = 1;
that.getTableList();
},
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.currentPage = 1;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 关闭
*/
handleClose(done) {
const that = this;
done();
that.hideDialog();
},
/**
* 取消
*/
customCancel() {
const that = this;
that.hideDialog();
},
hideDialog() {
const that = this;
that.customDialog = false;
that.$emit('hideDetailDialog');
},
/**
* 获取列表数据
*/
getTableList(val) {
const that = this;
let para = {
imgTextMaterialId: that.conditionObj.materialId,
imgTextTitle: that.conditionObj.searchInput || '', // 搜索字段
relatedType: 4,
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize, // 一页显示个数
brandId: that.activeBrand
};
getRequest('/haoban-app-material-web/material-log', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.total;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
detailShow: function(newData, oldData) {
const that = this;
that.customDialog = newData;
},
materialId: function(newData, oldData) {
const that = this;
if (newData) {
that.conditionObj.materialId = newData;
that.currentPage = 1;
that.getTableList();
}
}
},
/* 接收数据 */
mounted() {
const that = this;
that.customDialog = that.detailShow;
if (that.materialId) {
that.conditionObj.materialId = that.materialId;
that.currentPage = 1;
that.getTableList();
}
}
};
</script>
<style lang="less" scoped>
.bg-82C5FF {
background: #82c5ff;
}
.w-203 {
width: 203px;
}
.l-h-32 {
line-height: 32px;
}
.table-head-pic {
width: 35px;
height: 35px;
padding: 10px;
border-radius: 4px;
i {
font-size: 20px;
color: #e5f3ff;
}
img {
max-width: 35px;
max-height: 35px;
}
}
.apply-info {
margin-left: 15px;
line-height: 18px;
.text-ellipsis {
display: block;
width: 96px;
max-width: 96px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.edit-dialog {
/deep/ .el-dialog__body {
padding: 25px 20px 17px 20px;
min-height: 352px;
}
/deep/ .el-dialog__footer {
border: none;
padding-top: 3px;
}
&__title {
width: 100%;
height: 38px;
padding: 12px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: rgba(235, 238, 245, 1);
}
.el-alert--info {
width: 400px;
font-size: 14px;
color: #606266;
background: #e6f7ff;
border: 1px solid rgba(145, 213, 255, 1);
}
.el-icon-info {
width: 12px;
font-size: 12px;
color: #2f54eb;
}
.el-form {
margin-top: 40px;
}
}
</style>
src/components/app/notice-preview.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-10-22 15:12:41
* @LastEditors: 无尘
* @LastEditTime: 2019-11-13 11:25:39
-->
<!--
<notice-preview ref="noticePreview" v-model="previewVisible"></notice-preview>
import noticePreview from '@/components/app/notice-preview.vue';
components: {
noticePreview
}
previewVisible: false,
-->
<template>
<div class="qr-dialog-content" style="opacity: 1;" v-show="value">
<div class="qr-mask" @click.stop="closeDialog"></div>
<div class="qr-dialog border-box">
<div class="qr-dialog-body border-box">
<h2 class="font-20 color-222 text-left">{{ noticeData.title }}</h2>
<div class="notice-date m-t-10 flex flex-space-between">
<div class="notice-date-left font-10 color-88949C">{{ noticeData.announcementId ? noticeData.sendTime : new Date().getTime() | formatTimeYmdHms }}</div>
<div class="notice-date-right font-10 color-4d7fd0">
<!-- <span>未读 {{ noticeData.announcementId ? noticeData.sendCount - noticeData.readCount : 0 }}</span
><span class="p-lr-5 color-a5afb8">|</span><span>已读 {{ noticeData.announcementId ? noticeData.readCount : 0 }}</span> -->
</div>
</div>
<div class="notice-body border-box color-222" v-htmlContent="noticeData.content"></div>
</div>
</div>
<!-- 关闭 -->
<div class="qr-dialog__hd">
<i class="el-icon-plus" @click.stop="closeDialog"></i>
</div>
</div>
</template>
<script>
export default {
name: 'notice-preview',
props: {
value: {
type: Boolean,
default() {
return false;
}
},
noticePreviewData: {
type: Object,
default() {
return {
announcementId: '',
sendTime: '',
sendCount: 0,
readCount: 0,
adminCheck: false,
stroreCheck: false,
adminStructor: [],
storeStructor: [],
receiveType: '0',
labelId: '',
title: '',
img: '',
content: '',
sendType: '0',
attachment: [],
pageTop: false
};
}
}
},
directives: {
htmlContent: {
// 指令的定义
bind: function(el, param) {
el.innerHTML = param.value;
},
update: function(el, param) {
el.innerHTML = param.value;
}
}
},
data() {
return {
noticeData: {
announcementId: '',
sendCount: 0,
readCount: 0,
title: '',
content: ''
}
};
},
methods: {
/**
* 关闭预览窗口
*/
closeDialog() {
const that = this;
that.$emit('input', false);
}
},
watch: {
noticePreviewData(newData, oldData) {
const that = this;
that.noticeData = newData;
}
},
mounted() {
const that = this;
that.noticeData = that.noticePreviewData;
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.font-10 {
font-size: 10px;
}
.color-222 {
color: #222222;
}
.color-88949C {
color: #88949c;
}
.color-4d7fd0 {
color: #4d7fd0;
}
.color-a5afb8 {
color: #a5afb8;
}
.p-lr-5 {
padding: 0 5px;
}
.qr-mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.qr-dialog {
position: fixed;
z-index: 5000;
width: 220px;
height: 440px;
padding: 58px 12px 30px 12px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #fff;
text-align: center;
border-radius: 3px;
overflow: hidden;
background: url('../../assets/iPhone_preview.png') no-repeat;
.qr-dialog-body {
position: relative;
width: 100%;
height: 100%;
padding: 15px 8px;
text-align: left;
// background: #ccc;
overflow-y: auto;
.notice-body {
padding: 20px 0;
font-size: 12px;
white-space: pre-wrap;
word-break: break-all;
/deep/ video {
width: 100%;
height: auto;
}
/deep/ img {
width: 100%;
height: auto;
}
/deep/ p {
iframe {
width: 100%;
height: auto;
}
}
}
}
.qr-dialog__bd {
padding: 0 1.6em 0.8em;
min-height: 40px;
font-size: 15px;
line-height: 1.3;
word-wrap: break-word;
word-break: break-all;
color: #808080;
#qrcode {
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.qr-dialog__p {
padding: 20px 0;
font-size: 14px;
color: #606266;
}
}
}
.qr-dialog__hd {
position: fixed;
width: 45px;
height: 45px;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 50%;
bottom: 15%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 5001;
i {
position: absolute;
top: 0;
right: 0;
display: block;
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
color: #fff;
font-size: 20px;
cursor: pointer;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
</style>
src/components/app/protectCard/record-detail.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-04-14 09:50:16
* @LastEditors: 无尘
* @LastEditTime: 2020-06-28 11:11:25
-->
<!--
<record-detail @closeSendRecord="closeSendRecord"></record-detail>
import cardSendRecord from '@/components/app/protectCard/record-detail.vue';
-->
<template>
<el-dialog title="记录" :visible.sync="dialogVisible" width="802px" :before-close="handleClose">
<div class="table-condition flex flex-space-between m-b-20">
<div class="table-condition-left">
<el-input placeholder="请输入卡券名称" v-model="conditionObj.searchInput" class="w-369" @keyup.native="value => toInput(value, conditionObj.searchInput)" clearable @clear="clearInput">
<!-- <el-select class="w-103" v-model="conditionObj.searchType" slot="prepend" placeholder="请选择">
<el-option label="按导购" value="1"></el-option>
<el-option label="按会员" value="2"></el-option>
</el-select> -->
</el-input>
<!-- <el-date-picker class="m-l-10" prefix-icon="el-icon-time" :picker-options="pickerOptions" v-model="conditionObj.dateRange" @change="changeDate" :editable="false" :value-format="'yyyy-MM-dd'" type="date" align="right" unlink-panels range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker> -->
</div>
</div>
<div>
<el-table class="select-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" height="450" :style="{ width: '100%', minHeight: tableH }">
<el-table-column label="卡券名称" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.cardName || '--' }}
</template>
</el-table-column>
<el-table-column prop="" label="投放数量" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.issuingQuantity || '0' }}
</template>
</el-table-column>
<el-table-column prop="" label="领取数量">
<template slot-scope="scope">{{ scope.row.getedQuantity || '0' }}</template>
</el-table-column>
<el-table-column prop="" label="领取率">
<template slot-scope="scope">{{ scope.row.getedRate | percenteNum }}</template>
</el-table-column>
<el-table-column prop="" label="使用数量">
<template slot-scope="scope">
<div>{{ scope.row.usageQuantity || '0' }}</div>
</template>
</el-table-column>
<el-table-column prop="" label="核销率">
<template slot-scope="scope">
<div>{{ scope.row.verificationRate | percenteNum }}</div>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
<dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
</div>
</div>
</el-dialog>
</template>
<script>
import { postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
export default {
props: {
brandId: {
type: String,
default() {
return '';
}
},
policyId: {
type: String,
default() {
return '';
}
}
},
data() {
return {
dialogVisible: true,
tableData: [],
// 条件
conditionObj: {
searchInput: '',
searchType: '1',
storeGroup: [],
dateRange: []
},
// 分页参数
currentPage: 1,
pageSize: 20,
total: 0
};
},
filters: {
percenteNum(val) {
return val > 0 ? Number(val * 100).toFixed(2) + '%' : Number(val).toFixed(2) + '%';
}
},
methods: {
handleClose(done) {
const that = this;
that.$emit('closeSendRecord');
},
/**
* 输入
*/
toInput: _debounce(function(e, value) {
const that = this;
that.currentPage = 1;
that.getTableList();
}, 500),
// 搜索清除
clearInput() {
const that = this;
that.currentPage = 1;
that.getTableList();
},
/**
* 选择日期
*/
changeDate(val) {
const that = this;
if (!val) {
that.choiceDateCopy = [];
that.conditionObj.dateRange = [];
}
that.getTableList();
},
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.currentPage = 1;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 获取列表数据
*/
getTableList(val) {
const that = this;
let para = {
policyId: that.policyId,
search: that.conditionObj.searchInput || '',
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize // 一页显示个数
};
postRequest('/haoban-app-customer-web/inner/find-card-total-log-page', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.result || [];
that.total = resData.result.totalCount;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
brandId: function(newData, oldData) {
const that = this;
if (!!newData) {
that.activeBrand = newData;
that.getTableList();
}
},
policyId: function(newData, oldData) {
const that = this;
if (!!newData) {
that.getTableList();
}
}
},
mounted() {
const that = this;
if (that.policyId) {
that.getTableList();
}
}
};
</script>
<style lang="less" scoped>
.m-b-20 {
margin-bottom: 20px;
}
.p-l-18 {
padding-left: 18px;
}
.w-369 {
width: 369px;
}
.w-103 {
width: 103px;
}
.el-input {
/deep/ .el-input-group__prepend {
background-color: #fff;
}
}
</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