elink-star
/
esua-epdc-admin
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

菜单管理 添加icon

master
qushutong 6 years ago
parent
895c2bf7c5
commit
2b2b73968d
4 changed files with 65 additions and 109 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 79
      src/views/modules/sys/app-menu-add-or-update.vue
  2. 13
      src/views/modules/sys/app-menu.vue
  3. 60
      src/views/modules/sys/appmenutemplate-add-or-update.vue
  4. 10
      src/views/modules/sys/appmenutemplate.vue

79
src/views/modules/sys/app-menu-add-or-update.vue
View File

@ -69,32 +69,20 @@
:label="$t('menu.sort')"></el-input-number> :label="$t('menu.sort')"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item v-if="dataForm.type === 0" <el-form-item v-if="dataForm.type === 0"
prop="icon" label="菜单图标"
:label="$t('menu.icon')" v-loading="loading"
class="icon-list"> prop="icon">
<el-popover v-model="iconListVisible" <el-upload class="avatar-uploader"
ref="iconListPopover" :action="uploadUrl"
placement="bottom-start" :show-file-list="false"
trigger="click" :on-success="handleAvatarSuccess"
popper-class="mod-sys__menu-icon-popover"> :before-upload="beforeAvatarUpload">
<div class="mod-sys__menu-icon-inner"> <img v-if="dataForm.icon"
<div class="mod-sys__menu-icon-list"> :src="dataForm.icon"
<el-button v-for="(item, index) in iconList" class="avatar">
:key="index" <i v-else
@click="iconListCurrentChangeHandle(item)" class="el-icon-plus avatar-uploader-icon"></i>
:class="{ 'is-active': dataForm.icon === item }"> </el-upload>
<svg class="icon-svg"
aria-hidden="true">
<use :xlink:href="`#${item}`"></use>
</svg>
</el-button>
</div>
</div>
</el-popover>
<el-input v-model="dataForm.icon"
v-popover:iconListPopover
:readonly="true"
:placeholder="$t('menu.icon')"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="子菜单模板" <el-form-item label="子菜单模板"
prop="templateId"> prop="templateId">
@ -160,6 +148,7 @@
</template> </template>
<script> <script>
import Cookies from 'js-cookie'
import debounce from 'lodash/debounce' import debounce from 'lodash/debounce'
import { getIconList } from '@/utils' import { getIconList } from '@/utils'
export default { export default {
@ -184,7 +173,9 @@ export default {
icon: '', icon: '',
menuCode: '', menuCode: '',
templateId: '' templateId: ''
} },
uploadUrl: '',
loading: false
} }
}, },
computed: { computed: {
@ -207,6 +198,7 @@ export default {
methods: { methods: {
init () { init () {
this.visible = true this.visible = true
this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['dataForm'].resetFields() this.$refs['dataForm'].resetFields()
this.iconList = getIconList() this.iconList = getIconList()
@ -303,7 +295,15 @@ export default {
}) })
}).catch(() => { }) }).catch(() => { })
}) })
}, 1000, { 'leading': true, 'trailing': false }) }, 1000, { 'leading': true, 'trailing': false }),
// 上传图片
handleAvatarSuccess (res, file) {
this.loading = false
this.dataForm.icon = res.data.url
},
beforeAvatarUpload (file) {
this.loading = true
}
} }
} }
</script> </script>
@ -349,5 +349,28 @@ export default {
} }
} }
} }
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 378px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 300px;
height: 178px;
display: block;
}
} }
</style> </style>

13
src/views/modules/sys/app-menu.vue
View File

