Merge branch 'master' of 115.28.80.125:softwarefactory/vueelementtemplate

docs/styleguide/develop.md

 关于如何进行组件化开发，请见文档：http://factory.haomo-studio.com/frontend/react/react-element-based.html
+
+##### 待开发组件清单如下：
+

src/router/index.js

@@ -136,6 +136,15 @@ export const asyncRouterMap = [
               title: 'calendar',
               icon: 'table'
             }
+          },
+          {
+            path: 'iconMenu',
+            component: _import('haomo/components/iconMenu/index'),
+            name: 'haomo-iconMenu',
+            meta: {
+              title: '图标菜单',
+              icon: 'table'
+            }
           }
         ]
       },

src/utils/request.js

@@ -13,7 +13,7 @@ const service = axios.create({
 service.interceptors.request.use(config => {
   // Do something before request is sent
   if (store.getters.token) {
-    config.headers['X-Token'] = getToken() // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
+    config.headers['X-Auth-Token'] = getToken() // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
   }
   return config
 }, error => {

src/views/haomo/components/forms/index.vue

 <template>
   <div>
-    <hm-complex-form :schema="schema['HmUser']" :columns="showUserColumns" :buttons="showUserButtons" :tableId="tableId">
+    <hm-complex-form :schema="schema['HmUser']"
+                     :columns="showUserColumns"
+                     :buttons="showUserButtons"
+                     :confirmFunction="confirm"
+                     :cancelFunction="cancel"
+                     :tableId="tableId">
     </hm-complex-form>
   </div>
 </template>
@@ -19,7 +24,6 @@
     },
     data() {
       return {
-        // showUserColumns: ['username', 'loginid', 'password', 'mobile', 'email', 'createTime']
         // widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框
         showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'securityLevel', widgetType: 5 }, { name: 'type', widgetType: 2, options: ['选项1', '选项2'] }, { name: 'avatar', widgetType: 3, options: ['美女', '帅哥'] }, { name: 'departmentId', widgetType: 4 }, { name: 'createTime', widgetType: 6 }, { name: 'loginid', widgetType: 7, options: ['会员', '访客'] }],
         // 要显示按钮 暂只支持确定、保存、取消、提交、重置
@@ -36,7 +40,14 @@
       // console.log(this.schema)
       this.tableId = '0e26566e953449a7a7500c34be39fd26'
     },
-    methods: {}
+    methods: {
+      confirm() {
+        console.log('确定')
+      },
+      cancel() {
+        console.log('取消')
+      }
+    }
   }
 </script>
 <style scoped>

src/views/haomo/components/iconMenu/HmIconMenu.vue

+<template>
+  <div class="app-container documentation-container">
+    <el-collapse v-model="activeNames" @change="handleChange">
+      <el-collapse-item title="" name="1" style="width: 90%;margin:0 auto">
+        <el-row :gutter="20">
+          <el-col :span="4" v-for="(item,key) in icons" :key="key" style="margin-bottom: 20px;">
+            <i :class="item.className" style="margin-left: 5px;"></i>
+            <p>
+              <i class="hm-icon-menu_i" :style="{backgroundColor: item.color}"></i>
+              <span>{{item.text}}</span>
+            </p>
+          </el-col>
+        </el-row>
+
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script>
+  import _ from 'lodash'
+  import request from '@/utils/request'
+
+  /**
+   * 毫末科技的组件.
+   *
+   *   demo地址: factory.haomo-studio.com/vue-element/#/haomo/components/forms
+   * @author 王康
+   */
+  export default {
+    name: 'HmIconMenu',
+    // 集成其他组件
+    extends: {},
+    // 使用其它组件
+    components: {
+    },
+    // 混入公共对象
+    mixins: [],
+    props: {
+      /**
+       * 必传，组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
+       * 对于所有毫末科技的组件，必传schema，以完成数据的交互
+       */
+      schema: {
+        type: Object,
+        required: false
+      },
+      /**
+       * 必传，指定要显示的表单字段及类型。数组的每个元素须有name和widgetType两个字段，name表示要显示的表单字段，widgetType表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，取值1-7(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期格式，7表示单选框)，若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），对于复选框，如果只有一个备选项则不必传options
+       * 示例：[
+       *        { name: 'username', widgetType: 1 },
+       *        { name: 'securityLevel', widgetType: 5 },
+       *        { name: 'type', widgetType: 2, options: ['企业', '代理商'] },
+       *        { name: 'avatar', widgetType: 3 }, { name: 'departmentId', widgetType: 4 },
+       *        { name: 'createTime', widgetType: 6 }
+       *      ]
+       */
+      columns: {
+        type: Array,
+        required: false,
+        validator: function(value) {
+          if (typeof value !== 'object') {
+            console.warn(`传入的columns不符合要求，必须是数组`)
+            return false
+          }
+
+          return true
+        }
+      }
+    },
+    data() {
+      return {
+        activeNames: '1',
+        icons: [
+          { className: 'icon-公文审批', text: '公文审批', color: '#f7b55d' },
+          { className: 'icon-微平台', text: '微平台', color: '#4ea8ec' },
+          { className: 'icon-综合OA', text: '综合OA', color: '#f7b55d' },
+          { className: 'icon-议题征集', text: '议题征集', color: '#00bf8b' },
+          { className: 'icon-通讯录导出', text: '通讯录导出', color: '#f7b55d' },
+          { className: 'icon-检察课堂', text: '检察课堂', color: '#4ea8ec' },
+          { className: 'icon-检察官网', text: '检察官网', color: '#4ea8ec' },
+          { className: 'icon-总值电话', text: '总值电话', color: '#00bf8b' },
+          { className: 'icon-数据统计', text: '数据统计', color: '#f7b55d' },
+          { className: 'icon-内部公告', text: '内部公告', color: '#00bf8b' },
+          { className: 'icon-应用下载', text: '应用下载', color: '#4ea8ec' }
+        ]
+      }
+    },
+    created() {
+      // this.init()
+    },
+    methods: {
+      handleChange(val) {
+        console.log(val)
+      },
+      init() {
+        const self = this
+        // 如果没有传columns，则全部显示
+        // if (!self.columns || !self.columns.length) {
+        //   _.each(self.schema['columns'], function(column) {
+        //     const tmp = JSON.parse(JSON.stringify(column))
+        //     self.$set(tmp, 'code', tmp.code.toLowerCase())
+        //     self.showUserColumns.push(tmp)
+        //   })
+        // } else
+        if (self.columns && self.columns.length) {
+          self.showUserColumns = JSON.parse(JSON.stringify(self.columns))
+          // console.log(self.showUserColumns)
+          // 将字符串对象进行替换处理
+          _.each(self.showUserColumns, function(column, index) {
+            if (typeof column === 'object') {
+              // 生成一个新对象
+              const tmp = _.keyBy(self.schema['columns'], 'codeCamel')[column.name]
+              // console.log(tmp)
+              self.$set(tmp, 'code', tmp.code.toLowerCase())
+              self.$set(tmp, 'widgetType', column.widgetType || 1)
+              column.options && self.$set(tmp, 'options', column.options)
+              self.$set(self.showUserColumns, index, tmp) // 顺序
+              // console.log(self.showUserColumns)
+            }
+          })
+          console.log(self.showUserColumns)
+          // 提取v-model绑定的变量
+          _.each(self.showUserColumns, function(item) {
+            if (item.widgetType === 3 && item.options && item.options.length > 0) {
+              self.$set(self.formModel, item.codeCamel, [])
+            } else {
+              self.$set(self.formModel, item.codeCamel, '')
+            }
+          })
+
+          if (!request.defaults.baseURL) {
+            request.defaults.baseURL = '/org/api'
+          }
+        } else {
+          console.log('columns为必传字段!!')
+        }
+      }
+    }
+
+  }
+</script>
+<style scoped>
+  @import './iconfont.css';
+
+  .hm-icon-menu_i{
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    margin-right: 5px;
+  }
+</style>

src/views/haomo/components/iconMenu/iconfont.css

+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?ftr1fl');
+  src:  url('fonts/icomoon.eot?ftr1fl#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?ftr1fl') format('truetype'),
+    url('fonts/icomoon.woff?ftr1fl') format('woff'),
+    url('fonts/icomoon.svg?ftr1fl#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon-公文审批:before {
+  content: "\e900";
+  color: #f7b55d;
+}
+.icon-检察官网:before {
+  content: "\e901";
+  color: #4ea8ec;
+}
+.icon-检察课堂:before {
+  content: "\e902";
+  color: #4ea8ec;
+}
+.icon-内部公告:before {
+  content: "\e903";
+  color: #00bf8b;
+}
+.icon-数据统计:before {
+  content: "\e904";
+  color: #f7b55d;
+}
+.icon-通讯录导出:before {
+  content: "\e905";
+  color: #f7b55d;
+}
+.icon-微平台:before {
+  content: "\e906";
+  color: #4ea8ec;
+}
+.icon-议题征集:before {
+  content: "\e907";
+  color: #00bf8b;
+}
+.icon-应用下载:before {
+  content: "\e908";
+  color: #4ea8ec;
+}
+.icon-综合OA:before {
+  content: "\e909";
+  color: #f7b55d;
+}
+.icon-总值电话:before {
+  content: "\e90a";
+  color: #00bf8b;
+}

src/views/haomo/components/iconMenu/index.vue

+<template>
+  <div class="app-container calendar-list-container">
+    <hm-icon-menu>
+    </hm-icon-menu>
+  </div>
+</template>
+
+<script>
+  import HmIconMenu from './HmIconMenu.vue'
+  import schema from '../../schemas/hm_org_schema'
+
+  export default {
+    name: 'HmIconMenuIndex',
+    // 继承其他组件
+    extends: {},
+    // 使用其它组件
+    components: {
+      'hm-icon-menu': HmIconMenu
+    },
+    data() {
+      return {
+        showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'securityLevel', widgetType: 5 }, { name: 'type', widgetType: 2, options: ['选项1', '选项2'] }, { name: 'avatar', widgetType: 3, options: ['美女', '帅哥'] }, { name: 'departmentId', widgetType: 4 }, { name: 'createTime', widgetType: 6 }, { name: 'loginid', widgetType: 7, options: ['会员', '访客'] }],
+        // 要显示按钮 暂只支持确定、保存、取消、提交、重置
+        showUserButtons: ['确定', '取消']
+        // showUserButtons: []
+      }
+    },
+    computed: {
+    },
+    filters: {
+    },
+    created() {
+      this.schema = schema
+      // console.log(this.schema)
+      this.tableId = '0e26566e953449a7a7500c34be39fd26'
+    },
+    methods: {
+      confirm() {
+        console.log('确定')
+      },
+      cancel() {
+        console.log('取消')
+      }
+    }
+  }
+</script>
+<style scoped>
+</style>

