Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 2c64afff by liuyong
Options

修改左侧菜单加载

1 parent 30b5f84a
Inline Side-by-side
Showing with 2094 additions and 41 deletions
public/drawio/js/diagramly/App.js
...@@ -216,6 +216,8 @@ App = function(editor, container, lightbox) ...@@ -216,6 +216,8 @@ App = function(editor, container, lightbox)
const decode_item_icon = (window.atob) ? atob(item_icon) : Base64.decode(item_icon);//svg解码，为字符串 const decode_item_icon = (window.atob) ? atob(item_icon) : Base64.decode(item_icon);//svg解码，为字符串
const svgDocument = new DOMParser().parseFromString(decode_item_icon, 'text/xml');//svg字符串转标签 const svgDocument = new DOMParser().parseFromString(decode_item_icon, 'text/xml');//svg字符串转标签
const svgTag = svgDocument.getElementsByTagName('svg')[0]; const svgTag = svgDocument.getElementsByTagName('svg')[0];
const width = +svgTag.getAttribute('width').split("px")[0];
const height = +svgTag.getAttribute('height').split("px")[0];
const rectTag = svgDocument.getElementsByTagName('rect')[0]; const rectTag = svgDocument.getElementsByTagName('rect')[0];
const pathTag = svgDocument.getElementsByTagName('path')[0]; const pathTag = svgDocument.getElementsByTagName('path')[0];
...@@ -228,9 +230,9 @@ App = function(editor, container, lightbox) ...@@ -228,9 +230,9 @@ App = function(editor, container, lightbox)
// svgTag.setAttribute('a_23a=', '测试'); // svgTag.setAttribute('a_23a=', '测试');
// svgTag.setAttribute('a_123', 'a_123'); // svgTag.setAttribute('a_123', 'a_123');
if(dicys.length > 0) { if(dicys && dicys.length > 0) {
dicys.forEach(item2 => { dicys.forEach(item2 => {
console.log(item2.fieldName) // console.log(item2.fieldName)
// console.log(item2.chineseName) // console.log(item2.chineseName)
// svgTag.setAttribute(encodeURIComponent(item2.fieldName), encodeURIComponent(item2.chineseName)); // svgTag.setAttribute(encodeURIComponent(item2.fieldName), encodeURIComponent(item2.chineseName));
...@@ -244,7 +246,7 @@ App = function(editor, container, lightbox) ...@@ -244,7 +246,7 @@ App = function(editor, container, lightbox)
icon = 'data:image/svg+xml;base64,' + encode_item_icon; icon = 'data:image/svg+xml;base64,' + encode_item_icon;
return icon; return { width, height, icon };
} }
$.ajax({ $.ajax({
method: "post", method: "post",
...@@ -264,10 +266,10 @@ App = function(editor, container, lightbox) ...@@ -264,10 +266,10 @@ App = function(editor, container, lightbox)
if(item2.icon.includes('data')) { if(item2.icon.includes('data')) {
images.push({ images.push({
aspect: "fixed", aspect: "fixed",
data: setIcon(item2.icon, item2.dicys, item2.color), data: setIcon(item2.icon, item2.dicys, item2.color).icon,
h: 256, h: setIcon(item2.icon, item2.dicys, item2.color).height,
title: item2.eleName, title: item2.eleName,
w: 256 w: setIcon(item2.icon, item2.dicys, item2.color).width
}) })
} }
} }
......
public/drawio/js/grapheditor/Format.js
...@@ -1557,37 +1557,8 @@ AttributePanel.prototype.init = function()//二次开发，属性面板内容 ...@@ -1557,37 +1557,8 @@ AttributePanel.prototype.init = function()//二次开发，属性面板内容
// return str2.toString(CryptoJS.enc.Utf8); // return str2.toString(CryptoJS.enc.Utf8);
// } // }
if(cell.style.includes('svg+xml')) {//新增图库的图形
const decode_style = window.atob(cell.style.split("svg+xml,")[1]);//svg解码，为字符串
const svgDocument = new DOMParser().parseFromString(decode_style, 'text/xml');//svg字符串转标签
const svgTag = svgDocument.getElementsByTagName('svg')[0];
const attributeArr = Array.from(svgTag.attributes);
// console.log(attributeArr)
let attrArray = [];
attributeArr.forEach(item => {
if(item.name.includes('attr_')) {
const attr_name = item.name.split("attr_")[1];
const attr_value = Base64.encode(item.value.split("attr_")[1]);
attrArray.push({
attrName: attr_name,
attrValue: attr_value,
})
}
})
// console.log(attrArray);
// const attributeArr = Array.from(objectTag.attributes);
// attributeArr.forEach(item => {
// this.addListPanel(item.name, item.value);
// })
}
// var ss = this.editorUi.getSelectionState(); // var ss = this.editorUi.getSelectionState();
const objectTag = cell.value; const objectTag = cell.value;
// console.log(objectTag); // console.log(objectTag);
...@@ -1676,6 +1647,34 @@ AttributePanel.prototype.init = function()//二次开发，属性面板内容 ...@@ -1676,6 +1647,34 @@ AttributePanel.prototype.init = function()//二次开发，属性面板内容
button_container.appendChild(save_button); button_container.appendChild(save_button);
this.container.appendChild(button_container); this.container.appendChild(button_container);
if(cell.style.includes('svg+xml')) {//新增图库的图形
const decode_style = window.atob(cell.style.split("svg+xml,")[1]);//svg解码，为字符串
const svgDocument = new DOMParser().parseFromString(decode_style, 'text/xml');//svg字符串转标签
const svgTag = svgDocument.getElementsByTagName('svg')[0];
const svgAttr = Array.from(svgTag.attributes);
// console.log(svgAttr)
let attrArray = [];
svgAttr.forEach(item => {
if(item.name.includes('attr_')) {
const attr_name = item.name.split("attr_")[1];
const attr_value = Base64.decode(item.value.split("attr_")[1]);
attrArray.push({
name: attr_name,
value: attr_value,
})
}
})
console.log(attrArray);
if(attrArray.length > 0) {
attrArray.forEach(item => {
this.addListPanel(item.name, item.value);
})
}
}
if(typeof objectTag == 'object') {//意思是此节点是有属性的 if(typeof objectTag == 'object') {//意思是此节点是有属性的
const attributeArr = Array.from(objectTag.attributes); const attributeArr = Array.from(objectTag.attributes);
attributeArr.shift();//去掉节点名称 attributeArr.shift();//去掉节点名称
......
src/router/index.js
...@@ -69,6 +69,36 @@ const routes = [ ...@@ -69,6 +69,36 @@ const routes = [
path: '/main/metaModelListDetails/:id',//元模型管理详情 path: '/main/metaModelListDetails/:id',//元模型管理详情
name: 'metaModelListDetails', name: 'metaModelListDetails',
component: () => import('@/views/meta-model-list/details.vue'), component: () => import('@/views/meta-model-list/details.vue'),
},
{
path: '/main/techPoliticsFabric',//技术政策结构化
name: 'techPoliticsFabric',
component: () => import('@/views/tech-politics-fabric/index.vue'),
},
{
path: '/main/techPoliticsRelativeUse',//技术政策库关联使用
name: 'techPoliticsRelativeUse',
component: () => import('@/views/tech-politics-relative-use/index.vue'),
},
{
path: '/main/reportTemplateFabric',//报告模板结构化
name: 'reportTemplateFabric',
component: () => import('@/views/report-template-fabric/index.vue'),
},
{
path: '/main/typicalExampleManage',//典型案例库管理
name: 'typicalExampleManage',
component: () => import('@/views/typical-example-manage/index.vue'),
},
{
path: '/main/typicalExampleRelativeUse',//典型案例库关联使用
name: 'typicalExampleRelativeUse',
component: () => import('@/views/typical-example-relative-use/index.vue'),
},
{
path: '/main/totalArchiPropertyDocument',//总体架构资产文档库
name: 'totalArchiPropertyDocument',
component: () => import('@/views/total-archi-property-document/index.vue'),
} }
// { // {
// path: '/main/YuanMoXingGuanLiTable',//drawio跳转的表格 // path: '/main/YuanMoXingGuanLiTable',//drawio跳转的表格
......
src/views/Main/index.vue
...@@ -390,6 +390,7 @@ ...@@ -390,6 +390,7 @@
<el-popover <el-popover
placement="bottom" placement="bottom"
width="600" width="600"
v-model="visible5"
class="menu_item" class="menu_item"
style="cursor: pointer;position: relative;" style="cursor: pointer;position: relative;"
trigger="hover"> trigger="hover">
...@@ -412,11 +413,11 @@ ...@@ -412,11 +413,11 @@
<span style="margin-left: 5px;">技术政策库</span> <span style="margin-left: 5px;">技术政策库</span>
</div> </div>
<div class="menu_1_item_subtitle"> <div class="menu_1_item_subtitle" @click="jumpPage('架构知识库', '技术政策库', '技术政策结构化')">
<img src="@/assets/main/3img.png" alt=""> <img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">技术政策结构化</span> <span style="margin-left: 5px;">技术政策结构化</span>
</div> </div>
<div class="menu_1_item_subtitle"> <div class="menu_1_item_subtitle" @click="jumpPage('架构知识库', '技术政策库', '技术政策库关联使用')">
<img src="@/assets/main/3img.png" alt=""> <img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">技术政策库关联使用</span> <span style="margin-left: 5px;">技术政策库关联使用</span>
</div> </div>
...@@ -428,7 +429,7 @@ ...@@ -428,7 +429,7 @@
<span style="margin-left: 5px;">报告模板库</span> <span style="margin-left: 5px;">报告模板库</span>
</div> </div>
<div class="menu_1_item_subtitle"> <div class="menu_1_item_subtitle" @click="jumpPage('架构知识库', '报告模板库', '报告模板结构化')">
<img src="@/assets/main/3img.png" alt=""> <img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">报告模板结构化</span> <span style="margin-left: 5px;">报告模板结构化</span>
</div> </div>
...@@ -444,15 +445,15 @@ ...@@ -444,15 +445,15 @@
<span style="margin-left: 5px;">典型案例库</span> <span style="margin-left: 5px;">典型案例库</span>
</div> </div>
<div class="menu_1_item_subtitle"> <div class="menu_1_item_subtitle" @click="jumpPage('架构知识库', '典型案例库', '典型案例库管理')">
<img src="@/assets/main/3img.png" alt=""> <img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">典型案例库管理</span> <span style="margin-left: 5px;">典型案例库管理</span>
</div> </div>
<div class="menu_1_item_subtitle"> <div class="menu_1_item_subtitle" @click="jumpPage('架构知识库', '典型案例库', '典型案例库关联使用')">
<img src="@/assets/main/3img.png" alt=""> <img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">典型案例库关联使用</span> <span style="margin-left: 5px;">典型案例库关联使用</span>
</div> </div>
<div class="menu_1_item_subtitle"> <div class="menu_1_item_subtitle" @click="jumpPage('架构知识库', '典型案例库', '总体架构资产文档库')">
<img src="@/assets/main/3img.png" alt=""> <img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">总体架构资产文档库</span> <span style="margin-left: 5px;">总体架构资产文档库</span>
</div> </div>
...@@ -493,6 +494,7 @@ ...@@ -493,6 +494,7 @@
data() { data() {
return { return {
visible1: false, visible1: false,
visible5: false,
breadcrumb1: '总体架构资产设计与维护', breadcrumb1: '总体架构资产设计与维护',
breadcrumb2: '架构元模型管理', breadcrumb2: '架构元模型管理',
breadcrumb3: '架构元素管理', breadcrumb3: '架构元素管理',
...@@ -550,6 +552,35 @@ ...@@ -550,6 +552,35 @@
case '在线文档编制': case '在线文档编制':
this.$router.push( '/main/doc-demo', () => {}, () => {} ); this.$router.push( '/main/doc-demo', () => {}, () => {} );
break; break;
case '技术政策结构化':
this.$router.push( '/main/techPoliticsFabric', () => {}, () => {} );
this.visible5 = false;
break;
case '技术政策库关联使用':
this.$router.push( '/main/techPoliticsRelativeUse', () => {}, () => {} );
this.visible5 = false;
break;
case '报告模板结构化':
this.$router.push( '/main/reportTemplateFabric', () => {}, () => {} );
this.visible5 = false;
break;
case '典型案例库管理':
this.$router.push( '/main/typicalExampleManage', () => {}, () => {} );
this.visible5 = false;
break;
case '典型案例库关联使用':
this.$router.push( '/main/typicalExampleRelativeUse', () => {}, () => {} );
this.visible5 = false;
break;
case '总体架构资产文档库':
this.$router.push( '/main/totalArchiPropertyDocument', () => {}, () => {} );
this.visible5 = false;
break;
} }
} }
} }
......
src/views/report-template-fabric/index.vue 0 → 100644
<template>
<div class="reportTemplateFabric">
<div class="table_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="query_item3" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item">
<span class="search_title">模板类型</span>
<el-select v-model="query_item1" placeholder="请选择" class="search_item">
<el-option v-for="item in search_select1" :key="item.belongId" :label="item.name" :value="item.belongId"></el-option>
</el-select>
</div>
<div class="search_menu_item">
<span class="search_title">创建时间</span>
<el-date-picker
v-model="query_item4"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
</div>
<div class="search_menu_btn_container">
<div class="query_btn" @click="get_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">
<el-button type="primary" icon="el-icon-document-add">新建</el-button>
<el-button type="danger">删除</el-button>
</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="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="content" label="创建时间" align="center"></el-table-column>
<el-table-column prop="version" label="版本" align="center"></el-table-column>
<el-table-column prop="version" label="附件" align="center"></el-table-column>
<el-table-column prop="version" label="备注" align="center"></el-table-column>
<el-table-column label="操作" width="360" 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" :disabled="scope.row.state == 1">编辑</el-button>
<el-button class="shanChu_btn" icon="el-icon-delete" size="mini" :disabled="scope.row.state == 1">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
<!-- <el-pagination
background
layout="prev, pager, next"
:total="50">
</el-pagination> -->
<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="新建元素"
:visible.sync="add_dialog"
:center="false"
width="60%">
<div class="add_dialog_content">
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton">发布</el-button>
<el-button class="greenButton">保存</el-button>
<el-button >取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
query_jia_gou_yuan_su_guan_xi_table,
add_jia_gou_ceng_ci,
query_jia_gou_ceng_ci,
add_jia_gou_gui_shu,
query_jia_gou_gui_shu,
delete_jia_gou_gui_shu,
add_jia_gou_yuan_su,
version_release_jia_gou_gui_shu,
edit_jia_gou_yuan_su
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
export default {
name: 'ReportTemplateFabric',
components: {
},
data() {
return {
tableData: [],
add_dialog: false,
query_item1: null,
query_item3: null,
query_item4: null,
loading: false,
selectTable: [],
search_select1: [],
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 20 //总条数
},
tableHeight: null
};
},
mounted(){
window.addEventListener('resize', () => {
this.set_table_height();
})
this.set_table_height();
this.get_table();
},
methods: {
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';
},
selectable(row) {//表格勾选框禁用
if(row.state == 1) {
return false; // 禁用
} else {
return true; //不禁用
}
},
select_table_rows(data){//表格的勾选
this.selectTable = data;
},
add() {//新建按钮
this.add_dialog = true;
},
reset() {//重置
this.query_item1 = null;
this.query_item3 = null;
this.query_item4 = 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() {//查询表格数据
},
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.reportTemplateFabric{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.dialog_content_1{
display: flex;
justify-content: space-between;
}
.el-button--primary{
background-color: #0D867F;
}
.add_select_item_icon_container{
margin-top: 10px;
text-align: center;
cursor: pointer;
}
/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;
}
.search_menu{
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;
}
.el-button--primary{
background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
}
.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{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
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;
}
.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;
}
.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 #0D867F;
font-size: 14px;
color: #666;
cursor: pointer;
}
.btn_icon{
margin-right: 10px;
}
.table_container{
width: 97%;
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;
}
</style>
\ No newline at end of file
src/views/tech-politics-fabric/index.vue 0 → 100644
<template>
<div class="techPoliticsFabric">
<div class="table_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="query_item3" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item">
<span class="search_title">启用时间</span>
<el-date-picker
v-model="query_item1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div class="search_menu_item">
<span class="search_title">状态</span>
<el-select v-model="query_item4" 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>
</el-select>
</div>
</div>
<div class="search_menu_btn_container">
<div class="query_btn" @click="get_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 type="primary" icon="el-icon-document-add">新建</el-button>
<el-button type="danger">删除</el-button>
<el-button type="warning">导入</el-button>
<el-button type="primary">导出</el-button>
</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="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="content" label="发布部门" align="center"></el-table-column>
<el-table-column prop="content" label="级别" align="center"></el-table-column>
<el-table-column prop="content" label="启用时间" align="center"></el-table-column>
<el-table-column prop="content" label="创建人" align="center"></el-table-column>
<el-table-column prop="content" label="创建时间" align="center"></el-table-column>
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<span v-if="scope.row.state == 0">已停用</span>
<span v-if="scope.row.state == 1">已发布</span>
<span v-if="scope.row.state == 2">暂存</span>
</template>
</el-table-column>
<el-table-column prop="content" label="备注" align="center"></el-table-column>
<el-table-column label="操作" width="360" 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" :disabled="scope.row.state == 1">编辑</el-button>
<el-button icon="el-icon-upload2" type="primary" size="mini" :disabled="scope.row.state == 1 ">发布</el-button>
<el-button class="tingYong_btn" icon="el-icon-remove-outline" size="mini" :disabled="scope.row.state != 1">停用</el-button>
<el-button class="shanChu_btn" icon="el-icon-delete" size="mini" :disabled="scope.row.state == 1">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
<!-- <el-pagination
background
layout="prev, pager, next"
:total="50">
</el-pagination> -->
<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="新建元素"
:visible.sync="add_dialog"
:center="false"
width="60%">
<div class="add_dialog_content">
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton">发布</el-button>
<el-button class="greenButton">保存</el-button>
<el-button >取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
query_jia_gou_yuan_su_guan_xi_table,
add_jia_gou_ceng_ci,
query_jia_gou_ceng_ci,
add_jia_gou_gui_shu,
query_jia_gou_gui_shu,
delete_jia_gou_gui_shu,
add_jia_gou_yuan_su,
version_release_jia_gou_gui_shu,
edit_jia_gou_yuan_su
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
export default {
name: 'TechPoliticsFabric',
components: {
},
data() {
return {
tableData: [],
add_dialog: false,
query_item1: null,
query_item3: null,
query_item4: null,
loading: false,
selectTable: [],
search_select1: [],
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 20 //总条数
},
tableHeight: null
};
},
mounted(){
window.addEventListener('resize', () => {
this.set_table_height();
})
this.set_table_height();
this.get_table();
},
methods: {
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';
},
selectable(row) {//表格勾选框禁用
if(row.state == 1) {
return false; // 禁用
} else {
return true; //不禁用
}
},
select_table_rows(data){//表格的勾选
this.selectTable = data;
},
add() {//新建按钮
this.add_dialog = true;
},
reset() {//重置
this.query_item1 = null;
this.query_item3 = null;
this.query_item4 = 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() {//查询表格数据
},
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.techPoliticsFabric{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.dialog_content_1{
display: flex;
justify-content: space-between;
}
.el-button--primary{
background-color: #0D867F;
}
.add_select_item_icon_container{
margin-top: 10px;
text-align: center;
cursor: pointer;
}
/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;
}
.search_menu{
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;
}
.el-button--primary{
background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
}
.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{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
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;
}
.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;
}
.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 #0D867F;
font-size: 14px;
color: #666;
cursor: pointer;
}
.btn_icon{
margin-right: 10px;
}
.table_container{
width: 97%;
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;
}
</style>
\ No newline at end of file
src/views/tech-politics-relative-use/index.vue 0 → 100644
<template>
<div class="techPoliticsRelativeUse">
<div class="table_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="query_item3" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item">
<span class="search_title">符合度</span>
<el-select v-model="query_item4" 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>
</el-select>
</div>
</div>
<div class="search_menu_btn_container">
<div class="query_btn" @click="get_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>
<el-table :height="tableHeight" v-loading="loading" :data="tableData" stripe border>
<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="content" label="政策描述" align="center"></el-table-column>
<el-table-column prop="version" label="符合度" align="center"></el-table-column>
<el-table-column prop="version" label="应用数量" align="center"></el-table-column>
<el-table-column prop="version" label="备注" align="center"></el-table-column>
</el-table>
<!-- <el-pagination
background
layout="prev, pager, next"
:total="50">
</el-pagination> -->
<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>
</div>
</template>
<script>
import {
query_jia_gou_yuan_su_guan_xi_table,
add_jia_gou_ceng_ci,
query_jia_gou_ceng_ci,
add_jia_gou_gui_shu,
query_jia_gou_gui_shu,
delete_jia_gou_gui_shu,
add_jia_gou_yuan_su,
version_release_jia_gou_gui_shu,
edit_jia_gou_yuan_su
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
export default {
name: 'TechPoliticsRelativeUse',
components: {
},
data() {
return {
tableData: [],
query_item3: null,
query_item4: null,
loading: false,
search_select1: [],
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 20 //总条数
},
tableHeight: null
};
},
mounted(){
window.addEventListener('resize', () => {
this.set_table_height();
})
this.set_table_height();
this.get_table();
},
methods: {
set_table_height() {//动态设置表格高度
const table_container_height = $(".table_container").height();
const search_menu_height = $(".search_menu").height();
this.tableHeight = table_container_height - search_menu_height - 90 + 'px';
},
reset() {//重置
this.query_item3 = null;
this.query_item4 = 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() {//查询表格数据
},
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.techPoliticsRelativeUse{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.el-button--primary{
background-color: #0D867F;
}
/deep/ .el-input-group__append{
background-color: #0D867F;
color: #fff;
cursor: pointer;
}
.search_menu{
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%;
}
.el-button--primary{
background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
}
.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 #0D867F;
font-size: 14px;
color: #666;
cursor: pointer;
}
.btn_icon{
margin-right: 10px;
}
.table_container{
width: 97%;
margin-top: 20px;
}
.el-pagination{
margin-top: 30px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F;
}
</style>
\ No newline at end of file
src/views/total-archi-property-document/index.vue 0 → 100644
<template>
<div class="totalArchiPropertyDocument">
<div class="table_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="query_item3" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item">
<span class="search_title">文档类型</span>
<el-select v-model="query_item1" placeholder="请选择" class="search_item">
<el-option v-for="item in search_select1" :key="item.belongId" :label="item.name" :value="item.belongId"></el-option>
</el-select>
</div>
<div class="search_menu_item">
<span class="search_title">创建时间</span>
<el-date-picker
v-model="query_item4"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
</div>
<div class="search_menu_btn_container">
<div class="query_btn" @click="get_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">
<el-button type="primary" icon="el-icon-document-add">新建</el-button>
<el-button type="primary">导出</el-button>
</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="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="content" label="创建时间" align="center"></el-table-column>
<el-table-column prop="content" label="附件" align="center"></el-table-column>
</el-table>
<!-- <el-pagination
background
layout="prev, pager, next"
:total="50">
</el-pagination> -->
<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="新建元素"
:visible.sync="add_dialog"
:center="false"
width="60%">
<div class="add_dialog_content">
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton">发布</el-button>
<el-button class="greenButton">保存</el-button>
<el-button >取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
query_jia_gou_yuan_su_guan_xi_table,
add_jia_gou_ceng_ci,
query_jia_gou_ceng_ci,
add_jia_gou_gui_shu,
query_jia_gou_gui_shu,
delete_jia_gou_gui_shu,
add_jia_gou_yuan_su,
version_release_jia_gou_gui_shu,
edit_jia_gou_yuan_su
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
export default {
name: 'TotalArchiPropertyDocument',
components: {
},
data() {
return {
tableData: [],
add_dialog: false,
query_item1: null,
query_item3: null,
query_item4: null,
loading: false,
selectTable: [],
search_select1: [],
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 20 //总条数
},
tableHeight: null
};
},
mounted(){
window.addEventListener('resize', () => {
this.set_table_height();
})
this.set_table_height();
this.get_table();
},
methods: {
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';
},
selectable(row) {//表格勾选框禁用
if(row.state == 1) {
return false; // 禁用
} else {
return true; //不禁用
}
},
select_table_rows(data){//表格的勾选
this.selectTable = data;
},
add() {//新建按钮
this.add_dialog = true;
},
reset() {//重置
this.query_item1 = null;
this.query_item3 = null;
this.query_item4 = 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() {//查询表格数据
},
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.totalArchiPropertyDocument{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.dialog_content_1{
display: flex;
justify-content: space-between;
}
.el-button--primary{
background-color: #0D867F;
}
.add_select_item_icon_container{
margin-top: 10px;
text-align: center;
cursor: pointer;
}
/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;
}
.search_menu{
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;
}
.el-button--primary{
background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
}
.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{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
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;
}
.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;
}
.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 #0D867F;
font-size: 14px;
color: #666;
cursor: pointer;
}
.btn_icon{
margin-right: 10px;
}
.table_container{
width: 97%;
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;
}
</style>
\ No newline at end of file
src/views/typical-example-manage/index.vue 0 → 100644
<template>
<div class="typicalExampleManage">
<div class="table_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="query_item3" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item">
<span class="search_title">案例类型</span>
<el-select v-model="query_item1" placeholder="请选择" class="search_item">
<el-option v-for="item in search_select1" :key="item.belongId" :label="item.name" :value="item.belongId"></el-option>
</el-select>
</div>
<div class="search_menu_item">
<span class="search_title">问题类型</span>
<el-select v-model="query_item4" 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>
</el-select>
</div>
</div>
<div class="search_menu_btn_container">
<div class="query_btn" @click="get_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">
<el-button type="primary" icon="el-icon-document-add">新建</el-button>
<el-button type="danger">删除</el-button>
<el-button type="primary">导出</el-button>
</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="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="content" label="建设内容" align="center"></el-table-column>
<el-table-column prop="content" label="架构详情" align="center"></el-table-column>
<el-table-column prop="content" label="问题类型" align="center"></el-table-column>
<el-table-column prop="content" label="问题描述" align="center"></el-table-column>
<el-table-column prop="content" label="问题等级" align="center"></el-table-column>
<el-table-column label="操作" width="360" 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" :disabled="scope.row.state == 1">编辑</el-button>
<el-button class="shanChu_btn" icon="el-icon-delete" size="mini" :disabled="scope.row.state == 1">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
<!-- <el-pagination
background
layout="prev, pager, next"
:total="50">
</el-pagination> -->
<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="新建元素"
:visible.sync="add_dialog"
:center="false"
width="60%">
<div class="add_dialog_content">
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton">发布</el-button>
<el-button class="greenButton">保存</el-button>
<el-button >取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
query_jia_gou_yuan_su_guan_xi_table,
add_jia_gou_ceng_ci,
query_jia_gou_ceng_ci,
add_jia_gou_gui_shu,
query_jia_gou_gui_shu,
delete_jia_gou_gui_shu,
add_jia_gou_yuan_su,
version_release_jia_gou_gui_shu,
edit_jia_gou_yuan_su
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
export default {
name: 'TypicalExampleManage',
components: {
},
data() {
return {
tableData: [],
add_dialog: false,
query_item1: null,
query_item3: null,
query_item4: null,
loading: false,
selectTable: [],
search_select1: [],
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 20 //总条数
},
tableHeight: null
};
},
mounted(){
window.addEventListener('resize', () => {
this.set_table_height();
})
this.set_table_height();
this.get_table();
},
methods: {
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';
},
selectable(row) {//表格勾选框禁用
if(row.state == 1) {
return false; // 禁用
} else {
return true; //不禁用
}
},
select_table_rows(data){//表格的勾选
this.selectTable = data;
},
add() {//新建按钮
this.add_dialog = true;
},
reset() {//重置
this.query_item1 = null;
this.query_item3 = null;
this.query_item4 = 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() {//查询表格数据
},
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.typicalExampleManage{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.dialog_content_1{
display: flex;
justify-content: space-between;
}
.el-button--primary{
background-color: #0D867F;
}
.add_select_item_icon_container{
margin-top: 10px;
text-align: center;
cursor: pointer;
}
/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;
}
.search_menu{
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;
}
.el-button--primary{
background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
}
.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{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
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;
}
.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;
}
.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 #0D867F;
font-size: 14px;
color: #666;
cursor: pointer;
}
.btn_icon{
margin-right: 10px;
}
.table_container{
width: 97%;
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;
}
</style>
\ No newline at end of file
src/views/typical-example-relative-use/index.vue 0 → 100644
<template>
<div class="typicalExampleRelativeUse">
<div class="table_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="query_item3" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item">
<span class="search_title">案例类型</span>
<el-select v-model="query_item1" placeholder="请选择" class="search_item">
<el-option v-for="item in search_select1" :key="item.belongId" :label="item.name" :value="item.belongId"></el-option>
</el-select>
</div>
<div class="search_menu_item">
<span class="search_title">问题类型</span>
<el-select v-model="query_item4" 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>
</el-select>
</div>
</div>
<div class="search_menu_btn_container">
<div class="query_btn" @click="get_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">
<el-button type="primary">导出</el-button>
</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="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="content" label="建设内容" align="center"></el-table-column>
<el-table-column prop="version" label="架构详情" align="center"></el-table-column>
<el-table-column prop="version" label="问题类型" align="center"></el-table-column>
<el-table-column prop="version" label="问题描述" align="center"></el-table-column>
<el-table-column prop="version" label="问题等级" align="center"></el-table-column>
</el-table>
<!-- <el-pagination
background
layout="prev, pager, next"
:total="50">
</el-pagination> -->
<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="新建元素"
:visible.sync="add_dialog"
:center="false"
width="60%">
<div class="add_dialog_content">
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton">发布</el-button>
<el-button class="greenButton">保存</el-button>
<el-button >取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
query_jia_gou_yuan_su_guan_xi_table,
add_jia_gou_ceng_ci,
query_jia_gou_ceng_ci,
add_jia_gou_gui_shu,
query_jia_gou_gui_shu,
delete_jia_gou_gui_shu,
add_jia_gou_yuan_su,
version_release_jia_gou_gui_shu,
edit_jia_gou_yuan_su
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
export default {
name: 'TypicalExampleRelativeUse',
components: {
},
data() {
return {
tableData: [],
add_dialog: false,
query_item1: null,
query_item3: null,
query_item4: null,
loading: false,
selectTable: [],
search_select1: [],
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 20 //总条数
},
tableHeight: null
};
},
mounted(){
window.addEventListener('resize', () => {
this.set_table_height();
})
this.set_table_height();
this.get_table();
},
methods: {
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';
},
selectable(row) {//表格勾选框禁用
if(row.state == 1) {
return false; // 禁用
} else {
return true; //不禁用
}
},
select_table_rows(data){//表格的勾选
this.selectTable = data;
},
add() {//新建按钮
this.add_dialog = true;
},
reset() {//重置
this.query_item1 = null;
this.query_item3 = null;
this.query_item4 = 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() {//查询表格数据
},
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.typicalExampleRelativeUse{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.dialog_content_1{
display: flex;
justify-content: space-between;
}
.el-button--primary{
background-color: #0D867F;
}
.add_select_item_icon_container{
margin-top: 10px;
text-align: center;
cursor: pointer;
}
/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;
}
.search_menu{
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;
}
.el-button--primary{
background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
}
.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{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
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;
}
.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;
}
.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 #0D867F;
font-size: 14px;
color: #666;
cursor: pointer;
}
.btn_icon{
margin-right: 10px;
}
.table_container{
width: 97%;
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;
}
</style>
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!