Skip to content

Commit 27e425d

Browse files
njleonzhangnjleonzhang
committed
add play for dev
1 parent 0979af0 commit 27e425d

File tree

6 files changed

+221
-1
lines changed

6 files changed

+221
-1
lines changed

‎build/dev-server.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,16 @@ var express = require('express')
66
var webpack = require('webpack')
77
var opn = require('opn')
88
var proxyMiddleware = require('http-proxy-middleware')
9-
var webpackConfig = require('./webpack.dev.conf')
9+
10+
var parms = process.argv.slice(2);
11+
12+
var webpackConfig
13+
console.log(parms)
14+
if (parms[0] == "play") {
15+
webpackConfig = require('./webpack.play.conf')
16+
} else {
17+
webpackConfig = require('./webpack.dev.conf')
18+
}
1019

1120
// default port where dev server listens for incoming traffic
1221
var port = process.env.PORT || config.dev.port

‎build/webpack.play.conf.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
var config = require('../config')
2+
var webpack = require('webpack')
3+
var merge = require('webpack-merge')
4+
var utils = require('./utils')
5+
var baseWebpackConfig = require('./webpack.base.conf')
6+
var HtmlWebpackPlugin = require('html-webpack-plugin')
7+
8+
baseWebpackConfig.entry = {
9+
app: './play/main.js'
10+
}
11+
12+
// add hot-reload related code to entry chunks
13+
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
14+
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
15+
})
16+
17+
module.exports = merge(baseWebpackConfig, {
18+
module: {
19+
loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
20+
},
21+
// eval-source-map is faster for development
22+
devtool: '#source-map',
23+
plugins: [
24+
new webpack.DefinePlugin({
25+
'process.env': config.dev.env
26+
}),
27+
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
28+
new webpack.optimize.OccurrenceOrderPlugin(),
29+
new webpack.HotModuleReplacementPlugin(),
30+
new webpack.NoErrorsPlugin(),
31+
// https://github.com/ampedandwired/html-webpack-plugin
32+
new HtmlWebpackPlugin({
33+
filename: 'index.html',
34+
template: 'example/index.html',
35+
inject: true
36+
})
37+
]
38+
})

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"pagination"
1616
],
1717
"scripts": {
18+
"play": "node build/dev-server.js play",
1819
"dev": "node build/dev-server.js",
1920
"build": "node build/build.js",
2021
"demo": "node build/build-demo.js",

‎play/App.vue‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<style lang='scss'>
2+
body {
3+
margin: 0;
4+
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
5+
}
6+
7+
.app-wrapper {
8+
position: absolute;
9+
top: 0;
10+
right: 0;
11+
bottom: 0;
12+
left: 0;
13+
}
14+
</style>
15+
16+
<template lang="pug">
17+
.app-wrapper
18+
data-tables(:data='tableData', :actions-def='getActionsDef()', :checkbox-filter-def='getCheckFilterDef()', :row-action-def='getRowActionsDef()')
19+
el-table-column(prop='flow_no', label='No.', sortable='custom')
20+
el-table-column(prop='content', label='Content', sortable='custom')
21+
el-table-column(prop='create_time', label='Time', sortable='custom')
22+
el-table-column(prop='state', label='State', sortable='custom')
23+
el-table-column(prop='flow_type', label='Type', sortable='custom')
24+
el-table-column(prop='building_group', label='Building group', sortable='custom')
25+
el-table-column(prop='building', label='building', sortable='custom')
26+
el-table-column(prop='room_no', label='no', sortable='custom')
27+
el-table-column(prop='cellphone', label='tel', sortable='custom')
28+
</template>
29+
30+
<script>
31+
import dataTables from '../src/index.js'
32+
33+
export default {
34+
components: {dataTables},
35+
data() {
36+
return {
37+
tableData: []
38+
}
39+
},
40+
created() {
41+
this.tableData = [{
42+
'building': '5',
43+
'building_group': 'North',
44+
'cellphone': '13400000000',
45+
'content': 'Water flood',
46+
'create_time': '2016-10-01 22:25',
47+
'flow_no': 'FW201601010001',
48+
'flow_type': 'Repair',
49+
'flow_type_code': 'repair',
50+
'id': '111111',
51+
'room_id': '00501',
52+
'room_no': '501',
53+
'state': 'Created',
54+
'state_code': 'created'
55+
}, {
56+
'building': '6',
57+
'building_group': 'Sourth',
58+
'cellphone': '13400000000',
59+
'content': 'Lock broken',
60+
'create_time': '2016-10-01 22:25',
61+
'flow_no': 'FW201601010002',
62+
'flow_type': 'Repair',
63+
'flow_type_code': 'repair',
64+
'id': '2222222',
65+
'room_id': '00701',
66+
'room_no': '701',
67+
'state': 'Assigned',
68+
'state_code': 'assigned'
69+
}, {
70+
'building': '9',
71+
'building_group': 'North',
72+
'cellphone': '13400000000',
73+
'content': 'Help to buy some drinks',
74+
'create_time': '2016-10-02 22:25',
75+
'flow_no': 'FW201601010002',
76+
'flow_type': 'Help',
77+
'flow_type_code': 'help',
78+
'id': '2222222',
79+
'room_id': '00601',
80+
'room_no': '601',
81+
'state': 'Closed',
82+
'state_code': 'closed'
83+
}]
84+
},
85+
methods: {
86+
getActionsDef() {
87+
let self = this
88+
return {
89+
width: 5,
90+
def: [{
91+
name: 'new',
92+
handler() {
93+
self.$message('new clicked')
94+
},
95+
icon: 'plus'
96+
}, {
97+
name: 'import',
98+
handler() {
99+
self.$message('import clicked')
100+
},
101+
icon: 'upload'
102+
}]
103+
}
104+
},
105+
getCheckFilterDef() {
106+
return {
107+
width: 14,
108+
props: 'state_code',
109+
def: [{
110+
'code': 'created',
111+
'name': 'Created'
112+
}, {
113+
'code': 'assigned',
114+
'name': 'Assigned'
115+
}, {
116+
'code': 'accepted',
117+
'name': 'Accepted'
118+
}, {
119+
'code': 'closed',
120+
'name': 'Closed'
121+
}, {
122+
'code': 'cancelled',
123+
'name': 'Cancelled'
124+
}]
125+
}
126+
},
127+
getRowActionsDef() {
128+
let self = this
129+
return [{
130+
type: 'primary',
131+
handler(row) {
132+
self.$message('Edit clicked')
133+
console.log('Edit in row clicked', row)
134+
},
135+
name: 'Edit'
136+
}, {
137+
type: 'primary',
138+
handler(row) {
139+
self.$message('RUA in row clicked')
140+
console.log('RUA in row clicked', row)
141+
},
142+
name: 'RUA'
143+
}]
144+
}
145+
}
146+
}
147+
</script>

‎play/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>vue-data-tables</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<!-- built files will be auto injected -->
10+
</body>
11+
</html>

‎play/main.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// The Vue build version to load with the `import` command
2+
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3+
import Vue from 'vue'
4+
import App from './App'
5+
import ElementUI from 'element-ui'
6+
import 'element-ui/lib/theme-default/index.css'
7+
Vue.use(ElementUI)
8+
9+
/* eslint-disable no-new */
10+
new Vue({
11+
el: '#app',
12+
template: '<App/>',
13+
components: { App }
14+
})

0 commit comments

Comments
 (0)