|
|
|
@ -69,42 +69,30 @@ |
|
|
|
:label="$t('menu.sort')"></el-input-number> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-if="dataForm.type === 0" |
|
|
|
prop="icon" |
|
|
|
:label="$t('menu.icon')" |
|
|
|
class="icon-list"> |
|
|
|
<el-popover v-model="iconListVisible" |
|
|
|
ref="iconListPopover" |
|
|
|
placement="bottom-start" |
|
|
|
trigger="click" |
|
|
|
popper-class="mod-sys__menu-icon-popover"> |
|
|
|
<div class="mod-sys__menu-icon-inner"> |
|
|
|
<div class="mod-sys__menu-icon-list"> |
|
|
|
<el-button v-for="(item, index) in iconList" |
|
|
|
:key="index" |
|
|
|
@click="iconListCurrentChangeHandle(item)" |
|
|
|
:class="{ 'is-active': dataForm.icon === item }"> |
|
|
|
<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> |
|
|
|
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="子菜单模板" |
|
|
|
prop="templateId"> |
|
|
|
prop="templateId"> |
|
|
|
<el-select v-model="dataForm.templateId" |
|
|
|
clearable |
|
|
|
placeholder="子菜单模板"> |
|
|
|
clearable |
|
|
|
placeholder="子菜单模板"> |
|
|
|
<el-option v-for="item in templates" |
|
|
|
:key="item.id" |
|
|
|
:label="item.templateName" |
|
|
|
:value="item.id"> |
|
|
|
:key="item.id" |
|
|
|
:label="item.templateName" |
|
|
|
:value="item.id"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
@ -160,6 +148,7 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import Cookies from 'js-cookie' |
|
|
|
import debounce from 'lodash/debounce' |
|
|
|
import { getIconList } from '@/utils' |
|
|
|
export default { |
|
|
|
@ -184,7 +173,9 @@ export default { |
|
|
|
icon: '', |
|
|
|
menuCode: '', |
|
|
|
templateId: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
uploadUrl: '', |
|
|
|
loading: false |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -207,6 +198,7 @@ export default { |
|
|
|
methods: { |
|
|
|
init () { |
|
|
|
this.visible = true |
|
|
|
this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}` |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs['dataForm'].resetFields() |
|
|
|
this.iconList = getIconList() |
|
|
|
@ -303,7 +295,15 @@ export default { |
|
|
|
}) |
|
|
|
}).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> |
|
|
|
@ -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> |
|
|
|
|
qushutong
6 years ago