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,14 +1,31 @@
 import util from '@/libs/util.js'
 export default {
     '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: {
+                name: 'd2p-file-uploader',
+                props: {
+                    elProps: {
+                        listType: 'picture-card',
+                        accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif'
+                    }
+                }
+            }
+        },
+        component: {
+            name: 'd2p-images-format'
+        },
         view: {
-      component: { props: { height: 100, width: 100 } }
+            component: {
+                props: {
+                    height: 100,
+                    width: 100
+                }
+            }
         },
         align: 'center',
         // 提交时,处理数据
-    valueResolve (row, col) {
+        valueResolve(row, col) {
             const value = row[col.key]
             if (value != null) {
                 if (value.length >= 0) {
@@ -23,7 +40,7 @@ export default {
             }
         },
         // 接收时,处理数据
-    valueBuilder (row, col) {
+        valueBuilder(row, col) {
             const value = row[col.key]
             if (value != null && value) {
                 row[col.key] = value.split(',')
@@ -41,14 +58,33 @@ export default {
         }
     },
     'avatar-uploader': {
-    form: { component: { name: 'd2p-file-uploader', props: { elProps: { limit: 1, listType: 'avatar', accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif', showFileList: false } } } },
+        form: {
-    component: { name: 'd2p-images-format' },
+            component: {
+                name: 'd2p-file-uploader',
+                props: {
+                    elProps: {
+                        limit: 1,
+                        listType: 'avatar',
+                        accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif',
+                        showFileList: false
+                    }
+                }
+            }
+        },
+        component: {
+            name: 'd2p-images-format'
+        },
         view: {
-      component: { props: { height: 100, width: 100 } }
+            component: {
+                props: {
+                    height: 100,
+                    width: 100
+                }
+            }
         },
         align: 'center',
         // 提交时,处理数据
-    valueResolve (row, col) {
+        valueResolve(row, col) {
             const value = row[col.key]
             if (value != null) {
                 if (value.length >= 0) {
@@ -63,7 +99,7 @@ export default {
             }
         },
         // 接收时,处理数据
-    valueBuilder (row, col) {
+        valueBuilder(row, col) {
             const value = row[col.key]
             if (value != null && value) {
                 row[col.key] = value.split(',')
@@ -81,10 +117,21 @@ export default {
         }
     },
     'file-uploader': {
-    form: { component: { name: 'd2p-file-uploader', props: { elProps: { listType: 'text' } } } },
+        form: {
-    component: { name: 'd2p-files-format' },
+            component: {
+                name: 'd2p-file-uploader',
+                props: {
+                    elProps: {
+                        listType: 'text'
+                    }
+                }
+            }
+        },
+        component: {
+            name: 'd2p-files-format'
+        },
         // 提交时,处理数据
-    valueResolve (row, col) {
+        valueResolve(row, col) {
             const value = row[col.key]
             if (value != null) {
                 if (value.length >= 0) {
@@ -99,7 +146,7 @@ export default {
             }
         },
         // 接收时,处理数据
-    valueBuilder (row, col) {
+        valueBuilder(row, col) {
             const value = row[col.key]
             if (value != null && value) {
                 row[col.key] = value.split(',')
@@ -117,21 +164,31 @@ export default {
         }
     },
     'avatar-cropper': {
-    form: { component: { name: 'd2p-cropper-uploader', props: { accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif', cropper: { viewMode: 1 } } } },
+        form: {
-    component: { name: 'd2p-images-format' },
+            component: {
+                name: 'd2p-cropper-uploader',
+                props: {
+                    accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif',
+                    cropper: {
+                        viewMode: 1
+                    }
+                }
+            }
+        },
+        component: {
+            name: 'x-avatar'
+        },
         align: 'center',
         view: {
             component: {
-        props: { height: 100, width: 100 },
+                props: {
-        slots:{ //scoped插槽jsx
+                    height: 100,
-             default:(h,scope)=>{ //默认的scoped插槽
+                    width: 100
-                return ('<div>{scope.data}</div>')
-             }
                 },
             }
         },
         // 提交时,处理数据
-    valueResolve (row, col) {
+        valueResolve(row, col) {
             const value = row[col.key]
             if (value != null) {
                 if (value.length >= 0) {
@@ -146,7 +203,7 @@ export default {
             }
         },
         // 接收时,处理数据
-    valueBuilder (row, col) {
+        valueBuilder(row, col) {
             const value = row[col.key]
             if (value != null && value) {
                 row[col.key] = value.split(',')
@@ -164,7 +221,15 @@ export default {
         }
     },
     'tree-selector': {
-    form: { component: { name: 'd2p-tree-selector', props: { } } },
+        form: {
-    component: { name: 'values-format', props: {} }
+            component: {
+                name: 'd2p-tree-selector',
+                props: {}
+            }
+        },
+        component: {
+            name: 'values-format',
+            props: {}
+        }
     }
 }

src/views/system/user/crud.js

@@ -1,5 +1,6 @@
-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'])
     return {
@@ -10,7 +11,10 @@ export const crudOptions = (vm) => {
             height: '100%',
             // tableType: 'vxe-table',
             // rowKey: true,
-      rowId: 'id'
+            rowId: 'id',
+            size: 'mini',
+            stripe: true,
+            fit: true,
         },
         selectionRow: {
             align: 'center',
@@ -22,37 +26,35 @@ export const crudOptions = (vm) => {
             view: {
                 thin: true,
                 text: '',
-        disabled () {
+                disabled() {
                     return !vm.hasPermissions('Retrieve')
                 },
             },
             edit: {
                 thin: true,
                 text: '',
-        disabled () {
+                disabled() {
                     return !vm.hasPermissions('Update')
                 }
             },
             remove: {
                 thin: true,
                 text: '',
-        disabled () {
+                disabled() {
                     return !vm.hasPermissions('Delete')
                 }
             },
-      custom: [
+            custom: [{
-        {
                 thin: true,
                 text: '密码重置',
                 size: 'small',
                 type: 'warning',
                 icon: 'el-icon-refresh-left',
-          show () {
+                show() {
                     return vm.hasPermissions('ResetPassword')
                 },
                 emit: 'resetPassword'
-        }
+            }]
-      ]
         },
         viewOptions: {
             componentType: 'form'
@@ -65,16 +67,14 @@ export const crudOptions = (vm) => {
         //   align: 'center',
         //   width: 60
         // },
-    columns: [
+        columns: [{
-      {
             title: 'UID',
             align: 'center',
             key: 'uid',
             form: {
                 disabled: true
             }
-      },
+        }, {
-      {
             title: '关键词',
             key: 'search',
             show: false,
@@ -91,8 +91,7 @@ export const crudOptions = (vm) => {
             view: {
                 disabled: true
             }
-      },
+        }, {
-      {
             title: '头像',
             key: 'avatar',
             type: 'avatar-cropper',
@@ -111,10 +110,9 @@ export const crudOptions = (vm) => {
                 },
                 helper: '限制文件大小不能超过500k'
             }
-      },
+        }, {
-      {
             title: '账号',
-        key: 'username',
+            key: 'nickname',
             search: {
                 disabled: false
             },
@@ -131,11 +129,12 @@ export const crudOptions = (vm) => {
                     placeholder: '请输入账号'
                 },
                 itemProps: {
-            class: { yxtInput: true }
+                    class: {
+                        yxtInput: true
                     }
                 }
-      },
+            }
-      {
+        }, {
             title: '密码',
             key: 'password',
             minWidth: 90,
@@ -155,17 +154,18 @@ export const crudOptions = (vm) => {
                 value: vm.systemConfig('base.default_password'),
                 editDisabled: true,
                 itemProps: {
-            class: { yxtInput: true }
+                    class: {
+                        yxtInput: true
+                    }
                 }
             },
             disabled: true,
-        valueResolve (row, key) {
+            valueResolve(row, key) {
                 if (row.password) {
                     row.password = vm.$md5(row.password)
                 }
             }
-      },
+        }, {
-      {
             title: '姓名',
             key: 'name',
             sortable: 'custom',
@@ -186,11 +186,12 @@ export const crudOptions = (vm) => {
                     placeholder: '请输入姓名'
                 },
                 itemProps: {
-            class: { yxtInput: true }
+                    class: {
+                        yxtInput: true
                     }
                 }
-      },
+            }
-      {
+        }, {
             title: '用户组',
             key: 'dept',
             search: {
@@ -213,20 +214,23 @@ export const crudOptions = (vm) => {
                     }
                 ],
                 itemProps: {
-            class: { yxtInput: true }
+                    class: {
+                        yxtInput: true
+                    }
                 },
                 component: {
                     span: 12,
                     pagination: true,
-            props: { multiple: false }
+                    props: {
+                        multiple: false
+                    }
                 }
             },
             component: {
                 name: 'foreignKey',
                 valueBinding: 'dept_name'
             }
-      },
+        }, {
-      {
             title: '角色',
             key: 'role',
             search: {
@@ -265,23 +269,24 @@ export const crudOptions = (vm) => {
                     }
                 ],
                 itemProps: {
-            class: { yxtInput: true }
+                    class: {
+                        yxtInput: true
+                    }
                 },
                 component: {
                     span: 12,
                     pagination: true,
-            props: { multiple: true },
+                    props: {
+                        multiple: true
+                    },
                     elProps: {
-              columns: [
+                        columns: [{
-                {
                             field: 'name',
                             title: '角色名称'
-                },
+                        }, {
-                {
                             field: 'key',
                             title: '权限标识'
-                }
+                        }]
-              ]
                     }
                 }
             },
@@ -290,8 +295,7 @@ export const crudOptions = (vm) => {
                 valueBinding: 'role_info',
                 children: 'name'
             }
-      },
+        }, {
-      {
             title: '手机号码',
             key: 'mobile',
             search: {
@@ -300,19 +304,18 @@ export const crudOptions = (vm) => {
             minWidth: 110,
             type: 'input',
             form: {
-          rules: [
+                rules: [{
-            {
                     max: 20,
                     message: '请输入正确的手机号码',
                     trigger: 'blur'
-            },
+                }, {
-            {
                     pattern: /^1[3-9]\d{9}$/,
                     message: '请输入正确的手机号码'
-            }
+                }],
-          ],
                 itemProps: {
-            class: { yxtInput: true }
+                    class: {
+                        yxtInput: true
+                    }
                 },
                 component: {
                     placeholder: '请输入手机号码'
@@ -323,19 +326,16 @@ export const crudOptions = (vm) => {
             key: 'email',
             minWidth: 180,
             form: {
-          rules: [
+                rules: [{
-            {
                     type: 'email',
                     message: '请输入正确的邮箱地址',
                     trigger: ['blur', 'change']
-            }
+                }],
-          ],
                 component: {
                     placeholder: '请输入邮箱'
                 }
             }
-      },
+        }, {
-      {
             title: '性别',
             key: 'gender',
             type: 'radio',
@@ -349,7 +349,11 @@ export const crudOptions = (vm) => {
                     span: 12
                 }
             },
-        component: { props: { color: 'auto' } } // 自动染色
+            component: {
+                props: {
+                    color: 'auto'
+                }
+            } // 自动染色
         }, {
             title: '用户类型',
             key: 'user_type',
@@ -385,10 +389,13 @@ export const crudOptions = (vm) => {
                     span: 12
                 }
             }
+        }, ].concat(vm.commonEndColumns({
+            create_datetime: {
+                showTable: false
             },
-    ].concat(vm.commonEndColumns({
+            update_datetime: {
-      create_datetime: { showTable: false },
+                showTable: false
-      update_datetime: { showTable: false }
+            }
         }))
     }
 }