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) {
var graph = that.editorUi.editor.graph;
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, '测试');
// cell.setValue('测试');
......@@ -41,7 +48,7 @@ const initAttributePanel = function(that) {
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) {
//二次开发-保存属性按钮--------------------------------------------------------------------------
// const save_button = document.createElement('button');
// 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);';
const save_button = document.createElement('button');
save_button.innerHTML = '保存';
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.addEventListener('click', () => {
// let propertyArray = [];
// console.log('propertyList', propertyList)
// propertyList.forEach(item => {
// propertyArray.push({
// propertyId: item.id,
// propertyValue: item.value
// })
// })
// window.parent.postMessage({ type: 'saveProperty', data: propertyArray }, '*');
// });
save_button.addEventListener('click', () => {
let fieldsValue = [];
console.log('propertyList', propertyList)
// propertyList.forEach(item => {
// propertyArray.push({
// propertyId: item.id,
// propertyValue: item.value
// })
// })
if (propertyList.length > 0) {
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);
// that.container.appendChild(button_container);
......@@ -99,9 +146,15 @@ const initAttributePanel = function(that) {
that.container.appendChild(infoContain);
if(cell.style.includes('info__=')) {//属性列表
let infoList = []
let haveAttrString = cell.style.match(/info__=\[[^\]]*\]/);
let stringAttr = haveAttrString[0].split('info__=')[1];
infoList = JSON.parse(stringAttr);
// let haveAttrString = cell.style.match(/info__=\[[^\]]*\];/);
// let stringAttr = haveAttrString[0].split('info__=')[1];
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 => {
fnAddInfoItem(infoContain, item.name, item.value)
})
......@@ -122,7 +175,7 @@ const initAttributePanel = function(that) {
contain.appendChild(infoItemContain);
}
// 添加属性信息
if(propertyList.length > 0) {
// if(propertyList.length > 0) {
if(urlParams.page === 'metaModelListDetails') {
let propertyTitleDom = document.createElement('div');
propertyTitleDom.style.cssText = 'font-weight: bold;padding-left: 10px;padding-top: 10px;margin-bottom: 10px;';
......@@ -147,7 +200,7 @@ const initAttributePanel = function(that) {
} else {
// 设置单元格内容
if(j === 0) {
cellT.textContent = propertyList[i].name;
cellT.textContent = propertyList[i].cnName;
} else if(j === 1) {
cellT.textContent = propertyList[i].dataType;
} else if(j === 2) {
......@@ -165,20 +218,150 @@ const initAttributePanel = function(that) {
if(urlParams.page === 'archiViewManageDetails') {
if(cell.style.includes('info__=')) {//属性列表
let infoList = []
let haveAttrString = cell.style.match(/info__=\[[^\]]*\]/);
let stringAttr = haveAttrString[0].split('info__=')[1];
infoList = JSON.parse(stringAttr);
infoList.forEach(item => {
fnAddInfoItem(that.container, item.name, item.value, 100)
let infoList1 = []
// let haveAttrString1 = cell.style.match(/info__=\[[^\]]*\]/);
// let stringAttr = haveAttrString1[0].split('info__=')[1];
let str = cell.style
let startChar = "info__=";
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 => {
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);//获取没有属性的节点，返回的是文字
// if(currentNode) {
......@@ -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');
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';
//属性名--------------------------------------------------------------------
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');
item_left_span.style.cssText = 'white-space: normal;width: 100%;text-align: right;'
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_input);
//属性值--------------------------------------------------------------------
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');
valueSpan.style.cssText = 'white-space: normal;'
valueSpan.innerHTML = attrValue_
item_right_container.appendChild(valueSpan);
// const item_right_span = document.createElement('span');
// item_right_span.innerHTML = '属性值: ';
// const item_right_input = document.createElement('input');
// item_right_input.type = "text";
// item_right_input.value = attrValue_;
// item_right_input.readOnly = true;
// item_right_input.style.cssText = 'width: 100%;';
// item_right_input.className = 'attrValue';
// item_right_input.oninput = function (e) {
// const res = originAttr.find(item => item.name == attrName_);
// res.value = e.data;
// }
// item_right_container.appendChild(item_right_input);
// switch(controlType){
// case 0:
// const item_right_input = document.createElement('input');
// item_right_input.type = "text";
// item_right_input.value = attrValue_;
// item_right_input.style.cssText = 'width: 100%;';
// item_right_input.className = 'attrValue';
// item_right_input.oninput = function (e) {
// const res = originAttr.find(item => item.name == attrName_);
// res.value = e.data;
// }
// item_right_container.appendChild(item_right_input);
// break;
// case 1:
// const item_right_textarea = document.createElement('textarea');
// // item_right_textarea.rows = "2"; // 设置显示的行数为2行
// // item_right_textarea.cols = "4";
// item_right_textarea.value = attrValue_;
// item_right_textarea.style.cssText = 'width: 100%;user-select: initial !important;';
// item_right_textarea.className = 'attrValue';
// item_right_textarea.onchange = function (e) {
// const res = originAttr.find(item => item.name == attrName_);
// res.value = e.data;
// }
// item_right_container.appendChild(item_right_textarea);
// break;
// case 2:
// const item_right_select = document.createElement('select');
// var option = document.createElement("option");
// option.value = null;
// option.text = "请选择";
// item_right_select.add(option); // 设置显示的行数为2行
// var option2 = document.createElement("option");
// option2.value = '1';
// option2.text = "数据1";
// item_right_select.add(option2);
// item_right_select.value = attrValue_;
// item_right_select.style.cssText = 'width: 100%;';
// item_right_select.className = 'attrValue';
// item_right_select.onchange = function (e) {
// const res = originAttr.find(item => item.name == attrName_);
// res.value = e.data;
// }
// item_right_container.appendChild(item_right_select);
// break;
// const valueSpan = document.createElement('span');
// valueSpan.style.cssText = 'white-space: normal;'
// valueSpan.innerHTML = attrValue_
// item_right_container.appendChild(valueSpan);
switch(controlType){
case 0:
const item_right_input = document.createElement('input');
item_right_input.type = "text";
item_right_input.value = attrValue_ || '';
item_right_input.style.cssText = 'width: 100%;height:20px';
item_right_input.className = 'attrValue';
item_right_input.oninput = function (e) {
const res = originAttr.find(item => item.cnName == attrName_);
res.value_ = e.target.value;
}
item_right_container.appendChild(item_right_input);
break;
case 1:
const item_right_textarea = document.createElement('textarea');
item_right_textarea.rows = "4"; // 设置显示的行数为2行
// item_right_textarea.cols = "4";
item_right_textarea.value = attrValue_ || '';
item_right_textarea.style.cssText = 'width: 100%;background: #ffffff;';
// item_right_textarea.className = 'attrValue';
item_right_textarea.onchange = function (e) {
const res = originAttr.find(item => item.cnName == attrName_);
res.value_ = e.target.value;
}
item_right_container.appendChild(item_right_textarea);
break;
case 2:
const item_right_select = document.createElement('select');
item_right_select.value = attrValue_;
item_right_select.style.cssText = 'width: 100%;background: #ffffff;';
$.ajax({
method: 'post',
url: `http://${ajaxUrl}/eadc-architecture/ele/archi-ele-list`,
data: JSON.stringify({key: dictKey}),
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;
item_right_select.appendChild(option1);
})
}
// console.log('result', res)
},
error: function (error) {
console.error(error)
},
})
item_right_select.onchange = function (e) {
const res = originAttr.find(item => item.cnName == attrName_);
res.value_ = e.target.value;
}
item_right_container.appendChild(item_right_select);
break;
// }
}
// var removeAttr = document.createElement('a');
// removeAttr.style.margin = '0px 8px 0 8px';
......
public/drawio/extention/js/exGraph.js
......@@ -74,8 +74,8 @@
if(res.cnName) {
attr_.push(
{
name: res.cnName,
value: res.propertyValue,
cnName: res.cnName,
value_: res.propertyValue,
id: res.propertyId,
controlType: res.controlType,
dataType: res.dataType,
......@@ -141,42 +141,54 @@
item.eleDtos.forEach(item2 => {
if(item2.assets) { // && item2.dicys
let fns = [];
let attr_ = [];
item2.dicys && item2.dicys.forEach(res => {
if(res.cnName) {
attr_.push(
{
name: res.cnName,
value: res.propertyValue,
id: res.propertyId,
controlType: res.controlType,
}
)
}
})
// let attr_ = [];
// item2.dicys && item2.dicys.forEach(res => {
// if(res.cnName) {
// attr_.push(
// {
// name: res.cnName,
// value: res.propertyValue,
// id: res.propertyId,
// controlType: res.controlType,
// }
// )
// }
// })
item2.assets.forEach(item3 => {
let info__ = [{
name: '资产名称',
value: item3.assetName || ''
value: item3.assetName || '',
element: 'input'
},{
name: '资产编号',
value: item3.assetNumber || ''
value: item3.assetNumber || '',
element: 'input'
},{
name: '所属元素',
value: item3.eleName || ''
value: item3.archiEleId || '',
element: 'select'
},{
name: '上级元素',
value: item3.parentElement || ''
value: item3.parentElement && item3.parentElement.replace(/\]|\[|\/?]/g, '').replace('null', '') || '',
element: 'select'
},{
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)
fns.push(
this.createVertexTemplateEntry(
// '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.shapeHeight ? item2.shapeHeight : 75,
null,
......
src/views/organizationManagement/index.vue
......@@ -4,7 +4,7 @@
* @Autor: pan
* @Date: 2024-04-16 15:09:52
* @LastEditors: pan
* @LastEditTime: 2024-04-16 19:33:58
* @LastEditTime: 2024-04-19 10:02:44
-->
<template>
<div class="searchTable">
......@@ -176,10 +176,10 @@ export default {
},
treeItemClick(data) {
console.log('data', data)
if(!data.children) {
this.query.queryParam.parentOrgId = data.orgId
this.querySearch()
}
// if(!data.children) {
this.query.queryParam.parentOrgId = data.orgId
this.querySearch()
// }
},
fnTopOperation(type) {
switch (type) {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!