add example

README.md

@@ -2,7 +2,7 @@
 
 > 基于vue iview后台管理系统前端快速开发解决方案
 
-## Build Setup
+## Install
 
 ``` bash
 # install dependencies
@@ -18,12 +18,14 @@ npm run build
 
 # 简介
 ``` bash
-Ffast-FE 是一套基于vue iview后台管理系统前端快速开发解决方案,已实现基本的系统管理页面,您可以用其中的组件快速开发属于你的页面。
-已实现页面（整体布局界面，用户管理，角色管理，字典管理，权限菜单，接口测试，系统日志）
+Ffast-FE 是一套基于vue iview后台管理系统前端快速开发解决方案,以JSON数据驱动页面,几句代码即可快速开发属于你的页面。
+已实现页面（整体布局界面，用户管理，角色管理，字典管理，权限菜单，接口测试，系统日志，待办事项）
 开发中的页面（代码生成）
 演示地址 http://demo.ffast.cn/  备用地址http://39.107.104.190/ffast
 ```
 
+# 后端解决方案Ffast-Java
+>  https://github.com/ZhiYiDai/Ffast-Java 
 
 ## 一个简单的增删改表格页面
 ``` bash
@@ -577,5 +579,4 @@ CrudView -> CrudTable -> DataTable  -> IView Table
                       -> PopupEdit  -> FormDynamic
                       -> Edit       -> FormDynamic
 ```
-# 后端解决方案
->  https://github.com/ZhiYiDai/Ffast-Java （Ffast java）文档整理中...
+

src/main.js

@@ -46,9 +46,6 @@ router.beforeEach((to, from, next) => {
     }
     else if (to.path === '/') {
       let main = OperatorUtils.getMain();
-      if (main === null) {
-        main = "index";
-      }
       next(main);
       NProgress.done();
     }

src/pages/example/CrudTablePage.vue

@@ -0,0 +1,25 @@
+<style scoped>
+
+</style>
+
+<template>
+  <div class="main-view main-view-full" style="padding-top: 50px">
+    <row>
+    </row>
+  </div>
+</template>
+<script>
+
+  import {} from 'components/';
+  export default {
+    data () {
+      return {
+
+      }
+    },
+    computed: {},
+    methods: {},
+    mounted () {},
+    components: {}
+  }
+</script>

src/pages/example/CrudTreePage.vue

@@ -0,0 +1,25 @@
+<style scoped>
+
+</style>
+
+<template>
+  <div class="main-view main-view-full" style="padding-top: 50px">
+    <row>
+    </row>
+  </div>
+</template>
+<script>
+
+  import {} from 'components/';
+  export default {
+    data () {
+      return {
+
+      }
+    },
+    computed: {},
+    methods: {},
+    mounted () {},
+    components: {}
+  }
+</script>

src/pages/example/CrudTreeViewPage.vue

@@ -0,0 +1,54 @@
+<style scoped>
+
+</style>
+
+<template>
+  <CrudTreeView :treeOptions="treeOptions">
+  </CrudTreeView>
+</template>
+<script>
+  /**
+   * 弹出式表单参数
+   */
+  const treeEditOptions = {
+    width: 400,
+    labelWidth: 80,
+    dynamic: [
+      [
+        {name: 'id', hidden: true},
+        {name: 'parentId', type: 'treeSelect', dataFromTree: true, span: 24, label: '父类标识'},
+        {name: 'identity', type: 'text', span: 24, label: '分类标识', rules: {required: true}}
+      ],
+      [
+        {name: 'name', type: 'text', span: 24, label: '分类名称', rules: {required: true}}
+      ]
+    ]
+  };
+  /**
+   * 树参数
+   */
+  const treeOptions = {
+    showToolbar: true,
+    editOptions: treeEditOptions,
+    permsPrefix: 'dict',
+    categoryField: 'dictTypeId',
+    dataUrl: '/sys/dictType/list',
+    createUrl: '/sys/dictType/create',
+    deleteUrl: '/sys/dictType/delete',
+    updateUrl: '/sys/dictType/update',
+    title: '字典分类'
+  };
+
+  import {CrudTreeView} from 'components/';
+  export default {
+    data () {
+      return {
+        treeOptions
+      }
+    },
+    computed: {},
+    methods: {},
+    mounted () {},
+    components: {CrudTreeView}
+  }
+</script>

src/pages/example/CrudViewPage.vue

@@ -0,0 +1,22 @@
+<style scoped>
+
+</style>
+
+<template>
+
+</template>
+<script>
+
+  import {} from 'components/';
+  export default {
+    data () {
+      return {
+
+      }
+    },
+    computed: {},
+    methods: {},
+    mounted () {},
+    components: {}
+  }
+</script>

src/pages/example/DataSelectPage.vue

@@ -0,0 +1,90 @@
+<style scoped>
+
+</style>
+
+<template>
+  <div class="main-view main-view-full" style="padding-top: 50px">
+    <row style="padding-top: 50px">
+      small
+      </br>
+      <DataSelect size='small'
+                  dataUrl="/sys/role/list"
+                  :param='param1'
+                  style='width:200px'
+                  valField='id'
+                  textField='name'
+                  :disabled="false"
+                  placeholder="角色列表"
+                  @on-change="onSelectChange1"
+                  clearable
+                  v-model='val1'/>
+    </row>
+
+    <row style="padding-top: 50px">
+      绑定数据源
+      </br>
+      <DataSelect
+        dataUrl="/sys/role/list"
+        :param='param2'
+        style='width:200px'
+        valField='id'
+        textField='name'
+        :disabled="false"
+        placeholder="角色列表"
+        @on-change="onSelectChange1"
+        clearable
+        v-model='val2'/>
+    </row>
+    <row style="padding-top: 50px">
+      本地数据
+      </br>
+      <DataSelect
+        :data="[
+            {label: '选项1', value: 0}, {label: '选项2', value: 1},
+            {label: '选项3', value: 2}, {label: '选项4', value: 3}
+          ]"
+        style='width:200px'
+        :disabled="false"
+        placeholder="本地数据"
+        @on-change="onSelectChange1"
+        clearable
+        v-model='val2'/>
+    </row>
+    <row style="padding-top: 50px">
+      字典数据
+      </br>
+      <DataSelect
+        dict="job"
+        style='width:200px'
+        :disabled="false"
+        placeholder="字典数据"
+        @on-change="onSelectChange1"
+        clearable
+        v-model='val2'/>
+    </row>
+  </div>
+</template>
+<script>
+
+  import {DataSelect} from 'components/';
+
+  export default {
+    data() {
+      return {
+        val1: null,
+        param1: {},
+        param2: {name: '超级'}
+      }
+    },
+    computed: {},
+    methods: {
+      onSelectChange1(value) {
+        alert(value);
+      }
+    },
+    mounted() {
+
+    },
+    components: {DataSelect}
+  }
+</script>