Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 77f9ec60 by liuyong
Options

修改bug

1 parent 26bd1ee0
Inline Side-by-side
Showing with 1417 additions and 829 deletions
src/api/index.js
......@@ -493,7 +493,7 @@ export function queryViewManageQingDan(params) {
}
// 总体架构资产智能搜索，左侧树
export function archiIntelligenceSearchTree(params) {
return post('/network/archi-asset-view/assetTree', params);
return post('/network/archi-asset-view/assetLevel', params);
}
// 系统信息管理，表格
export function querysystemInfoManageTable(params) {
......@@ -519,4 +519,8 @@ export function addProjectManageTable(params) {
export function editDeleteProjectInfoManageTable(params) {
return post('/network/prj-info/upd', params);
}
// 文档在线编辑，编辑和删除
export function queryDocumentCatalog(params) {
return post('/kl-doc-parser/qryTitleTree', params);
}
src/router/index.js
......@@ -175,6 +175,11 @@ const routes = [
name: 'systemArchiViewDesign',
component: () => import('@/views/systemArchiViewDesign/index.vue'),
},
{
path: '/main/documentEdit',//文档编辑
name: 'documentEdit',
component: () => import('@/views/documentEdit/index.vue'),
},
]
}
]
......
src/views/archi-asset-manage/index(旧).vue 0 → 100644
<template>
<template>
<div class="busiAssetslist">
<div class="left_container">
<el-tree
class="filter-tree"
:data="treeData"
:highlight-current="true"
:props="{ children: 'subList', label: 'viewName', id: 'viewId' }"
default-expand-all
node-key="viewId"
:default-expanded-keys="treeDefaultExpand"
:current-node-key="currentNodekey"
@node-click="treeClick"
ref="tree">
</el-tree>
</div>
<div class="right_container">
<div class="search_menu">
<div class="search_menu_item_container">
<div class="search_menu_item">
<span class="search_title">架构组件名称</span>
<el-input v-no-backslash v-model="searchParams.assetName" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item">
<span class="search_title">创建人</span>
<el-input v-no-backslash v-model="searchParams.createMan" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item">
<span class="search_title">组件类型</span>
<el-select filterable remote :remote-method="queryZuJianLeiXingSelect" v-model="searchParams.archiEleId" clearable placeholder="请选择" class="search_item">
<el-option v-for="item in zuJianLeiXingSelect" :key="item.typeId" :label="item.elementName" :value="item.typeId"></el-option>
</el-select>
</div>
</div>
<div class="search_menu_btn_container">
<div class="query_btn" @click="search_table">
<img class="btn_icon" src="@/assets/archi-ele-list/search.png" alt="" />
<p>查询</p>
</div>
<div class="reset_btn" @click="reset">
<img class="btn_icon" src="@/assets/archi-ele-list/reset.png" alt="" />
<p>重置</p>
</div>
</div>
</div>
<div class="search_btn">
<!-- <div class="add_btn">
<img class="btn_icon" src="@/assets/archi-ele-list/create.png" alt="" />
<p>新建</p>
</div> -->
<el-button @click="add" type="primary" size="medium" icon="el-icon-document-add">新建</el-button>
<el-button type="primary" size="medium" icon="el-icon-delete" @click="moreDelete">删除</el-button>
<!-- <el-button type="primary" size="medium" icon="el-icon-plus">导入</el-button> -->
<div class="import_btn" @click="importFile">
<img class="btn_icon" src="@/assets/tech-politics-fabric/import.png" alt="" />
<p>导入</p>
</div>
<!-- <el-button type="primary" size="medium" icon="el-icon-plus">导出</el-button> -->
<!-- <div class="import_btn" @click="exportFile" style="margin-left: 0;">
<img class="btn_icon" src="@/assets/tech-politics-fabric/export.png" alt="" />
<p>导出</p>
</div> -->
<div class="import_btn" @click="openDownloadTemplateDialog" style="margin-left: 0;width: 100px;">
<img class="btn_icon" src="@/assets/tech-politics-fabric/export.png" alt="" />
<p>模版下载</p>
</div>
</div>
<el-table :height="tableHeight" @selection-change="select_table_rows" v-loading="loading" :data="tableData" stripe border>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="assetName" label="架构组件名称" width="300" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="eleName" label="组件类型" align="center"></el-table-column>
<el-table-column prop="parentAssetName" label="上级架构组件名称" width="300" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="createMan" label="创建人" align="center"></el-table-column>
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<div style="display: flex;align-items: center;justify-content: center;">
<el-button icon="el-icon-edit" type="primary" size="mini" @click="editItem(scope.row)" :disabled="scope.row.state == 1">编辑</el-button>
<el-button class="shanChu_btn" icon="el-icon-delete" size="mini" @click="deleteItem(scope.row)" :disabled="scope.row.state == 1">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pager.current"
:page-sizes="pager.sizes"
:page-size="pager.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pager.total">
</el-pagination>
</div>
<el-dialog
:title="is_add_edit == 'add' ? '新建架构' : '编辑架构'"
:visible.sync="addDialog"
:center="false"
:close-on-click-modal="false"
width="70%">
<el-form :model="ruleForm" :rules="rules" ref="form" style="height: 500px;overflow-y:auto;">
<div class="form_item_container">
<el-form-item label="架构组件名称:" prop="let1">
<el-input placeholder="请输入内容" v-no-backslash v-model="ruleForm.let1" maxlength="100"></el-input>
</el-form-item>
<el-form-item label="上级节点:" prop="let2">
<el-select class="treeSelectClass" clearable placeholder="请选择" v-model="ruleForm.let2">
<!-- <el-option v-for="item in shangJiJieDianSelect" :key="item.assetId" :label="item.assetName" :value="item.assetId"></el-option> -->
<el-option :value="selectValue" :label="selectLabel">
<el-tree
ref="treeSelect"
node-key="assetId"
show-checkbox
:check-strictly="true"
lazy
@check="handleCheckChange"
:data="treeSelectData"
:props="{ children: 'children', label: 'assetName', id: 'assetId' }"
:load="loadTreeSelect">
</el-tree>
</el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="关联资产:" prop="let6">
<el-select clearable @change="guanLianZiChanChange" filterable remote :remote-method="queryGuanLianZiChan" placeholder="请选择" multiple v-model="ruleForm.let6">
<el-option v-for="item in guanLianZiChanSelect" :key="String(item.assetId)" :label="item.assetName" :value="item.assetId"></el-option>
</el-select>
</el-form-item> -->
<el-form-item label="排序:" prop="let4">
<el-input-number style="width: 200px;" v-model="ruleForm.let4" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="是否首页展示:" prop="let5">
<el-radio-group v-model="ruleForm.let5">
<el-radio label="显示"></el-radio>
<el-radio label="隐藏"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="组件类型:" prop="let3">
<el-select @change="zuJianLeiXingSelectChange" filterable remote :remote-method="queryZuJianLeiXingSelect" clearable placeholder="请选择" v-model="ruleForm.let3">
<el-option v-for="item in zuJianLeiXingSelect" :key="item.typeId" :label="item.elementName" :value="item.typeId"></el-option>
</el-select>
</el-form-item>
<el-form-item class="dynamicFormClass" v-for="(item, index) in ruleForm.dynamicForm0_" :key="index" :label="item.assetName+':'">
<el-input placeholder="请输入内容" v-no-backslash v-model="item.relaName" maxlength="100"></el-input>
</el-form-item>
<el-form-item class="dynamicFormClass" v-for="(item, index) in ruleForm.dynamicForm_" :key="index" :label="item.cnName+':'">
<template v-if="item.controlType == 0">
<el-input placeholder="请输入内容" v-no-backslash v-model="item.value_" maxlength="100"></el-input>
</template>
<template v-else-if="item.controlType == 1">
<el-input placeholder="请输入内容" v-no-backslash v-model="item.value_" type="textarea" :rows="3" maxlength="200" show-word-limit></el-input>
</template>
<template v-else>
<el-select class="selectComponent" v-model="item.value_" clearable>
<el-option v-for="item2 in item.dictArray_" :key="item2.id" :label="item2.label" :value="item2.id"></el-option>
</el-select>
</template>
</el-form-item>
</div>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="saveDialog">确定</el-button>
<el-button @click="cancelDialog">取消</el-button>
</span>
</el-dialog>
<el-dialog
title="模版下载"
:visible.sync="templateDialog"
:center="false"
:close-on-click-modal="false"
width="60%">
<el-form :model="ruleForm2" ref="form2" :rules="rules2" style="">
<div class="form_item_container">
<el-form-item label="上级节点:" prop="let1">
<el-select clearable placeholder="请选择" v-model="ruleForm2.let1">
<!-- <el-option v-for="item in shangJiJieDianSelect" :key="item.assetId" :label="item.assetName" :value="item.assetId"></el-option> -->
<el-option :value="selectValue2" :label="selectLabel2">
<el-tree
ref="treeSelect2"
node-key="assetId"
show-checkbox
:check-strictly="true"
lazy
@check="handleCheckChange2"
:data="treeSelectData"
:props="{ children: 'children', label: 'assetName', id: 'assetId' }"
:load="loadTreeSelect">
</el-tree>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="组件类型:" prop="let2">
<el-select v-model="ruleForm2.let2" filterable remote :remote-method="queryZuJianLeiXingSelect" clearable placeholder="请选择">
<el-option v-for="item in zuJianLeiXingSelect" :key="item.typeId" :label="item.elementName" :value="item.typeId"></el-option>
</el-select>
</el-form-item>
</div>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="saveTemplateDialog">确定</el-button>
<el-button @click="templateDialog = false">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
getArchiViewManage,
getTotalZiChanJiaGouTable,
editZiChanJiaGouTable,
deleteMoreZiChanJiaGouTable,
addMoreZiChanJiaGouTable,
queryZiChanJiaGouShangJiJieDian,
queryZiChanJiaGouZuJianLeiXing,
queryZuJianLeiXingBelongForm,
exportZhiChanJiaGou,
getDianXingAnLiSelectData,
importZhiChanJiaGou,
queryGuanLianZiChanSelect
} from '@/api/index.js';
import $ from 'jquery';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'BusiAssetslist',
components: {
},
watch: {
},
data() {
return {
selectValue:'',
selectLabel: '',
selectCode: '',
selectValue2:'',
selectLabel2: '',
templateDialog: false,
ruleForm2: {
let1: null,
let2: null,
},
ruleForm: {
let1: null,
let2: null,
let3: null,
let4: 0,
let5: '显示',
let6: '',
dynamicForm0_: [],
dynamicForm_: [],
},
rules: {
let1: [
{ required: true, message: '请输入架构组件名称', trigger: 'blur' },
],
let3: [
{ required: true, message: '请选择节点类型', trigger: 'change' },
],
},
rules2: {
let1: [
{ required: true, message: '请选择上级节点', trigger: 'change' },
],
let2: [
{ required: true, message: '请选择组件类型', trigger: 'change' },
],
},
searchParams: {
archiAssetState: 2,
archiStage: 2,
assetName: null,
createMan: null,
archiEleId: null,
},
treeData: [
{
viewId: 0,
viewName: '总体架构资产',
subList: []
}
],
tableHeight: null,
selectTable: [],
loading: false,
tableData: [],
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 0 //总条数
},
addDialog: false,
currentNodekey: null,
is_add_edit: 'add',
zuJianLeiXingSelect: [],
shangJiJieDianSelect: [],
treeDefaultExpand: [],
editId: null,
guanLianZiChanSelect: [],
archiBelongId: null,
assetConstant: null,
// archiAssetTypeId: null,
treeSelectData: [],
};
},
mounted(){
this.getTreeData();
window.addEventListener('resize', () => {
this.set_table_height();
})
this.set_table_height();
},
methods: {
queryGuanLianZiChan(data){
if (data !== '') {
setTimeout(() => {
this.getGuanLianZiChanSelectData(data);
}, 200);
}else {
this.getGuanLianZiChanSelectData(null);
}
},
guanLianZiChanChange(data){//关联资产选择后
let dynamicForm0_Array = [];
if(data.length == 0) {
this.ruleForm.dynamicForm0_ = [];
}else {
data.forEach(item => {
const items = this.guanLianZiChanSelect.find(item2 => item2.assetId == item);
dynamicForm0_Array.push({
assetName: items.assetName,
assetId: items.assetId,
relaName: ''
})
})
this.ruleForm.dynamicForm0_ = dynamicForm0_Array;
}
},
getGuanLianZiChanSelectData(assetName) {//关联资产下拉菜单
const params = {
assetName: assetName,
assetConstant: this.assetConstant
}
queryGuanLianZiChanSelect(params).then(res => {
// console.log(res)
this.guanLianZiChanSelect = res.data;
});
},
saveDialog() {//弹框保存
this.$refs.form.validate(valid => {
if(valid) {
// console.log(this.ruleForm);
let parentAssetName, assetCode, fieldsValue = [], eleName, targetAsset = [];
// if(this.ruleForm.let2 && this.shangJiJieDianSelect.length > 0) {
// const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm.let2);
// parentAssetName = items.assetName;
// assetCode = items.parentCode;
// }
const items2 = this.zuJianLeiXingSelect.find(item => item.typeId == this.ruleForm.let3);
eleName = items2.elementName;
if(this.ruleForm.dynamicForm_.length > 0) {
this.ruleForm.dynamicForm_.forEach(item => {
fieldsValue.push({
cnName: item.cnName,
value_: item.value_,
controlType: item.controlType,
dictKey: item.dictKey ? item.dictKey : null
})
})
}else {
fieldsValue = [{}];
}
if(this.ruleForm.dynamicForm0_.length > 0) {
this.ruleForm.dynamicForm0_.forEach(item => {
targetAsset.push({
assetName: item.assetName,
assetId: item.assetId,
relaName: item.relaName,
})
})
}else {
targetAsset = [{}];
}
console.log(targetAsset)
const params = {
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
archiBelongId: this.archiBelongId,
assetConstant: this.assetConstant,
// archiAssetTypeId: this.archiAssetTypeId,
archiEleId: this.ruleForm.let3,
assetName: this.ruleForm.let1,
sort: this.ruleForm.let4,
assetId: this.is_add_edit == 'add' ? null : this.editId,
parentAssetId: this.selectValue,
parentAssetName: this.selectLabel,
isShow: this.ruleForm.let5 == '显示' ? 0 : 1,
fieldsValue: fieldsValue,
targetAsset: targetAsset,
assetCode: this.selectCode,
eleName: eleName
}
if(this.is_add_edit == 'add') {
addMoreZiChanJiaGouTable(params).then(res => {
if(res.code == 200) {
this.addDialog = false;
this.get_table();
Message({
type: 'success',
message: '新增成功!'
});
}else {
Message({
type: 'error',
message: res.msg
});
}
})
}else {
editZiChanJiaGouTable(params).then(res => {
if(res.code == 200) {
this.addDialog = false;
this.get_table();
Message({
type: 'success',
message: '编辑成功!'
});
}else {
Message({
type: 'error',
message: res.msg
});
}
})
}
}
});
},
cancelDialog() {//弹框取消
this.addDialog = false;
},
// selectable(row) {//表格勾选框禁用
// if(row.state == 1 || row.state == 0) {
// return false; // 禁用
// } else {
// return true; //不禁用
// }
// },
search_table() {//查询
this.pager.current = 1;
this.get_table();
},
reset() {//重置
this.searchParams.assetName = null;
this.searchParams.createMan = null;
this.searchParams.archiEleId = null;
},
// 每页条数改变
handleSizeChange(val) {
this.pager.current = 1;
this.pager.size = val;
this.get_table();
},
//当前页码改变
handleCurrentChange(val) {
this.pager.current = val;
this.get_table();
},
get_table() {//查询表格数据
const params = {
"archiAssetState": this.searchParams.archiAssetState,
"archiStage": this.searchParams.archiStage,
"assetName": this.searchParams.assetName,
"createMan": this.searchParams.createMan,
"archiEleId": this.searchParams.archiEleId,
"assetConstant": this.assetConstant,
// "archiAssetTypeId": this.archiAssetTypeId,
"current": this.pager.current,
"pageSize": this.pager.size,
};
this.loading = true;
getTotalZiChanJiaGouTable(params).then(res => {
if(res.code == 200) {
this.loading = false;
this.pager.current = res.data.current;
this.pager.total = res.data.total;
this.pager.size = res.data.size;
this.tableData = res.data.records;
}else {
Message({
type: 'error',
message: res.msg
});
}
})
},
openDownloadTemplateDialog() {//打开模版下载窗口
this.templateDialog = true;
this.getShangJiJieDianSelect();
this.$nextTick(() => {
this.$refs.form2.resetFields();
this.ruleForm2.let1 = null;
this.ruleForm2.let2 = null;
this.selectValue2 = '';
this.selectLabel2 = '';
});
},
add() {//新建
this.addDialog = true;
this.is_add_edit = 'add';
this.getShangJiJieDianSelect();
this.$nextTick(() => {
this.$refs.form.resetFields();
this.ruleForm.let1 = null;
this.ruleForm.let2 = null;
this.ruleForm.let3 = null;
this.ruleForm.let4 = 0;
this.ruleForm.let5 = '显示';
this.ruleForm.let6 = null;
this.ruleForm.dynamicForm_ = [];
this.ruleForm.dynamicForm0_ = [];
this.selectLabel = '';
this.selectValue = '';
this.selectCode = '';
});
},
editItem(row){//编辑
this.addDialog = true;
this.is_add_edit = 'edit';
this.ruleForm.let1 = row.assetName;
this.ruleForm.let2 = row.parentAssetName;
this.ruleForm.let3 = row.archiEleId;
this.ruleForm.let4 = row.sort;
this.ruleForm.let5 = row.isShow == 0 ? '显示' : '隐藏';
this.editId = row.assetId;
let fieldsValue = row.fieldsValue;
let targetAsset = row.targetAsset;
this.selectCode = row.assetCode;
this.selectLabel = row.parentAssetName;
this.selectValue = row.parentAssetId;
let targetAsset_id = [];
if(targetAsset.length == 4) {
this.ruleForm.dynamicForm0_ = [];
}else {
let targetAsset_ = JSON.parse(targetAsset);
this.ruleForm.dynamicForm0_ = targetAsset_;
targetAsset_.forEach(item => {
targetAsset_id.push(
item.assetId
)
})
}
this.ruleForm.let6 = targetAsset_id;
if(fieldsValue.length == 4) {
this.ruleForm.dynamicForm_ = [];
}else {
let fieldsValue_ = JSON.parse(fieldsValue);
fieldsValue_.map(item => {
if(item.dictKey) {
this.get_key(item.dictKey).then(res2 => {
this.$set(item, 'dictArray_', res2);
})
}
});
this.ruleForm.dynamicForm_ = fieldsValue_;
}
},
handleCheckChange(data, tree){//上级节点下拉树的勾选
this.selectValue = data.assetId;
this.selectLabel = data.assetName;
this.selectCode = data.assetCode;
this.ruleForm.let2 = data.assetName;
this.$refs.treeSelect.setCheckedKeys([]); // 删除所有选中节点
this.$refs.treeSelect.setCheckedNodes([data]);
},
handleCheckChange2(data, tree){//模版下载的上级节点的下拉树的勾选
this.selectValue2 = data.assetId;
this.selectLabel2 = data.assetName;
this.ruleForm2.let1 = data.assetName;
this.$refs.treeSelect2.setCheckedKeys([]); // 删除所有选中节点
this.$refs.treeSelect2.setCheckedNodes([data]);
},
loadTreeSelect(node, resolve) {//加载上级节点
if (node.level === 0) {
resolve([]);
}else {
const params = {
archiType: this.assetConstant,
parentAssetId: node.data.assetId,
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
// archiAssetTypeId: this.archiAssetTypeId,
};
queryZiChanJiaGouShangJiJieDian(params).then(res => {
if(res.code == 200) {
resolve(res.data);
}
})
}
},
getShangJiJieDianSelect() {//上级节点下拉框值
const params = {
archiType: this.assetConstant,
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
// parentAssetId: this.archiBelongId,
// archiAssetTypeId: this.archiAssetTypeId,
};
queryZiChanJiaGouShangJiJieDian(params).then(res => {
if(res.code == 200) {
// console.log('上级节点')
// console.log(res.data)
this.shangJiJieDianSelect = res.data;
this.treeSelectData = res.data;
}
})
},
get_key(key) {//查询字典
const params = {
key: key
}
return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then(res => {
if(res.code == 200) {
resolve(res.data);
}
})
})
},
zuJianLeiXingSelectChange(data) {//组件类型选择后
if(data) {
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.ruleForm.dynamicForm_ = res.data;
}else {
this.ruleForm.dynamicForm_ = [];
}
}
})
}else {
this.ruleForm.dynamicForm_ = [];
}
},
queryZuJianLeiXingSelect(data) {//组件类型搜索
if (data !== '') {
setTimeout(() => {
this.getZuJianLeiXingSelect(data);
}, 200);
}else {
this.getZuJianLeiXingSelect(null);
}
},
getZuJianLeiXingSelect(elementName) {//组件类型下拉框值
const params = {
state: '1',
type: '1',
elementName: elementName,
archiBelongId: this.archiBelongId
};
queryZiChanJiaGouZuJianLeiXing(params).then(res => {
if(res.code == 200) {
// console.log('组件类型')
// console.log(res.data)
this.zuJianLeiXingSelect = res.data;
}else {
Message({
type: 'error',
message: res.msg
});
}
})
},
moreDelete() {//批量删除
if(this.selectTable.length == 0) {
Message({
type: 'error',
message: '请选择至少一条数据!'
});
}else {
let assetIdArray = [];
this.selectTable.forEach(item => {
assetIdArray.push(item.assetId);
});
const params = {
assetId: assetIdArray,
assetConstant: this.assetConstant,
// archiAssetTypeId: this.archiAssetTypeId,
};
MessageBox.confirm('确定删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning'
}).then(() => {
deleteMoreZiChanJiaGouTable(params).then(res => {
if(res.code == 200) {
this.get_table();
Message({
type: 'success',
message: '删除成功!'
});
}else {
Message({
type: 'error',
message: res.msg
});
}
})
}).catch(() => {
Message({
type: 'info',
message: '已取消'
});
});
}
},
importFile() {//导入
const inpEle = document.createElement("input");
inpEle.type = "file";
inpEle.style.display = "none";
inpEle.addEventListener("change", event => {
// console.log(event.target.files[0]);
var formData = new FormData();
formData.append("file", event.target.files[0]);
formData.append("typeCode", this.assetConstant);
importZhiChanJiaGou(formData).then(res => {
if(res.code == 200) {
this.get_table();
Message({
type: 'success',
message: '导入成功!'
});
}
});
});
inpEle.click();
},
saveTemplateDialog() {//下载模版
this.$refs.form2.validate(valid => {
if(valid) {
// const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm2.let1);
// let parentName = items.assetName;
const params = {
parentId: this.selectValue2,
parentName: this.selectLabel2,
typeId: this.ruleForm2.let2
}
// const params = {
// parentId: '1',
// parentName: '应用架构A',
// typeId: 149
// }
// console.log(params)
exportZhiChanJiaGou(params).then(res => {
let blob = new Blob([res], { type: 'application/octet-stream' });
let url = URL.createObjectURL(blob);
let link = document.createElement('a');
link.href = url;
link.download = '模版文件.xls';
document.body.appendChild(link);
link.click();
this.templateDialog = false;
});
}
});
},
deleteItem(row){//删除
MessageBox.confirm('确定删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning'
}).then(() => {
const params = {
assetId: [row.assetId],
assetConstant: this.assetConstant,
// archiAssetTypeId: this.archiAssetTypeId,
}
deleteMoreZiChanJiaGouTable(params).then(res => {
if(res.code == 200) {
this.get_table();
Message({
type: 'success',
message: '删除成功!'
});
}else{
Message({
type: 'error',
message: res.msg
});
}
});
}).catch(() => {
Message({
type: 'info',
message: '已取消'
});
});
},
select_table_rows(data){//表格的勾选
this.selectTable = data;
},
set_table_height() {//动态设置表格高度
const right_container_height = $(".right_container").height();
this.tableHeight = right_container_height - 260 + 'px';
},
treeClick(data) {//左侧树点击
this.archiBelongId = data.archiBelongId;
this.assetConstant = data.assetConstant;
// this.archiAssetTypeId = data.viewId;
this.getZuJianLeiXingSelect(null);
this.get_table();
},
getTreeData() {//查询左侧树
getArchiViewManage({}).then(res => {
if(res.code == 200) {
this.treeDefaultExpand = [res.data[0].viewId];
this.currentNodekey = res.data[0].viewId;
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey);
});
res.data.map(item => {
item.subList = [];
switch(item.viewName){
case '安全架构':
item['assetConstant'] = 'ARCHI_SAFE';
item['archiBelongId'] = 5;
break;
case '技术架构':
item['assetConstant'] = 'ARCHI_TECHNOLOGY';
item['archiBelongId'] = 4;
break;
case '数据架构':
item['assetConstant'] = 'ARCHI_DATA';
item['archiBelongId'] = 3;
break;
case '应用架构':
item['assetConstant'] = 'ARCHI_APPLICATION';
item['archiBelongId'] = 2;
break;
case '业务架构':
item['assetConstant'] = 'ARCHI_BUSINESS';
item['archiBelongId'] = 1;
break;
}
});
// res.data.map(item => {
// switch(item.viewName){
// case '安全架构':
// item.subList.map(item2 => {
// item2['assetConstant'] = 'ARCHI_SAFE';
// item2['archiBelongId'] = 5;
// })
// break;
// case '技术架构':
// item.subList.map(item2 => {
// item2['assetConstant'] = 'ARCHI_TECHNOLOGY';
// item2['archiBelongId'] = 4;
// })
// break;
// case '数据架构':
// item.subList.map(item2 => {
// item2['assetConstant'] = 'ARCHI_DATA';
// item2['archiBelongId'] = 3;
// })
// break;
// case '应用架构':
// item.subList.map(item2 => {
// item2['assetConstant'] = 'ARCHI_APPLICATION';
// item2['archiBelongId'] = 2;
// })
// break;
// case '业务架构':
// item.subList.map(item2 => {
// item2['assetConstant'] = 'ARCHI_BUSINESS';
// item2['archiBelongId'] = 1;
// })
// break;
// }
// });
this.treeData[0].subList = res.data;
this.archiBelongId = res.data[0].archiBelongId;
this.assetConstant = res.data[0].assetConstant;
// this.archiAssetTypeId = res.data[0].viewId;
this.getShangJiJieDianSelect();
this.getZuJianLeiXingSelect(null);
this.getGuanLianZiChanSelectData(null);
this.get_table();
}else {
Message({
type: 'error',
message: res.msg
});
}
});
},
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
.el-select-dropdown__item{
height: auto;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
background-color: #fff !important;
}
</style>
<style scoped>
.filter-tree{
width: 300px;
height: 100%;
overflow-y: auto;
}
.dynamicFormClass{
width: 100% !important;
}
/deep/ .el-tree-node__expand-icon {
column-count: #01b7c9;
}
/deep/ .el-tree-node__expand-icon.is-leaf {
color: transparent !important;
}
/deep/ .dynamicFormClass .el-form-item__content {
width: calc(100% - 210px) !important;
text-align: left;
}
.el-form-item{
display: flex;
width: 33%;
}
/deep/ .el-form-item__label{
width: 160px;
}
.form_item_container{
display: flex;
flex-wrap: wrap;
}
.greenButton{
background-color: #0D867F;
color: #fff;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.el-pagination{
margin-top: 30px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F;
}
.shanChu_btn{
color: #DD6A15;
background-color: #F8EBE2;
}
.table_container{
width: 97%;
height: calc(100% - 40px);
margin-top: 20px;
}
/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
background-color: #0D867F;
color: #fff;
}
/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content >.is-leaf{
background-color: #0D867F !important;
}
/deep/ .is-leaf {
background-color: #fff !important;
}
.busiAssetslist{
width: 100%;
/* height: calc(100% - 20px); */
height: 100%;
display: flex;
/* padding-right: 20px;
padding-left: 20px;
padding-bottom: 20px; */
}
.left_container{
width: 20%;
margin-right: 20px;
}
.right_container{
width: 80%;
}
.search_menu{
margin-top: 20px;
margin-right: 20px;
display: flex;
justify-content: space-between;
}
.search_menu_item_container{
display: flex;
align-items: center;
}
.search_menu_btn_container{
display: flex;
align-items: center;
}
.search_menu_item{
display: flex;
align-items: center;
width: 344px;
}
.search_title{
/* width: 20%; */
flex-shrink: 0;
margin-right: 15px;
}
.search_item{
width: 60%;
}
.search_btn{
width: 100%;
display: flex;
margin-top: 50px;
margin-bottom: 20px;
}
.import_btn{
display: flex;
align-items: center;
justify-content: center;
width: 86px;
height: 36px;
margin: 0 10px;
background: rgba(13,134,127,0.1);
border-radius: 6px 6px 6px 6px;
font-size: 14px;
color: #0D867F;
cursor: pointer;
}
.btn_icon{
margin-right: 10px;
}
.query_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(13,134,127,1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #fff;
margin-right: 10px;
cursor: pointer;
}
.reset_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(244,244,244,1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #ccc;
font-size: 14px;
color: #666;
cursor: pointer;
}
.el-button--primary{
background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
}
</style>
\ No newline at end of file
src/views/archi-asset-manage/index.vue
<template>
<div class="busiAssetslist">
<div class="archiAssetsManage">
<el-card class="box-card" style="margin-bottom: 10px;">
<div class="topMenuContainer">
<el-button type="primary" size="medium" icon="el-icon-document-add" @click="operation('open_add_dialog1', null)">选择系统</el-button>
<el-button type="primary" size="medium" icon="el-icon-document-add" @click="operation('open_add_dialog2', null)">选择项目</el-button>
<div style="margin-left: 20px;margin-right: 20px;">您已选择：生产检修业务-2022 年新一代应急指挥系统</div>
<el-button type="primary" size="mini" icon="el-icon-document-add">统建</el-button>
</div>
</el-card>
<div class="archiAssetsManageContainer">
<div class="left_container">
<el-tree
class="filter-tree"
:data="treeData"
:highlight-current="true"
:props="{ children: 'subList', label: 'viewName', id: 'viewId' }"
:props="{ children: 'subList', label: 'assetName', id: 'assetId' }"
default-expand-all
node-key="viewId"
:default-expanded-keys="treeDefaultExpand"
:current-node-key="currentNodekey"
node-key="assetId"
@node-click="treeClick"
ref="tree">
</el-tree>
......@@ -18,19 +25,18 @@
<div class="search_menu">
<div class="search_menu_item_container">
<div class="search_menu_item">
<span class="search_title">架构组件名称</span>
<el-input v-no-backslash v-model="searchParams.assetName" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
<span class="search_title">资产名称</span>
<el-input v-no-backslash v-model="searchParams.let1" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item">
<span class="search_title">创建人</span>
<el-input v-no-backslash v-model="searchParams.createMan" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
<span class="search_title">资产类型</span>
<el-select filterable v-model="searchParams.let2" clearable placeholder="请选择" class="search_item">
<el-option label="1" value="1"></el-option>
</el-select>
</div>
<div class="search_menu_item">
<span class="search_title">组件类型</span>
<el-select filterable remote :remote-method="queryZuJianLeiXingSelect" v-model="searchParams.archiEleId" clearable placeholder="请选择" class="search_item">
<el-option v-for="item in zuJianLeiXingSelect" :key="item.typeId" :label="item.elementName" :value="item.typeId"></el-option>
</el-select>
<span class="search_title">创建人</span>
<el-input v-no-backslash v-model="searchParams.let3" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
</div>
</div>
<div class="search_menu_btn_container">
......@@ -45,35 +51,16 @@
</div>
</div>
<div class="search_btn">
<!-- <div class="add_btn">
<img class="btn_icon" src="@/assets/archi-ele-list/create.png" alt="" />
<p>新建</p>
</div> -->
<el-button @click="add" type="primary" size="medium" icon="el-icon-document-add">新建</el-button>
<el-button @click="addItem" type="primary" size="medium" icon="el-icon-document-add">新建</el-button>
<el-button type="primary" size="medium" icon="el-icon-delete" @click="moreDelete">删除</el-button>
<!-- <el-button type="primary" size="medium" icon="el-icon-plus">导入</el-button> -->
<div class="import_btn" @click="importFile">
<img class="btn_icon" src="@/assets/tech-politics-fabric/import.png" alt="" />
<p>导入</p>
</div>
<!-- <el-button type="primary" size="medium" icon="el-icon-plus">导出</el-button> -->
<!-- <div class="import_btn" @click="exportFile" style="margin-left: 0;">
<img class="btn_icon" src="@/assets/tech-politics-fabric/export.png" alt="" />
<p>导出</p>
</div> -->
<div class="import_btn" @click="openDownloadTemplateDialog" style="margin-left: 0;width: 100px;">
<img class="btn_icon" src="@/assets/tech-politics-fabric/export.png" alt="" />
<p>模版下载</p>
</div>
</div>
<el-table :height="tableHeight" @selection-change="select_table_rows" v-loading="loading" :data="tableData" stripe border>
<el-table height="300" @selection-change="select_table_rows" v-loading="loading" :data="tableData" stripe border>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="assetName" label="架构组件名称" width="300" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="eleName" label="组件类型" align="center"></el-table-column>
<el-table-column prop="parentAssetName" label="上级架构组件名称" width="300" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="assetName" label="资产名称" width="300" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="eleName" label="资产类型(所属元素)" align="center"></el-table-column>
<el-table-column prop="createMan" label="创建人" align="center"></el-table-column>
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
<el-table-column prop="createMan" label="创建时间" align="center"></el-table-column>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<div style="display: flex;align-items: center;justify-content: center;">
......@@ -94,117 +81,29 @@
:total="pager.total">
</el-pagination>
</div>
</div>
<el-dialog
:title="is_add_edit == 'add' ? '新建架构' : '编辑架构'"
:visible.sync="addDialog"
title='选择系统'
:visible.sync="add_dialog1"
:center="false"
:close-on-click-modal="false"
width="70%">
<el-form :model="ruleForm" :rules="rules" ref="form" style="height: 500px;overflow-y:auto;">
<div class="form_item_container">
<el-form-item label="架构组件名称:" prop="let1">
<el-input placeholder="请输入内容" v-no-backslash v-model="ruleForm.let1" maxlength="100"></el-input>
</el-form-item>
<el-form-item label="上级节点:" prop="let2">
<el-select class="treeSelectClass" clearable placeholder="请选择" v-model="ruleForm.let2">
<!-- <el-option v-for="item in shangJiJieDianSelect" :key="item.assetId" :label="item.assetName" :value="item.assetId"></el-option> -->
<el-option :value="selectValue" :label="selectLabel">
<el-tree
ref="treeSelect"
node-key="assetId"
show-checkbox
:check-strictly="true"
lazy
@check="handleCheckChange"
:data="treeSelectData"
:props="{ children: 'children', label: 'assetName', id: 'assetId' }"
:load="loadTreeSelect">
</el-tree>
</el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="关联资产:" prop="let6">
<el-select clearable @change="guanLianZiChanChange" filterable remote :remote-method="queryGuanLianZiChan" placeholder="请选择" multiple v-model="ruleForm.let6">
<el-option v-for="item in guanLianZiChanSelect" :key="String(item.assetId)" :label="item.assetName" :value="item.assetId"></el-option>
</el-select>
</el-form-item> -->
<el-form-item label="排序:" prop="let4">
<el-input-number style="width: 200px;" v-model="ruleForm.let4" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="是否首页展示:" prop="let5">
<el-radio-group v-model="ruleForm.let5">
<el-radio label="显示"></el-radio>
<el-radio label="隐藏"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="组件类型:" prop="let3">
<el-select @change="zuJianLeiXingSelectChange" filterable remote :remote-method="queryZuJianLeiXingSelect" clearable placeholder="请选择" v-model="ruleForm.let3">
<el-option v-for="item in zuJianLeiXingSelect" :key="item.typeId" :label="item.elementName" :value="item.typeId"></el-option>
</el-select>
</el-form-item>
<el-form-item class="dynamicFormClass" v-for="(item, index) in ruleForm.dynamicForm0_" :key="index" :label="item.assetName+':'">
<el-input placeholder="请输入内容" v-no-backslash v-model="item.relaName" maxlength="100"></el-input>
</el-form-item>
<el-form-item class="dynamicFormClass" v-for="(item, index) in ruleForm.dynamicForm_" :key="index" :label="item.cnName+':'">
<template v-if="item.controlType == 0">
<el-input placeholder="请输入内容" v-no-backslash v-model="item.value_" maxlength="100"></el-input>
</template>
<template v-else-if="item.controlType == 1">
<el-input placeholder="请输入内容" v-no-backslash v-model="item.value_" type="textarea" :rows="3" maxlength="200" show-word-limit></el-input>
</template>
<template v-else>
<el-select class="selectComponent" v-model="item.value_" clearable>
<el-option v-for="item2 in item.dictArray_" :key="item2.id" :label="item2.label" :value="item2.id"></el-option>
</el-select>
</template>
</el-form-item>
</div>
</el-form>
width="80%">
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="saveDialog">确定</el-button>
<el-button @click="cancelDialog">取消</el-button>
<el-button class="greenButton" @click="dialogOperation('selectSystem', null)">确定</el-button>
<el-button @click="dialogOperation('cancelSelectSystem', null)">取消</el-button>
</span>
</el-dialog>
<el-dialog
title="模版下载"
:visible.sync="templateDialog"
title='选择项目'
:visible.sync="add_dialog2"
:center="false"
:close-on-click-modal="false"
width="60%">
<el-form :model="ruleForm2" ref="form2" :rules="rules2" style="">
<div class="form_item_container">
<el-form-item label="上级节点:" prop="let1">
<el-select clearable placeholder="请选择" v-model="ruleForm2.let1">
<!-- <el-option v-for="item in shangJiJieDianSelect" :key="item.assetId" :label="item.assetName" :value="item.assetId"></el-option> -->
<el-option :value="selectValue2" :label="selectLabel2">
<el-tree
ref="treeSelect2"
node-key="assetId"
show-checkbox
:check-strictly="true"
lazy
@check="handleCheckChange2"
:data="treeSelectData"
:props="{ children: 'children', label: 'assetName', id: 'assetId' }"
:load="loadTreeSelect">
</el-tree>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="组件类型:" prop="let2">
<el-select v-model="ruleForm2.let2" filterable remote :remote-method="queryZuJianLeiXingSelect" clearable placeholder="请选择">
<el-option v-for="item in zuJianLeiXingSelect" :key="item.typeId" :label="item.elementName" :value="item.typeId"></el-option>
</el-select>
</el-form-item>
</div>
</el-form>
width="80%">
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="saveTemplateDialog">确定</el-button>
<el-button @click="templateDialog = false">取消</el-button>
<el-button class="greenButton" @click="dialogOperation('selectProject', null)">确定</el-button>
<el-button @click="dialogOperation('cancelSelectProject', null)">取消</el-button>
</span>
</el-dialog>
</div>
......@@ -213,23 +112,12 @@
<script>
import {
getArchiViewManage,
getTotalZiChanJiaGouTable,
editZiChanJiaGouTable,
deleteMoreZiChanJiaGouTable,
addMoreZiChanJiaGouTable,
queryZiChanJiaGouShangJiJieDian,
queryZiChanJiaGouZuJianLeiXing,
queryZuJianLeiXingBelongForm,
exportZhiChanJiaGou,
getDianXingAnLiSelectData,
importZhiChanJiaGou,
queryGuanLianZiChanSelect
} from '@/api/index.js';
import $ from 'jquery';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'BusiAssetslist',
name: 'archiAssetsManage',
components: {
},
......@@ -237,229 +125,111 @@
},
data() {
return {
selectValue:'',
selectLabel: '',
selectCode: '',
selectValue2:'',
selectLabel2: '',
templateDialog: false,
ruleForm2: {
let1: null,
let2: null,
},
ruleForm: {
tableData: [],
loading: false,
tableHeight: [],
selectRow: [],
treeData: [
{ assetId: 'BUSI', assetName: '业务架构', subList: [] },
{ assetId: 'APP', assetName: '应用架构', subList: [] },
{ assetId: 'DATA', assetName: '数据架构', subList: [] },
{ assetId: 'TECH', assetName: '技术架构', subList: [] },
{ assetId: 'SAFE', assetName: '安全架构', subList: [] }
],
searchParams: {
let1: null,
let2: null,
let3: null,
let4: 0,
let5: '显示',
let6: '',
dynamicForm0_: [],
dynamicForm_: [],
},
rules: {
let1: [
{ required: true, message: '请输入架构组件名称', trigger: 'blur' },
],
let3: [
{ required: true, message: '请选择节点类型', trigger: 'change' },
],
},
rules2: {
let1: [
{ required: true, message: '请选择上级节点', trigger: 'change' },
],
let2: [
{ required: true, message: '请选择组件类型', trigger: 'change' },
],
},
searchParams: {
archiAssetState: 2,
archiStage: 2,
assetName: null,
createMan: null,
archiEleId: null,
},
treeData: [
{
viewId: 0,
viewName: '总体架构资产',
subList: []
}
],
tableHeight: null,
selectTable: [],
loading: false,
tableData: [],
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 0 //总条数
},
addDialog: false,
currentNodekey: null,
is_add_edit: 'add',
zuJianLeiXingSelect: [],
shangJiJieDianSelect: [],
treeDefaultExpand: [],
editId: null,
guanLianZiChanSelect: [],
archiBelongId: null,
assetConstant: null,
// archiAssetTypeId: null,
treeSelectData: [],
add_dialog1: false,
add_dialog2: false,
};
},
mounted(){
this.getTreeData();
window.addEventListener('resize', () => {
this.set_table_height();
})
this.set_table_height();
},
methods: {
queryGuanLianZiChan(data){
if (data !== '') {
setTimeout(() => {
this.getGuanLianZiChanSelectData(data);
}, 200);
}else {
this.getGuanLianZiChanSelectData(null);
operation(type, data) {
switch(type){
case 'open_add_dialog1':
this.open_add_dialog1();
break;
case 'open_add_dialog2':
this.open_add_dialog2();
break;
case 'open_add_dialog3':
// this.open_add_dialog3();
break;
case 'edit':
// this.editItem(data);
break;
case 'delete':
// this.deleteItem(data);
break;
}
},
guanLianZiChanChange(data){//关联资产选择后
let dynamicForm0_Array = [];
if(data.length == 0) {
this.ruleForm.dynamicForm0_ = [];
}else {
data.forEach(item => {
const items = this.guanLianZiChanSelect.find(item2 => item2.assetId == item);
dynamicForm0_Array.push({
assetName: items.assetName,
assetId: items.assetId,
relaName: ''
})
})
this.ruleForm.dynamicForm0_ = dynamicForm0_Array;
dialogOperation(type, data) {
switch(type){
case 'selectSystem':
this.selectSystem();
break;
case 'cancelSelectSystem':
this.cancelSelectSystem();
break;
case 'selectProject':
this.selectProject();
break;
case 'cancelSelectProject':
this.cancelSelectProject();
break;
case 'delete':
// this.deleteItem(data);
break;
}
},
getGuanLianZiChanSelectData(assetName) {//关联资产下拉菜单
const params = {
assetName: assetName,
assetConstant: this.assetConstant
}
queryGuanLianZiChanSelect(params).then(res => {
// console.log(res)
this.guanLianZiChanSelect = res.data;
});
open_add_dialog1() {
this.add_dialog1 = true;
},
saveDialog() {//弹框保存
this.$refs.form.validate(valid => {
if(valid) {
// console.log(this.ruleForm);
let parentAssetName, assetCode, fieldsValue = [], eleName, targetAsset = [];
// if(this.ruleForm.let2 && this.shangJiJieDianSelect.length > 0) {
// const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm.let2);
// parentAssetName = items.assetName;
// assetCode = items.parentCode;
// }
const items2 = this.zuJianLeiXingSelect.find(item => item.typeId == this.ruleForm.let3);
eleName = items2.elementName;
open_add_dialog2() {
this.add_dialog2 = true;
},
selectSystem() {
this.add_dialog1 = false;
},
cancelSelectSystem() {
this.add_dialog1 = false;
},
selectProject() {
this.add_dialog2 = false;
},
cancelSelectProject() {
this.add_dialog2 = false;
},
select_table_rows(data){//表格的勾选
this.selectRow = data;
},
set_table_height() {//动态设置表格高度
const right_container_height = $(".right_container").height();
this.tableHeight = right_container_height - 260 + 'px';
},
treeClick(data) {//左侧树点击
if(this.ruleForm.dynamicForm_.length > 0) {
this.ruleForm.dynamicForm_.forEach(item => {
fieldsValue.push({
cnName: item.cnName,
value_: item.value_,
controlType: item.controlType,
dictKey: item.dictKey ? item.dictKey : null
})
})
}else {
fieldsValue = [{}];
}
},
addItem() {
if(this.ruleForm.dynamicForm0_.length > 0) {
this.ruleForm.dynamicForm0_.forEach(item => {
targetAsset.push({
assetName: item.assetName,
assetId: item.assetId,
relaName: item.relaName,
})
})
}else {
targetAsset = [{}];
}
console.log(targetAsset)
const params = {
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
archiBelongId: this.archiBelongId,
assetConstant: this.assetConstant,
// archiAssetTypeId: this.archiAssetTypeId,
archiEleId: this.ruleForm.let3,
assetName: this.ruleForm.let1,
sort: this.ruleForm.let4,
assetId: this.is_add_edit == 'add' ? null : this.editId,
parentAssetId: this.selectValue,
parentAssetName: this.selectLabel,
isShow: this.ruleForm.let5 == '显示' ? 0 : 1,
fieldsValue: fieldsValue,
targetAsset: targetAsset,
assetCode: this.selectCode,
eleName: eleName
}
if(this.is_add_edit == 'add') {
addMoreZiChanJiaGouTable(params).then(res => {
if(res.code == 200) {
this.addDialog = false;
this.get_table();
Message({
type: 'success',
message: '新增成功!'
});
}else {
Message({
type: 'error',
message: res.msg
});
}
})
}else {
editZiChanJiaGouTable(params).then(res => {
if(res.code == 200) {
this.addDialog = false;
this.get_table();
Message({
type: 'success',
message: '编辑成功!'
});
}else {
Message({
type: 'error',
message: res.msg
});
}
})
}
}
});
},
cancelDialog() {//弹框取消
this.addDialog = false;
moreDelete() {
},
// selectable(row) {//表格勾选框禁用
// if(row.state == 1 || row.state == 0) {
// return false; // 禁用
// } else {
// return true; //不禁用
// }
// },
search_table() {//查询
this.pager.current = 1;
this.get_table();
......@@ -481,470 +251,8 @@
this.get_table();
},
get_table() {//查询表格数据
const params = {
"archiAssetState": this.searchParams.archiAssetState,
"archiStage": this.searchParams.archiStage,
"assetName": this.searchParams.assetName,
"createMan": this.searchParams.createMan,
"archiEleId": this.searchParams.archiEleId,
"assetConstant": this.assetConstant,
// "archiAssetTypeId": this.archiAssetTypeId,
"current": this.pager.current,
"pageSize": this.pager.size,
};
this.loading = true;
getTotalZiChanJiaGouTable(params).then(res => {
if(res.code == 200) {
this.loading = false;
this.pager.current = res.data.current;
this.pager.total = res.data.total;
this.pager.size = res.data.size;
this.tableData = res.data.records;
}else {
Message({
type: 'error',
message: res.msg
});
}
})
},
openDownloadTemplateDialog() {//打开模版下载窗口
this.templateDialog = true;
this.getShangJiJieDianSelect();
this.$nextTick(() => {
this.$refs.form2.resetFields();
this.ruleForm2.let1 = null;
this.ruleForm2.let2 = null;
this.selectValue2 = '';
this.selectLabel2 = '';
});
},
add() {//新建
this.addDialog = true;
this.is_add_edit = 'add';
this.getShangJiJieDianSelect();
this.$nextTick(() => {
this.$refs.form.resetFields();
this.ruleForm.let1 = null;
this.ruleForm.let2 = null;
this.ruleForm.let3 = null;
this.ruleForm.let4 = 0;
this.ruleForm.let5 = '显示';
this.ruleForm.let6 = null;
this.ruleForm.dynamicForm_ = [];
this.ruleForm.dynamicForm0_ = [];
this.selectLabel = '';
this.selectValue = '';
this.selectCode = '';
});
},
editItem(row){//编辑
this.addDialog = true;
this.is_add_edit = 'edit';
this.ruleForm.let1 = row.assetName;
this.ruleForm.let2 = row.parentAssetName;
this.ruleForm.let3 = row.archiEleId;
this.ruleForm.let4 = row.sort;
this.ruleForm.let5 = row.isShow == 0 ? '显示' : '隐藏';
this.editId = row.assetId;
let fieldsValue = row.fieldsValue;
let targetAsset = row.targetAsset;
this.selectCode = row.assetCode;
this.selectLabel = row.parentAssetName;
this.selectValue = row.parentAssetId;
let targetAsset_id = [];
if(targetAsset.length == 4) {
this.ruleForm.dynamicForm0_ = [];
}else {
let targetAsset_ = JSON.parse(targetAsset);
this.ruleForm.dynamicForm0_ = targetAsset_;
targetAsset_.forEach(item => {
targetAsset_id.push(
item.assetId
)
})
}
this.ruleForm.let6 = targetAsset_id;
if(fieldsValue.length == 4) {
this.ruleForm.dynamicForm_ = [];
}else {
let fieldsValue_ = JSON.parse(fieldsValue);
fieldsValue_.map(item => {
if(item.dictKey) {
this.get_key(item.dictKey).then(res2 => {
this.$set(item, 'dictArray_', res2);
})
}
});
this.ruleForm.dynamicForm_ = fieldsValue_;
}
},
handleCheckChange(data, tree){//上级节点下拉树的勾选
this.selectValue = data.assetId;
this.selectLabel = data.assetName;
this.selectCode = data.assetCode;
this.ruleForm.let2 = data.assetName;
this.$refs.treeSelect.setCheckedKeys([]); // 删除所有选中节点
this.$refs.treeSelect.setCheckedNodes([data]);
},
handleCheckChange2(data, tree){//模版下载的上级节点的下拉树的勾选
this.selectValue2 = data.assetId;
this.selectLabel2 = data.assetName;
this.ruleForm2.let1 = data.assetName;
this.$refs.treeSelect2.setCheckedKeys([]); // 删除所有选中节点
this.$refs.treeSelect2.setCheckedNodes([data]);
},
loadTreeSelect(node, resolve) {//加载上级节点
if (node.level === 0) {
resolve([]);
}else {
const params = {
archiType: this.assetConstant,
parentAssetId: node.data.assetId,
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
// archiAssetTypeId: this.archiAssetTypeId,
};
queryZiChanJiaGouShangJiJieDian(params).then(res => {
if(res.code == 200) {
resolve(res.data);
}
})
}
},
getShangJiJieDianSelect() {//上级节点下拉框值
const params = {
archiType: this.assetConstant,
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
// parentAssetId: this.archiBelongId,
// archiAssetTypeId: this.archiAssetTypeId,
};
queryZiChanJiaGouShangJiJieDian(params).then(res => {
if(res.code == 200) {
// console.log('上级节点')
// console.log(res.data)
this.shangJiJieDianSelect = res.data;
this.treeSelectData = res.data;
}
})
},
get_key(key) {//查询字典
const params = {
key: key
}
return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then(res => {
if(res.code == 200) {
resolve(res.data);
}
})
})
},
zuJianLeiXingSelectChange(data) {//组件类型选择后
if(data) {
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.ruleForm.dynamicForm_ = res.data;
}else {
this.ruleForm.dynamicForm_ = [];
}
}
})
}else {
this.ruleForm.dynamicForm_ = [];
}
},
queryZuJianLeiXingSelect(data) {//组件类型搜索
if (data !== '') {
setTimeout(() => {
this.getZuJianLeiXingSelect(data);
}, 200);
}else {
this.getZuJianLeiXingSelect(null);
}
},
getZuJianLeiXingSelect(elementName) {//组件类型下拉框值
const params = {
state: '1',
type: '1',
elementName: elementName,
archiBelongId: this.archiBelongId
};
queryZiChanJiaGouZuJianLeiXing(params).then(res => {
if(res.code == 200) {
// console.log('组件类型')
// console.log(res.data)
this.zuJianLeiXingSelect = res.data;
}else {
Message({
type: 'error',
message: res.msg
});
}
})
},
moreDelete() {//批量删除
if(this.selectTable.length == 0) {
Message({
type: 'error',
message: '请选择至少一条数据!'
});
}else {
let assetIdArray = [];
this.selectTable.forEach(item => {
assetIdArray.push(item.assetId);
});
const params = {
assetId: assetIdArray,
assetConstant: this.assetConstant,
// archiAssetTypeId: this.archiAssetTypeId,
};
MessageBox.confirm('确定删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning'
}).then(() => {
deleteMoreZiChanJiaGouTable(params).then(res => {
if(res.code == 200) {
this.get_table();
Message({
type: 'success',
message: '删除成功!'
});
}else {
Message({
type: 'error',
message: res.msg
});
}
})
}).catch(() => {
Message({
type: 'info',
message: '已取消'
});
});
}
},
importFile() {//导入
const inpEle = document.createElement("input");
inpEle.type = "file";
inpEle.style.display = "none";
inpEle.addEventListener("change", event => {
// console.log(event.target.files[0]);
var formData = new FormData();
formData.append("file", event.target.files[0]);
formData.append("typeCode", this.assetConstant);
importZhiChanJiaGou(formData).then(res => {
if(res.code == 200) {
this.get_table();
Message({
type: 'success',
message: '导入成功!'
});
}
});
});
inpEle.click();
},
saveTemplateDialog() {//下载模版
this.$refs.form2.validate(valid => {
if(valid) {
// const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm2.let1);
// let parentName = items.assetName;
const params = {
parentId: this.selectValue2,
parentName: this.selectLabel2,
typeId: this.ruleForm2.let2
}
// const params = {
// parentId: '1',
// parentName: '应用架构A',
// typeId: 149
// }
// console.log(params)
exportZhiChanJiaGou(params).then(res => {
let blob = new Blob([res], { type: 'application/octet-stream' });
let url = URL.createObjectURL(blob);
let link = document.createElement('a');
link.href = url;
link.download = '模版文件.xls';
document.body.appendChild(link);
link.click();
this.templateDialog = false;
});
}
});
},
deleteItem(row){//删除
MessageBox.confirm('确定删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning'
}).then(() => {
const params = {
assetId: [row.assetId],
assetConstant: this.assetConstant,
// archiAssetTypeId: this.archiAssetTypeId,
}
deleteMoreZiChanJiaGouTable(params).then(res => {
if(res.code == 200) {
this.get_table();
Message({
type: 'success',
message: '删除成功!'
});
}else{
Message({
type: 'error',
message: res.msg
});
}
});
}).catch(() => {
Message({
type: 'info',
message: '已取消'
});
});
},
select_table_rows(data){//表格的勾选
this.selectTable = data;
},
set_table_height() {//动态设置表格高度
const right_container_height = $(".right_container").height();
this.tableHeight = right_container_height - 260 + 'px';
},
treeClick(data) {//左侧树点击
this.archiBelongId = data.archiBelongId;
this.assetConstant = data.assetConstant;
// this.archiAssetTypeId = data.viewId;
this.getZuJianLeiXingSelect(null);
this.get_table();
},
getTreeData() {//查询左侧树
getArchiViewManage({}).then(res => {
if(res.code == 200) {
this.treeDefaultExpand = [res.data[0].viewId];
this.currentNodekey = res.data[0].viewId;
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey);
});
res.data.map(item => {
item.subList = [];
switch(item.viewName){
case '安全架构':
item['assetConstant'] = 'ARCHI_SAFE';
item['archiBelongId'] = 5;
break;
case '技术架构':
item['assetConstant'] = 'ARCHI_TECHNOLOGY';
item['archiBelongId'] = 4;
break;
case '数据架构':
item['assetConstant'] = 'ARCHI_DATA';
item['archiBelongId'] = 3;
break;
case '应用架构':
item['assetConstant'] = 'ARCHI_APPLICATION';
item['archiBelongId'] = 2;
break;
case '业务架构':
item['assetConstant'] = 'ARCHI_BUSINESS';
item['archiBelongId'] = 1;
break;
}
});
// res.data.map(item => {
// switch(item.viewName){
// case '安全架构':
// item.subList.map(item2 => {
// item2['assetConstant'] = 'ARCHI_SAFE';
// item2['archiBelongId'] = 5;
// })
// break;
// case '技术架构':
// item.subList.map(item2 => {
// item2['assetConstant'] = 'ARCHI_TECHNOLOGY';
// item2['archiBelongId'] = 4;
// })
// break;
// case '数据架构':
// item.subList.map(item2 => {
// item2['assetConstant'] = 'ARCHI_DATA';
// item2['archiBelongId'] = 3;
// })
// break;
// case '应用架构':
// item.subList.map(item2 => {
// item2['assetConstant'] = 'ARCHI_APPLICATION';
// item2['archiBelongId'] = 2;
// })
// break;
// case '业务架构':
// item.subList.map(item2 => {
// item2['assetConstant'] = 'ARCHI_BUSINESS';
// item2['archiBelongId'] = 1;
// })
// break;
// }
// });
this.treeData[0].subList = res.data;
this.archiBelongId = res.data[0].archiBelongId;
this.assetConstant = res.data[0].assetConstant;
// this.archiAssetTypeId = res.data[0].viewId;
this.getShangJiJieDianSelect();
this.getZuJianLeiXingSelect(null);
this.getGuanLianZiChanSelectData(null);
this.get_table();
}else {
Message({
type: 'error',
message: res.msg
});
}
});
},
}
}
</script>
......@@ -963,6 +271,19 @@
}
</style>
<style scoped>
.archiAssetsManage{
width: 100%;
}
.archiAssetsManageContainer{
width: 100%;
height: calc(100% - 86px);
display: flex;
}
.topMenuContainer{
width: 100%;
display: flex;
align-items: center;
}
.filter-tree{
width: 300px;
height: 100%;
......@@ -1031,15 +352,6 @@
/deep/ .is-leaf {
background-color: #fff !important;
}
.busiAssetslist{
width: 100%;
/* height: calc(100% - 20px); */
height: 100%;
display: flex;
/* padding-right: 20px;
padding-left: 20px;
padding-bottom: 20px; */
}
.left_container{
width: 20%;
margin-right: 20px;
......@@ -1047,9 +359,9 @@
}
.right_container{
width: 80%;
margin: 20px 20px 0 0;
}
.search_menu{
margin-top: 20px;
margin-right: 20px;
display: flex;
justify-content: space-between;
......
src/views/archiAssetVisualShow/index.vue
......@@ -7,7 +7,7 @@
:props="{ children: 'subList', label: 'assetName', id: 'assetId' }"
default-expand-all
node-key="assetId"
@check="treeCheckChange"
@node-click="treeClick"
ref="tree">
</el-tree>
<div class="right_container">
......@@ -30,28 +30,39 @@ export default {
},
data() {
return {
treeData: []
treeData: [
{ assetId: 'BUSI', assetName: '业务架构', subList: [] },
{ assetId: 'APP', assetName: '应用架构', subList: [] },
{ assetId: 'DATA', assetName: '数据架构', subList: [] },
{ assetId: 'TECH', assetName: '技术架构', subList: [] },
{ assetId: 'SAFE', assetName: '安全架构', subList: [] }
]
};
},
mounted(){
this.getTreeData();
this.getTreeData('BUSI');
},
methods: {
getTreeData() {//查询左侧树
getTreeData(type) {//查询左侧树
const params = {
"assetName": null,
"versionId": null
"assetEnum": type
}
archiIntelligenceSearchTree(params).then(res => {
if(res.code == 200) {
this.treeData = res.data;
this.treeData.forEach(item => {
if(item.assetId == type) {
item.subList = res.data;
}
})
}
});
},
treeClick(data, node, e) {//树点击的时候
// console.log(data.assetId);
const type = [ 'BUSI', 'APP', 'DATA', 'TECH', 'SAFE' ];
if(type.includes(data.assetId)) {
this.getTreeData(data.assetId);
}
}
}
}
......
src/views/documentEdit/index.vue 0 → 100644
<template>
<div class="documentEdit">
<div class="left_container">
<div style="text-align: left;margin-left: 10px;">{{ docTitle }}</div>
<el-tree
class="filter-tree"
:data="treeData"
:highlight-current="true"
:props="{ children: 'children', label: 'docTitle', id: 'docTitleId' }"
default-expand-all
node-key="docTitleId"
@node-click="treeClick"
ref="tree">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-dropdown @command="(command) => handleCommand(command, data)">
<span class="el-dropdown-link">
<i class="el-icon-more"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="1">添加章节</el-dropdown-item>
<el-dropdown-item command="2">添加子章节</el-dropdown-item>
<el-dropdown-item command="3">复制章节</el-dropdown-item>
<el-dropdown-item command="4">删除章节</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</span>
</el-tree>
</div>
<div class="right_container">
<el-card class="box-card" style="height: 98%;">
</el-card>
</div>
</div>
</template>
<script>
import {
queryDocumentCatalog,
getDianXingAnLiSelectData
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
export default {
name: 'documentEdit',
components: {
},
data() {
return {
docTitle: null,
treeData: []
};
},
mounted(){
this.getDocCatalog();
},
methods: {
handleCommand(type, data) {
console.log(type)
console.log(data)
},
getDocCatalog() {
const params = {
docId: '111'
}
queryDocumentCatalog(params).then(res => {
console.log(res)
if(res.code == 200) {
this.docTitle = res.data.docName;
this.treeData = res.data.klReportDocStructureParserList;
}
})
},
treeClick(data) {//左侧树点击
console.log(data)
},
}
}
</script>
<style scoped>
.documentEdit{
width: 100%;
height: 100%;
display: flex;
}
.left_container{
width: 20%;
margin-right: 20px;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.right_container{
width: 80%;
margin: 20px 20px 0 0;
}
/deep/ .is-leaf {
background-color: #fff !important;
}
</style>
\ No newline at end of file
src/views/projectInfoManage/index.vue
......@@ -551,7 +551,10 @@ export default {
this.ruleForm.let4 = null;
this.selectRow = [];
this.selectRow3 = [];
this.tableData4.forEach(item => {
item.fileList = [];
item.fileArray = [];
});
});
},
editItem(row) {//编辑
......@@ -577,7 +580,9 @@ export default {
}]
this.ruleForm.let4 = row.prjName;
}
if(row.filesValue) {
let filesValue = JSON.parse(row.filesValue);
if(filesValue.length > 0) {
this.tableData4.forEach((item, index) => {
item.fileList = filesValue[index].fileUrl ? [
{
......@@ -598,6 +603,8 @@ export default {
}
] : [];
});
}
}
this.prjId = row.prjId;
},
open_add_dialog2() {//打开选择系统窗口
......
src/views/report-template-relative-use/index.vue
......@@ -268,7 +268,7 @@ export default {
this.deptCode_ = row.deptCode;
},
editDocItem(){//编辑文档
this.$router.push( `/main/documentEdit`, () => {}, () => {} );
},
deleteItem(row) {//删除
MessageBox.confirm('确定删除?', '提示', {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!