mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-09 00:36:44 +08:00
581 lines
18 KiB
Vue
581 lines
18 KiB
Vue
<template>
|
||
<div>
|
||
<div v-if="isGeneralAgent == '1'">
|
||
<div class="header">
|
||
<div class="header-left">
|
||
<van-button>
|
||
<img :src="point" />
|
||
<span class="ml5 mr5">保费</span>
|
||
</van-button>
|
||
</div>
|
||
<div class="header-center">
|
||
<van-button class="btn-gray" :class="{ activeBtn: timeType === 0 }" @click="isDayConditionShow = true">日</van-button>
|
||
<van-button class="btn-gray month" :class="{ activeBtn: timeType === 1 }" @click="isMonthConditionShow = true">月</van-button>
|
||
<van-button class="btn-gray" :class="{ activeBtn: timeType === 2 }" @click="isYearConditionShow = true">年</van-button>
|
||
</div>
|
||
<div class="header-right">
|
||
<van-button @click="isTimeBarShow = true">
|
||
<span class="mr5">{{ timeCondition }}</span>
|
||
<van-icon name="arrow-down" />
|
||
</van-button>
|
||
</div>
|
||
</div>
|
||
<!-- 筛选 -->
|
||
<div class="classification">
|
||
<!-- <div :style="scrollObj"> -->
|
||
<div>
|
||
<span>机构名称: </span>
|
||
<span v-for="(level, index) in (8-levelLength)+1" :key="index" class="filter" @click="showLevelCondition(levelLength + index)">
|
||
<!-- <span>{{ levelNames[level] }}</span> -->
|
||
<span>{{ levelNames[levelLength + index] }}</span>
|
||
<van-icon name="arrow-down" />
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<Organization ref="organization" @updateQueryCom="updateQueryCom" :availableLevel.sync="availableLevel" :active.sync="active" />
|
||
</div>
|
||
<!-- 机构筛选栏 -->
|
||
<van-popup v-for="(level, index) in 8" :key="index" v-model="popCondition[index]" position="bottom" :style="{ height: '40vh' }">
|
||
<van-picker show-toolbar :columns="columns[level]" @confirm="onLevelConditionConfirm($event, level)" @cancel="closeLevelConditionPopup(level)" />
|
||
</van-popup>
|
||
<!-- 时间筛选栏 -->
|
||
<van-popup v-model="isTimeBarShow" position="bottom" :style="{ height: '40vh' }">
|
||
<van-datetime-picker
|
||
v-model="dayTimeCondition"
|
||
type="datetime"
|
||
:min-date="minDate"
|
||
:max-date="maxDate"
|
||
@confirm="onDayTimeConditionConfirm"
|
||
@cancel="isTimeBarShow = false"
|
||
/>
|
||
</van-popup>
|
||
</div>
|
||
<div v-else-if="isGeneralAgent == '0'" class="text-center">
|
||
<img class="mt40 w250" src="@/assets/images/pic_page-non.png" />
|
||
<div class="fs17 c-gray-dark mt40">普通代理人暂无数据！</div>
|
||
</div>
|
||
<!-- 日 -->
|
||
<van-popup v-model="isDayConditionShow" position="bottom" :style="{ height: '40vh' }">
|
||
<van-datetime-picker v-model="dayCondition" type="date" :min-date="minDate" :max-date="maxDate" @confirm="onDayConditionConfirm" @cancel="isDayConditionShow = false" />
|
||
</van-popup>
|
||
<!-- 月 -->
|
||
<van-popup v-model="isMonthConditionShow" position="bottom" :style="{ height: '40vh' }">
|
||
<van-datetime-picker
|
||
v-model="monthCondition"
|
||
type="year-month"
|
||
:min-date="minDate"
|
||
:max-date="maxDate"
|
||
@confirm="onMonthConditionConfirm"
|
||
@cancel="isMonthConditionShow = false"
|
||
/>
|
||
</van-popup>
|
||
<!-- 年 -->
|
||
<van-popup v-model="isYearConditionShow" position="bottom" :style="{ height: '40vh' }">
|
||
<van-picker show-toolbar :columns="years" @confirm="onYearConditionConfirm" @cancel="isYearConditionShow = false" />
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import point from '@/assets/images/ebiz/point.png'
|
||
import { Popup, Tab, Tabs, DatetimePicker, Picker, Toast } from 'vant'
|
||
import Organization from './Organization.vue'
|
||
import dateUtil from '@/assets/js/utils/date-utils.js'
|
||
import { getComPerformance, getMisComList, getBranchByUser } from '@/api/ebiz/goodStart'
|
||
import { getAgentInfo } from '@/api/ebiz/my/my'
|
||
|
||
// 当前时间
|
||
const currentDate = new Date()
|
||
|
||
export default {
|
||
name: 'UnderOffice',
|
||
components: {
|
||
[Popup.name]: Popup,
|
||
[Tab.name]: Tab,
|
||
[Tabs.name]: Tabs,
|
||
[DatetimePicker.name]: DatetimePicker,
|
||
[Picker.name]: Picker,
|
||
[Toast.name]: Toast,
|
||
Organization
|
||
},
|
||
data() {
|
||
return {
|
||
isGeneralAgent:null, //是否为普通代理人
|
||
levelLength:1, //内勤职级数为8，外勤区部组职级数不确定
|
||
// 代理人是否是内勤
|
||
isInner: false,
|
||
availableLevel: 0,
|
||
scrollObj: { width: 'auto', whiteSpace: 'nowrap' },
|
||
popCondition: [false, false, false, false, false, false],
|
||
columns: {
|
||
1: ['全国'],
|
||
2: ['全部'],
|
||
3: ['全部'],
|
||
4: ['全部'],
|
||
5: ['全部'],
|
||
6: ['全部'],
|
||
7: ['全部'],
|
||
8: ['全部']
|
||
},
|
||
timeType: 0,
|
||
// 最小查询日期
|
||
minDate: new Date(2022, 11, 1),
|
||
// 最大查询日期
|
||
maxDate: currentDate,
|
||
// 日期筛选条件
|
||
dayCondition: currentDate,
|
||
// 月份筛选条件
|
||
monthCondition: currentDate,
|
||
// 年份筛选条件
|
||
yearCondition: currentDate.getFullYear(),
|
||
// 实时筛选时间条件
|
||
timeCondition: dateUtil.formatDate(currentDate, 'yyyy-MM-dd HH:mm'),
|
||
dayTimeCondition: currentDate,
|
||
// 0: 期交, 1: 人力, 2: 产品
|
||
typeIndex: 0,
|
||
//子组件机构名称的角标等于this.availableLevel - 3
|
||
active: 0,
|
||
// 日期筛选是否显示
|
||
isTimeBarShow: false,
|
||
// 日筛选是否显示
|
||
isDayConditionShow: false,
|
||
// 月筛选是否展示
|
||
isMonthConditionShow: false,
|
||
// 年筛选是否显示
|
||
isYearConditionShow: false,
|
||
point,
|
||
levelNames: {
|
||
1: '全国',
|
||
2: '全部',
|
||
3: '全部',
|
||
4: '全部',
|
||
5: '全部',
|
||
6: '全部',
|
||
7: '全部',
|
||
8: '全部'
|
||
},
|
||
level1Code: '86',
|
||
level1Objs: [],
|
||
level2Code: 0,
|
||
level2Objs: [],
|
||
level3Code: 0,
|
||
level3Objs: [],
|
||
level4Code: 0,
|
||
level4Objs: [],
|
||
level5Code: 0,
|
||
level5Objs: [],
|
||
level6Code: 0,
|
||
level6Objs: [],
|
||
level7Code: 0,
|
||
level7Objs: [],
|
||
level8Code: 0,
|
||
level8Objs: [],
|
||
provinceCode: 0,
|
||
provinceObjs: [],
|
||
cityCode: 0,
|
||
cityObjs: [],
|
||
areaCode: 0,
|
||
areaObjs: [],
|
||
years: [],
|
||
params: {
|
||
// 86: 全国
|
||
manageCode: '86',
|
||
// 01: 全国, 02: 中心支公司, 03: 营销服务部, 04: 下辖营业区
|
||
manageLv: '01',
|
||
// 日期类型: 年/月/日/实时
|
||
queryType: 'd',
|
||
date: currentDate,
|
||
type: 'KMH',
|
||
queryCom: 'z'
|
||
}
|
||
}
|
||
},
|
||
async mounted() {
|
||
// 判断内外勤
|
||
await this.judgeUserType()
|
||
//获取当前人机构
|
||
let resData = await getBranchByUser({})
|
||
//（内勤）level 01,02,03,04,05时从全国开始 服务机构 （外勤）level 06,07,08时从当前职级开始
|
||
if (resData.result != '0') return this.$toast(resData.resultMessage)
|
||
//resData.content.level,当前用户无职级时，按照普通代理人处理
|
||
let manageLv = resData.content.level?Number(resData.content.level.substr(1, 1)):9
|
||
this.isGeneralAgent = manageLv == 9?'0':'1' //是否为普通代理人
|
||
// 初始化年份筛选数据
|
||
const currentYear = new Date().getFullYear()
|
||
if(currentYear == '2023'){
|
||
const startYear = currentYear + 1
|
||
for (let year = currentYear; year <= startYear; year++) {
|
||
this.years.push(year)
|
||
}
|
||
}else if(currentYear == '2022'){
|
||
this.years.push('2022')
|
||
}
|
||
if(manageLv == '1' || manageLv == '2' || manageLv == '3' || manageLv == '4'|| manageLv == '5'){
|
||
this.initData() //内勤
|
||
}else if(manageLv == '6' || manageLv == '7' || manageLv == '8'){
|
||
let manageCode = resData.content.code
|
||
//外勤时，level${manageLv}Code需要获取当前用户的inCode，否则全部时不会获取到上个职级的Code值
|
||
this[`level${manageLv}Code`] = resData.content.inCode
|
||
//外勤区部组职级数
|
||
this.levelLength = manageLv
|
||
// 外勤当前用户的第一职级
|
||
this.levelNames[manageLv] = resData.content.name
|
||
this.availableLevel = manageLv
|
||
this.params.manageLv = `0${manageLv}`
|
||
this[`level${manageLv}Objs`].splice(0)
|
||
this[`level${manageLv}Objs`].push(resData.content)
|
||
this.setLevelColumnsWai(manageLv)
|
||
this.active = this.availableLevel - 3
|
||
this.params.manageCode = manageLv > 5 ? this[`level${manageLv}Objs`][0].inCode : this[`level${manageLv}Objs`][0].code
|
||
if(manageLv == '6' || manageLv == '7'){
|
||
this.initData(manageCode,manageLv) //外勤
|
||
}else if(manageLv == '8'){
|
||
//获取queryCom对应的值，再去查询数据
|
||
this.updateQueryCom(this.active)
|
||
}
|
||
}
|
||
// this.initData()
|
||
// 设置APP右上角按钮图片
|
||
this.setRightBtn()
|
||
},
|
||
methods: {
|
||
async judgeUserType() {
|
||
const result = await getAgentInfo({})
|
||
if (result.result === '0') {
|
||
// 纯数字为外勤
|
||
const regx = /^[0-9]+$/
|
||
this.isInner = !regx.test(result.branchType)
|
||
} else {
|
||
this.$toast(result.resultMessage)
|
||
}
|
||
},
|
||
// 显示机构下拉选
|
||
showLevelCondition(level) {
|
||
if (!this.isInner && level < this.availableLevel) return
|
||
this.$set(this.popCondition, level - 1, true)
|
||
},
|
||
// 隐藏机构下拉选
|
||
closeLevelConditionPopup(level) {
|
||
this.$set(this.popCondition, level - 1, false)
|
||
},
|
||
// 查询某一层级机构筛选选项
|
||
async getLevelFilterColumn(manageCode = '', manageLv = '') {
|
||
const result = await getMisComList({
|
||
bussinessType: 'kmh',
|
||
manageCode,
|
||
manageLv
|
||
})
|
||
if (result.result === '0') {
|
||
return result
|
||
} else {
|
||
this.$toast(result.resultMessage)
|
||
return false
|
||
}
|
||
},
|
||
// 设置下拉选数据外勤-第一职级（区部组）.不显示全部
|
||
setLevelColumnsWai(level) {
|
||
const columns = []
|
||
this[`level${level}Objs`].forEach(item => {
|
||
columns.push(item.name)
|
||
})
|
||
this.$set(this.columns, level, columns)
|
||
},
|
||
// 设置下拉选数据
|
||
setLevelColumns(level) {
|
||
const columns = [level === 1 ? '全国' : '全部']
|
||
this[`level${level}Objs`].forEach(item => {
|
||
columns.push(item.name)
|
||
})
|
||
this.$set(this.columns, level, columns)
|
||
},
|
||
// 机构下拉选确定回调
|
||
async onLevelConditionConfirm(data, level) {
|
||
// 隐藏机构下拉选
|
||
this.closeLevelConditionPopup(level)
|
||
// 设置选择的机构名称
|
||
this.levelNames[level] = data
|
||
// 将当前机构下属机构设置为全部
|
||
for (let i = level + 1; i <= 8; i++) {
|
||
this.$set(this.levelNames, i, '全部')
|
||
}
|
||
// 查找选择的机构
|
||
const target = this[`level${level}Objs`].find(item => {
|
||
return item.name === data
|
||
})
|
||
// 选择的机构存在&不是最后一级时查询下级机构下拉选数据
|
||
if (target) {
|
||
// level1~5取code, level6~8取inCode
|
||
if (level > 5) {
|
||
this[`level${level}Code`] = target.inCode
|
||
} else {
|
||
this[`level${level}Code`] = target.code
|
||
}
|
||
// 不是最后一级机构查询下级机构数据
|
||
if (level < 8) {
|
||
const data = await this.getLevelFilterColumn(target.code, level)
|
||
if (data) {
|
||
// 清空数据再设置下级机构下拉选数据
|
||
this[`level${level + 1}Objs`].splice(0)
|
||
this[`level${level + 1}Objs`].push(...data.content)
|
||
this.setLevelColumns(level + 1)
|
||
}
|
||
}
|
||
}
|
||
// 选择全部时取上级机构
|
||
if (data === '全国') {
|
||
this.params.manageCode = '86'
|
||
} else if (data === '全部') {
|
||
this.params.manageCode = this[`level${level - 1}Code`]
|
||
} else {
|
||
this.params.manageCode = this[`level${level}Code`]
|
||
}
|
||
if (data === '全国') {
|
||
this.params.manageLv = '01'
|
||
} else if (data === '全部') {
|
||
this.params.manageLv = `0${level-1}`
|
||
} else {
|
||
// this.params.manageLv = `0${level + 1}`
|
||
this.params.manageLv = `0${level}`
|
||
}
|
||
// 发送接口查数据
|
||
this.getSetDate()
|
||
},
|
||
reset() {
|
||
location.reload()
|
||
},
|
||
async getSetDate() {
|
||
let result = await this.getPerformanceRankData()
|
||
if (result.result === '0') {
|
||
this.$refs.organization.setTableData(result.content.list)
|
||
} else {
|
||
this.$toast(result.resultMessage)
|
||
}
|
||
},
|
||
appCallBack(data) {
|
||
if (data.trigger == 'right_button_click') {
|
||
this.reset()
|
||
}
|
||
},
|
||
// async dataTypeChange() {
|
||
// await this.getSetDate()
|
||
// },
|
||
setRightBtn() {
|
||
setTimeout(() => {
|
||
window.EWebBridge.webCallAppInJs('webview_right_button', {
|
||
btns: [
|
||
{
|
||
img: this.$assetsUrl + 'images/ebiz/refresh.png'
|
||
}
|
||
]
|
||
})
|
||
}, 1000)
|
||
window.appCallBack = this.appCallBack
|
||
},
|
||
async initData(manageCode,manageLv) {
|
||
// 查询全部分公司
|
||
const res = await this.getLevelFilterColumn(manageCode,manageLv)
|
||
if (res) {
|
||
const firsts = res.content
|
||
// 外勤
|
||
if (!this.isInner) {
|
||
// 清空数据再设置下级机构下拉选数据
|
||
this[`level${firsts[0].level}Objs`].splice(0)
|
||
this[`level${firsts[0].level}Objs`].push(...firsts)
|
||
this.setLevelColumns(firsts[0].level)
|
||
// await this.getSetDate()
|
||
//获取queryCom对应的值，再去查询数据
|
||
this.updateQueryCom(this.active)
|
||
}else { // 内勤
|
||
// 原逻辑--开始
|
||
// 设置下拉选
|
||
// this.level1Objs = firsts
|
||
// this.setLevelColumns(manageLv)
|
||
// await this.getSetDate()
|
||
// 原逻辑--结束
|
||
// 外勤时返回无法修改的机构列表
|
||
const unavailableOrgs = firsts.filter(item => item.code !== '86').reverse()
|
||
// 第一级时不走此逻辑
|
||
for (let org of unavailableOrgs) {
|
||
this.$set(this.levelNames, org.level - 1, org.name)
|
||
this[`level${org.level}Code`] = org.level > 5 ? org.inCode : org.code
|
||
}
|
||
// 外勤可以查看的最高级别机构
|
||
const availableOrg = firsts[0]
|
||
this.availableLevel = availableOrg.level
|
||
this.active = this.availableLevel - 3
|
||
// 查询下级机构
|
||
const data = await this.getLevelFilterColumn(availableOrg.code, availableOrg.level)
|
||
if (data) {
|
||
// 清空数据再设置下级机构下拉选数据
|
||
this[`level${data.content[0].level}Objs`].splice(0)
|
||
this[`level${data.content[0].level}Objs`].push(...data.content)
|
||
this.setLevelColumns(data.content[0].level)
|
||
}
|
||
this.params.manageCode = this.availableLevel > 5 ? firsts[0].inCode : firsts[0].code
|
||
this.params.manageLv = `0${this.availableLevel}`
|
||
await this.getSetDate()
|
||
// console.log(this.params.manageCode,'this.params.manageCode')
|
||
// console.log(this.params.manageLv,'this.params.manageLv')
|
||
// console.log(this.params,'this.params')
|
||
}
|
||
}
|
||
},
|
||
// 查询业绩数据
|
||
async getPerformanceRankData() {
|
||
let date = null
|
||
switch (this.timeType) {
|
||
case 0:
|
||
date = this.dayCondition
|
||
this.params.queryType = 'd'
|
||
break
|
||
case 1:
|
||
date = this.monthCondition
|
||
this.params.queryType = 'm'
|
||
break
|
||
case 2:
|
||
date = this.yearCondition
|
||
// date = new Date(String(this.yearCondition))
|
||
this.params.queryType = 'y'
|
||
break
|
||
case 3:
|
||
date = this.dayTimeCondition
|
||
this.params.queryType = 'd'
|
||
break
|
||
}
|
||
this.params.date = dateUtil.formatDate(date, 'yyyy-MM-dd')
|
||
let result = await getComPerformance(this.params)
|
||
return result
|
||
},
|
||
async onDayConditionConfirm() {
|
||
this.isDayConditionShow = false
|
||
this.timeType = 0
|
||
await this.getSetDate()
|
||
},
|
||
async onMonthConditionConfirm() {
|
||
this.isMonthConditionShow = false
|
||
this.timeType = 1
|
||
await this.getSetDate()
|
||
},
|
||
async onYearConditionConfirm(value) {
|
||
// if(value == '2021'){
|
||
// this.yearCondition = new Date('2021-12-12')
|
||
// }else if(value == '2022'){
|
||
// this.yearCondition = new Date('2022-01-01')
|
||
// }
|
||
if(value == '2022'){
|
||
this.yearCondition = new Date('2022-12-01')
|
||
}else if(value == '2023'){
|
||
this.yearCondition = new Date('2023-01-01')
|
||
}
|
||
this.isYearConditionShow = false
|
||
this.timeType = 2
|
||
await this.getSetDate()
|
||
},
|
||
// 筛选时间确认事件
|
||
async onDayTimeConditionConfirm(time) {
|
||
this.isTimeBarShow = false
|
||
this.timeType = 3
|
||
this.timeCondition = dateUtil.formatDate(time, 'yyyy-MM-dd HH:mm')
|
||
this.params.date = ''
|
||
await this.getSetDate()
|
||
},
|
||
async updateQueryCom(val) {
|
||
switch (val) {
|
||
case 0:
|
||
this.params.queryCom = 'z'
|
||
break
|
||
case 1:
|
||
this.params.queryCom = 'y'
|
||
break
|
||
case 2:
|
||
this.params.queryCom = 'q'
|
||
break
|
||
case 3:
|
||
this.params.queryCom = 'wq'
|
||
break
|
||
case 4:
|
||
this.params.queryCom = 'b'
|
||
break
|
||
case 5:
|
||
this.params.queryCom = 'zz'
|
||
break
|
||
}
|
||
await this.getSetDate()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.header {
|
||
font-size: 14px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 8px;
|
||
background: #f03;
|
||
.header-left,
|
||
.header-center,
|
||
.header-right {
|
||
border-radius: 5px;
|
||
overflow: hidden;
|
||
}
|
||
.header-center {
|
||
.month {
|
||
border-left: none;
|
||
border-right: none;
|
||
}
|
||
.van-button {
|
||
border-radius: 0;
|
||
}
|
||
.btn-gray {
|
||
background-color: #f2f2f2;
|
||
}
|
||
.activeBtn {
|
||
color: red;
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.classification {
|
||
font-size: 14px;
|
||
margin: 15px;
|
||
overflow: hidden;
|
||
overflow-x: auto;
|
||
.filter {
|
||
margin-left: 5px;
|
||
.van-icon {
|
||
vertical-align: middle;
|
||
margin-top: 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
span {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.content {
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.van-icon {
|
||
font-weight: bolder;
|
||
}
|
||
|
||
::v-deep .van-button__text {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
::v-deep .van-button {
|
||
padding: 0 10px;
|
||
}
|
||
|
||
*::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|