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 214 additions and 14 deletions
public/index.html
...@@ -12,7 +12,7 @@ ...@@ -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> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <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 --> <!-- built files will be auto injected -->
</body> </body>
<style> <style>
......
src/views/JiaGouYuanShuGuanLi/index.vue
<template> <template>
<div class="JiaGouYuanShuGuanLi"> <div class="JiaGouYuanShuGuanLi">
<div class="search_menu"> <div class="search_menu">
<div class="search_menu_item_container">
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">架构归属</span> <span class="search_title">架构归属</span>
<el-select v-model="query_item1" placeholder="请选择" class="search_item"> <el-select v-model="query_item1" placeholder="请选择" class="search_item">
...@@ -28,31 +29,66 @@ ...@@ -28,31 +29,66 @@
</el-select> </el-select>
</div> </div>
</div> </div>
<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"> <div class="search_btn">
<el-button type="primary" style="float: left;" @click="add_dialog = true">新建</el-button> <div class="add_btn" @click="add_dialog = true">
<el-button type="info" style="float: right;">重置</el-button> <img class="btn_icon" src="@/assets/新建icon.png" alt="" />
<el-button type="primary" style="float: right;">查询</el-button> <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>
<div class="table_container"> <div class="table_container">
<el-table :data="tableData" stripe border> <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 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="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="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="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 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> <template>
<el-button type="text">预览</el-button> <el-button type="text" style="color: #0D867F;">预览</el-button>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="let5" label="版本" width="180" align="center"></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 prop="let6" label="状态" align="center"></el-table-column>
<el-table-column label="操作" width="200" align="center"> <el-table-column label="操作" width="360" align="center">
<template> <template>
<el-button type="text" icon="el-icon-edit" @click="add_dialog = true">编辑</el-button> <div style="display: flex;align-items: center;justify-content: center;">
<el-button type="text" icon="el-icon-switch-button">停用</el-button> <div class="add_btn" @click="add_dialog = true" style="border: 0;margin-right: 8px;">
<el-button type="text" icon="el-icon-circle-check">发布</el-button> <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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -136,12 +172,21 @@ export default { ...@@ -136,12 +172,21 @@ export default {
} }
.search_menu{ .search_menu{
display: flex; 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{ .search_menu_item{
display: flex; display: flex;
align-items: center; align-items: center;
width: 400px; width: 344px;
} }
.search_title{ .search_title{
/* width: 20%; */ /* width: 20%; */
...@@ -152,11 +197,70 @@ export default { ...@@ -152,11 +197,70 @@ export default {
width: 60%; width: 60%;
} }
.search_btn{ .search_btn{
overflow: hidden; display: flex;
margin-right: 200px; margin-right: 200px;
margin-top: 50px; margin-top: 50px;
margin-left: 200px; 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{ .table_container{
margin-left: 200px; margin-left: 200px;
margin-top: 20px; margin-top: 20px;
......
src/views/Main/index.vue
...@@ -644,5 +644,9 @@ ...@@ -644,5 +644,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer;
}
.menu_1_item_subtitle:hover{
color: #0D867F;
} }
</style> </style>
src/views/YeWuZiChanGuanLi/index.vue
<template> <template>
<div class="YeWuZiChanGuanLi"> <div class="YeWuZiChanGuanLi">
<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> <Drawio :initGraphId="2"></Drawio>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -11,6 +24,74 @@ ...@@ -11,6 +24,74 @@
name: 'YeWuZiChanGuanLi', name: 'YeWuZiChanGuanLi',
components: { components: {
Drawio 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> </script>
...@@ -18,5 +99,15 @@ ...@@ -18,5 +99,15 @@
.YeWuZiChanGuanLi{ .YeWuZiChanGuanLi{
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex;
padding-right: 20px;
}
.left_container{
width: 20%;
margin-right: 20px;
}
.right_container{
width: 80%;
} }
</style> </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!