Skip to content

liangzhen / framework-tools-web

Go to a project
Commit ae30e62e by liuyong
Options

修改菜单

1 parent e4c18de8
Inline Side-by-side
Showing with 554 additions and 270 deletions
public/drawio/js/grapheditor/Menus.js
......@@ -31,7 +31,7 @@ Menus.prototype.defaultFontSize = '12';
* Sets the default font size.
*/
// Menus.prototype.defaultMenuItems = ['file', 'edit', 'view', 'arrange', 'extras', 'help'];
Menus.prototype.defaultMenuItems = ['file', 'edit', 'view', 'arrange', 'extras', 'customSaveFileMenu', 'currentCanvasDataTable'];//二次开发，去掉某些菜单，添加新菜单
Menus.prototype.defaultMenuItems = ['file', 'edit', 'view', 'arrange', 'extras', 'customSaveFileMenu'];//二次开发，去掉某些菜单，添加新菜单
/**
* Adds the label menu items to the given menu and parent.
......
public/drawio/resources/dia.txt
......@@ -287,7 +287,6 @@ exportOptionsDisabledDetails=The owner has disabled options to download, print o
externalChanges=External Changes
extras=Extras
customSaveFileMenu=customSaveFileMenu
currentCanvasDataTable=currentCanvasDataTable
customSubMenu1=功能1
customSubMenu2=功能2
facebook=Facebook
......
public/drawio/resources/dia_zh.txt
......@@ -287,7 +287,6 @@ exportOptionsDisabledDetails=所有者已禁止评论者及浏览者下载、打
externalChanges=外部修改
extras=其它
customSaveFileMenu=自定义保存文件
currentCanvasDataTable=当前画布数据表
customSubMenu1=功能1
customSubMenu2=功能2
facebook=Facebook
......
src/api/index.js
......@@ -24,9 +24,20 @@ export function query_jia_gou_gui_shu(params) {// 查询架构归属
export function delete_jia_gou_gui_shu(params) {// 删除架构元素列表某项
return post('/ele/deleteEle', params);
}
export function version_release_jia_gou_gui_shu(params) {// 版本发布
return post('/ele/updateEleBatch', params);
}
// 架构元素关系管理
// 列表查询
export function getJGYSGLlist(params) {
return post('/eleRel/', params);
}
export function add_jia_gou_yuan_su(params) {// 架构元素管理，新建
return post('/ele/addEle', params);
}
export function edit_jia_gou_yuan_su(params) {// 架构元素管理，新建
return post('/ele/updateEle', params);
}
export function add_yuan_mo_xing(params) {// 元模型管理，新建
return post('/ynMol/addYnMol', params);
}
\ No newline at end of file
src/router/index.js
......@@ -44,25 +44,31 @@ const routes = [
name: 'YeWuZiChanGuanLi',
component: () => import('@/views/YeWuZiChanGuanLi/index.vue'),
},
{
path: '/main/YuanMoXingGuanLi',//元模型管理
name: 'YuanMoXingGuanLi',
component: () => import('@/views/YuanMoXingGuanLi/index.vue'),
},
// {
// path: '/main/YuanMoXingGuanLiCanvas',//元模型管理画布
// name: 'YuanMoXingGuanLiCanvas',
// component: () => import('@/views/YuanMoXingGuanLi/YuanMoXingGuanLiCanvas/index.vue'),
// },
{
path: '/main/wenDangDemo',//在线文档编制
name: 'wenDangDemo',
component: () => import('@/views/wenDangDemo/index.vue'),
},
{
path: '/main/YuanMoXingGuanLiZongLan',//元模型管理总览
name: 'YuanMoXingGuanLiZongLan',
component: () => import('@/views/YuanMoXingGuanLiZongLan/index.vue'),
},{
path: '/main/NewPage',//drawio跳转的表格预览
name: 'NewPage',
component: () => import('@/views/NewPage/index.vue'),
path: '/main/YuanMoXingGuanLi',//元模型管理
name: 'YuanMoXingGuanLi',
component: () => import('@/views/YuanMoXingGuanLi/index.vue'),
},
{
path: '/main/YuanMoXingGuanLiDetails',//元模型管理详情
name: 'YuanMoXingGuanLiDetails',
component: () => import('@/views/YuanMoXingGuanLi/details.vue'),
}
// {
// path: '/main/YuanMoXingGuanLiTable',//drawio跳转的表格
// name: 'YuanMoXingGuanLiTable',
// component: () => import('@/views/YuanMoXingGuanLi/YuanMoXingGuanLiTable/index.vue'),
// }
]
}
]
......
src/views/JiaGouYuanSuGuanLi/index.vue
......@@ -34,21 +34,21 @@
</div>
</div>
<div class="search_btn">
<div class="add_btn" @click="add_dialog = true">
<div class="add_btn" @click="add">
<img class="btn_icon" src="@/assets/新建icon.png" alt="" />
<p>新建</p>
</div>
<div class="version_btn">
<div class="version_btn" @click="version_release">
<img class="btn_icon" src="@/assets/版本发布icon.png" alt="" />
<p>版本发布</p>
</div>
</div>
<el-table v-loading="loading" :data="tableData" stripe border height="400">
<el-table @selection-change="select_table_rows" v-loading="loading" :data="tableData" stripe border height="400">
<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="elementName" label="元素名称" align="center"></el-table-column>
<el-table-column prop="archiLevel" label="架构层次" align="center"></el-table-column>
<el-table-column prop="archIBelongId" label="架构归属" align="center"></el-table-column>
<el-table-column prop="archiLevelName" label="架构层次" align="center"></el-table-column>
<el-table-column prop="archiBelongName" label="架构归属" align="center"></el-table-column>
<el-table-column prop="content" label="描述" align="center"></el-table-column>
<el-table-column label="图标" align="center">
<template>
......@@ -66,7 +66,7 @@
<el-table-column label="操作" width="360" align="center">
<template slot-scope="scope">
<div style="display: flex;align-items: center;justify-content: center;">
<div class="add_btn" @click="add_dialog = true" style="border: 0;margin-right: 8px;">
<div class="add_btn" @click="edit(scope.row)" style="border: 0;margin-right: 8px;">
<img class="btn_icon" src="@/assets/编辑_icon_default.png" alt="" />
<p>编辑</p>
</div>
......@@ -143,33 +143,33 @@
<div class="dialog_form_item_title">图标设置:</div>
<div>
<div class="dialog_form_item3_content1" style="margin-bottom: 10px;">
<el-radio v-model="radio" label="1">
<el-radio v-model="radio" label="长方形">
<img class="tu_biao_icon" src="@/assets/长方形.svg" alt="" />
</el-radio>
<el-radio v-model="radio" label="2">
<el-radio v-model="radio" label="菱形">
<img class="tu_biao_icon" src="@/assets/菱形.svg" alt="" />
</el-radio>
<el-radio v-model="radio" label="3">
<el-radio v-model="radio" label="椭圆">
<img class="tu_biao_icon" src="@/assets/椭圆.svg" alt="" />
</el-radio>
</div>
<div class="dialog_form_item3_content1">
<el-radio v-model="radio2" label="1">
<el-radio v-model="radio2" label="red">
<img class="tu_biao_icon2" src="@/assets/正方形1.svg" alt="" />
</el-radio>
<el-radio v-model="radio2" label="2">
<el-radio v-model="radio2" label="yellow">
<img class="tu_biao_icon2" src="@/assets/正方形2.svg" alt="" />
</el-radio>
<el-radio v-model="radio2" label="3">
<el-radio v-model="radio2" label="green">
<img class="tu_biao_icon2" src="@/assets/正方形3.svg" alt="" />
</el-radio>
<el-radio v-model="radio2" label="4">
<el-radio v-model="radio2" label="lightyellow">
<img class="tu_biao_icon2" src="@/assets/正方形4.svg" alt="" />
</el-radio>
<el-radio v-model="radio2" label="5">
<el-radio v-model="radio2" label="blue">
<img class="tu_biao_icon2" src="@/assets/正方形5.svg" alt="" />
</el-radio>
<el-radio v-model="radio2" label="6">
<el-radio v-model="radio2" label="purple">
<img class="tu_biao_icon2" src="@/assets/正方形6.svg" alt="" />
</el-radio>
</div>
......@@ -178,7 +178,7 @@
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="add_dialog = false">发布</el-button>
<el-button class="greenButton" @click="add_dialog = false">保存</el-button>
<el-button class="greenButton" @click="save_dialog">保存</el-button>
<el-button @click="add_dialog = false">取消</el-button>
</span>
</el-dialog>
......@@ -192,7 +192,10 @@ import {
query_jia_gou_ceng_ci,
add_jia_gou_gui_shu,
query_jia_gou_gui_shu,
delete_jia_gou_gui_shu
delete_jia_gou_gui_shu,
add_jia_gou_yuan_su,
version_release_jia_gou_gui_shu,
edit_jia_gou_yuan_su
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
......@@ -212,22 +215,128 @@ export default {
dialog_let2: '',
dialog_let3: '',
dialog_let4: '',
radio: '1',
radio2: '1',
radio: '长方形',
radio2: 'red',
add_select_item: '',
add_select_item2: '',
search_select1: [],
dialog_select1: [],
loading: false
loading: false,
selectTable: [],
is_add_edit: 'add',
elementId: null,
state: null,
version: null,
};
},
mounted(){
this.get_table();
this.get_dialog_select1();
this.get_dialog_select2();
},
methods: {
add_select1() {
edit(row) {//编辑
this.add_dialog = true;
this.dialog_let1 = row.elementName;
this.dialog_let2 = row.archiLevelId;
this.dialog_let3 = row.archiBelongId;
this.dialog_let4 = row.content;
this.is_add_edit = 'edit';
this.elementId = row.elementId;
this.state = row.state;
this.version = row.version;
},
version_release(){//版本发布
if(this.selectTable.length == 0) {
Message({
type: 'error',
message: '请选择至少一条数据!'
});
}else {
const params = {
};
version_release_jia_gou_gui_shu(params).then(res => {
if(res.code == 200) {
Message({
type: 'success',
message: '版本发布成功!'
});
}else {
Message({
type: 'error',
message: '版本发布失败!'
});
}
})
}
},
select_table_rows(data){//表格的勾选
this.selectTable = data;
console.log(this.selectTable)
},
save_dialog() {//保存
const params = {
elementName: this.dialog_let1,
archiLevelId: this.dialog_let2,
archiBelongId: this.dialog_let3,
content: this.dialog_let4,
icon: this.radio,
color: this.radio2,
};
const requestParams = this.is_add_edit == 'add' ? params : { ...params, elementId: this.elementId, state: this.state, version: this.version };
if(this.is_add_edit == 'add') {
add_jia_gou_yuan_su(requestParams).then(res => {
if(res.code == 200) {
this.add_dialog = false;
Message({
type: 'success',
message: '保存成功!'
});
}else {
Message({
type: 'error',
message: '保存失败!'
});
}
});
}else {
edit_jia_gou_yuan_su(requestParams).then(res => {
if(res.code == 200) {
this.add_dialog = false;
Message({
type: 'success',
message: '保存成功!'
});
}else {
Message({
type: 'error',
message: '保存失败!'
});
}
});
}
this.get_table();
},
add() {//新建按钮
this.add_dialog = true;
this.is_add_edit = 'add';
this.get_dialog_select1().then(res => {
this.dialog_select1 = res;
});
this.get_dialog_select2().then(res => {
this.search_select1 = res;
});
this.dialog_let1 = '';
this.dialog_let2 = '';
this.dialog_let3 = '';
this.dialog_let4 = '';
this.radio = '长方形';
this.radio2 = 'red';
},
add_select1() {//新增架构层次
const params = {
name: this.add_select_item
};
......@@ -245,14 +354,19 @@ export default {
}
});
},
get_dialog_select1() {
query_jia_gou_ceng_ci({}).then(res => {
if(res.code == 200) {
this.dialog_select1 = res.data;
}
get_dialog_select1() {//查询架构层次下拉框值
return new Promise((resolve, reject) => {
query_jia_gou_ceng_ci({}).then(res => {
if(res.code == 200) {
resolve(res.data);
}else{
reject(res.msg);
}
});
});
},
add_select2() {
add_select2() {//新增架构归属
const params = {
name: this.add_select_item2
};
......@@ -270,20 +384,23 @@ export default {
}
});
},
get_dialog_select2() {
query_jia_gou_gui_shu({}).then(res => {
// console.log(res.data);
if(res.code == 200) {
this.search_select1 = res.data;
}
});
get_dialog_select2() {//查询架构归属下拉框值
return new Promise((resolve, reject) => {
query_jia_gou_gui_shu({}).then(res => {
if(res.code == 200) {
resolve(res.data);
}else {
reject(res.msg);
}
});
})
},
reset() {
reset() {//重置
this.query_item1 = null;
this.query_item3 = null;
this.query_item4 = null;
},
get_table() {
get_table() {//查询表格数据
const params = {
"archIBelongId": this.query_item1,
"current": 1,
......@@ -294,14 +411,24 @@ export default {
"state": this.query_item4
};
this.loading = true;
query_jia_gou_yuan_su_guan_xi_table(params).then(res => {
// console.log(res.data);
if(res.code == 200) {
query_jia_gou_yuan_su_guan_xi_table(params).then(result => {
if(result.code == 200) {
this.loading = false;
this.tableData = res.data;
if(result.data.length > 0) {
Promise.all([ this.get_dialog_select1(), this.get_dialog_select2() ]).then(res2 => {
this.dialog_select1 = res2[0];
this.search_select1 = res2[1];
result.data.map(item => {
let result1 = res2[0].find(item2 => item2.levelId == item.archiLevelId);
let result2 = res2[1].find(item2 => item2.belongId == item.archiBelongId);
item['archiBelongName'] = result1 ? result1.name : '';
item['archiLevelName'] = result2 ? result2.name : '';
});
this.tableData = result.data;
})
}
}
})
},
stopItem() {//停用
MessageBox.confirm('确定停用?', '提示', {
......@@ -345,11 +472,12 @@ export default {
}).then(() => {
const params = {
archIBelongId: row.archIBelongId,
state: row.state
state: row.state,
delFlag: 1
}
delete_jia_gou_gui_shu(params).then(res => {
// console.log(res);
if(res.code == 200) {
this.get_table();
Message({
type: 'success',
message: '删除成功!'
......@@ -395,6 +523,7 @@ export default {
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-input-group__append{
background-color: #0D867F;
......@@ -538,9 +667,6 @@ export default {
flex-shrink: 0;
margin-right: 15px;
}
/deep/ .el-dialog__header{
text-align: left;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F;
}
......
src/views/Main/index.vue
......@@ -68,7 +68,7 @@
<span style="margin-left: 5px;">架构视图管理</span>
</div>
<div class="menu_1_item_subtitle" @click="jumpPage('总体架构资产设计与维护', '架构元模型管理', '架构视图管理')">
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">架构视图管理</span>
</div>
......@@ -499,17 +499,17 @@
};
},
mounted(){
window.addEventListener("message", event => {//会一直调用
// console.log(event);
if(event.data == 'newPage') {
// this.$router.push( '/main/NewPage', () => {}, () => {} );
let routeUrl = this.$router.resolve({
path: "/main/NewPage",
});
window.open(routeUrl.href, '_blank');
this.visible1 = false;
}
});
// window.addEventListener("message", event => {//会一直调用
// // console.log(event);
// if(event.data == 'newPage') {
// // this.$router.push( '/main/NewPage', () => {}, () => {} );
// let routeUrl = this.$router.resolve({
// path: "/main/NewPage",
// });
// window.open(routeUrl.href, '_blank');
// this.visible1 = false;
// }
// });
$(".menu_item").hover(function() {
$(this).find(".menu_title").css('color', '#0D867F');
$(this).find(".menu_icon").css('display', 'none');
......@@ -561,11 +561,6 @@
case '在线文档编制':
this.$router.push( '/main/wenDangDemo', () => {}, () => {} );
break;
case '架构视图管理':
this.$router.push( '/main/YuanMoXingGuanLiZongLan', () => {}, () => {} );
this.visible1 = false;
break;
}
}
}
......
src/views/YuanMoXingGuanLi/YuanMoXingGuanLiCanvas/index.vue 0 → 100644
<template>
<div class="YuanMoXingGuanLiCanvas">
<Drawio :initGraphId="1"></Drawio>
</div>
</template>
<script>
import Drawio from '@/components/drawio.vue';
export default {
name: 'YuanMoXingGuanLi',
components: {
Drawio
},
}
</script>
<style scoped>
.YuanMoXingGuanLiCanvas{
width: 100%;
/* height: calc(100% - 20px); */
height: 100%;
/* padding-right: 20px;
padding-left: 20px;
padding-bottom: 20px; */
}
</style>
src/views/NewPage/index.vue → src/views/YuanMoXingGuanLi/YuanMoXingGuanLiTable/index.vue
<template>
<div class="NewPage">
<div class="YuanMoXingGuanLiTable">
<div class="table_container">
<el-table :data="tableData" stripe border>
<el-table v-loading="loading" :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="元素名称" align="center"></el-table-column>
......@@ -34,11 +34,6 @@
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:total="50">
</el-pagination>
</div>
<el-dialog
......@@ -82,7 +77,7 @@
<script>
export default {
name: 'NewPage',
name: 'YuanMoXingGuanLiTable',
components: {
},
......@@ -94,28 +89,20 @@ export default {
let2: '',
let3: '',
let4: '',
loading: false
};
},
}
</script>
<style scoped>
.NewPage{
.YuanMoXingGuanLiTable{
width: 100%;
height: 100%;
}
.table_container{
width: 97%;
margin-top: 20px;
}
.el-pagination{
margin-top: 50px;
}
/deep/ .el-dialog__header{
text-align: left;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F;
}
</style>
\ No newline at end of file
src/views/YuanMoXingGuanLi/details.vue 0 → 100644
<template>
<div class="YuanMoXingGuanLiDetails">
<el-tabs type="border-card">
<el-tab-pane>
<span slot="label">
<i class="el-icon-picture"></i>
</span>
<YuanMoXingGuanLiCanvas></YuanMoXingGuanLiCanvas>
</el-tab-pane>
<el-tab-pane>
<span slot="label">
<i class="el-icon-s-grid"></i>
</span>
<YuanMoXingGuanLiTable></YuanMoXingGuanLiTable>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import YuanMoXingGuanLiCanvas from './YuanMoXingGuanLiCanvas/index.vue';
import YuanMoXingGuanLiTable from './YuanMoXingGuanLiTable/index.vue';
export default {
name: 'YuanMoXingGuanLiDetails',
components: {
YuanMoXingGuanLiCanvas,
YuanMoXingGuanLiTable
},
data() {
return {
};
},
mounted(){
},
methods: {
}
}
</script>
<style scoped>
.YuanMoXingGuanLiDetails{
width: 100%;
height: 100%;
}
/deep/ .el-tabs__nav{
float: right;
}
.el-tabs{
height: 100%;
}
/deep/ .el-tabs__content{
height: calc(100% - 38px);
padding: 0;
}
.el-tab-pane{
height: 100%;
}
</style>
\ No newline at end of file
src/views/YuanMoXingGuanLi/index.vue
<template>
<div class="YuanMoXingGuanLi">
<Drawio :initGraphId="1"></Drawio>
<div class="search_menu">
<el-dropdown trigger="click" @command="handleCommand">
<div class="el-dropdown-link add_btn">
<img class="btn_icon" src="@/assets/新建icon.png" alt="" />
<p>新建</p>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="自由绘图">自由绘图</el-dropdown-item>
<el-dropdown-item command="基于模版绘图">基于模版绘图</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-input v-model="query_item1" placeholder="请输入内容" class="search_item" prefix-icon="el-icon-search"></el-input>
<div class="query_btn">
<p>版本分析</p>
</div>
</div>
<div class="line_title_container">
<div class="title_container">
<el-divider direction="vertical"></el-divider>
<span>已发布</span>
</div>
<el-divider></el-divider>
</div>
<div class="card_container">
<el-card class="card_item" v-for="o in 7" :key="o">
<img class="card_image" @click="to_current_details" src="@/assets/元模型管理.svg" alt="" />
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
元模型 版本XX
</div>
<div class="card_icon">
<i class="el-icon-delete"></i>
</div>
</div>
</el-card>
</div>
<div class="line_title_container">
<div class="title_container">
<el-divider direction="vertical"></el-divider>
<span>暂存</span>
</div>
<el-divider></el-divider>
</div>
<div class="card_container">
<el-card class="card_item" v-for="o in 7" :key="o">
<img class="card_image" @click="to_current_details" src="@/assets/元模型管理.svg" alt="" />
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
元模型 版本XX
</div>
<div class="card_icon">
<i class="el-icon-delete"></i>
</div>
</div>
</el-card>
</div>
<el-dialog
title="新建元模型视图"
:visible.sync="add_dialog"
:center="false"
width="40%">
<div class="add_dialog_content">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item label="版本名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="ok">确定</el-button>
<el-button @click="add_dialog = false">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import Drawio from '@/components/drawio.vue';
import {
add_yuan_mo_xing,
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'YuanMoXingGuanLi',
components: {
export default {
name: 'YuanMoXingGuanLi',
components: {
Drawio
},
data() {
return {
add_dialog: false,
query_item1: '',
ruleForm: {
name: '',
},
rules: {
name: [
{ required: true, message: '请输入版本名称', trigger: 'blur' },
],
}
};
},
mounted(){
},
methods: {
ok() {//弹框点击确定
this.$refs.ruleForm.validate(valid => {
if(valid) {
const params = {
verName: this.ruleForm.name
};
add_yuan_mo_xing(params).then(res => {
// console.log(res)
if(res.code == 200) {
this.add_dialog = false;
this.$router.push( '/main/YuanMoXingGuanLiDetails', () => {}, () => {} );
Message({
type: 'success',
message: '新增成功!'
});
}else {
Message({
type: 'error',
message: '新增失败!'
});
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
to_current_details() {//跳转到详情
this.$router.push( '/main/YuanMoXingGuanLiDetails', () => {}, () => {} );
},
handleCommand(command) {//新建按钮点击
if(command == '自由绘图') {
this.add_dialog = true;
}else {
}
}
}
}
</script>
<style scoped>
.greenButton{
background-color: #0D867F;
color: #fff;
}
.el-form-item{
display: flex;
}
/deep/ .el-form-item__content{
width: 80%;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.card_icon{
cursor: pointer;
}
.card_info{
display: flex;
align-items: center;
justify-content: space-between;
margin: 30px 40px 0 40px;
}
.card_image{
width: 165px;
}
.YuanMoXingGuanLi{
width: 100%;
/* height: calc(100% - 20px); */
height: 100%;
/* padding-right: 20px;
padding-left: 20px;
padding-bottom: 20px; */
}
</style>
.search_menu{
display: flex;
align-items: center;
margin-top: 10px;
margin-bottom: 20px;
}
.card_item{
display: inline-block;
width: 350px;
height: 240px;
margin: 15px;
background-color: #F2FFFE;
cursor: pointer;
}
.search_item{
width: 300px;
margin: 0 10px 0 10px;
}
.btn_icon{
margin-right: 6px;
}
.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;
}
.query_btn{
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 32px;
background: rgba(13,134,127,1);
border-radius: 4px;
border: 1px solid #0D867F;
font-size: 14px;
color: #fff;
margin-right: 10px;
cursor: pointer;
}
.el-divider--horizontal{
margin: 10px 0;
}
.title_container{
display: flex;
align-items: center;
}
.el-divider--vertical{
background-color: #0D867F;
border: 2px solid #0D867F;
}
.card_container{
height: 260px;
margin-bottom: 10px;
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
}
</style>
\ No newline at end of file
src/views/YuanMoXingGuanLiZongLan/index.vue deleted 100644 → 0
<template>
<div class="YuanMoXingZiDianGuanLi">
<div class="search_menu">
<div class="add_btn" @click="add_dialog = true">
<img class="btn_icon" src="@/assets/新建icon.png" alt="" />
<p>新建</p>
</div>
<el-input v-model="query_item1" placeholder="请输入内容" class="search_item" prefix-icon="el-icon-search"></el-input>
<div class="query_btn">
<p>版本分析</p>
</div>
</div>
<div class="line_title_container">
<div class="title_container">
<el-divider direction="vertical"></el-divider>
<span>已发布</span>
</div>
<el-divider></el-divider>
</div>
<div class="card_container">
<el-card class="card_item" v-for="o in 7" :key="o">
<img class="card_image" src="@/assets/元模型管理.svg" alt="" />
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
元模型 版本XX
</div>
<div class="card_icon">
<i class="el-icon-delete"></i>
</div>
</div>
</el-card>
</div>
<div class="line_title_container">
<div class="title_container">
<el-divider direction="vertical"></el-divider>
<span>暂存</span>
</div>
<el-divider></el-divider>
</div>
<div class="card_container">
<el-card class="card_item" v-for="o in 7" :key="o">
<img class="card_image" src="@/assets/元模型管理.svg" alt="" />
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
元模型 版本XX
</div>
<div class="card_icon">
<i class="el-icon-delete"></i>
</div>
</div>
</el-card>
</div>
</div>
</template>
<script>
export default {
name: 'YuanMoXingZiDianGuanLi',
components: {
},
data() {
return {
add_dialog: false,
query_item1: ''
};
},
}
</script>
<style scoped>
.card_icon{
cursor: pointer;
}
.card_info{
display: flex;
align-items: center;
justify-content: space-between;
margin: 30px 40px 0 40px;
}
.card_image{
width: 165px;
}
.YuanMoXingZiDianGuanLi{
width: 100%;
height: 100%;
}
.search_menu{
display: flex;
align-items: center;
margin-top: 10px;
margin-bottom: 20px;
}
.card_item{
display: inline-block;
width: 350px;
height: 240px;
margin: 15px;
background-color: #F2FFFE;
cursor: pointer;
}
.search_item{
width: 300px;
margin: 0 10px 0 10px;
}
.btn_icon{
margin-right: 6px;
}
.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;
}
.query_btn{
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 32px;
background: rgba(13,134,127,1);
border-radius: 4px;
border: 1px solid #0D867F;
font-size: 14px;
color: #fff;
margin-right: 10px;
cursor: pointer;
}
.el-divider--horizontal{
margin: 10px 0;
}
.title_container{
display: flex;
align-items: center;
}
.el-divider--vertical{
background-color: #0D867F;
border: 2px solid #0D867F;
}
.card_container{
height: 260px;
margin-bottom: 10px;
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
}
</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!