Skip to content

M
marketing
Commit 83b0ab7b by liuchenxi
Options

update: 短信分权

parent 51074830
Showing with 714 additions and 19 deletions
index.html
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<title>GIC后台</title> <title>GIC后台</title>
<link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/fonts/iconfont.css"> <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/fonts/iconfont.css">
<link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/css/common.css"> <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/css/common.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_2996579_93aeeozj35q.css">
<!-- <link rel="stylesheet" href="//web-1251519181.file.myqcloud.com/components/element.2.12.0.css"> --> <!-- <link rel="stylesheet" href="//web-1251519181.file.myqcloud.com/components/element.2.12.0.css"> -->
<!-- element 皮肤 --> <!-- element 皮肤 -->
<!-- <link rel="stylesheet" type="text/css" href="http://web-1251519181.file.myqcloud.com/lib/elementUI/theme.1.0.1/index.css"> --> <!-- <link rel="stylesheet" type="text/css" href="http://web-1251519181.file.myqcloud.com/lib/elementUI/theme.1.0.1/index.css"> -->
......
src/assets/style/base/reset.scss
...@@ -138,12 +138,18 @@ a:hover { ...@@ -138,12 +138,18 @@ a:hover {
.mt15{ .mt15{
margin-top: 15px!important; margin-top: 15px!important;
} }
.mt17{
margin-top: 17px!important;
}
.mt20{ .mt20{
margin-top: 20px!important; margin-top: 20px!important;
} }
.mt30{ .mt30{
margin-top: 30px!important; margin-top: 30px!important;
} }
.mt40{
margin-top: 40px!important;
}
.mt100{ .mt100{
margin-top: 100px!important; margin-top: 100px!important;
} }
...@@ -177,6 +183,9 @@ a:hover { ...@@ -177,6 +183,9 @@ a:hover {
.mb15{ .mb15{
margin-bottom: 15px!important; margin-bottom: 15px!important;
} }
.mb17{
margin-bottom: 17px!important;
}
.mb20{ .mb20{
margin-bottom: 20px!important; margin-bottom: 20px!important;
} }
...@@ -253,6 +262,9 @@ a:hover { ...@@ -253,6 +262,9 @@ a:hover {
.w600{ .w600{
width: 600px!important; width: 600px!important;
} }
.h32 {
height: 32px;
}
.ml120{ .ml120{
margin-left: 120px; margin-left: 120px;
} }
...@@ -334,6 +346,9 @@ a:hover { ...@@ -334,6 +346,9 @@ a:hover {
.fz28{ .fz28{
font-size: 28px; font-size: 28px;
} }
.fz36 {
font-size: 36px;
}
.fz30{ .fz30{
font-size: 30px; font-size: 30px;
} }
...@@ -521,3 +536,18 @@ img::after { ...@@ -521,3 +536,18 @@ img::after {
// ::-webkit-scrollbar { // ::-webkit-scrollbar {
// display: none; // display: none;
// } // }
// 幽灵按钮放在全局方便全局改样式
.ghost-btn {
background: #fff !important;
color: #1890ff !important;
&:hover {
border-color: #40a9ff;
color: #40a9ff !important;
}
&:active {
border-color: #096dd9;
color: #096dd9 !important;
}
}
src/components/layout/index.vue
...@@ -61,7 +61,6 @@ export default { ...@@ -61,7 +61,6 @@ export default {
return this.$store.state.marketing.breadcrumb; return this.$store.state.marketing.breadcrumb;
}, },
layoutTips() { layoutTips() {
console.log(this.$store.state.marketing.layoutTips);
return this.$store.state.marketing.layoutTips; return this.$store.state.marketing.layoutTips;
}, },
showDescription() { showDescription() {
......
src/components/tip/index.vue
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
<template slot="content"> <template slot="content">
<p class="tip-popover">{{ text }}</p> <p class="tip-popover">{{ text }}</p>
</template> </template>
<i class="iconfont icon-xinxixianshi"></i> <!-- icon-xinxixianshi -->
<i class="iconfont icon-QuestionCircleOutlined"></i>
</el-tooltip> </el-tooltip>
</template> </template>
......
src/router/modules/recharge.js
...@@ -29,6 +29,11 @@ export default { ...@@ -29,6 +29,11 @@ export default {
path: 'do', path: 'do',
name: '充值', name: '充值',
component: () => import(/* webpackChunkName: "recharge" */ '../../views/recharge/recharge.vue') component: () => import(/* webpackChunkName: "recharge" */ '../../views/recharge/recharge.vue')
},
{
path: 'accountDetail',
name: '账户明细',
component: () => import(/* webpackChunkName: "recharge" */ '../../views/recharge/account-detail.vue')
} }
] ]
}; };
src/service/api/rechargeApi.js
...@@ -53,3 +53,21 @@ export const videoChartData = params => requests('api-mall/' + 'get-traffic-cost ...@@ -53,3 +53,21 @@ export const videoChartData = params => requests('api-mall/' + 'get-traffic-cost
//计费中心--消费详情-视频列表-导出 //计费中心--消费详情-视频列表-导出
export const downloadTrafficCostListExcel = config.api + 'api-mall/' + 'download-traffic-cost-list-execl'; export const downloadTrafficCostListExcel = config.api + 'api-mall/' + 'download-traffic-cost-list-execl';
// 计费部门分页查询
export const getDepartList = params => requests(PREFIX + 'list-account-department-by-page', params);
// 保存计费规则
export const saveAccountRule = params => requests(PREFIX + 'save-account-rule', params);
// 获取计费规则
export const getAccountRule = params => requests(PREFIX + 'get-enterprise-account-rule', params);
// 启用停用计费部门
export const updateDepartStatus = params => requests(PREFIX + 'update-account-department-status', params);
// 增加计费部门
export const addAccountDepart = params => requests(PREFIX + 'add-account-department', params);
// 获取部门列表
export const getAllDepart = params => requests('api-admin/' + 'list-clerk-department', params);
src/utils/authCodeMethods.js 0 → 100644
export default {
computed: {
getCodeAuth() {
return code => this.$getButtonLimit(this.getCode(code));
},
getCode() {
return code => this.$buttonCode[code];
}
}
};
src/views/recharge/account-detail.vue 0 → 100644
<template>
<div>
<div class="tip"></div>
<div class="dm-wrap">
<div class="top">
<div class="left">
<el-input v-model="search.departName" placeholder="请输入部门名称" prefix-icon="el-icon-search" style="width: 260px" clearable @change="getTableData" @clear="getTableData" />
<el-select v-model="search.status" placeholder="全部状态" class="w160" @change="getTableData">
<el-option v-for="item in statusList" :key="item.value" :value="item.value" :label="item.label" />
</el-select>
</div>
<div class="right">
<el-button type="primary" @click="addDepartDialog.visible = true">增加独立计费部门</el-button>
</div>
</div>
<div class="content mt20">
<el-table :data="tableData.data" element-loading-text="拼命加载中">
<el-table-column v-for="(v, i) in tableData.header" :key="i" :prop="v.prop" :min-width="v.minWidth" :label="v.label" :formatter="v.formatter" :fixed="v.fixed" show-overflow-tooltip :render-header="onRender">
<template slot-scope="scope">
<span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
<span v-else>{{ scope.row[v.prop] || '--' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" min-width="130">
<template slot-scope="{ row }">
<el-button type="text">查看门店</el-button>
<el-button type="text">记录</el-button>
<el-button type="text">启用</el-button>
</template>
</el-table-column>
</el-table>
<dm-pagination background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableData.currentPage" :page-sizes="tableData.pageSizeList" :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next" :total="tableData.total" hide-on-single-page />
</div>
</div>
<add-depart :visible.sync="addDepartDialog.visible" />
</div>
</template>
<script>
import { formatDateTimeByType } from '@/utils/index.js';
import { getDepartList } from '@/service/api/rechargeApi.js';
import tip from '@/components/tip';
import AddDepart from './components/add-depart.vue';
export default {
name: 'detail-table',
components: { tip, AddDepart },
prop: {},
data() {
return {
search: {
departName: '',
status: null
},
tableData: {
data: [],
currentPage: 1,
pageSizeList: [20, 40, 60, 80],
pageSize: 20,
header: [],
total: 0
},
addDepartDialog: {
visible: false
},
statusList: [
{ label: '启用', value: 1 },
{ label: '停用', value: 0 }
]
};
},
created() {
this.getTableHeader();
this.getTableData();
this.$store.commit('mutations_breadcrumb', [
{ name: '企业管理', path: '' },
{ name: '计费中心', path: '/recharge/board' },
{ name: '账户明细', path: '' }
]);
},
mounted() {
this.$store.commit(
'mutations_layoutTips',
`<div class="layout--tips" style="display: flex">
<i class="iconfont icon-warning-circle-fill" style="margin-top: -3px"></i>
<div class="ml5">
“多账户模式”下，系统将根据所配置的计费规则将通讯费用按照下方的“独立计费部门”进行汇总核算及扣除费用：<br />
1、计费规则中：费用由“会员所属服务门店”、“导购所在门店”承担时，最终都会根据门店所属的“独立计费部门”进行汇总核算和扣除，若产生费用时会员无服务门店，则由总部承担费用；<br />
2、计费规则中：费用由“活动创建人”承担时，会根据该管理员所属的“独立计费部门”进行汇总核算和扣除；<br />
注意：若管理员或门店所归属的部门未被设置为“独立计费部门”，则系统将依次向其上级部门查询是否被设置为独立计费部门，查询不到则记录到“企业总部”账上；
</div>
</div>`
);
},
beforeDestroy() {
this.$store.commit('mutations_layoutTips', '');
},
methods: {
// table-methods
async getTableData() {
const para = {
searchParams: this.search.departName,
status: this.search.status,
pageSize: this.tableData.pageSize,
currentPage: this.tableData.currentPage
};
const { result } = await getDepartList(para);
this.tableData.data = result.result || [];
this.tableData.total = result.totalCount;
},
getTableHeader() {
this.tableData.header = [
{
label: { name: '独立计费部门' },
prop: 'accountDepartName',
minWidth: 120
},
{
label: { name: '上级部门' },
prop: 'parentDepartName',
minWidth: 120
},
{
label: { name: '计费门店数', tipText: '由此“独立计费部门”统一核算费用的门店数，若当前部门的某下级部门被设置为了独立计费部门并且为启用状态，则此处将不包含下级部门的门店数' },
prop: '',
minWidth: 120,
formatter: row => row.storeCount || 0
},
{
label: { name: '账户余额(元)' },
prop: 'accountFunds',
minWidth: 120,
formatter: row => (row.storeCount ? parseFloat(row.storeCount).toFixed(2) : '0.00')
},
{
label: { labnameel: '添加时间' },
prop: 'createTime',
minWidth: 120,
formatter: row => (row.createTime ? formatDateTimeByType(row.createTime, 'yyyy-MM-dd hh-mm-ss') : '--')
}
];
},
handleSizeChange(val) {
this.tableData.pageSize = val;
this.tableData.currentPage = 1;
this.getTableData();
},
handleCurrentChange(val) {
this.tableData.currentPage = val;
this.getTableData();
},
// 渲染表头icon
onRender(h, { column }) {
let isShowTip = column.label.name == '计费门店数';
return h('span', [
h('span', column.label.name),
h(isShowTip && tip, {
props: { text: column.label.tipText }
})
]);
}
},
computed: {
// do something
},
watch: {
// do something
}
};
</script>
<style scoped lang="scss">
.top {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
src/views/recharge/components/add-depart.vue 0 → 100644
<template>
<el-dialog title="增加独立计费部门" :visible.sync="visible" width="420px" custom-class="dialog" @close="onClose">
<div class="content mt27">
<span class="label">选择部门：</span>
<div class="border">
<el-input class="mb10" v-model="search" prefix-icon="el-icon-search" placeholder="请输入部门名称" @change="onSearchTree"></el-input>
<el-tree ref="tree" class="tree" default-expand-all :data="treeData" check-strictly node-key="departId" :props="props" show-checkbox @check-change="handleCheckChange" :filter-node-method="filterNode">
<span slot-scope="{ node, data }">
<span>{{ node.label }}</span>
</span>
</el-tree>
</div>
</div>
<div class="text-right mt20">
<el-button plain>取消</el-button>
<el-button type="primary">确认</el-button>
</div>
</el-dialog>
</template>
<script>
// addAccountDepart
import { getAllDepart } from '@/service/api/rechargeApi.js';
export default {
name: 'addDepartment',
props: {
visible: Boolean
},
data() {
return {
departId: [],
search: '',
treeData: [],
props: {
children: 'childList',
label: 'departName'
}
};
},
methods: {
onClose() {
this.$emit('update:visible', false);
},
async getDepart() {
const { result } = await getAllDepart();
this.treeData = [result] || [];
},
onSearchTree() {
this.$refs.tree.filter(this.search);
},
filterNode(value, data) {
if (!value) return true;
return data.departName.indexOf(value) !== -1;
}
},
watch: {
visible: {
handler: function(newVal) {
if (newVal) {
this.getDepart();
this.search = '';
}
},
immediate: true
}
}
};
</script>
<style scoepd lang="scss">
.dialog {
height: 463px;
position: relative;
.label {
display: inline-block;
width: 100px;
}
.border {
width: 100%;
height: 100%;
padding: 12px;
border: 1px solid #e4e7ed;
}
.content {
display: flex;
align-items: flex-start;
}
.tree {
height: 245px;
overflow-y: auto;
}
}
</style>
src/views/recharge/components/select-depart.vue 0 → 100644
<template>
<el-select v-model="departId" placeholder="请选择计费部门" class="select_more" ref="select" @change="handleChange" filterable remote :remote-method="remoteMethod" suffix-icon="el-icon-search">
<div class="infinite-list" ref="infinite-list" v-infinite-scroll="load" style="overflow:auto;max-height:260px">
<el-option v-for="item in data.list" :key="item.accountDepartId" :value="item.accountDepartId" :label="item.accountDepartName">{{ item.accountDepartName }}</el-option>
<p style="text-align: center" :hidden="!loading"><i class="el-icon-loading"></i></p>
</div>
</el-select>
</template>
<script>
export default {
name: 'select-depart',
props: {
data: {
type: Object,
default: () => {}
},
loading: Boolean
},
mounted() {
this.$refs['select'].$el.querySelector('.el-select-dropdown__wrap').style.overflow = 'inherit';
},
data() {
return {
departId: ''
};
},
methods: {
load() {
this.$emit('load');
},
handleChange() {
this.$emit('getDepartId', this.departId);
},
remoteMethod(val) {
this.$refs['infinite-list'].scrollTop = 0;
this.$emit('remote-search', val);
}
}
};
</script>
<style lang="scss" scoped>
.select_more {
display: inline-block;
width: 160px;
position: relative;
// &::before {
// content: '\e778';
// position: absolute;
// font-family: element-icons !important;
// color: #909399;
// right: 11px;
// top: 9px;
// z-index: 2;
// }
}
</style>
src/views/recharge/components/set-rule-dialog.vue 0 → 100644
<template>
<el-drawer :visible.sync="visible" direction="rtl" :before-close="beforeClose" size="600px" custom-class="drawer">
<template v-slot:title>
<h2>计费规则配置</h2>
</template>
<el-form ref="form" :model="form" class="content" label-width="170px" :rules="rules">
<p class="tip lineh17">开启“多账户模式”后，系统将根据所配置的计费规则将通讯费用按照“独立计费部门”进行汇总核算及扣除费用；开启后次日凌晨生效，并且开启后不允许关闭，请谨慎操作；</p>
<el-form-item label="是否开启多账户模式：" class="mt17 mb17" prop="status">
<el-radio-group v-model="form.status" :disabled="isMoreAccount">
<el-radio :label="0">关闭</el-radio>
<el-radio :label="1">开启</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.status">
<hr class="mb10" />
<div class="info mb15">
<i class="iconfont icon-warning-circle-fill icon" />
<div class="lineh22">
<p class="tip">计费规则说明：</p>
<p class="tip">1、会员所属服务门店：由会员所属的服务门店承担费用（最终根据门店所属的“独立计费部门”进行汇总核算和扣除），若产生费用时会员无服务门店，则由总部承担费用；</p>
<p class="tip">2、活动创建人：由此活动的创建人来承担费用（最终根据该管理员所属的“独立计费部门”进行汇总核算和扣除）；</p>
<p class="tip">3、导购所在门店：由导购所在的门店承担费用（最终根据门店所属的“独立计费部门”进行汇总核算和扣除）；</p>
<p class="tip">4、总部：由“总部”承担费用；</p>
</div>
</div>
<template>
<h2 class="icon-type-title mb20">
<div class="mark" />
短信
</h2>
<el-form-item label="短信营销：" prop="smsPlanRule">
<el-radio-group v-model="form.smsPlanRule">
<el-radio :label="2">会员所属服务门店</el-radio>
<el-radio :label="3">活动创建人</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="智能营销发送短信：" prop="smsEcmRule">
<el-radio-group v-model="form.smsEcmRule">
<el-radio :label="2">会员所属服务门店</el-radio>
<el-radio :label="3">活动创建人</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="会员修改手机号：" prop="smsValidCodeRule">
<el-radio-group v-model="form.smsValidCodeRule">
<el-radio :label="2">会员所属服务门店</el-radio>
<el-radio :label="1">总部</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="会员认证开卡：" prop="smsOpenCardRule">
<el-radio-group v-model="form.smsOpenCardRule">
<el-radio :label="1">总部</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="好办-导购绑定手机号：" prop="smsHaobanRule">
<el-radio-group v-model="form.smsHaobanRule">
<el-radio :label="4">导购所在门店</el-radio>
</el-radio-group>
</el-form-item>
</template>
<hr class="dashed mb20" />
<template>
<h2 class="icon-type-title mb20">
<div class="mark" />
双向呼叫&录音
</h2>
<el-form-item label="双向呼叫&录音：" prop="callRule">
<el-radio-group v-model="form.callRule">
<el-radio :label="4">导购所在门店</el-radio>
<el-radio :label="3">活动创建人</el-radio>
</el-radio-group>
</el-form-item>
</template>
</template>
</el-form>
<div class="demo-drawer__footer footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="save">保 存</el-button>
</div>
</el-drawer>
</template>
<script>
import { saveAccountRule } from '@/service/api/rechargeApi';
export default {
name: 'setRuleDrawer',
props: {
visible: Boolean,
data: Object
},
data() {
function validate(val, cb, arr) {
if (!arr.includes(val)) return cb(new Error('请选择内容'));
cb();
}
return {
form: {
status: 0, // 是否多账户
smsPlanRule: 2, // 短信营销
smsEcmRule: 2, // 智能引擎
smsValidCodeRule: 1, // 修改手机号
smsOpenCardRule: 1, // 认证
smsHaobanRule: 4, // 好办
callRule: 4 // 双向呼叫
},
isMoreAccount: false,
rules: {
smsPlanRule: [{ required: true, validator: (rule, val, cb) => validate(val, cb, [2, 3]) }],
smsEcmRule: [{ required: true, validator: (rule, val, cb) => validate(val, cb, [2, 3]) }],
smsValidCodeRule: [{ required: true, validator: (rule, val, cb) => validate(val, cb, [2, 1]) }],
smsOpenCardRule: [{ required: true, validator: (rule, val, cb) => validate(val, cb, [1]) }],
smsHaobanRule: [{ required: true, validator: (rule, val, cb) => validate(val, cb, [4]) }],
callRule: [{ required: true, validator: (rule, val, cb) => validate(val, cb, [3, 4]) }]
}
};
},
methods: {
close() {
this.$emit('update:visible', false);
},
save() {
this.$refs['form'].validate(async valid => {
if (valid) {
const options1 = { confirmButtonText: '确认开启', cancelButtonText: '取消', type: 'warning' };
const options2 = { confirmButtonText: '立即设置', cancelButtonText: '稍后设置', type: 'success' };
try {
// 单商户转多商户二次弹窗确认
if (!this.isMoreAccount) await this.$confirm('开启多账户计费模式次日凌晨生效，并且开启', '确认开启多账户模式？', options1);
const para = this.form.status ? this.form : { status: 0 };
await saveAccountRule(para);
// 如果从单商户切换多商户保存了那么就修改isMoreAccount得状态，组件此时不会重新render.同时发送给父组件让父组件重新调用获取商户配置接口
if (para.status == 1 && !this.isMoreAccount) {
this.isMoreAccount = true;
this.$emit('getNewData');
}
try {
await this.$confirm('赶紧去设置不同的计费账户吧，也可点击【计费中心-账户明细】配置不同的计费账户', '保存成功', options2);
this.$router.push(this.$router.push('/recharge/accountDetail'));
} catch (e) {
this.$emit('update:visible', false);
return false;
}
} catch (e) {
return false;
}
}
});
},
extend(to, from) {
for (let key in to) {
to[key] = from[key];
}
},
beforeClose() {
this.$emit('update:visible', false);
}
},
watch: {
data: {
handler: function(newVal) {
this.isMoreAccount = !!newVal.status;
this.extend(this.form, newVal);
this.form['status'] = this.form['status'] || 0;
},
deep: true,
immediate: true
}
}
};
</script>
<style lang="scss" scoped>
.drawer {
position: relative;
}
h2 {
color: #303133;
font-size: 16px;
font-weight: 600;
}
.content {
font-family: PingFangSC-Regular, PingFang SC;
padding: 0 20px;
color: #303133;
.tip {
color: #909399;
font-size: 12px;
}
.lineh17 {
line-height: 17px;
}
.lineh22 {
line-height: 22px;
}
hr {
height: 1px;
background: #e4e7ed;
outline: none;
border: none;
&.dashed {
height: 0;
border: 1px dashed #e4e7ed;
background: none;
}
}
.info {
display: flex;
.icon {
margin-right: 9px;
color: #1890ff;
display: block;
}
}
.icon-type-title {
display: flex;
align-items: center;
height: 20px;
color: #303133;
font-size: 16px;
font-weight: 700;
padding: 10px;
background: #f7f8fa;
.mark {
width: 3px;
height: 14px;
margin-right: 8px;
background-color: #1890ff;
}
}
}
.footer {
box-shadow: 0px -2px 8px 0px rgba(220, 223, 230, 0.6);
padding: 0 20px;
box-sizing: border-box;
height: 56px;
position: absolute;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
bottom: 0;
}
</style>
src/views/recharge/record.vue
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
<el-select v-if="listParams.feeType == 2" style="width:180px" clearable v-model="listParams.deductType" placeholder="全部扣款类型" @change="onSearch"> <el-select v-if="listParams.feeType == 2" style="width:180px" clearable v-model="listParams.deductType" placeholder="全部扣款类型" @change="onSearch">
<el-option v-for="(value, key) in deductTypeList" :key="key" :label="value" :value="key"></el-option> <el-option v-for="(value, key) in deductTypeList" :key="key" :label="value" :value="key"></el-option>
</el-select> </el-select>
<select-depart v-if="isMoreAccount" :data="deparment" @load="load" @getDepartId="getDepartId" @remote-search="remoteSearch" :loading="deparment.loading" />
</div> </div>
<el-table tooltipEffect="dark" :data="tableList" style="width: 100%"> <el-table tooltipEffect="dark" :data="tableList" style="width: 100%">
<el-table-column align="left" prop="timeEnd" label="操作时间"> <el-table-column align="left" prop="timeEnd" label="操作时间">
...@@ -21,30 +22,20 @@ ...@@ -21,30 +22,20 @@
<el-table-column align="left" prop="transactionId" label="流水号"></el-table-column> <el-table-column align="left" prop="transactionId" label="流水号"></el-table-column>
<el-table-column label="记录类型"> <el-table-column label="记录类型">
<template slot-scope="scope"> <template slot-scope="scope">
{{ textMap[scope.row.feeType] }} {{ textMap[scope.row.feeType] || '--' }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="扣款类型"> <el-table-column label="扣款类型">
<template slot-scope="scope"> <template slot-scope="scope">
{{ deductTypeList[scope.row.deductType] }} {{ deductTypeList[scope.row.deductType] || '--' }}
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column align="left" prop="payType" label="充值方式"> <el-table-column label="余额(元)" align="left" prop="totalFee">
<template slot-scope="scope">
{{ scope.row.payType | filterPayType }}
</template>
</el-table-column> -->
<el-table-column label="金额" align="left" prop="totalFee">
<template slot-scope="scope"> {{ (scope.row.totalFee / 100).toFixed(2) }}元 </template> <template slot-scope="scope"> {{ (scope.row.totalFee / 100).toFixed(2) }}元 </template>
</el-table-column> </el-table-column>
<el-table-column align="left" prop="reason" label="原因" show-overflow-tooltip></el-table-column> <el-table-column align="left" prop="reason" label="原因" show-overflow-tooltip></el-table-column>
<el-table-column label="图片凭证"> <el-table-column label="图片凭证">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <el-image v-for="(item, index) in getUrls(scope).slice(0, 3)" :key="`${currentPage}-${item}`" style="width: 36px; height: 36px" :src="item" :preview-src-list="getUrls(scope, index)" lazy>
<div slot="placeholder" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image> -->
<viewer :options="options" :images="getUrls(scope)" class="viewer" ref="viewer"> <viewer :options="options" :images="getUrls(scope)" class="viewer" ref="viewer">
<template #default="scope2"> <template #default="scope2">
<img style="width: 36px; height: 36px;margin-left:5px;cursor:pointer" v-for="src in scope2.images" :src="src" :key="src" /> <img style="width: 36px; height: 36px;margin-left:5px;cursor:pointer" v-for="src in scope2.images" :src="src" :key="src" />
...@@ -57,14 +48,15 @@ ...@@ -57,14 +48,15 @@
</section> </section>
</template> </template>
<script> <script>
import { rechargeRecord } from '@/service/api/rechargeApi.js'; import { rechargeRecord, getDepartList, getAccountRule } from '@/service/api/rechargeApi.js';
import { formatDateTimeByType } from '@/utils/index.js'; import { formatDateTimeByType } from '@/utils/index.js';
import 'viewerjs/dist/viewer.css'; import 'viewerjs/dist/viewer.css';
import { component as Viewer } from 'v-viewer'; import { component as Viewer } from 'v-viewer';
import SelectDepart from './components/select-depart.vue';
export default { export default {
name: 'recharge-record', name: 'recharge-record',
components: { Viewer }, components: { Viewer, SelectDepart },
data() { data() {
return { return {
textMap: { textMap: {
...@@ -84,12 +76,26 @@ export default { ...@@ -84,12 +76,26 @@ export default {
deductType: '', deductType: '',
feeType: '' feeType: ''
}, },
deparment: {
list: [],
searchParams: '',
status: -1,
pageSize: 20,
currentPage: 1,
loading: false,
isLimit: false, // 是否最后一页
departId: '', // 选中时得id
zbFlag: 1
},
total: 0, total: 0,
deductTypeList: {} deductTypeList: {},
isMoreAccount: false
}; };
}, },
created() { created() {
this.rechargeRecord(); this.rechargeRecord();
this.getDepartmentList();
this.getRule();
this.$store.commit('mutations_breadcrumb', [{ name: '企业管理', path: '' }, { name: '计费中心', path: '/recharge' }, { name: '记录', path: '' }]); // eslint-disable-line this.$store.commit('mutations_breadcrumb', [{ name: '企业管理', path: '' }, { name: '计费中心', path: '/recharge' }, { name: '记录', path: '' }]); // eslint-disable-line
}, },
methods: { methods: {
...@@ -115,7 +121,6 @@ export default { ...@@ -115,7 +121,6 @@ export default {
this.listParams.currentPage = val; this.listParams.currentPage = val;
this.rechargeRecord(); this.rechargeRecord();
}, },
async rechargeRecord() { async rechargeRecord() {
this.loading = true; this.loading = true;
if (this.dateTime) { if (this.dateTime) {
...@@ -125,6 +130,7 @@ export default { ...@@ -125,6 +130,7 @@ export default {
this.listParams.beginTime = ''; this.listParams.beginTime = '';
this.listParams.endTime = ''; this.listParams.endTime = '';
} }
this.listParams.accountDepartId = this.deparment.departId;
try { try {
let res = await rechargeRecord(this.listParams); let res = await rechargeRecord(this.listParams);
if (res.errorCode === 0 && res.result.result) { if (res.errorCode === 0 && res.result.result) {
...@@ -138,6 +144,61 @@ export default { ...@@ -138,6 +144,61 @@ export default {
console.log(err); console.log(err);
} }
this.loading = false; this.loading = false;
},
// 计费部门下拉
// 获取计费部门
async getDepartmentList() {
const depart = this.deparment;
depart['loading'] = true;
const para = Object.assign({}, depart);
const typeArr = ['list', 'loading', 'isLimit', 'departId'];
this.deleteAttribute(para, typeArr);
let { result } = await getDepartList(para);
this.setDepartData(depart, result);
},
// 清除接口无用属性
deleteAttribute(obj, typeArr) {
for (const key in obj) {
if (typeArr.includes(key)) delete obj[key];
}
},
// 设置departmentData
setDepartData(obj, result) {
const data = result.result || [];
const total = result.totalCount;
obj['list'].push(...data);
obj['isLimit'] = obj['list'].length >= total; // list得数据量>=数据总数时做出限制
obj['loading'] = false;
},
// 下拉滚动加载
load() {
const depart = this.deparment;
if (depart['isLimit'] || depart['loading']) return;
depart['currentPage']++;
this.getDepartmentList();
},
getDepartId(id) {
// 选中不同下拉得id时，调用对应得表格方法
const depart = this.deparment;
depart['departId'] = id;
this.listParams['currentPage'] = 1;
this.rechargeRecord();
},
// 下拉远程搜索
remoteSearch(val) {
const depart = this.deparment;
depart['searchParams'] = val;
depart['currentPage'] = 1;
depart['isLimit'] = false;
depart['list'] = [];
this.getDepartmentList();
},
// 获取计费规则
async getRule() {
const result = await getAccountRule();
const res = result.result || {};
console.log(res);
this.isMoreAccount = !!res.status;
} }
}, },
filters: { filters: {
......
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