Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 3da904c9 by 史敦盼
Options

系统架构资产修改

1 parent bcf97a92
Inline Side-by-side
Showing with 216 additions and 50 deletions
src/views/archi-asset-manage/index.vue
......@@ -62,7 +62,7 @@
></el-input>
</div>
<div class="search_menu_item">
<span class="search_title">资产类型</span>
<span class="search_title">所属元素</span>
<el-select
v-model="searchParams.let2"
@change="zuJianLeiXingSelectChange"
......@@ -81,14 +81,21 @@
</el-select>
</div>
<div class="search_menu_item">
<span class="search_title">创建人</span>
<el-input
v-no-backslash
v-model="searchParams.let3"
maxlength="100"
placeholder="请输入内容"
<span class="search_title">状态</span>
<el-select
filterable
v-model="searchParams.state"
clearable
placeholder="请选择"
class="search_item"
></el-input>
>
<el-option
v-for="item in assetsStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
</div>
<div class="search_menu_btn_container">
......@@ -151,9 +158,18 @@
></el-table-column>
<el-table-column
prop="eleName"
label="资产类型(所属元素)"
label="所属元素"
align="center"
></el-table-column>
<el-table-column width="100" label="图标" align="center">
<template slot-scope="scope">
<img
:src="scope.row.icon"
alt=""
:style="{ width: scope.row.width, height: scope.row.height }"
/>
</template>
</el-table-column>
<el-table-column label="来源" align="center">
<template slot-scope="scope">
<span v-if="scope.row.isExtend == 1">总体资产</span>
......@@ -561,11 +577,12 @@
</el-dialog>
<el-dialog
:title="is_add_edit == 'add' ? '新建架构' : '编辑架构'"
:title="is_add_edit == 'add' ? '新建资产' : '编辑资产'"
:visible.sync="add_dialog3"
:center="false"
:close-on-click-modal="false"
width="60%"
@close="handleDialogClose"
>
<el-form
:model="ruleForm"
......@@ -574,7 +591,7 @@
style="height: 400px; overflow-y: auto"
>
<div class="form_item_container">
<el-form-item label="架构组件名称:" prop="let1">
<el-form-item label="资产名称:" prop="let1">
<el-input
placeholder="请输入内容"
v-no-backslash
......@@ -595,7 +612,7 @@
<el-radio label="隐藏"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="组件类型:" prop="let4">
<el-form-item label="所属元素:" prop="let4">
<el-select
v-model="ruleForm.let4"
@change="zuJianLeiXingSelectChange"
......@@ -613,6 +630,47 @@
></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="上级元素:" v-if="ruleForm.let3 && preArcList.length">
<el-select
@change="handlePreEleChange"
:disabled="is_add_edit == 'view' ? true : false"
v-model="ruleForm.preArc"
filterable
clearable
placeholder="请选择"
>
<el-option
v-for="(item, idx) in preArcList"
:key="idx"
:label="item.parentElement"
:value="item.parentElement"
></el-option>
</el-select>
</el-form-item> -->
<el-form-item label="图标设置:" prop="icon">
<div class="flex">
<img
:style="{
width: selectGraphSrc ? '80px' : 0,
height: selectGraphSrc ? '40px' : 0,
}"
:src="selectGraphSrc"
alt=""
/>
<div
style="display: flex"
v-if="is_add_edit == 'view' ? false : true"
>
<el-button type="primary" @click="openGraphDialog"
>图形选择</el-button
>
<el-color-picker
v-model="ruleForm.color"
:predefine="predefineColors">
</el-color-picker>
</div>
</div>
</el-form-item>
<el-form-item
class="dynamicFormClass"
v-for="(item, index) in ruleForm.dynamicForm_"
......@@ -675,7 +733,7 @@
<div style="height: 524px">
<el-card
v-for="item in elementTree"
:key="item.assetId"
:key="item.archiBelongId"
style="margin-bottom: 20px"
>
<div style="text-align: left">
......@@ -683,7 +741,7 @@
:indeterminate="item.isIndeterminate"
v-model="item.checkAll"
@change="(val) => handleCheckAllChange(val, item)"
>{{ item.assetName }}</el-checkbox
>{{ item.archiBelongName }}</el-checkbox
>
</div>
<div style="margin: 15px 0"></div>
......@@ -693,7 +751,7 @@
style="overflow-x: auto; display: flex"
>
<el-checkbox
v-for="city in item.children"
v-for="city in item.subList"
:label="city.assetId"
:key="city.assetId"
>{{ city.assetName }}</el-checkbox
......@@ -710,10 +768,14 @@
<el-button @click="add_dialog4 = false">取消</el-button>
</span>
</el-dialog>
<!-- 选择图形 -->
<ChooseSvg @emitSvg="getChooseSvg" :visible.sync="chooseSvgVisible" />
</div>
</template>
<script>
import ChooseSvg from '@/views/busi-assets-list/ChooseSvg.vue'
import {
querysystemInfoManageTable,
queryProjectInfoManageTable,
......@@ -725,15 +787,17 @@ import {
deleteSystemTable,
addSystemTable,
editSystemTable,
archiIntelligenceSearchTree,
archiIntelligenceSearchTreeNew,
systemArchiSaveFactor,
getQryByTree
} from '@/api/index.js'
import $ from 'jquery'
import { MessageBox, Message } from 'element-ui'
import { getDictTypeOptions } from '@/utils'
import { archiEleColor } from '@/config/index.js'
export default {
name: 'archiAssetsManage',
components: {},
components: { ChooseSvg },
watch: {},
data() {
return {
......@@ -813,6 +877,9 @@ export default {
let3: '显示',
let4: null,
dynamicForm_: [],
color: '',
icon: '',
preArc: '',
},
rules: {
let1: [
......@@ -821,6 +888,9 @@ export default {
let4: [
{ required: true, message: '请选择组件类型', trigger: 'change' },
],
icon: [
{ required: true, message: '请选择图形', trigger: 'change' },
]
},
zuJianLeiXingSelect: [],
archiBelongId: null,
......@@ -830,6 +900,16 @@ export default {
editId: null,
add_dialog4: false,
elementTree: [],
assetsStatusOptions: [],
chooseSvgVisible: false,
selectGraphSrc: '',
selectGraphShape: '',
graphId: '',
predefineColors: archiEleColor,
preArcList: [],
shangJiJieDianSelect: [],
treeSelectData: [],
cascaderValue: [],
}
},
mounted() {
......@@ -845,8 +925,47 @@ export default {
created() {
// 默认选中第一个系统
this.getDefaultSys()
getDictTypeOptions('asset_status').then((res) => {
this.assetsStatusOptions = res
})
},
methods: {
handleDialogClose() {
this.selectGraphSrc = ''
this.selectGraphShape = ''
this.addDialog = false
this.graphId = ''
this.treeSelectData = []
this.preArcList = []
},
handlePreEleChange(data) {
this.getShangJiJieDianSelect(data)
},
getShangJiJieDianSelect(eleName) {
//上级节点下拉框值
const params = {
archiType: this.archiType,
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
eleName
}
getQryByTree(params).then((res) => {
if (res.code == 200) {
this.shangJiJieDianSelect = res.data
this.treeSelectData = res.data
}
})
},
openGraphDialog() {
this.chooseSvgVisible = true
},
getChooseSvg(svgInfo) {
this.selectGraphSrc = svgInfo.icon
this.selectGraphShape = svgInfo.iconName
this.graphId = svgInfo.graphId
this.ruleForm.icon = svgInfo.icon
this.$refs.form.clearValidate('icon')
},
getDefaultSys() {
const params = {
manageOrgId: this.searchParams2.let1,
......@@ -861,6 +980,9 @@ export default {
this.selectRow2 = [res.data.records[0]]
this.showSelectTitle.title = this.selectRow2[0].appName
this.showSelectTitle.status = this.selectRow2[0].buildType == 1 ? '统推' : '自建'
this.showSelectTitle.appId = this.selectRow2[0].appId
this.showSelectTitle.appCode = this.selectRow2[0].appCode
this.showSelectTitle.appName = this.selectRow2[0].appName
}
})
},
......@@ -943,6 +1065,50 @@ export default {
this.pager.total = res.data.total
this.pager.size = res.data.size
this.tableData = res.data.records
if(this.tableData.length) {
res.data.records.map((item) => {
if (item.icon?.includes('svg+xml')) {
const item_icon = item.icon.split('base64,')[1]
const decode_item_icon = window.atob(item_icon) //svg解码，为字符串
const svgDocument = new DOMParser().parseFromString(
decode_item_icon,
'text/xml',
) //svg字符串转标签
// console.log(svgDocument)
const path = svgDocument.getElementsByTagName('path')[0]
const rect = svgDocument.getElementsByTagName('rect')[0]
const ellipse = svgDocument.getElementsByTagName('ellipse')[0]
const svgTag = svgDocument.getElementsByTagName('svg')[0]
const svgWidth =
Number(svgTag.getAttribute('width').split('px')[0]) / 2
const svgHeight =
Number(svgTag.getAttribute('height').split('px')[0]) / 2
item['width'] = svgWidth + 'px'
item['height'] = svgHeight + 'px'
if(item.color) {
if (path) {
path.setAttribute('fill', item.color)
}
if (rect) {
rect.setAttribute('fill', item.color)
}
if (ellipse) {
ellipse.setAttribute('fill', item.color)
}
}
const svgToString = new XMLSerializer().serializeToString(
svgDocument,
) //svg标签转化为字符串
const encode_item_icon = window.btoa(svgToString) //base64编码
item.icon = 'data:image/svg+xml;base64,' + encode_item_icon
} else {
item['width'] = 0
item['height'] = 0
}
})
}
} else {
Message({
type: 'error',
......@@ -1122,7 +1288,7 @@ export default {
handleCheckAllChange(val, item) {
let cityOptions = []
if (val) {
item.children.forEach((item2) => {
item.subList.forEach((item2) => {
cityOptions.push(item2.assetId)
})
} else {
......@@ -1133,13 +1299,13 @@ export default {
},
handleCheckedCitiesChange(value, item) {
let checkedCount = value.length
item.checkAll = checkedCount === item.children.length
item.checkAll = checkedCount === item.subList.length
item.isIndeterminate =
checkedCount > 0 && checkedCount < item.children.length
checkedCount > 0 && checkedCount < item.subList.length
},
getElementTreeData(type) {
//查询选择遵从总体架构资产类型数据
archiIntelligenceSearchTree({}).then((res) => {
archiIntelligenceSearchTreeNew({}).then((res) => {
if (res.code == 200) {
res.data.map((item) => {
item['isIndeterminate'] = false
......@@ -1158,13 +1324,20 @@ export default {
this.ruleForm.let1 = row.assetName
this.ruleForm.let2 = row.sort
this.ruleForm.let3 = row.isShow == 0 ? '显示' : '隐藏'
this.ruleForm.preArc = row.parentElement?.replace(/\]|\[|\/?]/g, '')
this.getShangJiJieDianSelect(this.ruleForm.preArc)
this.ruleForm.let4 = row.archiEleId
this.editId = row.assetId
let fieldsValue = row.fieldsValue
this.ruleForm.color = row.color
this.selectGraphSrc = row.icon
this.selectGraphShape = row.iconName
this.ruleForm.icon = row.icon
if (fieldsValue.length == 4) {
if (fieldsValue && fieldsValue.length == 4) {
this.ruleForm.dynamicForm_ = []
} else {
if(!fieldsValue) return
let fieldsValue_ = JSON.parse(fieldsValue)
fieldsValue_.map((item) => {
if (item.dictKey) {
......@@ -1244,11 +1417,17 @@ export default {
extend.push({
archiType: item.archiType,
assetIdList: item.checkedCities,
archiBelongId: this.archiBelongId
})
}
})
const params = {
extend,
isExtend: '1',
archiStage: '2',
appId: this.showSelectTitle.appId,
appCode: this.showSelectTitle.appCode,
appName: this.showSelectTitle.appName,
}
systemArchiSaveFactor(params).then((res) => {
if (res.code == 200) {
......@@ -1313,6 +1492,10 @@ export default {
appName: this.showSelectTitle.appName,
isExtend: 0,
state: 2,
icon: this.selectGraphSrc,
iconName: this.selectGraphShape,
color: this.ruleForm.color,
graphId: this.graphId,
}
if (this.is_add_edit == 'add') {
addSystemTable(params).then((res) => {
......@@ -1510,9 +1693,12 @@ export default {
this.showSelectTitle.prjCode = this.selectRow3[0].prjCode
this.showSelectTitle.prjName = this.selectRow3[0].prjName
this.showSelectTitle.appId = null
this.showSelectTitle.appCode = null
this.showSelectTitle.appName = null
// this.showSelectTitle.appId = null
// this.showSelectTitle.appCode = null
// this.showSelectTitle.appName = null
this.showSelectTitle.appId = this.selectRow3[0].appId
this.showSelectTitle.appCode = this.selectRow3[0].appCode
this.showSelectTitle.appName = this.selectRow3[0].appName
this.add_dialog2 = false
this.get_table()
},
......@@ -1548,6 +1734,10 @@ export default {
this.ruleForm.let3 = '显示'
this.ruleForm.let4 = null
this.ruleForm.dynamicForm_ = []
this.ruleForm.color = ''
this.ruleForm.icon = ''
this.selectGraphSrc = ''
this.selectGraphShape = ''
})
},
moreDelete() {
......
src/views/busi-assets-list/index.vue
......@@ -409,30 +409,6 @@
checkStrictly: true
}"
@change="handleChange"></el-cascader>
<!-- <el-select
class="treeSelectClass"
clearable
:disabled="is_add_edit == 'view' ? true : disabled1"
placeholder="请选择"
v-model="ruleForm.let2"
>
<el-option :value="selectValue" :label="selectLabel">
<el-tree
ref="treeSelect"
node-key="assetId"
show-checkbox
:check-strictly="true"
@check="handleCheckChange"
:data="treeSelectData"
:props="{
children: 'children',
label: 'assetName',
id: 'assetId',
}"
>
</el-tree>
</el-option>
</el-select> -->
</el-form-item>
<div class="dialog_form_item3 m-b-20 flex-c">
<div class="dialog_form_item_title"><span style="color: #F56C6C;">*</span>图标设置:</div>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!