Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 037699c2 by liuyong
Options

修改三个架构资产

2 parents 1e604a0c 411fc79a
Inline Side-by-side
Showing with 514 additions and 154 deletions
src/router/index.js
...@@ -18,11 +18,6 @@ const routes = [ ...@@ -18,11 +18,6 @@ const routes = [
// component: Home // component: Home
}, },
{ {
path: '/jsmindDemo',
name: 'jsmindDemo',
component: () => import('@/views/jsmindDemo/index.vue'),
},
{
path: '/main', path: '/main',
name: 'main', name: 'main',
// route level code-splitting // route level code-splitting
......
src/views/archi-asset-manage/index.vue
...@@ -108,8 +108,22 @@ ...@@ -108,8 +108,22 @@
</el-form-item> </el-form-item>
<el-form-item label="上级节点:" prop="let2"> <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 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-select>
</el-form-item> </el-form-item>
<!-- <el-form-item label="关联资产:" prop="let6"> <!-- <el-form-item label="关联资产:" prop="let6">
...@@ -165,7 +179,20 @@ ...@@ -165,7 +179,20 @@
<div class="form_item_container"> <div class="form_item_container">
<el-form-item label="上级节点:" prop="let1"> <el-form-item label="上级节点:" prop="let1">
<el-select clearable placeholder="请选择" v-model="ruleForm2.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-select>
</el-form-item> </el-form-item>
<el-form-item label="组件类型:" prop="let2"> <el-form-item label="组件类型:" prop="let2">
...@@ -210,6 +237,11 @@ ...@@ -210,6 +237,11 @@
}, },
data() { data() {
return { return {
selectValue:'',
selectLabel: '',
selectCode: '',
selectValue2:'',
selectLabel2: '',
templateDialog: false, templateDialog: false,
ruleForm2: { ruleForm2: {
let1: null, let1: null,
...@@ -251,7 +283,7 @@ ...@@ -251,7 +283,7 @@
treeData: [ treeData: [
{ {
viewId: 0, viewId: 0,
viewName: '系统架构资产', viewName: '总体架构资产',
subList: [] subList: []
} }
], ],
...@@ -276,7 +308,7 @@ ...@@ -276,7 +308,7 @@
archiBelongId: null, archiBelongId: null,
assetConstant: null, assetConstant: null,
// archiAssetTypeId: null, // archiAssetTypeId: null,
treeSelectData: [],
}; };
}, },
mounted(){ mounted(){
...@@ -319,7 +351,7 @@ ...@@ -319,7 +351,7 @@
assetConstant: this.assetConstant assetConstant: this.assetConstant
} }
queryGuanLianZiChanSelect(params).then(res => { queryGuanLianZiChanSelect(params).then(res => {
console.log(res) // console.log(res)
this.guanLianZiChanSelect = res.data; this.guanLianZiChanSelect = res.data;
}); });
...@@ -330,11 +362,11 @@ ...@@ -330,11 +362,11 @@
// console.log(this.ruleForm); // console.log(this.ruleForm);
let parentAssetName, assetCode, fieldsValue = [], eleName, targetAsset = []; let parentAssetName, assetCode, fieldsValue = [], eleName, targetAsset = [];
if(this.ruleForm.let2 && this.shangJiJieDianSelect.length > 0) { // if(this.ruleForm.let2 && this.shangJiJieDianSelect.length > 0) {
const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm.let2); // const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm.let2);
parentAssetName = items.assetName; // parentAssetName = items.assetName;
assetCode = items.parentCode; // assetCode = items.parentCode;
} // }
const items2 = this.zuJianLeiXingSelect.find(item => item.typeId == this.ruleForm.let3); const items2 = this.zuJianLeiXingSelect.find(item => item.typeId == this.ruleForm.let3);
eleName = items2.elementName; eleName = items2.elementName;
...@@ -365,8 +397,8 @@ ...@@ -365,8 +397,8 @@
} }
console.log(targetAsset) console.log(targetAsset)
const params = { const params = {
archiAssetState: 2, archiAssetState: this.searchParams.archiAssetState,
archiStage: 2, archiStage: this.searchParams.archiStage,
archiBelongId: this.archiBelongId, archiBelongId: this.archiBelongId,
assetConstant: this.assetConstant, assetConstant: this.assetConstant,
// archiAssetTypeId: this.archiAssetTypeId, // archiAssetTypeId: this.archiAssetTypeId,
...@@ -374,12 +406,12 @@ ...@@ -374,12 +406,12 @@
assetName: this.ruleForm.let1, assetName: this.ruleForm.let1,
sort: this.ruleForm.let4, sort: this.ruleForm.let4,
assetId: this.is_add_edit == 'add' ? null : this.editId, assetId: this.is_add_edit == 'add' ? null : this.editId,
parentAssetId: this.ruleForm.let2, parentAssetId: this.selectValue,
parentAssetName: parentAssetName, parentAssetName: this.selectLabel,
isShow: this.ruleForm.let5 == '显示' ? 1 : 0, isShow: this.ruleForm.let5 == '显示' ? 1 : 0,
fieldsValue: fieldsValue, fieldsValue: fieldsValue,
targetAsset: targetAsset, targetAsset: targetAsset,
assetCode: assetCode, assetCode: this.selectCode,
eleName: eleName eleName: eleName
} }
if(this.is_add_edit == 'add') { if(this.is_add_edit == 'add') {
...@@ -476,6 +508,15 @@ ...@@ -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() {//新建 add() {//新建
this.addDialog = true; this.addDialog = true;
this.is_add_edit = 'add'; this.is_add_edit = 'add';
...@@ -490,19 +531,26 @@ ...@@ -490,19 +531,26 @@
this.ruleForm.let6 = null; this.ruleForm.let6 = null;
this.ruleForm.dynamicForm_ = []; this.ruleForm.dynamicForm_ = [];
this.ruleForm.dynamicForm0_ = []; this.ruleForm.dynamicForm0_ = [];
this.selectLabel = '';
this.selectValue = '';
this.selectCode = '';
}); });
}, },
editItem(row){//编辑 editItem(row){//编辑
this.addDialog = true; this.addDialog = true;
this.is_add_edit = 'edit'; this.is_add_edit = 'edit';
this.ruleForm.let1 = row.assetName; 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.let3 = row.archiEleId;
this.ruleForm.let4 = row.sort; this.ruleForm.let4 = row.sort;
this.ruleForm.let5 = row.isShow == 1 ? '显示' : '隐藏'; this.ruleForm.let5 = row.isShow == 1 ? '显示' : '隐藏';
this.editId = row.assetId; this.editId = row.assetId;
let fieldsValue = row.fieldsValue; let fieldsValue = row.fieldsValue;
let targetAsset = row.targetAsset; let targetAsset = row.targetAsset;
this.selectCode = row.assetCode;
this.selectLabel = row.parentAssetName;
this.selectValue = row.parentAssetId;
let targetAsset_id = []; let targetAsset_id = [];
if(targetAsset.length == 4) { if(targetAsset.length == 4) {
...@@ -516,9 +564,9 @@ ...@@ -516,9 +564,9 @@
item.assetId item.assetId
) )
}) })
console.log(targetAsset_id)
} }
this.ruleForm.let6 = targetAsset_id; this.ruleForm.let6 = targetAsset_id;
if(fieldsValue.length == 4) { if(fieldsValue.length == 4) {
this.ruleForm.dynamicForm_ = []; this.ruleForm.dynamicForm_ = [];
}else { }else {
...@@ -533,17 +581,54 @@ ...@@ -533,17 +581,54 @@
this.ruleForm.dynamicForm_ = fieldsValue_; 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() {//上级节点下拉框值 getShangJiJieDianSelect() {//上级节点下拉框值
const params = { const params = {
archiType: this.assetConstant, archiType: this.assetConstant,
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
// parentAssetId: this.archiBelongId, // parentAssetId: this.archiBelongId,
// archiAssetTypeId: this.archiAssetTypeId, // archiAssetTypeId: this.archiAssetTypeId,
}; };
queryZiChanJiaGouShangJiJieDian(params).then(res => { queryZiChanJiaGouShangJiJieDian(params).then(res => {
if(res.code == 200) { if(res.code == 200) {
console.log('上级节点') // console.log('上级节点')
console.log(res.data) // console.log(res.data)
this.shangJiJieDianSelect = res.data; this.shangJiJieDianSelect = res.data;
this.treeSelectData = res.data;
} }
}) })
}, },
...@@ -604,9 +689,9 @@ ...@@ -604,9 +689,9 @@
}; };
queryZiChanJiaGouZuJianLeiXing(params).then(res => { queryZiChanJiaGouZuJianLeiXing(params).then(res => {
if(res.code == 200) { if(res.code == 200) {
console.log('组件类型') // console.log('组件类型')
console.log(res.data) // console.log(res.data)
this.zuJianLeiXingSelect = res.data; this.zuJianLeiXingSelect = res.data;
}else { }else {
Message({ Message({
...@@ -682,23 +767,15 @@ ...@@ -682,23 +767,15 @@
}); });
inpEle.click(); inpEle.click();
}, },
openDownloadTemplateDialog() {//打开模版下载窗口
this.templateDialog = true;
this.$nextTick(() => {
this.$refs.form2.resetFields();
this.ruleForm2.let1 = null;
this.ruleForm2.let2 = null;
});
},
saveTemplateDialog() {//下载模版 saveTemplateDialog() {//下载模版
this.$refs.form2.validate(valid => { this.$refs.form2.validate(valid => {
if(valid) { if(valid) {
const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm2.let1); // const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm2.let1);
let parentName = items.assetName; // let parentName = items.assetName;
const params = { const params = {
parentId: this.ruleForm2.let1, parentId: this.selectValue2,
parentName: parentName, parentName: this.selectLabel2,
typeId: this.ruleForm2.let2 typeId: this.ruleForm2.let2
} }
...@@ -707,6 +784,7 @@ ...@@ -707,6 +784,7 @@
// parentName: '应用架构A', // parentName: '应用架构A',
// typeId: 149 // typeId: 149
// } // }
// console.log(params)
exportZhiChanJiaGou(params).then(res => { exportZhiChanJiaGou(params).then(res => {
let blob = new Blob([res], { type: 'application/octet-stream' }); let blob = new Blob([res], { type: 'application/octet-stream' });
let url = URL.createObjectURL(blob); let url = URL.createObjectURL(blob);
...@@ -847,8 +925,6 @@ ...@@ -847,8 +925,6 @@
// break; // break;
// } // }
// }); // });
console.log('树')
console.log(res.data)
this.treeData[0].subList = res.data; this.treeData[0].subList = res.data;
this.archiBelongId = res.data[0].archiBelongId; this.archiBelongId = res.data[0].archiBelongId;
this.assetConstant = res.data[0].assetConstant; this.assetConstant = res.data[0].assetConstant;
...@@ -877,6 +953,9 @@ ...@@ -877,6 +953,9 @@
.el-message-box__content{ .el-message-box__content{
padding: 60px 15px 60px 15px; padding: 60px 15px 60px 15px;
} }
.el-select-dropdown__item{
height: auto;
}
</style> </style>
<style scoped> <style scoped>
.filter-tree{ .filter-tree{
...@@ -887,6 +966,12 @@ ...@@ -887,6 +966,12 @@
.dynamicFormClass{ .dynamicFormClass{
width: 100% !important; 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 { /deep/ .dynamicFormClass .el-form-item__content {
width: calc(100% - 210px) !important; width: calc(100% - 210px) !important;
text-align: left; text-align: left;
......
src/views/archi-view-manage/details.vue
...@@ -5,27 +5,35 @@ ...@@ -5,27 +5,35 @@
<span slot="label"> <span slot="label">
<i class="el-icon-picture"></i> <i class="el-icon-picture"></i>
</span> </span>
<YuanMoXingGuanLiCanvas ref="canvasComponent"></YuanMoXingGuanLiCanvas> <Graph></Graph>
</el-tab-pane> </el-tab-pane>
<el-tab-pane> <el-tab-pane>
<span slot="label"> <span slot="label">
<i class="el-icon-s-grid"></i> <i class="el-icon-s-grid"></i>
</span> </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-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</template> </template>
<script> <script>
import YuanMoXingGuanLiCanvas from './canvas/index.vue'; import Graph from './canvas/index.vue';
import YuanMoXingGuanLiTable from './table/index.vue'; import Tables from './table/index.vue';
import Mind from './mind/index.vue';
export default { export default {
name: 'Details', name: 'Details',
components: { components: {
YuanMoXingGuanLiCanvas, Graph,
YuanMoXingGuanLiTable Tables,
Mind
}, },
data() { data() {
return { return {
...@@ -37,11 +45,16 @@ export default { ...@@ -37,11 +45,16 @@ export default {
}, },
methods: { methods: {
tabs_click_func(data) { tabs_click_func(data) {
if(data.index == '0') { switch(data.index){
case '0':
console.log('画布页面') console.log('画布页面')
}else{ break;
console.log('表格页面') case '1':
this.$refs.tableComponent.get_table(); this.$refs.tableComponent.get_table();
break;
case '2':
console.log('导图页面')
break;
} }
} }
} }
......
src/views/jsmindDemo/index.vue → src/views/archi-view-manage/mind/index.vue
<template> <template>
<div class="jsmindDemo"> <div class="mind">
<div class="menu_container"> <div class="menu_container">
<el-button size="mini" @click="addNode">添加节点</el-button> <el-button size="mini" @click="addNode">添加节点</el-button>
<!-- <el-button size="mini" @click="editNode">编辑节点</el-button> --> <!-- <el-button size="mini" @click="editNode">编辑节点</el-button> -->
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
import { MessageBox, Message } from 'element-ui'; import { MessageBox, Message } from 'element-ui';
export default { export default {
name: 'JsmindDemo', name: 'Mind',
data() { data() {
return { return {
jm: null jm: null
...@@ -116,7 +116,7 @@ export default { ...@@ -116,7 +116,7 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
.jsmindDemo{ .mind{
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: left; text-align: left;
......
src/views/busi-assets-list/index.vue
...@@ -108,15 +108,21 @@ ...@@ -108,15 +108,21 @@
</el-form-item> </el-form-item>
<el-form-item label="上级节点:" prop="let2"> <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 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 <el-tree
:data="treeSelect" ref="treeSelect"
node-key="assetId"
show-checkbox
:check-strictly="true"
lazy lazy
@check="handleCheckChange"
:data="treeSelectData"
:props="{ children: 'children', label: 'assetName', id: 'assetId' }" :props="{ children: 'children', label: 'assetName', id: 'assetId' }"
:load="loadTreeSelect"></el-tree> :load="loadTreeSelect">
</el-tree>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -173,7 +179,20 @@ ...@@ -173,7 +179,20 @@
<div class="form_item_container"> <div class="form_item_container">
<el-form-item label="上级节点:" prop="let1"> <el-form-item label="上级节点:" prop="let1">
<el-select clearable placeholder="请选择" v-model="ruleForm2.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-select>
</el-form-item> </el-form-item>
<el-form-item label="组件类型:" prop="let2"> <el-form-item label="组件类型:" prop="let2">
...@@ -218,7 +237,11 @@ ...@@ -218,7 +237,11 @@
}, },
data() { data() {
return { return {
valueTitle: '', selectValue:'',
selectLabel: '',
selectCode: '',
selectValue2:'',
selectLabel2: '',
templateDialog: false, templateDialog: false,
ruleForm2: { ruleForm2: {
let1: null, let1: null,
...@@ -285,7 +308,7 @@ ...@@ -285,7 +308,7 @@
archiBelongId: null, archiBelongId: null,
assetConstant: null, assetConstant: null,
// archiAssetTypeId: null, // archiAssetTypeId: null,
treeSelect: [] treeSelectData: [],
}; };
}, },
mounted(){ mounted(){
...@@ -339,11 +362,11 @@ ...@@ -339,11 +362,11 @@
// console.log(this.ruleForm); // console.log(this.ruleForm);
let parentAssetName, assetCode, fieldsValue = [], eleName, targetAsset = []; let parentAssetName, assetCode, fieldsValue = [], eleName, targetAsset = [];
if(this.ruleForm.let2 && this.shangJiJieDianSelect.length > 0) { // if(this.ruleForm.let2 && this.shangJiJieDianSelect.length > 0) {
const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm.let2); // const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm.let2);
parentAssetName = items.assetName; // parentAssetName = items.assetName;
assetCode = items.parentCode; // assetCode = items.parentCode;
} // }
const items2 = this.zuJianLeiXingSelect.find(item => item.typeId == this.ruleForm.let3); const items2 = this.zuJianLeiXingSelect.find(item => item.typeId == this.ruleForm.let3);
eleName = items2.elementName; eleName = items2.elementName;
...@@ -374,8 +397,8 @@ ...@@ -374,8 +397,8 @@
} }
console.log(targetAsset) console.log(targetAsset)
const params = { const params = {
archiAssetState: 2, archiAssetState: this.searchParams.archiAssetState,
archiStage: 1, archiStage: this.searchParams.archiStage,
archiBelongId: this.archiBelongId, archiBelongId: this.archiBelongId,
assetConstant: this.assetConstant, assetConstant: this.assetConstant,
// archiAssetTypeId: this.archiAssetTypeId, // archiAssetTypeId: this.archiAssetTypeId,
...@@ -383,12 +406,12 @@ ...@@ -383,12 +406,12 @@
assetName: this.ruleForm.let1, assetName: this.ruleForm.let1,
sort: this.ruleForm.let4, sort: this.ruleForm.let4,
assetId: this.is_add_edit == 'add' ? null : this.editId, assetId: this.is_add_edit == 'add' ? null : this.editId,
parentAssetId: this.ruleForm.let2, parentAssetId: this.selectValue,
parentAssetName: parentAssetName, parentAssetName: this.selectLabel,
isShow: this.ruleForm.let5 == '显示' ? 1 : 0, isShow: this.ruleForm.let5 == '显示' ? 1 : 0,
fieldsValue: fieldsValue, fieldsValue: fieldsValue,
targetAsset: targetAsset, targetAsset: targetAsset,
assetCode: assetCode, assetCode: this.selectCode,
eleName: eleName eleName: eleName
} }
if(this.is_add_edit == 'add') { if(this.is_add_edit == 'add') {
...@@ -485,6 +508,15 @@ ...@@ -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() {//新建 add() {//新建
this.addDialog = true; this.addDialog = true;
this.is_add_edit = 'add'; this.is_add_edit = 'add';
...@@ -499,19 +531,26 @@ ...@@ -499,19 +531,26 @@
this.ruleForm.let6 = null; this.ruleForm.let6 = null;
this.ruleForm.dynamicForm_ = []; this.ruleForm.dynamicForm_ = [];
this.ruleForm.dynamicForm0_ = []; this.ruleForm.dynamicForm0_ = [];
this.selectLabel = '';
this.selectValue = '';
this.selectCode = '';
}); });
}, },
editItem(row){//编辑 editItem(row){//编辑
this.addDialog = true; this.addDialog = true;
this.is_add_edit = 'edit'; this.is_add_edit = 'edit';
this.ruleForm.let1 = row.assetName; 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.let3 = row.archiEleId;
this.ruleForm.let4 = row.sort; this.ruleForm.let4 = row.sort;
this.ruleForm.let5 = row.isShow == 1 ? '显示' : '隐藏'; this.ruleForm.let5 = row.isShow == 1 ? '显示' : '隐藏';
this.editId = row.assetId; this.editId = row.assetId;
let fieldsValue = row.fieldsValue; let fieldsValue = row.fieldsValue;
let targetAsset = row.targetAsset; let targetAsset = row.targetAsset;
this.selectCode = row.assetCode;
this.selectLabel = row.parentAssetName;
this.selectValue = row.parentAssetId;
let targetAsset_id = []; let targetAsset_id = [];
if(targetAsset.length == 4) { if(targetAsset.length == 4) {
...@@ -525,9 +564,9 @@ ...@@ -525,9 +564,9 @@
item.assetId item.assetId
) )
}) })
console.log(targetAsset_id)
} }
this.ruleForm.let6 = targetAsset_id; this.ruleForm.let6 = targetAsset_id;
if(fieldsValue.length == 4) { if(fieldsValue.length == 4) {
this.ruleForm.dynamicForm_ = []; this.ruleForm.dynamicForm_ = [];
}else { }else {
...@@ -542,43 +581,45 @@ ...@@ -542,43 +581,45 @@
this.ruleForm.dynamicForm_ = fieldsValue_; this.ruleForm.dynamicForm_ = fieldsValue_;
} }
}, },
loadTreeSelect(node, resolve) { handleCheckChange(data, tree){//上级节点下拉树的勾选
console.log(node) 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) { if (node.level === 0) {
return resolve([{ name: 'region' }]); resolve([]);
} }else {
// if (node.level > 1) return resolve([]);
const params = { const params = {
archiType: this.assetConstant, archiType: this.assetConstant,
// parentAssetId: this.archiBelongId, parentAssetId: node.data.assetId,
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
// archiAssetTypeId: this.archiAssetTypeId, // archiAssetTypeId: this.archiAssetTypeId,
}; };
queryZiChanJiaGouShangJiJieDian(params).then(res => { queryZiChanJiaGouShangJiJieDian(params).then(res => {
if(res.code == 200) { if(res.code == 200) {
console.log('上级节点树')
console.log(res.data)
resolve(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() {//上级节点下拉框值 getShangJiJieDianSelect() {//上级节点下拉框值
const params = { const params = {
archiType: this.assetConstant, archiType: this.assetConstant,
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
// parentAssetId: this.archiBelongId, // parentAssetId: this.archiBelongId,
// archiAssetTypeId: this.archiAssetTypeId, // archiAssetTypeId: this.archiAssetTypeId,
}; };
...@@ -587,6 +628,7 @@ ...@@ -587,6 +628,7 @@
// console.log('上级节点') // console.log('上级节点')
// console.log(res.data) // console.log(res.data)
this.shangJiJieDianSelect = res.data; this.shangJiJieDianSelect = res.data;
this.treeSelectData = res.data;
} }
}) })
}, },
...@@ -725,23 +767,15 @@ ...@@ -725,23 +767,15 @@
}); });
inpEle.click(); inpEle.click();
}, },
openDownloadTemplateDialog() {//打开模版下载窗口
this.templateDialog = true;
this.$nextTick(() => {
this.$refs.form2.resetFields();
this.ruleForm2.let1 = null;
this.ruleForm2.let2 = null;
});
},
saveTemplateDialog() {//下载模版 saveTemplateDialog() {//下载模版
this.$refs.form2.validate(valid => { this.$refs.form2.validate(valid => {
if(valid) { if(valid) {
const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm2.let1); // const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm2.let1);
let parentName = items.assetName; // let parentName = items.assetName;
const params = { const params = {
parentId: this.ruleForm2.let1, parentId: this.selectValue2,
parentName: parentName, parentName: this.selectLabel2,
typeId: this.ruleForm2.let2 typeId: this.ruleForm2.let2
} }
...@@ -750,6 +784,7 @@ ...@@ -750,6 +784,7 @@
// parentName: '应用架构A', // parentName: '应用架构A',
// typeId: 149 // typeId: 149
// } // }
// console.log(params)
exportZhiChanJiaGou(params).then(res => { exportZhiChanJiaGou(params).then(res => {
let blob = new Blob([res], { type: 'application/octet-stream' }); let blob = new Blob([res], { type: 'application/octet-stream' });
let url = URL.createObjectURL(blob); let url = URL.createObjectURL(blob);
......
src/views/current-assets-list/index.vue
...@@ -108,15 +108,29 @@ ...@@ -108,15 +108,29 @@
</el-form-item> </el-form-item>
<el-form-item label="上级节点:" prop="let2"> <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 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-select>
</el-form-item> </el-form-item>
<el-form-item label="关联资产:" prop="let6"> <!-- <el-form-item label="关联资产:" prop="let6">
<el-select clearable @change="guanLianZiChanChange" filterable remote :remote-method="queryGuanLianZiChan" placeholder="请选择" multiple v-model="ruleForm.let6"> <el-select clearable @change="guanLianZiChanChange" filterable remote :remote-method="queryGuanLianZiChan" placeholder="请选择" multiple v-model="ruleForm.let6">
<el-option v-for="item in guanLianZiChanSelect" :key="String(item.assetId)" :label="item.assetName" :value="item.assetId"></el-option> <el-option v-for="item in guanLianZiChanSelect" :key="String(item.assetId)" :label="item.assetName" :value="item.assetId"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item> -->
<el-form-item label="排序:" prop="let4"> <el-form-item label="排序:" prop="let4">
<el-input-number style="width: 200px;" v-model="ruleForm.let4" :min="0"></el-input-number> <el-input-number style="width: 200px;" v-model="ruleForm.let4" :min="0"></el-input-number>
</el-form-item> </el-form-item>
...@@ -165,7 +179,20 @@ ...@@ -165,7 +179,20 @@
<div class="form_item_container"> <div class="form_item_container">
<el-form-item label="上级节点:" prop="let1"> <el-form-item label="上级节点:" prop="let1">
<el-select clearable placeholder="请选择" v-model="ruleForm2.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-select>
</el-form-item> </el-form-item>
<el-form-item label="组件类型:" prop="let2"> <el-form-item label="组件类型:" prop="let2">
...@@ -210,6 +237,11 @@ ...@@ -210,6 +237,11 @@
}, },
data() { data() {
return { return {
selectValue:'',
selectLabel: '',
selectCode: '',
selectValue2:'',
selectLabel2: '',
templateDialog: false, templateDialog: false,
ruleForm2: { ruleForm2: {
let1: null, let1: null,
...@@ -251,7 +283,7 @@ ...@@ -251,7 +283,7 @@
treeData: [ treeData: [
{ {
viewId: 0, viewId: 0,
viewName: '现状架构资产', viewName: '总体架构资产',
subList: [] subList: []
} }
], ],
...@@ -276,7 +308,7 @@ ...@@ -276,7 +308,7 @@
archiBelongId: null, archiBelongId: null,
assetConstant: null, assetConstant: null,
// archiAssetTypeId: null, // archiAssetTypeId: null,
treeSelectData: [],
}; };
}, },
mounted(){ mounted(){
...@@ -319,7 +351,7 @@ ...@@ -319,7 +351,7 @@
assetConstant: this.assetConstant assetConstant: this.assetConstant
} }
queryGuanLianZiChanSelect(params).then(res => { queryGuanLianZiChanSelect(params).then(res => {
console.log(res) // console.log(res)
this.guanLianZiChanSelect = res.data; this.guanLianZiChanSelect = res.data;
}); });
...@@ -330,11 +362,11 @@ ...@@ -330,11 +362,11 @@
// console.log(this.ruleForm); // console.log(this.ruleForm);
let parentAssetName, assetCode, fieldsValue = [], eleName, targetAsset = []; let parentAssetName, assetCode, fieldsValue = [], eleName, targetAsset = [];
if(this.ruleForm.let2 && this.shangJiJieDianSelect.length > 0) { // if(this.ruleForm.let2 && this.shangJiJieDianSelect.length > 0) {
const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm.let2); // const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm.let2);
parentAssetName = items.assetName; // parentAssetName = items.assetName;
assetCode = items.parentCode; // assetCode = items.parentCode;
} // }
const items2 = this.zuJianLeiXingSelect.find(item => item.typeId == this.ruleForm.let3); const items2 = this.zuJianLeiXingSelect.find(item => item.typeId == this.ruleForm.let3);
eleName = items2.elementName; eleName = items2.elementName;
...@@ -365,8 +397,8 @@ ...@@ -365,8 +397,8 @@
} }
console.log(targetAsset) console.log(targetAsset)
const params = { const params = {
archiAssetState: 1, archiAssetState: this.searchParams.archiAssetState,
archiStage: 1, archiStage: this.searchParams.archiStage,
archiBelongId: this.archiBelongId, archiBelongId: this.archiBelongId,
assetConstant: this.assetConstant, assetConstant: this.assetConstant,
// archiAssetTypeId: this.archiAssetTypeId, // archiAssetTypeId: this.archiAssetTypeId,
...@@ -374,12 +406,12 @@ ...@@ -374,12 +406,12 @@
assetName: this.ruleForm.let1, assetName: this.ruleForm.let1,
sort: this.ruleForm.let4, sort: this.ruleForm.let4,
assetId: this.is_add_edit == 'add' ? null : this.editId, assetId: this.is_add_edit == 'add' ? null : this.editId,
parentAssetId: this.ruleForm.let2, parentAssetId: this.selectValue,
parentAssetName: parentAssetName, parentAssetName: this.selectLabel,
isShow: this.ruleForm.let5 == '显示' ? 1 : 0, isShow: this.ruleForm.let5 == '显示' ? 1 : 0,
fieldsValue: fieldsValue, fieldsValue: fieldsValue,
targetAsset: targetAsset, targetAsset: targetAsset,
assetCode: assetCode, assetCode: this.selectCode,
eleName: eleName eleName: eleName
} }
if(this.is_add_edit == 'add') { if(this.is_add_edit == 'add') {
...@@ -476,6 +508,15 @@ ...@@ -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() {//新建 add() {//新建
this.addDialog = true; this.addDialog = true;
this.is_add_edit = 'add'; this.is_add_edit = 'add';
...@@ -490,19 +531,26 @@ ...@@ -490,19 +531,26 @@
this.ruleForm.let6 = null; this.ruleForm.let6 = null;
this.ruleForm.dynamicForm_ = []; this.ruleForm.dynamicForm_ = [];
this.ruleForm.dynamicForm0_ = []; this.ruleForm.dynamicForm0_ = [];
this.selectLabel = '';
this.selectValue = '';
this.selectCode = '';
}); });
}, },
editItem(row){//编辑 editItem(row){//编辑
this.addDialog = true; this.addDialog = true;
this.is_add_edit = 'edit'; this.is_add_edit = 'edit';
this.ruleForm.let1 = row.assetName; 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.let3 = row.archiEleId;
this.ruleForm.let4 = row.sort; this.ruleForm.let4 = row.sort;
this.ruleForm.let5 = row.isShow == 1 ? '显示' : '隐藏'; this.ruleForm.let5 = row.isShow == 1 ? '显示' : '隐藏';
this.editId = row.assetId; this.editId = row.assetId;
let fieldsValue = row.fieldsValue; let fieldsValue = row.fieldsValue;
let targetAsset = row.targetAsset; let targetAsset = row.targetAsset;
this.selectCode = row.assetCode;
this.selectLabel = row.parentAssetName;
this.selectValue = row.parentAssetId;
let targetAsset_id = []; let targetAsset_id = [];
if(targetAsset.length == 4) { if(targetAsset.length == 4) {
...@@ -516,9 +564,9 @@ ...@@ -516,9 +564,9 @@
item.assetId item.assetId
) )
}) })
console.log(targetAsset_id)
} }
this.ruleForm.let6 = targetAsset_id; this.ruleForm.let6 = targetAsset_id;
if(fieldsValue.length == 4) { if(fieldsValue.length == 4) {
this.ruleForm.dynamicForm_ = []; this.ruleForm.dynamicForm_ = [];
}else { }else {
...@@ -533,17 +581,54 @@ ...@@ -533,17 +581,54 @@
this.ruleForm.dynamicForm_ = fieldsValue_; 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() {//上级节点下拉框值 getShangJiJieDianSelect() {//上级节点下拉框值
const params = { const params = {
archiType: this.assetConstant, archiType: this.assetConstant,
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
// parentAssetId: this.archiBelongId, // parentAssetId: this.archiBelongId,
// archiAssetTypeId: this.archiAssetTypeId, // archiAssetTypeId: this.archiAssetTypeId,
}; };
queryZiChanJiaGouShangJiJieDian(params).then(res => { queryZiChanJiaGouShangJiJieDian(params).then(res => {
if(res.code == 200) { if(res.code == 200) {
console.log('上级节点') // console.log('上级节点')
console.log(res.data) // console.log(res.data)
this.shangJiJieDianSelect = res.data; this.shangJiJieDianSelect = res.data;
this.treeSelectData = res.data;
} }
}) })
}, },
...@@ -604,9 +689,9 @@ ...@@ -604,9 +689,9 @@
}; };
queryZiChanJiaGouZuJianLeiXing(params).then(res => { queryZiChanJiaGouZuJianLeiXing(params).then(res => {
if(res.code == 200) { if(res.code == 200) {
console.log('组件类型') // console.log('组件类型')
console.log(res.data) // console.log(res.data)
this.zuJianLeiXingSelect = res.data; this.zuJianLeiXingSelect = res.data;
}else { }else {
Message({ Message({
...@@ -682,23 +767,15 @@ ...@@ -682,23 +767,15 @@
}); });
inpEle.click(); inpEle.click();
}, },
openDownloadTemplateDialog() {//打开模版下载窗口
this.templateDialog = true;
this.$nextTick(() => {
this.$refs.form2.resetFields();
this.ruleForm2.let1 = null;
this.ruleForm2.let2 = null;
});
},
saveTemplateDialog() {//下载模版 saveTemplateDialog() {//下载模版
this.$refs.form2.validate(valid => { this.$refs.form2.validate(valid => {
if(valid) { if(valid) {
const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm2.let1); // const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm2.let1);
let parentName = items.assetName; // let parentName = items.assetName;
const params = { const params = {
parentId: this.ruleForm2.let1, parentId: this.selectValue2,
parentName: parentName, parentName: this.selectLabel2,
typeId: this.ruleForm2.let2 typeId: this.ruleForm2.let2
} }
...@@ -707,6 +784,7 @@ ...@@ -707,6 +784,7 @@
// parentName: '应用架构A', // parentName: '应用架构A',
// typeId: 149 // typeId: 149
// } // }
// console.log(params)
exportZhiChanJiaGou(params).then(res => { exportZhiChanJiaGou(params).then(res => {
let blob = new Blob([res], { type: 'application/octet-stream' }); let blob = new Blob([res], { type: 'application/octet-stream' });
let url = URL.createObjectURL(blob); let url = URL.createObjectURL(blob);
...@@ -847,8 +925,6 @@ ...@@ -847,8 +925,6 @@
// break; // break;
// } // }
// }); // });
console.log('树')
console.log(res.data)
this.treeData[0].subList = res.data; this.treeData[0].subList = res.data;
this.archiBelongId = res.data[0].archiBelongId; this.archiBelongId = res.data[0].archiBelongId;
this.assetConstant = res.data[0].assetConstant; this.assetConstant = res.data[0].assetConstant;
...@@ -877,6 +953,9 @@ ...@@ -877,6 +953,9 @@
.el-message-box__content{ .el-message-box__content{
padding: 60px 15px 60px 15px; padding: 60px 15px 60px 15px;
} }
.el-select-dropdown__item{
height: auto;
}
</style> </style>
<style scoped> <style scoped>
.filter-tree{ .filter-tree{
...@@ -887,6 +966,12 @@ ...@@ -887,6 +966,12 @@
.dynamicFormClass{ .dynamicFormClass{
width: 100% !important; 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 { /deep/ .dynamicFormClass .el-form-item__content {
width: calc(100% - 210px) !important; width: calc(100% - 210px) !important;
text-align: left; text-align: left;
......
src/views/meta-model-list/details.vue
...@@ -8,27 +8,35 @@ ...@@ -8,27 +8,35 @@
<span slot="label"> <span slot="label">
<i class="el-icon-picture"></i> <i class="el-icon-picture"></i>
</span> </span>
<YuanMoXingGuanLiCanvas ref="canvasComponent"></YuanMoXingGuanLiCanvas> <Graph></Graph>
</el-tab-pane> </el-tab-pane>
<el-tab-pane> <el-tab-pane>
<span slot="label"> <span slot="label">
<i class="el-icon-s-grid"></i> <i class="el-icon-s-grid"></i>
</span> </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-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</template> </template>
<script> <script>
import YuanMoXingGuanLiCanvas from './canvas/index.vue'; import Graph from './canvas/index.vue';
import YuanMoXingGuanLiTable from './table/index.vue'; import Tables from './table/index.vue';
import Mind from './mind/index.vue';
export default { export default {
name: 'Details', name: 'Details',
components: { components: {
YuanMoXingGuanLiCanvas, Graph,
YuanMoXingGuanLiTable Tables,
Mind
}, },
data() { data() {
return { return {
...@@ -40,11 +48,16 @@ export default { ...@@ -40,11 +48,16 @@ export default {
}, },
methods: { methods: {
tabs_click_func(data) { tabs_click_func(data) {
if(data.index == '0') { switch(data.index){
case '0':
console.log('画布页面') console.log('画布页面')
}else{ break;
console.log('表格页面') case '1':
this.$refs.tableComponent.get_table(); this.$refs.tableComponent.get_table();
break;
case '2':
console.log('导图页面')
break;
} }
} }
} }
...@@ -59,7 +72,7 @@ export default { ...@@ -59,7 +72,7 @@ export default {
.select_version_control{ .select_version_control{
position: absolute; position: absolute;
top: 0; top: 0;
right: 140px; right: 200px;
z-index: 9; z-index: 9;
} }
/deep/ .el-tabs__nav{ /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!