src/views/haomo/components/tables/HmComplexTable.md

@@ -85,7 +85,8 @@
   <div class="app-container calendar-list-container">
     <hm-complex-table :schema="schema['HmUser']"
                       :columns="showUserColumns"
-                      :filters="userFilters"></hm-complex-table>
+                      :filters="userFilters"
+                      :options="userOptions"></hm-complex-table>
   </div>
 </template>
 
@@ -292,15 +293,52 @@
                 ]
               }
         },
-        showUserColumns: ['mobile', 'loginid'],
+        showUserColumns: ['mobile', 'loginid', 'username', 'email'],
         userFilters: [
           { placeholder: '过滤手机号', 'mobile': { 'like': '' }},
-          { placeholder: '过滤登录Id', 'loginid': { 'like': '3001' }}
+          { placeholder: '过滤用户名', 'username': { 'equalTo': '' }}
         ]
       }
     },
     created() {
       this.schema = schema
+      this.userOptions = {
+              changeValue: {
+                username: { 1: '是', 0: '否' }
+              },
+              newData: {
+                isShow: true,
+                showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'loginid', widgetType: 1 }, { name: 'type', widgetType: 1 }],
+                formSchema: schema['HmUser'],
+                showUserButtons: ['提交', '取消'],
+                formConfirm() {
+                  console.log('提交')
+                },
+                formCancel() {
+                  console.log('取消')
+                }
+              },
+              editData: {
+                isShow: true,
+                showUserColumns: [{ name: 'username', widgetType: 1 }],
+                formSchema: schema['HmUser'],
+                showUserButtons: ['提交', '取消'],
+                formConfirm() {
+                  console.log('提交')
+                },
+                formCancel() {
+                  console.log('取消')
+                }
+              },
+              showRefresh: true,
+              showExport: true,
+              showDeleteButton: true,
+              buttonGroup: false,
+              showDetail: {
+                isShow: true,
+                showColumns: ['mobile', 'loginid', 'username', 'email']
+              }
+            }
     }
   }
 </script>

