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 281 additions and 32 deletions
public/drawio/extention/js/exApp.js
......@@ -23,6 +23,75 @@ const initDrawioGraph = function (that) {
}
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画布传的属性传递
if (e.data.type == 'propertyReceive') {
const receiveData = e.data.data
......
public/drawio/extention/js/exFormat.js
......@@ -7,9 +7,9 @@ const initAttributePanel = function(that) {
let startChar = "saveDataParams=";
let 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))
var { archiBelongId, assetId, graphId } = JSON.parse(saveDataParams);
var { archiBelongId, assetId, graphId, state } = saveDataParams ? JSON.parse(saveDataParams) : {};
// graph.getModel().setValue(cell, '测试');
// cell.setValue('测试');
......@@ -75,7 +75,7 @@ const initAttributePanel = function(that) {
//二次开发-保存属性按钮--------------------------------------------------------------------------
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);';
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);
that.container.appendChild(button_container);
// save_button.style.display = propertyList.length > 0 ? 'block' : 'none';
......@@ -114,12 +114,13 @@ const initAttributePanel = function(that) {
assetId,
archiAssetState: 2,
fieldsValue,
graphId
graphId,
state
}
console.log('params', params)
$.ajax({
method: 'post',
url: `http://${ajaxUrl}/eadc-architecture/arc-ast-info/ad`,
url: `http://${ajaxUrl}/eadc-architecture/arc-ast-info/upd`,
data: JSON.stringify(params),
contentType: 'application/json',
success: function (res) {
......@@ -290,11 +291,14 @@ const initAttributePanel = function(that) {
success: function (res) {
if(res.code === 200) {
archiData = res.data;
archiData.forEach(v => {
archiData.forEach((v, i) => {
var option1 = document.createElement("option");
option1.value = v.elementId;
option1.text = v.elementName;
valueSelect.appendChild(option1);
if(v.elementId == value) {
valueSelect['options'][i].selected = true
}
})
const currentItem = archiData.find(
(item) => item.elementId == value,
......@@ -441,29 +445,35 @@ const addListPanel = function(that, originAttr, attrName_, attrValue_, controlTy
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) {
item_right_textarea.oninput = function (e) {
const res = originAttr.find(item => item.cnName == attrName_);
res.value_ = e.target.value;
}
item_right_container.appendChild(item_right_textarea);
item_right_textarea.focus()
break;
case 2:
const item_right_select = document.createElement('select');
item_right_select.value = attrValue_;
// item_right_select.text =
item_right_select.style.cssText = 'width: 100%;background: #ffffff;';
$.ajax({
method: 'post',
url: `http://${ajaxUrl}/eadc-architecture/ele/archi-ele-list`,
url: `http://${ajaxUrl}/eadc-shared-ability/dict/gDictByKey`,
data: JSON.stringify({key: dictKey}),
contentType: 'application/json',
success: function (res) {
if(res.code === 200) {
const archiData = res.data;
archiData.forEach(v => {
archiData.forEach((v, i) => {
var option1 = document.createElement("option");
option1.value = v.elementId;
option1.text = v.elementName;
option1.value = v.id;
option1.text = v.label;
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)
......
public/drawio/extention/js/exGraph.js
......@@ -183,7 +183,8 @@
state: item3.state,
version: item3.version,
archiAssetState: item3.archiAssetState,
graphId: item3.graphId
graphId: item3.graphId,
state: item3.state
}
// console.log(item3.fieldsValue)
fns.push(
......
src/components/Form.vue
......@@ -4,7 +4,7 @@
* @Autor: pan
* @Date: 2024-03-12 14:55:59
* @LastEditors: pan
* @LastEditTime: 2024-04-16 17:46:16
* @LastEditTime: 2024-04-22 14:38:00
-->
<template>
<div class="form-box">
......@@ -164,8 +164,7 @@ export default {
}
// el-input宽度
/deep/ .form-item {
.el-input,
.el-select, .el-cascader {
& > div {
width: 100% !important;
}
.el-rate {
......
src/components/SearchFormItem.vue
......@@ -4,7 +4,7 @@
* @Autor: pan
* @Date: 2024-03-12 15:11:47
* @LastEditors: pan
* @LastEditTime: 2024-04-16 17:45:46
* @LastEditTime: 2024-04-22 14:53:56
-->
<template>
<div class="form-item">
......@@ -148,15 +148,15 @@ export default {
// 双向绑定数据值
currentVal: {
get() {
if (this.isSelect) {
if (Array.isArray(this.value)) {
return this.value
} else {
return this.value && this.value + ''
}
} else {
// if (this.isSelect) {
// if (Array.isArray(this.value)) {
// return this.value
// } else {
// return this.value && this.value + ''
// }
// } else {
return this.value
}
// }
},
set(val) {
this.$emit('input', val)
......
src/router/index.js
......@@ -83,6 +83,7 @@ export const routes = [
component: () => import('@/views/busi-assets-list/index.vue'),
meta: {
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 @@
</div>
</el-card>
</div>
<el-dialog
<!-- <el-dialog
title="属性关联"
:visible.sync="graph_dialog"
:center="false"
......@@ -61,11 +61,13 @@
<el-button class="greenButton" @click="confirm">关联</el-button>
<el-button @click="closeGraphDialog">取消</el-button>
</span>
</el-dialog>
</div>
</el-dialog> -->
<Add title="属性关联" :visible.sync="graph_dialog" />
</div>
</template>
<script>
import Add from './Add.vue'
import Drawio from '@/components/drawio.vue';
import { MessageBox, Message } from 'element-ui';
import {
......@@ -79,7 +81,8 @@
export default {
name: 'Canvas',
components: {
Drawio
Drawio,
Add
},
data() {
return {
......@@ -336,7 +339,7 @@
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
<style lang="scss" scoped>
.el-button--text{
color: #0D867F;
}
......
src/views/archi-view-manage/index.vue
......@@ -585,6 +585,8 @@ export default {
)
this.$router.push(
`/main/archiViewManageDetails?id=${id}&info=${this.graphGroup}&viewId=${this.viewId}&assetConstant=${this.archiType}&referenceId=${item.viewDetailsId}&page=archiViewManageDetails`)
}).catch(() => {
loading.close()
})
}
}).catch(() => {
......
src/views/busi-assets-list/index.vue
......@@ -387,7 +387,7 @@
:min="0"
></el-input-number>
</el-form-item>
<el-form-item label="是否首页展示:" prop="let5">
<!-- <el-form-item label="是否首页展示:" prop="let5">
<el-radio-group
v-model="ruleForm.let5"
:disabled="is_add_edit == 'view' ? true : false"
......@@ -395,7 +395,7 @@
<el-radio label="显示"></el-radio>
<el-radio label="隐藏"></el-radio>
</el-radio-group>
</el-form-item>
</el-form-item> -->
<el-form-item label="上级节点:" prop="let2">
<el-cascader
:disabled="is_add_edit == 'view' || !ruleForm.preArc && !treeSelectData.length ? true : false"
......@@ -598,7 +598,7 @@ import { MessageBox, Message } from 'element-ui'
import { getDictTypeOptions } from '@/utils'
import { archiEleColor } from '@/config'
export default {
name: 'BusiAssetslist',
name: 'busiAssetslist',
components: {
ChooseSvg,
},
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!