提交 8ccb4680 authored 作者: matian's avatar matian

各模块页面开发

上级 e03c4bb1
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"@element-plus/icons-vue": "^2.0.9", "@element-plus/icons-vue": "^2.0.9",
"axios": "^0.27.2", "axios": "^0.27.2",
"blueimp-md5": "^2.19.0", "blueimp-md5": "^2.19.0",
"echarts": "^5.3.3",
"element-plus": "^2.2.15", "element-plus": "^2.2.15",
"pinia": "^2.0.21", "pinia": "^2.0.21",
"qs": "^6.11.0", "qs": "^6.11.0",
...@@ -1277,6 +1278,20 @@ ...@@ -1277,6 +1278,20 @@
"node": ">=6.0.0" "node": ">=6.0.0"
} }
}, },
"node_modules/echarts": {
"version": "5.3.3",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.3.3.tgz",
"integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.3.2"
}
},
"node_modules/echarts/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"node_modules/ee-first": { "node_modules/ee-first": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz", "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
...@@ -4341,6 +4356,19 @@ ...@@ -4341,6 +4356,19 @@
"engines": { "engines": {
"node": ">=10" "node": ">=10"
} }
},
"node_modules/zrender": {
"version": "5.3.2",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz",
"integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
"dependencies": {
"tslib": "2.3.0"
}
},
"node_modules/zrender/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
} }
}, },
"dependencies": { "dependencies": {
...@@ -5313,6 +5341,22 @@ ...@@ -5313,6 +5341,22 @@
"esutils": "^2.0.2" "esutils": "^2.0.2"
} }
}, },
"echarts": {
"version": "5.3.3",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.3.3.tgz",
"integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
"requires": {
"tslib": "2.3.0",
"zrender": "5.3.2"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
},
"ee-first": { "ee-first": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz", "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
...@@ -7605,6 +7649,21 @@ ...@@ -7605,6 +7649,21 @@
"resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz", "resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz",
"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
"dev": true "dev": true
},
"zrender": {
"version": "5.3.2",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz",
"integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
"requires": {
"tslib": "2.3.0"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
} }
} }
} }
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
"@element-plus/icons-vue": "^2.0.9", "@element-plus/icons-vue": "^2.0.9",
"axios": "^0.27.2", "axios": "^0.27.2",
"blueimp-md5": "^2.19.0", "blueimp-md5": "^2.19.0",
"echarts": "^5.3.3",
"element-plus": "^2.2.15", "element-plus": "^2.2.15",
"pinia": "^2.0.21", "pinia": "^2.0.21",
"qs": "^6.11.0", "qs": "^6.11.0",
......
import type { RouteRecordRaw } from 'vue-router'
import AppLayout from '@/components/layout/Index.vue'
export const routes: Array<RouteRecordRaw> = [
{
path: '/channel/bp',
component: AppLayout,
children: [
{ path: '', component: () => import('./views/List.vue') },
{ path: '/channel/bp/detail/:id', component: () => import('./views/View.vue'), props: true }
]
}
]
<script setup lang="ts">
const shortcuts = [
{
text: '今日',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(new Date(new Date().toLocaleDateString()).getTime())
return [start, end.setHours(23, 59, 59, 999)]
}
},
{
text: '昨日',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '本周',
value: () => {
// let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const end = new Date()
const start = new Date()
console.log(start.getDay())
start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDay() - 1))
return [start.setHours(0, 0, 0, 0), end]
}
},
{
text: '上周',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDay() + 6))
end.setTime(end.getTime() - 3600 * 1000 * 24 * end.getDay())
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去7天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去14天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去30天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去60天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 60)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去90天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去180天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
}
]
// 列表配置
const listOptions = {
remote: {
// httpRequest: getExperimentList,
params: { timeRange: '', project_name: '', origin: '', name: '', email: '', mobile: '' }
},
filters: [
{
type: 'input',
slots: 'createTime',
prop: 'createTime'
},
{
type: 'select',
prop: 'project_name',
placeholder: '渠道名称'
},
{
type: 'input',
prop: 'origin',
placeholder: '渠道编号'
},
{
type: 'select',
prop: 'email',
placeholder: '渠道标签'
},
// 与所在项目进行联动
{
type: 'input',
prop: 'email',
placeholder: '公司字号'
}
],
columns: [
{ label: '渠道编号', prop: 'name' },
{ label: '渠道名称', prop: 'mobile' },
{ label: '公司字号', prop: 'email' },
{ label: '渠道标签', prop: 'project_name' },
{ label: '渠道质量', prop: 'origin' },
{ label: '归属人', prop: 'origin' },
{ label: '渠道类型', prop: 'type' },
{ label: '状态', prop: 'status' },
{ label: '创建时间', prop: 'created_time' },
{ label: '更新时间', prop: 'updated_time' },
{ label: '操作', slots: 'table-x', width: 100 }
],
data: [{ name: 1 }, { name: 2 }]
}
</script>
<template>
<AppCard title="渠道信息">
<AppList v-bind="listOptions" ref="appList">
<template v-slot:createTime="{ params }">
<el-date-picker
v-model="params.createTime"
type="datetimerange"
start-placeholder="创建开始时间"
end-placeholder="创建结束时间"
value-format="yyyy-MM-dd HH-mm-ss"
:shortcuts="shortcuts"
/>
</template>
<template #table-x="{ row }">
<el-button type="primary" link>
<router-link :to="`/channel/bp/detail/${row.id}`" target="_blank">查看</router-link>
</el-button>
</template>
</AppList>
</AppCard>
</template>
<script setup lang="ts">
interface Props {
id: string
}
defineProps<Props>()
// function fetchInfo() {}
// onMounted(() => fetchInfo)
// 列表配置
const listOptions = {
columns: [
{ label: '#', prop: 'id' },
{ label: '项目', prop: 'name' },
{ label: '分成规则', prop: 'gender' },
{ label: '分成比例', prop: 'phone' },
{ label: '学员上限', prop: 'work' },
{ label: '有效期', prop: 'work' },
{ label: '跟进人', prop: 'work' },
{ label: '关联日期', prop: 'work' }
],
data: [{ id: 1 }, { id: 2 }]
}
const listOptions1 = {
columns: [
{ label: '#', prop: 'id' },
{ label: '用户ID', prop: 'name' },
{ label: '用户名', prop: 'gender' },
{ label: 'Email', prop: 'phone' },
{ label: '手机', prop: 'work' },
{ label: '角色', prop: 'sound' },
{ label: '加入日期', prop: 'sound' }
],
data: [{ id: 1 }, { id: 2 }]
}
</script>
<template>
<AppCard title="基本信息">
<el-descriptions :column="4">
<el-descriptions-item label="渠道编号">123123</el-descriptions-item>
<el-descriptions-item label="渠道名称">哈哈哈</el-descriptions-item>
<el-descriptions-item label="状态">技术部</el-descriptions-item>
<el-descriptions-item label="渠道类型">-</el-descriptions-item>
<el-descriptions-item label="联络人">2</el-descriptions-item>
<el-descriptions-item label="联络微信">高职</el-descriptions-item>
<el-descriptions-item label="联络电话">-</el-descriptions-item>
<el-descriptions-item label="联络邮箱">2020-10-10</el-descriptions-item>
<el-descriptions-item label="开户名">郝屋撩</el-descriptions-item>
<el-descriptions-item label="开户行">2020-10-10</el-descriptions-item>
<el-descriptions-item label="银行账户">-</el-descriptions-item>
<el-descriptions-item label="企业税号">-</el-descriptions-item>
<el-descriptions-item label="企业税率">-</el-descriptions-item>
<el-descriptions-item label="注册地址">-</el-descriptions-item>
<el-descriptions-item label="创建时间">-</el-descriptions-item>
<el-descriptions-item label="更新时间">-</el-descriptions-item>
<el-descriptions-item label="法人身份证正面">-</el-descriptions-item>
<el-descriptions-item label="法人身份证背面">-</el-descriptions-item>
<el-descriptions-item label="营业执照">-</el-descriptions-item>
<el-descriptions-item label="渠道摘要">-</el-descriptions-item>
</el-descriptions>
</AppCard>
<AppCard title="项目信息">
<AppList v-bind="listOptions" ref="appList" style="padding: 0 15px"></AppList>
</AppCard>
<AppCard title="渠道成员信息">
<AppList v-bind="listOptions1" ref="appList" style="padding: 0 15px"></AppList>
</AppCard>
<AppCard title="渠道控制信息">
<el-descriptions :column="2">
<el-descriptions-item label="渠道质量">123123</el-descriptions-item>
<el-descriptions-item label="分配状态">哈哈哈</el-descriptions-item>
<el-descriptions-item label="回抽状态">技术部</el-descriptions-item>
<el-descriptions-item label="咨询框状态">-</el-descriptions-item>
</el-descriptions>
</AppCard>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
const echartsRef = ref()
onMounted(() => {
const myChart = echarts.init(echartsRef.value)
const option = {
title: {
text: '各系统数据比例分析',
x: 'center',
textStyle: {
color: '#dbbb95',
fontSize: 16
},
top: '45%'
},
legend: [
{
top: 'bottom',
x: 'center',
left: '20%',
orient: 'vertical',
data: [
{ value: 1048, name: 'ZWS客户' },
{ value: 735, name: '院校客户' },
{ value: 580, name: '渠道客户' }
] //水平排列。(vertical为垂直排列}}
},
{
x: 'center',
top: 'bottom',
orient: 'vertical',
left: '60%',
data: [
{ value: 484, name: '尘封客户' },
{ value: 300, name: '企微客户' },
{ value: 300, name: '小鹅通客户' }
] //水平排列。(vertical为垂直排列}}
}
],
series: [
{
bottom: '10%',
type: 'pie',
avoidLabelOverlap: true, //避免标签重叠
radius: ['55%', '90%'],
color: ['#DA7559', '#C33C62', '#4886B4', '#E3C475', '#E09966', '#4E9D8C'],
itemStyle: {
borderRadius: 1,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
position: 'inner', //将百分比显示在饼图内部
color: '#fff',
fontSize: '12',
formatter: '{d}%',
fontWeight: 'bold'
},
labelLine: {
show: true,
length: 48,
length2: 220,
lineStyle: {
color: '#adadad',
width: 2
}
},
data: [
{ value: 1048, name: 'ZWS客户' },
{ value: 735, name: '院校客户' },
{ value: 580, name: '渠道客户' },
{ value: 484, name: '尘封客户' },
{ value: 300, name: '企微客户' },
{ value: 300, name: '小鹅通客户' }
]
}
]
}
option && myChart.setOption(option)
})
</script>
<template>
<AppCard title="新增用户走势图">
<div
id="main"
ref="echartsRef"
:style="{
width: '100%',
height: '441px'
}"
></div>
</AppCard>
</template>
<style>
/* #main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} */
</style>
<script setup lang="ts">
const list = [
{
title: 'ZWS客户',
unit: 2,
num: '1111',
txt: '人',
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_user/zws.png'
},
{
title: '院校客户',
unit: 2,
num: '1111',
txt: '人',
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_user/school_customer.png'
},
{
title: '渠道客户',
unit: 2,
num: '1111',
txt: '人',
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_user/channel.png'
},
{
title: '尘峰客户',
unit: 2,
num: '1111',
txt: '人',
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_user/peak.png'
},
{
title: '企微客户',
unit: 2,
num: '1111',
txt: '人',
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_user/wechat.png'
},
{
title: '小鹅通客户',
unit: 2,
num: '1111',
txt: '人',
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_user/goose.png'
}
]
</script>
<template>
<div class="statistics-list">
<div class="item" v-for="(item, index) in list" :key="index">
<div class="item_desc">
<div class="tit">{{ item.title }}</div>
<div class="text">
<span class="text_num">{{ item.num }}</span>
<span class="text_txt">{{ item.txt }}</span>
</div>
</div>
<div class="icon">
<img :src="item.icon" alt="" />
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.statistics-list {
display: flex;
justify-content: space-around;
.item {
display: flex;
justify-content: space-between;
min-width: 15%;
height: 108px;
background: rgba(255, 255, 255, 0.39);
opacity: 1;
border-radius: 10px;
padding: 22px 14px 17px 17px;
box-sizing: border-box;
margin-right: 20px;
.item_desc {
display: flex;
flex-direction: column;
justify-content: space-between;
.tit {
font-size: 16px;
font-weight: 400;
color: #666666;
}
.text {
.text_num {
font-size: 26px;
}
.text_txt {
color: #999999;
font-size: 14px;
}
}
}
.icon {
width: 40px;
height: 40px;
align-self: flex-end;
}
}
.item:last-child {
.text_num {
color: #4e9d8c;
}
}
.item:nth-child(1) {
.text_num {
color: #da7559;
}
}
.item:nth-child(2) {
.text_num {
color: #c33c62;
}
}
.item:nth-child(3) {
.text_num {
color: #4886b4;
}
}
.item:nth-child(4) {
.text_num {
color: #e3c475;
}
}
.item:nth-child(5) {
.text_num {
color: #e09966;
}
}
}
</style>
<script setup lang="ts">
import * as echarts from 'echarts'
const echartsRef = ref()
onMounted(() => {
const myChart = echarts.init(echartsRef.value)
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#aa1941'
}
}
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
color: '#C33C62',
symbol: 'none',
areaStyle: {
color: '#C33C62',
opacity: 0.04
}
}
]
}
option && myChart.setOption(option)
})
</script>
<template>
<AppCard title="新增用户走势图">
<div
id="main"
ref="echartsRef"
:style="{
width: '100%',
height: '441px'
}"
></div>
</AppCard>
</template>
<script setup lang="ts"></script> <script setup lang="ts">
import Statistics from '../components/Statistics.vue'
import UserData from '../components/UserData.vue'
import Pie from '../components/Pie.vue'
</script>
<template> <template>
<AppCard title="首页"></AppCard> <Statistics />
<div class="main_bottom" style="">
<div class="bottom_left">
<UserData />
</div>
<div class="bottom_right"><Pie /></div>
</div>
</template> </template>
<style lang="scss" scoped>
.main_bottom {
display: flex;
margin-top: 20px;
.bottom_left {
width: 80%;
}
.bottom_right {
margin-left: 20px;
width: 40%;
}
}
</style>
import type { RouteRecordRaw } from 'vue-router'
import AppLayout from '@/components/layout/Index.vue'
export const routes: Array<RouteRecordRaw> = [
{
path: '/school/contact',
component: AppLayout,
children: [
{ path: '', component: () => import('./views/List.vue') },
{ path: '/school/contact/detail/:id', component: () => import('./views/View.vue'), props: true }
]
}
]
<script setup lang="ts">
// 列表配置
const listOptions = {
// remote: {
// httpRequest: getExperimentList,
// params: { name: '' }
// },
filters: [
{ type: 'input', prop: 'id', placeholder: '联系人姓名' },
{ type: 'input', prop: 'name', placeholder: '联系人手机号' },
{
type: 'select',
prop: 'nature',
placeholder: '联系人类型',
options: [
{
label: '院领导',
value: '0'
},
{
label: '院长',
value: '1'
}
]
},
{ type: 'input', prop: 'market', placeholder: '标题' },
{ type: 'input', prop: 'sale_before', placeholder: '大学/客户名称' },
{ type: 'input', prop: 'teach', placeholder: '所属学院' }
],
columns: [
{ label: '#', type: 'index' },
{ label: '标题', prop: 'id' },
{ label: '联系人姓名', prop: 'name' },
{ label: '联系人手机号', prop: 'nature' },
{ label: '所属学院', prop: 'department' },
{ label: '大学(客户名称)', prop: 'sale_step' },
{ label: '联系人类型', prop: ' master' },
{ label: '操作', slots: 'table-x', width: 100 }
],
data: [{ id: 1 }, { id: 2 }]
}
</script>
<template>
<AppCard title="联系人信息">
<AppList v-bind="listOptions" ref="appList">
<template #table-x="{ row }">
<el-button type="primary" link>
<router-link :to="`/school/contact/detail/${row.id}`" target="_blank">查看</router-link>
</el-button>
</template>
</AppList>
</AppCard>
</template>
<script setup lang="ts">
interface Props {
id: string
}
defineProps<Props>()
// function fetchInfo() {}
// onMounted(() => fetchInfo)
const activeName = ref('1')
// 列表配置
const listOptions = {
columns: [
{ label: '#', prop: 'id' },
{ label: '姓名', prop: 'name' },
{ label: '性别', prop: 'gender' },
{ label: '手机号', prop: 'phone' },
{ label: '职务', prop: 'work' },
{ label: '联系人类型', prop: 'sound' }
],
data: [{ id: 1 }, { id: 2 }]
}
</script>
<template>
<AppCard title="联系人信息">
<el-descriptions :column="4">
<el-descriptions-item label="姓名">123123</el-descriptions-item>
<el-descriptions-item label="联系人手机号">哈哈哈</el-descriptions-item>
<el-descriptions-item label="所属学院">技术部</el-descriptions-item>
<el-descriptions-item label="客户(所属大学)">-</el-descriptions-item>
<el-descriptions-item label="负责人">2</el-descriptions-item>
<el-descriptions-item label="联系人类型">高职</el-descriptions-item>
<el-descriptions-item label="所属部门">-</el-descriptions-item>
<el-descriptions-item label="微信号">2020-10-10</el-descriptions-item>
<el-descriptions-item label="邮箱">郝屋撩</el-descriptions-item>
<el-descriptions-item label="QQ">2020-10-10</el-descriptions-item>
<el-descriptions-item label="其他电话">-</el-descriptions-item>
<el-descriptions-item label="重大事件">-</el-descriptions-item>
<el-descriptions-item label="生日">-</el-descriptions-item>
<el-descriptions-item label="在任时间">-</el-descriptions-item>
<el-descriptions-item label="兴趣爱好">-</el-descriptions-item>
<el-descriptions-item label="重要特征">-</el-descriptions-item>
<el-descriptions-item label="教育/背景">-</el-descriptions-item>
<el-descriptions-item label="个人诉求">-</el-descriptions-item>
<el-descriptions-item label="收入情况">-</el-descriptions-item>
<el-descriptions-item label="子女情况">-</el-descriptions-item>
</el-descriptions>
</AppCard>
<AppCard>
<el-tabs v-model="activeName" class="demo-tabs">
<el-tab-pane :label="`项目1/商机信息1`" name="1"></el-tab-pane>
<el-tab-pane :label="`项目2/商机信息2`" name="2"></el-tab-pane>
<el-tab-pane :label="`项目3/商机信息3`" name="3"></el-tab-pane>
</el-tabs>
<div v-for="index in 3" :key="index" style="padding: 0 30px">
<el-descriptions :column="4" v-if="index === parseInt(activeName)">
<el-descriptions-item label="标题">标题{{ index }}</el-descriptions-item>
<el-descriptions-item label="项目名称">项目名称</el-descriptions-item>
<el-descriptions-item label="商机/编号">0041</el-descriptions-item>
<el-descriptions-item label="所属公海">-</el-descriptions-item>
<el-descriptions-item label="销售阶段">L3-洽谈</el-descriptions-item>
<el-descriptions-item label="所属分公司">-</el-descriptions-item>
<el-descriptions-item label="商机/类型">产业学院</el-descriptions-item>
<el-descriptions-item label="地址">北京</el-descriptions-item>
<el-descriptions-item label="市场">宁老师</el-descriptions-item>
<el-descriptions-item label="售前">-</el-descriptions-item>
<el-descriptions-item label="教研">-</el-descriptions-item>
<el-descriptions-item label="领取时间">2022-01-01</el-descriptions-item>
</el-descriptions>
</div>
</AppCard>
</template>
import type { RouteRecordRaw } from 'vue-router'
import AppLayout from '@/components/layout/Index.vue'
export const routes: Array<RouteRecordRaw> = [
{
path: '/school/project',
component: AppLayout,
children: [
{ path: '', component: () => import('./views/List.vue') },
{ path: '/school/project/detail/:id', component: () => import('./views/View.vue'), props: true }
]
}
]
<script setup lang="ts">
// 列表配置
const listOptions = {
// remote: {
// httpRequest: getExperimentList,
// params: { name: '' }
// },
filters: [
{ type: 'input', prop: 'id', placeholder: '标题' },
{ type: 'input', prop: 'name', placeholder: '商机/项目' },
{ type: 'input', prop: 'nature', placeholder: '商机/编号' },
{ type: 'select', prop: 'department', placeholder: '商机/类型' },
{ type: 'input', prop: 'market', placeholder: '市场' },
{ type: 'input', prop: 'sale_before', placeholder: '售前' },
{ type: 'input', prop: 'teach', placeholder: '教研' },
{ type: 'select', prop: 'sale_step', placeholder: '销售阶段' }
],
columns: [
{ label: '标题', prop: 'id' },
{ label: '商机/项目', prop: 'name' },
{ label: '商机/编号', prop: 'nature' },
{ label: '商机/类型', prop: 'department' },
{ label: '销售阶段', prop: 'sale_step' },
{ label: '市场', prop: ' master' },
{ label: '售前', prop: 'created_time' },
{ label: '教研', prop: 'created_time' },
{ label: '创建时间', prop: 'created_time' },
{ label: '更新时间', prop: 'updated_time' },
{ label: '操作', slots: 'table-x', width: 100 }
],
data: [{ id: 1 }, { id: 2 }]
}
</script>
<template>
<AppCard title="项目信息">
<AppList v-bind="listOptions" ref="appList">
<template #table-x="{ row }">
<el-button type="primary" link>
<router-link :to="`/school/project/detail/${row.id}`" target="_blank">查看</router-link>
</el-button>
</template>
</AppList>
</AppCard>
</template>
<script setup lang="ts">
interface Props {
id: string
}
defineProps<Props>()
// function fetchInfo() {}
// onMounted(() => fetchInfo)
const activeName = ref('1')
// 列表配置
const listOptions = {
columns: [
{ label: '#', prop: 'id' },
{ label: '姓名', prop: 'name' },
{ label: '性别', prop: 'gender' },
{ label: '手机号', prop: 'phone' },
{ label: '职务', prop: 'work' },
{ label: '联系人类型', prop: 'sound' }
],
data: [{ id: 1 }, { id: 2 }]
}
</script>
<template>
<AppCard>
<el-tabs v-model="activeName" class="demo-tabs">
<el-tab-pane label="项目1" name="1"></el-tab-pane>
<el-tab-pane label="项目2" name="2"></el-tab-pane>
<el-tab-pane label="项目3" name="3"></el-tab-pane>
</el-tabs>
<div v-for="index in 3" :key="index" style="padding: 0 30px">
<el-descriptions :column="4" v-if="index === parseInt(activeName)">
<el-descriptions-item label="标题">标题{{ index }}</el-descriptions-item>
<el-descriptions-item label="商机/项目">0041</el-descriptions-item>
<el-descriptions-item label="商机/编号">0041</el-descriptions-item>
<el-descriptions-item label="所属公海">-</el-descriptions-item>
<el-descriptions-item label="销售阶段">L3-洽谈</el-descriptions-item>
<el-descriptions-item label="所属分公司">-</el-descriptions-item>
<el-descriptions-item label="商机/类型">产业学院</el-descriptions-item>
<el-descriptions-item label="地址">北京</el-descriptions-item>
<el-descriptions-item label="市场">宁老师</el-descriptions-item>
<el-descriptions-item label="售前">-</el-descriptions-item>
<el-descriptions-item label="教研">-</el-descriptions-item>
<el-descriptions-item label="创建时间">2022-01-01</el-descriptions-item>
</el-descriptions>
</div>
<div class="title" style="margin-top: 15px">决策人</div>
<AppList v-bind="listOptions" ref="appList" style="padding: 0 15px"></AppList>
</AppCard>
<AppCard title="申请信息">
<AppList v-bind="listOptions" ref="appList"></AppList>
</AppCard>
</template>
...@@ -5,15 +5,22 @@ const listOptions = { ...@@ -5,15 +5,22 @@ const listOptions = {
// httpRequest: getExperimentList, // httpRequest: getExperimentList,
// params: { name: '' } // params: { name: '' }
// }, // },
filters: [{ type: 'input', prop: 'name', label: '实验名称', placeholder: '请输入实验名称' }], filters: [
{ type: 'input', prop: 'id', placeholder: '客户编号' },
{ type: 'input', prop: 'name', placeholder: '客户名称' },
{ type: 'input', prop: 'nature', placeholder: '院校性质' },
{ type: 'select', prop: 'department', placeholder: '归属部门' },
{ type: 'input', prop: 'master', placeholder: '负责人' },
{ type: 'input', prop: 'origin', placeholder: '客户来源' }
],
columns: [ columns: [
{ label: '客户编号', prop: 'course_name' }, { label: '客户编号', prop: 'id' },
{ label: '客户名称', prop: 'name' }, { label: '客户名称', prop: 'name' },
{ label: '院校性质', prop: 'length' }, { label: '院校性质', prop: 'nature' },
{ label: '归属部门', prop: 'teacher_names' }, { label: '归属部门', prop: 'department' },
{ label: '客户来源', prop: 'type_name' }, { label: '客户来源', prop: 'origin' },
{ label: '负责人', prop: 'score' }, { label: '负责人', prop: ' master' },
{ label: '创建时间', prop: 'updated_operator_name' }, { label: '创建时间', prop: 'created_time' },
{ label: '更新时间', prop: 'updated_time' }, { label: '更新时间', prop: 'updated_time' },
{ label: '操作', slots: 'table-x', width: 100 } { label: '操作', slots: 'table-x', width: 100 }
], ],
......
...@@ -4,9 +4,6 @@ interface Props { ...@@ -4,9 +4,6 @@ interface Props {
} }
defineProps<Props>() defineProps<Props>()
// function fetchInfo() {}
// onMounted(() => fetchInfo)
const activeName = ref('1') const activeName = ref('1')
// 列表配置 // 列表配置
const listOptions = { const listOptions = {
...@@ -20,6 +17,18 @@ const listOptions = { ...@@ -20,6 +17,18 @@ const listOptions = {
], ],
data: [{ id: 1 }, { id: 2 }] data: [{ id: 1 }, { id: 2 }]
} }
const editableTabs = ref([
{
title: 'Tab 1',
name: '1',
content: 'Tab 1 content'
},
{
title: 'Tab 2',
name: '2',
content: 'Tab 2 content'
}
])
</script> </script>
<template> <template>
...@@ -41,13 +50,14 @@ const listOptions = { ...@@ -41,13 +50,14 @@ const listOptions = {
</AppCard> </AppCard>
<AppCard> <AppCard>
<el-tabs v-model="activeName" class="demo-tabs"> <el-tabs v-model="activeName" class="demo-tabs">
<el-tab-pane label="项目1" name="1"></el-tab-pane> <el-tab-pane
<el-tab-pane label="项目2" name="2"></el-tab-pane> v-for="(item, index) in editableTabs"
<el-tab-pane label="项目3" name="3"></el-tab-pane> :key="index"
</el-tabs> :label="`项目${index + 1}/商机信息${index + 1}`"
<div v-for="index in 3" :key="index" style="padding: 0 30px;"> :name="item.name"
<el-descriptions :column="4" v-if="index === parseInt(activeName)"> >
<el-descriptions-item label="标题">标题{{ index }}</el-descriptions-item> <el-descriptions>
<el-descriptions-item label="标题">标题{{ item.name }} </el-descriptions-item>
<el-descriptions-item label="项目名称">项目名称</el-descriptions-item> <el-descriptions-item label="项目名称">项目名称</el-descriptions-item>
<el-descriptions-item label="商机/编号">0041</el-descriptions-item> <el-descriptions-item label="商机/编号">0041</el-descriptions-item>
<el-descriptions-item label="所属公海">-</el-descriptions-item> <el-descriptions-item label="所属公海">-</el-descriptions-item>
...@@ -60,9 +70,11 @@ const listOptions = { ...@@ -60,9 +70,11 @@ const listOptions = {
<el-descriptions-item label="教研">-</el-descriptions-item> <el-descriptions-item label="教研">-</el-descriptions-item>
<el-descriptions-item label="领取时间">2022-01-01</el-descriptions-item> <el-descriptions-item label="领取时间">2022-01-01</el-descriptions-item>
</el-descriptions> </el-descriptions>
</div> <div class="title" style="margin-top: 15px">决策人</div>
<div class="title" style="margin-top: 15px;">决策人</div> <AppList v-bind="listOptions" ref="appList" style="padding: 0 15px"></AppList>
<AppList v-bind="listOptions" ref="appList" style="padding: 0 15px;"></AppList> </el-tab-pane>
</el-tabs>
<!-- <div v-for="index in 3" :key="index" style="padding: 0 30px"> -->
</AppCard> </AppCard>
<AppCard title="申请信息"> <AppCard title="申请信息">
<AppList v-bind="listOptions" ref="appList"></AppList> <AppList v-bind="listOptions" ref="appList"></AppList>
......
...@@ -6,8 +6,8 @@ export const routes: Array<RouteRecordRaw> = [ ...@@ -6,8 +6,8 @@ export const routes: Array<RouteRecordRaw> = [
path: '/user/all', path: '/user/all',
component: AppLayout, component: AppLayout,
children: [ children: [
{ path: '', component: () => import('./views/List.vue') }, { path: '', component: () => import('./views/List.vue') }
{ path: ':id', component: () => import('./views/View.vue'), props: true } // { path: ':id', component: () => import('./views/View.vue'), props: true }
] ]
} }
] ]
<script setup lang="ts"> <script setup lang="ts">
const isShowPickDialog = ref(false)
// 列表配置 // 列表配置
const listOptions = { const listOptions = {
// remote: { remote: {
// httpRequest: getExperimentList, // httpRequest: getExperimentList,
// params: { name: '' } params: { timeRange: '', project_name: '', origin: '', name: '', email: '', mobile: '' }
// }, },
filters: [{ type: 'input', prop: 'name', label: '实验名称', placeholder: '请输入实验名称' }], filters: [
{
type: 'input',
slots: 'timeRange',
prop: 'timeRange'
},
{
type: 'select',
prop: 'project_name',
options: [
{ label: '玛丽伍德', value: '0' },
{ label: 'DBA', value: '1' },
{ label: '石溪', value: '2' },
{ label: '心理学', value: '3' }
],
placeholder: '所在项目'
},
{
type: 'select',
prop: 'origin',
options: [
{ label: 'ZWS', value: '0' },
{ label: '企微', value: '1' },
{ label: '尘峰', value: '2' },
{ label: '小鹅通', value: '3' }
],
placeholder: '用户来源'
},
{
type: 'input',
prop: 'name',
placeholder: '用户姓名'
},
{
type: 'input',
prop: 'email',
placeholder: '邮箱'
},
{
type: 'input',
prop: 'mobile',
placeholder: '联系电话'
}
],
columns: [ columns: [
{ label: '用户姓名', prop: 'course_name' }, { label: '用户姓名', prop: 'name' },
{ label: '联系电话', prop: 'name' }, { label: '联系电话', prop: 'mobile' },
{ label: '邮箱', prop: 'length' }, { label: '邮箱', prop: 'email' },
{ label: '所在项目', prop: 'teacher_names' }, { label: '所在项目', prop: 'project_name' },
{ label: '申请状态', prop: 'type_name' }, { label: '用户来源', prop: 'user_origin' },
{ label: '销售代表', prop: 'score' }, { label: '创建时间', prop: 'created_time' },
{ label: '用户来源', prop: 'updated_operator_name' },
{ label: '公司', prop: 'updated_time' },
{ label: '创建时间', prop: 'updated_time' },
{ label: '操作', slots: 'table-x', width: 100 } { label: '操作', slots: 'table-x', width: 100 }
], ],
data: [{ id: 1 }, { id: 2 }] data: [{ name: 1 }, { name: 2 }]
} }
const shortcuts = [
{
text: '今日',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(new Date(new Date().toLocaleDateString()).getTime())
return [start, end.setHours(23, 59, 59, 999)]
}
},
{
text: '昨日',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '本周',
value: () => {
// let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const end = new Date()
const start = new Date()
console.log(start.getDay())
start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDay() - 1))
return [start.setHours(0, 0, 0, 0), end]
}
},
{
text: '上周',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDay() + 6))
end.setTime(end.getTime() - 3600 * 1000 * 24 * end.getDay())
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去7天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去14天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去30天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去60天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 60)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去90天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去180天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
}
]
</script> </script>
<template> <template>
<AppCard title="全部学员信息"> <AppCard title="全部学员信息">
<AppList v-bind="listOptions" ref="appList"> <AppList v-bind="listOptions" ref="appList">
<template v-slot:timeRange="{ params }">
<el-date-picker
v-model="params.timeRange"
type="datetimerange"
:shortcuts="shortcuts"
range-separator="To"
start-placeholder="创建开始时间"
end-placeholder="创建结束时间"
/>
</template>
<template #table-x="{ row }"> <template #table-x="{ row }">
<el-button type="primary" link> <el-button type="primary" link>
<router-link :to="`/user/all/${row.id}`" target="_blank">查看</router-link> <router-link :to="`/user/all/${row.id}`" target="_blank">查看</router-link>
......
<script setup lang="ts">
interface Props {
id: string
}
defineProps<Props>()
// function fetchInfo() {}
// onMounted(() => fetchInfo)
</script>
<template>
<AppCard title="基本信息">
<el-descriptions>
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
</el-descriptions>
</AppCard>
<AppCard title="状态信息"> </AppCard>
<AppCard title="申请信息"> </AppCard>
</template>
import type { RouteRecordRaw } from 'vue-router'
import AppLayout from '@/components/layout/Index.vue'
export const routes: Array<RouteRecordRaw> = [
{
path: '/user/xiaoetong',
component: AppLayout,
children: [
{ path: '', component: () => import('./views/List.vue') },
{ path: '/user/xiaoetong/detail/:id', component: () => import('./views/View.vue'), props: true }
]
}
]
<script setup lang="ts">
const shortcuts = [
{
text: '今日',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(new Date(new Date().toLocaleDateString()).getTime())
return [start, end.setHours(23, 59, 59, 999)]
}
},
{
text: '昨日',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '本周',
value: () => {
// let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const end = new Date()
const start = new Date()
console.log(start.getDay())
start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDay() - 1))
return [start.setHours(0, 0, 0, 0), end]
}
},
{
text: '上周',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDay() + 6))
end.setTime(end.getTime() - 3600 * 1000 * 24 * end.getDay())
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去7天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去14天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去30天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去60天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 60)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去90天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去180天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
}
]
// 列表配置
const listOptions = {
remote: {
// httpRequest: getExperimentList,
params: { timeRange: '', project_name: '', origin: '', name: '', email: '', mobile: '' }
},
filters: [
{
type: 'input',
slots: 'createTime',
prop: 'createTime'
},
{
type: 'input',
prop: 'name',
placeholder: '联系电话'
},
{
type: 'input',
prop: 'nickname',
placeholder: '用户ID'
},
{
type: 'input',
prop: 'remark',
placeholder: '微信号'
},
{
type: 'input',
prop: 'mobile',
placeholder: '用户姓名'
},
{
type: 'select',
prop: 'email',
placeholder: '地区'
},
{
type: 'input',
prop: 'email',
placeholder: '公司'
},
{
type: 'input',
prop: 'email',
placeholder: '邮箱'
},
{
type: 'select',
prop: 'origin',
options: [
{ label: '玛丽伍德', value: '0' },
{ label: 'DBA', value: '1' },
{ label: '石溪', value: '2' },
{ label: '心理学', value: '3' }
],
placeholder: '来源'
},
// 与所在项目进行联动
{
type: 'select',
prop: 'representative',
placeholder: '销售代表',
options: [
{ label: '玛丽伍德', value: '0' },
{ label: 'DBA', value: '1' },
{ label: '石溪', value: '2' },
{ label: '心理学', value: '3' }
]
}
],
columns: [
{ label: '用户姓名', prop: 'name' },
{ label: '联系电话', prop: 'mobile' },
{ label: '邮箱', prop: 'email' },
{ label: '微信号', prop: 'email' },
{ label: '公司', prop: 'project_name' },
{ label: '销售代表', prop: 'representative' },
{ label: '地区', prop: 'channel' },
{ label: '创建时间', prop: 'created_times' },
{ label: '操作', slots: 'table-x', width: 100 }
],
data: [{ id: 1 }, { id: 2 }]
}
</script>
<template>
<AppCard title="小鹅通客户">
<AppList v-bind="listOptions" ref="appList">
<template v-slot:createTime="{ params }">
<el-date-picker
v-model="params.createTime"
type="datetimerange"
start-placeholder="创建开始时间"
end-placeholder="创建结束时间"
value-format="yyyy-MM-dd HH-mm-ss"
:shortcuts="shortcuts"
/>
</template>
<template #table-x="{ row }">
<el-button type="primary" link>
<router-link :to="`/user/xiaoetong/detail/${row.id}`" target="_blank">查看</router-link>
</el-button>
</template>
</AppList>
</AppCard>
</template>
<script setup lang="ts">
defineProps<Props>()
interface Props {
id: string
}
interface IInfoList {
name: string
nickname: string
remark: string
mobile: string
company: string
email: string
addPeople: string
department: string
created_time: string
origin: string
}
const infoList = ref<IInfoList[]>([
{
name: '111',
nickname: '111',
remark: '111',
mobile: '111',
company: '111',
email: '111',
addPeople: '111',
department: '111',
created_time: '111',
origin: '111'
}
])
</script>
<template>
<el-row justify="end">
<el-button type="primary">尘峰渠道</el-button>
<el-button type="primary">企微渠道</el-button>
<el-button type="primary">ZWS渠道</el-button>
</el-row>
<div v-for="(item, index) in infoList" :key="index" style="margin-top: 20px">
<AppCard title="基本信息">
<el-descriptions :column="4">
<el-descriptions-item label="用户姓名">{{ item.name }}</el-descriptions-item>
<el-descriptions-item label="联系电话">{{ item.mobile }}</el-descriptions-item>
<el-descriptions-item label="微信号">{{ item.nickname }}</el-descriptions-item>
<el-descriptions-item label="用户ID">{{ item.remark }}</el-descriptions-item>
<el-descriptions-item label="真实姓名">{{ item.company }}</el-descriptions-item>
<el-descriptions-item label="邮箱">{{ item.email }}</el-descriptions-item>
<el-descriptions-item label="销售代表">{{ item.addPeople }}</el-descriptions-item>
<el-descriptions-item label="企业名称">{{ item.department }}</el-descriptions-item>
<el-descriptions-item label="行业">{{ item.created_time }}</el-descriptions-item>
<el-descriptions-item label="地址">{{ item.origin }}</el-descriptions-item>
<el-descriptions-item label="地区">{{ item.origin }}</el-descriptions-item>
<el-descriptions-item label="职位">{{ item.origin }}</el-descriptions-item>
<el-descriptions-item label="年龄">{{ item.origin }}</el-descriptions-item>
<el-descriptions-item label="生日">{{ item.origin }}</el-descriptions-item>
<el-descriptions-item label="性别">{{ item.origin }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ item.origin }}</el-descriptions-item>
<el-descriptions-item label="备注">{{ item.origin }}</el-descriptions-item>
</el-descriptions>
</AppCard>
</div>
</template>
import type { RouteRecordRaw } from 'vue-router'
import AppLayout from '@/components/layout/Index.vue'
export const routes: Array<RouteRecordRaw> = [
{
path: '/user/chenfeng',
component: AppLayout,
children: [
{ path: '', component: () => import('./views/List.vue') },
{ path: '/user/chenfeng/detail/:id', component: () => import('./views/View.vue'), props: true }
]
}
]
<script setup lang="ts">
const shortcuts = [
{
text: '今日',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(new Date(new Date().toLocaleDateString()).getTime())
return [start, end.setHours(23, 59, 59, 999)]
}
},
{
text: '昨日',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '本周',
value: () => {
// let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const end = new Date()
const start = new Date()
console.log(start.getDay())
start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDay() - 1))
return [start.setHours(0, 0, 0, 0), end]
}
},
{
text: '上周',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDay() + 6))
end.setTime(end.getTime() - 3600 * 1000 * 24 * end.getDay())
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去7天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去14天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去30天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去60天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 60)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去90天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去180天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
}
]
// 列表配置
const listOptions = {
remote: {
// httpRequest: getExperimentList,
params: { timeRange: '', project_name: '', origin: '', name: '', email: '', mobile: '' }
},
filters: [
{
type: 'input',
slots: 'createTime',
prop: 'createTime'
},
{
type: 'input',
prop: 'name',
placeholder: '用户姓名'
},
{
type: 'input',
prop: 'mobile',
placeholder: '电话'
},
{
type: 'input',
prop: 'email',
placeholder: '邮箱'
},
// 与所在项目进行联动
{
type: 'input',
prop: 'company_name',
placeholder: '公司'
},
{
type: 'select',
prop: 'company_name',
placeholder: '来源',
options: [
{ label: '社交推广', value: '0' },
{ label: '搜索引擎', value: '1' },
{ label: '客户介绍', value: '2' },
{ label: '个人开发', value: '3' },
{ label: '市场商机', value: '4' },
{ label: '其他', value: '5' },
{ label: '广告', value: '6' }
]
},
{
type: 'input',
prop: 'created_by',
placeholder: '创建人'
},
{
type: 'select',
prop: 'representative',
placeholder: '销售代表'
}
],
columns: [
{ label: '用户姓名', prop: 'name' },
{ label: '联系电话', prop: 'mobile' },
{ label: '邮箱', prop: 'email' },
{ label: '公司', prop: 'company_name' },
{ label: '创建人', prop: 'created_by' },
{ label: '销售代表', prop: 'representative' },
{ label: '来源', prop: 'origin' },
{ label: '创建时间', prop: 'created_time' },
{ label: '操作', slots: 'table-x', width: 100 }
],
data: [{ name: 1 }, { name: 2 }]
}
</script>
<template>
<AppCard title="尘峰客户">
<AppList v-bind="listOptions" ref="appList">
<template v-slot:createTime="{ params }">
<el-date-picker
v-model="params.createTime"
type="datetimerange"
start-placeholder="创建开始时间"
end-placeholder="创建结束时间"
value-format="yyyy-MM-dd HH-mm-ss"
:shortcuts="shortcuts"
/>
</template>
<template #table-x="{ row }">
<el-button type="primary" link>
<router-link :to="`/user/chenfeng/detail/${row.id}`" target="_blank">查看</router-link>
</el-button>
</template>
</AppList>
</AppCard>
</template>
<script setup lang="ts">
defineProps<Props>()
interface Props {
id: string
}
interface IInfoList {
name: string
nickname: string
remark: string
mobile: string
company: string
email: string
addPeople: string
department: string
created_time: string
origin: string
}
const infoList = ref<IInfoList[]>([
{
name: '111',
nickname: '111',
remark: '111',
mobile: '111',
company: '111',
email: '111',
addPeople: '111',
department: '111',
created_time: '111',
origin: '111'
}
])
</script>
<template>
<el-row justify="end">
<el-button type="primary">尘峰渠道</el-button>
<el-button type="primary">企微渠道</el-button>
<el-button type="primary">ZWS渠道</el-button>
</el-row>
<div v-for="(item, index) in infoList" :key="index" style="margin-top: 20px">
<AppCard :title="`基本信息${index + 1}`">
<el-descriptions :column="4">
<el-descriptions-item label="用户姓名">{{ item.name }}</el-descriptions-item>
<el-descriptions-item label="联系电话">{{ item.mobile }}</el-descriptions-item>
<el-descriptions-item label="性别">{{ item.nickname }}</el-descriptions-item>
<el-descriptions-item label="邮箱">{{ item.remark }}</el-descriptions-item>
<el-descriptions-item label="来源">{{ item.company }}</el-descriptions-item>
<el-descriptions-item label="公司">{{ item.email }}</el-descriptions-item>
<el-descriptions-item label="职务">{{ item.addPeople }}</el-descriptions-item>
<el-descriptions-item label="生日">{{ item.department }}</el-descriptions-item>
<el-descriptions-item label="销售代表">{{ item.created_time }}</el-descriptions-item>
<el-descriptions-item label="创建人">{{ item.origin }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ item.origin }}</el-descriptions-item>
<el-descriptions-item></el-descriptions-item>
<el-descriptions-item label="备注">{{ item.origin }}</el-descriptions-item>
</el-descriptions>
</AppCard>
</div>
</template>
import type { RouteRecordRaw } from 'vue-router'
import AppLayout from '@/components/layout/Index.vue'
export const routes: Array<RouteRecordRaw> = [
{
path: '/user/weixin',
component: AppLayout,
children: [
{ path: '', component: () => import('./views/List.vue') },
{ path: '/user/weixin/detail/:id', component: () => import('./views/View.vue'), props: true }
]
}
]
<script setup lang="ts">
const shortcuts = [
{
text: '今日',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(new Date(new Date().toLocaleDateString()).getTime())
return [start, end.setHours(23, 59, 59, 999)]
}
},
{
text: '昨日',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '本周',
value: () => {
// let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const end = new Date()
const start = new Date()
console.log(start.getDay())
start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDay() - 1))
return [start.setHours(0, 0, 0, 0), end]
}
},
{
text: '上周',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDay() + 6))
end.setTime(end.getTime() - 3600 * 1000 * 24 * end.getDay())
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去7天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去14天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去30天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去60天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 60)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去90天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去180天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
}
]
// 列表配置
const listOptions = {
remote: {
// httpRequest: getExperimentList,
params: { timeRange: '', project_name: '', origin: '', name: '', email: '', mobile: '' }
},
filters: [
{
type: 'input',
slots: 'createTime',
prop: 'createTime'
},
{
type: 'input',
prop: 'nickname',
placeholder: '微信昵称'
},
{
type: 'input',
prop: 'company_name',
placeholder: '公司'
},
{
type: 'input',
prop: 'remark',
placeholder: '备注名'
},
{
type: 'input',
prop: 'mobile',
placeholder: '联系电话'
},
{
type: 'select',
prop: 'project_name',
options: [
{ label: '玛丽伍德', value: '0' },
{ label: 'DBA', value: '1' },
{ label: '石溪', value: '2' },
{ label: '心理学', value: '3' }
],
placeholder: '来源'
},
{
type: 'input',
prop: 'email',
placeholder: '添加人'
},
{
type: 'select',
prop: 'department',
options: [
{ label: '渠道部', value: '0' },
{ label: '售前部', value: '1' }
],
placeholder: '添加人所在部门'
},
{
type: 'select',
prop: 'company_label',
options: [
{ label: '玛丽伍德', value: '0' },
{ label: 'DBA', value: '1' },
{ label: '石溪', value: '2' },
{ label: '心理学', value: '3' }
],
placeholder: '企业标签'
}
],
columns: [
{ label: '微信昵称', prop: 'name' },
{ label: '联系电话', prop: 'mobile' },
{ label: '来源', prop: 'origin' },
{ label: '公司', prop: 'company_name' },
{ label: '添加人', prop: 'add' },
{ label: '添加人所在部门', prop: 'department' },
{ label: '创建时间', prop: 'created_times' },
{ label: '操作', slots: 'table-x', width: 100 }
],
data: [{ id: 1 }, { id: 2 }]
}
</script>
<template>
<AppCard title="企微客户">
<AppList v-bind="listOptions" ref="appList">
<template v-slot:createTime="{ params }">
<el-date-picker
v-model="params.createTime"
type="datetimerange"
start-placeholder="创建开始时间"
end-placeholder="创建结束时间"
value-format="yyyy-MM-dd HH-mm-ss"
:shortcuts="shortcuts"
/>
</template>
<template #table-x="{ row }">
<el-button type="primary" link>
<router-link :to="`/user/weixin/detail/${row.id}`" target="_blank">查看</router-link>
</el-button>
</template>
</AppList>
</AppCard>
</template>
<script setup lang="ts">
defineProps<Props>()
interface Props {
id: string
}
interface IInfoList {
name: string
nickname: string
remark: string
mobile: string
company: string
email: string
addPeople: string
department: string
created_time: string
origin: string
}
const infoList = ref<IInfoList[]>([
{
nickname: '1121',
origin: 'kkk',
remark: '222',
mobile: '222',
company: '22',
email: '22',
addPeople: '22',
department: '22',
created_time: '2'
},
{
nickname: '1121',
origin: 'kkk',
remark: '222',
mobile: '222',
company: '22',
email: '22',
addPeople: '22',
department: '22',
created_time: '2'
}
])
</script>
<template>
<el-row justify="end">
<el-button type="primary">尘峰渠道</el-button>
<el-button type="primary">小鹅通渠道</el-button>
<el-button type="primary">ZWS渠道</el-button>
</el-row>
<div v-for="(item, index) in infoList" :key="index" style="margin-top: 20px">
<AppCard :title="`基本信息${index + 1}`">
<el-descriptions :column="4">
<el-descriptions-item label="微信昵称">{{ item.nickname }}</el-descriptions-item>
<el-descriptions-item label="来源">{{ item.origin }}</el-descriptions-item>
<el-descriptions-item label="备注名">{{ item.remark }}</el-descriptions-item>
<el-descriptions-item label="联系电话">{{ item.mobile }}</el-descriptions-item>
<el-descriptions-item label="公司">{{ item.company }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ item.created_time }}</el-descriptions-item>
<el-descriptions-item label="添加人">{{ item.addPeople }}</el-descriptions-item>
<el-descriptions-item label="添加人所在部门">{{ item.department }}</el-descriptions-item>
</el-descriptions>
</AppCard>
<AppCard :title="`企业信息${index + 1}`">
<el-descriptions :column="1">
<el-descriptions-item label="酒店高管">百度渠道 百度渠道 百度渠道</el-descriptions-item>
<el-descriptions-item label="分公司">留咨 留咨 留咨</el-descriptions-item>
</el-descriptions>
</AppCard>
</div>
</template>
<script setup lang="ts"> <script setup lang="ts">
const shortcuts = [
{
text: '今日',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(new Date(new Date().toLocaleDateString()).getTime())
return [start, end.setHours(23, 59, 59, 999)]
}
},
{
text: '昨日',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '本周',
value: () => {
// let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const end = new Date()
const start = new Date()
console.log(start.getDay())
start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDay() - 1))
return [start.setHours(0, 0, 0, 0), end]
}
},
{
text: '上周',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDay() + 6))
end.setTime(end.getTime() - 3600 * 1000 * 24 * end.getDay())
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去7天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去14天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去30天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去60天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 60)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去90天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
},
{
text: '过去180天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
return [start.setHours(0, 0, 0, 0), end.setHours(23, 59, 59, 999)]
}
}
]
// 列表配置 // 列表配置
const listOptions = { const listOptions = {
// remote: { remote: {
// httpRequest: getExperimentList, // httpRequest: getExperimentList,
// params: { name: '' } params: { timeRange: '', project_name: '', origin: '', name: '', email: '', mobile: '' }
// }, },
filters: [{ type: 'input', prop: 'name', label: '实验名称', placeholder: '请输入实验名称' }], filters: [
{
type: 'input',
slots: 'createTime',
prop: 'createTime'
},
{
type: 'input',
slots: 'updatedTime',
prop: 'updatedTime'
},
{
type: 'select',
prop: 'apply_status',
options: [{ label: '通过面试', value: '0' }],
placeholder: '申请状态'
},
{
type: 'select',
prop: 'project_name',
options: [
{ label: '玛丽伍德', value: '0' },
{ label: 'DBA', value: '1' },
{ label: '石溪', value: '2' },
{ label: '心理学', value: '3' }
],
placeholder: '所在项目'
},
{
type: 'input',
prop: 'name',
placeholder: '用户姓名'
},
{
type: 'input',
prop: 'email',
placeholder: '邮箱'
},
{
type: 'input',
prop: 'mobile',
placeholder: '联系电话'
},
{
type: 'input',
prop: 'representative',
placeholder: '销售代表'
},
// 与所在项目进行联动
{
type: 'select',
prop: 'mobile',
placeholder: '所属渠道',
options: [
{ label: 'ZWS', value: '0' },
{ label: '企微', value: '1' },
{ label: '尘峰', value: '2' },
{ label: '小鹅通', value: '3' }
]
}
],
columns: [ columns: [
{ label: '用户姓名', prop: 'course_name' }, { label: '用户姓名', prop: 'name' },
{ label: '联系电话', prop: 'name' }, { label: '联系电话', prop: 'mobile' },
{ label: '邮箱', prop: 'length' }, { label: '邮箱', prop: 'email' },
{ label: '所在项目', prop: 'teacher_names' }, { label: '所在项目', prop: 'project_name' },
{ label: '申请状态', prop: 'type_name' }, { label: '申请状态', prop: 'apply_status' },
{ label: '销售代表', prop: 'score' }, { label: '销售代表', prop: 'representative' },
{ label: '所属渠道', prop: 'updated_operator_name' }, { label: '所属渠道', prop: 'channel' },
{ label: '创建时间', prop: 'c_time' }, { label: '创建时间', prop: 'created_times' },
{ label: '更新时间', prop: 'updated_time' }, { label: '更新时间', prop: 'updated_time' },
{ label: '操作', slots: 'table-x', width: 100 } { label: '操作', slots: 'table-x', width: 100 }
], ],
...@@ -22,8 +178,28 @@ const listOptions = { ...@@ -22,8 +178,28 @@ const listOptions = {
} }
</script> </script>
<template> <template>
<AppCard title="全部学员信息"> <AppCard title="ZWS学员信息">
<AppList v-bind="listOptions" ref="appList"> <AppList v-bind="listOptions" ref="appList">
<template v-slot:createTime="{ params }">
<el-date-picker
v-model="params.createTime"
type="datetimerange"
:shortcuts="shortcuts"
range-separator="To"
start-placeholder="创建开始时间"
end-placeholder="创建结束时间"
/>
</template>
<template v-slot:updatedTime="{ params }">
<el-date-picker
v-model="params.updatedTime"
type="datetimerange"
:shortcuts="shortcuts"
range-separator="To"
start-placeholder="创建开始时间"
end-placeholder="创建结束时间"
/>
</template>
<template #table-x="{ row }"> <template #table-x="{ row }">
<el-button type="primary" link> <el-button type="primary" link>
<router-link :to="`/user/zws/${row.id}`" target="_blank">查看</router-link> <router-link :to="`/user/zws/${row.id}`" target="_blank">查看</router-link>
......
...@@ -22,7 +22,12 @@ const listOptions = { ...@@ -22,7 +22,12 @@ const listOptions = {
</script> </script>
<template> <template>
<AppCard title="基本信息"> <el-row justify="end">
<el-button type="primary">尘峰渠道</el-button>
<el-button type="primary">小鹅通渠道</el-button>
<el-button type="primary">企微渠道</el-button>
</el-row>
<AppCard title="基本信息" style="margin-top: 20px">
<el-descriptions :column="4"> <el-descriptions :column="4">
<el-descriptions-item label="用户姓名">哈哈哈</el-descriptions-item> <el-descriptions-item label="用户姓名">哈哈哈</el-descriptions-item>
<el-descriptions-item label="性别"></el-descriptions-item> <el-descriptions-item label="性别"></el-descriptions-item>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论