Skip to content

liangzhen / framework-tools-web

Go to a project
Commit ac1c0fdc by 史敦盼
Options

属性关联

1 parent ae148de6
Expand all
Inline Side-by-side
Showing with 280 additions and 31 deletions
public/drawio/extention/js/exApp.js
...@@ -23,6 +23,75 @@ const initDrawioGraph = function (that) { ...@@ -23,6 +23,75 @@ const initDrawioGraph = function (that) {
} }
window.onmessage = (e) => { window.onmessage = (e) => {
// 属性关联完更新画布
if (e.data.type == 'attributeAssociation') {
// 更新左侧资产面板
console.log('Sidebar', that.editor.graph)
console.log('that', that.sidebar)
// 更新左侧资产面板
that.sidebar.refresh()
const { archiBelongId, elementId, assetNumber } = e.data.data
const cell = that.editor.graph.getSelectionCell();
// console.log('attributeAssociation', cell)
// const style = cell.style + 'fillColor=#E4D3FC;'
// that.editor.graph.getModel().setStyle(cell, style)
// that.editor.graph.getModel().setValue(cell, '123')
const joinGraph_ = JSON.parse(localStorage.getItem('joinGraph'));
const joinGraph = joinGraph_.graph;
let addItem = {}
// 找到右键关联属性新增的资产，把资产信息，属性信息等更新到style中
joinGraph.forEach(v => {
if(v.arciBelongId == archiBelongId) {
v.eleDtos.forEach(v2 => {
if(v2.elementId == elementId) {
addItem = v2
}
})
}
})
if(addItem.assets) {
addItem.assets.forEach(item3 => {
if(item3.assetNumber == assetNumber) {
let info__ = [{
name: '资产名称',
value: item3.assetName || '',
element: 'input'
},{
name: '资产编号',
value: item3.assetNumber || '',
element: 'input'
},{
name: '所属元素',
value: item3.archiEleId || '',
element: 'select'
},{
name: '上级元素',
value: item3.parentElement && item3.parentElement.replace(/\]|\[|\/?]/g, '').replace('null', '') || '',
element: 'select'
},{
name: '上级资产',
value: item3.parentAssetName || '',
element: 'tree'
}];
const saveDataParams = {
assetId: item3.assetId,
archiBelongId: item3.archiBelongId,
state: item3.state,
version: item3.version,
archiAssetState: item3.archiAssetState,
graphId: item3.graphId,
state: item3.state
}
const style = item3.iconName + (item3.color ? `;fillColor=${item3.color};` : '') + 'attr=' + (item3.fieldsValue && item3.fieldsValue != 'null' ? item3.fieldsValue : '[]') + ';info__=' + JSON.stringify(info__) + ';assetName=[' + item3.assetName + '];eleName=' + addItem.eleName +';elementId=' + addItem.elementId + ';eaLevel=' + addItem.eaLevel + ';' + 'saveDataParams=' + JSON.stringify(saveDataParams)+ ';'
// 更新cell的style和value,
that.editor.graph.getModel().setStyle(cell, style)
that.editor.graph.getModel().setValue(cell, item3.assetName)
}
})
}
}
//监听vue页面的图形选择窗口给drawio画布传的属性传递 //监听vue页面的图形选择窗口给drawio画布传的属性传递
if (e.data.type == 'propertyReceive') { if (e.data.type == 'propertyReceive') {
const receiveData = e.data.data const receiveData = e.data.data
......
public/drawio/extention/js/exFormat.js
...@@ -7,9 +7,9 @@ const initAttributePanel = function(that) { ...@@ -7,9 +7,9 @@ const initAttributePanel = function(that) {
let startChar = "saveDataParams="; let startChar = "saveDataParams=";
let endChar = ";"; let endChar = ";";
let regex = new RegExp(`${startChar}(.*)${endChar}`); let regex = new RegExp(`${startChar}(.*)${endChar}`);
var saveDataParams = str.match(regex)[1].split(';')[0]; var saveDataParams = str.match(regex) && str.match(regex)[1].split(';')[0];
// console.log('saveDataParams', JSON.parse(saveDataParams)) // console.log('saveDataParams', JSON.parse(saveDataParams))
var { archiBelongId, assetId, graphId } = JSON.parse(saveDataParams); var { archiBelongId, assetId, graphId, state } = saveDataParams ? JSON.parse(saveDataParams) : {};
// graph.getModel().setValue(cell, '测试'); // graph.getModel().setValue(cell, '测试');
// cell.setValue('测试'); // cell.setValue('测试');
...@@ -75,7 +75,7 @@ const initAttributePanel = function(that) { ...@@ -75,7 +75,7 @@ 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: right;cursor: pointer;background-color: rgb(228,228,228);color: rgb(97, 97, 97);'; save_button.style.cssText = 'padding: 12px 20px;line-height: 1;text-align: right;cursor: pointer;background-color: #0d867f;color: #ffffff;';
button_container.appendChild(save_button); button_container.appendChild(save_button);
that.container.appendChild(button_container); that.container.appendChild(button_container);
// save_button.style.display = propertyList.length > 0 ? 'block' : 'none'; // save_button.style.display = propertyList.length > 0 ? 'block' : 'none';
...@@ -114,12 +114,13 @@ const initAttributePanel = function(that) { ...@@ -114,12 +114,13 @@ const initAttributePanel = function(that) {
assetId, assetId,
archiAssetState: 2, archiAssetState: 2,
fieldsValue, fieldsValue,
graphId graphId,
state
} }
console.log('params', params) console.log('params', params)
$.ajax({ $.ajax({
method: 'post', method: 'post',
url: `http://${ajaxUrl}/eadc-architecture/arc-ast-info/ad`, url: `http://${ajaxUrl}/eadc-architecture/arc-ast-info/upd`,
data: JSON.stringify(params), data: JSON.stringify(params),
contentType: 'application/json', contentType: 'application/json',
success: function (res) { success: function (res) {
...@@ -290,11 +291,14 @@ const initAttributePanel = function(that) { ...@@ -290,11 +291,14 @@ const initAttributePanel = function(that) {
success: function (res) { success: function (res) {
if(res.code === 200) { if(res.code === 200) {
archiData = res.data; archiData = res.data;
archiData.forEach(v => { archiData.forEach((v, i) => {
var option1 = document.createElement("option"); var option1 = document.createElement("option");
option1.value = v.elementId; option1.value = v.elementId;
option1.text = v.elementName; option1.text = v.elementName;
valueSelect.appendChild(option1); valueSelect.appendChild(option1);
if(v.elementId == value) {
valueSelect['options'][i].selected = true
}
}) })
const currentItem = archiData.find( const currentItem = archiData.find(
(item) => item.elementId == value, (item) => item.elementId == value,
...@@ -441,29 +445,35 @@ const addListPanel = function(that, originAttr, attrName_, attrValue_, controlTy ...@@ -441,29 +445,35 @@ const addListPanel = function(that, originAttr, attrName_, attrValue_, controlTy
item_right_textarea.value = attrValue_ || ''; item_right_textarea.value = attrValue_ || '';
item_right_textarea.style.cssText = 'width: 100%;background: #ffffff;'; item_right_textarea.style.cssText = 'width: 100%;background: #ffffff;';
// item_right_textarea.className = 'attrValue'; // item_right_textarea.className = 'attrValue';
item_right_textarea.onchange = function (e) { item_right_textarea.oninput = function (e) {
const res = originAttr.find(item => item.cnName == attrName_); const res = originAttr.find(item => item.cnName == attrName_);
res.value_ = e.target.value; res.value_ = e.target.value;
} }
item_right_container.appendChild(item_right_textarea); item_right_container.appendChild(item_right_textarea);
item_right_textarea.focus()
break; break;
case 2: case 2:
const item_right_select = document.createElement('select'); const item_right_select = document.createElement('select');
item_right_select.value = attrValue_; item_right_select.value = attrValue_;
// item_right_select.text =
item_right_select.style.cssText = 'width: 100%;background: #ffffff;'; item_right_select.style.cssText = 'width: 100%;background: #ffffff;';
$.ajax({ $.ajax({
method: 'post', method: 'post',
url: `http://${ajaxUrl}/eadc-architecture/ele/archi-ele-list`, url: `http://${ajaxUrl}/eadc-shared-ability/dict/gDictByKey`,
data: JSON.stringify({key: dictKey}), data: JSON.stringify({key: dictKey}),
contentType: 'application/json', contentType: 'application/json',
success: function (res) { success: function (res) {
if(res.code === 200) { if(res.code === 200) {
const archiData = res.data; const archiData = res.data;
archiData.forEach(v => { archiData.forEach((v, i) => {
var option1 = document.createElement("option"); var option1 = document.createElement("option");
option1.value = v.elementId; option1.value = v.id;
option1.text = v.elementName; option1.text = v.label;
item_right_select.appendChild(option1); item_right_select.appendChild(option1);
if(v.id == attrValue_) {
item_right_select.text = v.elementName
item_right_select['options'][i].selected = true
}
}) })
} }
// console.log('result', res) // console.log('result', res)
......
public/drawio/extention/js/exGraph.js
...@@ -183,7 +183,8 @@ ...@@ -183,7 +183,8 @@
state: item3.state, state: item3.state,
version: item3.version, version: item3.version,
archiAssetState: item3.archiAssetState, archiAssetState: item3.archiAssetState,
graphId: item3.graphId graphId: item3.graphId,
state: item3.state
} }
// console.log(item3.fieldsValue) // console.log(item3.fieldsValue)
fns.push( fns.push(
......
src/components/Form.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Autor: pan * @Autor: pan
* @Date: 2024-03-12 14:55:59 * @Date: 2024-03-12 14:55:59
* @LastEditors: pan * @LastEditors: pan
* @LastEditTime: 2024-04-16 17:46:16 * @LastEditTime: 2024-04-22 14:38:00
--> -->
<template> <template>
<div class="form-box"> <div class="form-box">
...@@ -164,8 +164,7 @@ export default { ...@@ -164,8 +164,7 @@ export default {
} }
// el-input宽度 // el-input宽度
/deep/ .form-item { /deep/ .form-item {
.el-input, & > div {
.el-select, .el-cascader {
width: 100% !important; width: 100% !important;
} }
.el-rate { .el-rate {
......
src/components/SearchFormItem.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Autor: pan * @Autor: pan
* @Date: 2024-03-12 15:11:47 * @Date: 2024-03-12 15:11:47
* @LastEditors: pan * @LastEditors: pan
* @LastEditTime: 2024-04-16 17:45:46 * @LastEditTime: 2024-04-22 14:53:56
--> -->
<template> <template>
<div class="form-item"> <div class="form-item">
...@@ -148,15 +148,15 @@ export default { ...@@ -148,15 +148,15 @@ export default {
// 双向绑定数据值 // 双向绑定数据值
currentVal: { currentVal: {
get() { get() {
if (this.isSelect) { // if (this.isSelect) {
if (Array.isArray(this.value)) { // if (Array.isArray(this.value)) {
// return this.value
// } else {
// return this.value && this.value + ''
// }
// } else {
return this.value return this.value
} else { // }
return this.value && this.value + ''
}
} else {
return this.value
}
}, },
set(val) { set(val) {
this.$emit('input', val) this.$emit('input', val)
......
src/router/index.js
...@@ -83,6 +83,7 @@ export const routes = [ ...@@ -83,6 +83,7 @@ export const routes = [
component: () => import('@/views/busi-assets-list/index.vue'), component: () => import('@/views/busi-assets-list/index.vue'),
meta: { meta: {
title: '总体架构资产管理', title: '总体架构资产管理',
keepAlive: true
}, },
}, },
// { // {
......
src/views/archi-view-manage/canvas/ChooseSvg.vue 0 → 100644
<template>
<el-dialog
title="选择图形"
:visible.sync="showDialog"
:close-on-click-modal="false"
width="60%"
@open="handleOpen()"
:before-close="closeGraphDialog"
>
<div>
<el-tabs type="border-card" v-model="tabType">
<el-tab-pane label="常规图元" name="常规图元" style="height: 400px">
<div style="height: 400px; display: flex; align-items: center">
<div
style="
width: 20%;
height: 100%;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
overflow: auto;
text-align: center;
"
>
<div
:style="{
cursor: 'pointer',
padding: '4px',
'background-color':
nameIndex == index ? 'rgb(13,134,127)' : '#fff',
color: nameIndex == index ? '#fff' : '#000',
}"
v-for="(item, index) in search_select1"
:key="item.belongId"
@click="showCurrentGraph(item.label, index)"
>
{{ item.label }}
</div>
</div>
<div
style="
width: 80%;
height: 100%;
border: 1px solid #ccc;
overflow: auto;
text-align: left;
"
>
<div
:style="{
display: 'inline-block',
margin: '10px',
border: graphIndex == index ? '2px solid #0D867F' : 'none',
padding: '8px',
'border-radius': '6px',
}"
v-for="(item, index) in graphList"
:key="item.graphId"
>
<img
@click="clickGraph(index)"
class="tu_biao_icon"
:src="item.icon"
alt=""
/>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="save_graph">确定</el-button>
<el-button @click="closeGraphDialog">取消</el-button>
</span></el-dialog
>
</template>
<script>
import {
query_jia_gou_gui_shu_belong_icon,
query_jia_gou_ceng_ci_new,
} from '@/api/index'
export default {
props: {
visible: {
type: Boolean,
default: false,
},
},
data() {
return {
tabType: '常规图元',
graphIndex: -1,
nameIndex: 0,
search_select1: [],
graphList: [],
}
},
components: {},
computed: {
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
},
mounted() {},
methods: {
save_graph() {
//图形选择窗口的保存
if (this.graphIndex == -1 && this.graphIndex2 == -1) {
return this.$message.warning('请选择一种图形')
}
this.showDialog = false
const icon = this.graphList[this.graphIndex].icon
const iconName = this.graphList[this.graphIndex].graphName
const graphId = this.graphList[this.graphIndex].graphId
this.$emit('emitSvg', { icon, iconName, graphId })
},
closeGraphDialog() {
//图形选择窗口的取消
this.graphIndex = 0
this.nameIndex = 0
this.showDialog = false
},
showCurrentGraph(name, idx) {
//常规图形选择窗口的文字点击
this.nameIndex = idx
this.graphIndex = -1
const params = {
graphType: name,
metaType: 2
}
query_jia_gou_gui_shu_belong_icon(params).then((res) => {
if (res.code == 200) {
this.graphList = res.data
}
})
},
clickGraph(idx) {
//常规图形选择窗口的图形点击
this.graphIndex = idx
},
handleOpen() {
query_jia_gou_ceng_ci_new({"typeValue": "archi_belong"}).then((res) => {
if (res.code == 200) {
this.search_select1 = res.data
this.showCurrentGraph(this.search_select1[0]?.label, 0)
} else {
this.$message.warning(res.msg)
}
})
},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/elementui.scss';
</style>
src/views/archi-view-manage/canvas/index.vue
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</div> </div>
</el-card> </el-card>
</div> </div>
<el-dialog <!-- <el-dialog
title="属性关联" title="属性关联"
:visible.sync="graph_dialog" :visible.sync="graph_dialog"
:center="false" :center="false"
...@@ -61,11 +61,13 @@ ...@@ -61,11 +61,13 @@
<el-button class="greenButton" @click="confirm">关联</el-button> <el-button class="greenButton" @click="confirm">关联</el-button>
<el-button @click="closeGraphDialog">取消</el-button> <el-button @click="closeGraphDialog">取消</el-button>
</span> </span>
</el-dialog> </el-dialog> -->
<Add title="属性关联" :visible.sync="graph_dialog" />
</div> </div>
</template> </template>
<script> <script>
import Add from './Add.vue'
import Drawio from '@/components/drawio.vue'; import Drawio from '@/components/drawio.vue';
import { MessageBox, Message } from 'element-ui'; import { MessageBox, Message } from 'element-ui';
import { import {
...@@ -79,7 +81,8 @@ ...@@ -79,7 +81,8 @@
export default { export default {
name: 'Canvas', name: 'Canvas',
components: { components: {
Drawio Drawio,
Add
}, },
data() { data() {
return { return {
...@@ -336,7 +339,7 @@ ...@@ -336,7 +339,7 @@
padding: 60px 15px 60px 15px; padding: 60px 15px 60px 15px;
} }
</style> </style>
<style scoped> <style lang="scss" scoped>
.el-button--text{ .el-button--text{
color: #0D867F; color: #0D867F;
} }
......
src/views/archi-view-manage/index.vue
...@@ -585,6 +585,8 @@ export default { ...@@ -585,6 +585,8 @@ export default {
) )
this.$router.push( this.$router.push(
`/main/archiViewManageDetails?id=${id}&info=${this.graphGroup}&viewId=${this.viewId}&assetConstant=${this.archiType}&referenceId=${item.viewDetailsId}&page=archiViewManageDetails`) `/main/archiViewManageDetails?id=${id}&info=${this.graphGroup}&viewId=${this.viewId}&assetConstant=${this.archiType}&referenceId=${item.viewDetailsId}&page=archiViewManageDetails`)
}).catch(() => {
loading.close()
}) })
} }
}).catch(() => { }).catch(() => {
......
src/views/busi-assets-list/index.vue
...@@ -387,7 +387,7 @@ ...@@ -387,7 +387,7 @@
:min="0" :min="0"
></el-input-number> ></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="是否首页展示:" prop="let5"> <!-- <el-form-item label="是否首页展示:" prop="let5">
<el-radio-group <el-radio-group
v-model="ruleForm.let5" v-model="ruleForm.let5"
:disabled="is_add_edit == 'view' ? true : false" :disabled="is_add_edit == 'view' ? true : false"
...@@ -395,7 +395,7 @@ ...@@ -395,7 +395,7 @@
<el-radio label="显示"></el-radio> <el-radio label="显示"></el-radio>
<el-radio label="隐藏"></el-radio> <el-radio label="隐藏"></el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item> -->
<el-form-item label="上级节点:" prop="let2"> <el-form-item label="上级节点:" prop="let2">
<el-cascader <el-cascader
:disabled="is_add_edit == 'view' || !ruleForm.preArc && !treeSelectData.length ? true : false" :disabled="is_add_edit == 'view' || !ruleForm.preArc && !treeSelectData.length ? true : false"
...@@ -598,7 +598,7 @@ import { MessageBox, Message } from 'element-ui' ...@@ -598,7 +598,7 @@ import { MessageBox, Message } from 'element-ui'
import { getDictTypeOptions } from '@/utils' import { getDictTypeOptions } from '@/utils'
import { archiEleColor } from '@/config' import { archiEleColor } from '@/config'
export default { export default {
name: 'BusiAssetslist', name: 'busiAssetslist',
components: { components: {
ChooseSvg, ChooseSvg,
}, },
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!