Skip to content

liangzhen / framework-tools-web

Go to a project
Commit eb7d5888 by 史敦盼
Options

画布属性编辑,组织机构修改

1 parent dc8a4353
Inline Side-by-side
Showing with 319 additions and 142 deletions
public/drawio/extention/js/exFormat.js
...@@ -3,6 +3,13 @@ const initAttributePanel = function(that) { ...@@ -3,6 +3,13 @@ const initAttributePanel = function(that) {
var graph = that.editorUi.editor.graph; var graph = that.editorUi.editor.graph;
const cell = graph.getSelectionCell(); const cell = graph.getSelectionCell();
let str = cell.style
let startChar = "saveDataParams=";
let endChar = ";";
let regex = new RegExp(`${startChar}(.*)${endChar}`);
var saveDataParams = str.match(regex)[1].split(';')[0];
// console.log('saveDataParams', JSON.parse(saveDataParams))
var { archiBelongId, assetId } = JSON.parse(saveDataParams);
// graph.getModel().setValue(cell, '测试'); // graph.getModel().setValue(cell, '测试');
// cell.setValue('测试'); // cell.setValue('测试');
...@@ -41,7 +48,7 @@ const initAttributePanel = function(that) { ...@@ -41,7 +48,7 @@ const initAttributePanel = function(that) {
const button_container = document.createElement('div'); const button_container = document.createElement('div');
button_container.style.cssText = 'padding: 8px;display: flex;justify-content: space-between;'; button_container.style.cssText = 'padding: 8px;display: flex;justify-content: flex-end;';
//新增属性按钮-------------------------------------------------------------------------- //新增属性按钮--------------------------------------------------------------------------
...@@ -66,25 +73,65 @@ const initAttributePanel = function(that) { ...@@ -66,25 +73,65 @@ const initAttributePanel = function(that) {
//二次开发-保存属性按钮-------------------------------------------------------------------------- //二次开发-保存属性按钮--------------------------------------------------------------------------
// const save_button = document.createElement('button'); const save_button = document.createElement('button');
// save_button.innerHTML = '保存属性'; save_button.innerHTML = '保存';
// save_button.style.cssText = 'padding: 4px;text-align: center;cursor: pointer;background-color: rgb(228,228,228);color: rgb(97, 97, 97);'; save_button.style.cssText = 'padding: 4px;text-align: right;cursor: pointer;background-color: rgb(228,228,228);color: rgb(97, 97, 97);';
button_container.appendChild(save_button);
that.container.appendChild(button_container);
// save_button.style.display = propertyList.length > 0 ? 'block' : 'none'; // save_button.style.display = propertyList.length > 0 ? 'block' : 'none';
// save_button.addEventListener('click', () => { save_button.addEventListener('click', () => {
// let propertyArray = []; let fieldsValue = [];
// console.log('propertyList', propertyList) console.log('propertyList', propertyList)
// propertyList.forEach(item => { // propertyList.forEach(item => {
// propertyArray.push({ // propertyArray.push({
// propertyId: item.id, // propertyId: item.id,
// propertyValue: item.value // propertyValue: item.value
// }) // })
// }) // })
if (propertyList.length > 0) {
// window.parent.postMessage({ type: 'saveProperty', data: propertyArray }, '*'); propertyList.forEach((item) => {
// }); fieldsValue.push({
id: item.propertyId,
cnName: item.cnName,
value_: item.value_,
controlType: item.controlType,
dictKey: item.dictKey ? item.dictKey : null,
})
})
} else {
fieldsValue = [{}]
}
const assetName = document.getElementById('assetName_id').value
const assetNumber = document.getElementById('assetNumber_id').value
const archiEleId = document.getElementById('archiEleId_id').value
const params = {
assetName,
assetNumber,
archiEleId,
archiBelongId,
assetId,
archiAssetState: 2,
fieldsValue
}
console.log('params', params)
$.ajax({
method: 'post',
url: `http://${ajaxUrl}/eadc-architecture/arc-ast-info/ad`,
data: JSON.stringify(params),
contentType: 'application/json',
success: function (res) {
if(res.code === 200) {
alert('保存成功')
}
},
error: function (error) {
console.error(error)
},
})
// window.parent.postMessage({ type: 'saveProperty', data: propertyArray }, '*');
});
// button_container.appendChild(save_button); // button_container.appendChild(save_button);
// that.container.appendChild(button_container); // that.container.appendChild(button_container);
...@@ -99,9 +146,15 @@ const initAttributePanel = function(that) { ...@@ -99,9 +146,15 @@ const initAttributePanel = function(that) {
that.container.appendChild(infoContain); that.container.appendChild(infoContain);
if(cell.style.includes('info__=')) {//属性列表 if(cell.style.includes('info__=')) {//属性列表
let infoList = [] let infoList = []
let haveAttrString = cell.style.match(/info__=\[[^\]]*\]/); // let haveAttrString = cell.style.match(/info__=\[[^\]]*\];/);
let stringAttr = haveAttrString[0].split('info__=')[1]; // let stringAttr = haveAttrString[0].split('info__=')[1];
infoList = JSON.parse(stringAttr); let str = cell.style
let startChar = "info__=";
let endChar = ";";
let regex = new RegExp(`${startChar}(.*)${endChar}`);
let haveAttrString = str.match(regex)[1].split(';')[0];
console.log('haveAttrString', haveAttrString)
infoList = JSON.parse(haveAttrString);
infoList.forEach(item => { infoList.forEach(item => {
fnAddInfoItem(infoContain, item.name, item.value) fnAddInfoItem(infoContain, item.name, item.value)
}) })
...@@ -122,7 +175,7 @@ const initAttributePanel = function(that) { ...@@ -122,7 +175,7 @@ const initAttributePanel = function(that) {
contain.appendChild(infoItemContain); contain.appendChild(infoItemContain);
} }
// 添加属性信息 // 添加属性信息
if(propertyList.length > 0) { // if(propertyList.length > 0) {
if(urlParams.page === 'metaModelListDetails') { if(urlParams.page === 'metaModelListDetails') {
let propertyTitleDom = document.createElement('div'); let propertyTitleDom = document.createElement('div');
propertyTitleDom.style.cssText = 'font-weight: bold;padding-left: 10px;padding-top: 10px;margin-bottom: 10px;'; propertyTitleDom.style.cssText = 'font-weight: bold;padding-left: 10px;padding-top: 10px;margin-bottom: 10px;';
...@@ -147,7 +200,7 @@ const initAttributePanel = function(that) { ...@@ -147,7 +200,7 @@ const initAttributePanel = function(that) {
} else { } else {
// 设置单元格内容 // 设置单元格内容
if(j === 0) { if(j === 0) {
cellT.textContent = propertyList[i].name; cellT.textContent = propertyList[i].cnName;
} else if(j === 1) { } else if(j === 1) {
cellT.textContent = propertyList[i].dataType; cellT.textContent = propertyList[i].dataType;
} else if(j === 2) { } else if(j === 2) {
...@@ -165,20 +218,150 @@ const initAttributePanel = function(that) { ...@@ -165,20 +218,150 @@ const initAttributePanel = function(that) {
if(urlParams.page === 'archiViewManageDetails') { if(urlParams.page === 'archiViewManageDetails') {
if(cell.style.includes('info__=')) {//属性列表 if(cell.style.includes('info__=')) {//属性列表
let infoList = [] let infoList1 = []
let haveAttrString = cell.style.match(/info__=\[[^\]]*\]/); // let haveAttrString1 = cell.style.match(/info__=\[[^\]]*\]/);
let stringAttr = haveAttrString[0].split('info__=')[1]; // let stringAttr = haveAttrString1[0].split('info__=')[1];
infoList = JSON.parse(stringAttr); let str = cell.style
infoList.forEach(item => { let startChar = "info__=";
fnAddInfoItem(that.container, item.name, item.value, 100) let endChar = ";";
let regex = new RegExp(`${startChar}(.*)${endChar}`);
let stringAttr = str.match(regex)[1].split(';')[0];
infoList1 = JSON.parse(stringAttr);
infoList1.forEach(item => {
fnAddInfoItemCanEdit(that.container, item.name, item.value, 100, item.element)
}) })
} }
} }
propertyList.forEach(item => { propertyList.forEach(item => {
addListPanel(that, propertyList, item.name, item.value, item.controlType); if(Object.keys(item).length) {
addListPanel(that, propertyList, item.cnName || item.name, item.value_ || item.value, item.controlType, item.dictKey);
}
}) })
} }
} var archiData = []
function fnAddInfoItemCanEdit(contain, name, value, labelWidth=60) {
const infoItemContain = document.createElement('div');
infoItemContain.style.cssText = 'display: flex;padding: 4px 0';
const nameSpan = document.createElement('span');
nameSpan.innerHTML = name + ': ';
nameSpan.style.cssText = `margin-right: 10px;width: ${labelWidth}px;text-align: right;flex-shrink: 0;`;
infoItemContain.appendChild(nameSpan);
// console.log('archiBelongId',archiBelongId)
const baseEleStyle = 'width: 100%;background: #ffffff;';
// 上级元素
const valueSelect2 = document.createElement('select');
switch (name) {
case '资产名称':
const valueInput = document.createElement('input');
valueInput.id = 'assetName_id'
valueInput.type = "text";
valueInput.value = value;
valueInput.style.cssText = 'width: 100%;';
infoItemContain.appendChild(valueInput);
break;
case '资产编号':
const valueInput2 = document.createElement('input');
valueInput2.id = 'assetNumber_id'
valueInput2.type = "text";
valueInput2.value = value;
valueInput2.style.cssText = 'width: 100%;';
infoItemContain.appendChild(valueInput2);
break
case '所属元素':
const valueSelect = document.createElement('select');
valueSelect.id = 'archiEleId_id'
valueSelect.style.cssText = baseEleStyle;
valueSelect.value = value
const params = {
state: '1',
type: '1',
elementName: undefined,
archiBelongId,
scopeList: [1, 3],
}
$.ajax({
method: 'post',
url: `http://${ajaxUrl}/eadc-architecture/ele/archi-ele-list`,
data: JSON.stringify(params),
contentType: 'application/json',
success: function (res) {
if(res.code === 200) {
archiData = res.data;
archiData.forEach(v => {
var option1 = document.createElement("option");
option1.value = v.elementId;
option1.text = v.elementName;
valueSelect.appendChild(option1);
})
const currentItem = archiData.find(
(item) => item.elementId == value,
)
getPreArc(currentItem, valueSelect2)
}
// console.log('result', res)
},
error: function (error) {
console.error(error)
}
})
valueSelect.onchange = function (e) {
const currentItem = archiData.find(
(item) => item.elementId == e.target.value,
)
// this.getShangJiJieDianSelect(currentItem)
getPreArc(currentItem, valueSelect2)
}
infoItemContain.appendChild(valueSelect);
break
case '上级元素':
valueSelect2.style.cssText = baseEleStyle;
valueSelect2.value = value
infoItemContain.appendChild(valueSelect2);
break
case '上级资产':
const valueSelect3 = document.createElement('select');
valueSelect3.style.cssText = 'width: 100%;background: #ffffff;';
infoItemContain.appendChild(valueSelect3);
break
default:
break;
}
// const valueSpan = document.createElement('span');
// valueSpan.style.cssText = 'white-space: normal;'
// valueSpan.innerHTML = value
// infoItemContain.appendChild(valueSpan);
contain.appendChild(infoItemContain);
}
function getPreArc(item, c) {
$.ajax({
method: 'post',
url: `http://${ajaxUrl}/eadc-architecture/arc-ast-info/qyLastEle`,
data: JSON.stringify({
eleName: item && item.elementName
}),
contentType: 'application/json',
success: function (res) {
if(res.code === 200) {
const archiData = res.data;
archiData.forEach(v => {
var option1 = document.createElement("option");
option1.value = v.elementId;
option1.text = v.elementName;
c.appendChild(option1);
})
}
// console.log('result', res)
},
error: function (error) {
console.error(error)
},
})
}
// }
// let currentNode = graph.getModel().getValue(cell);//获取没有属性的节点，返回的是文字 // let currentNode = graph.getModel().getValue(cell);//获取没有属性的节点，返回的是文字
// if(currentNode) { // if(currentNode) {
...@@ -211,109 +394,91 @@ const initAttributePanel = function(that) { ...@@ -211,109 +394,91 @@ const initAttributePanel = function(that) {
// } // }
// } // }
} }
const addListPanel = function(that, originAttr, attrName_, attrValue_, controlType) { const addListPanel = function(that, originAttr, attrName_, attrValue_, controlType, dictKey) {
const add_item_container = document.createElement('div'); const add_item_container = document.createElement('div');
add_item_container.style.cssText = 'display: flex;justify-content: space-between;padding: 4px 10px;'; add_item_container.style.cssText = 'display: flex;justify-content: space-between;padding: 4px 0 4px 10px;';
add_item_container.className = 'add_item_container'; add_item_container.className = 'add_item_container';
//属性名-------------------------------------------------------------------- //属性名--------------------------------------------------------------------
const item_left_container = document.createElement('div'); const item_left_container = document.createElement('div');
item_left_container.style.cssText = 'display: flex;width: 140px;text-align: right;margin-right: 10px;'; item_left_container.style.cssText = 'display: flex;width: 110px;text-align: right;margin-right: 10px;';
const item_left_span = document.createElement('span'); const item_left_span = document.createElement('span');
item_left_span.style.cssText = 'white-space: normal;width: 100%;text-align: right;' item_left_span.style.cssText = 'white-space: normal;width: 100%;text-align: right;'
item_left_span.innerHTML = attrName_ + ': '; item_left_span.innerHTML = attrName_ + ': ';
// const item_left_input = document.createElement('input');
// item_left_input.type = "text";
// item_left_input.value = attrName_;
// item_left_input.style.cssText = 'width: 50px;margin-left: 5px;';
// item_left_input.className = 'attrName';
// item_left_input.setAttribute('readonly', true);
// item_left_input.oninput = function (e) {
// // console.log('属性名')
// // console.log(e)
// // console.log(attrName_)
// }
item_left_container.appendChild(item_left_span); item_left_container.appendChild(item_left_span);
// item_left_container.appendChild(item_left_input); // item_left_container.appendChild(item_left_input);
//属性值-------------------------------------------------------------------- //属性值--------------------------------------------------------------------
const item_right_container = document.createElement('div'); const item_right_container = document.createElement('div');
item_right_container.style.cssText = 'margin-right: 15px;;margin-left: 5px;display: flex;justify-content: space-between;width: 70%;'; item_right_container.style.cssText = 'display: flex;justify-content: space-between;width: 70%;';
const valueSpan = document.createElement('span'); // const valueSpan = document.createElement('span');
valueSpan.style.cssText = 'white-space: normal;' // valueSpan.style.cssText = 'white-space: normal;'
valueSpan.innerHTML = attrValue_ // valueSpan.innerHTML = attrValue_
item_right_container.appendChild(valueSpan); // item_right_container.appendChild(valueSpan);
// const item_right_span = document.createElement('span');
// item_right_span.innerHTML = '属性值: '; switch(controlType){
case 0:
// const item_right_input = document.createElement('input'); const item_right_input = document.createElement('input');
// item_right_input.type = "text"; item_right_input.type = "text";
// item_right_input.value = attrValue_; item_right_input.value = attrValue_ || '';
// item_right_input.readOnly = true; item_right_input.style.cssText = 'width: 100%;height:20px';
// item_right_input.style.cssText = 'width: 100%;'; item_right_input.className = 'attrValue';
// item_right_input.className = 'attrValue'; item_right_input.oninput = function (e) {
// item_right_input.oninput = function (e) { const res = originAttr.find(item => item.cnName == attrName_);
// const res = originAttr.find(item => item.name == attrName_); res.value_ = e.target.value;
// res.value = e.data; }
// } item_right_container.appendChild(item_right_input);
// item_right_container.appendChild(item_right_input); break;
case 1:
const item_right_textarea = document.createElement('textarea');
// switch(controlType){ item_right_textarea.rows = "4"; // 设置显示的行数为2行
// case 0: // item_right_textarea.cols = "4";
// const item_right_input = document.createElement('input'); item_right_textarea.value = attrValue_ || '';
// item_right_input.type = "text"; item_right_textarea.style.cssText = 'width: 100%;background: #ffffff;';
// item_right_input.value = attrValue_; // item_right_textarea.className = 'attrValue';
// item_right_input.style.cssText = 'width: 100%;'; item_right_textarea.onchange = function (e) {
// item_right_input.className = 'attrValue'; const res = originAttr.find(item => item.cnName == attrName_);
// item_right_input.oninput = function (e) { res.value_ = e.target.value;
// const res = originAttr.find(item => item.name == attrName_); }
// res.value = e.data; item_right_container.appendChild(item_right_textarea);
// } break;
// item_right_container.appendChild(item_right_input); case 2:
// break; const item_right_select = document.createElement('select');
// case 1: item_right_select.value = attrValue_;
// const item_right_textarea = document.createElement('textarea'); item_right_select.style.cssText = 'width: 100%;background: #ffffff;';
// // item_right_textarea.rows = "2"; // 设置显示的行数为2行 $.ajax({
// // item_right_textarea.cols = "4"; method: 'post',
// item_right_textarea.value = attrValue_; url: `http://${ajaxUrl}/eadc-architecture/ele/archi-ele-list`,
// item_right_textarea.style.cssText = 'width: 100%;user-select: initial !important;'; data: JSON.stringify({key: dictKey}),
// item_right_textarea.className = 'attrValue'; contentType: 'application/json',
// item_right_textarea.onchange = function (e) { success: function (res) {
// const res = originAttr.find(item => item.name == attrName_); if(res.code === 200) {
// res.value = e.data; const archiData = res.data;
// } archiData.forEach(v => {
// item_right_container.appendChild(item_right_textarea); var option1 = document.createElement("option");
// break; option1.value = v.elementId;
// case 2: option1.text = v.elementName;
// const item_right_select = document.createElement('select'); item_right_select.appendChild(option1);
// var option = document.createElement("option"); })
// option.value = null; }
// option.text = "请选择"; // console.log('result', res)
// item_right_select.add(option); // 设置显示的行数为2行 },
error: function (error) {
// var option2 = document.createElement("option"); console.error(error)
// option2.value = '1'; },
// option2.text = "数据1"; })
// item_right_select.add(option2); item_right_select.onchange = function (e) {
const res = originAttr.find(item => item.cnName == attrName_);
// item_right_select.value = attrValue_; res.value_ = e.target.value;
// item_right_select.style.cssText = 'width: 100%;'; }
// item_right_select.className = 'attrValue'; item_right_container.appendChild(item_right_select);
// item_right_select.onchange = function (e) { break;
// const res = originAttr.find(item => item.name == attrName_);
// res.value = e.data;
// }
// item_right_container.appendChild(item_right_select);
// break;
// } }
// var removeAttr = document.createElement('a'); // var removeAttr = document.createElement('a');
// removeAttr.style.margin = '0px 8px 0 8px'; // removeAttr.style.margin = '0px 8px 0 8px';
......
public/drawio/extention/js/exGraph.js
...@@ -74,8 +74,8 @@ ...@@ -74,8 +74,8 @@
if(res.cnName) { if(res.cnName) {
attr_.push( attr_.push(
{ {
name: res.cnName, cnName: res.cnName,
value: res.propertyValue, value_: res.propertyValue,
id: res.propertyId, id: res.propertyId,
controlType: res.controlType, controlType: res.controlType,
dataType: res.dataType, dataType: res.dataType,
...@@ -141,42 +141,54 @@ ...@@ -141,42 +141,54 @@
item.eleDtos.forEach(item2 => { item.eleDtos.forEach(item2 => {
if(item2.assets) { // && item2.dicys if(item2.assets) { // && item2.dicys
let fns = []; let fns = [];
let attr_ = []; // let attr_ = [];
item2.dicys && item2.dicys.forEach(res => { // item2.dicys && item2.dicys.forEach(res => {
if(res.cnName) { // if(res.cnName) {
attr_.push( // attr_.push(
{ // {
name: res.cnName, // name: res.cnName,
value: res.propertyValue, // value: res.propertyValue,
id: res.propertyId, // id: res.propertyId,
controlType: res.controlType, // controlType: res.controlType,
} // }
) // )
} // }
}) // })
item2.assets.forEach(item3 => { item2.assets.forEach(item3 => {
let info__ = [{ let info__ = [{
name: '资产名称', name: '资产名称',
value: item3.assetName || '' value: item3.assetName || '',
element: 'input'
},{ },{
name: '资产编号', name: '资产编号',
value: item3.assetNumber || '' value: item3.assetNumber || '',
element: 'input'
},{ },{
name: '所属元素', name: '所属元素',
value: item3.eleName || '' value: item3.archiEleId || '',
element: 'select'
},{ },{
name: '上级元素', name: '上级元素',
value: item3.parentElement || '' value: item3.parentElement && item3.parentElement.replace(/\]|\[|\/?]/g, '').replace('null', '') || '',
element: 'select'
},{ },{
name: '上级资产', name: '上级资产',
value: item3.parentAssetName || '' value: item3.parentAssetName || '',
element: 'tree'
}]; }];
const saveDataParams = {
assetId: item3.assetId,
archiBelongId: item3.archiBelongId,
state: item3.state,
version: item3.version,
archiAssetState: item3.archiAssetState
}
// console.log(item3.fieldsValue) // console.log(item3.fieldsValue)
fns.push( fns.push(
this.createVertexTemplateEntry( this.createVertexTemplateEntry(
// 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ffff;shape=mxgraph.archimate3.application;appType=rightTopTriangle;archiType=rounded', // 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ffff;shape=mxgraph.archimate3.application;appType=rightTopTriangle;archiType=rounded',
item3.iconName + (item3.color ? `;fillColor=${item3.color};` : '') + 'attr=' + JSON.stringify(attr_) + ';info__=' + JSON.stringify(info__) + ';assetId=' + item3.assetId + ';archiBelongId=' + item3.archiBelongId + ';assetName=[' + item3.assetName + '];eleName=' + item2.eleName +';elementId=' + item2.elementId + ';eaLevel=' + item2.eaLevel + ';', item3.iconName + (item3.color ? `;fillColor=${item3.color};` : '') + 'attr=' + (item3.fieldsValue && item3.fieldsValue != 'null' ? item3.fieldsValue : '[]') + ';info__=' + JSON.stringify(info__) + ';assetName=[' + item3.assetName + '];eleName=' + item2.eleName +';elementId=' + item2.elementId + ';eaLevel=' + item2.eaLevel + ';' + 'saveDataParams=' + JSON.stringify(saveDataParams)+ ';',
item2.shapeWidth ? item2.shapeWidth : 150, item2.shapeWidth ? item2.shapeWidth : 150,
item2.shapeHeight ? item2.shapeHeight : 75, item2.shapeHeight ? item2.shapeHeight : 75,
null, null,
......
src/views/organizationManagement/index.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Autor: pan * @Autor: pan
* @Date: 2024-04-16 15:09:52 * @Date: 2024-04-16 15:09:52
* @LastEditors: pan * @LastEditors: pan
* @LastEditTime: 2024-04-16 19:33:58 * @LastEditTime: 2024-04-19 10:02:44
--> -->
<template> <template>
<div class="searchTable"> <div class="searchTable">
...@@ -176,10 +176,10 @@ export default { ...@@ -176,10 +176,10 @@ export default {
}, },
treeItemClick(data) { treeItemClick(data) {
console.log('data', data) console.log('data', data)
if(!data.children) { // if(!data.children) {
this.query.queryParam.parentOrgId = data.orgId this.query.queryParam.parentOrgId = data.orgId
this.querySearch() this.querySearch()
} // }
}, },
fnTopOperation(type) { fnTopOperation(type) {
switch (type) { switch (type) {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!