no message
This commit is contained in:
parent
ae9c924a9e
commit
b2bcbec3fa
@ -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;
|
||||
width: 60px;
|
||||
height: 50px;
|
||||
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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -48,22 +48,22 @@
|
||||
/*滚动条凹槽的颜色，还可以设置边框属性 */
|
||||
*::-webkit-scrollbar-track-piece {
|
||||
background-color: #f8f8f8;
|
||||
-webkit-border-radius: 2em;
|
||||
-moz-border-radius: 2em;
|
||||
border-radius: 2em;
|
||||
-webkit-border-radius: 1em;
|
||||
-moz-border-radius: 1em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
/*滚动条的宽度*/
|
||||
*::-webkit-scrollbar {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
/*滚动条的设置*/
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: #dddddd;
|
||||
background-clip: padding-box;
|
||||
-webkit-border-radius: 2em;
|
||||
-moz-border-radius: 2em;
|
||||
border-radius: 2em;
|
||||
-webkit-border-radius: 1em;
|
||||
-moz-border-radius: 1em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
/*滚动条鼠标移上去*/
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
@ -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)
|
||||
|
||||
143
src/components/x-avatar/index.vue
Normal file
143
src/components/x-avatar/index.vue
Normal file
@ -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>
|
||||
@ -1,10 +1,27 @@
|
||||
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' } } } },
|
||||
component: { name: 'd2p-images-format' },
|
||||
form: {
|
||||
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',
|
||||
// 提交时,处理数据
|
||||
@ -41,10 +58,29 @@ 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 } } } },
|
||||
component: { name: 'd2p-images-format' },
|
||||
form: {
|
||||
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',
|
||||
// 提交时,处理数据
|
||||
@ -81,8 +117,19 @@ export default {
|
||||
}
|
||||
},
|
||||
'file-uploader': {
|
||||
form: { component: { name: 'd2p-file-uploader', props: { elProps: { listType: 'text' } } } },
|
||||
component: { name: 'd2p-files-format' },
|
||||
form: {
|
||||
component: {
|
||||
name: 'd2p-file-uploader',
|
||||
props: {
|
||||
elProps: {
|
||||
listType: 'text'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
component: {
|
||||
name: 'd2p-files-format'
|
||||
},
|
||||
// 提交时,处理数据
|
||||
valueResolve(row, col) {
|
||||
const value = row[col.key]
|
||||
@ -117,16 +164,26 @@ export default {
|
||||
}
|
||||
},
|
||||
'avatar-cropper': {
|
||||
form: { component: { name: 'd2p-cropper-uploader', props: { accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif', cropper: { viewMode: 1 } } } },
|
||||
component: { name: 'd2p-images-format' },
|
||||
form: {
|
||||
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 },
|
||||
slots:{ //scoped插槽jsx
|
||||
default:(h,scope)=>{ //默认的scoped插槽
|
||||
return ('<div>{scope.data}</div>')
|
||||
}
|
||||
props: {
|
||||
height: 100,
|
||||
width: 100
|
||||
},
|
||||
}
|
||||
},
|
||||
@ -164,7 +221,15 @@ export default {
|
||||
}
|
||||
},
|
||||
'tree-selector': {
|
||||
form: { component: { name: 'd2p-tree-selector', props: { } } },
|
||||
component: { name: 'values-format', props: {} }
|
||||
form: {
|
||||
component: {
|
||||
name: 'd2p-tree-selector',
|
||||
props: {}
|
||||
}
|
||||
},
|
||||
component: {
|
||||
name: 'values-format',
|
||||
props: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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',
|
||||
@ -40,8 +44,7 @@ export const crudOptions = (vm) => {
|
||||
return !vm.hasPermissions('Delete')
|
||||
}
|
||||
},
|
||||
custom: [
|
||||
{
|
||||
custom: [{
|
||||
thin: true,
|
||||
text: '密码重置',
|
||||
size: 'small',
|
||||
@ -51,8 +54,7 @@ export const crudOptions = (vm) => {
|
||||
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,7 +154,9 @@ export const crudOptions = (vm) => {
|
||||
value: vm.systemConfig('base.default_password'),
|
||||
editDisabled: true,
|
||||
itemProps: {
|
||||
class: { yxtInput: true }
|
||||
class: {
|
||||
yxtInput: true
|
||||
}
|
||||
}
|
||||
},
|
||||
disabled: true,
|
||||
@ -164,8 +165,7 @@ export const crudOptions = (vm) => {
|
||||
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({
|
||||
create_datetime: { showTable: false },
|
||||
update_datetime: { showTable: false }
|
||||
update_datetime: {
|
||||
showTable: false
|
||||
}
|
||||
}))
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user