Skip to content

liangzhen / framework-tools-web

Go to a project
Commit ac1c0fdc by 史敦盼
Options

属性关联

1 parent ae148de6
Inline Side-by-side
Showing with 796 additions and 32 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 // return this.value
} else { // } else {
return this.value && this.value + '' // return this.value && this.value + ''
} // }
} else { // } else {
return this.value 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/Add.vue 0 → 100644
<template>
<div>
<el-dialog
:title="title"
:visible.sync="showDialog"
:close-on-click-modal="false"
width="60%"
@open="handleOpen()"
@close="handleClose()"
>
<div>
<Form ref="addForm" :form-options="formOptions" label-width="120px">
<template #iconSetting="{ formData }">
<div class="flex">
<img
:style="{
width: selectGraphSrc ? '80px' : 0,
height: selectGraphSrc ? '40px' : 0,
}"
:src="selectGraphSrc"
alt=""
/>
<el-button type="primary" @click="openGraphDialog"
>图形选择</el-button
>
<el-color-picker
v-model="formData.color"
:predefine="predefineColors"
>
</el-color-picker>
</div>
</template>
</Form>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="fnAdd()">确定</el-button>
<el-button @click="handleClose()">取消</el-button>
</span></el-dialog
>
<!-- 选择图形 -->
<ChooseSvg @emitSvg="getChooseSvg" :visible.sync="chooseSvgVisible" />
</div>
</template>
<script>
import Form from '@/components/Form.vue'
import ChooseSvg from './ChooseSvg.vue'
import {
queryZiChanJiaGouZuJianLeiXing,
getPreArc,
queryZuJianLeiXingBelongForm,
getDianXingAnLiSelectData,
getQryByTree,
addMoreZiChanJiaGouTable,
queryArchiGraph
} from '@/api/index'
import { archiEleColor } from '@/config'
export default {
props: {
visible: {
type: Boolean,
default: false,
},
title: {
type: String,
default: '',
},
},
data() {
return {
// 所属元素集合
archiEleOptions: [],
// 上级元素集合
parentElementOptions: [],
// 上级节点
treeSelectData: [],
// 资产属性
dynamicForm_: [],
// 上级节点属性
superiorNodeValue: null,
superiorNodeLabel: null,
selectCode: null,
predefineColors: archiEleColor,
chooseSvgVisible: false,
selectGraphSrc: '',
selectGraphShape: '',
graphId: '',
}
},
components: { Form, ChooseSvg },
computed: {
formOptions() {
const that = this
let arr = []
arr = [
{
label: '资产名称', // label文字
prop: 'assetName', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请填写资产名称', // elementui组件属性
rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
},
{
label: '资产编号', // label文字
prop: 'assetNumber', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请填写资产编号', // elementui组件属性
rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
},
{
label: '所属元素', // label文字
prop: 'archiEleId', // 字段名
element: 'el-select', // 指定elementui组件
// initValue: undefined, // 字段初始值
placeholder: '请选择', // elementui组件属性
options: this.archiEleOptions,
rules: [{ required: true, trigger: 'change', message: '不能为空' }],
filterable: true,
keyOption: {
label: 'elementName',
value: 'elementId',
},
events: {
change(e) {
that.archiEleIdChange(e)
},
},
},
{
label: '上级元素', // label文字
prop: 'parentElement', // 字段名
element: 'el-select', // 指定elementui组件
initValue: undefined, // 字段初始值
placeholder: '请选择', // elementui组件属性
options: this.parentElementOptions,
filterable: true,
keyOption: {
label: 'parentElement',
value: 'parentElement',
},
events: {
change(e) {
that.parentElementChange(e)
},
},
},
{
label: '上级节点', // label文字
prop: 'superiorNode', // 字段名
element: 'el-cascader', // 指定elementui组件
initValue: undefined, // 字段初始值
placeholder: '请选择', // elementui组件属性
filterable: true,
options: this.treeSelectData,
props: {
children: 'children',
label: 'assetName',
value: 'assetId',
checkStrictly: true,
},
events: {
change(e) {
that.superiorNodeChange(e)
},
},
},
{
label: '排序', // label文字
prop: 'sort', // 字段名
element: 'el-input-number', // 指定elementui组件
min: 0,
initValue: 0,
},
{
label: '图标设置',
prop: 'iconSetting',
__slotName: 'iconSetting',
rules: [{ required: true, trigger: 'change', message: '不能为空' }],
},
]
this.dynamicForm_.forEach((v, i) => {
if (v.controlType == 0) {
arr = [
...arr,
{
label: v.cnName, // label文字
prop: `value_${i}`, // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
span: 24,
},
]
} else if (v.controlType == 1) {
arr = [
...arr,
{
label: v.cnName, // label文字
prop: `value_${i}`, // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
type: 'textarea',
rows: 3,
maxlength: '200',
showWordLimit: true,
span: 24,
},
]
} else {
arr = [
...arr,
{
label: v.cnName, // label文字
prop: `value_${i}`, // 字段名
element: 'el-select', // 指定elementui组件
placeholder: '请选择', // elementui组件属性
options: v.dictArray_,
filterable: true,
keyOption: {
label: 'label',
value: 'id',
},
span: 24,
},
]
}
})
return arr
},
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
getArchiType() {
const { info } = this.$route.query
let archiType = ''
switch (info) {
case '5':
archiType = 'ARCHI_SAFE'
break
case '4':
archiType = 'ARCHI_TECHNOLOGY'
break
case '3':
archiType = 'ARCHI_DATA'
break
case '2':
archiType = 'ARCHI_APPLICATION'
break
case '1':
archiType = 'ARCHI_BUSINESS'
break
}
return archiType
},
},
methods: {
getChooseSvg(svgInfo) {
this.selectGraphSrc = svgInfo.icon
this.selectGraphShape = svgInfo.iconName
this.graphId = svgInfo.graphId
this.$nextTick(() => {
this.$set(
this.$refs['addForm'].formData,
'iconSetting',
svgInfo.graphId,
)
this.$refs['addForm'].$refs['formRef'].clearValidate('iconSetting')
})
},
openGraphDialog() {
this.chooseSvgVisible = true
},
// 所属元素change事件
archiEleIdChange(data) {
console.log('所属change', data)
const currentItem = this.archiEleOptions.find(
(item) => item.elementId == data,
)
this.getParentElementOptions(currentItem)
const params = {
type: '1',
typeId: data,
}
queryZuJianLeiXingBelongForm(params).then((res) => {
if (res.code == 200) {
if (res.data.length > 0) {
res.data.map((item) => {
if (item.controlType == 2) {
this.get_key(item.dictKey).then((res2) => {
this.$set(item, 'dictArray_', res2)
})
}
item['value_'] = ''
})
this.dynamicForm_ = res.data
} else {
this.dynamicForm_ = []
}
}
})
},
get_key(key) {
//查询字典
const params = {
key: key,
}
return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then((res) => {
if (res.code == 200) {
resolve(res.data)
}
})
})
},
// 上级元素change事件
parentElementChange(eleName) {
//上级节点下拉框值
const params = {
archiType: this.getArchiType,
archiAssetState: 2,
archiStage: 1,
eleName,
}
getQryByTree(params).then((res) => {
if (res.code == 200) {
this.treeSelectData = res.data
}
})
},
// 获取上级元素
getParentElementOptions(item) {
getPreArc({ eleName: item?.elementName }).then((res) => {
if (res.code === 200) {
this.parentElementOptions = res.data
if (!this.parentElementOptions.length) {
// 没有上级元素时，上级节点查对应所属元素下的所有上级节点
this.parentElementChange(item?.elementName)
}
}
})
},
// 上级节点change
superiorNodeChange(value) {
// 当选中值变化时，更新绑定的对象
let selectedObject = {}
if (value && value.length) {
// 假设我们根据id来查询对象
selectedObject = this.findObjectById(this.treeSelectData, value[0])
} else {
selectedObject = null
}
this.superiorNodeValue = selectedObject.assetId
this.superiorNodeLabel = selectedObject.assetName
this.selectCode = selectedObject.assetCode
},
findObjectById(items, id) {
for (let i = 0; i < items.length; i++) {
if (items[i].assetId === id) {
return items[i]
}
if (items[i].children) {
const found = this.findObjectById(items[i].children, id)
if (found) {
return found
}
}
}
return null
},
getArchiEleOptions() {
const { info: archiBelongId } = this.$route.query
//所属元素下拉框值
const params = {
state: '1',
type: '1',
// elementName: elementName,
archiBelongId,
scopeList: [1, 3],
}
queryZiChanJiaGouZuJianLeiXing(params).then((res) => {
if (res.code == 200) {
this.archiEleOptions = res.data
} else {
this.$message.error(res.msg)
}
})
},
handleOpen() {
this.getArchiEleOptions()
},
handleClose() {
this.showDialog = false
this.selectGraphSrc = ''
this.selectGraphShape = ''
this.graphId = ''
this.dynamicForm_ = []
this.formOptions.forEach((v) => {
if (v.prop === 'superiorNode') {
v.initValue = []
} else {
v.initValue = null
}
})
this.$refs['addForm'].addInitValue()
this.$refs['addForm'].onReset()
},
fnAdd() {
// this.getArchiGraph()
// document
// .getElementById('drawioGraph')
// .contentWindow.postMessage({ type: 'attributeAssociation' }, '*')
this.$refs['addForm'].onValidate(() => {
const loading = this.$loading({
lock: true,
text: '保存中',
spinner: 'el-icon-loading',
})
// return console.log(this.handleAddParams())
const params = this.handleAddParams()
addMoreZiChanJiaGouTable(params).then((res) => {
loading.close()
if (res.code === 200) {
this.$message.success('保存成功')
this.handleClose()
// 重新查询左侧
this.getArchiGraph(params.archiEleId, params.assetNumber)
} else {
this.$message.error(res.msg)
}
})
})
},
getArchiGraph(elementId, assetNumber) {
const { viewId: archiViewId, info: archiBelongId } = this.$route.query
//查询综合图
const params = {
archiAssetState: 2,
archiStage: 1,
delFlag: 0,
state: 1,
archiBelongId,
archiType: this.getArchiType,
archiViewId,
}
queryArchiGraph(params).then((res) => {
if (res.code == 200) {
localStorage.setItem(
'joinGraph',
JSON.stringify({ state: 2, graph: res.data.dataEle }),
)
// 通知画布更新
document
.getElementById('drawioGraph')
.contentWindow.postMessage({ type: 'attributeAssociation' , data: { archiBelongId, elementId, assetNumber }}, '*')
} else {
this.$message.error(res.msg)
}
})
},
handleAddParams() {
const { info: archiBelongId } = this.$route.query
const formInfo = this.$refs['addForm'].getData()
const currentItem = this.archiEleOptions.find(
(item) => item.elementId == formInfo.archiEleId,
)
let fieldsValue = []
if (this.dynamicForm_.length > 0) {
this.dynamicForm_.forEach((item, i) => {
fieldsValue.push({
id: item.propertyId,
cnName: item.cnName,
value_: formInfo[`value_${i}`],
controlType: item.controlType,
dictKey: item.dictKey ? item.dictKey : null,
})
})
} else {
fieldsValue = [{}]
}
console.log('this.dynamicForm_', this.dynamicForm_)
console.log('formInfo', formInfo)
const params = {
...formInfo,
archiAssetState: 2,
archiStage: 1,
archiBelongId,
archiType: this.getArchiType,
parentAssetId: this.superiorNodeValue,
parentAssetName: this.superiorNodeLabel,
assetCode: this.selectCode,
fieldsValue,
eleName: currentItem.elementName,
icon: this.selectGraphSrc,
iconName: this.selectGraphShape,
parentElement: [formInfo.parentElement || ''],
graphId: this.graphId,
state: 1,
}
return params
},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/elementui.scss';
</style>
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> -->
</div> <Add title="属性关联" :visible.sync="graph_dialog" />
</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!