@ -20,14 +20,13 @@
header-align="center" header-align="center"
width="150"></table-tree-column> width="150"></table-tree-column>
<el-table-column prop="icon" <el-table-column prop="icon"
:label="$t('menu.icon')" label="菜单图标"
header-align="center" header-align="center"
align="center"> align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<svg class="icon-svg" <img :src="scope.row.icon"
aria-hidden="true"> width="40"
<use :xlink:href="`#${scope.row.icon}`"></use> height="40" />
</svg>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="type" <el-table-column prop="type"
@ -46,7 +45,7 @@
:label="$t('menu.sort')" :label="$t('menu.sort')"
header-align="center" header-align="center"
align="center"></el-table-column> align="center"></el-table-column>
<el-table-column prop="url" <!-- <el-table-column prop="url"
:label="$t('menu.url')" :label="$t('menu.url')"
header-align="center" header-align="center"
align="center" align="center"
@ -57,7 +56,7 @@
header-align="center" header-align="center"
align="center" align="center"
width="150" width="150"
:show-overflow-tooltip="true"></el-table-column> :show-overflow-tooltip="true"></el-table-column> -->
<el-table-column :label="$t('handle')" <el-table-column :label="$t('handle')"
fixed="right" fixed="right"
header-align="center" header-align="center"

60
src/views/modules/sys/appmenutemplate-add-or-update.vue
View File

@ -42,21 +42,6 @@
<el-input v-model="dataForm.lableColor" <el-input v-model="dataForm.lableColor"
placeholder="标签颜色"></el-input> placeholder="标签颜色"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="菜单图标"
v-loading="loading"
prop="icon">
<el-upload class="avatar-uploader"
:action="uploadUrl"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="dataForm.icon"
:src="dataForm.icon"
class="avatar">
<i v-else
class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="模板编码" <el-form-item label="模板编码"
prop="templateCode"> prop="templateCode">
<el-input v-model="dataForm.templateCode" <el-input v-model="dataForm.templateCode"
@ -77,7 +62,6 @@
</template> </template>
<script> <script>
import Cookies from 'js-cookie'
import debounce from 'lodash/debounce' import debounce from 'lodash/debounce'
export default { export default {
data () { data () {
@ -90,7 +74,6 @@ export default {
startColor: '', startColor: '',
endColor: '', endColor: '',
lableColor: '', lableColor: '',
icon: '',
templateCode: '', templateCode: '',
templateName: '', templateName: '',
revision: '', revision: '',
@ -100,9 +83,7 @@ export default {
updatedTime: '' updatedTime: ''
}, },
gradationFlagOptions: [{ id: '1', name: '是' }, { id: '0', name: '否' }], gradationFlagOptions: [{ id: '1', name: '是' }, { id: '0', name: '否' }],
categoryVisible: true, categoryVisible: true
loading: false,
uploadUrl: ''
} }
}, },
computed: { computed: {
@ -123,9 +104,6 @@ export default {
lableColor: [ lableColor: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } { required: true, message: this.$t('validate.required'), trigger: 'blur' }
], ],
icon: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
templateCode: [ templateCode: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } { required: true, message: this.$t('validate.required'), trigger: 'blur' }
], ],
@ -167,7 +145,6 @@ export default {
if (this.dataForm.id) { if (this.dataForm.id) {
this.getInfo() this.getInfo()
} }
this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
}) })
}, },
// 获取信息 // 获取信息
@ -203,40 +180,7 @@ export default {
}) })
}).catch(() => { }) }).catch(() => { })
}) })
}, 1000, { 'leading': true, 'trailing': false }), }, 1000, { 'leading': true, 'trailing': false })
// 上传图片
handleAvatarSuccess (res, file) {
this.loading = false
this.dataForm.icon = res.data.url
},
beforeAvatarUpload (file) {
this.loading = true
}
} }
} }
</script> </script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 378px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 300px;
height: 178px;
display: block;
}
</style>

10
src/views/modules/sys/appmenutemplate.vue
View File

@ -54,16 +54,6 @@
label="标签颜色" label="标签颜色"
header-align="center" header-align="center"
align="center"></el-table-column> align="center"></el-table-column>
<el-table-column prop="icon"
label="菜单图标"
header-align="center"
align="center">
<template slot-scope="scope">
<img :src="scope.row.icon"
width="40"
height="40" />
</template>
</el-table-column>
<el-table-column prop="templateCode" <el-table-column prop="templateCode"
label="模板编码" label="模板编码"
header-align="center" header-align="center"

Write Preview
Loading…
Cancel
Save