Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 4ceea449 by liuyong
Options

修改菜单

1 parent 937ff08a
Expand all
Inline Side-by-side
Showing with 239 additions and 39 deletions
public/index.html
......@@ -12,7 +12,7 @@
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script type="text/javascript" src="http://192.168.0.187:9999/web-apps/apps/api/documents/api.js"></script>
<!-- <script type="text/javascript" src="http://192.168.0.187:9999/web-apps/apps/api/documents/api.js"></script> -->
<!-- built files will be auto injected -->
</body>
<style>
......
src/views/JiaGouYuanShuGuanLi/index.vue
<template>
<div class="JiaGouYuanShuGuanLi">
<div class="search_menu">
<div class="search_menu_item">
<span class="search_title">架构归属</span>
<el-select v-model="query_item1" placeholder="请选择" class="search_item">
<el-option label="业务架构" value="业务架构"></el-option>
<el-option label="应用架构" value="应用架构"></el-option>
<el-option label="内容架构" value="内容架构"></el-option>
<el-option label="技术架构" value="技术架构"></el-option>
<el-option label="安全架构" value="安全架构"></el-option>
</el-select>
</div>
<div class="search_menu_item">
<span class="search_title">架构层次</span>
<el-input v-model="query_item2" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item">
<span class="search_title">元素名称</span>
<el-input v-model="query_item3" placeholder="请输入内容" class="search_item"></el-input>
<div class="search_menu_item_container">
<div class="search_menu_item">
<span class="search_title">架构归属</span>
<el-select v-model="query_item1" placeholder="请选择" class="search_item">
<el-option label="业务架构" value="业务架构"></el-option>
<el-option label="应用架构" value="应用架构"></el-option>
<el-option label="内容架构" value="内容架构"></el-option>
<el-option label="技术架构" value="技术架构"></el-option>
<el-option label="安全架构" value="安全架构"></el-option>
</el-select>
</div>
<div class="search_menu_item">
<span class="search_title">架构层次</span>
<el-input v-model="query_item2" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item">
<span class="search_title">元素名称</span>
<el-input v-model="query_item3" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item">
<span class="search_title">状态</span>
<el-select v-model="query_item4" placeholder="请选择" class="search_item">
<el-option label="已发布" value="已发布"></el-option>
<el-option label="已停用" value="已停用"></el-option>
<el-option label="暂存" value="暂存"></el-option>
</el-select>
</div>
</div>
<div class="search_menu_item">
<span class="search_title">状态</span>
<el-select v-model="query_item4" placeholder="请选择" class="search_item">
<el-option label="已发布" value="已发布"></el-option>
<el-option label="已停用" value="已停用"></el-option>
<el-option label="暂存" value="暂存"></el-option>
</el-select>
<div class="search_menu_btn_container">
<div class="query_btn">
<img class="btn_icon" src="@/assets/查询icon.png" alt="" />
<p>查询</p>
</div>
<div class="reset_btn">
<img class="btn_icon" src="@/assets/重置icon.png" alt="" />
<p>重置</p>
</div>
</div>
</div>
<div class="search_btn">
<el-button type="primary" style="float: left;" @click="add_dialog = true">新建</el-button>
<el-button type="info" style="float: right;">重置</el-button>
<el-button type="primary" style="float: right;">查询</el-button>
<div class="add_btn" @click="add_dialog = true">
<img class="btn_icon" src="@/assets/新建icon.png" alt="" />
<p>新建</p>
</div>
<div class="version_btn">
<img class="btn_icon" src="@/assets/版本发布icon.png" alt="" />
<p>版本发布</p>
</div>
<!-- <el-button type="info" style="float: right;">重置</el-button> -->
<!-- <el-button type="primary" style="float: right;">查询</el-button> -->
</div>
<div class="table_container">
<el-table :data="tableData" stripe border>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="let1" label="元素名称" width="180" align="center"></el-table-column>
<el-table-column prop="let2" label="架构层次" width="180" align="center"></el-table-column>
<el-table-column prop="let3" label="架构归属" width="180" align="center"></el-table-column>
<el-table-column prop="let4" label="描述" width="180" align="center"></el-table-column>
<el-table-column label="图标" width="180" align="center">
<el-table-column label="图标" align="center">
<template>
<el-button type="text">预览</el-button>
<el-button type="text" style="color: #0D867F;">预览</el-button>
</template>
</el-table-column>
<el-table-column prop="let5" label="版本" width="180" align="center"></el-table-column>
<el-table-column prop="let6" label="状态" width="180" align="center"></el-table-column>
<el-table-column label="操作" width="200" align="center">
<el-table-column prop="let6" label="状态" align="center"></el-table-column>
<el-table-column label="操作" width="360" align="center">
<template>
<el-button type="text" icon="el-icon-edit" @click="add_dialog = true">编辑</el-button>
<el-button type="text" icon="el-icon-switch-button">停用</el-button>
<el-button type="text" icon="el-icon-circle-check">发布</el-button>
<div style="display: flex;align-items: center;justify-content: center;">
<div class="add_btn" @click="add_dialog = true" style="border: 0;margin-right: 8px;">
<img class="btn_icon" src="@/assets/编辑_icon_default.png" alt="" />
<p>编辑</p>
</div>
<!-- <el-button type="text" icon="el-icon-edit" @click="add_dialog = true">编辑</el-button> -->
<div class="reset_btn" style="border: 0;margin-right: 8px;">
<img class="btn_icon" src="@/assets/停用_icon_default.png" alt="" />
<p>停用</p>
</div>
<div class="add_btn" style="border: 0;">
<img class="btn_icon" src="@/assets/发布_icon_default.png" alt="" />
<p>发布</p>
</div>
<div class="reset_btn" style="border: 0;margin-right: 8px;">
<img class="btn_icon" src="@/assets/删除_icon_default.png" alt="" />
<p>删除</p>
</div>
</div>
</template>
</el-table-column>
</el-table>
......@@ -136,12 +172,21 @@ export default {
}
.search_menu{
display: flex;
justify-content: center;
/* justify-content: center; */
margin-left: 200px;
}
.search_menu_item_container{
display: flex;
align-items: center;
}
.search_menu_btn_container{
display: flex;
align-items: center;
}
.search_menu_item{
display: flex;
align-items: center;
width: 400px;
width: 344px;
}
.search_title{
/* width: 20%; */
......@@ -152,11 +197,70 @@ export default {
width: 60%;
}
.search_btn{
overflow: hidden;
display: flex;
margin-right: 200px;
margin-top: 50px;
margin-left: 200px;
}
.add_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(13,134,127,0.1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #0D867F;
cursor: pointer;
}
.version_btn{
display: flex;
align-items: center;
justify-content: center;
width: 104px;
height: 32px;
background: rgba(13,134,127,0.1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #0D867F;
cursor: pointer;
margin-left: 15px;
}
.query_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(13,134,127,1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #fff;
margin-right: 10px;
cursor: pointer;
}
.reset_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(244,244,244,1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #666;
cursor: pointer;
}
.btn_icon{
margin-right: 10px;
}
.table_container{
margin-left: 200px;
margin-top: 20px;
......
src/views/Main/index.vue
......@@ -644,5 +644,9 @@
display: flex;
align-items: center;
margin-bottom: 10px;
cursor: pointer;
}
.menu_1_item_subtitle:hover{
color: #0D867F;
}
</style>
src/views/YeWuZiChanGuanLi/index.vue
<template>
<div class="YeWuZiChanGuanLi">
<Drawio :initGraphId="2"></Drawio>
<div class="left_container">
<el-input placeholder="请输入搜索内容" v-model="filterText" suffix-icon="el-icon-search"></el-input>
<el-tree
class="filter-tree"
:data="treeData"
:props="{ children: 'children', label: 'label' }"
default-expand-all
:filter-node-method="filterNode"
ref="tree">
</el-tree>
</div>
<div class="right_container">
<Drawio :initGraphId="2"></Drawio>
</div>
</div>
</template>
......@@ -11,6 +24,74 @@
name: 'YeWuZiChanGuanLi',
components: {
Drawio
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
data() {
return {
filterText: '',
treeData: [
{
id: '1',
label: '业务架构',
children: [
{
id: '1-1',
label: '业务域',
children: [
{
id: '1-1-1',
label: '生产检修',
children: [
{
id: '1-1-1-1',
label: '业务职能',
children: [
{ id: '1-1-1-1-1', label: '国际业务' },
{ id: '1-1-1-1-2', label: '科研业务' },
{ id: '1-1-1-1-3', label: '协同办公' },
{
id: '1-1-1-1-4',
label: '综合管理',
children: [
{
id: '1-1-1-1-4-1',
label: '业务流程',
children: [
{ id: '1-1-1-1-4-1-1', label: '综合审批' },
{ id: '1-1-1-1-4-1-2', label: '项目填报' },
]
},
]
},
]
}
]
}
]
},
{ id: '1-2', label: '财力资源' },
{ id: '1-3', label: '物力资源' },
{ id: '1-4', label: '规划计划' },
{ id: '1-5', label: '电网建设' },
{ id: '1-6', label: '电力营销' },
{ id: '1-7', label: '调度运行' },
{ id: '1-8', label: '电力交易' },
{ id: '1-9', label: '产业业务' },
{ id: '1-10', label: '金融业务' },
]
}
]
};
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
}
}
</script>
......@@ -18,5 +99,15 @@
.YeWuZiChanGuanLi{
width: 100%;
height: 100%;
display: flex;
padding-right: 20px;
}
.left_container{
width: 20%;
margin-right: 20px;
}
.right_container{
width: 80%;
}
</style>
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!