Skip to content

S
saas-manage
Commit 26dc9f49 by yangzhi
Options

fix:菜单管理（样式修改）

parent ac6e152f
Showing with 171 additions and 113 deletions
src/views/menu.vue
<template> <template>
<div class="system-menu card"> <div class='system-menu card'>
<div class="header"> <div class='header'>
<el-form <el-form
size="mini" size='mini'
:inline="true" :inline='true'
label-width="80px" label-width='80px'
> >
<el-form-item label> <el-form-item label>
<el-button <el-button
type="primary" type='primary'
@click="showDialog({ id: 0 }, 2)" @click='showDialog({ id: 0 }, 2)'
> >
新增 新增
</el-button> </el-button>
...@@ -17,47 +17,47 @@ ...@@ -17,47 +17,47 @@
</el-form> </el-form>
</div> </div>
<div class="table-wrap" v-loading="loading"> <div class='table-wrap' v-loading='loading'>
<table-view <table-view
:tableColumns="tableColumns" :tableColumns='tableColumns'
rowKey="id" rowKey='id'
:serialNumber="false" :serialNumber='false'
:treeConfig="{ :treeConfig="{
children: 'children', children: 'children',
reserve: true, reserve: true,
}" }"
:sourceData="sourceData" :sourceData='sourceData'
></table-view> ></table-view>
</div> </div>
<el-dialog <el-dialog
:title="isEdit ? '修改' : '新增'" :title="isEdit ? '修改' : '新增'"
:visible.sync="dialogVisible" :visible.sync='dialogVisible'
:close-on-click-modal="false" :close-on-click-modal='false'
:before-close="beforeClose" :before-close='beforeClose'
width="820px" width='820px'
> >
<el-form <el-form
size="mini" size='mini'
:inline="true" :inline='true'
label-width="120px" label-width='120px'
:rules="rules" :rules='rules'
ref="editForm" ref='editForm'
:model="editForm" :model='editForm'
> >
<el-form-item label="菜单名称" prop="name" required> <el-form-item label='菜单名称' prop='name' required>
<el-input <el-input
style="width: 164px" style='width: 220px'
v-model="editForm.name" v-model='editForm.name'
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="父级菜单"> <el-form-item label='父级菜单'>
<el-cascader <el-cascader
:show-all-levels="false" :show-all-levels='false'
v-model="editForm.pid" v-model='editForm.pid'
:disabled="editForm.type === 1" :disabled='editForm.type === 1'
style="width: 164px" style='width: 220px'
:options="showMenu" :options='showMenu'
:props="{ :props="{
checkStrictly: true, checkStrictly: true,
label: 'name', label: 'name',
...@@ -67,128 +67,152 @@ ...@@ -67,128 +67,152 @@
clearable clearable
></el-cascader> ></el-cascader>
</el-form-item> </el-form-item>
<el-form-item label="类型" prop="type" required> <el-form-item label='类型' prop='type' required>
<el-select <div style='width: 220px; display: inline-block' class='radioGroup'>
style="width: 164px" <el-radio
v-model="editForm.type" v-model='editForm.type'
placeholder="请选择" :label='0'
>菜单
</el-radio
> >
<el-option label="菜单" :value="0"></el-option> <el-radio
<el-option label="按钮" :value="1"></el-option> v-model='editForm.type'
<el-option :label='1'
label="左边栏" >按钮
:value="2" </el-radio
></el-option> >
</el-select> <el-radio
v-model='editForm.type'
:label='2'
>左边栏
</el-radio
>
</div>
<!-- <el-select-->
<!-- style="width: 220px"-->
<!-- v-model="editForm.type"-->
<!-- placeholder="请选择"-->
<!-- >-->
<!-- <el-option label="菜单" :value="0"></el-option>-->
<!-- <el-option label="按钮" :value="1"></el-option>-->
<!-- <el-option-->
<!-- label="左边栏"-->
<!-- :value="2"-->
<!-- ></el-option>-->
<!-- </el-select>-->
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="路径名称" label='路径名称'
:required="editForm.pid !== 0" :required='editForm.pid !== 0'
prop="path" prop='path'
> >
<el-input <el-input
style="width: 164px" style='width: 220px'
:disabled="isEdit" :disabled='isEdit'
v-model="editForm.path" v-model='editForm.path'
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="路径地址"> <el-form-item label='路径地址'>
<el-input <el-input
style="width: 164px" style='width: 220px'
v-model="editForm.route" v-model='editForm.route'
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="接口路径"> <el-form-item label='接口路径'>
<el-input <el-input
style="width: 164px" style='width: 220px'
v-model="editForm.url" v-model='editForm.url'
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="等级" prop="level"> <el-form-item label='等级' prop='level'>
<el-input <el-input
style="width: 164px" style='width: 220px'
v-model="editForm.level" v-model='editForm.level'
/> />
</el-form-item> </el-form-item>
<el-form-item label="启用状态"> <el-form-item label='启用状态'>
<div style="width: 164px; display: inline-block"> <div style='width: 220px; display: inline-block'>
<el-radio <el-radio
v-model="editForm.enable" v-model='editForm.enable'
:label="true" :label='true'
>启用</el-radio >启用
</el-radio
> >
<el-radio <el-radio
v-model="editForm.enable" v-model='editForm.enable'
:label="false" :label='false'
>禁用</el-radio >禁用
</el-radio
> >
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label=" 排序"> <el-form-item label=' 排序'>
<el-input <el-input
style="width: 164px" style='width: 220px'
v-model="editForm.sortNo" v-model='editForm.sortNo'
placeholder placeholder
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="标题"> <el-form-item label='标题'>
<el-input <el-input
style="width: 164px" style='width: 220px'
v-model="editForm.title" v-model='editForm.title'
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="备注"> <el-form-item label='备注'>
<el-input <el-input
style="width: 164px" style='width: 220px'
v-model="editForm.describe" v-model='editForm.describe'
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="包含的namespace"> <el-form-item label='包含的namespace'>
<el-select <el-select
v-model="editForm.includeNamespace" v-model='editForm.includeNamespace'
multiple multiple
style="width: 400px" style='width: 400px'
clearable clearable
placeholder="请选择" placeholder='请选择'
> >
<el-option <el-option
v-for="(item, index) in simpleList" v-for='(item, index) in simpleList'
:key="index" :key='index'
filterable filterable
:label="item.companyName" :label='item.companyName'
:value="item.apiName" :value='item.apiName'
> >
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="排除的namespace"> <el-form-item label='排除的namespace'>
<el-select <el-select
v-model="editForm.excludeNamespace" v-model='editForm.excludeNamespace'
multiple multiple
style="width: 400px" style='width: 400px'
clearable clearable
filterable filterable
placeholder="请选择" placeholder='请选择'
> >
<el-option <el-option
v-for="(item, index) in simpleList" v-for='(item, index) in simpleList'
:key="index" :key='index'
:label="item.companyName" :label='item.companyName'
:value="item.apiName" :value='item.apiName'
> >
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer"> <div slot='footer'>
<el-button size="small" @click="clone" <el-button size='small' @click='clone'
>取 消</el-button >取 消
</el-button
> >
<el-button <el-button
size="small" size='small'
type="primary" type='primary'
@click="submit" @click='submit'
>保 存</el-button >保 存
</el-button
> >
</div> </div>
</el-dialog> </el-dialog>
...@@ -264,10 +288,26 @@ export default { ...@@ -264,10 +288,26 @@ export default {
? '按钮' ? '按钮'
: '左边栏', : '左边栏',
}, },
{ label: '路径名称', key: 'path', width: '' }, {
{ label: '路径地址', key: 'route', width: '' }, label: '路径名称',
{ label: '接口路径', key: 'url', width: '' }, key: 'path',
{ label: '排序', key: 'sortNo', width: '' }, width: '',
},
{
label: '路径地址',
key: 'route',
width: '',
},
{
label: '接口路径',
key: 'url',
width: '',
},
{
label: '排序',
key: 'sortNo',
width: '',
},
{ {
label: '启动状态', label: '启动状态',
key: 'url', key: 'url',
...@@ -276,12 +316,20 @@ export default { ...@@ -276,12 +316,20 @@ export default {
<el-checkbox <el-checkbox
value={item.enable} value={item.enable}
onChange={v => this.enableChange(item, v)} onChange={v => this.enableChange(item, v)}
label="" label=''
></el-checkbox> ></el-checkbox>
), ),
}, },
{ label: '标题', key: 'title', width: '' }, {
{ label: '备注', key: 'describe', width: '' }, label: '标题',
key: 'title',
width: '',
},
{
label: '备注',
key: 'describe',
width: '',
},
{ {
label: '操作', label: '操作',
key: '', key: '',
...@@ -290,23 +338,23 @@ export default { ...@@ -290,23 +338,23 @@ export default {
render: item => ( render: item => (
<div> <div>
<el-button <el-button
size="mini" size='mini'
type="text" type='text'
onClick={() => this.showDialog(item, 1)} onClick={() => this.showDialog(item, 1)}
> >
修改 修改
</el-button> </el-button>
<el-button <el-button
size="mini" size='mini'
type="text" type='text'
onClick={() => this.remove(item)} onClick={() => this.remove(item)}
> >
删除 删除
</el-button> </el-button>
{item.type !== 1 && ( {item.type !== 1 && (
<el-button <el-button
size="mini" size='mini'
type="text" type='text'
onClick={() => this.showDialog(item, 2)} onClick={() => this.showDialog(item, 2)}
> >
新增下级 新增下级
...@@ -423,7 +471,10 @@ export default { ...@@ -423,7 +471,10 @@ export default {
',', ',',
) )
} }
this.editForm = { ...item, enable: true } this.editForm = {
...item,
enable: true,
}
} }
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.editForm && this.$refs.editForm &&
...@@ -503,7 +554,7 @@ export default { ...@@ -503,7 +554,7 @@ export default {
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang='scss' scoped>
.system-menu { .system-menu {
height: 100%; height: 100%;
display: flex; display: flex;
...@@ -515,4 +566,11 @@ export default { ...@@ -515,4 +566,11 @@ export default {
.table-wrap { .table-wrap {
flex: 1; flex: 1;
} }
.radioGroup {
.el-radio {
margin-right: 15px !important;
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment