mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-10 13:56:44 +08:00
'出单详情'
This commit is contained in:
proudlx
101
src/components/ebiz/billingDetail/tableDetail.vue
Normal file
101
src/components/ebiz/billingDetail/tableDetail.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="statisticsTable">
|
||||
<table cellspacing="0" summary cellpadding="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th :class="{'th-fixed':index<1}" v-for="(item,index) in theads" :key="index">{{item}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
<td :class="isLink?'td-fixed':'th-fixed'" @click="goLink(item)">{{item.convokeOrgCn}}</td>
|
||||
<td>{{item.splan}}</td>
|
||||
<td>{{item.estimatePeople}}</td>
|
||||
<td>{{item.estimatePremium}}</td>
|
||||
<td>{{item.rplan}}</td>
|
||||
<td>{{item.realityPeople}}</td>
|
||||
<td>{{item.estimateGetPremium}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tableDetail',
|
||||
props:{
|
||||
theads:{
|
||||
type:Array,
|
||||
default:[]
|
||||
},
|
||||
isLink:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
tableData:{
|
||||
type:Array,
|
||||
default:[]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created(){
|
||||
},
|
||||
methods: {
|
||||
goLink(item){
|
||||
if(this.isLink){
|
||||
this.$emit('goLink',item)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.statisticsTable th {
|
||||
width: 100px;
|
||||
}
|
||||
table {
|
||||
width: 160vw;
|
||||
}
|
||||
.statisticsTable {
|
||||
width: 100%;
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #999;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
thead {
|
||||
th {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: #e9332e;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.th-fixed {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
width:200px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.td-fixed {
|
||||
position: sticky;
|
||||
width:200px;
|
||||
padding: 0 5px;
|
||||
left: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
14
src/router/ebiz/billingDetail.js
Normal file
14
src/router/ebiz/billingDetail.js
Normal file
@@ -0,0 +1,14 @@
|
||||
const billingDetail = () => import('@/views/ebiz/billingDetail/billingDetail')
|
||||
|
||||
|
||||
export default [
|
||||
{
|
||||
path: '/billingDetail',
|
||||
name: 'billingDetail',
|
||||
component: billingDetail,
|
||||
meta: {
|
||||
title: '出单详情',
|
||||
index: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -35,6 +35,9 @@ import insureAgain from './insureAgain'
|
||||
|
||||
// 产说会
|
||||
import productionSay from './productionSay'
|
||||
// 出单详情
|
||||
import billingDetail from './billingDetail'
|
||||
|
||||
export default [
|
||||
...proposal,
|
||||
...sale,
|
||||
@@ -66,4 +69,5 @@ export default [
|
||||
...eqiVisit,
|
||||
...insureAgain,
|
||||
...productionSay,
|
||||
...billingDetail
|
||||
] //根据需要进行删减
|
||||
|
||||
224
src/views/ebiz/billingDetail/billingDetail.vue
Normal file
224
src/views/ebiz/billingDetail/billingDetail.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="classification">
|
||||
<span>机构名称: </span>
|
||||
<span @click="isOrgLv2ConditionShow = true">
|
||||
<span>{{ OrgLv2Name }}</span>
|
||||
<van-icon name="arrow-down" />
|
||||
</span>
|
||||
<template v-if="isMoreConditionShow">
|
||||
<span @click="isOrgLv3ConditionShow = true">
|
||||
<span>{{ OrgLv4Name }}</span>
|
||||
<van-icon name="arrow-down" />
|
||||
</span>
|
||||
<span @click="isOrgLv4ConditionShow = true">
|
||||
<span>{{ OrgLv3Name }}</span>
|
||||
<van-icon name="arrow-down" />
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 二级机构筛选栏 -->
|
||||
<van-popup v-model="isOrgLv2ConditionShow" position="bottom" :style="{ height: '40vh' }">
|
||||
<van-picker show-toolbar :columns="province" @confirm="onOrgLv2ConditionConfirm" @cancel="isOrgLv2ConditionShow = false" />
|
||||
</van-popup>
|
||||
<!-- 三级机构筛选栏 -->
|
||||
<van-popup v-model="isOrgLv3ConditionShow" position="bottom" :style="{ height: '40vh' }">
|
||||
<van-picker show-toolbar :columns="city" @confirm="onOrgLv3ConditionConfirm" @cancel="isOrgLv3ConditionShow = false" />
|
||||
</van-popup>
|
||||
<!-- 四级机构筛选栏 -->
|
||||
<van-popup v-model="isOrgLv4ConditionShow" position="bottom" :style="{ height: '40vh' }">
|
||||
<van-picker show-toolbar :columns="area" @confirm="onOrgLv4ConditionConfirm" @cancel="isOrgLv4ConditionShow = false" />
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon } from 'vant'
|
||||
import tableDetail from '@/components/ebiz/billingDetail/tableDetail'
|
||||
import { getComPerformance, getOrgList } from '@/api/ebiz/branchOffice/branchOffice'
|
||||
// 当前时间
|
||||
const currentDate = new Date()
|
||||
export default {
|
||||
name: 'billingDetail',
|
||||
components: { tableDetail, [Icon.name]: Icon },
|
||||
computed: {
|
||||
|
||||
isMoreConditionShow() {
|
||||
return this.OrgLv2Name !== '全国'
|
||||
},
|
||||
province() {
|
||||
const name = ['全国']
|
||||
this.OrgLv2s.forEach((item) => {
|
||||
name.push(item.name)
|
||||
})
|
||||
return name
|
||||
},
|
||||
city() {
|
||||
const city = ['全部']
|
||||
this.OrgLv3s.forEach((item) => {
|
||||
if (item.upBranchCode === this.OrgLv2Code) {
|
||||
city.push(item.name)
|
||||
}
|
||||
})
|
||||
return city
|
||||
},
|
||||
area() {
|
||||
const area = ['全部']
|
||||
this.OrgLv4s.forEach((item) => {
|
||||
if (item.upBranchCode === this.OrgLv3Code) {
|
||||
area.push(item.name)
|
||||
}
|
||||
})
|
||||
return area
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 二级机构筛选是否显示
|
||||
isOrgLv2ConditionShow: false,
|
||||
// 三级机构筛选是否显示
|
||||
isOrgLv3ConditionShow: false,
|
||||
// 四级机构筛选是否显示
|
||||
isOrgLv4ConditionShow: false,
|
||||
OrgLv2Name: '全国',
|
||||
OrgLv4Name: '全部',
|
||||
OrgLv3Name: '全部',
|
||||
OrgLv2Code: 0,
|
||||
OrgLv2s: [],
|
||||
OrgLv3Code: 0,
|
||||
OrgLv3s: [],
|
||||
areaCode: 0,
|
||||
OrgLv4s: [],
|
||||
|
||||
params: {
|
||||
// 86: 全国
|
||||
manageCode: '86',
|
||||
// 01: 全国, 02: 中心支公司, 03: 营销服务部, 04: 下辖营业区
|
||||
manageLv: '01',
|
||||
// 日期类型: 年/月/日/实时
|
||||
queryType: 'd',
|
||||
date: currentDate,
|
||||
// all: 汇总, prem: 保费排行, active：人力排行, product: 产品
|
||||
type: 'all',
|
||||
// 1: 中心支公司, 2: 营销服务部, 3: 下辖营业区
|
||||
queryCom: ''
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async initData() {
|
||||
// 初始化年份筛选数据
|
||||
// const currentYear = new Date().getFullYear()
|
||||
// const startYear = currentYear - 10
|
||||
// for (let year = startYear; year <= currentYear; year++) {
|
||||
// this.years.unshift(year)
|
||||
// }
|
||||
/**
|
||||
* 查询机构下拉列表
|
||||
* manageCode, manageLv传空查全国所有二级机构
|
||||
**/
|
||||
console.log('getOrgList :>> ', getOrgList)
|
||||
const res = await getOrgList({
|
||||
bussinessType: 'normal',
|
||||
manageCode: '',
|
||||
manageLv: ''
|
||||
})
|
||||
if (res.result === '0') {
|
||||
this.OrgLv2s.push(...res.content)
|
||||
} else {
|
||||
this.$toast(res.resultMessage)
|
||||
}
|
||||
// 查询默认数据
|
||||
// const result = await this.getRankData()
|
||||
// this.setSummarizingData(result)
|
||||
},
|
||||
// 筛选二级机构
|
||||
async onOrgLv2ConditionConfirm(data) {
|
||||
this.isOrgLv2ConditionShow = false
|
||||
let OrgLv2 = this.OrgLv2s.find((item) => item.name === data)
|
||||
if (OrgLv2) {
|
||||
this.OrgLv2Code = OrgLv2.code
|
||||
this.params.manageCode = this.OrgLv2Code
|
||||
this.params.manageLv = '02'
|
||||
}
|
||||
if (data === '全国') {
|
||||
this.params.manageCode = '86'
|
||||
this.params.manageLv = '01'
|
||||
}
|
||||
this.OrgLv2Name = data
|
||||
this.OrgLv4Name = '全部'
|
||||
this.OrgLv3Name = '全部'
|
||||
// 查询三级机构
|
||||
const res = await getOrgList({
|
||||
bussinessType: 'normal',
|
||||
manageCode: this.OrgLv2Code,
|
||||
manageLv: '02',
|
||||
})
|
||||
this.OrgLv3s.splice(0)
|
||||
this.OrgLv3s.push(...res.content)
|
||||
// this.setRankData()
|
||||
},
|
||||
// 筛选三级机构
|
||||
async onOrgLv3ConditionConfirm(data) {
|
||||
this.isOrgLv3ConditionShow = false
|
||||
this.OrgLv4Name = data
|
||||
let OrgLv3 = this.OrgLv3s.find((item) => item.name === data)
|
||||
if (OrgLv3) {
|
||||
this.OrgLv3Code = OrgLv3.code
|
||||
this.params.manageCode = this.OrgLv3Code
|
||||
this.params.manageLv = '03'
|
||||
}
|
||||
if (data === '全部') {
|
||||
this.params.manageCode = this.OrgLv2Code
|
||||
this.params.manageLv = '02'
|
||||
}
|
||||
this.OrgLv3Name = '全部'
|
||||
// 查询四级机构
|
||||
const res = await getOrgList({
|
||||
bussinessType: 'normal',
|
||||
manageCode: this.OrgLv3Code,
|
||||
manageLv: '03',
|
||||
})
|
||||
this.OrgLv4s.splice(0)
|
||||
this.OrgLv4s.push(...res.content)
|
||||
// this.setRankData()
|
||||
},
|
||||
// 筛选四级机构
|
||||
async onOrgLv4ConditionConfirm(data) {
|
||||
this.isOrgLv4ConditionShow = false
|
||||
this.OrgLv3Name = data
|
||||
let area = this.OrgLv4s.find((item) => item.name === data)
|
||||
if (area) {
|
||||
this.areaCode = area.code
|
||||
this.params.manageCode = this.areaCode
|
||||
this.params.manageLv = '04'
|
||||
}
|
||||
if (data === '全部') {
|
||||
this.params.manageCode = this.OrgLv3Code
|
||||
this.params.manageLv = '03'
|
||||
}
|
||||
// this.setRankData()
|
||||
},
|
||||
},
|
||||
created(){
|
||||
this.initData();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.classification {
|
||||
font-size: 14px;
|
||||
padding: 15px;
|
||||
}
|
||||
.van-icon {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
::v-deep .classification .van-icon {
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user