管理系统系列--基于vue iview 后台管理系统前端快速开发解决方案.zip

# Ffast-FE > 基于vue iview后台管理系统前端快速开发解决方案 ## Install ``` bash # install dependencies npm install or yarn # serve with hot reload at localhost:8000 npm run dev # build for production with minification npm run build ``` ## 简介 ``` bash Ffast-FE 是一套基于vue iview后台管理系统前端快速开发解决方案,以JSON数据驱动页面,几句代码即可快速开发属于你的页面。 ``` ## 演示地址 * http://demo.ffast.cn/ * http://39.107.104.190/ffast/ * http://118.126.66.11/ffast/ ## 技术栈 vue2 + vuex + vue-router + webpack + ES6 + axios + iview ## 后端解决方案Ffast-Java > https://github.com/ZhiYiDai/Ffast-Java ### 已实现模块 * 整体布局界面 * 用户管理 * 角色管理 * 字典管理 * 权限菜单 * 接口测试 * 系统日志 * 待办事项 * 定时任务 ### 开发中的模块 * 代码生成 ### 效果图           ## 一个增删改查表格页面 ( CrudView ) ``` bash <template> <CrudView :tableOptions="tableOptions" ></CrudView> </template> <script> /** * 弹出式表单参数 */ const tableEditOptions = { // 是否启用跳转到编辑页面，为空或false则用弹出模态框进行编辑 editPage: true, // 模态框宽度 width: 600, // 表单标签宽度 labelWidth: 70, // 表单数据 dynamic: [ [ {name: 'id', hidden: true}, { name: 'name', type: 'text', span: 12, label: '资源名', rules: {required: true} }, {name: 'parentId', type: 'treeSelect', dataFromTree: true, span: 12, label: '父资源'} ], [ {name: 'url', type: 'text', span: 24, label: '菜单Url'} ], [ {name: 'identity', type: 'text', span: 12, label: '标识符'}, {name: 'icon', type: 'text', span: 12, label: '图标'} ], [ { name: 'status', openText: '显示', closeText: '隐藏', type: 'switch', span: 12, label: '状态', value: 1, trueValue: 1, falseValue: 0 }, { name: 'resType', type: 'radio', span: 12, label: '类型', value: 1, data: [{label: '菜单', value: 1}, {label: '权限', value: 2}], rules: {required: true, type: 'number'} } ], [ { name: 'addBaseCrud', type: 'switch', openText: '是', closeText: '否', span: 12, label: '添加基础权限', value: false } ] ] } /** * 表格参数 */ const tableOptions = { editOptions: tableEditOptions, selection: [], pageSize: 20, // 表单窗口标题 title: '权限菜单', // 权限前缀 permsPrefix: 'res', // 表格数据地址 dataUrl: '/sys/res/list', // 表格数据增加地址 createUrl: '/sys/res/create', // 表格数据删除地址 deleteUrl: '/sys/res/delete', // 表格数据更新地址 updateUrl: '/sys/res/update', // 查询请求参数 param: {}, // 表格列数据 columns: [ {type: 'selection', width: 60, align: 'center'}, {key: 'name', title: '资源名', minWidth: 160, maxWidth: 280}, { key: 'resType', width: 80, title: '类型', // 类型枚举 （自动将值（id）转换为对应标签value） enum: [{value: '菜单', id: 1, el: 'strong'}, {value: '权限', id: 2}] }, {key: 'identity', title: '标识符', width: 200}, {key: 'url', title: '菜单Url', minWidth: 200, maxWidth: 400}, {key: 'parentId', title: '父资源', width: 160, dataFromTree: true}, { key: 'icon', width: 100, title: '菜单图标', render: (h, params) => { const row = params.row return h('Icon', { props: { type: row.icon } }) } }, {key: 'weight', title: '权重', width: 80}, { key: 'status', width: 80, title: '状态', enum: ['隐藏', '显示'] } ], // 表格搜索表单 searchDynamic: [ [ {name: 'name', label: '资源名', span: 4, type: 'text'}, { name: 'resType', type: 'select', data: [{label: '菜单', value: 1}, {label: '权限', value: 2}], span: 3, label: '类型' } ] ] } import CrudView from 'components/views/CrudView' export default { data() { return { tableOptions } }, computed: {}, methods: {}, mounted() { }, components: {CrudView} } </script> ``` ## 灵活丰富的动态表单组件(FormDynamic) ### 支持十多种表单组件： * input text(单行输入框) * input textarea(多行输入框) * select(下拉选择框) * radio(单选框) * checkbox(多选框) * treeSelect(选择树) * input number(数字输入框) * date(日期选择) * datetime(日期时间选择) * datetimerange(日期时间段选择) * ImgUpload(图片上传表单组件) * editor(基于vue-quill-editor富文本) * PopupSelect(弹出式选择) * Switch(开关选择) ## 代码样例 ``` bash <template> <div class="main-view main-view-full" style="padding-top: 50px"> <row> <i-col span="24"> <FormDynamic ref="dynamic1" v-model="fromData" :data="dynamic1" :label-width="120"> </FormDynamic> </i-col> </row> <PopupEdit ref="popupEdit" :width="1000" :dynamic="dynamic1" @on-success="editSuccess" :label-width="120"> </PopupEdit> <PopupSelect ref="popSelect" :content="userPage"></PopupSelect> </div> </template> <script> import {FormDynamic, PopupEdit, PopupSelect} from 'components/'; let self = null; const dynamic1 = [ [ {type: 'title', span: 24, text: 'Input'} ], [ { name: 'numberData', type: 'number', span: 6, // 最小值 min:1, // 最大值 max:80010 label: 'Number' }, { name: 'textData', type: 'text', span: 6, label: 'text', value: 'DefaultValue', rules: {required: true, type: 'string'} }, { name: 'passwordData', type: 'text', span: 6, password: true, label: 'PasswordText', rules: {required: true, type: 'string', message: '密码不能为空'} }, { name: 'textarea', type: 'text', placeholder: '多行文本输入框', span: 6, label: 'TextareaLabel', textarea: {minRows: 1, maxRows: 6} } ], [ {type: 'title', span: 24, text: 'date'} ], [ {name: 'date1', type: 'date', span: 6, label: 'DateLabel'}, {name: 'date2', type: 'datetime', span: 6, label: 'DateTimeLabel'}, {name: 'date3', type: 'datetimerange', span: 6, label: 'Datetimerange'} ], [ {type: 'title', span: 24, text: 'DataSelect'} ],