// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import {
Cascader,
DatePicker,
Form,
FormItem,
TimeSelect,
TimePicker,
Table,
TableColumn,
Tree,
Input,
Select,
Upload,
Option,
OptionGroup,
Switch,
Dialog,
Button,
Descriptions,
DescriptionsItem
} from 'element-ui';
import 'babel-polyfill'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);
import setting from './setting'
import menuList from "@/setting/menuList"
// import "@/assets/js/jquery-1.9.1.js"
// import "@/assets/js/common.js"
import 'element-ui/lib/theme-chalk/index.css'
import "@/assets/css/style.css"
import "@/assets/css/style_zbb.css"
import "@/assets/js/pagination.js"
import Print from '@/plugs/print'
Vue.use(Print)
Vue.use(Cascader)
Vue.use(DatePicker)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(TimeSelect)
Vue.use(TimePicker)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Tree)
Vue.use(Input)
Vue.use(Select)
Vue.use(Upload)
Vue.use(Option)
Vue.use(OptionGroup)
Vue.use(Switch)
Vue.use(Dialog)
Vue.use(Button)
Vue.use(Descriptions)
Vue.use(DescriptionsItem)
Vue.config.productionTip = false
//自定义组件,v-int 限制仅可输入正整数
Vue.directive('int', {
inserted(el, binding, vnode) {
// console.log('123', el, binding, vnode)
//获取页面传入绑定值
let key = binding.expression
el.onkeyup = function(e) {
//
// console.log('****', el, binding, vnode, e)
let value = e.target.value;
if (value != "" && e.key == '.' && -1 == value.indexOf('.')) {
//兼容火狐,数字输入框输入点 value 值自动隐藏‘.’,再进行正则会丢失‘.’
return;
}
let boolean = new RegExp(/^[1-9][0-9]*$/).test(value)
// 两种方法动态获取 vnode.context 对象下内容
// let val = vnode.context[key]
let val = eval('vnode.context.' + key)
// console.log(vnode.context)
// console.log(key)
// console.log(val)
if (!boolean) {
// if(isNaN(value)){
val = e.target.value = '';
Vue.prototype.$message({
text: '请输入正整数',
background: 'rgba(230, 162, 60, 0.8)'
})
return;
}
// }
}
}
})
//自定义组件,v-float 限制仅可输入正整数或小数
Vue.directive('float', {
inserted(el, binding, vnode) {
let key = binding.expression
el.onkeyup = function(e) {
let value = e.target.value;
let boolean = new RegExp(/^[0-9]+.?[0-9]*$/).test(value)
let val = eval('vnode.context.' + key)
if (!boolean) {
val = e.target.value = '';
Vue.prototype.$message({
text: '请输入正整数或小数',
background: 'rgba(230, 162, 60, 0.8)'
})
return;
}
}
}
})
//自定义组件,v-money 校验人民币格式
Vue.directive('money', {
inserted(el, binding, vnode) {
let key = binding.expression
el.onkeyup = function(e) {
let value = e.target.value;
let boolean = new RegExp(/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/).test(value)
let val = eval('vnode.context.' + key)
if (!boolean) {
val = e.target.value = '';
Vue.prototype.$message({
text: '请输入正确的金额数',
background: 'rgba(230, 162, 60, 0.8)'
})
return;
}
}
}
})
Vue.filter('convertImgUrl', function(value) {
// if (!value) return ''
// value = value.toString()
// var imgUrl = value || "";
// var locationUrl = window.location.url || "";
// var imgDomain = getDomain(imgUrl) || "";
// var hrefDomain = getDomain(locationUrl) || "";
// if (hrefDomain && hrefDomain.length > 0) {
// value = value.replace(imgDomain, hrefDomain)
// }
return value
})
/* eslint-disable no-new */
var app = new Vue({
el: '#app',
router,
store,
components: {
App
},
template: '<App/>'
})
//app.use('/t',router)
function getDomain(urlStr) {
var url = urlStr || "";
var domain = url.split('/'); // 以“/”进行分割
if (domain[2]) {
domain = domain[0] + domain[1] + '//' + domain[2];
} else {
domain = ''; //如果url不正确就取空
}
return domain;
}
function userRoleContainMenu(firstM, secondM, thirdM) {
var menuList = store.getters.getMenuList;
if (firstM && secondM && thirdM) {
for (let i = 0; i < menuList.length; i++) {
if (menuList[i].id == firstM) {
let childrenList = menuList[i].children;
// 遍历二级菜单
for (let j = 0; j < childrenList.length; j++) {
if (childrenList[j].id == secondM) {
// let subcCildren = childrenList[j].children;
// // 遍历三级菜单
// for (let k = 0; k < subcCildren.length; k++) {
// if (subcCildren[k].id == thirdM) {
// return true;
// }
// }
return true;
}
}
}
}
} else {
return false;
}
}
function fistCharUpper(value) {
value.replace('_', '');
value = value.replace(value[0], value[0].toUpperCase());
return value;
}
function getFirtSubMenu() {
var menuList = store.getters.getMenuList;
var routerName = '';
routerName = menuList[1].url
let children = menuList[1].children;
if (!children || children.length == 0) {
routerName = menuList[1].url
} else if (!children[0].children || children[0].children.length == 0) {
routerName = "_" + children[0].url
} else if (children[0].children) {
routerName = "__" + children[0].children[0].url
}
return routerName;
}
// router.beforeEach((to, from, next) => {
// let toPath = to.path;
// let pathArr = toPath.split('/');
// let containMenu = false;
// if (pathArr.length == 5) {
// containMenu = userRoleContainMenu(fistCharUpper(pathArr[2]), fistCharUpper(pathArr[3]), fistCharUpper(pathArr[4]))
// }
// //二级菜单做登录用户菜单权限控制
// if (containMenu) {
// next() //next()方法后的代码也会执行
// } else {
// if (to.path == from.path || to.name == 'login') {
// next() //next()方法后的代码也会执行
// } else {
// next(from.path)
// }
// }
// })
、、、
<template>
<div>
<!--右侧内容-->
<div class="contBox">
<div class="box" style="max-height: 150px;min-height:150px">
<h3 class="tit">
<span>客户数据统计</span>
<ul class="tit-tools fr">
</ul>
</h3>
<table class="table borderless">
<thead>
<tr>
<th width="8%">报名总数</th>
<th width="8%">客户经理邀请总数</th>
<th width="8%">公共渠道报名</th>
<th width="8%">资产提升达标客户数</th>
<th width="8%">积分兑换占比</th>
</tr>
</thead>
<tbody>
<tr>
<td width="8%">{{AssetsPromoteNum.sumUserNum || "0"}}</td>
<td width="8%">{{AssetsPromoteNum.sumInviteUserNum || "0"}}</td>
<td width="8%">{{AssetsPromoteNum.sumNoInviteUserNum || "0"}}</td>
<td width="8%">{{AssetsPromoteNum.sumAssetsUserNum || "0"}}</td>
<td width="8%">{{AssetsPromoteNum.percent || "0.00"}}</td>
</tr>
</tbody>
</table>
</div>
<!-- 查询条件 -->
<div class="box">
<h3 class="tit"><span>筛选查询</span></h3>
<ul class="filter flex fl">
<li>
<em>客户姓名</em>
<input type="text" v-model="queryList.CustName" class="inpt" placeholder="请输入客户姓名" />
</li>
<li>
<em>客户手机号</em>
<input type="text" v-model="queryList.CustPhone" class="inpt" placeholder="请输入手机号" />
</li>
<li>
<em>达标状态</em>
<select class="sel" @change="StandardChange" v-model="queryList.StandardStatus">
<option value="">全部</option>
<option :value="0">已达标</option>
<option :value="1">未达标</option>
</select>
</li>
<li style="display: flex;">
<em>报名网点</em>
<el-cascader @change="orgChange" :options="branchesList" :props="field101Props" :style="{ width: '63%' }" placeholder="请选择机构" clearable></el-cascader>
</li>
<li>
<em>报名渠道</em>
<select class="sel" @change="ChannelChange" v-model="queryList.Channel">
<option value="">全部</option>
<option :value="0">公共渠道</option>
<option :value="1">客户经理</option>
</select>
</li>
<li>
<em>理财经理工号</em>
<input type="text" v-model="queryList.EmpNo" class="inpt" placeholder="请输入理财经理工号" />
</li>
<li>
<em>理财经理</em>
<input type="text" v-model="queryList.EmpName" class="inpt" placeholder="请输入理财经理姓名" />
</li>
</ul>
<input type="button" class="btns btnBlue filterBtn" @click="query" value="查询" />
</div>
<!-- 表格 -->
<div class="box">
<h3 class="tit">
<span>数据列表</span>
<ul class="tit-tools fr">
<li>
<a class="btnBlue pop" @click="toImportHistory">查看导入历史</a>
</li>
<li>
<a class="btnBlue pop" @click="downloadTemplate">下载导入模板</a>
</li>
<li>
<a class="btnBlue pop" @click="inUserFormFile">客户积分导入</a>
</li>
<li>
<a class="btnBlue pop" @click="downLoadSome">导出客户</a>
</li>
</ul>
</h3>
<!-- 表格 -->
<table class="table borderless">
<thead>
<tr>
<th>客户姓名</th>
<th>客户手机号</th>
<th>客户身份证号</th>
<th>报名网点</th>
<th>所属一级支行编码</th>
<th>所属一级支行</th>
<th>所属二级支行编码</th>
<th>所属二级支行</th>
<th>报名渠道</th>
<th>达标状态</th>
<th>活动总积分</th>
<th>活动可用积分</th>
<th>活动已用积分</th>
<th>积分兑换占比</th>
<th>理财经理工号</th>
<th>理财经理</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in userList" :key="index">
<td>
<span v-if="item.CustName == null">--</span>
<span v-else>{{ item.CustName }}</span>
</td>
<td>
<span v-if="item.CustPhone == null">--</span>
<span v-else>{{ item.CustPhone }}</span>
</td>
<td>
<span v-if="item.IdCardType == null">--</span>
<span v-else>{{ item.IdCardType }}</span>
</td>
<td>
<span v-if="item.EnterOrganName == null">--</span>
<span v-else>{{ item.EnterOrganName }}</span>
</td>
<td>
<span v-if="item.OrganId == null">--</span>
<span v-else>{{ item.OrganId }}</span>
</td>
<td>
<span v-if="item.OrganName == null">--</span>
<span v-else>{{ item.OrganName }}</span>
</td>
<td>
<span v-if="item.BranchOrganId == null">--</span>
<span v-else>{{ item.BranchOrganId }}</span>
</td>
<td>
<span v-if="item.BranchOrganName == null">--</span>
<span v-else>{{ item.BranchOrganName }}</span>
</td>
<td>
<span v-if="item.Channel == '1'">公共渠道</span>
<span v-else>邀请</span>
</td>
<td>
<span v-if="item.StandardStatus == '1'">已达标</span>
<span v-else>未达标</span>
</td>
<td>
<span v-if="item.ActivityScore == null">--</span>
<span v-else>{{ item.ActivityScore }}</span>
</td>
<td>
<span v-if="item.ActivitySurplusScore == null">--</span>
<span v-else>{{ item.ActivitySurplusScore }}</span>
</td>
<td>
<span v-if="item.ActivityUseScore == null">--</span>
<span v-else>{{ item.ActivityUseScore }}</span>
</td>
<td>
<!-- <span v-if="item.percent == null">--</span> -->
<span>{{ item.Percent }}%</span>
</td>
<td>
<span v-if="item.EmpNo == null">--</span>
<span v-else>{{ item.EmpNo }}</span>
</td>
<td>
<span v-if="item.EmpName == null">--</span>
<span v-else>{{ item.EmpName }}</span>
</td>
<td>
<p>
<a class="blue pointer" @click="customerDetails(item.Id)">客户详情</a>
<!-- <a class="blue pointer" >导出客户</a> -->
</p>
</td>
</tr>
</tbody>
</table>
<navigation :pages="pages" :current.sync="pageNo" @navpage="msgListView" ref="child"></navigation>
</div>
<!-- 审核人弹框 -->
<el-dialog title="审核人" :visible.sync="auditFlag" class="audit_dialog">
<el-select @change="auditChange" placeholder="请选择审核人" v-model="TellerSeq">
<el-option v-for="item in auditList" :key="item.TellerSeq" :label="item.TellerName" :value="item.TellerSeq">
</el-option>
</el-select>
<div slot="footer" class="dialog-footer">
<el-button @click="auditFlag = false">取 消</el-button>
<el-button type="primary" @click="ExportSubmit">确 定</el-button>
</div>
</el-dialog>
<!-- 审核人弹框end -->
<!-- 弹框客户详情 -->
<div class="floatBox box p4" :class="{ act: isCoupon }">
<h2>客户详情</h2>
<section class="case">
<el-descriptions class="margin-top" :column="2" border>
<!-- <template slot="extra">
<el-button type="primary" size="small">操作</el-button>
</template> -->
<el-descriptions-item>
<template slot="label">
客户姓名
</template>
<span v-if="DetailsList.CustName == null">— —</span>
<span v-else>{{ DetailsList.CustName }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
身份证号
</template>
<span v-if="DetailsList.IdCard == null">— —</span>
<span v-else> {{ DetailsList.IdCard }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
手机号
</template>
<span v-if="DetailsList.CustPhone == null">— —</span>
<span v-else> {{ DetailsList.CustPhone }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
报名渠道
</template>
<span v-if="DetailsList.Channel == '1'">公共渠道</span>
<span v-if="DetailsList.Channel == '2'">邀请</span>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
报名网点
</template>
{{ DetailsList.EnterOrganName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
理财经理工号
</template>
<span v-if="DetailsList.EmpNo == null">— —</span>
<span v-else> {{ DetailsList.EmpNo }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
理财经理
</template>
<span v-if="DetailsList.EmpName == null">— —</span>
<span v-else> {{ DetailsList.EmpName }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
达标状态
</template>
<span v-if="DetailsList.StandardStatus == '0'">未达标</span>
<span v-if="DetailsList.StandardStatus == '1'">已达标</span>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
活动总积分
</template>
<span v-if="DetailsList.ActivityScore == null">— —</span>
<span v-else> {{ DetailsList.ActivityScore }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
可用积分
</template>
<span v-if="DetailsList.ActivitySurplusScore == null">— —</span>
<span v-else> {{ DetailsList.ActivitySurplusScore }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
已用积分
</template>
<span v-if="DetailsList.ActivityUseScore == null">— —</span>
<span v-else> {{ DetailsList.ActivityUseScore }}</span>
</el-descriptions-item>
</el-descriptions>
<p class="center mt15">
<input type="button" class="btns btnBlue-light mr30" value="返回" @click="isCoupon = false" />
<input type="button" @click="isCoupon = false" class="btns btnBlue close4" value="完成" />
</p>
</section>
</div>
<!-- 弹框导入历史 -->
<el-dialog width="70%" :before-close="handleClose" :visible.sync="isCoupon2">
<div class="contBox">
<div class="box">
<h3 class="tit">
<span>导入记录(如遇数据未更新请刷新页面)</span>
</h3>
<table class="table borderless">
<thead>
<tr>
<th>导入时间</th>
<th>导入状态</th>
<th>导入数据量</th>
<th>导入成功条数</th>
<th>填报部门</th>
<th>分行部门经办人员签字</th>
<th>分行部门负责人签字</th>
<th>数据截止日期</th>
<th>备注</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
<!-- importState状态:0导入中,1导入成功,2导入失败 -->
<span>导入中</span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<div>
<a class="pointer blue">导入记录</a>
</div>
<div>
<a>失败记录</a>
</div>
</td>
</tr>
</tbody>
</table>
<!-- <navigation
:pages="pages"
:current.sync="pageNo"
@navpage="msgListView"
ref="child"
></navigation> -->
</div>
</div>
</el-dialog>
</div>
<!-- 积分导入弹窗 -->
<div class="mask" v-if="showGuideImport == true"></div>
<div class="floatBox box p4" :class="{ act: showGuideImport }">
<h2 style="text-align: center">导入用户数据</h2>
<section class="case">
<ul class="list plus-item">
<li style="display: flex; justify-content: space-around; padding: 0 20%">
<em>请选择用户积分数据文件:</em>
<div>
<span>{{ fileName }} </span>
<label class="file btnBlue-light" style="min-width: 50px; margin-left: 20px"><input type="file" class="upload" @change="tirggerFile($event)" name="file" accept=".xls,.xlsx" />选取文件</label>
<text class="center gray">仅支持Excel文档</text>
</div>
</li>
</ul>
<p class="center mt15">
<input type="button" class="btns btnBlue-light mr30" value="返回" @click="showGuideImport = false" />
<input type="button" class="btns btnBlue close4" value="完成" @click="addUserFromFile($event)" />
</p>
</section>
</div>
<!-- 积分导入弹窗end -->
<!--右侧内容end-->
</div>
</template>
<script>
import {
FINANCE_USER_INDUSTRY_LIST,
FINANCE_USER_PLACE_TYPE_LIST,
getNameByValue
} from "@/utils/consts";
import util from "@/setting/util";
import $mask from "../../../../setting/LoadMask";
let theMask;
export default {
name: "FinanceUserList",
components: {},
props: {},
data() {
return {
FINANCE_USER_INDUSTRY_LIST,
FINANCE_USER_PLACE_TYPE_LIST,
organList: [], // 所属机构列表
isCoupon2: false, //历史弹框状态
userList: [], //表格区域
DetailsList: {}, //详情客户列表
showGuideImport: false, //弹窗导入用户数据
fileName: "",
auditFlag: false, //审核人
auditList: [], //审核人列表
TellerSeq: "", //审核人标识 下拉双向绑定
//查询
queryList: {
CustName: "",
CustPhone: "",
Channel: "",
StandardStatus: "",
EnterOrganId: "",
EmpNo: "",
EmpName: ""
},
//报名网点
branchesList: [],
defaultProps: {
children: "children",
label: "organAbbreviation"
},
field101Props: {
multiple: false,
label: "organName",
value: "organId",
children: "children",
checkStrictly: true,
},
isCoupon: false,
pages: undefined,
pageNo: 1,
AssetsPromoteNum: {},
orgId: ""
};
},
watch: {},
computed: {},
created() {
this.getInstitutions();
// this.pages = Math.ceil(data.resultMap.recordNumber * 1 / 10);
this.query();
},
mounted() { },
methods: {
//点击机构树
orgChange(e) {
console.log(e, "看看点击树节点");
if (e.length <= 1) {
this.orgId = e[0]
console.log(this.orgId, "看看orgid");
} else {
this.orgId = e[1]
console.log(this.orgId, "看看orgid1111");
}
},
//获取机构
getInstitutions() {
this.$remote.post("/OrganQuery.do", {}, res => {
// this.branchesList = res.resultMap.list;
let data = res.resultMap.list;
data.forEach(item => {
// item.label = item.organName;
});
this.branchesList = data;
console.log(this.branchesList, "获取机构111111111111");
});
},
//选择审核人
auditChange(e) {
this.TellerSeq = e;
console.log(this.TellerSeq, "选择审核人");
},
//导出选择审核人提交
ExportSubmit() {
this.$remote.post(
"AssetsPromoteUserListExport.do",
{ TellerSeq: this.TellerSeq },
res => {
if (res.resultMap.resultCode == 200) {
// this.$message({
// message: "导出成功",
// type: "success"
// });
this.$message({
text: '导出成功'
})
this.query();
this.auditFlag = false;
}
console.log(res, "导出成功");
}
);
},
//点击导出客户
downLoadSome() {
this.auditFlag = true;
// console.log(this.$store.getters.getUserInfo, "看看缓存内容");
this.$remote.post("CheckEmpList.do", {}, res => {
this.auditList = res.resultMap.list;
console.log(res, "审核人列表");
});
},
//导入用户:显示导入弹窗
inUserFormFile: function() {
this.showGuideImport = true;
},
// 从文件导入用户数据
addUserFromFile: function(event) {
var that = this;
event.preventDefault(); //取消默认行为
let formData = new FormData();
if (this.file == "") {
that.$alert({
text: "请上传用户积分列表"
});
return;
}
formData.append("UserFiles", this.file);
this.$remote.post("AssetsPromoteImport.do", formData, function(data) {
that.$alert({ text: "文件上传成功,请等待数据同步" });
that.showGuideImport = false;
theMask = $mask();
setTimeout(() => {
theMask.close();
that.toImportHistory();
}, 4500);
});
},
tirggerFile: function(event) {
var that = this;
var fileName = event.target.files[0].name;
if (fileName.indexOf("xls") == -1) {
that.$alert({ text: "请上传xls、xlsx格式文件,其他格式不支持" });
return;
}
this.file = event.target.files[0];
this.fileName = this.file.name;
},
// 下载导入模板
downloadTemplate() {
util.downloadFile(
"/mweb/AssetsPromoteImportTempleteDownload.do",
"积分导入模板.xlsx"
);
},
//用户导入历史
toImportHistory: function() {
this.$router.push({
name: "__importUserHistory"
});
},
//客户详情
customerDetails(id) {
this.isCoupon = true;
console.log(id, "点击客户详情获取到id");
this.$remote.post("AssetsPromoteUserDetail.do", { Id: id }, res => {
this.DetailsList = res.resultMap.assetsPromote;
console.log(res, "客户详情");
});
},
//报名渠道点击
ChannelChange(Event) {
this.queryList.Channel = Event.target.value;
console.log(this.queryList.Channel, "报名渠道");
},
//达标状态点击
StandardChange(Event) {
this.queryList.StandardStatus = Event.target.value;
console.log(this.queryList.StandardStatus, "达标状态");
},
//点击查询
query() {
// 客户列表
var currentIndex = (this.pageNo * 1 - 1) * 10;
let obj = {
CustName: this.queryList.CustName,
CustPhone: this.queryList.CustPhone,
Channel: this.queryList.Channel,
StandardStatus: this.queryList.StandardStatus,
EnterOrganId: this.orgId,
EmpNo: this.queryList.EmpNo,
EmpName: this.queryList.EmpName,
pageSize: "10",
currentIndex: currentIndex,
Channel: "1",
StandardStatus: "0"
};
this.$remote.post("AssetsPromoteUserList.do", obj, data => {
this.userList = data.resultMap.List;
console.log(data.resultMap.List[0].Id, "客户列表数据");
//下面是报名数量
let Ids = data.resultMap.List[0].Id;
if (data.resultMap.resultCode == 200) {
this.$remote.post("AssetsPromoteNumQry.do", { Id: Ids }, res => {
this.AssetsPromoteNum = res.resultMap;
console.log(this.AssetsPromoteNum, "报名数量");
});
}
});
},
//关闭对话框
handleClose() { },
//分页
msgListView() { },
//客户列表
getList() { }
//导入历史弹框
// aa() {
// this.isCoupon2 = true;
// console.log(this.isCoupon2, "啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊");
// }
}
};
</script>
<style scoped>
.icon {
width: 60px;
height: 60px;
}
.box {
/* height: 300px; */
min-height: 300px;
}
.margin-top {
margin-top: 20px;
margin-bottom: 20px;
}
.audit_dialog {
width: 700px;
margin: 0 auto;
}
.tree_box {
width: 300px;
background-color: red;
}
</style>
///