组件样式调整

src/components/breadcrumb.vue

@@ -3,7 +3,7 @@
         <el-breadcrumb separator-class="el-icon-arrow-right">
             <el-breadcrumb-item>{{curmbFirst}}</el-breadcrumb-item>
             <el-breadcrumb-item :to="{ path:  jumPathThird }">{{curmbSecond}}</el-breadcrumb-item>
-            <el-breadcrumb-item>{{curmbThird}}</el-breadcrumb-item>
+            <el-breadcrumb-item v-if="curmbThird">{{curmbThird}}</el-breadcrumb-item>
         </el-breadcrumb>
     </div>
 </template>
@@ -34,7 +34,7 @@ export default {
     background: #F4F5F6;
     height: 50px;
     padding: 20px 0 0 13px;
-    z-index: 2;
+    z-index: 99;
     .el-breadcrumb__inner {
         font-size: 12px;
     }

src/router/router.js

 import App from '../App'
 
 const home = r => require.ensure([], () => r(require('../views/home')), 'home')
+const blank = r => require.ensure([], () => r(require('../views/blank')), 'blank')
 const itemManager = r => require.ensure([], () => r(require('../views/education/item-manager.vue')), 'item-manager')
 const itemComponent = r => require.ensure([], () => r(require('../views/education/item-component.vue')), 'item-component')
 const createComponent = r => require.ensure([], () => r(require('../views/education/create-component.vue')),'create-component')
@@ -20,6 +21,9 @@ export default [{
         },{
             path: '/home',
             component: home
+        },{
+            path: '/blank',
+            component: blank
         },{
             path: '/item-manager',
             component: itemManager

src/utils/validate.js

@@ -36,5 +36,13 @@ export function isvalidUsername(str) {
       const reg = /^[\u4e00-\u9fa5]{2,20}$/
       return reg.test(str)
   }
+  /* 通用密码验证(数字、字母、下划线或特殊字符且长度为0-150位) */
+export function isValidPassword(rule, value, callback, message) {
+    if (!/^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+){0,150}$/.test(value)) {
+      callback(new Error(message))
+    } else {
+      callback()
+    }
+}
   
   
\ No newline at end of file

src/views/blank.vue

+<template>
+    <div>
+        很抱歉，您暂时还没开通工作站功能
+    </div>
+</template>
+<script>
+export default {
+    
+}
+</script>
+<style>
+
+</style>
+
+

src/views/education/create-component.vue

@@ -8,8 +8,10 @@
         </bread-crumb>
         <div class="step-content">
             <el-steps :active="stepNum" simple>
-                <span class="step-one" :class="stepNum == 1 ? 'class-a' : 'class-b'">1</span><el-step title="基础信息"></el-step>
-                <span class="step-two" :class="stepNum == 2 ? 'class-a' : 'class-b'">2</span><el-step title="选择模块"></el-step>
+                <span class="step-one" :class="stepNum == 1 ? 'class-1' : 'class-2'">1</span>
+                <el-step title="基础信息" :class="stepNum == 1 ? 'class-1-text' : 'class-2-text'"></el-step>
+                <span class="step-two" :class="stepNum == 2 ? 'class-1' : 'class-2'">2</span>
+                <el-step title="选择模块" :class="stepNum == 2 ? 'class-1-text' : 'class-2-text'"></el-step>
             </el-steps>
             <div class="btn-container">
                 <el-button type="default" size="small" @click="justStorage">暂存</el-button>
@@ -24,7 +26,7 @@
                     <span class="word-num">0/20</span>
                 </el-form-item>
                 <el-form-item label="组件简介" prop="introduce">
-                    <el-input type="textarea" v-model="componentList.introduce" size="mini" placeholder="请输入组件简介" style="width:30%;"></el-input>
+                    <el-input type="textarea" rows="4" cols="10" v-model="componentList.introduce" size="mini" placeholder="请输入组件简介" style="width:37%;"></el-input>
                     <span class="word-num">0/150</span>
                 </el-form-item>
                 <el-form-item label="组件图片" prop="imageUrl">
@@ -37,8 +39,8 @@
                         <img v-if="componentList.imageUrl" :src="componentList.imageUrl" class="bg-img">
                         <img v-if="!componentList.imageUrl" class="bg-img" src="../../assets/image/small.png">
                         <div class="limit-text">
-                            <p>尺寸大小：750*420</p>
-                            <p>限制大小：2.0 Mb</p>
+                            <p>尺寸大小:750*420</p>
+                            <p>限制大小: 2.0 Mb</p>
                             <p>支持.jpg,.png格式</p>
                         </div>
                     </el-upload>
@@ -83,7 +85,7 @@
                 <el-button type="primary" size="small" @click="addFromModule" style="margin-left:0;">从模块添加</el-button>
             </div>
             <div class="tab-content">
-                <el-tabs type="card" v-model="firstTab" editable @tab-click="handleClick">
+                <el-tabs type="card" v-model="firstTab" closable @tab-remove="removeTab">
                     <el-tab-pane v-for="(item,index) in componentList.moduleList"  :key="index" :label="'模块' + parseInt(index + 1)" :name='"" + parseInt(index + 1)'>
                         <div>
                             <el-form ref="moduleForm" :model="item" :rules="rules" label-suffix=":" label-width="130px" style="width:100%;">
@@ -209,10 +211,6 @@
                     <el-input v-model="selectModuleForm.test"></el-input>
                 </el-form-item>
             </el-form>
-            <!-- <div class="dialog-foot">
-                <el-button type="default" size="small" @click="columnFormVisible = false">取消</el-button>
-                <el-button type="primary" size="small" @click="submitDialog">确定</el-button>
-            </div> -->
             <span slot="footer" class="dialog-footer dialog-foot">
                 <el-button type="default" size="small" @click="columnFormVisible = false">取 消</el-button>
                 <el-button type="primary" size="small" @click="submitDialog">确 定</el-button>
@@ -223,7 +221,7 @@
 <script>
 import BreadCrumb from '../../components/breadcrumb.vue'
 import { doUpload, getFilePath } from "../../utils/qiniuUtil"
-import { validateWord } from "../../utils/validate.js"
+import { validateWord, isValidPassword } from "../../utils/validate.js"
 let vm = null
 export default {
     components: {
@@ -268,7 +266,7 @@ export default {
             },
             basicRule: {
                 "name": [
-                    { required: true, message: '输入长度为2-20个中文', trigger: 'blur' },
+                    { required: true, message: '输入组件名称', trigger: 'blur' },
                     { validator: function(rule, value, callback) {
                         validateWord(rule, value, callback, '输入长度为2-20个中文')
                     },
@@ -276,6 +274,10 @@ export default {
                 ],
                 "introduce": [
                     { required: true, message: '请输入组件简介', trigger: 'blur' },
+                    { validator: function(rule, value, callback) {
+                        isValidPassword(rule, value, callback, '超出可输入的最大长度')
+                    },
+                    trigger: 'blur' }
                 ],
                 "imageUrl": [
                     { required: true, message: '请上传组件图片', trigger: 'blur' },
@@ -304,7 +306,7 @@ export default {
                 ],
                 "id": [
                     { required: true, message: '请输入考试id', trigger: 'blur' },
-                ],
+                ]
             }
         }
         
@@ -331,12 +333,25 @@ export default {
                 return;
             }
             if (!isLt2M) {
-                this.$message.error('上传图片大小不能超过2MB!');
+                vm.$message.error('上传图片大小不能超过2MB!');
+            }
+            let _img = new FileReader()
+            _img.readAsDataURL(file)
+            _img.onload = function(theFile) {
+                let image = new Image()
+                image.src = theFile.target.result
+                image.onload = function() {
+                    let _this = this
+                    if(_this.width != 750 || _this.height != 420) {
+                        vm.$message.info('上传图片宽度不合适，请重新上传')  
+                    }else {
+                        doUpload(vm,file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
+                            vm.componentList.imageUrl = path.fullPath
+                            vm.$message.success('上传成功')
+                        });
+                    }
+                }
             }
-            doUpload(vm,file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
-                vm.componentList.imageUrl = path.fullPath
-                vm.$message.success('上传成功')
-            });
         },
         // 是否配置证书
         selectCertificate(val) {
@@ -353,6 +368,10 @@ export default {
         // tab点击
         handleClick(tab,event) {
             
+        },
+        // 删除tab
+        removeTab() {
+
         },
         // 添加空白模块
         addModule() {
@@ -561,11 +580,19 @@ export default {
         .el-step.is-simple .el-step__head {
             display: none;
         }
-        .class-a {
+        .class-1 {
             color: #409EFF;
+            border: 1px solid #409EFF !important;
         }
-        .class-b {
+        .class-2 {
             color: #999;
+            border: 1px solid #999 !important;
+        }
+        .class-1-text .el-step__title{
+            color: #409EFF !important;
+        }
+        .class-2-text .el-step__title{
+            color: #999 !important;
         }
         .el-steps--simple {
             float: left;

src/views/education/item-component.vue

@@ -35,10 +35,10 @@
                 <el-button type="primary" size="small" @click="createComponent">新建项目组件</el-button>
             </el-row>
             <el-table :data="tableData" style="width: 100%">
-                <el-table-column prop="name" label="ID编号" min-width="150" align="center"></el-table-column>
-                <el-table-column prop="name" label="组件名称" min-width="150" align="center"></el-table-column>
-                <el-table-column prop="name" label="发起人" min-width="150" align="center"></el-table-column>
-                <el-table-column prop="name" label="状态" min-width="150" align="center"></el-table-column>
+                <el-table-column prop="id" label="ID编号" min-width="100" align="center"></el-table-column>
+                <el-table-column prop="name" label="组件名称" min-width="200" align="center"></el-table-column>
+                <el-table-column prop="person" label="发起人" min-width="100" align="center"></el-table-column>
+                <el-table-column prop="status" label="状态" min-width="80" align="center"></el-table-column>
                 <el-table-column label="操作" fixed="right" align="center" min-width="200">
                     <template slot-scope="scope">
                         <el-button type="primary" size="small">编辑</el-button>
@@ -82,7 +82,12 @@ export default {
                 status: ''
             },
             statuSelect: [],
-            tableData: [],
+            tableData: [{
+                id: '233425',
+                name: '国际基本公共卫生服务项目',
+                person: '张三',
+                status: '草稿'
+            }],
             totalRows: 0,
             basicRule: {
                 "name": [

src/views/home.vue

-
 <template>
-  <div class="home-container">
-    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
-    <div class="home-table">
-      <el-table :data="tableData">
-        <el-table-column prop="date" label="Date" width="140"></el-table-column>
-        <el-table-column prop="name" label="Name" width="120"></el-table-column>
-        <el-table-column prop="address" label="Address"></el-table-column>
-      </el-table>
+    <div>
+        
     </div>
-    
-  </div>
 </template>
 <script>
-  import BreadCrumb from '../components/breadcrumb.vue'
-  export default {
-    components: {
-      BreadCrumb
-    },
-    data() {
-      const item = {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles'
-      };
-      return {
-        tableData: Array(10).fill(item),
-        curmbFirst: '首页',
-        curmbSecond: '首页'
-      }
-    }
-  };
+export default {
+    
+}
 </script>
-<style lang="scss">
- .home-container {
-   width: 100%;
-   .home-table {
-     padding-left: 20px;
-   }
- }
-  
+<style>
+
 </style>