Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 037699c2 by liuyong
Options

修改三个架构资产

2 parents 1e604a0c 411fc79a
Expand all
Inline Side-by-side
Showing with 405 additions and 130 deletions
src/router/index.js
......@@ -18,11 +18,6 @@ const routes = [
// component: Home
},
{
path: '/jsmindDemo',
name: 'jsmindDemo',
component: () => import('@/views/jsmindDemo/index.vue'),
},
{
path: '/main',
name: 'main',
// route level code-splitting
......
src/views/archi-asset-manage/index.vue
......@@ -108,8 +108,22 @@
</el-form-item>
<el-form-item label="上级节点:" prop="let2">
<el-select clearable placeholder="请选择" v-model="ruleForm.let2">
<el-option v-for="item in shangJiJieDianSelect" :key="item.assetId" :label="item.assetName" :value="item.assetId"></el-option>
<el-select class="treeSelectClass" clearable placeholder="请选择" v-model="ruleForm.let2">
<!-- <el-option v-for="item in shangJiJieDianSelect" :key="item.assetId" :label="item.assetName" :value="item.assetId"></el-option> -->
<el-option :value="selectValue" :label="selectLabel">
<el-tree
ref="treeSelect"
node-key="assetId"
show-checkbox
:check-strictly="true"
lazy
@check="handleCheckChange"
:data="treeSelectData"
:props="{ children: 'children', label: 'assetName', id: 'assetId' }"
:load="loadTreeSelect">
</el-tree>
</el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="关联资产:" prop="let6">
......@@ -165,7 +179,20 @@
<div class="form_item_container">
<el-form-item label="上级节点:" prop="let1">
<el-select clearable placeholder="请选择" v-model="ruleForm2.let1">
<el-option v-for="item in shangJiJieDianSelect" :key="item.assetId" :label="item.assetName" :value="item.assetId"></el-option>
<!-- <el-option v-for="item in shangJiJieDianSelect" :key="item.assetId" :label="item.assetName" :value="item.assetId"></el-option> -->
<el-option :value="selectValue2" :label="selectLabel2">
<el-tree
ref="treeSelect2"
node-key="assetId"
show-checkbox
:check-strictly="true"
lazy
@check="handleCheckChange2"
:data="treeSelectData"
:props="{ children: 'children', label: 'assetName', id: 'assetId' }"
:load="loadTreeSelect">
</el-tree>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="组件类型:" prop="let2">
......@@ -210,6 +237,11 @@
},
data() {
return {
selectValue:'',
selectLabel: '',
selectCode: '',
selectValue2:'',
selectLabel2: '',
templateDialog: false,
ruleForm2: {
let1: null,
......@@ -251,7 +283,7 @@
treeData: [
{
viewId: 0,
viewName: '系统架构资产',
viewName: '总体架构资产',
subList: []
}
],
......@@ -276,7 +308,7 @@
archiBelongId: null,
assetConstant: null,
// archiAssetTypeId: null,
treeSelectData: [],
};
},
mounted(){
......@@ -319,7 +351,7 @@
assetConstant: this.assetConstant
}
queryGuanLianZiChanSelect(params).then(res => {
console.log(res)
// console.log(res)
this.guanLianZiChanSelect = res.data;
});
......@@ -330,11 +362,11 @@
// console.log(this.ruleForm);
let parentAssetName, assetCode, fieldsValue = [], eleName, targetAsset = [];
if(this.ruleForm.let2 && this.shangJiJieDianSelect.length > 0) {
const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm.let2);
parentAssetName = items.assetName;
assetCode = items.parentCode;
}
// if(this.ruleForm.let2 && this.shangJiJieDianSelect.length > 0) {
// const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm.let2);
// parentAssetName = items.assetName;
// assetCode = items.parentCode;
// }
const items2 = this.zuJianLeiXingSelect.find(item => item.typeId == this.ruleForm.let3);
eleName = items2.elementName;
......@@ -365,8 +397,8 @@
}
console.log(targetAsset)
const params = {
archiAssetState: 2,
archiStage: 2,
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
archiBelongId: this.archiBelongId,
assetConstant: this.assetConstant,
// archiAssetTypeId: this.archiAssetTypeId,
......@@ -374,12 +406,12 @@
assetName: this.ruleForm.let1,
sort: this.ruleForm.let4,
assetId: this.is_add_edit == 'add' ? null : this.editId,
parentAssetId: this.ruleForm.let2,
parentAssetName: parentAssetName,
parentAssetId: this.selectValue,
parentAssetName: this.selectLabel,
isShow: this.ruleForm.let5 == '显示' ? 1 : 0,
fieldsValue: fieldsValue,
targetAsset: targetAsset,
assetCode: assetCode,
assetCode: this.selectCode,
eleName: eleName
}
if(this.is_add_edit == 'add') {
......@@ -476,6 +508,15 @@
}
})
},
openDownloadTemplateDialog() {//打开模版下载窗口
this.templateDialog = true;
this.getShangJiJieDianSelect();
this.$nextTick(() => {
this.$refs.form2.resetFields();
this.ruleForm2.let1 = null;
this.ruleForm2.let2 = null;
});
},
add() {//新建
this.addDialog = true;
this.is_add_edit = 'add';
......@@ -490,19 +531,26 @@
this.ruleForm.let6 = null;
this.ruleForm.dynamicForm_ = [];
this.ruleForm.dynamicForm0_ = [];
this.selectLabel = '';
this.selectValue = '';
this.selectCode = '';
});
},
editItem(row){//编辑
this.addDialog = true;
this.is_add_edit = 'edit';
this.ruleForm.let1 = row.assetName;
this.ruleForm.let2 = row.parentAssetId ? String(row.parentAssetId) : null;
this.ruleForm.let2 = row.parentAssetName;
this.ruleForm.let3 = row.archiEleId;
this.ruleForm.let4 = row.sort;
this.ruleForm.let5 = row.isShow == 1 ? '显示' : '隐藏';
this.editId = row.assetId;
let fieldsValue = row.fieldsValue;
let targetAsset = row.targetAsset;
this.selectCode = row.assetCode;
this.selectLabel = row.parentAssetName;
this.selectValue = row.parentAssetId;
let targetAsset_id = [];
if(targetAsset.length == 4) {
......@@ -516,9 +564,9 @@
item.assetId
)
})
console.log(targetAsset_id)
}
this.ruleForm.let6 = targetAsset_id;
if(fieldsValue.length == 4) {
this.ruleForm.dynamicForm_ = [];
}else {
......@@ -533,17 +581,54 @@
this.ruleForm.dynamicForm_ = fieldsValue_;
}
},
handleCheckChange(data, tree){//上级节点下拉树的勾选
this.selectValue = data.assetId;
this.selectLabel = data.assetName;
this.selectCode = data.assetCode;
this.ruleForm.let2 = data.assetName;
this.$refs.treeSelect.setCheckedKeys([]); // 删除所有选中节点
this.$refs.treeSelect.setCheckedNodes([data]);
},
handleCheckChange2(data, tree){//模版下载的上级节点的下拉树的勾选
this.selectValue2 = data.assetId;
this.selectLabel2 = data.assetName;
this.ruleForm2.let1 = data.assetName;
this.$refs.treeSelect2.setCheckedKeys([]); // 删除所有选中节点
this.$refs.treeSelect2.setCheckedNodes([data]);
},
loadTreeSelect(node, resolve) {//加载上级节点
if (node.level === 0) {
resolve([]);
}else {
const params = {
archiType: this.assetConstant,
parentAssetId: node.data.assetId,
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
// archiAssetTypeId: this.archiAssetTypeId,
};
queryZiChanJiaGouShangJiJieDian(params).then(res => {
if(res.code == 200) {
resolve(res.data);
}
})
}
},
getShangJiJieDianSelect() {//上级节点下拉框值
const params = {
archiType: this.assetConstant,
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
// parentAssetId: this.archiBelongId,
// archiAssetTypeId: this.archiAssetTypeId,
};
queryZiChanJiaGouShangJiJieDian(params).then(res => {
if(res.code == 200) {
console.log('上级节点')
console.log(res.data)
// console.log('上级节点')
// console.log(res.data)
this.shangJiJieDianSelect = res.data;
this.treeSelectData = res.data;
}
})
},
......@@ -604,9 +689,9 @@
};
queryZiChanJiaGouZuJianLeiXing(params).then(res => {
if(res.code == 200) {
console.log('组件类型')
// console.log('组件类型')
console.log(res.data)
// console.log(res.data)
this.zuJianLeiXingSelect = res.data;
}else {
Message({
......@@ -682,23 +767,15 @@
});
inpEle.click();
},
openDownloadTemplateDialog() {//打开模版下载窗口
this.templateDialog = true;
this.$nextTick(() => {
this.$refs.form2.resetFields();
this.ruleForm2.let1 = null;
this.ruleForm2.let2 = null;
});
},
saveTemplateDialog() {//下载模版
this.$refs.form2.validate(valid => {
if(valid) {
const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm2.let1);
let parentName = items.assetName;
// const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm2.let1);
// let parentName = items.assetName;
const params = {
parentId: this.ruleForm2.let1,
parentName: parentName,
parentId: this.selectValue2,
parentName: this.selectLabel2,
typeId: this.ruleForm2.let2
}
......@@ -707,6 +784,7 @@
// parentName: '应用架构A',
// typeId: 149
// }
// console.log(params)
exportZhiChanJiaGou(params).then(res => {
let blob = new Blob([res], { type: 'application/octet-stream' });
let url = URL.createObjectURL(blob);
......@@ -847,8 +925,6 @@
// break;
// }
// });
console.log('树')
console.log(res.data)
this.treeData[0].subList = res.data;
this.archiBelongId = res.data[0].archiBelongId;
this.assetConstant = res.data[0].assetConstant;
......@@ -877,6 +953,9 @@
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
.el-select-dropdown__item{
height: auto;
}
</style>
<style scoped>
.filter-tree{
......@@ -887,6 +966,12 @@
.dynamicFormClass{
width: 100% !important;
}
/deep/ .el-tree-node__expand-icon {
column-count: #01b7c9;
}
/deep/ .el-tree-node__expand-icon.is-leaf {
color: transparent !important;
}
/deep/ .dynamicFormClass .el-form-item__content {
width: calc(100% - 210px) !important;
text-align: left;
......
src/views/archi-view-manage/details.vue
......@@ -5,27 +5,35 @@
<span slot="label">
<i class="el-icon-picture"></i>
</span>
<YuanMoXingGuanLiCanvas ref="canvasComponent"></YuanMoXingGuanLiCanvas>
<Graph></Graph>
</el-tab-pane>
<el-tab-pane>
<span slot="label">
<i class="el-icon-s-grid"></i>
</span>
<YuanMoXingGuanLiTable ref="tableComponent"></YuanMoXingGuanLiTable>
<Tables ref="tableComponent"></Tables>
</el-tab-pane>
<el-tab-pane>
<span slot="label">
<i class="el-icon-share"></i>
</span>
<Mind></Mind>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import YuanMoXingGuanLiCanvas from './canvas/index.vue';
import YuanMoXingGuanLiTable from './table/index.vue';
import Graph from './canvas/index.vue';
import Tables from './table/index.vue';
import Mind from './mind/index.vue';
export default {
name: 'Details',
components: {
YuanMoXingGuanLiCanvas,
YuanMoXingGuanLiTable
Graph,
Tables,
Mind
},
data() {
return {
......@@ -37,11 +45,16 @@ export default {
},
methods: {
tabs_click_func(data) {
if(data.index == '0') {
console.log('画布页面')
}else{
console.log('表格页面')
this.$refs.tableComponent.get_table();
switch(data.index){
case '0':
console.log('画布页面')
break;
case '1':
this.$refs.tableComponent.get_table();
break;
case '2':
console.log('导图页面')
break;
}
}
}
......
src/views/archi-view-manage/index.vue
......@@ -4,7 +4,7 @@
class="filter-tree"
:data="treeData"
:highlight-current="true"
default-expand-all
default-expand-all
node-key="viewId"
@node-click="treeClick"
:props="{ children: 'subList', label: 'viewName', id: 'viewId' }"
......
src/views/jsmindDemo/index.vue → src/views/archi-view-manage/mind/index.vue
<template>
<div class="jsmindDemo">
<div class="mind">
<div class="menu_container">
<el-button size="mini" @click="addNode">添加节点</el-button>
<!-- <el-button size="mini" @click="editNode">编辑节点</el-button> -->
......@@ -14,7 +14,7 @@
import { MessageBox, Message } from 'element-ui';
export default {
name: 'JsmindDemo',
name: 'Mind',
data() {
return {
jm: null
......@@ -116,7 +116,7 @@ export default {
}
</script>
<style scoped>
.jsmindDemo{
.mind{
width: 100%;
height: 100%;
text-align: left;
......
src/views/busi-assets-list/index.vue
......@@ -108,15 +108,21 @@
</el-form-item>
<el-form-item label="上级节点:" prop="let2">
<el-select clearable placeholder="请选择" v-model="ruleForm.let2">
<el-select class="treeSelectClass" clearable placeholder="请选择" v-model="ruleForm.let2">
<!-- <el-option v-for="item in shangJiJieDianSelect" :key="item.assetId" :label="item.assetName" :value="item.assetId"></el-option> -->
<el-option :value="valueTitle" :label="valueTitle">
<el-option :value="selectValue" :label="selectLabel">
<el-tree
:data="treeSelect"
ref="treeSelect"
node-key="assetId"
show-checkbox
:check-strictly="true"
lazy
@check="handleCheckChange"
:data="treeSelectData"
:props="{ children: 'children', label: 'assetName', id: 'assetId' }"
:load="loadTreeSelect"></el-tree>
:load="loadTreeSelect">
</el-tree>
</el-option>
</el-select>
</el-form-item>
......@@ -173,7 +179,20 @@
<div class="form_item_container">
<el-form-item label="上级节点:" prop="let1">
<el-select clearable placeholder="请选择" v-model="ruleForm2.let1">
<el-option v-for="item in shangJiJieDianSelect" :key="item.assetId" :label="item.assetName" :value="item.assetId"></el-option>
<!-- <el-option v-for="item in shangJiJieDianSelect" :key="item.assetId" :label="item.assetName" :value="item.assetId"></el-option> -->
<el-option :value="selectValue2" :label="selectLabel2">
<el-tree
ref="treeSelect2"
node-key="assetId"
show-checkbox
:check-strictly="true"
lazy
@check="handleCheckChange2"
:data="treeSelectData"
:props="{ children: 'children', label: 'assetName', id: 'assetId' }"
:load="loadTreeSelect">
</el-tree>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="组件类型:" prop="let2">
......@@ -218,7 +237,11 @@
},
data() {
return {
valueTitle: '',
selectValue:'',
selectLabel: '',
selectCode: '',
selectValue2:'',
selectLabel2: '',
templateDialog: false,
ruleForm2: {
let1: null,
......@@ -285,7 +308,7 @@
archiBelongId: null,
assetConstant: null,
// archiAssetTypeId: null,
treeSelect: []
treeSelectData: [],
};
},
mounted(){
......@@ -339,11 +362,11 @@
// console.log(this.ruleForm);
let parentAssetName, assetCode, fieldsValue = [], eleName, targetAsset = [];
if(this.ruleForm.let2 && this.shangJiJieDianSelect.length > 0) {
const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm.let2);
parentAssetName = items.assetName;
assetCode = items.parentCode;
}
// if(this.ruleForm.let2 && this.shangJiJieDianSelect.length > 0) {
// const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm.let2);
// parentAssetName = items.assetName;
// assetCode = items.parentCode;
// }
const items2 = this.zuJianLeiXingSelect.find(item => item.typeId == this.ruleForm.let3);
eleName = items2.elementName;
......@@ -374,8 +397,8 @@
}
console.log(targetAsset)
const params = {
archiAssetState: 2,
archiStage: 1,
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
archiBelongId: this.archiBelongId,
assetConstant: this.assetConstant,
// archiAssetTypeId: this.archiAssetTypeId,
......@@ -383,12 +406,12 @@
assetName: this.ruleForm.let1,
sort: this.ruleForm.let4,
assetId: this.is_add_edit == 'add' ? null : this.editId,
parentAssetId: this.ruleForm.let2,
parentAssetName: parentAssetName,
parentAssetId: this.selectValue,
parentAssetName: this.selectLabel,
isShow: this.ruleForm.let5 == '显示' ? 1 : 0,
fieldsValue: fieldsValue,
targetAsset: targetAsset,
assetCode: assetCode,
assetCode: this.selectCode,
eleName: eleName
}
if(this.is_add_edit == 'add') {
......@@ -485,6 +508,15 @@
}
})
},
openDownloadTemplateDialog() {//打开模版下载窗口
this.templateDialog = true;
this.getShangJiJieDianSelect();
this.$nextTick(() => {
this.$refs.form2.resetFields();
this.ruleForm2.let1 = null;
this.ruleForm2.let2 = null;
});
},
add() {//新建
this.addDialog = true;
this.is_add_edit = 'add';
......@@ -499,19 +531,26 @@
this.ruleForm.let6 = null;
this.ruleForm.dynamicForm_ = [];
this.ruleForm.dynamicForm0_ = [];
this.selectLabel = '';
this.selectValue = '';
this.selectCode = '';
});
},
editItem(row){//编辑
this.addDialog = true;
this.is_add_edit = 'edit';
this.ruleForm.let1 = row.assetName;
this.ruleForm.let2 = row.parentAssetId ? String(row.parentAssetId) : null;
this.ruleForm.let2 = row.parentAssetName;
this.ruleForm.let3 = row.archiEleId;
this.ruleForm.let4 = row.sort;
this.ruleForm.let5 = row.isShow == 1 ? '显示' : '隐藏';
this.editId = row.assetId;
let fieldsValue = row.fieldsValue;
let targetAsset = row.targetAsset;
this.selectCode = row.assetCode;
this.selectLabel = row.parentAssetName;
this.selectValue = row.parentAssetId;
let targetAsset_id = [];
if(targetAsset.length == 4) {
......@@ -525,9 +564,9 @@
item.assetId
)
})
console.log(targetAsset_id)
}
this.ruleForm.let6 = targetAsset_id;
if(fieldsValue.length == 4) {
this.ruleForm.dynamicForm_ = [];
}else {
......@@ -542,43 +581,45 @@
this.ruleForm.dynamicForm_ = fieldsValue_;
}
},
loadTreeSelect(node, resolve) {
console.log(node)
handleCheckChange(data, tree){//上级节点下拉树的勾选
this.selectValue = data.assetId;
this.selectLabel = data.assetName;
this.selectCode = data.assetCode;
this.ruleForm.let2 = data.assetName;
this.$refs.treeSelect.setCheckedKeys([]); // 删除所有选中节点
this.$refs.treeSelect.setCheckedNodes([data]);
},
handleCheckChange2(data, tree){//模版下载的上级节点的下拉树的勾选
this.selectValue2 = data.assetId;
this.selectLabel2 = data.assetName;
this.ruleForm2.let1 = data.assetName;
this.$refs.treeSelect2.setCheckedKeys([]); // 删除所有选中节点
this.$refs.treeSelect2.setCheckedNodes([data]);
},
loadTreeSelect(node, resolve) {//加载上级节点
if (node.level === 0) {
return resolve([{ name: 'region' }]);
resolve([]);
}else {
const params = {
archiType: this.assetConstant,
parentAssetId: node.data.assetId,
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
// archiAssetTypeId: this.archiAssetTypeId,
};
queryZiChanJiaGouShangJiJieDian(params).then(res => {
if(res.code == 200) {
resolve(res.data);
}
})
}
// if (node.level > 1) return resolve([]);
const params = {
archiType: this.assetConstant,
// parentAssetId: this.archiBelongId,
// archiAssetTypeId: this.archiAssetTypeId,
};
queryZiChanJiaGouShangJiJieDian(params).then(res => {
if(res.code == 200) {
console.log('上级节点树')
console.log(res.data)
resolve(res.data);
}
})
},
getShangJiJieDianSelect2() {//上级节点下拉框值
const params = {
archiType: this.assetConstant,
// parentAssetId: this.archiBelongId,
// archiAssetTypeId: this.archiAssetTypeId,
};
queryZiChanJiaGouShangJiJieDian(params).then(res => {
if(res.code == 200) {
// console.log('上级节点')
// console.log(res.data)
this.shangJiJieDianSelect = res.data;
this.treeSelect = res.data;
}
})
},
getShangJiJieDianSelect() {//上级节点下拉框值
const params = {
archiType: this.assetConstant,
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
// parentAssetId: this.archiBelongId,
// archiAssetTypeId: this.archiAssetTypeId,
};
......@@ -587,6 +628,7 @@
// console.log('上级节点')
// console.log(res.data)
this.shangJiJieDianSelect = res.data;
this.treeSelectData = res.data;
}
})
},
......@@ -725,23 +767,15 @@
});
inpEle.click();
},
openDownloadTemplateDialog() {//打开模版下载窗口
this.templateDialog = true;
this.$nextTick(() => {
this.$refs.form2.resetFields();
this.ruleForm2.let1 = null;
this.ruleForm2.let2 = null;
});
},
saveTemplateDialog() {//下载模版
this.$refs.form2.validate(valid => {
if(valid) {
const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm2.let1);
let parentName = items.assetName;
// const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm2.let1);
// let parentName = items.assetName;
const params = {
parentId: this.ruleForm2.let1,
parentName: parentName,
parentId: this.selectValue2,
parentName: this.selectLabel2,
typeId: this.ruleForm2.let2
}
......@@ -750,6 +784,7 @@
// parentName: '应用架构A',
// typeId: 149
// }
// console.log(params)
exportZhiChanJiaGou(params).then(res => {
let blob = new Blob([res], { type: 'application/octet-stream' });
let url = URL.createObjectURL(blob);
......
src/views/meta-model-list/details.vue
......@@ -8,27 +8,35 @@
<span slot="label">
<i class="el-icon-picture"></i>
</span>
<YuanMoXingGuanLiCanvas ref="canvasComponent"></YuanMoXingGuanLiCanvas>
<Graph></Graph>
</el-tab-pane>
<el-tab-pane>
<span slot="label">
<i class="el-icon-s-grid"></i>
</span>
<YuanMoXingGuanLiTable ref="tableComponent"></YuanMoXingGuanLiTable>
<Tables ref="tableComponent"></Tables>
</el-tab-pane>
<el-tab-pane>
<span slot="label">
<i class="el-icon-share"></i>
</span>
<Mind></Mind>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import YuanMoXingGuanLiCanvas from './canvas/index.vue';
import YuanMoXingGuanLiTable from './table/index.vue';
import Graph from './canvas/index.vue';
import Tables from './table/index.vue';
import Mind from './mind/index.vue';
export default {
name: 'Details',
components: {
YuanMoXingGuanLiCanvas,
YuanMoXingGuanLiTable
Graph,
Tables,
Mind
},
data() {
return {
......@@ -40,11 +48,16 @@ export default {
},
methods: {
tabs_click_func(data) {
if(data.index == '0') {
console.log('画布页面')
}else{
console.log('表格页面')
this.$refs.tableComponent.get_table();
switch(data.index){
case '0':
console.log('画布页面')
break;
case '1':
this.$refs.tableComponent.get_table();
break;
case '2':
console.log('导图页面')
break;
}
}
}
......@@ -59,7 +72,7 @@ export default {
.select_version_control{
position: absolute;
top: 0;
right: 140px;
right: 200px;
z-index: 9;
}
/deep/ .el-tabs__nav{
......
src/views/meta-model-list/mind/index.vue 0 → 100644
<template>
<div class="mind">
<div class="menu_container">
<el-button size="mini" @click="addNode">添加节点</el-button>
<!-- <el-button size="mini" @click="editNode">编辑节点</el-button> -->
<el-button size="mini" @click="deleteNode">删除节点</el-button>
<el-button size="mini" @click="saveJsMind">保存</el-button>
</div>
<div id="jsmind_container"></div>
</div>
</template>
<script>
import { MessageBox, Message } from 'element-ui';
export default {
name: 'Mind',
data() {
return {
jm: null
}
},
mounted(){
var mind = {
/* 元数据，定义思维导图的名称、作者、版本等信息 */
"meta":{
"name":"jsMind-demo-tree",
"author":"hizzgdev@163.com",
"version":"0.2"
},
/* 数据格式声明 */
"format":"node_tree",
/* 数据内容 */
"data":{"id":"root","topic":"jsMind","children":[
{"id":"easy","topic":"Easy","direction":"left","expanded":true,"children":[
{"id":"easy1","topic":"Easy to show"},
{"id":"easy2","topic":"Easy to edit"},
{"id":"easy3","topic":"Easy to store"},
{"id":"easy4","topic":"Easy to embed"}
]},
{"id":"open","topic":"Open Source","direction":"right","expanded":false,"children":[
{"id":"open1","topic":"on GitHub"},
{"id":"open2","topic":"BSD License"}
]},
{"id":"powerful","topic":"Powerful","direction":"right","children":[
{"id":"powerful1","topic":"Base on Javascript"},
{"id":"powerful2","topic":"Base on HTML5"},
{"id":"powerful3","topic":"Depends on you"}
]},
{"id":"other","topic":"test node","direction":"left","children":[
{"id":"other1","topic":"I'm from local variable"},
{"id":"other2","topic":"I can do everything"}
]}
]}
};
var options = {
container:'jsmind_container',
editable: true,
theme:'greensea'
};
this.jm = new jsMind(options);
this.jm.show(mind);
console.log(this.jm.get_data())
},
methods: {
saveJsMind() {
this.jm.shoot();
},
addNode() {
let selectedNode = this.jm.get_selected_node() // as parent of new node
if(!selectedNode) {
Message({
type: 'error',
message: '请先选择一个节点!'
});
return;
}
let nodeid = 'newId' + Date.parse(new Date());
let topic = '新节点';
this.jm.add_node(selectedNode, nodeid, topic);
},
editNode() {
let selectedId = this.get_selected_nodeid();
if(!selectedId) {
Message({
type: 'error',
message: '请先选择一个节点!'
});
return;
}
let nodeObj = this.jm.get_node(selectedId);
this.nodeOption.content = nodeObj.topic;
},
deleteNode() {
let selectedId = this.get_selected_nodeid();
if(!selectedId) {
Message({
type: 'error',
message: '请先选择一个节点!'
});
return;
}
this.jm.remove_node(selectedId);
},
// 获取选中标签的 ID
get_selected_nodeid() {
let selectedNode = this.jm.get_selected_node();
if(selectedNode) {
return selectedNode.id;
} else {
return null;
}
},
}
}
</script>
<style scoped>
.mind{
width: 100%;
height: 100%;
text-align: left;
}
#jsmind_container{
width: 100%;
height: calc(100% - 50px);
}
.menu_container{
background-color: #eee;
padding: 10px 0 10px 0;
text-align: right;
}
</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!