1.2.2发布，详情更新记录

nmxiaowei · Apr 25, 2018 · 6682967 · 6682967
1 parent bed2e68
commit 6682967
Show file tree

Hide file tree

Showing 21 changed files with 180 additions and 108 deletions.
diff --git a/README.md b/README.md
@@ -2,15 +2,18 @@
 欢迎加入QQ交流群，互相学习   
 前端avue交流群：606410437  
 后台微服务群：23754102   
-服务端解决方案：https://gitee.com/log4j/pig
+服务端解决方案：[https://gitee.com/log4j/pig](https://gitee.com/log4j/pig)
 
 #### 技术文档
-- [avue技术文档](https://www.kancloud.cn/smallwei/avue/)<br />
+- [avue技术文档](https://www.kancloud.cn/smallwei/avue/)
 
 #### 源码地址
 - [码云地址:https://gitee.com/smallweigit/avue](https://gitee.com/smallweigit/avue)
 - [github地址：https://github.com/nmxiaowei/avue](https://github.com/nmxiaowei/avue)
 
+#### 更新日志
+- [更新日志](./UPDATE.md)
+
 #### 在线demo
 - [crud和form组件(html-demo)](http://sandbox.runjs.cn/show/xjjyj1cj)
 - [演示地址1:http://avue.2bugs.cn](http://avue.2bugs.cn)

diff --git a/UPDATE.md b/UPDATE.md
@@ -0,0 +1,55 @@
+#### 1.2.2
+
+ **crud** 
+- 新增：editVisdiplay和addVisdiplay，表单新增和编辑的隐藏控制
+- 新增：editDisabled表单编辑时候禁止
+- 新增：maxHeight表格最大高度
+- 新增：defaultSort默认排序字段,例如{prop: 'date', order: 'descending'}
+- 新增：minWidth列的最小宽度
+- 新增：sortable列表排序
+- 新增：stripe斑马条纹
+- 新增：showHeader是否显示表头
+- 新增：formatter自定义表单显示格式
+- 删除：visdiplay和disabled列属性
+- 修改：调整演示table的演示demo
+
+ **路由**
+- 修改：keepAlive路由缓存机制默认为false
+
+ **其他**
+- 加入主题颜色切换组件
+- 修复：top.scss样式
+
+#### 1.2.1
+
+ **crud** 
+- 新增：表格expand展开属性
+- 新增：menuAlign操作栏对其方式
+- 新增：列的align表格内容对其方式
+- 新增：列的headAlign表格头部内容对其方式
+- 修复：修复表格新增时候验证规则报错，在编辑窗口不消失问题
+
+ **路由**
+- 新增：keepAlive路由缓存机制
+
+ **其他**
+- 扩展在线demo
+
+#### 1.2.0
+
+**crud**
+- 优化：优化crud生成器
+
+**目录结构**
+- 新增：独立打包avue.min.js单独使用
+- 新增：avue--crud-html的在线演示demo
+- 优化：调整目录结构，增加lib目录
+- 删除：去掉了avue后台框架中crud和form组件的源码
+
+#### 1.1.0
+
+**目录结构** 
+- 调整：crud组件和form组件独立出来，其他项目有可以直接引用
+- 调整：将avue项目中crud组件和部分子组件以及form组件设置为全局变量
+- 调整：合并form表单和crud组件的编辑表单，公用一个form组件底层
+- 说明：源码位于packages包中
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
 	<meta name="apple-mobile-web-app-status-bar-style" content="black">
 	<meta name="format-detection" content="telephone=no">
 	<meta http-equiv="X-UA-Compatible" content="chrome=1" />
-	<link rel="stylesheet" href="/static/cdn/element-ui/2.3.4/theme-chalk/index.css">
+	<link rel="stylesheet" href="/static/cdn/element-ui/2.3.6/theme-chalk/index.css">
 	<link rel="stylesheet" href="/static/cdn/animate/3.5.2/animate.css">
 	<link rel="stylesheet" href="/static/cdn/iconfont/1.0.0/index.css">
 	<title>Avue 通用管理 系统快速开发框架</title>
@@ -24,7 +24,7 @@
 	<script src="/static/cdn/vuex/2.4.1/vuex.min.js" charset="utf-8"></script>
 	<script src="/static/cdn/vue-router/3.0.1/vue-router.js" charset="utf-8"></script>
 	<script src="/static/cdn/axios/1.0.0/axios.min.js" charset="utf-8"></script>
-	<script src="/static/cdn/element-ui/2.3.4/index.js" charset="utf-8"></script>
+	<script src="/static/cdn/element-ui/2.3.6/index.js" charset="utf-8"></script>
 </body>
 
 </html>
diff --git a/packages/crud/src/main.vue b/packages/crud/src/main.vue
@@ -1,58 +1,56 @@
 <template>
   <div class="crud-container pull-auto">
-    <el-table :data="tableData" @row-click="rowClick" @row-dblclick="rowDblclick" :height="tableOption.height" ref="table" :style="{width:setPx(tableOption.width,'99.5%')}" style="margin:0 auto;box-sizing:border-box;" :border="tableOption.border" v-loading="tableLoading" @selection-change="selectionChange">
+    <el-table :data="tableData" :stripe="tableOption.stripe" :show-header="tableOption.showHeader" :default-sort="tableOption.defaultSort" @row-click="rowClick" @row-dblclick="rowDblclick" max-height="tableOption.maxHeight" :height="tableOption.height" ref="table" :width="setPx(tableOption.width,'100%')" :border="tableOption.border" v-loading="tableLoading" @selection-change="selectionChange">
+      <!-- 下拉弹出框  -->
+      <template v-if="tableOption.expand">
+        <el-table-column type="expand" width="50" fixed="left" align="center">
+          <template slot-scope="props">
+            <slot :row="props.row" name="expand"></slot>
+          </template>
+        </el-table-column>
+      </template>
       <!-- 选择框 -->
       <template v-if="tableOption.selection">
-        <el-table-column type="selection" width="55" fixed="left">
+        <el-table-column type="selection" width="50" fixed="left" align="center">
         </el-table-column>
       </template>
+
       <!-- 序号 -->
       <template v-if="tableOption.index">
-        <el-table-column type="index" width="50" fixed="left">
-        </el-table-column>
-      </template>
-      <!-- 下拉弹出框  -->
-      <template v-if="tableOption.expand">
-        <el-table-column type="expand" width="55" fixed="left">
-          <template slot-scope="props">
-            <slot :row="props.row" name="expand"></slot>
-          </template>
+        <el-table-column type="index" width="50" fixed="left" align="center">
         </el-table-column>
       </template>
       <!-- 循环列 -->
-      <template v-for="(column,index) in tableOption.column">
-        <el-table-column :min-width="column.minWidth" :align="column.align?column.align:tableOption.align" :header-align="column.headerAlign?column.headerAlign:tableOption.headerAlign" :width="column.width" :label="column.label" :fixed="column.fixed" :sortable="column.sortable" v-if="!column.hide">
-          <template slot-scope="scope">
-            <slot :row="scope.row" :dic="setDic(column.dicData,DIC[column.dicData])" :name="column.prop" v-if="column.solt"></slot>
-            <span v-else-if="!column.overHidden" v-html="detail(scope.row,column)"></span>
-            <el-popover v-else trigger="hover" placement="top">
-              <p>{{column.label}}: {{ scope.row[column.prop]}}</p>
-              <div slot="reference" class="name-wrapper">
-                <span v-html="detail(scope.row,column)" class="crud--overflow"></span>
-              </div>
-            </el-popover>
+      <el-table-column v-for="(column,index) in tableOption.column" :prop="column.prop" :key="column.prop" v-if="!column.hide" :show-overflow-tooltip="column.overHidden" :formatter="column.formatter" :min-width="column.minWidth" :sortable="column.sortable" :align="vaildData(column.align,tableOption.align)" :header-align="vaildData(column.headerAlign,tableOption.headerAlign)" :width="column.width" :label="column.label" :fixed="column.fixed">
+        <template slot-scope="scope">
+          <slot :row="scope.row" :dic="setDic(column.dicData,DIC[column.dicData])" :name="column.prop" v-if="column.solt"></slot>
+          <template v-else>
+            <span v-html="detail(scope.row,column)" v-if="column.type"></span>
+            <span v-else>{{scope.row[column.prop]}}</span>
           </template>
-        </el-table-column>
-      </template>
-      <el-table-column label="操作" :align="tableOption.menuAlign" :header-align="tableOption.menuHeaderAlign" :width="tableOption.menuWidth?tableOption.menuWidth:240" v-if="tableOption.menu==undefined?true:tableOption.menu">
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" v-if="vaildData(tableOption.menu,true)" label="操作" :align="tableOption.menuAlign" :header-align="tableOption.menuHeaderAlign" :width="vaildData(tableOption.menuWidth,240)">
         <template slot-scope="scope">
-          <template v-if="tableOption.menu!=undefined?tableOption.menu:true">
-            <el-button type="primary" icon="el-icon-edit" size="small" @click="rowEdit(scope.row,scope.$index)" v-if="tableOption.editBtn==undefined?true:tableOption.editBtn">编 辑</el-button>
-            <el-button type="danger" icon="el-icon-delete" size="small" @click="rowDel(scope.row,scope.$index)" v-if="tableOption.delBtn==undefined?true:tableOption.delBtn">删 除</el-button>
+          <template v-if="vaildData(tableOption.menu,true)">
+            <el-button type="primary" icon="el-icon-edit" size="small" @click="rowEdit(scope.row,scope.$index)" v-if="vaildData(tableOption.editBtn,true)">编 辑</el-button>
+            <el-button type="danger" icon="el-icon-delete" size="small" @click="rowDel(scope.row,scope.$index)" v-if="vaildData(tableOption.delBtn,true)">删 除</el-button>
           </template>
           <slot :row="scope.row" name="menu" :index="scope.$index"></slot>
         </template>
       </el-table-column>
     </el-table>
-    <el-pagination v-if="tableOption.page!=undefined?tableOption.page:true" class="crud-pagination pull-right" :current-page.sync="page.currentPage" :background="page.background?page.background:true" :page-size="page.pageSize" @current-change="currentChange" layout="total, sizes, prev, pager, next, jumper" :total="page.total"></el-pagination>
+    <!-- 分页 -->
+    <el-pagination v-if="vaildData(tableOption.page,true)" class="crud-pagination pull-right" :current-page.sync="page.currentPage" :background="page.background?page.background:true" :page-size="page.pageSize" @current-change="currentChange" layout="total, sizes, prev, pager, next, jumper" :total="page.total"></el-pagination>
+    <!-- 表单 -->
     <el-dialog :modal-append-to-body="false" :append-to-body="true" :title="boxType==0?'新增':'编辑'" :visible.sync="boxVisible" width="50%" :before-close="boxhandleClose">
       <el-form ref="tableForm" :model="tableForm" label-width="80px" :rules="tableFormRules">
         <el-row :gutter="20" :span="24">
           <template v-for="(column,index) in tableOption.column">
-            <el-col :span="column.span||12" v-if="!column.visdiplay">
+            <el-col :span="column.span || 12" v-if="boxType==0?vaildData(column.addVisdiplay,true):vaildData(column.editVisdiplay,true)">
               <el-form-item :label="column.label" :prop="column.prop" :label-width="setPx(column.labelWidth,tableOption.labelWidth || 80)">
                 <slot :value="tableForm[column.prop]" :column="column" :dic="setDic(column.dicData,DIC[column.dicData])" :name="column.prop+'Form'" v-if="column.formsolt"></slot>
-                <component :is="getComponent(column.type)" v-else v-model="tableForm[column.prop]" :size="column.size" :clearable="column.clearable" :type="column.type" :minRows="column.minRows" :maxRows="column.maxRows" :placeholder="column.label" :dic="setDic(column.dicData,DIC[column.dicData])" :disabled="boxType==0?(column.addDisabled!=undefined?column.addDisabled:column.disabled):column.disabled"></component>
+                <component :is="getComponent(column.type)" v-else v-model="tableForm[column.prop]" :size="column.size" :clearable="column.clearable" :type="column.type" :minRows="column.minRows" :maxRows="column.maxRows" :placeholder="column.label" :dic="setDic(column.dicData,DIC[column.dicData])" :disabled="boxType==0?vaildData(column.addDisabled,false):vaildData(column.editDisabled,false)"></component>
               </el-form-item>
             </el-col>
           </template>
@@ -69,6 +67,7 @@
 </template>
 <script>
 import crud from "avue/mixins/crud.js";
+import { validatenull } from "avue/utils/validate.js";
 export default {
   name: "AvueCrud",
   mixins: [crud()],
@@ -104,6 +103,7 @@ export default {
       deep: true
     }
   },
+  computed: {},
   mounted() {},
   props: {
     value: {
@@ -145,6 +145,12 @@ export default {
     }
   },
   methods: {
+    vaildData(val, dafult) {
+      if (typeof val == "boolean") {
+        return val;
+      }
+      return !validatenull(val) ? val : dafult;
+    },
     rulesInit() {
       this.tableFormRules = {};
       this.tableOption.column.forEach(ele => {
@@ -209,29 +215,15 @@ export default {
     //处理数据
     detail(row, column) {
       let result = "";
-      if (column.dataDetail) {
-        if (column.type) {
-          result = this.findByvalue(
-            typeof column.dicData == "string"
-              ? this.DIC[column.dicData]
-              : column.dicData,
-            row[column.prop]
-          );
-        } else {
-          result = row[column.prop];
-        }
-        result = column.dataDetail(row);
+      if (column.type) {
+        result = this.findByvalue(
+          typeof column.dicData == "string"
+            ? this.DIC[column.dicData]
+            : column.dicData,
+          row[column.prop]
+        );
       } else {
-        if (column.type) {
-          result = this.findByvalue(
-            typeof column.dicData == "string"
-              ? this.DIC[column.dicData]
-              : column.dicData,
-            row[column.prop]
-          );
-        } else {
-          result = row[column.prop];
-        }
+        result = row[column.prop];
       }
       return result;
     },
@@ -298,7 +290,8 @@ export default {
 
 <style lang="scss" scoped>
 .crud-container {
-  // padding: 8px 10px;
+  margin: 0 auto;
+  width: 99%;
 }
 .crud-pagination {
   margin-top: 15px;

diff --git a/packages/mixins/crud.js b/packages/mixins/crud.js
@@ -29,6 +29,9 @@ export default function () {
             GetDic: function (list) {
                 return new Promise((resolve, reject) => {
                     let result = [];
+                    if (validatenull(list)) {
+                        return;
+                    }
                     list.forEach(ele => {
                         result.push(new Promise((resolve, reject) => {
                             if (validatenull(this.dicUrl)) {

diff --git a/src/const/table/tableOption.js b/src/const/table/tableOption.js
@@ -1,36 +1,40 @@
 export default {
-    height: 400,
-    border: true,
+    maxHeight: 400,
     index: true,
     expand: true,
+    stripe: true,
     selection: true,
     menuWidth: 300,
     menuAlign: 'center',
     editBtn: false,
     align: 'center',
+    defaultSort: { prop: 'name', order: 'descending' },
     dic: ['GRADE', 'SEX', 'TYPE'],
     column: [
         {
             label: "用户名",
             prop: "username",
-            align: 'left',
-            width: "150",
+            width: 120,
+            sortable: true,
             solt: true,
-            dataDetail: row => {
-                return row.username + '自定义函数';
-            },
             rules: [{ required: true, message: "请输入用户名", trigger: "blur" }]
         },
         {
             label: "姓名",
             prop: "name",
-            disabled: true,
+            sortable: true,
             addDisabled: false,
+            formatter: (row, column) => {
+                return row.name + '1';
+            },
             formsolt: true,
         },
         {
             label: "数字",
             prop: "number",
+            sortable: true,
+            addVisdiplay: false,
+            editDisabled: true,
             type: 'number',
             hide: true,
         },
@@ -51,6 +55,7 @@ export default {
             label: "地址",
             prop: "address",
             width: "300",
+            sortable: true,
             type: 'textarea',
             maxRow: 4,
             minRow: 4,

diff --git a/src/mock/menu.js b/src/mock/menu.js
@@ -136,20 +136,20 @@ const second = [
     },
     children: [
       {
-        id: 10,
+        id: 20,
         label: "用户管理",
         href: '/admin/user',
         icon: 'icon-yonghuguanli',
         children: []
       }, {
-        id: 11,
+        id: 21,
         label: "角色管理",
         href: '/admin/role',
         icon: 'icon-jiaoseguanli',
         children: []
       },
       {
-        id: 12,
+        id: 22,
         label: "菜单管理",
         href: '/admin/menu',
         icon: 'icon-caidanguanli',

diff --git a/src/page/index/index.vue b/src/page/index/index.vue
@@ -6,9 +6,9 @@
       <div class="right">
         <tags ref="nav" class="nav"></tags>
         <keep-alive>
-          <router-view v-if="!$route.meta.keepAlive" class="main"></router-view>
+          <router-view v-if="$route.meta.keepAlive" class="main"></router-view>
         </keep-alive>
-        <router-view v-if="$route.meta.keepAlive" class="main"></router-view>
+        <router-view v-if="!$route.meta.keepAlive" class="main"></router-view>
       </div>
     </div>
   </div>

diff --git a/src/page/index/sidebar/sidebarItem.vue b/src/page/index/sidebar/sidebarItem.vue
@@ -8,7 +8,7 @@
       <el-submenu v-else :index="filterPath(item.name,index)" :key="item.name">
         <template slot="title">
           <i :class="item.icon"></i>
-          <span slot="title" :class="{display:!show}">{{item.label}}</span>
+          <span slot="title" :class="{'el-menu--display':!show}">{{item.label}}</span>
         </template>
         <template v-for="(child,cindex) in item.children">
           <el-menu-item :index="filterPath(child.href,cindex)" @click="open(child)" v-if="child.children.length==0" :key="cindex">
@@ -52,9 +52,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.display,
-.display + .el-submenu__icon-arrow {
-  display: none;
-}
+
 </style>