mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-07 18:16:44 +08:00
GBC项目列表页面基础功能开发 组件编写 客户列表页面基础功能开发 组件编写
This commit is contained in:
liu.xiaofeng@ebiz-digits.com
@@ -1,5 +1,8 @@
|
||||
//数据报表 定义相关组件
|
||||
const GBC_home = () => import('@/views/GBC/home')
|
||||
const GBC_projectList = () => import('@/views/GBC/projectList')
|
||||
const GBC_projectDetail = () => import('@/views/GBC/projectDetail')
|
||||
const GBC_customerDetail = () => import('@/views/GBC/customerDetail')
|
||||
|
||||
export default [
|
||||
{
|
||||
@@ -11,4 +14,31 @@ export default [
|
||||
index: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/GBC/projectList',
|
||||
name: 'GBC_projectList',
|
||||
component: GBC_projectList,
|
||||
meta: {
|
||||
title: '项目列表',
|
||||
index: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/GBC/projectDetail',
|
||||
name: 'GBC_projectDetail',
|
||||
component: GBC_projectDetail,
|
||||
meta: {
|
||||
title: '项目详情',
|
||||
index: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/GBC/customerDetail',
|
||||
name: 'GBC_customerDetail',
|
||||
component: GBC_customerDetail,
|
||||
meta: {
|
||||
title: '编辑客户信息',
|
||||
index: 1
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
40
src/views/GBC/customerDetail.vue
Normal file
40
src/views/GBC/customerDetail.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
编辑客户信息
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tab, Tabs, Search, DropdownMenu, DropdownItem } from 'vant'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[Tab.name]: Tab,
|
||||
[Tabs.name]: Tabs,
|
||||
[Search.name]: Search,
|
||||
[DropdownMenu.name]: DropdownMenu,
|
||||
[DropdownItem.name]: DropdownItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
beforeRouteLeave(to, from, next) {
|
||||
document.body.style.backgroundColor = ''
|
||||
next()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
153
src/views/GBC/projectDetail.vue
Normal file
153
src/views/GBC/projectDetail.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-tabs v-model="tabActive">
|
||||
<van-tab title="客户列表" name="customerList"></van-tab>
|
||||
<van-tab title="数据看板" name="dataBoard"></van-tab>
|
||||
<van-tab title="产品列表" name="productList"></van-tab>
|
||||
</van-tabs>
|
||||
<div v-if="tabActive == 'customerList'">
|
||||
<div style="display: flex;align-items: center;margin-left: 10px;">
|
||||
<div style="width: 30%;">
|
||||
<van-dropdown-menu :overlay="dropdownmenuoverlay">
|
||||
<van-dropdown-item v-model="chooseType" :options="chooseTypeOption" />
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
<van-search v-model="searchvalue" shape="round" background="#f5f5f5" placeholder="搜索客户姓名/部门/科室/服务人员" style="width: 70%;"/>
|
||||
</div>
|
||||
<div style="padding: 0px 10px 10px;">
|
||||
<div v-for="item in customerList">
|
||||
<div style="padding: 20px 20px 10px;border-radius: 5px;background: #fff;margin-top: 20px;">
|
||||
<div style="display: flex;font-size: 14px;line-height: 30px;border-bottom: 1px solid #eee;padding-bottom: 10px;">
|
||||
<div style="width: 55%;overflow: hidden;">
|
||||
<p>客户姓名：{{item.name}}</p>
|
||||
<p>手机号码：{{item.phone}}</p>
|
||||
<p>服务组长：{{item.leader}}</p>
|
||||
</div>
|
||||
<div style="width: 45%;overflow: hidden;">
|
||||
<p>部门/科室：{{item.department}}</p>
|
||||
<p>承包保单：{{item.policyNums}}</p>
|
||||
<p>服务组员：{{item.serviceName}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: flex-end;margin-top: 10px;">
|
||||
<van-button @click="goCustomerDetail(item)" type="danger" size="small" style="border-radius:5px;">查看编辑</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="tabActive == 'dataBoard'">
|
||||
<div>数据看板</div>
|
||||
</div>
|
||||
<div v-if="tabActive == 'productList'">
|
||||
<div>产品列表</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tab, Tabs, Search, DropdownMenu, DropdownItem } from 'vant'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[Tab.name]: Tab,
|
||||
[Tabs.name]: Tabs,
|
||||
[Search.name]: Search,
|
||||
[DropdownMenu.name]: DropdownMenu,
|
||||
[DropdownItem.name]: DropdownItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabActive:1,
|
||||
searchvalue:'',
|
||||
chooseType: 0,
|
||||
chooseTypeOption: [
|
||||
{ text: '请选择', value: 0 },
|
||||
{ text: '按客户', value: 1 },
|
||||
{ text: '按科室', value: 2 },
|
||||
{ text: '按小组', value: 3 },
|
||||
{ text: '按日期', value: 4 },
|
||||
],
|
||||
dropdownmenuoverlay:false,
|
||||
customerList:[
|
||||
{
|
||||
name:'赵燕燕',
|
||||
department:'财务部',
|
||||
phone:'15825826959',
|
||||
policyNums:'10份',
|
||||
leader:'李斯',
|
||||
serviceName:'刘艺'
|
||||
},
|
||||
{
|
||||
name:'赵燕燕',
|
||||
department:'财务部',
|
||||
phone:'15825826959',
|
||||
policyNums:'10份',
|
||||
leader:'李斯',
|
||||
serviceName:'刘艺'
|
||||
},
|
||||
{
|
||||
name:'赵燕燕',
|
||||
department:'财务部',
|
||||
phone:'15825826959',
|
||||
policyNums:'10份',
|
||||
leader:'李斯',
|
||||
serviceName:'刘艺'
|
||||
},
|
||||
{
|
||||
name:'赵燕燕',
|
||||
department:'财务部',
|
||||
phone:'15825826959',
|
||||
policyNums:'10份',
|
||||
leader:'李斯',
|
||||
serviceName:'刘艺'
|
||||
},
|
||||
{
|
||||
name:'赵燕燕',
|
||||
department:'财务部',
|
||||
phone:'15825826959',
|
||||
policyNums:'10份',
|
||||
leader:'李斯',
|
||||
serviceName:'刘艺'
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
goCustomerDetail(data){
|
||||
this.$router.push({
|
||||
path:'/GBC/customerDetail',
|
||||
query:{
|
||||
serviceName:data.serviceName
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
beforeRouteLeave(to, from, next) {
|
||||
document.body.style.backgroundColor = ''
|
||||
next()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .van-search__content{
|
||||
background: #fff;
|
||||
}
|
||||
/deep/ .van-dropdown-menu{
|
||||
height: 34px;
|
||||
}
|
||||
/deep/ .van-dropdown-item__content{
|
||||
width: 40%;
|
||||
left: 10px;
|
||||
}
|
||||
/deep/ .van-dropdown-menu{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
99
src/views/GBC/projectList.vue
Normal file
99
src/views/GBC/projectList.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-search v-model="searchvalue" shape="round" background="#fff" placeholder="搜索项目名称"/>
|
||||
<div style="padding: 10px;">
|
||||
<van-collapse v-for="item in yearList" :key="item.year" v-model="activeNames" style="margin-top: 10px;border-radius: 5px;">
|
||||
<van-collapse-item :title="item.year" :name="item.year">
|
||||
<div v-for="(ii,iis) in item.projectList" @click="goprojectDetail(ii)" :key="iis" style="display: flex;justify-content: space-between;align-items: center;padding: 10px;border-bottom: 1px solid #eee;">
|
||||
<div>
|
||||
<p style="color:#323233;margin-bottom: 10px;">{{ii.projectName}}</p>
|
||||
<p v-if="ii.enable == '1'">服务起止日期<span style="margin-left: 10px;">{{ii.startDate}}至{{ii.endDate}}</span></p>
|
||||
<p v-if="ii.enable == '0'">服务起止日期<span style="margin-left: 10px;color: red;">{{ii.startDate}}至{{ii.endDate}}</span></p>
|
||||
</div>
|
||||
<van-icon name="arrow" />
|
||||
</div>
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Search, Collapse, CollapseItem, Icon } from 'vant'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[Search.name]: Search,
|
||||
[Collapse.name]: Collapse,
|
||||
[CollapseItem.name]: CollapseItem,
|
||||
[Icon.name]: Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchvalue:'',
|
||||
activeNames: [],
|
||||
yearList:[
|
||||
{
|
||||
year:'2023年项目',
|
||||
projectList:[
|
||||
{projectName:'国富人寿AA项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
|
||||
{projectName:'国富人寿BB项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
|
||||
{projectName:'国富人寿CC项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
|
||||
{projectName:'国富人寿DD项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'0'},
|
||||
],
|
||||
},
|
||||
{
|
||||
year:'2022年项目',
|
||||
projectList:[
|
||||
{projectName:'国富人寿AA项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
|
||||
{projectName:'国富人寿BB项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
|
||||
{projectName:'国富人寿CC项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
|
||||
{projectName:'国富人寿DD项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'0'},
|
||||
],
|
||||
},
|
||||
{
|
||||
year:'2021年项目',
|
||||
projectList:[
|
||||
{projectName:'国富人寿AA项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
|
||||
{projectName:'国富人寿BB项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
|
||||
{projectName:'国富人寿CC项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
|
||||
{projectName:'国富人寿DD项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'0'},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
goprojectDetail(data){
|
||||
this.$router.push({
|
||||
path:'/GBC/projectDetail',
|
||||
query:{
|
||||
projectCode:data.projectCode
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
beforeRouteLeave(to, from, next) {
|
||||
document.body.style.backgroundColor = ''
|
||||
next()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .van-search__content{
|
||||
background: #f7f8fa;
|
||||
}
|
||||
/deep/ .van-cell__title{
|
||||
font-weight: bold;
|
||||
}
|
||||
/deep/ .van-collapse-item__title{
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user