client change

Author: flute

build/vue-loader.conf.js

@@ -1,12 +1,19 @@
 var utils = require('./utils')
 var config = require('../config')
 var isProduction = process.env.NODE_ENV === 'production'
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 module.exports = {
   loaders: utils.cssLoaders({
     sourceMap: isProduction
       ? config.build.productionSourceMap
       : config.dev.cssSourceMap,
     extract: isProduction
+  }/*,{
+  	css: ExtractTextPlugin.extract({
+        use: ['css-loader'],
+        fallback: 'vue-style-loader',
+        publicPath:'../' 
+    }*/)
   })
 }

config/index.js

@@ -7,7 +7,7 @@ module.exports = {
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: './',
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.

package.json

@@ -11,11 +11,6 @@
     "server": "node server/bin/www"
   },
   "dependencies": {
-    "vue": "^2.3.3",
-    "vue-router": "^2.3.1",
-    "iview": "^2.0.0-rc.16",
-    "vue-axios": "^2.0.2",
-    "vuex": "^2.3.1",
     "async": "^2.1.4",
     "axios": "^0.16.1",
     "body-parser": "~1.15.1",
@@ -25,9 +20,15 @@
     "express": "~4.13.4",
     "express-session": "latest",
     "formidable": "^1.1.1",
+    "iview": "^2.0.0-rc.16",
+    "moment": "^2.18.1",
     "monk": "^5.0.2",
     "morgan": "~1.7.0",
-    "transliteration": "^1.6.2"
+    "transliteration": "^1.6.2",
+    "vue": "^2.3.3",
+    "vue-axios": "^2.0.2",
+    "vue-router": "^2.3.1",
+    "vuex": "^2.3.1"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",
@@ -43,23 +44,23 @@
     "css-loader": "^0.28.0",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.14.1",
-    "extract-text-webpack-plugin": "^2.0.0",
+    "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "^0.11.1",
     "friendly-errors-webpack-plugin": "^1.1.3",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
     "opn": "^4.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "ora": "^1.2.0",
     "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
     "url-loader": "^0.5.8",
     "vue-loader": "^12.1.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.3.3",
     "webpack": "^2.6.1",
+    "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.18.0",
     "webpack-merge": "^4.1.0"

server/models/clientModels/createClient.js

@@ -5,9 +5,12 @@ const createClient = (req, callback) => {
 	let name = req.body.name,
 		phone = req.body.phone,
 		address = req.body.address,
-		user = req.body.user;
+		user = req.body.user,
+		endtime = req.body.endtime,
+		max = req.body.max,
+		status = req.body.status;
 
-	if( !name || !phone || !address || !user ){
+	if( !name || !phone || !address || !user || !endtime || !max || status==null){
 		callback({
 			status: 0,
 			msg: '参数错误'
@@ -21,6 +24,9 @@ const createClient = (req, callback) => {
 		phone: phone,
 		address: address,
 		user: user,
+		endtime: endtime,
+		max: max,
+		status: status,
 		flag: 1
 	})
 	.then((result) => {

server/models/clientModels/updateClient.js

@@ -8,8 +8,11 @@ const updateClient = (req, callback) => {
 		phone = req.body.phone,
 		address = req.body.address,
 		user = req.body.user,
+		endtime = req.body.endtime,
+		max = req.body.max,
+		status = req.body.status,
 		admin = req.session.user._id;
-	if( !id || !name || !phone || !address || !user || !admin ){
+	if( !id || !name || !phone || !address || !user || !admin || !endtime || !max || status==null){
 		callback({
 			status: 0,
 			msg: '参数错误'
@@ -28,6 +31,9 @@ const updateClient = (req, callback) => {
 				phone: phone,
 				address: address,
 				user: user,
+				endtime: endtime,
+				max: max,
+				status: status,
 				flag: result.flag
 			}
 			if( result.user == admin ){

server/models/userModels/updateUser.js

@@ -24,10 +24,11 @@ const createUser = (req, callback) => {
 	.then((result) => {
 		if( result ){
 			if( result.parents.indexOf( creator )>=0 ){
+				let password = result.pwd == pwd ? result.pwd : md5(pwd)
 				let data = {
 					account: account,
 					name: name,
-					pwd: md5(pwd),
+					pwd: password,
 					roles: roles,
 					parents: result.parents,
 					flag: result.flag

src/App.vue

@@ -249,4 +249,26 @@ table tbody tr:hover{
 	-ms-align-content: center;
 	line-height: 24px;
 }
+.ivu-input-wrapper{
+	margin-bottom: 0 !important;
+}
+.login-form .ivu-input-wrapper{
+	margin-bottom: 15px !important;
+}
+.ivu-modal-body p{
+	margin-bottom: 10px;
+}
+.demo-spin-icon-load{
+    animation: ani-demo-spin 1s linear infinite;
+}
+@keyframes ani-demo-spin {
+    from { transform: rotate(0deg);}
+    50%  { transform: rotate(180deg);}
+    to   { transform: rotate(360deg);}
+}
+.demo-spin-col{
+    height: 100px;
+    position: relative;
+    border: 1px solid #eee;
+}
 </style>

src/assets/logo.png

@@ -23,6 +23,9 @@
             					<td>联系电话</td>
             					<td>联系地址</td>
             					<td>绑定用户</td>
+            					<td>服务开通状态</td>
+            					<td>截止时间</td>
+            					<td>最大使用人数</td>
             					<td>操作</td>
             				</tr>
             			</thead>
@@ -33,6 +36,9 @@
             					<td>{{client.phone}}</td>
             					<td>{{client.address}}</td>
             					<td>{{client.username}}</td>
+            					<td>{{client.status?'已开通':'未开通'}}</td>
+            					<td>{{changeTime(client.endtime)}}</td>
+            					<td>{{client.max}}</td>
             					<td>
             						<Button type="info" @click.stop="doedit(client._id)">编辑</Button>
             						<Button type="error" @click.stop="remove(client._id)">删除</Button>
@@ -42,6 +48,9 @@
             		</table>
             		<p class="notip" v-show="clients.length==0">没有找到您搜索的客户~</p>
             	</div>
+            	<Spin fix v-show="loading">
+	                <Icon type="load-c" size=36 class="demo-spin-icon-load"></Icon>
+	            </Spin>
             	<div class="paginator">
         			<Page 
         			:total="clients.length" 
@@ -75,6 +84,23 @@
 			    	<Option v-for="item in users" :value="item._id" :key="item">{{ item.name }}</Option>
 			    </Select>
 	        </p>
+
+	        <p>
+	        	<span class="input-label">服务开通状态</span>
+	        	<Select v-model="selectStatus" style="width:250px" filterable>
+			    	<Option v-for="item in status" :value="item.value" :key="item">{{ item.label }}</Option>
+			    </Select>
+	        </p>
+	        <p>
+	        	<span class="input-label">截止时间</span>
+	        	<!-- <Input v-model="endtime" placeholder="请选择截止时间" style="width: 250px"></Input> -->
+	        	<Date-picker v-model="endtime" type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
+	        </p>
+	        <p>
+	        	<span class="input-label">使用人数上限</span>
+	        	
+	        	<Input-number :min="1" v-model="max" placeholder="请输入使用人数上限" style="width: 250px"></Input-number>
+	        </p>
 	        <div slot="footer">
 	            <Button @click="cancel()">取消</Button>
 	            <Button type="success" @click="submit()">确认</Button>
@@ -88,12 +114,15 @@ export default {
 	name: 'client',
 	data(){
 		return{
+			loading: true,
 			newClient: false,
 			modalTitle: "新增客户",
 			name: '',
 			phone: '',
 			address: '',
 			selectUser: '',
+			endtime: '',
+			max: null,
 			users: [],
 			clients: [],
 			clientArr:[],
@@ -106,6 +135,14 @@ export default {
 				label: '所属用户',
 				value: 'user'
 			}],
+			selectStatus: 0,
+			status: [{
+				label: '开通',
+				value: 1
+			},{
+				label: '未开通',
+				value: 0
+			}],
 			search:'',
 			pageSize:10,
 			pageCurrent:1
@@ -133,10 +170,11 @@ export default {
 					this.clients = res.data
 					this.clientArr = res.data
 				}
+				this.loading = false
 			})
 		},
 		submit(){
-			if( !this.name || !this.phone || !this.address || !this.selectUser ){
+			if( !this.name || !this.phone || !this.address || !this.selectUser || !this.endtime || !this.max){
 				this.$Message.warning({content: '请填写完整信息', duration: 3, closable: true});
 				return;
 			}
@@ -146,7 +184,10 @@ export default {
 					name: this.name, 
 					phone: this.phone, 
 					address: this.address, 
-					user: this.selectUser})
+					user: this.selectUser,
+					endtime: this.endtime,
+					max: this.max,
+					status: this.selectStatus})
 					.then( response => response.data )
 					.then( res => {
 						if(!this.checkLogin(res))return;
@@ -165,7 +206,10 @@ export default {
 					name: this.name, 
 					phone: this.phone, 
 					address: this.address, 
-					user: this.selectUser})
+					user: this.selectUser,
+					endtime: this.endtime,
+					max: this.max,
+					status: this.selectStatus})
 					.then( response => response.data )
 					.then( res => {
 						if(!this.checkLogin(res))return;
@@ -216,6 +260,9 @@ export default {
 					this.name = this.clients[i].name
 					this.phone = this.clients[i].phone
 					this.address = this.clients[i].address
+					this.endtime = this.clients[i].endtime
+					this.max = this.clients[i].max
+					this.selectStatus = this.clients[i].status
 					this.edit = this.clients[i]
 					// 遍历users，找出当前编辑的用户拥有的角色
 					for( let j=0;j<this.users.length;j++ ){
@@ -235,6 +282,9 @@ export default {
 			this.name = ''
 			this.phone = ''
 			this.address = ''
+			this.endtime = ''
+			this.max = null
+			this.selectStatus = ''
 			this.modalTitle = "新增客户"
 			this.selectUser = []
 			this.edit = null
@@ -284,10 +334,15 @@ export default {
 		},
 	},
 	mounted(){
-		this.getclients()
 		this.getusers()
+		this.getclients()
 	}
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.ivu-date-picker{
+	display: inline-block;
+	width: 250px !important;
+}
+</style>

src/components/Client.vue

@@ -36,16 +36,19 @@
 						</template>
 						<p class="notip" v-show="roles.length==0">没有找到您搜索的角色~</p>
             		</Row>
-            		<div class="paginator">
-            			<Page 
-            			:total="roles.length" 
-            			:page-size="pageSize" 
-            			:current="pageCurrent" 
-            			@on-change="changepage"
-            			show-elevator></Page>
-            		</div>
-            		<!-- <pre>{{roles}}</pre> -->
             	</div>
+            	<Spin fix v-show="loading">
+	                <Icon type="load-c" size=36 class="demo-spin-icon-load"></Icon>
+	            </Spin>
+	            <div class="paginator">
+        			<Page 
+        			:total="roles.length" 
+        			:page-size="pageSize" 
+        			:current="pageCurrent" 
+        			@on-change="changepage"
+        			show-elevator></Page>
+        		</div>
+        		<!-- <pre>{{roles}}</pre> -->
             </div>
         </div>
         <Modal @on-ok="submit" @on-cancel="cancel"
@@ -75,6 +78,7 @@ export default {
 	name: 'role',
 	data(){
 		return{
+			loading: true,
 			newRole: false,
 			modalTitle: '新增角色',
 			name:'',
@@ -111,6 +115,7 @@ export default {
 				}else{
 					this.$Message.error({content: '请求数据出错，请稍后尝试！', duration: 3, closable: true});
 				}
+				this.loading = false
 			})
 		},
 		submit(){