mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
chore: 更新模板和在线文档
添加页面： 1、基础表单 2、分布表单 3、基础列表 4、功能演示
This commit is contained in:
harrywan
parent
8cf66d92b3
commit
d14d4fb5b0
@ -1,7 +1,10 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
mode: 'vertical', // 可选有vertical、horizontal，默认vertical
|
// 可选有vertical、horizontal，默认vertical
|
||||||
theme: 'blue', // 可选有blue、dark，默认blue
|
mode: 'vertical',
|
||||||
fesName: 'xx 运营平台', // 项目名称
|
// 可选有blue、dark，默认blue
|
||||||
|
theme: 'blue',
|
||||||
|
// 项目名称
|
||||||
|
fesName: 'Fes.js 运营平台',
|
||||||
favicon: 'static/favicon.ico', // 图标
|
favicon: 'static/favicon.ico', // 图标
|
||||||
// 环境变量配置, 默认使用local环境
|
// 环境变量配置, 默认使用local环境
|
||||||
env: {
|
env: {
|
||||||
@ -25,94 +28,54 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
// map
|
// map
|
||||||
map: {
|
map: {
|
||||||
status: [['1', '成功'], ['2', '失败']]
|
level: [['1', '青铜'], ['2', '白银'], ['3', '黄金'], ['4', '铂金']]
|
||||||
},
|
},
|
||||||
// 左侧菜单配置
|
// 左侧菜单配置
|
||||||
menu: [
|
menu: [
|
||||||
{
|
{
|
||||||
title: '$i18n.menu.interface',
|
title: '列表页',
|
||||||
path: '/api',
|
|
||||||
subMenu: [
|
subMenu: [
|
||||||
{
|
{
|
||||||
title: 'Fes',
|
title: '查询列表',
|
||||||
path: '/api/fes'
|
path: '/list'
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'FesApp',
|
|
||||||
path: '/api/fesApp'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'FesApi',
|
|
||||||
path: '/api/fesApi'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'FesMenu',
|
|
||||||
path: '/api/fesMenu'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'FesMap',
|
|
||||||
path: '/api/fesMap'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'FesFesx',
|
|
||||||
path: '/api/fesFesx'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'FesStorage',
|
|
||||||
path: '/api/fesStorage'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'FesUtil',
|
|
||||||
path: '/api/fesUtil'
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '路由',
|
title: '表单页',
|
||||||
path: '/route'
|
subMenu: [
|
||||||
|
{
|
||||||
|
title: '基础表单',
|
||||||
|
path: '/form/base'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '分步表单',
|
||||||
|
path: '/form/step'
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'static/bell.png',
|
title: '功能演示',
|
||||||
title: '列表页',
|
|
||||||
path: '/list'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '内容很多的编辑',
|
|
||||||
path: '/list/edit'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '显示头部',
|
|
||||||
path: '/header'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '静态资源',
|
|
||||||
path: '/static'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '子路由',
|
|
||||||
path: '/layout',
|
path: '/layout',
|
||||||
subMenu: [
|
subMenu: [
|
||||||
{
|
{
|
||||||
title: '子路由A',
|
title: '$i18n.menu.internationalization',
|
||||||
path: '/layout/a'
|
path: '/layout/i18n'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '子路由B',
|
title: '静态资源',
|
||||||
path: '/layout/b'
|
path: '/layout/static'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '国际化',
|
|
||||||
path: '/i18n'
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
i18n: {
|
i18n: {
|
||||||
locale: 'zh-cn', // default zh-cn
|
// default zh-cn
|
||||||
|
locale: 'zh-cn',
|
||||||
messages: {
|
messages: {
|
||||||
'zh-cn': {
|
'zh-cn': {
|
||||||
menu: {
|
menu: {
|
||||||
interface: '接口'
|
internationalization: '国际化'
|
||||||
},
|
},
|
||||||
overview: '概述',
|
overview: '概述',
|
||||||
i18n: {
|
i18n: {
|
||||||
@ -120,11 +83,11 @@ module.exports = {
|
|||||||
achieve: '实现。',
|
achieve: '实现。',
|
||||||
ui: 'UI组件'
|
ui: 'UI组件'
|
||||||
},
|
},
|
||||||
title: '标题'
|
title: 'Fes.js 运营平台'
|
||||||
},
|
},
|
||||||
en: {
|
en: {
|
||||||
menu: {
|
menu: {
|
||||||
interface: 'interface'
|
internationalization: 'internationalization'
|
||||||
},
|
},
|
||||||
overview: 'Overview',
|
overview: 'Overview',
|
||||||
i18n: {
|
i18n: {
|
||||||
@ -132,7 +95,7 @@ module.exports = {
|
|||||||
achieve: 'to achieve.',
|
achieve: 'to achieve.',
|
||||||
ui: 'UI components'
|
ui: 'UI components'
|
||||||
},
|
},
|
||||||
title: 'title'
|
title: 'Fes.js Admin'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 55 KiB |
@ -28,12 +28,12 @@
|
|||||||
ul {
|
ul {
|
||||||
padding-left: 40px;
|
padding-left: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
list-style-type: disc;
|
list-style-type: disc;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
table{
|
table{
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
@ -48,3 +48,43 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ml-8{
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml-16{
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修复问题
|
||||||
|
.ui-modal .ui-modal-dialog{
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #f0f2f5;
|
||||||
|
min-height: 100%;
|
||||||
|
.page-header{
|
||||||
|
padding: 16px 32px 0;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: $border-color-split ;
|
||||||
|
.page-header-title{
|
||||||
|
color: $title-color;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.page-header-desc{
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.page-body{
|
||||||
|
flex: auto;
|
||||||
|
min-height: 0;
|
||||||
|
margin: 24px 24px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,74 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="article">
|
|
||||||
<h2>{{$t('overview')}}</h2>
|
|
||||||
<p>对Vue做了一层封装。给Vue添加了一些属性，方便使用。</p>
|
|
||||||
|
|
||||||
<h2>属性</h2>
|
|
||||||
<ul>
|
|
||||||
<li><router-link to="/api/fesApp">this.FesApp App实例</router-link></li>
|
|
||||||
<li><router-link to="/api/fesUtil">this.FesUtil 工具函数</router-link></li>
|
|
||||||
<li><router-link to="/api/fesStorage">this.FesStorage 操作存储: cookie、sessionStorage、localStorage</router-link></li>
|
|
||||||
<li><router-link to="/api/fesApi">this.FesApi 操作Ajax</router-link></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>响应式数据FesData</h2>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<p>双向绑定的值，类似绑定到ng里面scope的值</p>
|
|
||||||
<p>
|
|
||||||
<input v-model="data1"> {{data1}}
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p><router-link to="/api/fesMap"><strong>数据字典FesMap</strong></router-link></p>
|
|
||||||
<p>FesMap会自动挂载到FesData</p>
|
|
||||||
<p>FesMap: {{FesMap}}</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p><router-link to="/api/fesFesx"><strong>全局状态FesFesx</strong></router-link></p>
|
|
||||||
<p>FesFesx会自动挂载到FesData </p>
|
|
||||||
<p>FesFesx: {{FesFesx}}</p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
|
||||||
<h2>异步响应数据FesSyncData</h2>
|
|
||||||
<p>进入路由时根据接口查询到的值，并且设置成响应数据</p>
|
|
||||||
<p>
|
|
||||||
<input v-model="data2">
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
data2: {{data2}}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
|
|
||||||
<h2>过滤器</h2>
|
|
||||||
<p>日期: {{date}} => {{date | date}}</p>
|
|
||||||
<p>日期（带参数）: {{date}} => {{date | date('yyyy-MM-dd')}}</p>
|
|
||||||
<p>金钱: {{money}} => {{money | money}}</p>
|
|
||||||
<p>银行卡: {{card}} => {{card | card}}</p>
|
|
||||||
<p>加密: {{safety}} => {{safety | safety(4,3)}}</p>
|
|
||||||
<p>数据字典: {{map}} => {{map | map(FesMap.status)}}</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script type="text/ecmascript-6">
|
|
||||||
export default {
|
|
||||||
FesData: {
|
|
||||||
data1: '1',
|
|
||||||
money: 100000,
|
|
||||||
card: '11122233242323',
|
|
||||||
safety: '42222991018719191',
|
|
||||||
map: '1',
|
|
||||||
date: new Date().getTime()
|
|
||||||
},
|
|
||||||
FesSyncData: {
|
|
||||||
data2: ['/getNumber', {
|
|
||||||
max: 100,
|
|
||||||
min: 1
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
FesReady() {
|
|
||||||
// do something
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,50 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="article">
|
|
||||||
<h2>{{$t('overview')}}</h2>
|
|
||||||
<p>对vue-resource的封装。公共的异常处理，响应处理等。</p>
|
|
||||||
|
|
||||||
<h2>函数</h2>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<p>get(url, data, option)</p>
|
|
||||||
<p>
|
|
||||||
发起一个get请求，返回值是promise对象
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>post(url, data, option)</p>
|
|
||||||
<p>
|
|
||||||
发起一个post请求，返回值是promise对象
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>fetch(url, data, option)</p>
|
|
||||||
<p>
|
|
||||||
默认调用post请求，返回值是promise对象
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>option(option)</p>
|
|
||||||
<p>
|
|
||||||
设置ajax的公共配置，比如root（根路径）、timeout（超时时间）、xhr（xhr对象）
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>setError(errors)</p>
|
|
||||||
<p>
|
|
||||||
设置当响应状态是非200时触发的事件钩子，比如401啊等
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>setResponse(constructionOfResponse)</p>
|
|
||||||
<p>
|
|
||||||
设置响应结构。响应一般会由状态码、错误消息、数据组成。通过此函数设置一个路径，当响应回来是来解析响应。
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script type="text/ecmascript-6">
|
|
||||||
export default {
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,94 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="article">
|
|
||||||
<h2>{{$t('overview')}}</h2>
|
|
||||||
<p>一个App表示一个应用。管理一些应用级别的状态。</p>
|
|
||||||
|
|
||||||
<h2>属性</h2>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<router-link to="/api/fesApi">
|
|
||||||
<p>this.FesApi</p>
|
|
||||||
<p>操作ajax的对象</p>
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<router-link to="/api/fesMap">
|
|
||||||
<p>this.FesMap</p>
|
|
||||||
<p>数据字典，保存数据字典的容器，提供查找函数</p>
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<router-link to="/api/fesUtil">
|
|
||||||
<p>this.FesUtil</p>
|
|
||||||
<p>工具函数，操作dom、对象等</p>
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<router-link to="/api/fesFesx">
|
|
||||||
<p>this.FesFesx</p>
|
|
||||||
<p>存储全局状态的容器</p>
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<router-link to="/api/fesStorage">
|
|
||||||
<p>this.FesStorage</p>
|
|
||||||
<p>操作存储: cookie、sessionStorage、localStorage</p>
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>this.router</p>
|
|
||||||
<p>当前路由对象，具体api查询vue-router v0.7</p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>函数</h2>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<p>init</p>
|
|
||||||
<p>
|
|
||||||
初始化整个应用，我们只需要在app.js写入自定义的初始化内容，比如设置菜单、项目名等
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>get(prop)</p>
|
|
||||||
<p>
|
|
||||||
根据prop获取在App保存的应用层面的状态值
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>set(prop, value)</p>
|
|
||||||
<p>
|
|
||||||
设置应用层面的状态，包括FesName、FesMenu、FesUserName、FesRoleName、FesLogout
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>setRole(role)</p>
|
|
||||||
<p>
|
|
||||||
我们需要在common/rolesConfig.js中配置角色所属的菜单权限，可以把未登录状态也当作一种角色。根据当前登录状态或者用户设置不同的角色。菜单也会根据角色展示。
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>getAllowPage()</p>
|
|
||||||
<p>
|
|
||||||
返回当前能访问的页面
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>setBeforeRouter(beforeRouter)</p>
|
|
||||||
<p>
|
|
||||||
设置路由切换之前的事件钩子，可以根据条件判断是否阻止切换
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>setAfterRouter(afterRouter)</p>
|
|
||||||
<p>
|
|
||||||
路由切换之后的事件钩子
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script type="text/ecmascript-6">
|
|
||||||
export default {
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="article">
|
|
||||||
<h2>{{$t('overview')}}</h2>
|
|
||||||
<p>全局的状态管理容器</p>
|
|
||||||
|
|
||||||
<h2>函数</h2>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<p>get(prop)</p>
|
|
||||||
<p>
|
|
||||||
根据prop获取值
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>set(prop, value)</p>
|
|
||||||
<p>
|
|
||||||
设置一个全局的状态
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script type="text/ecmascript-6">
|
|
||||||
export default {
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="article">
|
|
||||||
<h2>{{$t('overview')}}</h2>
|
|
||||||
<p>数据字典管理对象。当程序加载时，从common/map.js中读取原始数据，转换成{value: value, text: text}，存入FesMap</p>
|
|
||||||
|
|
||||||
<h2>函数</h2>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<p>getNameByValue(name, value)</p>
|
|
||||||
<p>
|
|
||||||
从FesMap[name]中找出值是value的那一条数据
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script type="text/ecmascript-6">
|
|
||||||
export default {
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,129 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="article">
|
|
||||||
<h2>{{$t('overview')}}</h2>
|
|
||||||
<p>
|
|
||||||
配置公共左侧菜单
|
|
||||||
<br> 在调用FesApp.setRole(...)之后，FesMenu只显示当前用户可以访问的菜单
|
|
||||||
</p>
|
|
||||||
<h2>API</h2>
|
|
||||||
<p>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style="text-align:left">
|
|
||||||
属性
|
|
||||||
</th>
|
|
||||||
<th style="text-align:left">
|
|
||||||
说明
|
|
||||||
</th>
|
|
||||||
<th style="text-align:left">
|
|
||||||
类型
|
|
||||||
</th>
|
|
||||||
<th style="text-align:left">
|
|
||||||
默认值
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td style="text-align:left">
|
|
||||||
title
|
|
||||||
</td>
|
|
||||||
<td style="text-align:left">
|
|
||||||
菜单标题
|
|
||||||
</td>
|
|
||||||
<td style="text-align:left">
|
|
||||||
String
|
|
||||||
</td>
|
|
||||||
<td style="text-align:left">
|
|
||||||
空
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td style="text-align:left">
|
|
||||||
path
|
|
||||||
</td>
|
|
||||||
<td style="text-align:left">
|
|
||||||
菜单项点击后，跳转路径
|
|
||||||
</td>
|
|
||||||
<td style="text-align:left">
|
|
||||||
String
|
|
||||||
</td>
|
|
||||||
<td style="text-align:left">
|
|
||||||
空
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td style="text-align:left">
|
|
||||||
subMenu
|
|
||||||
</td>
|
|
||||||
<td style="text-align:left">
|
|
||||||
子菜单，每项也有path和title
|
|
||||||
</td>
|
|
||||||
<td style="text-align:left">
|
|
||||||
Array
|
|
||||||
</td>
|
|
||||||
<td style="text-align:left">
|
|
||||||
空
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</p>
|
|
||||||
<h2>示例</h2>
|
|
||||||
<pre>
|
|
||||||
//在app.js文件中设置菜单
|
|
||||||
this.set("FesMenu", [{
|
|
||||||
title: "接口",
|
|
||||||
path: '/api',
|
|
||||||
subMenu: [{
|
|
||||||
title: "Fes",
|
|
||||||
path: '/api/fes',
|
|
||||||
},{
|
|
||||||
title: "FesApp",
|
|
||||||
path: '/api/fesApp',
|
|
||||||
},{
|
|
||||||
title: "FesApi",
|
|
||||||
path: '/api/fesApi',
|
|
||||||
},{
|
|
||||||
title: "FesMenu",
|
|
||||||
path: '/api/fesMenu',
|
|
||||||
},{
|
|
||||||
title: "FesMap",
|
|
||||||
path: '/api/fesMap',
|
|
||||||
},{
|
|
||||||
title: "FesFesx",
|
|
||||||
path: '/api/fesFesx',
|
|
||||||
},{
|
|
||||||
title: "FesStorage",
|
|
||||||
path: '/api/fesStorage',
|
|
||||||
},{
|
|
||||||
title: "FesUtil",
|
|
||||||
path: '/api/fesUtil',
|
|
||||||
}]
|
|
||||||
},{
|
|
||||||
title: "简单的列表页",
|
|
||||||
path: '/list'
|
|
||||||
},{
|
|
||||||
title: "自定义内容列表页",
|
|
||||||
path: '/list1'
|
|
||||||
},{
|
|
||||||
title: "内容很多的编辑",
|
|
||||||
path: '/list/edit'
|
|
||||||
}]
|
|
||||||
);
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script type="text/ecmascript-6">
|
|
||||||
export default {
|
|
||||||
FesData: {
|
|
||||||
data1: '1',
|
|
||||||
money: 100000,
|
|
||||||
card: '11122233242323',
|
|
||||||
safety: '42222991018719191',
|
|
||||||
map: '1',
|
|
||||||
date: new Date().getTime()
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="article">
|
|
||||||
<h2>{{$t('overview')}}</h2>
|
|
||||||
<p>操作Storage，包含cookie、sessionStorage、localStorage。 category值SESSION对应sessionStorage，LOCAL对应localStorage，COOKIE对应cookie</p>
|
|
||||||
|
|
||||||
<h2>函数</h2>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<p>set(key, value, category = SESSION, expired)</p>
|
|
||||||
<p>
|
|
||||||
往Storage中存入一个值
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>get(key, category = SESSION)</p>
|
|
||||||
<p>
|
|
||||||
从Storage中取得值
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>clear(category = SESSION)</p>
|
|
||||||
<p>
|
|
||||||
清除所有值
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>remove(key, category = SESSION)</p>
|
|
||||||
<p>
|
|
||||||
删除key对应的值
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script type="text/ecmascript-6">
|
|
||||||
export default {
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="article">
|
|
||||||
<h2>{{$t('overview')}}</h2>
|
|
||||||
<p>工具集合</p>
|
|
||||||
|
|
||||||
<h2>函数</h2>
|
|
||||||
<ul>
|
|
||||||
<li>getClass</li>
|
|
||||||
<li>hasClass</li>
|
|
||||||
<li>setClass</li>
|
|
||||||
<li>addClass</li>
|
|
||||||
<li>removeClass</li>
|
|
||||||
<li>contains</li>
|
|
||||||
<li>addEvent</li>
|
|
||||||
<li>triggerEvent</li>
|
|
||||||
<li>merge</li>
|
|
||||||
<li>extend</li>
|
|
||||||
<li>isPlainObject</li>
|
|
||||||
<li>isNumber</li>
|
|
||||||
<li>isDate</li>
|
|
||||||
<li>isFunction</li>
|
|
||||||
<li>isObject</li>
|
|
||||||
<li>isArray</li>
|
|
||||||
<li>isObjectLike</li>
|
|
||||||
<li>isString</li>
|
|
||||||
<li>isNull</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script type="text/ecmascript-6">
|
|
||||||
export default {
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
136
packages/fes-template/src/pages/form/base.vue
Normal file
136
packages/fes-template/src/pages/form/base.vue
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page">
|
||||||
|
<div class="page-header">
|
||||||
|
<div class="page-header-title">
|
||||||
|
基础表单
|
||||||
|
</div>
|
||||||
|
<div class="page-header-desc">
|
||||||
|
表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="page-body">
|
||||||
|
<Row>
|
||||||
|
<Cell offset="5" span="12">
|
||||||
|
<Wb-form ref="formValidate" :rule="ruleValidate" :label-width="150">
|
||||||
|
<Form-item label="是否需要标题:" prop="hasTitle">
|
||||||
|
<Radio-group v-model="form.hasTitle">
|
||||||
|
<Radio value="1">
|
||||||
|
是
|
||||||
|
</Radio>
|
||||||
|
<Radio value="2">
|
||||||
|
否
|
||||||
|
</Radio>
|
||||||
|
</Radio-group>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="标题:" prop="title">
|
||||||
|
<wb-input v-model="form.title" placeholder="请输入标题"></wb-input>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="城市:" prop="city">
|
||||||
|
<wb-select v-model="form.city" placeholder="请选择城市">
|
||||||
|
<wb-option :value="1">北京市</wb-option>
|
||||||
|
<wb-option :value="2">上海市</wb-option>
|
||||||
|
<wb-option :value="3">深圳市</wb-option>
|
||||||
|
<wb-option :value="4">杭州市</wb-option>
|
||||||
|
<wb-option :value="5">南京市</wb-option>
|
||||||
|
<wb-option :value="6">重庆市</wb-option>
|
||||||
|
</wb-select>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="娱乐活动:" prop="active">
|
||||||
|
<Checkbox-group v-model="form.active">
|
||||||
|
<Checkbox value="1">
|
||||||
|
吃饭
|
||||||
|
</Checkbox>
|
||||||
|
<Checkbox value="2">
|
||||||
|
睡觉
|
||||||
|
</Checkbox>
|
||||||
|
<Checkbox value="3">
|
||||||
|
跑步
|
||||||
|
</Checkbox>
|
||||||
|
</Checkbox-group>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="日期范围:" prop="date">
|
||||||
|
<Wb-input-date-picker v-model="form.date" model="range" />
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="目标描述:" prop="desc">
|
||||||
|
<wb-input v-model="form.desc" :autosize="true" type="textarea" placeholder="请输入目标描述"></wb-input>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item :value="form.pics" label="图片上传" prop="pics">
|
||||||
|
<Upload :accept="accpetType" :action="handleUpload">
|
||||||
|
</Upload>
|
||||||
|
<div class="img-list">
|
||||||
|
<img v-for="(item, index) in form.pics" :key="index" :src="converToURL(item)" />
|
||||||
|
</div>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item>
|
||||||
|
<Wb-button @click="click" type="primary">提交</Wb-button>
|
||||||
|
<Wb-button @click="reset" type="ghost" class="ml-8">重置</Wb-button>
|
||||||
|
</Form-item>
|
||||||
|
</Wb-form>
|
||||||
|
</Cell>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
FesData() {
|
||||||
|
const self = this;
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
hasTitle: '',
|
||||||
|
title: '',
|
||||||
|
city: '',
|
||||||
|
active: [],
|
||||||
|
date: [],
|
||||||
|
desc: '',
|
||||||
|
pics: []
|
||||||
|
},
|
||||||
|
ruleValidate: {
|
||||||
|
hasTitle: [
|
||||||
|
{ required: true, message: '请选择是否需要标题' }
|
||||||
|
],
|
||||||
|
title: [
|
||||||
|
{ required: self.form && self.form.hasTitle === '1', message: '请输入标题' }
|
||||||
|
],
|
||||||
|
city: [
|
||||||
|
{ required: true, message: '请选择城市' }
|
||||||
|
],
|
||||||
|
active: [
|
||||||
|
{
|
||||||
|
required: true, message: '请至少选择一个活动', type: 'array', min: 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
pics: [
|
||||||
|
{
|
||||||
|
required: true, message: '请至少上传一张图片', type: 'array', min: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
accpetType: ['jpg', 'png']
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
click() {
|
||||||
|
this.$refs.formValidate.validate((valid, errors) => {
|
||||||
|
if (valid) {
|
||||||
|
console.log(this.form);
|
||||||
|
// 调用接口
|
||||||
|
} else {
|
||||||
|
console.log(errors);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.$refs.formValidate.resetFields();
|
||||||
|
},
|
||||||
|
handleUpload(valid, formData) {
|
||||||
|
if (valid) {
|
||||||
|
this.form.pics.push(formData.get('upFiles'));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
converToURL(item) {
|
||||||
|
return URL.createObjectURL(item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
139
packages/fes-template/src/pages/form/step.vue
Normal file
139
packages/fes-template/src/pages/form/step.vue
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page">
|
||||||
|
<div class="page-header">
|
||||||
|
<div class="page-header-title">分步表单</div>
|
||||||
|
<div class="page-header-desc">将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。</div>
|
||||||
|
</div>
|
||||||
|
<div class="page-body">
|
||||||
|
<Steps :current="current" class="step">
|
||||||
|
<Step title="填写转账信息"></Step>
|
||||||
|
<Step title="确认转账信息"></Step>
|
||||||
|
<Step title="完成"></Step>
|
||||||
|
</Steps>
|
||||||
|
<Wb-form v-show="current === 1" class="step-form">
|
||||||
|
<Form-item label="付款账户:">
|
||||||
|
<wb-select v-model="form.payNo" placeholder="请选择付款账户">
|
||||||
|
<wb-option value="fes@alipay.com">fes@alipay.com</wb-option>
|
||||||
|
<wb-option value="fes@wepay.com">fes@wepay.com</wb-option>
|
||||||
|
</wb-select>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="收款账户:">
|
||||||
|
<Wb-input v-model="form.accountNo" placeholder="请输入收款账户" />
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="收款人姓名:">
|
||||||
|
<Wb-input v-model="form.name" placeholder="请输入收款人姓名" />
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="转账金额:">
|
||||||
|
<Wb-input v-model="form.amount" placeholder="请输入转账金额">
|
||||||
|
</Wb-input>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item>
|
||||||
|
<Wb-button @click="next" type="primary">提交</Wb-button>
|
||||||
|
</Form-item>
|
||||||
|
</Wb-form>
|
||||||
|
<Wb-form v-show="current === 2" class="step-form">
|
||||||
|
<Form-item label="付款账户:">
|
||||||
|
<span class="text">{{form.payNo}}</span>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="收款账户:">
|
||||||
|
<span class="text">{{form.accountNo | card}}</span>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="收款人姓名:">
|
||||||
|
<span class="text">{{form.name}}</span>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="转账金额:">
|
||||||
|
<span class="text big">{{form.amount}}</span>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="支付密码:" class="line">
|
||||||
|
<Wb-input v-model="form.password" type="password" placeholder="请输入支付密码" />
|
||||||
|
</Form-item>
|
||||||
|
<Form-item>
|
||||||
|
<Wb-button @click="next" type="primary">提交</Wb-button>
|
||||||
|
<Wb-button @click="last" class="ml-16" type="primary">上一步</Wb-button>
|
||||||
|
</Form-item>
|
||||||
|
</Wb-form>
|
||||||
|
<div v-show="current === 3" class="step-form">
|
||||||
|
<div class="result-icon">
|
||||||
|
<Process-circle :percent="100" stroke-color="#00cc66" stroke-type="round">
|
||||||
|
<Icon type="md-checkmark" size="50" color="#00cc66"></Icon>
|
||||||
|
</Process-circle>
|
||||||
|
</div>
|
||||||
|
<div class="result-title">操作成功</div>
|
||||||
|
<div class="result-subtitle">预计两小时内到账</div>
|
||||||
|
<div class="result-extra">
|
||||||
|
<Wb-button @click="reset" type="primary">再转一笔</Wb-button>
|
||||||
|
<Wb-button class="ml-16">查看账单</Wb-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
FesData() {
|
||||||
|
return {
|
||||||
|
current: 1,
|
||||||
|
form: {
|
||||||
|
payNo: 'fes@wepay.com',
|
||||||
|
accountNo: '622000011876188',
|
||||||
|
name: 'Hali',
|
||||||
|
amount: 500,
|
||||||
|
password: '11212'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
next() {
|
||||||
|
this.current += 1;
|
||||||
|
},
|
||||||
|
last() {
|
||||||
|
this.current -= 1;
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.current = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "@/assets/styles/variables";
|
||||||
|
.step {
|
||||||
|
margin: 40px auto 0;
|
||||||
|
width: 800px;
|
||||||
|
transform: translateX(12%);
|
||||||
|
}
|
||||||
|
.step-form {
|
||||||
|
margin: 20px auto;
|
||||||
|
width: 500px;
|
||||||
|
.text {
|
||||||
|
line-height: 32px;
|
||||||
|
&.big {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
padding-top: 30px;
|
||||||
|
border-top: 1px solid $border-color-split;
|
||||||
|
}
|
||||||
|
.result-icon {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.result-title {
|
||||||
|
color: $title-color;
|
||||||
|
font-size: $font-size-lg;
|
||||||
|
line-height: 1.8;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.result-subtitle {
|
||||||
|
color: $sub-text-color;
|
||||||
|
font-size: $font-size-small;
|
||||||
|
line-height: 1.6;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.result-extra{
|
||||||
|
margin: 24px 0 0 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,77 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<Fes-search-panel>
|
|
||||||
<Wb-form :label-width="150" type="query">
|
|
||||||
<Form-item label="姓名：">
|
|
||||||
<wb-input placeholder="请输入" />
|
|
||||||
</Form-item>
|
|
||||||
<Form-item label="身份证：">
|
|
||||||
<wb-input placeholder="请输入" />
|
|
||||||
</Form-item>
|
|
||||||
</Wb-form>
|
|
||||||
<div slot="button">
|
|
||||||
<Wb-button @click="search" type="primary" icon="search">
|
|
||||||
查询
|
|
||||||
</Wb-button>
|
|
||||||
</div>
|
|
||||||
</Fes-search-panel>
|
|
||||||
<Fes-list-panel>
|
|
||||||
<Wb-table :data="data">
|
|
||||||
<Column prop="date" name="日期" />
|
|
||||||
<Column prop="name" name="姓名" />
|
|
||||||
<Column prop="age" name="年龄" />
|
|
||||||
<Column prop="adr" name="地址" />
|
|
||||||
<Column prop="status" name="等级" />
|
|
||||||
</Wb-table>
|
|
||||||
<Pagination :size="paginationOption.pageSize" :current="paginationOption.currentPage" :total="paginationOption.totalPage" @on-change="changePage" />
|
|
||||||
</Fes-list-panel>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
FesHeader: true,
|
|
||||||
FesData() {
|
|
||||||
return {
|
|
||||||
data: [{
|
|
||||||
name: '张晓刚',
|
|
||||||
age: 24,
|
|
||||||
date: new Date(2016, 9, 10),
|
|
||||||
adr: '北京市海淀区西二旗',
|
|
||||||
status: 1
|
|
||||||
}, {
|
|
||||||
name: '李晓红',
|
|
||||||
age: 26,
|
|
||||||
date: new Date(2016, 9, 11),
|
|
||||||
adr: '北京市海淀区西二旗',
|
|
||||||
status: 2
|
|
||||||
}, {
|
|
||||||
name: '隔壁老王',
|
|
||||||
age: 22,
|
|
||||||
date: new Date(2016, 9, 12),
|
|
||||||
adr: '北京市海淀区西二旗',
|
|
||||||
status: 3
|
|
||||||
}, {
|
|
||||||
name: '我爸是李刚',
|
|
||||||
age: 19,
|
|
||||||
date: new Date(2016, 9, 13),
|
|
||||||
adr: '北京市海淀区西二旗',
|
|
||||||
status: 4
|
|
||||||
}],
|
|
||||||
paginationOption: {
|
|
||||||
pageSize: 10,
|
|
||||||
currentPage: 1,
|
|
||||||
totalPage: 1
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
search() {
|
|
||||||
// do something
|
|
||||||
},
|
|
||||||
changePage() {
|
|
||||||
// do something
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
@ -3,7 +3,7 @@
|
|||||||
<div class="login-panel-swap">
|
<div class="login-panel-swap">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<span class="logo-text">
|
<span class="logo-text">
|
||||||
xx运营平台
|
Fes.js 运营平台
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="split" />
|
<div class="split" />
|
||||||
@ -66,7 +66,6 @@ export default {
|
|||||||
this.$refs.username.focus();
|
this.$refs.username.focus();
|
||||||
});
|
});
|
||||||
this.initStyle();
|
this.initStyle();
|
||||||
|
|
||||||
if (this.FesStorage.get('userLogin') === true) {
|
if (this.FesStorage.get('userLogin') === true) {
|
||||||
this.getRole();
|
this.getRole();
|
||||||
}
|
}
|
||||||
@ -74,20 +73,15 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
login() {
|
login() {
|
||||||
if (this.validate()) {
|
if (this.validate()) {
|
||||||
// this.FesApi.fetch('login').then(() => {
|
// 设置用户、角色等
|
||||||
// 设置用户、角色等
|
|
||||||
this.FesApp.set('FesUserName', 'harrywan');
|
this.FesApp.set('FesUserName', 'harrywan');
|
||||||
this.FesApp.set('FesRoleName', '管理员');
|
this.FesApp.set('FesRoleName', '管理员');
|
||||||
this.FesStorage.set('userLogin', true);
|
this.FesStorage.set('userLogin', true);
|
||||||
this.getRole();
|
this.getRole();
|
||||||
// });
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getRole() {
|
getRole() {
|
||||||
// this.FesApi.fetch('getRoleName').then((res) => {
|
this.FesApp.setRole('admin');
|
||||||
// 默认跳入rolesConfig的第一项
|
|
||||||
this.FesApp.setRole("admin");
|
|
||||||
// });
|
|
||||||
},
|
},
|
||||||
input() {
|
input() {
|
||||||
this.error = '';
|
this.error = '';
|
||||||
|
|||||||
@ -1,12 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="article">
|
|
||||||
A子页面
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script type="text/ecmascript-6">
|
|
||||||
export default {
|
|
||||||
FesReady() {
|
|
||||||
// do something
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="article">
|
|
||||||
B子页面
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script type="text/ecmascript-6">
|
|
||||||
export default {
|
|
||||||
FesReady() {
|
|
||||||
// do something
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,13 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="article">
|
<div class="page">
|
||||||
<h2>{{$t('overview')}}</h2>
|
<div class="page-header">
|
||||||
<p>
|
<div class="page-header-title">公共路由</div>
|
||||||
根路由下所有page共用的外层
|
</div>
|
||||||
</p>
|
<div class="page-body">
|
||||||
<router-view />
|
<router-view />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script type="text/ecmascript-6">
|
<script>
|
||||||
export default {
|
export default {
|
||||||
FesReady() {
|
FesReady() {
|
||||||
// do something
|
// do something
|
||||||
|
|||||||
@ -1,89 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Panel title="新增XXXX">
|
|
||||||
<Icon slot="action" type="check" title="保存" size="20" />
|
|
||||||
<Icon slot="action" type="rollback" title="返回到列表页面" size="20" />
|
|
||||||
<Wb-form :label-width="150">
|
|
||||||
<Row>
|
|
||||||
<Cell span="12">
|
|
||||||
<Form-item label="应用名称：">
|
|
||||||
<wb-input placeholder="我是文本哦" />
|
|
||||||
</Form-item>
|
|
||||||
</Cell>
|
|
||||||
<Cell span="12">
|
|
||||||
<Form-item label="应用名称：">
|
|
||||||
<wb-input placeholder="我是文本哦" />
|
|
||||||
</Form-item>
|
|
||||||
</Cell>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Cell span="12">
|
|
||||||
<Form-item label="应用名称：">
|
|
||||||
<wb-input placeholder="我是文本哦" />
|
|
||||||
</Form-item>
|
|
||||||
</Cell>
|
|
||||||
<Cell span="12">
|
|
||||||
<Form-item label="应用名称：">
|
|
||||||
<wb-input placeholder="我是文本哦" />
|
|
||||||
</Form-item>
|
|
||||||
</Cell>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Cell span="12">
|
|
||||||
<Form-item label="应用名称：">
|
|
||||||
<wb-input placeholder="我是文本哦" />
|
|
||||||
</Form-item>
|
|
||||||
</Cell>
|
|
||||||
<Cell span="12">
|
|
||||||
<Form-item label="应用名称：">
|
|
||||||
<wb-input placeholder="我是文本哦" />
|
|
||||||
</Form-item>
|
|
||||||
</Cell>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Cell span="12">
|
|
||||||
<Form-item label="应用名称：">
|
|
||||||
<wb-input placeholder="我是文本哦" />
|
|
||||||
</Form-item>
|
|
||||||
</Cell>
|
|
||||||
<Cell span="12">
|
|
||||||
<Form-item label="应用名称：">
|
|
||||||
<wb-input placeholder="我是文本哦" />
|
|
||||||
</Form-item>
|
|
||||||
</Cell>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Cell span="12">
|
|
||||||
<Form-item label="应用名称：">
|
|
||||||
<wb-input placeholder="我是文本哦" />
|
|
||||||
</Form-item>
|
|
||||||
</Cell>
|
|
||||||
<Cell span="12">
|
|
||||||
<Form-item label="应用名称：">
|
|
||||||
<wb-input placeholder="我是文本哦" />
|
|
||||||
</Form-item>
|
|
||||||
</Cell>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Cell span="12">
|
|
||||||
<Form-item label="应用名称：">
|
|
||||||
<wb-input placeholder="我是文本哦" />
|
|
||||||
</Form-item>
|
|
||||||
</Cell>
|
|
||||||
<Cell span="12">
|
|
||||||
<Form-item label="应用名称：">
|
|
||||||
<wb-input placeholder="我是文本哦" />
|
|
||||||
</Form-item>
|
|
||||||
</Cell>
|
|
||||||
</Row>
|
|
||||||
</Wb-form>
|
|
||||||
</Panel>
|
|
||||||
</template>
|
|
||||||
<script type="text/ecmascript-6">
|
|
||||||
export default {
|
|
||||||
FesData() {
|
|
||||||
return {
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,83 +1,160 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="page">
|
||||||
<fes-search-panel>
|
<div class="page-header">
|
||||||
<Wb-form :label-width="150" type="query">
|
<div class="page-header-title">查询列表</div>
|
||||||
<Form-item label="姓名：">
|
</div>
|
||||||
<wb-input v-model="query.name" placeholder="请输入" />
|
<div class="page-body">
|
||||||
|
<fes-search-panel>
|
||||||
|
<Wb-form :label-width="150" type="query">
|
||||||
|
<Form-item label="姓名：">
|
||||||
|
<wb-input v-model="query.name" placeholder="请输入" />
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="身份证：">
|
||||||
|
<wb-input v-model="query.id" placeholder="请输入" />
|
||||||
|
</Form-item>
|
||||||
|
</Wb-form>
|
||||||
|
<div slot="button">
|
||||||
|
<Wb-button @click="search" type="primary" icon="md-search">查询</Wb-button>
|
||||||
|
<Wb-button @click="add" type="primary" icon="md-add">新增</Wb-button>
|
||||||
|
</div>
|
||||||
|
</fes-search-panel>
|
||||||
|
<fes-list-panel>
|
||||||
|
<Wb-table :data="data">
|
||||||
|
<Column prop="date" name="日期" />
|
||||||
|
<Column prop="name" name="姓名" />
|
||||||
|
<Column prop="age" name="年龄" />
|
||||||
|
<Column prop="adr" name="地址" />
|
||||||
|
<Column :filter="FesMap.level" prop="status" name="等级" />
|
||||||
|
<Column :action="action" name="配置" />
|
||||||
|
</Wb-table>
|
||||||
|
<Pagination
|
||||||
|
:size="paginationOption.pageSize"
|
||||||
|
:current="paginationOption.currentPage"
|
||||||
|
:total="paginationOption.totalPage"
|
||||||
|
@on-change="changePage"
|
||||||
|
/>
|
||||||
|
</fes-list-panel>
|
||||||
|
</div>
|
||||||
|
<modal ref="createModal" title="新增用户">
|
||||||
|
<Wb-form ref="formValidate" :label-width="60">
|
||||||
|
<Form-item label="姓名：" prop="name">
|
||||||
|
<wb-input placeholder="请输入用户名"></wb-input>
|
||||||
</Form-item>
|
</Form-item>
|
||||||
<Form-item label="身份证：">
|
<Form-item label="年龄：" prop="name">
|
||||||
<wb-input v-model="query.id" placeholder="请输入" />
|
<wb-input type="number" placeholder="请输入用户名"></wb-input>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="日期：" prop="name">
|
||||||
|
<Wb-input-date-picker />
|
||||||
|
</Form-item>
|
||||||
|
<Form-item>
|
||||||
|
<Wb-button ref="addButton" @click="handleAdd" type="primary">提交</Wb-button>
|
||||||
</Form-item>
|
</Form-item>
|
||||||
</Wb-form>
|
</Wb-form>
|
||||||
<div slot="button">
|
</modal>
|
||||||
<Wb-button @click="search" type="primary" icon="search">
|
<modal ref="editModal" title="编辑用户">
|
||||||
查询
|
<Wb-form ref="formValidate" :label-width="60">
|
||||||
</Wb-button>
|
<Form-item label="姓名：" prop="name">
|
||||||
</div>
|
<wb-input v-model="editObj.name" placeholder="请输入用户名"></wb-input>
|
||||||
</fes-search-panel>
|
</Form-item>
|
||||||
<fes-list-panel>
|
<Form-item label="年龄：" prop="name">
|
||||||
<Wb-table :data="data">
|
<wb-input v-model="editObj.age" type="number" placeholder="请输入用户名"></wb-input>
|
||||||
<Column prop="date" name="日期" />
|
</Form-item>
|
||||||
<Column prop="name" name="姓名" />
|
<Form-item label="日期：" prop="name">
|
||||||
<Column prop="age" name="年龄" />
|
<Wb-input-date-picker v-model="editObj.date" />
|
||||||
<Column prop="adr" name="地址" />
|
</Form-item>
|
||||||
<Column prop="status" name="等级" />
|
<Form-item>
|
||||||
</Wb-table>
|
<Wb-button ref="editButton" @click="handleEdit" type="primary">提交</Wb-button>
|
||||||
<Pagination :size="paginationOption.pageSize" :current="paginationOption.currentPage" :total="paginationOption.totalPage" @on-change="changePage" />
|
</Form-item>
|
||||||
</fes-list-panel>
|
</Wb-form>
|
||||||
|
</modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script type="text/ecmascript-6">
|
<script>
|
||||||
export default {
|
export default {
|
||||||
FesDataCache: 'test',
|
|
||||||
FesData() {
|
FesData() {
|
||||||
return {
|
return {
|
||||||
query: {
|
query: {
|
||||||
name: '',
|
name: '',
|
||||||
id: ''
|
id: ''
|
||||||
},
|
},
|
||||||
data: [{
|
editObj: {
|
||||||
name: '张晓刚',
|
name: '',
|
||||||
age: 24,
|
age: '',
|
||||||
date: new Date(2016, 9, 10),
|
date: ''
|
||||||
adr: '北京市海淀区西二旗',
|
},
|
||||||
status: 1
|
data: [
|
||||||
}, {
|
{
|
||||||
name: '李晓红',
|
name: '张晓刚',
|
||||||
age: 26,
|
age: 24,
|
||||||
date: new Date(2016, 9, 11),
|
date: new Date(2016, 9, 10),
|
||||||
adr: '北京市海淀区西二旗',
|
adr: '北京市海淀区西二旗',
|
||||||
status: 2
|
status: 1
|
||||||
}, {
|
},
|
||||||
name: '隔壁老王',
|
{
|
||||||
age: 22,
|
name: '李晓红',
|
||||||
date: new Date(2016, 9, 12),
|
age: 26,
|
||||||
adr: '北京市海淀区西二旗',
|
date: new Date(2016, 9, 11),
|
||||||
status: 3
|
adr: '北京市海淀区西二旗',
|
||||||
}, {
|
status: 2
|
||||||
name: '我爸是李刚',
|
},
|
||||||
age: 19,
|
{
|
||||||
date: new Date(2016, 9, 13),
|
name: '隔壁老王',
|
||||||
adr: '北京市海淀区西二旗',
|
age: 22,
|
||||||
status: 4
|
date: new Date(2016, 9, 12),
|
||||||
}],
|
adr: '北京市海淀区西二旗',
|
||||||
|
status: 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '我爸是李刚',
|
||||||
|
age: 19,
|
||||||
|
date: new Date(2016, 9, 13),
|
||||||
|
adr: '北京市海淀区西二旗',
|
||||||
|
status: 4
|
||||||
|
}
|
||||||
|
],
|
||||||
paginationOption: {
|
paginationOption: {
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
totalPage: 2
|
totalPage: 2
|
||||||
}
|
},
|
||||||
|
action: [
|
||||||
|
{
|
||||||
|
text: '修改',
|
||||||
|
func(trData) {
|
||||||
|
Object.assign(this.editObj, trData);
|
||||||
|
this.$refs.editModal.show();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '删除',
|
||||||
|
func(trData) {
|
||||||
|
this.$Message.confirm('警告', `确认删除用户${trData.name}吗`).then((index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
this.$Toast.success('删除用户成功！', { align: 'top' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
FesReady() {
|
FesReady() {},
|
||||||
console.log(this);
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
changePage({ current, size }) {
|
changePage({ current, size }) {
|
||||||
this.paginationOption.currentPage = current;
|
this.paginationOption.currentPage = current;
|
||||||
this.paginationOption.pageSize = size;
|
this.paginationOption.pageSize = size;
|
||||||
},
|
},
|
||||||
search() {
|
search() {},
|
||||||
this.FesApp.router.push('/test');
|
add() {
|
||||||
|
this.$refs.createModal.show();
|
||||||
|
},
|
||||||
|
handleAdd() {
|
||||||
|
this.$refs.createModal.close();
|
||||||
|
this.$Toast.success('创建用户成功！', { align: 'top' });
|
||||||
|
},
|
||||||
|
handleEdit() {
|
||||||
|
this.$refs.editModal.close();
|
||||||
|
this.$Toast.success('编辑用户成功！', { align: 'top' });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,28 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="article">
|
|
||||||
<h2>{{$t('overview')}}</h2>
|
|
||||||
<p>
|
|
||||||
Fes的路由是根据src/pages目录自动生成的<br>
|
|
||||||
</p>
|
|
||||||
<h2>生成规则</h2>
|
|
||||||
<pre>
|
|
||||||
pages
|
|
||||||
├── index.fes # 根路由页面 路径 http://localhost:5000/index.html#!/
|
|
||||||
├── a.fes # 路径 /a
|
|
||||||
├── b
|
|
||||||
│ ├── index.fes # 路径 /b
|
|
||||||
│ ├── @id.fes # 动态路由 /b/:id
|
|
||||||
│ └── c.fes # 路径 /b/c(优先于/b/:id进行匹配)
|
|
||||||
└── layout.fes # 根路由下所有page共用的外层
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script type="text/ecmascript-6">
|
|
||||||
export default {
|
|
||||||
FesData() {
|
|
||||||
return {
|
|
||||||
value: +new Date()
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user