Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
 guoxubao
|
598bb596f1 |
|
|
@ -16,6 +16,7 @@
|
|||
"dependencies": {
|
||||
"axios": "0.18.1",
|
||||
"core-js": "3.6.5",
|
||||
"echarts": "^5.4.3",
|
||||
"element-ui": "2.13.2",
|
||||
"js-cookie": "2.2.0",
|
||||
"normalize.css": "7.0.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function list(data) {
|
||||
return request({
|
||||
url: '/formation/list',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function deletes(formationId) {
|
||||
return request({
|
||||
url: '/formation/deletes?formationId='+formationId,
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
|
||||
export function insert(data) {
|
||||
return request({
|
||||
url: '/formation/insert',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function update(data) {
|
||||
return request({
|
||||
url: '/formation/update',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function zhu() {
|
||||
return request({
|
||||
url: '/formation/zhu',
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function treeList(data) {
|
||||
return request({
|
||||
url: '/trees/trees',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
@ -55,27 +55,27 @@ export const constantRoutes = [
|
|||
}]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/example',
|
||||
component: Layout,
|
||||
redirect: '/example/table',
|
||||
name: 'Example',
|
||||
meta: { title: 'Example', icon: 'el-icon-s-help' },
|
||||
children: [
|
||||
{
|
||||
path: 'table',
|
||||
name: 'Table',
|
||||
component: () => import('@/views/table/index'),
|
||||
meta: { title: 'Table', icon: 'table' }
|
||||
},
|
||||
{
|
||||
path: 'tree',
|
||||
name: 'Tree',
|
||||
component: () => import('@/views/tree/index'),
|
||||
meta: { title: 'Tree', icon: 'tree' }
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/example',
|
||||
// component: Layout,
|
||||
// redirect: '/example/table',
|
||||
// name: 'Example',
|
||||
// meta: { title: 'Example', icon: 'el-icon-s-help' },
|
||||
// children: [
|
||||
// {
|
||||
// path: 'table',
|
||||
// name: 'Table',
|
||||
// component: () => import('@/views/table/index'),
|
||||
// meta: { title: 'Table', icon: 'table' }
|
||||
// },
|
||||
// {
|
||||
// path: 'tree',
|
||||
// name: 'Tree',
|
||||
// component: () => import('@/views/tree/index'),
|
||||
// meta: { title: 'Tree', icon: 'tree' }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
{
|
||||
path: '/form',
|
||||
|
|
@ -90,75 +90,119 @@ export const constantRoutes = [
|
|||
]
|
||||
},
|
||||
|
||||
// {
|
||||
// path: '/formation',
|
||||
// component: Layout,
|
||||
// children: [
|
||||
// {
|
||||
// path: 'index',
|
||||
// name: '用户管理',
|
||||
// component: () => import('@/views/formation/index'),
|
||||
// meta: { title: '用户管理', icon: 'form' }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
{
|
||||
path: '/nested',
|
||||
path: '/formation',
|
||||
component: Layout,
|
||||
redirect: '/nested/menu1',
|
||||
name: 'Nested',
|
||||
redirect: '/formation/index',
|
||||
name: 'Formation',
|
||||
meta: {
|
||||
title: 'Nested',
|
||||
title: '用户管理',
|
||||
icon: 'nested'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'menu1',
|
||||
component: () => import('@/views/nested/menu1/index'), // Parent router-view
|
||||
component: () => import('@/views/formation/menu1/index'), // Parent router-view
|
||||
name: 'Menu1',
|
||||
meta: { title: 'Menu1' },
|
||||
children: [
|
||||
{
|
||||
path: 'menu1-1',
|
||||
component: () => import('@/views/nested/menu1/menu1-1'),
|
||||
name: 'Menu1-1',
|
||||
meta: { title: 'Menu1-1' }
|
||||
},
|
||||
{
|
||||
path: 'menu1-2',
|
||||
component: () => import('@/views/nested/menu1/menu1-2'),
|
||||
name: 'Menu1-2',
|
||||
meta: { title: 'Menu1-2' },
|
||||
children: [
|
||||
{
|
||||
path: 'menu1-2-1',
|
||||
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
|
||||
name: 'Menu1-2-1',
|
||||
meta: { title: 'Menu1-2-1' }
|
||||
},
|
||||
{
|
||||
path: 'menu1-2-2',
|
||||
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
|
||||
name: 'Menu1-2-2',
|
||||
meta: { title: 'Menu1-2-2' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'menu1-3',
|
||||
component: () => import('@/views/nested/menu1/menu1-3'),
|
||||
name: 'Menu1-3',
|
||||
meta: { title: 'Menu1-3' }
|
||||
}
|
||||
]
|
||||
meta: { title: '用户管理列表' },
|
||||
},
|
||||
{
|
||||
path: 'menu2',
|
||||
component: () => import('@/views/nested/menu2/index'),
|
||||
component: () => import('@/views/formation/menu2/index'),
|
||||
name: 'Menu2',
|
||||
meta: { title: 'menu2' }
|
||||
meta: { title: '血压区域分析' }
|
||||
},
|
||||
{
|
||||
path: 'menu3',
|
||||
component: () => import('@/views/formation/menu3/index'),
|
||||
name: 'menu3',
|
||||
meta: { title: '树形控件' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: 'external-link',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
|
||||
meta: { title: 'External Link', icon: 'link' }
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/nested',
|
||||
// component: Layout,
|
||||
// redirect: '/nested/menu1',
|
||||
// name: 'Nested',
|
||||
// meta: {
|
||||
// title: 'Nested',
|
||||
// icon: 'nested'
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: 'menu1',
|
||||
// component: () => import('@/views/nested/menu1/index'), // Parent router-view
|
||||
// name: 'Menu1',
|
||||
// meta: { title: 'Menu1' },
|
||||
// children: [
|
||||
// {
|
||||
// path: 'menu1-1',
|
||||
// component: () => import('@/views/nested/menu1/menu1-1'),
|
||||
// name: 'Menu1-1',
|
||||
// meta: { title: 'Menu1-1' }
|
||||
// },
|
||||
// {
|
||||
// path: 'menu1-2',
|
||||
// component: () => import('@/views/nested/menu1/menu1-2'),
|
||||
// name: 'Menu1-2',
|
||||
// meta: { title: 'Menu1-2' },
|
||||
// children: [
|
||||
// {
|
||||
// path: 'menu1-2-1',
|
||||
// component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
|
||||
// name: 'Menu1-2-1',
|
||||
// meta: { title: 'Menu1-2-1' }
|
||||
// },
|
||||
// {
|
||||
// path: 'menu1-2-2',
|
||||
// component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
|
||||
// name: 'Menu1-2-2',
|
||||
// meta: { title: 'Menu1-2-2' }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// path: 'menu1-3',
|
||||
// component: () => import('@/views/nested/menu1/menu1-3'),
|
||||
// name: 'Menu1-3',
|
||||
// meta: { title: 'Menu1-3' }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// path: 'menu2',
|
||||
// component: () => import('@/views/nested/menu2/index'),
|
||||
// name: 'Menu2',
|
||||
// meta: { title: 'menu2' }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
// {
|
||||
// path: 'external-link',
|
||||
// component: Layout,
|
||||
// children: [
|
||||
// {
|
||||
// path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
|
||||
// meta: { title: 'External Link', icon: 'link' }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
// 404 page must be placed at the end !!!
|
||||
{ path: '*', redirect: '/404', hidden: true }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,330 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-button type="primary" @click="dialogFormVisible=true">添加</el-button>
|
||||
<h1>查询</h1>
|
||||
<el-form :inline="true" :model="formation" class="demo-form-inline">
|
||||
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="formation.formationName" placeholder="姓名"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table :data="formationResponse.list" style="width: 100%">
|
||||
|
||||
<el-table-column label="用户编号" width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.formationId }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="姓名" width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.formationName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="性别" width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.formationSex }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="年龄" width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.formationAge }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="电话" width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.formationPhone }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="地址" width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.formationAddress }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="血糖" width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.formationSugar }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="血压" width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.formationPress }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="加入时间" width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.formationDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="用户名" width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.userName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="密码" width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.userPwd }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="handleEdit(scope.row)">修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.formationId)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<h1>分页</h1>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formation.pageNum"
|
||||
:page-sizes="[1, 3, 5, 7]"
|
||||
:page-size="formation.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
<!-- 添加-->
|
||||
<el-dialog :title="title" :visible.sync="dialogFormVisible">
|
||||
<el-form :model="formations" ref="Formation">
|
||||
|
||||
<el-form-item label="姓名" :label-width="formLabelWidth" prop="shopName">
|
||||
<el-input v-model="formations.formationName" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="性别" :label-width="formLabelWidth" prop="shopNum">
|
||||
<el-input v-model="formations.formationSex" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="年龄" :label-width="formLabelWidth" prop="shopPrice">
|
||||
<el-input v-model="formations.formationAge" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电话" :label-width="formLabelWidth" prop="shopPrice">
|
||||
<el-input v-model="formations.formationPhone" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="地址" :label-width="formLabelWidth" prop="shopPrice">
|
||||
<el-input v-model="formations.formationAddress" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="血糖" :label-width="formLabelWidth" prop="shopPrice">
|
||||
<el-input v-model="formations.formationSugar" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="血压" :label-width="formLabelWidth" prop="shopPrice">
|
||||
<el-input v-model="formations.formationPress" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="加入时间" required>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date1">
|
||||
<el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="formations.formationDate" style="width: 100%;" prop="shopTime"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="addShops">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 修改-->
|
||||
<el-dialog :title="titles" :visible.sync="dialogFormVisibles">
|
||||
<el-form :model="formations" ref="Formations">
|
||||
|
||||
<el-form-item label="姓名" :label-width="formLabelWidth" prop="shopName">
|
||||
<el-input v-model="formations.formationName" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="性别" :label-width="formLabelWidth" prop="shopNum">
|
||||
<el-input v-model="formations.formationSex" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="年龄" :label-width="formLabelWidth" prop="shopPrice">
|
||||
<el-input v-model="formations.formationAge" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电话" :label-width="formLabelWidth" prop="shopPrice">
|
||||
<el-input v-model="formations.formationPhone" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="地址" :label-width="formLabelWidth" prop="shopPrice">
|
||||
<el-input v-model="formations.formationAddress" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="血糖" :label-width="formLabelWidth" prop="shopPrice">
|
||||
<el-input v-model="formations.formationSugar" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="血压" :label-width="formLabelWidth" prop="shopPrice">
|
||||
<el-input v-model="formations.formationPress" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="加入时间" required>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date1">
|
||||
<el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="formations.formationDate" style="width: 100%;" prop="shopTime"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisibles = false">取 消</el-button>
|
||||
<el-button type="primary" @click="update">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||
//例如：import 《组件名称》 from '《组件路径》,
|
||||
import { deletes, insert, list, update } from '@/api/formation'
|
||||
|
||||
export default {
|
||||
//import引入的组件需要注入到对象中才能使用"
|
||||
name:'formation',
|
||||
data() {
|
||||
//这里存放数据"
|
||||
|
||||
return {
|
||||
formationResponse:{
|
||||
list:[]
|
||||
},
|
||||
formation:{
|
||||
pageNum:1,
|
||||
pageSize:5
|
||||
},
|
||||
total:0,
|
||||
title:'添加商品',
|
||||
titles:'修改',
|
||||
dialogFormVisible:false,
|
||||
dialogFormVisibles:false,
|
||||
formLabelWidth:'120px',
|
||||
formations:{}
|
||||
};
|
||||
},
|
||||
//计算属性 类似于data概念",
|
||||
computed: {},
|
||||
//监控data中的数据变化",
|
||||
watch: {},
|
||||
//方法集合",
|
||||
methods: {
|
||||
list(){
|
||||
list(this.formation).then(
|
||||
res=>{
|
||||
this.formationResponse=res.data
|
||||
this.total=res.data.total
|
||||
}
|
||||
)
|
||||
},
|
||||
addShops(){
|
||||
this.$refs['Formation'].validate((valid) => {
|
||||
if (valid) {
|
||||
insert(this.formations).then(
|
||||
res=>{
|
||||
this.$message.success(res.msg)
|
||||
}
|
||||
)
|
||||
}
|
||||
});
|
||||
},
|
||||
update(){
|
||||
this.$refs['Formations'].validate((valid) => {
|
||||
if (valid) {
|
||||
update(this.formations).then(
|
||||
res=>{
|
||||
this.$message.success(res.msg)
|
||||
}
|
||||
)
|
||||
}
|
||||
});
|
||||
},
|
||||
handleEdit(obj){
|
||||
this.formations=obj;
|
||||
this.titles='修改'
|
||||
this.dialogFormVisibles=true
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
this.formation.pageSize=val;
|
||||
this.list()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
this.formation.pageNum=val;
|
||||
this.list()
|
||||
},
|
||||
onSubmit(){
|
||||
this.list()
|
||||
},
|
||||
handleDelete(formationId){
|
||||
deletes(formationId).then(
|
||||
res=>{
|
||||
this.$message.success(res.msg)
|
||||
this.list()
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||||
created() {
|
||||
this.list()
|
||||
},
|
||||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||||
mounted() {
|
||||
},
|
||||
beforeCreate() {
|
||||
}, //生命周期 - 创建之前",
|
||||
beforeMount() {
|
||||
}, //生命周期 - 挂载之前",
|
||||
beforeUpdate() {
|
||||
}, //生命周期 - 更新之前",
|
||||
updated() {
|
||||
}, //生命周期 - 更新之后",
|
||||
beforeDestroy() {
|
||||
}, //生命周期 - 销毁之前",
|
||||
destroyed() {
|
||||
}, //生命周期 - 销毁完成",
|
||||
activated() {
|
||||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<div class="echart" id="mychart" :style="myChartStyle"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||
//例如：import 《组件名称》 from '《组件路径》,
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
//import引入的组件需要注入到对象中才能使用"
|
||||
name:'formation',
|
||||
data() {
|
||||
//这里存放数据"
|
||||
|
||||
return {
|
||||
xData: ["低血压","正常血压","高血压"], //横坐标
|
||||
yData: [170,180,200], //数据
|
||||
myChartStyle: { float: "left", width: "50%", height: "400px" } //图表样式
|
||||
};
|
||||
},
|
||||
//计算属性 类似于data概念",
|
||||
computed: {},
|
||||
//监控data中的数据变化",
|
||||
watch: {},
|
||||
//方法集合",
|
||||
methods: {
|
||||
initEcharts() {
|
||||
|
||||
// 基本柱状图
|
||||
const option = {
|
||||
xAxis: {
|
||||
data: this.xData
|
||||
},
|
||||
yAxis: {},
|
||||
series: [
|
||||
{
|
||||
type: "bar", //形状为柱状图
|
||||
data: this.yData
|
||||
}
|
||||
]
|
||||
};
|
||||
const myChart = echarts.init(document.getElementById("mychart"));
|
||||
myChart.setOption(option);
|
||||
//随着屏幕大小调节图表
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
},
|
||||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||||
created() {
|
||||
},
|
||||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||||
mounted() {
|
||||
this.initEcharts();
|
||||
},
|
||||
beforeCreate() {
|
||||
}, //生命周期 - 创建之前",
|
||||
beforeMount() {
|
||||
}, //生命周期 - 挂载之前",
|
||||
beforeUpdate() {
|
||||
}, //生命周期 - 更新之前",
|
||||
updated() {
|
||||
}, //生命周期 - 更新之后",
|
||||
beforeDestroy() {
|
||||
}, //生命周期 - 销毁之前",
|
||||
destroyed() {
|
||||
}, //生命周期 - 销毁完成",
|
||||
activated() {
|
||||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-tree :data="treelist" ref="tree2" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||
//例如：import 《组件名称》 from '《组件路径》,
|
||||
import tree from 'element-ui/packages/tree'
|
||||
import { treeList } from '@/api/trees'
|
||||
|
||||
export default {
|
||||
//import引入的组件需要注入到对象中才能使用"
|
||||
name:'trees',
|
||||
data() {
|
||||
//这里存放数据"
|
||||
|
||||
return {
|
||||
treelist: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'treesName'
|
||||
}
|
||||
};
|
||||
},
|
||||
//计算属性 类似于data概念",
|
||||
computed: {
|
||||
},
|
||||
//监控data中的数据变化",
|
||||
watch: {},
|
||||
//方法集合",
|
||||
methods: {
|
||||
list(){
|
||||
treeList().then(
|
||||
res=>{
|
||||
console.log(res)
|
||||
this.treelist = res.data
|
||||
}
|
||||
)
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
console.log('- - -'+JSON.stringify(data));
|
||||
},
|
||||
},
|
||||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||||
created() {
|
||||
this.list()
|
||||
},
|
||||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||||
mounted() {
|
||||
},
|
||||
beforeCreate() {
|
||||
}, //生命周期 - 创建之前",
|
||||
beforeMount() {
|
||||
}, //生命周期 - 挂载之前",
|
||||
beforeUpdate() {
|
||||
}, //生命周期 - 更新之前",
|
||||
updated() {
|
||||
}, //生命周期 - 更新之后",
|
||||
beforeDestroy() {
|
||||
}, //生命周期 - 销毁之前",
|
||||
destroyed() {
|
||||
}, //生命周期 - 销毁完成",
|
||||
activated() {
|
||||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -51,8 +51,8 @@
|
|||
</el-form-item>
|
||||
|
||||
<el-button :loading="loading" type="primary" style="width:30%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
|
||||
<el-button :loading="loading" type="primary" style="width:30%;margin-bottom:30px;" @click="dialogFormVisible = true">注册</el-button>
|
||||
<el-button :loading="loading" type="primary" style="width:30%;margin-bottom:30px;" @click="From = true">找回密码</el-button>
|
||||
<el-button type="primary" style="width:30%;margin-bottom:30px;" @click="dialogFormVisible = true">注册</el-button>
|
||||
<el-button type="primary" style="width:30%;margin-bottom:30px;" @click="From = true">找回密码</el-button>
|
||||
<div class="tips">
|
||||
<span style="margin-right:20px;">username: admin</span>
|
||||
<span> password: any</span>
|
||||
|
|
@ -140,8 +140,8 @@ export default {
|
|||
dialogFormVisible:false,
|
||||
From:false,
|
||||
loginForm: {
|
||||
username: 'admin',
|
||||
password: '111111',
|
||||
username: 'tom',
|
||||
password: '999999',
|
||||
role:'请选择身份'
|
||||
},
|
||||
loginRules: {
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 1">
|
||||
<router-view />
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 1-1" type="success">
|
||||
<router-view />
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 1-2" type="success">
|
||||
<router-view />
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template functional>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 1-2-1" type="warning" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template functional>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 1-2-2" type="warning" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template functional>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 1-3" type="success" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 2" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="list"
|
||||
element-loading-text="Loading"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column align="center" label="ID" width="95">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.$index }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Title">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.title }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Author" width="110" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.author }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Pageviews" width="110" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.pageviews }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column class-name="status-col" label="Status" width="110" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="created_at" label="Display_time" width="200">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time" />
|
||||
<span>{{ scope.row.display_time }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getList } from '@/api/table'
|
||||
|
||||
export default {
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'gray',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
listLoading: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
this.listLoading = true
|
||||
getList().then(response => {
|
||||
this.list = response.data.items
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
|
||||
|
||||
<el-tree
|
||||
ref="tree2"
|
||||
:data="data2"
|
||||
:props="defaultProps"
|
||||
:filter-node-method="filterNode"
|
||||
class="filter-tree"
|
||||
default-expand-all
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
filterText: '',
|
||||
data2: [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: 'Level two 1-1',
|
||||
children: [{
|
||||
id: 9,
|
||||
label: 'Level three 1-1-1'
|
||||
}, {
|
||||
id: 10,
|
||||
label: 'Level three 1-1-2'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'Level one 2',
|
||||
children: [{
|
||||
id: 5,
|
||||
label: 'Level two 2-1'
|
||||
}, {
|
||||
id: 6,
|
||||
label: 'Level two 2-2'
|
||||
}]
|
||||
}, {
|
||||
id: 3,
|
||||
label: 'Level one 3',
|
||||
children: [{
|
||||
id: 7,
|
||||
label: 'Level two 3-1'
|
||||
}, {
|
||||
id: 8,
|
||||
label: 'Level two 3-2'
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree2.filter(val)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
return data.label.indexOf(value) !== -1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue