Skip to content

S
saas-manage
Commit 26dc9f49 by yangzhi
Options

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

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