完成基本表单
This commit is contained in:
lin-xin
parent
36a2c7116c
commit
0fd543b566
53
README.md
53
README.md
|
|
@ -1,21 +1,46 @@
|
|||
# manage-system
|
||||
前言
|
||||
|
||||
> A Vue.js project
|
||||
这个解决方案适合什么场景，为什么采用这个解决方案，有什么有点与缺点，后续扩展与维护，自己想说点什么就说什么。
|
||||
|
||||
## Build Setup
|
||||
1、目录结构介绍
|
||||
|
||||
``` bash
|
||||
# install dependencies
|
||||
npm install
|
||||
2、安装步骤
|
||||
|
||||
# serve with hot reload at localhost:8080
|
||||
npm run dev
|
||||
3、组件使用说明与演示
|
||||
|
||||
# build for production with minification
|
||||
npm run build
|
||||
4、调试部署上传
|
||||
|
||||
# build for production and view the bundle analyzer report
|
||||
npm run build --report
|
||||
```
|
||||
5、单元测试（可选）
|
||||
|
||||
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
||||
6、其他注意事项
|
||||
|
||||
表格
|
||||
|
||||
基础表格
|
||||
|
||||
Datatable
|
||||
|
||||
参考 Datatable中文网
|
||||
|
||||
表单
|
||||
|
||||
基本表单
|
||||
|
||||
编辑器
|
||||
|
||||
可以参考富文本编辑器markdow支持组件 Laverna https://laverna.cc/index.html
|
||||
|
||||
文件上传
|
||||
|
||||
上传组件使用webuploader http://fex.baidu.com/webuploader/getting-started.html
|
||||
|
||||
图片裁剪
|
||||
|
||||
日期控件
|
||||
|
||||
UI元素
|
||||
|
||||
弹出框alert
|
||||
确认框confirm
|
||||
提示框
|
||||
树形图
|
||||
|
|
|
|||
103
package.json
103
package.json
|
|
@ -1,53 +1,54 @@
|
|||
{
|
||||
"name": "manage-system",
|
||||
"version": "1.0.0",
|
||||
"description": "基于Vue.js 2.x系列 + element-ui 内容管理系统解决方案",
|
||||
"author": "lin-xin <2981207131@qq.com>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "node build/dev-server.js",
|
||||
"build": "node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"element-ui": "^1.1.6",
|
||||
"vue": "^2.1.10",
|
||||
"vue-router": "^2.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.7.2",
|
||||
"babel-core": "^6.22.1",
|
||||
"babel-loader": "^6.2.10",
|
||||
"babel-plugin-transform-runtime": "^6.22.0",
|
||||
"babel-preset-es2015": "^6.22.0",
|
||||
"babel-preset-stage-2": "^6.22.0",
|
||||
"babel-register": "^6.22.0",
|
||||
"chalk": "^1.1.3",
|
||||
"connect-history-api-fallback": "^1.3.0",
|
||||
"css-loader": "^0.26.1",
|
||||
"eventsource-polyfill": "^0.9.6",
|
||||
"express": "^4.14.1",
|
||||
"extract-text-webpack-plugin": "^2.0.0-rc.2",
|
||||
"file-loader": "^0.10.0",
|
||||
"friendly-errors-webpack-plugin": "^1.1.3",
|
||||
"function-bind": "^1.1.0",
|
||||
"html-webpack-plugin": "^2.28.0",
|
||||
"http-proxy-middleware": "^0.17.3",
|
||||
"webpack-bundle-analyzer": "^2.2.1",
|
||||
"semver": "^5.3.0",
|
||||
"opn": "^4.0.2",
|
||||
"ora": "^1.1.0",
|
||||
"shelljs": "^0.7.6",
|
||||
"url-loader": "^0.5.7",
|
||||
"vue-loader": "^10.3.0",
|
||||
"vue-style-loader": "^2.0.0",
|
||||
"vue-template-compiler": "^2.1.10",
|
||||
"webpack": "^2.2.1",
|
||||
"webpack-dev-middleware": "^1.10.0",
|
||||
"webpack-hot-middleware": "^2.16.1",
|
||||
"webpack-merge": "^2.6.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.0.0",
|
||||
"npm": ">= 3.0.0"
|
||||
}
|
||||
"name": "manage-system",
|
||||
"version": "1.0.0",
|
||||
"description": "基于Vue.js 2.x系列 + element-ui 内容管理系统解决方案",
|
||||
"author": "lin-xin <2981207131@qq.com>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "node build/dev-server.js",
|
||||
"build": "node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"element-ui": "^1.1.6",
|
||||
"vue": "^2.1.10",
|
||||
"vue-router": "^2.2.0",
|
||||
"vue-tables-2": "^0.4.33"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.7.2",
|
||||
"babel-core": "^6.22.1",
|
||||
"babel-loader": "^6.2.10",
|
||||
"babel-plugin-transform-runtime": "^6.22.0",
|
||||
"babel-preset-es2015": "^6.22.0",
|
||||
"babel-preset-stage-2": "^6.22.0",
|
||||
"babel-register": "^6.22.0",
|
||||
"chalk": "^1.1.3",
|
||||
"connect-history-api-fallback": "^1.3.0",
|
||||
"css-loader": "^0.26.1",
|
||||
"eventsource-polyfill": "^0.9.6",
|
||||
"express": "^4.14.1",
|
||||
"extract-text-webpack-plugin": "^2.0.0-rc.2",
|
||||
"file-loader": "^0.10.0",
|
||||
"friendly-errors-webpack-plugin": "^1.1.3",
|
||||
"function-bind": "^1.1.0",
|
||||
"html-webpack-plugin": "^2.28.0",
|
||||
"http-proxy-middleware": "^0.17.3",
|
||||
"opn": "^4.0.2",
|
||||
"ora": "^1.1.0",
|
||||
"semver": "^5.3.0",
|
||||
"shelljs": "^0.7.6",
|
||||
"url-loader": "^0.5.7",
|
||||
"vue-loader": "^10.3.0",
|
||||
"vue-style-loader": "^2.0.0",
|
||||
"vue-template-compiler": "^2.1.10",
|
||||
"webpack": "^2.2.1",
|
||||
"webpack-bundle-analyzer": "^2.2.1",
|
||||
"webpack-dev-middleware": "^1.10.0",
|
||||
"webpack-hot-middleware": "^2.16.1",
|
||||
"webpack-merge": "^2.6.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.0.0",
|
||||
"npm": ">= 3.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div class="sidebar">
|
||||
<el-menu default-active="1-1" class="el-menu-vertical-demo" theme="dark" unique-opened>
|
||||
<el-menu default-active="basetable" class="el-menu-vertical-demo" theme="dark" unique-opened router>
|
||||
<el-submenu index="1">
|
||||
<template slot="title"><i class="el-icon-menu"></i>表格</template>
|
||||
<el-menu-item index="1-1">基础表格</el-menu-item>
|
||||
<el-menu-item index="1-2">Datatable</el-menu-item>
|
||||
<el-menu-item index="basetable">基础表格</el-menu-item>
|
||||
<el-menu-item index="vuetable">Datatable</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="2">
|
||||
<template slot="title"><i class="el-icon-date"></i>表单</template>
|
||||
<el-menu-item index="2-1">基本表单</el-menu-item>
|
||||
<el-menu-item index="baseform">基本表单</el-menu-item>
|
||||
<el-menu-item index="2-2">编辑器</el-menu-item>
|
||||
<el-menu-item index="2-3">文件上传</el-menu-item>
|
||||
</el-submenu>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>基本表单</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="form-box">
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item label="表单名称">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择器">
|
||||
<el-select v-model="form.region" placeholder="请选择">
|
||||
<el-option label="步步高" value="bbk"></el-option>
|
||||
<el-option label="小天才" value="xtc"></el-option>
|
||||
<el-option label="imoo" value="imoo"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择开关">
|
||||
<el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="多选框">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="步步高" name="type"></el-checkbox>
|
||||
<el-checkbox label="小天才" name="type"></el-checkbox>
|
||||
<el-checkbox label="imoo" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="单选框">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="步步高"></el-radio>
|
||||
<el-radio label="小天才"></el-radio>
|
||||
<el-radio label="imoo"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="文本框">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">提交</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: true,
|
||||
type: ['步步高'],
|
||||
resource: '小天才',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.form-box{
|
||||
width:600px;
|
||||
}
|
||||
.form-box .line{
|
||||
text-align: center;
|
||||
}
|
||||
.el-time-panel__content::after, .el-time-panel__content::before {
|
||||
margin-top: -7px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,15 +2,15 @@
|
|||
<div class="table">
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item>表单</el-breadcrumb-item>
|
||||
<el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>基础表格</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column prop="date" label="日期" sortable width="180">
|
||||
<el-table-column prop="date" label="日期" sortable width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="180">
|
||||
<el-table-column prop="name" label="姓名" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址" :formatter="formatter">
|
||||
</el-table-column>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<el-table-column label="操作" width="180">
|
||||
<template scope="scope">
|
||||
<el-button size="small"
|
||||
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div class="table">
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>基础表格</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import Vue from 'vue';
|
||||
import App from './App';
|
||||
import router from './router';
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-default/index.css'
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-default/index.css';
|
||||
|
||||
Vue.use(ElementUI);
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@ export default new Router({
|
|||
{
|
||||
path: '/basetable',
|
||||
component: resolve => require(['../components/page/BaseTable.vue'], resolve)
|
||||
},
|
||||
{
|
||||
path: '/vuetable',
|
||||
component: resolve => require(['../components/page/VueTable.vue'], resolve)
|
||||
},
|
||||
{
|
||||
path: '/baseform',
|
||||
component: resolve => require(['../components/page/BaseForm.vue'], resolve)
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue