Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 3e31709b by liuyong
Options

修改画布

1 parent 597aa4c2
Inline Side-by-side
Showing with 1986 additions and 447 deletions
public/drawio/js/diagramly/EditorUi.js
......@@ -4044,7 +4044,20 @@
title.style.paddingRight = (buttons.childNodes.length * btnWidth) + 'px';
this.editor.fireEvent(new mxEventObject('libraryLoaded'));
if($(title).text() == '便笺本?') {
$("img[valign='absmiddle']").eq(2).css('display', 'none');//二次开发，隐藏便签本的删除图标
}else {
$("img[valign='absmiddle']").eq(0).css('display', 'none');//二次开发，隐藏标准图元的添加图标
$("img[valign='absmiddle']").eq(1).css('display', 'none');//二次开发，隐藏标准图元的编辑图标
$("img[valign='absmiddle']").eq(2).css('display', 'none');//二次开发，隐藏标准图元的删除图标
}
if($(title).text() == '业务架构') {
title.style.borderTop = '2px solid #ccc';
}
if($(title).text() == '安全架构') {
title.style.borderBottom = '2px solid #ccc';
}
};
/**
......
public/drawio/js/grapheditor/Sidebar.js
......@@ -2189,14 +2189,19 @@ Sidebar.prototype.createTitle = function(label)
var elt = document.createElement('a');
elt.setAttribute('title', mxResources.get('sidebarTooltip'));
elt.className = 'geTitle';
console.log(label)
//二次开发，设置样式--------------------开始
if(label == '架构元素关系') {
elt.style.borderTop = '2px solid #ccc';
elt.style.borderBottom = '2px solid #ccc';
}else if(label == '安全架构'){
// elt.style.borderTop = '2px solid #ccc';
}else {
elt.style.border = 'none';
}
//二次开发，设置样式--------------------结束
mxUtils.write(elt, label);
return elt;
};
......
src/api/index.js
......@@ -221,6 +221,11 @@ export function getDianXingAnLiSelectData(params) {
// return post('/shared/vi/dict/gDictByKey', params);
return post('/file/dict/gDictByKey', params);
}
//所有下拉值
export function gAllDictKey(params) {
// return post('/shared/vi/dict/gDictByKey', params);
return post('/file/dict/gAllDictKey', params);
}
// 典型案例库管理-导出
export function exportFileDianXingAnLiSelectData(params) {
// return download('/knowledge/vi/excel/etTc', params);
......@@ -366,7 +371,40 @@ export function getComCenterServeList(params) {
export function getComCenterServeDetail(params) {
return post('/network/arc-aby-iy/', params);
}
// 资产架构表格
// 资产架构，表格
export function getZiChanJiaGouTable(params) {
return post('/network/arc-ast-cn/', params);
}
// 资产架构编辑
export function editZiChanJiaGouTable(params) {
return post('/network/arc-ast-cn/upd', params);
}
// 资产架构，删除，批量删除
export function deleteMoreZiChanJiaGouTable(params) {
return post('/network/arc-ast-cn/delBatch', params);
}
// 资产架构，新增
export function addMoreZiChanJiaGouTable(params) {
return post('/network/arc-ast-cn/ad', params);
}
// 资产架构，上级节点
export function queryZiChanJiaGouShangJiJieDian(params) {
return post('/network/framework/treeForNode', params);
}
// 资产架构，组件类型
export function queryZiChanJiaGouZuJianLeiXing(params) {
return post('/network/ele/archi-ele-list', params);
}
// 资产架构，组件类型选择后查询表单
export function queryZuJianLeiXingBelongForm(params) {
return post('/network/ma-ml-dicy/proy-list', params);
}
// 资产架构，模版下载
export function exportZhiChanJiaGou(params) {
return download('/network/framework/execlTemplate', params);
}
// 资产架构，导入
export function importZhiChanJiaGou(params) {
return download('/network/framework/easyExeclImport', params);
}
src/directive/index.js
......@@ -32,7 +32,7 @@ export default function initDirective(vue) {
el.addEventListener('input', function (event) {
// 获取输入的值
const value = event.target.value;
console.log(value)
// 使用正则表达式检测特殊字（根据需要匹配相应限制字符）
const regex = /(?:')|(?:-- )|(\/\*(?:.|[\n\r])*?\*\/)|(\b(select|update|and|or|delete|insert|truncate|char|into|substr|ascii|declare|exec|count|master|into|drop|execute)\b)/i;
// 如果输入值包含特殊字符，则替换为空格
......
src/router/index.js
......@@ -135,6 +135,11 @@ const routes = [
name: 'comCenterServeList',
component: () => import('@/views/comCenterServeList/index.vue'),
},
{
path: '/main/currentAssetsList',//现状架构资产管理
name: 'currentAssetsList',
component: () => import('@/views/current-assets-list/index.vue'),
},
]
}
]
......
src/views/Main/index.vue
......@@ -88,7 +88,7 @@
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">企业中台服务清单</span>
</div>
<div class="menu_1_item_subtitle">
<div class="menu_1_item_subtitle" @click="jumpPage('总体架构资产设计与维护', '总体架构资产维护', '现状架构资产管理')">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">现状架构资产管理</span>
</div>
......@@ -544,6 +544,10 @@
this.$router.push( '/main/busiAssetslist', () => {}, () => {} );
this.visible1 = false;
break;
case '现状架构资产管理':
this.$router.push( '/main/currentAssetsList', () => {}, () => {} );
this.visible1 = false;
break;
case '在线文档编制':
this.$router.push( '/main/doc-demo', () => {}, () => {} );
break;
......
src/views/archi-asset-manage/index.vue
<template>
<div class="typicalExampleManage">
<div class="table_container">
<div class="archiAssetManage">
<div class="left_container">
<el-tree
class="filter-tree"
:data="treeData"
:highlight-current="true"
:props="{ children: 'children', label: 'name', id: 'belongId' }"
default-expand-all
node-key="belongId"
: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-model="params.assetName" placeholder="请输入内容" class="search_item"></el-input>
<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-model="params.createMan" placeholder="请输入内容" class="search_item"></el-input>
<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.archiAssetType" clearable placeholder="请选择" class="search_item">
<el-option v-for="item in zuJianLeiXingSelect" :key="item.elementId" :label="item.elementName" :value="item.elementId"></el-option>
</el-select>
</div>
</div>
<div class="search_menu_btn_container">
<div class="query_btn" @click="getList">
<div class="query_btn" @click="search_table">
<img class="btn_icon" src="@/assets/archi-ele-list/search.png" alt="" />
<p>查询</p>
</div>
......@@ -24,27 +44,36 @@
</div>
</div>
<div class="search_btn">
<el-button type="primary" size="medium" icon="el-icon-document-add" @click="operate('add')">新建</el-button>
<!-- <el-button type="primary" size="medium" icon="el-icon-delete" @click="operate('delMultiple')">删除</el-button>
<el-button type="primary" size="medium" icon="el-icon-plus" @click="exportFile">导出</el-button> -->
<!-- <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>
<el-table :height="tableHeight" @selection-change="handleSelectionChange" v-loading="loading" :data="tableData" stripe border>
</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="业务组件名称" align="center"></el-table-column>
<el-table-column prop="assetType" label="业务组件类型" align="center">
<template slot-scope="scope">
<span >{{dicObj.eleLtId[scope.row.assetType]}}</span>
</template>
</el-table-column>
<el-table-column prop="parentAssetName" label="上级业务组件" 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="archiAssetType" 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="260" align="center">
<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="operate('edit',scope.row)">编辑</el-button>
<el-button class="shanChu_btn" icon="el-icon-delete" size="mini" @click="operate('del',scope.row)">删除</el-button>
<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>
......@@ -62,364 +91,430 @@
</div>
<el-dialog
:title="title"
:visible.sync="add_dialog"
:title="is_add_edit == 'add' ? '新建架构' : '编辑架构'"
:visible.sync="addDialog"
:center="false"
width="60%">
<div class="add_dialog_content">
<div class="add_dialog_content">
<el-form :model="formData" ref="form">
: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="tcName">
<el-input v-model="formData.tcName"></el-input>
<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="tcType">
<el-select v-model="formData.tcType" placeholder="请选择">
<el-option v-for="item in selectData1" :key="item.label" :label="item.label" :value="item.value"></el-option>
<el-form-item label="上级节点:" prop="let2">
<el-select @change="selectFun" 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-select>
</el-form-item>
<el-form-item label="项目类型:" prop="prjType">
<el-select v-model="formData.prjType" placeholder="请选择">
<el-option v-for="item in selectData3" :key="item.label" :label="item.label" :value="item.value"></el-option>
<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.elementId" :label="item.elementName" :value="item.elementId"></el-option>
</el-select>
</el-form-item>
<el-form-item label="建设内容:" prop="buildContent">
<el-input v-model="formData.buildContent"></el-input>
<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="problemType">
<el-select v-model="formData.problemType" placeholder="请选择">
<el-option v-for="item in selectData2" :key="item.label" :label="item.label" :value="item.value"></el-option>
</el-select>
<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="problemLevel">
<el-select v-model="formData.problemLevel" placeholder="请选择">
<el-option v-for="item in selectData4" :key="item.label" :label="item.label" :value="item.value"></el-option>
<el-form-item class="dynamicFormClass" v-for="(item, index) in ruleForm.dynamicForm" :key="index" :label="item.cnName+':'" :prop="item.fieldName">
<template v-if="item.controlType == 0">
<el-input placeholder="请输入内容" v-no-backslash v-model="item.defaultValue" maxlength="100"></el-input>
</template>
<template v-else-if="item.controlType == 1">
<el-input placeholder="请输入内容" v-no-backslash v-model="item.defaultValue" type="textarea" :rows="3" maxlength="200" show-word-limit></el-input>
</template>
<template v-else>
<el-select clearable v-model="item.defaultValue">
<el-option v-for="item2 in item.propertyValue" :key="item2.elementId" :label="item2.elementName" :value="item.elementId"></el-option>
</el-select>
</el-form-item>
<el-form-item class="cross1" label="架构详情:" prop="archiDetail">
<el-input type="textarea" v-model="formData.archiDetail" maxlength="200" show-word-limit></el-input>
</el-form-item>
<el-form-item class="cross1" label="问题描述:" prop="problemContent">
<el-input type="textarea" v-model="formData.problemContent" maxlength="200" show-word-limit></el-input>
</template>
</el-form-item>
</div>
</el-form>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="operate('create')">确定</el-button>
<el-button @click="add_dialog = false">取消</el-button>
<el-button class="greenButton" @click="saveDialog">确定</el-button>
<el-button @click="cancelDialog">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
getArchiAssetManageList,
getArchiAssetManageAdd,
getArchiAssetManageUpdate,
getEleList,
getDianXingAnLiSelectData,
getTypicalExampleList,
getTypicalExampleAdd,
getTypicalExampleUpdate,
getTypicalExampleDel,
getTypicalExampleExcel,
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
import Drawio from '@/components/drawio.vue';
import {
query_jia_gou_gui_shu,
getZiChanJiaGouTable,
editAndDeleteZiChanJiaGouTable,
deleteMoreZiChanJiaGouTable,
addMoreZiChanJiaGouTable,
queryZiChanJiaGouShangJiJieDian,
queryZiChanJiaGouZuJianLeiXing,
queryZuJianLeiXingBelongForm
} from '@/api/index.js';
import $ from 'jquery';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'TypicalExampleManage',
export default {
name: 'ArchiAssetManage',
components: {
Drawio
},
watch: {
},
data() {
return {
tableData: [],
add_dialog: false,
title: "",
loading: false,
selectList: [],
selectData1: [
{
label: "移动应用典型案例",
value: 1,
},
{
label: "数据模型典型案例",
value: 2,
},
{
label: "数据中台典型案例",
value: 3,
},
],
selectData2: [
{
label: "一致性",
value: 1,
},
{
label: "架构遵从",
value: 2,
},
{
label: "重复风险",
value: 3,
ruleForm: {
let1: null,
let2: null,
let3: null,
let4: 0,
let5: '显示',
dynamicForm: []
},
rules: {
let1: [
{ required: true, message: '请输入架构组件名称', trigger: 'blur' },
],
selectData3: [
{
label: "暂时未例举",
value: 1,
},
let3: [
{ required: true, message: '请选择节点类型', trigger: 'change' },
],
selectData4: [
{
label: "一级",
value: 1,
},
{
label: "二级",
value: 2,
searchParams: {
assetName: null,
createMan: null,
archiAssetType: null,
assetConstant: null,
},
treeData: [
{
label: "三级",
value: 3,
},
belongId: '1',
name: '总体架构资产',
children: []
}
],
params: {
current: 1,
pageSize: 10,
assetName: "",
createMan: "",
},
tableHeight: null,
selectTable: [],
loading: false,
tableData: [],
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 0, //总条数
},
formData: {
tcName: '',
tcType: '',
prjType: '',
buildContent: '',
problemType: '',
problemLevel: '',
problemContent: '',
archiDetail: "",
},
tableHeight: null,
dicObj: {
tcType: {
// 1: "在库",
// 2: "出库",
// 3: "出库",
},
prjType: {},
problemType: {},
problemLevel: {},
eleLtId: {},
total: 0 //总条数
},
addDialog: false,
currentNodekey: null,
is_add_edit: 'add',
zuJianLeiXingSelect: [],
belongId: null,
shangJiJieDianSelect: [],
};
},
mounted(){
this.getTreeData();
window.addEventListener('resize', () => {
this.set_table_height();
})
this.set_table_height();
// 获取元素列表
this.getYuansuList();
// 初始化查询列表
this.getList();
},
methods: {
// 查询列表
getList() {
getArchiAssetManageList(this.params).then(res => {
if (res.code == 200) {
saveDialog() {//弹框保存
this.$refs.form.validate(valid => {
if(valid) {
console.log(this.ruleForm)
// this.addDialog = false;
}
});
},
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.archiAssetType = 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 = {
"assetName": this.searchParams.assetName,
"createMan": this.searchParams.createMan,
"archiAssetType": this.searchParams.archiAssetType,
"assetConstant": this.searchParams.assetConstant,
"current": this.pager.current,
"pageSize": this.pager.size,
};
this.loading = true;
getZiChanJiaGouTable(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 {
this.tableData = [];
}
})
},
add() {//新建
this.addDialog = true;
this.is_add_edit = 'add';
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.dynamicForm = [];
});
},
// 重置
reset() {
this.params = {
current: 1,
pageSize: 10,
assetName: "",
createMan: "",
editItem(row){//编辑
this.addDialog = true;
this.is_add_edit = 'edit';
},
selectFun(data) {//上级节点选择
console.log(data)
console.log(this.shangJiJieDianSelect)
},
getShangJiJieDianSelect(archiType, belongId) {//上级节点下拉框值
const params = {
archiType: archiType,
parentAssetId: belongId,
};
queryZiChanJiaGouShangJiJieDian(params).then(res => {
if(res.code == 200) {
this.shangJiJieDianSelect = res.data;
}
})
},
// 所有操作
operate(type,item){
this.openType = type;
if (type == "add") {
this.add_dialog = true;
this.title = "新建案例";
this.resetForm();
}else if (type == "edit") {
this.add_dialog = true;
this.title = "编辑案例";
this.formData = item;
this.formData.tcType = String(this.formData.tcType);
this.formData.problemType = String(this.formData.problemType);
this.formData.prjType = String(this.formData.prjType);
this.formData.problemLevel = String(this.formData.problemLevel);
}else if (type == "create") {
if (this.formData.ktcId) {
// 编辑保存
getTypicalExampleUpdate(this.formData).then(res => {
if (res.code == 200) {
this.$message.success("保存成功");
this.add_dialog = false;
this.getList();
}else{
this.add_dialog = false;
this.$message.error(res.msg);
ZuJianLeiXingSelectChange(data) {//组件类型选择后
const params = {
type: '1',
typeId: data,
};
queryZuJianLeiXingBelongForm(params).then(res => {
if(res.code == 200) {
if(res.data.length > 0) {
this.ruleForm.dynamicForm = res.data;
}else {
this.ruleForm.dynamicForm = [];
}
});
}else{
// 新建保存
getTypicalExampleAdd(this.formData).then(res => {
if (res.code == 200) {
this.$message.success("保存成功");
this.add_dialog = false;
this.getList();
}else{
this.add_dialog = false;
this.$message.error(res.msg);
}
});
})
},
queryZuJianLeiXingSelect(data) {//组件类型搜索
if (data !== '') {
setTimeout(() => {
this.getZuJianLeiXingSelect(data);
}, 200);
}else {
this.getZuJianLeiXingSelect(null);
}
}else if (type == "del") {
// 删除
this.$confirm("确认删除吗", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
let params = {
ids: [item.ktcId],
},
getZuJianLeiXingSelect(elementName) {//组件类型下拉框值
const params = {
elementName: elementName,
archiBelongId: this.belongId,
};
getTypicalExampleDel(params).then(res => {
if (res.code == 200) {
this.$message.success("删除成功");
this.getList();
}else{
this.$message.error(res.msg);
queryZiChanJiaGouZuJianLeiXing(params).then(res => {
if(res.code == 200) {
this.zuJianLeiXingSelect = res.data;
}else {
Message({
type: 'error',
message: res.msg
});
}
})
},
moreDelete() {//批量删除
if(this.selectTable.length == 0) {
Message({
type: 'error',
message: '请选择至少一条数据!'
});
}).catch(() => {
}else {
let assetIdArray = [];
this.selectTable.forEach(item => {
assetIdArray.push(item.assetId);
});
}else if (type == "delMultiple") {
if (this.selectList.length <= 0) {
this.$message.error("请选择一项进行删除");
return;
}
let params = {
ids: [],
const params = {
assetId: assetIdArray,
assetConstant: this.searchParams.assetConstant,
};
this.selectList.map(item => {
params.ids.push(item.ktcId)
})
this.$confirm("确认批量删除吗", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
MessageBox.confirm('确定删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning'
}).then(() => {
getTypicalExampleDel(params).then(res => {
if (res.code == 200) {
this.$message.success("批量删除成功");
this.getList();
}else{
this.$message.error(res.msg);
}
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: '已取消'
});
});
}
},
// 新建清空表单
resetForm(){
this.formData = {
tcName: '',
tcType: '',
prjType: '',
buildContent: '',
problemType: '',
problemLevel: '',
problemContent: '',
archiDetail: "",
}
importFile() {//导入
const inpEle = document.createElement("input");
inpEle.type = "file";
inpEle.style.display = "none";
inpEle.addEventListener("change", event => {
console.log(event.target.files[0]);
});
inpEle.click();
},
exportFile() {//导出
getTypicalExampleExcel(this.params).then(res => {
let blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
let url = URL.createObjectURL(blob);
let link = document.createElement('a');
link.href = url;
document.body.appendChild(link);
link.click();
})
},
// 获取元素列表
getYuansuList() {
getEleList().then(res => {
if (res.code == 200) {
this.eleList = res.data;
this.eleList.forEach(item=>{
this.dicObj.eleLtId[item.elementId] = item.elementName;
})
console.log(this.dicObj.eleLtId);
},
deleteItem(row){//删除
MessageBox.confirm('确定删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning'
}).then(() => {
const params = {
assetId: [row.assetId],
assetConstant: this.searchParams.assetConstant,
}
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 table_container_height = $(".table_container").height();
const search_menu_height = $(".search_menu").height();
const search_btn_height = $(".search_btn").outerHeight(true);
this.tableHeight = table_container_height - search_menu_height - search_btn_height - 90 + 'px';
const right_container_height = $(".right_container").height();
this.tableHeight = right_container_height - 260 + 'px';
},
selectable(row) {//表格勾选框禁用
if(row.state == 1) {
return false; // 禁用
} else {
return true; //不禁用
treeClick(data) {//左侧树点击
if(data.children) {
return;
}else {
this.searchParams.assetConstant = data.assetConstant;
this.getShangJiJieDianSelect(data.archiType, data.belongId);
this.belongId = data.belongId;
this.getZuJianLeiXingSelect(null, this.belongId);
this.get_table();
}
},
// 表格多选
handleSelectionChange(e) {
this.selectList = e;
},
// 每页条数改变
handleSizeChange(val) {
this.pager.current = 1;
this.params.current = 1;
getTreeData() {//查询左侧树
query_jia_gou_gui_shu({}).then(res => {
if(res.code == 200) {
this.treeData[0].children = res.data;
this.currentNodekey = res.data[0].belongId;
res.data.map(item => {
switch(item.name){
case '安全架构':
item['assetConstant'] = 'safe';
item['archiType'] = 'ARCHI_SAFE';
break;
case '技术架构':
item['assetConstant'] = 'tech';
item['archiType'] = 'ARCHI_TECHNOLOGY';
this.pager.size = val;
this.params.pageSize = val;
this.getList();
},
//当前页码改变
handleCurrentChange(val) {
this.pager.current = val;
this.params.current = val;
this.getList();
break;
case '数据架构':
item['assetConstant'] = 'data';
item['archiType'] = 'ARCHI_DATA';
break;
case '应用架构':
item['assetConstant'] = 'app';
item['archiType'] = 'ARCHI_APPLICATION';
break;
case '业务架构':
item['assetConstant'] = 'busi';
item['archiType'] = 'ARCHI_BUSINESS';
break;
}
})
this.searchParams.assetConstant = res.data[0].assetConstant;
this.getShangJiJieDianSelect(res.data[0].archiType, res.data[0].belongId);
this.belongId = res.data[0].belongId;
this.getZuJianLeiXingSelect(null, this.belongId);
this.get_table();
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey);
});
}else {
}
});
},
}
}
}
</script>
<style>
.confirmClass{
......@@ -430,58 +525,83 @@ export default {
}
</style>
<style scoped>
.form_item_container{
display: flex;
flex-wrap: wrap;
.dynamicFormClass{
width: 100% !important;
}
/deep/ .dynamicFormClass .el-form-item__content {
width: calc(100% - 210px) !important;
text-align: left;
}
.el-form-item{
display: flex;
width: 33%;
}
.cross1{
width: 100%;
}
/deep/ .cross1 > .el-form-item__content{
width: 86.4% !important;
/deep/ .el-form-item__label{
width: 160px;
}
.typicalExampleManage{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.dialog_content_1{
.form_item_container{
display: flex;
justify-content: space-between;
}
.el-button--primary{
background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
flex-wrap: wrap;
}
.add_select_item_icon_container{
margin-top: 10px;
text-align: center;
cursor: pointer;
.greenButton{
background-color: #0D867F;
color: #fff;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-input-group__append{
background-color: #0D867F;
color: #fff;
cursor: pointer;
}
/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: rgb(245,246,250) !important;
}
.archiAssetManage{
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;
}
......@@ -512,47 +632,21 @@ export default {
margin-top: 50px;
margin-bottom: 20px;
}
.el-button--default{
border: 0;
}
.shanChu_btn{
color: #DD6A15;
background-color: #F8EBE2;
}
.tingYong_btn{
color: #DEA82A;
background-color: #FDF6E6;
}
.el-button.is-disabled{
color: #C0C4CC !important;
background-color: #fff !important;
}
.add_btn{
.import_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
width: 86px;
height: 36px;
margin: 0 10px;
background: rgba(13,134,127,0.1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #0D867F;
cursor: pointer;
}
.version_btn{
display: flex;
align-items: center;
justify-content: center;
width: 104px;
height: 32px;
background: rgba(13,134,127,0.1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #0D867F;
cursor: pointer;
margin-left: 15px;
.btn_icon{
margin-right: 10px;
}
.query_btn{
display: flex;
......@@ -581,24 +675,10 @@ export default {
font-size: 14px;
color: #666;
cursor: pointer;
}
.btn_icon{
margin-right: 10px;
}
.table_container{
width: 97%;
height: calc(100% - 40px);
margin-top: 20px;
}
.el-pagination{
margin-top: 30px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F;
}
.greenButton{
background-color: #0D867F;
color: #fff;
.el-button--primary{
background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
}
</style>
\ No newline at end of file
src/views/archi-ele-list/index.vue
......@@ -191,11 +191,26 @@
:before-close="closeGraphDialog"
:close-on-click-modal="false"
width="60%">
<el-tabs type="border-card">
<el-tab-pane label="标准图元" style="height: 400px;">
<el-tabs type="border-card" v-model="tabType" @tab-click="tabsClick">
<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': nameIndex2 == index ? 'rgb(13,134,127)' : '#fff', 'color': nameIndex2 == index ? '#fff' : '#000' }"
v-for="(item, index) in standardGraph"
:key="item.arciBelongId"
@click="showCurrentGraph2(item.arciBelongName, index)">
{{ item.arciBelongName }}
</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': graphIndex2 == index ? '2px solid #0D867F' : 'none','padding': '8px', 'border-radius': '6px' }"
v-for="(item, index) in standardList" :key="item.eleBelongId">
<img @click="clickGraph2(index)" class="tu_biao_icon" :src="item.icon" alt="" />
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="常规图元" style="height: 400px;">
<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' }"
......@@ -233,7 +248,8 @@ import {
add_jia_gou_yuan_su,
version_release_jia_gou_gui_shu,
edit_jia_gou_yuan_su,
query_jia_gou_gui_shu_belong_icon
query_jia_gou_gui_shu_belong_icon,
getDrawioLeftStandardGraph
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
......@@ -245,6 +261,8 @@ export default {
},
data() {
return {
standardGraph: [],
standardList: [],
graph_dialog: false,
ruleForm: {
let1: null,
......@@ -295,9 +313,12 @@ export default {
tableHeight: null,
graphList: [],
nameIndex: 0,
nameIndex2: 0,
graphIndex: -1,
graphIndex2: -1,
selectGraphSrc: '',
selectGraphShape: ''
selectGraphShape: '',
tabType: '标准图元'
};
},
mounted(){
......@@ -311,9 +332,14 @@ export default {
openGraphDialog() {//打开图形选择窗口
this.graph_dialog = true;
this.showCurrentGraph(this.search_select1[0].name, 0);
this.queryDrawioGraph2();
},
tabsClick(data) {
console.log(data)
console.log(this.tabType)
},
save_graph() {//图形选择窗口的保存
if(this.graphIndex == -1) {
if(this.graphIndex == -1 && this.graphIndex2 == -1) {
Message({
type: 'error',
message: '请选择一种图形'
......@@ -321,8 +347,13 @@ export default {
return;
}
this.graph_dialog = false;
if(this.tabType == '标准图元') {
this.selectGraphSrc = this.standardList[this.graphIndex2].icon;
this.selectGraphShape = this.standardList[this.graphIndex2].iconName;
}else {
this.selectGraphSrc = 'data:image/svg+xml;base64,' + this.graphList[this.graphIndex].icon;
this.selectGraphShape = this.graphList[this.graphIndex].graphName;
}
},
closeGraphDialog() {//图形选择窗口的取消
......@@ -330,7 +361,27 @@ export default {
this.nameIndex = 0;
this.graph_dialog = false;
},
showCurrentGraph(name, idx) {//图形选择窗口的文字点击
queryDrawioGraph2() {//查询画布左侧标准图形
getDrawioLeftStandardGraph({}).then(res => {
if(res.code == 200) {
res.data.dataEle.pop();
this.standardGraph = res.data.dataEle;
this.showCurrentGraph2(res.data.dataEle[0].arciBelongName, 0);
}else {
Message({
type: 'error',
message: res.msg
});
}
})
},
showCurrentGraph2(name, idx) {//标准图形选择窗口的文字点击
this.nameIndex2 = idx;
this.graphIndex2 = -1;
const res = this.standardGraph.find(item => item.arciBelongName == name);
this.standardList = res.eleDtos;
},
showCurrentGraph(name, idx) {//常规图形选择窗口的文字点击
this.nameIndex = idx;
this.graphIndex = -1;
const params = {
......@@ -344,9 +395,12 @@ export default {
}
});
},
clickGraph(idx) {////图形选择窗口的图形点击
clickGraph(idx) {//常规图形选择窗口的图形点击
this.graphIndex = idx;
},
clickGraph2(idx) {//标准图形选择窗口的图形点击
this.graphIndex2 = idx;
},
set_table_height() {//动态设置表格高度
const table_container_height = $(".table_container").height();
const search_menu_height = $(".search_menu").height();
......@@ -437,6 +491,12 @@ export default {
});
return;
}
let iconName;
if(this.tabType == '标准图元') {
iconName = this.selectGraphShape;
}else {
iconName = this.selectGraphShape + 'fillColor='+this.ruleForm.let6+';';
}
const params = {
elementName: this.ruleForm.let1,
archiLevelId: this.ruleForm.let2,
......@@ -444,7 +504,7 @@ export default {
content: this.ruleForm.let4,
eaLevel: this.ruleForm.let5,
icon: this.selectGraphSrc,
iconName: this.selectGraphShape + 'fillColor='+this.ruleForm.let6+';',
iconName: iconName,
color: this.ruleForm.let6,
state: 1,
};
......@@ -497,6 +557,12 @@ export default {
});
return;
}
let iconName;
if(this.tabType == '标准图元') {
iconName = this.selectGraphShape;
}else {
iconName = this.selectGraphShape + 'fillColor='+this.ruleForm.let6+';';
}
const params = {
elementName: this.ruleForm.let1,
archiLevelId: this.ruleForm.let2,
......@@ -504,7 +570,7 @@ export default {
content: this.ruleForm.let4,
eaLevel: this.ruleForm.let5,
icon: this.selectGraphSrc,
iconName: this.selectGraphShape + 'fillColor='+this.ruleForm.let6+';',
iconName: iconName,
color: this.ruleForm.let6,
state: 2,
};
......
src/views/busi-assets-list/index.vue
......@@ -4,8 +4,13 @@
<el-tree
class="filter-tree"
:data="treeData"
:props="{ children: 'children', label: 'name', id: 'belongId' }"
: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>
......@@ -13,19 +18,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.let1" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
<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.let2" maxlength="100" placeholder="请输入内容" class="search_item"></el-input>
<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 v-model="searchParams.let3" clearable placeholder="请选择" class="search_item">
<el-option label="已发布" value="1"></el-option>
<el-option label="已停用" value="0"></el-option>
<el-option label="暂存" value="2"></el-option>
<span class="search_title">组件类型</span>
<el-select filterable remote :remote-method="queryZuJianLeiXingSelect" v-model="searchParams.archiAssetType" clearable placeholder="请选择" class="search_item">
<el-option v-for="item in zuJianLeiXingSelect" :key="item.elementId" :label="item.elementName" :value="item.elementId"></el-option>
</el-select>
</div>
</div>
......@@ -57,16 +61,20 @@
<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" :selectable="selectable"></el-table-column>
<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="elementName" label="业务组件名称" align="center"></el-table-column>
<el-table-column prop="archiLevelName" label="业务组件类型" align="center"></el-table-column>
<el-table-column prop="archiBelongName" label="上级业务组件" align="center"></el-table-column>
<el-table-column prop="eaLevel" label="创建人" align="center"></el-table-column>
<el-table-column prop="eaLevel" label="创建时间" align="center"></el-table-column>
<el-table-column label="操作" width="160" align="center">
<el-table-column prop="assetName" label="架构组件名称" width="300" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="archiAssetType" 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>
......@@ -75,28 +83,116 @@
</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="选择图形"
:title="is_add_edit == 'add' ? '新建架构' : '编辑架构'"
:visible.sync="addDialog"
:center="false"
:close-on-click-modal="false"
width="60%">
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 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-select>
</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.elementId" :label="item.elementName" :value="item.elementId"></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 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="ruleForm" ref="form2" style="">
<div class="form_item_container">
<el-form-item label="上级节点:" prop="let2">
<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-select>
</el-form-item>
<el-form-item label="组件类型:" prop="let3">
<el-select v-model="ruleForm2.let2" @change="ZuJianLeiXingSelectChange" filterable remote :remote-method="queryZuJianLeiXingSelect" clearable placeholder="请选择">
<el-option v-for="item in zuJianLeiXingSelect" :key="item.elementId" :label="item.elementName" :value="item.elementId"></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 Drawio from '@/components/drawio.vue';
import {
query_jia_gou_gui_shu,
getArchiViewManage,
getZiChanJiaGouTable,
editZiChanJiaGouTable,
deleteMoreZiChanJiaGouTable,
addMoreZiChanJiaGouTable,
queryZiChanJiaGouShangJiJieDian,
queryZiChanJiaGouZuJianLeiXing,
queryZuJianLeiXingBelongForm,
exportZhiChanJiaGou,
getDianXingAnLiSelectData,
importZhiChanJiaGou
} from '@/api/index.js';
import $ from 'jquery';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'BusiAssetslist',
components: {
......@@ -106,28 +202,61 @@
},
data() {
return {
searchParams: {
templateDialog: false,
ruleForm2: {
let1: null,
let2: null,
},
ruleForm: {
let1: null,
let2: null,
let3: null,
let4: 0,
let5: '显示',
dynamicForm_: [],
archiBelongId: null,
},
rules: {
let1: [
{ required: true, message: '请输入架构组件名称', trigger: 'blur' },
],
let3: [
{ required: true, message: '请选择节点类型', trigger: 'change' },
],
},
searchParams: {
assetName: null,
createMan: null,
archiAssetType: null,
assetConstant: null,
},
treeData: [
{
belongId: '1',
name: '总体架构资产',
children: []
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,
};
},
mounted(){
const id = 2;
this.getTreeData();
window.addEventListener('resize', () => {
this.set_table_height();
......@@ -135,11 +264,297 @@
this.set_table_height();
},
methods: {
saveDialog() {//弹框保存
this.$refs.form.validate(valid => {
if(valid) {
// console.log(this.ruleForm);
let parentAssetName, assetCode, fieldsValue = [], eleName;
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.elementId == this.ruleForm.let3);
eleName = items2.elementName;
if(this.ruleForm.dynamicForm_.length > 0) {
if(this.is_add_edit == 'add') {
this.ruleForm.dynamicForm_.forEach(item => {
fieldsValue.push({
cnName: item.fieldName,
value_: item.value_,
controlType: item.controlType,
dictKey: item.dictKey ? item.dictKey : null
})
})
}else {
this.ruleForm.dynamicForm_.forEach(item => {
fieldsValue.push({
cnName: item.cnName,
value_: item.value_,
controlType: item.controlType,
dictKey: item.dictKey ? item.dictKey : null
})
})
}
}else {
fieldsValue = [{}];
}
const params = {
archiAssetState: 1,
archiBelongId: this.ruleForm.archiBelongId,
assetConstant: this.searchParams.assetConstant,
archiEleId: this.ruleForm.let3,
assetName: this.ruleForm.let1,
assetId: this.is_add_edit == 'add' ? null : this.editId,
parentAssetId: this.ruleForm.let2,
parentAssetName: parentAssetName,
isShow: this.ruleForm.let5 == '显示' ? 1 : 0,
assetConstant: this.searchParams.assetConstant,
fieldsValue: fieldsValue,
assetCode: assetCode,
eleName: eleName
}
if(this.is_add_edit == 'add') {
addMoreZiChanJiaGouTable(params).then(res => {
if(res.code == 200) {
this.addDialog = false;
this.get_table();
}else {
Message({
type: 'error',
message: res.msg
});
}
})
}else {
editZiChanJiaGouTable(params).then(res => {
if(res.code == 200) {
this.addDialog = false;
this.get_table();
}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.archiAssetType = 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 = {
"assetName": this.searchParams.assetName,
"createMan": this.searchParams.createMan,
"archiAssetType": this.searchParams.archiAssetType,
"assetConstant": this.searchParams.assetConstant,
"current": this.pager.current,
"pageSize": this.pager.size,
};
this.loading = true;
getZiChanJiaGouTable(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 {
this.tableData = [];
}
})
},
add() {//新建
this.addDialog = true;
this.is_add_edit = 'add';
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.dynamicForm_ = [];
});
},
editItem(row){//编辑
console.log(row)
this.addDialog = true;
this.is_add_edit = 'edit';
this.ruleForm.let1 = row.assetName;
this.ruleForm.let2 = String(row.parentAssetId);
this.ruleForm.let3 = row.archiEleId;
this.ruleForm.let4 = row.sort;
this.ruleForm.let5 = row.isShow == 1 ? '显示' : '隐藏';
this.editId = row.assetId;
let fieldsValue = row.fieldsValue;
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_;
}
},
moreDelete() {//批量删除
getShangJiJieDianSelect(assetConstant, archiBelongId) {//上级节点下拉框值
const params = {
archiType: assetConstant,
parentAssetId: archiBelongId,
};
queryZiChanJiaGouShangJiJieDian(params).then(res => {
if(res.code == 200) {
console.log('上级节点')
console.log(res.data)
this.shangJiJieDianSelect = 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) {//组件类型选择后
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_ = [];
}
}
})
},
queryZuJianLeiXingSelect(data) {//组件类型搜索
if (data !== '') {
setTimeout(() => {
this.getZuJianLeiXingSelect(data);
}, 200);
}else {
this.getZuJianLeiXingSelect(null);
}
},
getZuJianLeiXingSelect(elementName) {//组件类型下拉框值
const params = {
elementName: elementName,
archiBelongId: this.ruleForm.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.searchParams.assetConstant,
};
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");
......@@ -147,32 +562,157 @@
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.searchParams.assetConstant);
importZhiChanJiaGou(formData).then(res => {
console.log(res);
// let blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// let url = URL.createObjectURL(blob);
// let link = document.createElement('a');
// link.href = url;
// document.body.appendChild(link);
// link.click();
});
});
inpEle.click();
},
exportFile() {//导出
},
editItem(data){//编辑
openDownloadTemplateDialog() {//打开模版下载窗口
this.templateDialog = true;
this.ruleForm2.let1 = null;
this.ruleForm2.let2 = null;
},
saveTemplateDialog() {//下载模版
let parentName;
if(this.ruleForm2.let1) {
const items = this.shangJiJieDianSelect.find(item => item.assetId == this.ruleForm2.let1);
parentName = items.assetName;
}
const params = {
parentId: this.ruleForm2.let1,
parentName: parentName,
typeId: this.ruleForm2.let2
}
exportZhiChanJiaGou(params).then(res => {
console.log(res);
// let blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// let url = URL.createObjectURL(blob);
// let link = document.createElement('a');
// link.href = url;
// document.body.appendChild(link);
// link.click();
});
},
deleteItem(data){//删除
deleteItem(row){//删除
MessageBox.confirm('确定删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning'
}).then(() => {
const params = {
assetId: [row.assetId],
assetConstant: this.searchParams.assetConstant,
}
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 table_container_height = $(".table_container").height();
const search_menu_height = $(".search_menu").height();
const search_btn_height = $(".search_btn").outerHeight(true);
this.tableHeight = table_container_height - search_menu_height - search_btn_height - 90 + 'px';
const right_container_height = $(".right_container").height();
this.tableHeight = right_container_height - 260 + 'px';
},
treeClick(data) {//左侧树点击
if(data.subList) {
return;
}else {
this.searchParams.assetConstant = data.assetConstant;
this.getShangJiJieDianSelect(data.assetConstant, data.archiBelongId);
this.archiBelongId = data.archiBelongId;
this.getZuJianLeiXingSelect(null, this.archiBelongId);
this.get_table();
}
},
getTreeData() {//查询架构归属下拉框值
query_jia_gou_gui_shu({}).then(res => {
getTreeData() {//查询左侧树
getArchiViewManage({}).then(res => {
if(res.code == 200) {
this.treeData[0].children = res.data;
console.log(res.data)
this.treeDefaultExpand = [res.data[0].viewId];
this.currentNodekey = res.data[0].subList[0].viewId;
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey);
});
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.ruleForm.archiBelongId = res.data[0].subList[0].archiBelongId;
this.searchParams.assetConstant = res.data[0].subList[0].assetConstant;
this.getShangJiJieDianSelect(res.data[0].subList[0].assetConstant, res.data[0].subList[0].archiBelongId);
this.getZuJianLeiXingSelect(null, this.ruleForm.archiBelongId);
this.get_table();
}else {
}
......@@ -181,7 +721,77 @@
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.filter-tree{
width: 300px;
height: 100%;
overflow-y: auto;
}
.dynamicFormClass{
width: 100% !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: rgb(245,246,250) !important;
}
.busiAssetslist{
width: 100%;
/* height: calc(100% - 20px); */
......@@ -199,10 +809,9 @@
.right_container{
width: 80%;
}
/deep/ .is-leaf {
background-color: #fff !important;
}
.search_menu{
margin-top: 20px;
margin-right: 20px;
display: flex;
justify-content: space-between;
}
......
src/views/current-assets-list/index.vue 0 → 100644
<template>
<div class="currentAssetsList">
<div class="left_container">
<el-tree
class="filter-tree"
:data="treeData"
:highlight-current="true"
:props="{ children: 'children', label: 'name', id: 'belongId' }"
default-expand-all
node-key="belongId"
: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.archiAssetType" clearable placeholder="请选择" class="search_item">
<el-option v-for="item in zuJianLeiXingSelect" :key="item.elementId" :label="item.elementName" :value="item.elementId"></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>
<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="archiAssetType" 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 @change="selectFun" 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-select>
</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.elementId" :label="item.elementName" :value="item.elementId"></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 class="dynamicFormClass" v-for="(item, index) in ruleForm.dynamicForm" :key="index" :label="item.cnName+':'" :prop="item.fieldName">
<template v-if="item.controlType == 0">
<el-input placeholder="请输入内容" v-no-backslash v-model="item.defaultValue" maxlength="100"></el-input>
</template>
<template v-else-if="item.controlType == 1">
<el-input placeholder="请输入内容" v-no-backslash v-model="item.defaultValue" type="textarea" :rows="3" maxlength="200" show-word-limit></el-input>
</template>
<template v-else>
<el-select clearable v-model="item.defaultValue">
<el-option v-for="item2 in item.propertyValue" :key="item2.elementId" :label="item2.elementName" :value="item.elementId"></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>
</div>
</template>
<script>
import Drawio from '@/components/drawio.vue';
import {
query_jia_gou_gui_shu,
getZiChanJiaGouTable,
editAndDeleteZiChanJiaGouTable,
deleteMoreZiChanJiaGouTable,
addMoreZiChanJiaGouTable,
queryZiChanJiaGouShangJiJieDian,
queryZiChanJiaGouZuJianLeiXing,
queryZuJianLeiXingBelongForm
} from '@/api/index.js';
import $ from 'jquery';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'CurrentAssetsList',
components: {
Drawio
},
watch: {
},
data() {
return {
ruleForm: {
let1: null,
let2: null,
let3: null,
let4: 0,
let5: '显示',
dynamicForm: []
},
rules: {
let1: [
{ required: true, message: '请输入架构组件名称', trigger: 'blur' },
],
let3: [
{ required: true, message: '请选择节点类型', trigger: 'change' },
],
},
searchParams: {
assetName: null,
createMan: null,
archiAssetType: null,
assetConstant: null,
},
treeData: [
{
belongId: '1',
name: '总体架构资产',
children: []
}
],
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: [],
belongId: null,
shangJiJieDianSelect: [],
};
},
mounted(){
this.getTreeData();
window.addEventListener('resize', () => {
this.set_table_height();
})
this.set_table_height();
},
methods: {
saveDialog() {//弹框保存
this.$refs.form.validate(valid => {
if(valid) {
console.log(this.ruleForm)
// this.addDialog = false;
}
});
},
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.archiAssetType = 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 = {
"assetName": this.searchParams.assetName,
"createMan": this.searchParams.createMan,
"archiAssetType": this.searchParams.archiAssetType,
"assetConstant": this.searchParams.assetConstant,
"current": this.pager.current,
"pageSize": this.pager.size,
};
this.loading = true;
getZiChanJiaGouTable(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 {
this.tableData = [];
}
})
},
add() {//新建
this.addDialog = true;
this.is_add_edit = 'add';
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.dynamicForm = [];
});
},
editItem(row){//编辑
this.addDialog = true;
this.is_add_edit = 'edit';
},
selectFun(data) {//上级节点选择
console.log(data)
console.log(this.shangJiJieDianSelect)
},
getShangJiJieDianSelect(archiType, belongId) {//上级节点下拉框值
const params = {
archiType: archiType,
parentAssetId: belongId,
};
queryZiChanJiaGouShangJiJieDian(params).then(res => {
if(res.code == 200) {
this.shangJiJieDianSelect = res.data;
}
})
},
ZuJianLeiXingSelectChange(data) {//组件类型选择后
const params = {
type: '1',
typeId: data,
};
queryZuJianLeiXingBelongForm(params).then(res => {
if(res.code == 200) {
if(res.data.length > 0) {
this.ruleForm.dynamicForm = res.data;
}else {
this.ruleForm.dynamicForm = [];
}
}
})
},
queryZuJianLeiXingSelect(data) {//组件类型搜索
if (data !== '') {
setTimeout(() => {
this.getZuJianLeiXingSelect(data);
}, 200);
}else {
this.getZuJianLeiXingSelect(null);
}
},
getZuJianLeiXingSelect(elementName) {//组件类型下拉框值
const params = {
elementName: elementName,
archiBelongId: this.belongId,
};
queryZiChanJiaGouZuJianLeiXing(params).then(res => {
if(res.code == 200) {
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.searchParams.assetConstant,
};
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]);
});
inpEle.click();
},
exportFile() {//导出
},
deleteItem(row){//删除
MessageBox.confirm('确定删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning'
}).then(() => {
const params = {
assetId: [row.assetId],
assetConstant: this.searchParams.assetConstant,
}
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) {//左侧树点击
if(data.children) {
return;
}else {
this.searchParams.assetConstant = data.assetConstant;
this.getShangJiJieDianSelect(data.archiType, data.belongId);
this.belongId = data.belongId;
this.getZuJianLeiXingSelect(null, this.belongId);
this.get_table();
}
},
getTreeData() {//查询左侧树
query_jia_gou_gui_shu({}).then(res => {
if(res.code == 200) {
this.treeData[0].children = res.data;
this.currentNodekey = res.data[0].belongId;
res.data.map(item => {
switch(item.name){
case '安全架构':
item['assetConstant'] = 'safe';
item['archiType'] = 'ARCHI_SAFE';
break;
case '技术架构':
item['assetConstant'] = 'tech';
item['archiType'] = 'ARCHI_TECHNOLOGY';
break;
case '数据架构':
item['assetConstant'] = 'data';
item['archiType'] = 'ARCHI_DATA';
break;
case '应用架构':
item['assetConstant'] = 'app';
item['archiType'] = 'ARCHI_APPLICATION';
break;
case '业务架构':
item['assetConstant'] = 'busi';
item['archiType'] = 'ARCHI_BUSINESS';
break;
}
})
this.searchParams.assetConstant = res.data[0].assetConstant;
this.getShangJiJieDianSelect(res.data[0].archiType, res.data[0].belongId);
this.belongId = res.data[0].belongId;
this.getZuJianLeiXingSelect(null, this.belongId);
this.get_table();
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey);
});
}else {
}
});
},
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.dynamicFormClass{
width: 100% !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: rgb(245,246,250) !important;
}
.currentAssetsList{
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/metaModelDic/pages/page1.vue
......@@ -172,7 +172,7 @@
:title="title2"
:visible.sync="add_dialog2"
:center="false"
width="40%">
width="50%">
<div class="add_dialog_content">
<el-form :model="formData2" :rules="rules" ref="page1Form">
<div class="form_item_container">
......@@ -188,11 +188,28 @@
<el-form-item class="cross" label="长度:" prop="contentLength">
<el-input v-model="formData2.contentLength" maxlength="100"></el-input>
</el-form-item>
<el-form-item class="cross" label="是否可以为空:" prop="notNull">
<el-radio-group v-model="formData2.notNull">
<el-radio label="0">是</el-radio>
<el-radio label="1">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item class="cross" label="是否显示:" prop="isShow">
<el-radio-group v-model="formData2.isShow">
<el-radio label="0">显示</el-radio>
<el-radio label="1">不显示</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item class="cross" label="控件:" prop="controlType">
<el-select v-model="formData2.controlType" placeholder="请选择" clearable>
<el-option v-for="(item,idnex) in selectTypeList" :key="idnex" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="formData2.controlType == 2" class="cross" label="控件值:" prop="dictKey">
<el-select v-model="formData2.dictKey" placeholder="请选择" clearable>
<el-option v-for="(item,idnex) in controlValueSelect" :key="idnex" :label="item.name" :value="item.typeValue"></el-option>
</el-select>
</el-form-item>
</div>
</el-form>
</div>
......@@ -217,6 +234,7 @@ import {
getYMXZDGLProyDel,
getYMXZDGLProyAdd,
getYMXZDGLProyUpdate,
gAllDictKey
} from "@/api/index.js";
export default {
......@@ -252,6 +270,9 @@ export default {
displayOrder: "",
contentLength: "",
controlType: "",
dictKey: "",
notNull: 0,
isShow: 0,
},
rules: {
fieldName: [
......@@ -296,13 +317,6 @@ export default {
2: "设计层",
3: "实施层",
},
archiBelongId: {
3: "业务架构",
4: "应用架构",
5: "数据架构",
6: "技术架构",
7: "安全架构",
},
controlType: {
0: "单行文本框",
1: "多行文本框",
......@@ -339,6 +353,7 @@ export default {
value: 2,
},
],
controlValueSelect: [],
columnIsShow: false,
editIndex: -1, // 当前编辑行
};
......@@ -366,7 +381,7 @@ export default {
this.get_dialog_select2().then(res2 => {
res.data.records.map(item => {
const result = res2.find(item2 => item2.belongId == item.archiBelongId);
item['archiBelongName'] = result.name;
item['archiBelongName'] = result ? result.name : null;
})
this.tableData = res.data.records;
});
......@@ -511,6 +526,8 @@ export default {
displayOrder: "",
contentLength: "",
controlType: "",
notNull: 0,
isShow: 0,
};
},
......@@ -548,7 +565,11 @@ export default {
});
})
},
queryAllKey() {//查询下拉框值
gAllDictKey().then(res => {
this.controlValueSelect = res.data;
})
},
// 对话表格操作
operateDia( type, scopeRow, index){
switch (type) {
......@@ -560,18 +581,23 @@ export default {
this.$nextTick(() => {
this.$refs.page1Form.resetFields();
});
this.queryAllKey();
break;
// 编辑
case 'edit':
this.add_dialog2 = true;
this.title2 = "编辑字典属性";
this.formData2 = scopeRow;
if(scopeRow.controlType == 2) {
this.queryAllKey();
}
break;
// 保存
case 'save':
this.$refs.page1Form.validate(valid => {
if(valid) {
if (this.formData2.propertyId) {
let params = {
fieldName: this.formData2.fieldName,
cnName: this.formData2.cnName,
......@@ -583,7 +609,11 @@ export default {
typeId: this.formData.typeId,
version: this.formData.version,
dicyId: this.formData.dicyId,
state: this.formData.state,
state: this.formData.state,
dictKey: this.formData2.dictKey,
notNull: this.formData2.notNull,
isShow: this.formData2.isShow,
}
// 编辑保存
getYMXZDGLProyUpdate(params).then(res => {
......@@ -607,7 +637,10 @@ export default {
typeId: this.formData.typeId,
version: this.formData.version,
dicyId: this.formData.dicyId,
state: this.formData.state,
state: this.formData.state,
dictKey: this.formData2.dictKey,
notNull: this.formData2.notNull,
isShow: this.formData2.isShow,
}
// 新建保存
getYMXZDGLProyAdd(params).then(res => {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!