no message

src/assets/style/theme/theme-base.scss

@@ -27,7 +27,7 @@
   .d2-layout-header-aside-content {
     @extend %full;
     .d2-theme-header {
-      height: 60px;
+      height: 50px;
       .d2-theme-header-menu {
         overflow: hidden;
         &.is-scrollable {
@@ -53,7 +53,7 @@
           }
         }
         .d2-theme-header-menu__prev, .d2-theme-header-menu__next {
-          height: 60px;
+          height: 50px;
           position: absolute;
           top: 0;
           font-size: 20px;
@@ -121,7 +121,7 @@
         float: left;
         text-align: center;
         img {
-          height: 60px;
+          height: 50px;
         }
       }
       .logo-transition {
@@ -130,8 +130,8 @@
       // 折叠侧边栏切换按钮
       .toggle-aside-btn {
         float: left;
-        height: 60px;
+        height: 50px;
-        width: 60px;
+        width: 25px;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -167,7 +167,7 @@
       // 顶栏右侧的按钮
       .d2-header-right {
         float: right;
-        height: 60px;
+        height: 50px;
         display: flex;
         align-items: center;
         .btn-text {
@@ -244,7 +244,7 @@
           height: 41px;
           // 多页面控制器
           .d2-multiple-page-control-group {
-            padding-right: 20px;
+            padding-right: 16px;
             .d2-multiple-page-control-content {
               overflow: auto;
               position: relative;
@@ -285,7 +285,7 @@
             .d2-container-full {
               position: absolute;
               top: 0px;
-              right: 20px;
+              right: 16px;
               bottom: 0px;
               left: 0px;
               display: flex;

src/assets/style/theme/theme.scss

@@ -1,6 +1,12 @@
 // 每个主题特有的设置
 .theme-#{$theme-name} {
 
+  .page-compact {
+    .d2-crud-pagination{
+      padding: 5px 0;
+    }
+  }
+
   .el-message {
     &.el-message--info {
       background-color: $theme-message-info-background-color;

src/assets/style/yxt-public.scss

@@ -48,22 +48,22 @@
 /*滚动条凹槽的颜色，还可以设置边框属性 */
 *::-webkit-scrollbar-track-piece {
   background-color: #f8f8f8;
-  -webkit-border-radius: 2em;
+  -webkit-border-radius: 1em;
-  -moz-border-radius: 2em;
+  -moz-border-radius: 1em;
-  border-radius: 2em;
+  border-radius: 1em;
 }
 /*滚动条的宽度*/
 *::-webkit-scrollbar {
-  width: 9px;
+  width: 6px;
-  height: 9px;
+  height: 6px; 
 }
 /*滚动条的设置*/
 *::-webkit-scrollbar-thumb {
   background-color: #dddddd;
   background-clip: padding-box;
-  -webkit-border-radius: 2em;
+  -webkit-border-radius: 1em;
-  -moz-border-radius: 2em;
+  -moz-border-radius: 1em;
-  border-radius: 2em;
+  border-radius: 1em;
 }
 /*滚动条鼠标移上去*/
 *::-webkit-scrollbar-thumb:hover {

src/components/index.js

@@ -12,4 +12,5 @@ Vue.component('manyToMany', () => import('./many-to-many/index.vue'))
 Vue.component('d2p-tree-selector', () => import('./tree-selector/lib/tree-selector.vue'))
 Vue.component('dept-format', () => import('./dept-format/lib/dept-format.vue'))
 Vue.component('dvaHtml2pdf', () => import('./dvaHtml2pdf/index.vue'))
+Vue.component('x-avatar', () => import('./x-avatar/index.vue'))
 Vue.component('table-progress', tableProgress)

src/components/x-avatar/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <span class="d2p-image-format">
+     <el-image
+       :style="{width:imgWidth,height:imgHeight,borderRadius:imgborderRadius,border:'1px solid #eee'}"
+       v-for="url in urls"  :key="url" :src="url"
+       v-bind="_elProps" >
+        <div slot="placeholder" class="image-slot">
+        </div>
+       <template v-if="error==='slot'">
+         <div slot="error" class="image-slot">
+            <slot name="error"/>
+         </div>
+       </template>
+       <template v-else-if="error">
+         <div slot="error" class="image-slot">
+            <img :src="error" width="50%"/>
+         </div>
+       </template>
+     </el-image>
+  </span>
+</template>
+
+<script>
+// 图片行展示组件
+export default {
+  name: 'x-avatar',
+  props: {
+    // 图片的url
+    // 'url' 或 ['url1','url2']
+    value: {
+      type: [String, Array],
+      require: true
+    },
+    // 图片的宽度设置
+    width: {
+      require: false,
+      default: 30
+    },
+    // 图片的高度设置
+    height: {
+      require: false,
+      default: 30
+    },
+    // 图片的高度设置
+    borderRadius: {
+      require: false,
+      default: 4
+    },
+    fit: {
+      default: 'contain'
+    },
+    // 内部封装[el-image](https://element.eleme.cn/#/zh-CN/component/image)组件的属性参数<br/>
+    elProps: {
+      type: Object
+    },
+    error: {
+      default: undefined
+    },
+    // 构建下载url方法
+    buildUrl: {
+      type: Function,
+      default: function (value, item) { return value }
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    urls () {
+      const urls = []
+      if (this.value == null || this.value === '') {
+        return urls
+      }
+      if (typeof (this.value) === 'string') {
+        urls.push(this.value)
+      } else if (this.value instanceof Array) {
+        for (const item of this.value) {
+          if (item == null) {
+            continue
+          }
+          if (item.url != null) {
+            urls.push(item.url)
+          } else {
+            urls.push(item)
+          }
+        }
+      } else {
+        urls.push(this.value.url)
+      }
+      const arr = []
+      for (const url of urls) {
+        arr.push(this.buildUrl(url))
+      }
+      return arr
+    },
+    imgborderRadius () {
+      if (typeof (this.borderRadius) === 'number') {
+        return this.borderRadius + 'px'
+      }
+      return this.borderRadius
+    },
+    imgHeight () {
+      if (typeof (this.height) === 'number') {
+        return this.height + 'px'
+      }
+      return this.height
+    },
+    imgWidth () {
+      if (typeof (this.width) === 'number') {
+        return this.width + 'px'
+      }
+      return this.width
+    },
+    _elProps () {
+      const defaultElProps = { fit: this.fit, previewSrcList: this.urls }
+      Object.assign(defaultElProps, this.elProps)
+      return defaultElProps
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    handleClick () {
+      // this.$emit('input', !this.value)
+    }
+  }
+}
+</script>
+<style lang="scss">
+.d2p-image-format{
+  .image-slot{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+  .el-image-viewer__close {
+    color: #fff;
+  }
+}
+
+</style>

src/config/d2p-extends/types.js

@@ -1,170 +1,235 @@
 import util from '@/libs/util.js'
 export default {
-  'image-uploader': {
+    'image-uploader': {
-    form: { component: { name: 'd2p-file-uploader', props: { elProps: { listType: 'picture-card', accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif' } } } },
+        form: {
-    component: { name: 'd2p-images-format' },
+            component: {
-    view: {
+                name: 'd2p-file-uploader',
-      component: { props: { height: 100, width: 100 } }
+                props: {
-    },
+                    elProps: {
-    align: 'center',
+                        listType: 'picture-card',
-    // 提交时,处理数据
+                        accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif'
-    valueResolve (row, col) {
+                    }
-      const value = row[col.key]
+                }
-      if (value != null) {
+            }
-        if (value.length >= 0) {
+        },
-          if (value instanceof Array) {
+        component: {
-            row[col.key] = value.toString()
+            name: 'd2p-images-format'
-          } else {
+        },
-            row[col.key] = value
+        view: {
-          }
+            component: {
-        } else {
+                props: {
-          row[col.key] = null
+                    height: 100,
+                    width: 100
+                }
+            }
+        },
+        align: 'center',
+        // 提交时,处理数据
+        valueResolve(row, col) {
+            const value = row[col.key]
+            if (value != null) {
+                if (value.length >= 0) {
+                    if (value instanceof Array) {
+                        row[col.key] = value.toString()
+                    } else {
+                        row[col.key] = value
+                    }
+                } else {
+                    row[col.key] = null
+                }
+            }
+        },
+        // 接收时,处理数据
+        valueBuilder(row, col) {
+            const value = row[col.key]
+            if (value != null && value) {
+                row[col.key] = value.split(',')
+                // 进行组装地址，纠正地址
+                row[col.key].map((val, index) => {
+                    if (val.startsWith('/api')) {
+                        row[col.key][index] = val
+                    } else if (val.startsWith('/')) {
+                        row[col.key][index] = util.baseURL() + val.slice(1)
+                    } else {
+                        row[col.key][index] = !val.startsWith('http') ? util.baseURL() + val : val
+                    }
+                })
+            }
         }
-      }
     },
-    // 接收时,处理数据
+    'avatar-uploader': {
-    valueBuilder (row, col) {
+        form: {
-      const value = row[col.key]
+            component: {
-      if (value != null && value) {
+                name: 'd2p-file-uploader',
-        row[col.key] = value.split(',')
+                props: {
-        // 进行组装地址，纠正地址
+                    elProps: {
-        row[col.key].map((val, index) => {
+                        limit: 1,
-          if (val.startsWith('/api')) {
+                        listType: 'avatar',
-            row[col.key][index] = val
+                        accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif',
-          } else if (val.startsWith('/')) {
+                        showFileList: false
-            row[col.key][index] = util.baseURL() + val.slice(1)
+                    }
-          } else {
+                }
-            row[col.key][index] = !val.startsWith('http') ? util.baseURL() + val : val
+            }
-          }
+        },
-        })
+        component: {
-      }
+            name: 'd2p-images-format'
-    }
+        },
-  },
+        view: {
-  'avatar-uploader': {
+            component: {
-    form: { component: { name: 'd2p-file-uploader', props: { elProps: { limit: 1, listType: 'avatar', accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif', showFileList: false } } } },
+                props: {
-    component: { name: 'd2p-images-format' },
+                    height: 100,
-    view: {
+                    width: 100
-      component: { props: { height: 100, width: 100 } }
+                }
-    },
+            }
-    align: 'center',
+        },
-    // 提交时,处理数据
+        align: 'center',
-    valueResolve (row, col) {
+        // 提交时,处理数据
-      const value = row[col.key]
+        valueResolve(row, col) {
-      if (value != null) {
+            const value = row[col.key]
-        if (value.length >= 0) {
+            if (value != null) {
-          if (value instanceof Array) {
+                if (value.length >= 0) {
-            row[col.key] = value.toString()
+                    if (value instanceof Array) {
-          } else {
+                        row[col.key] = value.toString()
-            row[col.key] = value
+                    } else {
-          }
+                        row[col.key] = value
-        } else {
+                    }
-          row[col.key] = null
+                } else {
+                    row[col.key] = null
+                }
+            }
+        },
+        // 接收时,处理数据
+        valueBuilder(row, col) {
+            const value = row[col.key]
+            if (value != null && value) {
+                row[col.key] = value.split(',')
+                // 进行组装地址，纠正地址
+                row[col.key].map((val, index) => {
+                    if (val.startsWith('/api')) {
+                        row[col.key][index] = val
+                    } else if (val.startsWith('/')) {
+                        row[col.key][index] = util.baseURL() + val.slice(1)
+                    } else {
+                        row[col.key][index] = !val.startsWith('http') ? util.baseURL() + val : val
+                    }
+                })
+            }
         }
-      }
     },
-    // 接收时,处理数据
+    'file-uploader': {
-    valueBuilder (row, col) {
+        form: {
-      const value = row[col.key]
+            component: {
-      if (value != null && value) {
+                name: 'd2p-file-uploader',
-        row[col.key] = value.split(',')
+                props: {
-        // 进行组装地址，纠正地址
+                    elProps: {
-        row[col.key].map((val, index) => {
+                        listType: 'text'
-          if (val.startsWith('/api')) {
+                    }
-            row[col.key][index] = val
+                }
-          } else if (val.startsWith('/')) {
+            }
-            row[col.key][index] = util.baseURL() + val.slice(1)
+        },
-          } else {
+        component: {
-            row[col.key][index] = !val.startsWith('http') ? util.baseURL() + val : val
+            name: 'd2p-files-format'
-          }
+        },
-        })
+        // 提交时,处理数据
-      }
+        valueResolve(row, col) {
-    }
+            const value = row[col.key]
-  },
+            if (value != null) {
-  'file-uploader': {
+                if (value.length >= 0) {
-    form: { component: { name: 'd2p-file-uploader', props: { elProps: { listType: 'text' } } } },
+                    if (value instanceof Array) {
-    component: { name: 'd2p-files-format' },
+                        row[col.key] = value.toString()
-    // 提交时,处理数据
+                    } else {
-    valueResolve (row, col) {
+                        row[col.key] = value
-      const value = row[col.key]
+                    }
-      if (value != null) {
+                } else {
-        if (value.length >= 0) {
+                    row[col.key] = null
-          if (value instanceof Array) {
+                }
-            row[col.key] = value.toString()
+            }
-          } else {
+        },
-            row[col.key] = value
+        // 接收时,处理数据
-          }
+        valueBuilder(row, col) {
-        } else {
+            const value = row[col.key]
-          row[col.key] = null
+            if (value != null && value) {
+                row[col.key] = value.split(',')
+                // 进行组装地址，纠正地址
+                row[col.key].map((val, index) => {
+                    if (val.startsWith('/api')) {
+                        row[col.key][index] = val
+                    } else if (val.startsWith('/')) {
+                        row[col.key][index] = util.baseURL() + val.slice(1)
+                    } else {
+                        row[col.key][index] = !val.startsWith('http') ? util.baseURL() + val : val
+                    }
+                })
+            }
         }
-      }
     },
-    // 接收时,处理数据
+    'avatar-cropper': {
-    valueBuilder (row, col) {
+        form: {
-      const value = row[col.key]
+            component: {
-      if (value != null && value) {
+                name: 'd2p-cropper-uploader',
-        row[col.key] = value.split(',')
+                props: {
-        // 进行组装地址，纠正地址
+                    accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif',
-        row[col.key].map((val, index) => {
+                    cropper: {
-          if (val.startsWith('/api')) {
+                        viewMode: 1
-            row[col.key][index] = val
+                    }
-          } else if (val.startsWith('/')) {
+                }
-            row[col.key][index] = util.baseURL() + val.slice(1)
+            }
-          } else {
+        },
-            row[col.key][index] = !val.startsWith('http') ? util.baseURL() + val : val
+        component: {
-          }
+            name: 'x-avatar'
-        })
+        },
-      }
+        align: 'center',
-    }
+        view: {
-  },
+            component: {
-  'avatar-cropper': {
+                props: {
-    form: { component: { name: 'd2p-cropper-uploader', props: { accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif', cropper: { viewMode: 1 } } } },
+                    height: 100,
-    component: { name: 'd2p-images-format' },
+                    width: 100
-    align: 'center',
+                },
-    view: {
+            }
-      component: { 
+        },
-        props: { height: 100, width: 100 },
+        // 提交时,处理数据
-        slots:{ //scoped插槽jsx
+        valueResolve(row, col) {
-             default:(h,scope)=>{ //默认的scoped插槽
+            const value = row[col.key]
-                return ('<div>{scope.data}</div>')
+            if (value != null) {
-             }
+                if (value.length >= 0) {
-          },
+                    if (value instanceof Array) {
-      }
+                        row[col.key] = value.toString()
-    },
+                    } else {
-    // 提交时,处理数据
+                        row[col.key] = value
-    valueResolve (row, col) {
+                    }
-      const value = row[col.key]
+                } else {
-      if (value != null) {
+                    row[col.key] = null
-        if (value.length >= 0) {
+                }
-          if (value instanceof Array) {
+            }
-            row[col.key] = value.toString()
+        },
-          } else {
+        // 接收时,处理数据
-            row[col.key] = value
+        valueBuilder(row, col) {
-          }
+            const value = row[col.key]
-        } else {
+            if (value != null && value) {
-          row[col.key] = null
+                row[col.key] = value.split(',')
+                // 进行组装地址，纠正地址
+                row[col.key].map((val, index) => {
+                    if (val.startsWith('/api')) {
+                        row[col.key][index] = val
+                    } else if (val.startsWith('/')) {
+                        row[col.key][index] = util.baseURL() + val.slice(1)
+                    } else {
+                        row[col.key][index] = !val.startsWith('http') ? util.baseURL() + val : val
+                    }
+                })
+            }
         }
-      }
     },
-    // 接收时,处理数据
+    'tree-selector': {
-    valueBuilder (row, col) {
+        form: {
-      const value = row[col.key]
+            component: {
-      if (value != null && value) {
+                name: 'd2p-tree-selector',
-        row[col.key] = value.split(',')
+                props: {}
-        // 进行组装地址，纠正地址
+            }
-        row[col.key].map((val, index) => {
+        },
-          if (val.startsWith('/api')) {
+        component: {
-            row[col.key][index] = val
+            name: 'values-format',
-          } else if (val.startsWith('/')) {
+            props: {}
-            row[col.key][index] = util.baseURL() + val.slice(1)
+        }
-          } else {
-            row[col.key][index] = !val.startsWith('http') ? util.baseURL() + val : val
-          }
-        })
-      }
     }
-  },
+}
-  'tree-selector': {
-    form: { component: { name: 'd2p-tree-selector', props: { } } },
-    component: { name: 'values-format', props: {} }
-  }
-}

src/views/system/user/crud.js

@@ -1,394 +1,401 @@
-import { request } from '@/api/service'
+import {
-
+    request
+} from '@/api/service'
 export const crudOptions = (vm) => {
-  // util.filterParams(vm, ['dept_name', 'role_info{name}', 'dept_name_all'])
+    // util.filterParams(vm, ['dept_name', 'role_info{name}', 'dept_name_all'])
-  return {
+    return {
-    pageOptions: {
+        pageOptions: {
-      compact: true
+            compact: true
-    },
-    options: {
-      height: '100%',
-      // tableType: 'vxe-table',
-      // rowKey: true,
-      rowId: 'id'
-    },
-    selectionRow: {
-      align: 'center',
-      width: 46
-    },
-    rowHandle: {
-      width: 240,
-      fixed: 'right',
-      view: {
-        thin: true,
-        text: '',
-        disabled () {
-          return !vm.hasPermissions('Retrieve')
         },
-      },
+        options: {
-      edit: {
+            height: '100%',
-        thin: true,
+            // tableType: 'vxe-table',
-        text: '',
+            // rowKey: true,
-        disabled () {
+            rowId: 'id',
-          return !vm.hasPermissions('Update')
+            size: 'mini',
-        }
+            stripe: true,
-      },
+            fit: true,
-      remove: {
-        thin: true,
-        text: '',
-        disabled () {
-          return !vm.hasPermissions('Delete')
-        }
-      },
-      custom: [
-        {
-          thin: true,
-          text: '密码重置',
-          size: 'small',
-          type: 'warning',
-          icon: 'el-icon-refresh-left',
-          show () {
-            return vm.hasPermissions('ResetPassword')
-          },
-          emit: 'resetPassword'
-        }
-      ]
-    },
-    viewOptions: {
-      componentType: 'form'
-    },
-    formOptions: {
-      defaultSpan: 12 // 默认的表单 span
-    },
-    // indexRow: { // 或者直接传true,不显示title，不居中
-    //   title: '序号',
-    //   align: 'center',
-    //   width: 60
-    // },
-    columns: [
-      {
-        title: 'UID',
-        align: 'center',
-        key: 'uid',
-        form: {
-          disabled: true
-        }
-      },
-      {
-        title: '关键词',
-        key: 'search',
-        show: false,
-        disabled: true,
-        search: {
-          disabled: false
         },
-        form: {
+        selectionRow: {
-          disabled: true,
+            align: 'center',
-          component: {
+            width: 46
-            placeholder: '请输入关键词'
-          }
         },
-        view: {
+        rowHandle: {
-          disabled: true
+            width: 240,
-        }
+            fixed: 'right',
-      },
+            view: {
-      {
+                thin: true,
-        title: '头像',
+                text: '',
-        key: 'avatar',
+                disabled() {
-        type: 'avatar-cropper',
+                    return !vm.hasPermissions('Retrieve')
-        width: 60,
-        align: 'center',
-        form: {
-          component: {
-            props: {
-              elProps: { // 与el-uploader 配置一致
-                multiple: false,
-                limit: 1 // 限制5个文件
-              },
-              sizeLimit: 500 * 1024 // 不能超过限制
-            },
-            span: 24
-          },
-          helper: '限制文件大小不能超过500k'
-        }
-      },
-      {
-        title: '账号',
-        key: 'username',
-        search: {
-          disabled: false
-        },
-        minWidth: 100,
-        type: 'input',
-        form: {
-          rules: [ // 表单校验规则
-            {
-              required: true,
-              message: '账号必填项'
-            }
-          ],
-          component: {
-            placeholder: '请输入账号'
-          },
-          itemProps: {
-            class: { yxtInput: true }
-          }
-        }
-      },
-      {
-        title: '密码',
-        key: 'password',
-        minWidth: 90,
-        type: 'input',
-        form: {
-          rules: [ // 表单校验规则
-            {
-              required: true,
-              message: '密码必填项'
-            }
-          ],
-          component: {
-            span: 12,
-            showPassword: true,
-            placeholder: '请输入密码'
-          },
-          value: vm.systemConfig('base.default_password'),
-          editDisabled: true,
-          itemProps: {
-            class: { yxtInput: true }
-          }
-        },
-        disabled: true,
-        valueResolve (row, key) {
-          if (row.password) {
-            row.password = vm.$md5(row.password)
-          }
-        }
-      },
-      {
-        title: '姓名',
-        key: 'name',
-        sortable: 'custom',
-        minWidth: 90,
-        search: {
-          disabled: false
-        },
-        type: 'input',
-        form: {
-          rules: [ // 表单校验规则
-            {
-              required: true,
-              message: '姓名必填项'
-            }
-          ],
-          component: {
-            span: 12,
-            placeholder: '请输入姓名'
-          },
-          itemProps: {
-            class: { yxtInput: true }
-          }
-        }
-      },
-      {
-        title: '用户组',
-        key: 'dept',
-        search: {
-          disabled: true
-        },
-        minWidth: 140,
-        type: 'tree-selector',
-        dict: {
-          cache: true,
-          isTree: true,
-          url: '/system/dept/all_dept/',
-          value: 'id', // 数据字典中value字段的属性名
-          label: 'name' // 数据字典中label字段的属性名
-        },
-        form: {
-          rules: [ // 表单校验规则
-            {
-              required: true,
-              message: '必填项'
-            }
-          ],
-          itemProps: {
-            class: { yxtInput: true }
-          },
-          component: {
-            span: 12,
-            pagination: true,
-            props: { multiple: false }
-          }
-        },
-        component: {
-          name: 'foreignKey',
-          valueBinding: 'dept_name'
-        }
-      },
-      {
-        title: '角色',
-        key: 'role',
-        search: {
-          disabled: true
-        },
-        minWidth: 130,
-        type: 'table-selector',
-        dict: {
-          cache: false,
-          url: '/system/role/',
-          value: 'id', // 数据字典中value字段的属性名
-          label: 'name', // 数据字典中label字段的属性名
-          getData: (url, dict, {
-            form,
-            component
-          }) => {
-            return request({
-              url: url,
-              params: {
-                page: 1,
-                limit: 10
-              }
-            }).then(ret => {
-              component._elProps.page = ret.data.page
-              component._elProps.limit = ret.data.limit
-              component._elProps.total = ret.data.total
-              return ret.data.data
-            })
-          }
-        },
-        form: {
-          rules: [ // 表单校验规则
-            {
-              required: true,
-              message: '必填项'
-            }
-          ],
-          itemProps: {
-            class: { yxtInput: true }
-          },
-          component: {
-            span: 12,
-            pagination: true,
-            props: { multiple: true },
-            elProps: {
-              columns: [
-                {
-                  field: 'name',
-                  title: '角色名称'
                 },
-                {
-                  field: 'key',
-                  title: '权限标识'
-                }
-              ]
-            }
-          }
-        },
-        component: {
-          name: 'manyToMany',
-          valueBinding: 'role_info',
-          children: 'name'
-        }
-      },
-      {
-        title: '手机号码',
-        key: 'mobile',
-        search: {
-          disabled: false
-        },
-        minWidth: 110,
-        type: 'input',
-        form: {
-          rules: [
-            {
-              max: 20,
-              message: '请输入正确的手机号码',
-              trigger: 'blur'
             },
-            {
+            edit: {
-              pattern: /^1[3-9]\d{9}$/,
+                thin: true,
-              message: '请输入正确的手机号码'
+                text: '',
+                disabled() {
+                    return !vm.hasPermissions('Update')
+                }
+            },
+            remove: {
+                thin: true,
+                text: '',
+                disabled() {
+                    return !vm.hasPermissions('Delete')
+                }
+            },
+            custom: [{
+                thin: true,
+                text: '密码重置',
+                size: 'small',
+                type: 'warning',
+                icon: 'el-icon-refresh-left',
+                show() {
+                    return vm.hasPermissions('ResetPassword')
+                },
+                emit: 'resetPassword'
+            }]
+        },
+        viewOptions: {
+            componentType: 'form'
+        },
+        formOptions: {
+            defaultSpan: 12 // 默认的表单 span
+        },
+        // indexRow: { // 或者直接传true,不显示title，不居中
+        //   title: '序号',
+        //   align: 'center',
+        //   width: 60
+        // },
+        columns: [{
+            title: 'UID',
+            align: 'center',
+            key: 'uid',
+            form: {
+                disabled: true
             }
-          ],
+        }, {
-          itemProps: {
+            title: '关键词',
-            class: { yxtInput: true }
+            key: 'search',
-          },
+            show: false,
-          component: {
+            disabled: true,
-            placeholder: '请输入手机号码'
+            search: {
-          }
+                disabled: false
-        }
+            },
-      }, {
+            form: {
-        title: '邮箱',
+                disabled: true,
-        key: 'email',
+                component: {
-        minWidth: 180,
+                    placeholder: '请输入关键词'
-        form: {
+                }
-          rules: [
+            },
-            {
+            view: {
-              type: 'email',
+                disabled: true
-              message: '请输入正确的邮箱地址',
-              trigger: ['blur', 'change']
             }
-          ],
+        }, {
-          component: {
+            title: '头像',
-            placeholder: '请输入邮箱'
+            key: 'avatar',
-          }
+            type: 'avatar-cropper',
-        }
+            width: 60,
-      },
+            align: 'center',
-      {
+            form: {
-        title: '性别',
+                component: {
-        key: 'gender',
+                    props: {
-        type: 'radio',
+                        elProps: { // 与el-uploader 配置一致
-        width: 70,
+                            multiple: false,
-        dict: {
+                            limit: 1 // 限制5个文件
-          data: vm.dictionary('gender')
+                        },
-        },
+                        sizeLimit: 500 * 1024 // 不能超过限制
-        form: {
+                    },
-          value: 1,
+                    span: 24
-          component: {
+                },
-            span: 12
+                helper: '限制文件大小不能超过500k'
-          }
+            }
-        },
+        }, {
-        component: { props: { color: 'auto' } } // 自动染色
+            title: '账号',
-      }, {
+            key: 'nickname',
-        title: '用户类型',
+            search: {
-        key: 'user_type',
+                disabled: false
-        search: {
+            },
-          disabled: false
+            minWidth: 100,
-        },
+            type: 'input',
-        width: 145,
+            form: {
-        type: 'select',
+                rules: [ // 表单校验规则
-        dict: {
+                    {
-          data: vm.dictionary('user_type')
+                        required: true,
-        },
+                        message: '账号必填项'
-        form: {
+                    }
-          show: false,
+                ],
-          value: 0,
+                component: {
-          component: {
+                    placeholder: '请输入账号'
-            span: 12
+                },
-          }
+                itemProps: {
-        }
+                    class: {
-      }, {
+                        yxtInput: true
-        title: '状态',
+                    }
-        key: 'is_active',
+                }
-        search: {
+            }
-          disabled: false
+        }, {
-        },
+            title: '密码',
-        width: 70,
+            key: 'password',
-        type: 'radio',
+            minWidth: 90,
-        dict: {
+            type: 'input',
-          data: vm.dictionary('button_status_bool')
+            form: {
-        },
+                rules: [ // 表单校验规则
-        form: {
+                    {
-          value: true,
+                        required: true,
-          component: {
+                        message: '密码必填项'
-            span: 12
+                    }
-          }
+                ],
-        }
+                component: {
-      },
+                    span: 12,
-    ].concat(vm.commonEndColumns({
+                    showPassword: true,
-      create_datetime: { showTable: false },
+                    placeholder: '请输入密码'
-      update_datetime: { showTable: false }
+                },
-    }))
+                value: vm.systemConfig('base.default_password'),
-  }
+                editDisabled: true,
-}
+                itemProps: {
+                    class: {
+                        yxtInput: true
+                    }
+                }
+            },
+            disabled: true,
+            valueResolve(row, key) {
+                if (row.password) {
+                    row.password = vm.$md5(row.password)
+                }
+            }
+        }, {
+            title: '姓名',
+            key: 'name',
+            sortable: 'custom',
+            minWidth: 90,
+            search: {
+                disabled: false
+            },
+            type: 'input',
+            form: {
+                rules: [ // 表单校验规则
+                    {
+                        required: true,
+                        message: '姓名必填项'
+                    }
+                ],
+                component: {
+                    span: 12,
+                    placeholder: '请输入姓名'
+                },
+                itemProps: {
+                    class: {
+                        yxtInput: true
+                    }
+                }
+            }
+        }, {
+            title: '用户组',
+            key: 'dept',
+            search: {
+                disabled: true
+            },
+            minWidth: 140,
+            type: 'tree-selector',
+            dict: {
+                cache: true,
+                isTree: true,
+                url: '/system/dept/all_dept/',
+                value: 'id', // 数据字典中value字段的属性名
+                label: 'name' // 数据字典中label字段的属性名
+            },
+            form: {
+                rules: [ // 表单校验规则
+                    {
+                        required: true,
+                        message: '必填项'
+                    }
+                ],
+                itemProps: {
+                    class: {
+                        yxtInput: true
+                    }
+                },
+                component: {
+                    span: 12,
+                    pagination: true,
+                    props: {
+                        multiple: false
+                    }
+                }
+            },
+            component: {
+                name: 'foreignKey',
+                valueBinding: 'dept_name'
+            }
+        }, {
+            title: '角色',
+            key: 'role',
+            search: {
+                disabled: true
+            },
+            minWidth: 130,
+            type: 'table-selector',
+            dict: {
+                cache: false,
+                url: '/system/role/',
+                value: 'id', // 数据字典中value字段的属性名
+                label: 'name', // 数据字典中label字段的属性名
+                getData: (url, dict, {
+                    form,
+                    component
+                }) => {
+                    return request({
+                        url: url,
+                        params: {
+                            page: 1,
+                            limit: 10
+                        }
+                    }).then(ret => {
+                        component._elProps.page = ret.data.page
+                        component._elProps.limit = ret.data.limit
+                        component._elProps.total = ret.data.total
+                        return ret.data.data
+                    })
+                }
+            },
+            form: {
+                rules: [ // 表单校验规则
+                    {
+                        required: true,
+                        message: '必填项'
+                    }
+                ],
+                itemProps: {
+                    class: {
+                        yxtInput: true
+                    }
+                },
+                component: {
+                    span: 12,
+                    pagination: true,
+                    props: {
+                        multiple: true
+                    },
+                    elProps: {
+                        columns: [{
+                            field: 'name',
+                            title: '角色名称'
+                        }, {
+                            field: 'key',
+                            title: '权限标识'
+                        }]
+                    }
+                }
+            },
+            component: {
+                name: 'manyToMany',
+                valueBinding: 'role_info',
+                children: 'name'
+            }
+        }, {
+            title: '手机号码',
+            key: 'mobile',
+            search: {
+                disabled: false
+            },
+            minWidth: 110,
+            type: 'input',
+            form: {
+                rules: [{
+                    max: 20,
+                    message: '请输入正确的手机号码',
+                    trigger: 'blur'
+                }, {
+                    pattern: /^1[3-9]\d{9}$/,
+                    message: '请输入正确的手机号码'
+                }],
+                itemProps: {
+                    class: {
+                        yxtInput: true
+                    }
+                },
+                component: {
+                    placeholder: '请输入手机号码'
+                }
+            }
+        }, {
+            title: '邮箱',
+            key: 'email',
+            minWidth: 180,
+            form: {
+                rules: [{
+                    type: 'email',
+                    message: '请输入正确的邮箱地址',
+                    trigger: ['blur', 'change']
+                }],
+                component: {
+                    placeholder: '请输入邮箱'
+                }
+            }
+        }, {
+            title: '性别',
+            key: 'gender',
+            type: 'radio',
+            width: 70,
+            dict: {
+                data: vm.dictionary('gender')
+            },
+            form: {
+                value: 1,
+                component: {
+                    span: 12
+                }
+            },
+            component: {
+                props: {
+                    color: 'auto'
+                }
+            } // 自动染色
+        }, {
+            title: '用户类型',
+            key: 'user_type',
+            search: {
+                disabled: false
+            },
+            width: 145,
+            type: 'select',
+            dict: {
+                data: vm.dictionary('user_type')
+            },
+            form: {
+                show: false,
+                value: 0,
+                component: {
+                    span: 12
+                }
+            }
+        }, {
+            title: '状态',
+            key: 'is_active',
+            search: {
+                disabled: false
+            },
+            width: 70,
+            type: 'radio',
+            dict: {
+                data: vm.dictionary('button_status_bool')
+            },
+            form: {
+                value: true,
+                component: {
+                    span: 12
+                }
+            }
+        }, ].concat(vm.commonEndColumns({
+            create_datetime: {
+                showTable: false
+            },
+            update_datetime: {
+                showTable: false
+            }
+        }))
+    }
+}