src/views/haomo/components/tables/index.vue

@@ -21,10 +21,10 @@
     },
     data() {
       return {
-        showUserColumns: ['mobile', 'loginid', 'username', 'email'],
+        showUserColumns: ['mobile', 'loginid', 'username', 'email', 'securityLevel'],
         userFilters: [
-          { placeholder: '过滤手机号', 'mobile': { 'like': '' }},
-          { placeholder: '过滤用户名', 'username': { 'equalTo': '' }}
+          { placeholder: '过滤手机号', 'mobile': { 'like': '' }, isShow: true },
+          { placeholder: '过滤用户名', 'username': { 'equalTo': '' }, isShow: true }
         ]
       }
     },
@@ -33,9 +33,40 @@
     created() {
       this.schema = schema
       this.userOptions = {
-        page_size: 10,
         changeValue: {
           username: { 1: '是', 0: '否' }
+        },
+        newData: {
+          isShow: true,
+          showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'loginid', widgetType: 1 }, { name: 'type', widgetType: 1 }],
+          formSchema: schema['HmUser'],
+          showUserButtons: ['提交', '取消'],
+          formConfirm() {
+            console.log('提交')
+          },
+          formCancel() {
+            console.log('取消')
+          }
+        },
+        editData: {
+          isShow: true,
+          showUserColumns: [{ name: 'username', widgetType: 1 }],
+          formSchema: schema['HmUser'],
+          showUserButtons: ['提交', '取消'],
+          formConfirm() {
+            console.log('提交')
+          },
+          formCancel() {
+            console.log('取消')
+          }
+        },
+        showRefresh: true,
+        showExport: true,
+        showDeleteButton: true,
+        buttonGroup: false,
+        showDetail: {
+          isShow: true,
+          showColumns: ['mobile', 'loginid', 'username', 'email']
         }
       }
     },