monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit fa5323e35b717b14cdefc2db9cebd0fed97225c7 1 parent 769128ba

共通组件开发

Inline Side-by-side
Showing 36 changed files with 1993 additions and 361 deletions
# **说明**
- hg-monitor-web-base 基于天津现有功能作为基类
- hg-monitor-web-new 最新开发版本
- hg-monitor-web-tj 天津21年10月后的个性化开发
- hg-monitor-web-zj 杭州功能开发
说明说明注意事项 版本开发，天津版本的开发可在base中修改，然后将代码复制到hg-monitor-web-tj代码中
# **基础功能优化**
- 如果影响多个现场，则直接修改base工程下对应的接口和页面
- 各个地方的个性化优化，则使用文件覆盖的方式修改代码（在对应工程目录下创建相同的目录结构）
# **功能升级**
- 某一个现场的功能需要在各个现场都升级的，则将代码复制到base中
- 如果升级某一个现场的版本，则将文件复制过去即可
... ...
... ... @@ -10,24 +10,7 @@
margin-bottom: 6px;
}
.assets-configmanager .tbl-header-class {
color: #1E9FFF;
font-weight: bold;
}
.assets-configmanager .tbl-header-class th {
background: #EBF5F9 !important;
text-align: center;
}
.assets-configmanager .tbl-header-class th .cell {
text-align: center !important;
}
.assets-configmanager .el-table__row td{
padding: 2px 0px;!important;
text-align: center;
}
.config-view {
display: flex;
... ... @@ -72,7 +55,10 @@
line-height: 40px;
border: solid 1px #efefef;
}
.assets-configmanager .el-table__row td{
padding: 2px 0px;!important;
text-align: center;
}
/*.assets-configmanager .config-content-content::hover {*/
/*background-color: rgb(249, 249, 249);*/
/*}*/
... ...
... ... @@ -20,7 +20,13 @@ custom-class="config-dialog"
.config-dialog .el-dialog__body{
padding: 5px 10px!important;
padding-bottom: 20px!important;
min-height: 500px;
}
.el-form-item{
display: flex;
}
.el-form-item__content{
width: 60%;
}
... ...
... ... @@ -5,3 +5,62 @@
text-align: left;
height: 100%;
}
/*table-page start*/
/* 表格表头样式 header-row-class-name="tbl-header-class" */
.tbl-header-class {
color: #1E9FFF;
font-weight: bold;
}
.tbl-header-class th {
background: #EBF5F9 !important;
text-align: center;
}
.tbl-header-class th .cell {
text-align: center !important;
}
/* table-page end */
/*穿梭框样式*/
.el-transfer .el-transfer-panel__item .el-checkbox__input{
left: 10px!important;
}
.el-transfer .el-transfer-panel{
width: 300px;
}
.el-transfer .el-checkbox__label{
text-align: left;
}
/*用户授权*/
.userright{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 210px;
}
.userright .userright-desc{
width: calc(100% - 23px);
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.userright .userright-tag{
text-align: right;
width: 23px;
border-radius: 3px;
padding: 3px;
height: 15px;
line-height: 15px;
font-weight: bold;
font-size: 12px;
}
.userright .users{
border: solid 1px rgb(179, 216, 255);
}
.userright .roles{
border: solid 1px rgb(251, 196, 196);
}
... ...
... ... @@ -55,6 +55,120 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe610;</span>
<div class="name">目标库</div>
<div class="code-name">&amp;#xe610;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe612;</span>
<div class="name">下载</div>
<div class="code-name">&amp;#xe612;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe616;</span>
<div class="name">上传</div>
<div class="code-name">&amp;#xe616;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61b;</span>
<div class="name">统计</div>
<div class="code-name">&amp;#xe61b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61c;</span>
<div class="name">权限</div>
<div class="code-name">&amp;#xe61c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61d;</span>
<div class="name">迎宾</div>
<div class="code-name">&amp;#xe61d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61e;</span>
<div class="name">对</div>
<div class="code-name">&amp;#xe61e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe621;</span>
<div class="name">删除</div>
<div class="code-name">&amp;#xe621;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe625;</span>
<div class="name">日志</div>
<div class="code-name">&amp;#xe625;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe626;</span>
<div class="name">告警</div>
<div class="code-name">&amp;#xe626;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62e;</span>
<div class="name">流程</div>
<div class="code-name">&amp;#xe62e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65d;</span>
<div class="name">人员离开</div>
<div class="code-name">&amp;#xe65d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65e;</span>
<div class="name">人员进入</div>
<div class="code-name">&amp;#xe65e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe660;</span>
<div class="name">轮巡</div>
<div class="code-name">&amp;#xe660;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60f;</span>
<div class="name">好友</div>
<div class="code-name">&amp;#xe60f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8c8;</span>
<div class="name">224用户</div>
<div class="code-name">&amp;#xe8c8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xea62;</span>
<div class="name">角色管理</div>
<div class="code-name">&amp;#xea62;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60d;</span>
<div class="name">列表模式</div>
<div class="code-name">&amp;#xe60d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62d;</span>
<div class="name">列表</div>
<div class="code-name">&amp;#xe62d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60c;</span>
<div class="name">AK-BT_对勾_B</div>
<div class="code-name">&amp;#xe60c;</div>
... ... @@ -378,9 +492,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1632921801844') format('woff2'),
url('iconfont.woff?t=1632921801844') format('woff'),
url('iconfont.ttf?t=1632921801844') format('truetype');
src: url('iconfont.woff2?t=1633773106250') format('woff2'),
url('iconfont.woff?t=1633773106250') format('woff'),
url('iconfont.ttf?t=1633773106250') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
... ... @@ -407,6 +521,177 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-icon--mubiaoku"></span>
<div class="name">
目标库
</div>
<div class="code-name">.icon-icon--mubiaoku
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon--download"></span>
<div class="name">
下载
</div>
<div class="code-name">.icon-icon--download
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon--shangchuan"></span>
<div class="name">
上传
</div>
<div class="code-name">.icon-icon--shangchuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon--tongji"></span>
<div class="name">
统计
</div>
<div class="code-name">.icon-icon--tongji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon--quanxian"></span>
<div class="name">
权限
</div>
<div class="code-name">.icon-icon--quanxian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon--yingbing"></span>
<div class="name">
迎宾
</div>
<div class="code-name">.icon-icon--yingbing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon--yes"></span>
<div class="name">
对
</div>
<div class="code-name">.icon-icon--yes
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon--shanchu"></span>
<div class="name">
删除
</div>
<div class="code-name">.icon-icon--shanchu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon-rizhi"></span>
<div class="name">
日志
</div>
<div class="code-name">.icon-icon-rizhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon-gaojing"></span>
<div class="name">
告警
</div>
<div class="code-name">.icon-icon-gaojing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon-liucheng"></span>
<div class="name">
流程
</div>
<div class="code-name">.icon-icon-liucheng
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yuangongchelianglika"></span>
<div class="name">
人员离开
</div>
<div class="code-name">.icon-yuangongchelianglika
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yuangongcheliangjinr"></span>
<div class="name">
人员进入
</div>
<div class="code-name">.icon-yuangongcheliangjinr
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-lunxun"></span>
<div class="name">
轮巡
</div>
<div class="code-name">.icon-lunxun
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-haoyou"></span>
<div class="name">
好友
</div>
<div class="code-name">.icon-haoyou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yonghu"></span>
<div class="name">
224用户
</div>
<div class="code-name">.icon-yonghu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiaoseguanli"></span>
<div class="name">
角色管理
</div>
<div class="code-name">.icon-jiaoseguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-liebiaomoshi"></span>
<div class="name">
列表模式
</div>
<div class="code-name">.icon-liebiaomoshi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-liebiao"></span>
<div class="name">
列表
</div>
<div class="code-name">.icon-liebiao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bt_duigou_B"></span>
<div class="name">
AK-BT_对勾_B
... ... @@ -894,6 +1179,158 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon--mubiaoku"></use>
</svg>
<div class="name">目标库</div>
<div class="code-name">#icon-icon--mubiaoku</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon--download"></use>
</svg>
<div class="name">下载</div>
<div class="code-name">#icon-icon--download</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon--shangchuan"></use>
</svg>
<div class="name">上传</div>
<div class="code-name">#icon-icon--shangchuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon--tongji"></use>
</svg>
<div class="name">统计</div>
<div class="code-name">#icon-icon--tongji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon--quanxian"></use>
</svg>
<div class="name">权限</div>
<div class="code-name">#icon-icon--quanxian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon--yingbing"></use>
</svg>
<div class="name">迎宾</div>
<div class="code-name">#icon-icon--yingbing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon--yes"></use>
</svg>
<div class="name">对</div>
<div class="code-name">#icon-icon--yes</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon--shanchu"></use>
</svg>
<div class="name">删除</div>
<div class="code-name">#icon-icon--shanchu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon-rizhi"></use>
</svg>
<div class="name">日志</div>
<div class="code-name">#icon-icon-rizhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon-gaojing"></use>
</svg>
<div class="name">告警</div>
<div class="code-name">#icon-icon-gaojing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon-liucheng"></use>
</svg>
<div class="name">流程</div>
<div class="code-name">#icon-icon-liucheng</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yuangongchelianglika"></use>
</svg>
<div class="name">人员离开</div>
<div class="code-name">#icon-yuangongchelianglika</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yuangongcheliangjinr"></use>
</svg>
<div class="name">人员进入</div>
<div class="code-name">#icon-yuangongcheliangjinr</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-lunxun"></use>
</svg>
<div class="name">轮巡</div>
<div class="code-name">#icon-lunxun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-haoyou"></use>
</svg>
<div class="name">好友</div>
<div class="code-name">#icon-haoyou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yonghu"></use>
</svg>
<div class="name">224用户</div>
<div class="code-name">#icon-yonghu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiaoseguanli"></use>
</svg>
<div class="name">角色管理</div>
<div class="code-name">#icon-jiaoseguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-liebiaomoshi"></use>
</svg>
<div class="name">列表模式</div>
<div class="code-name">#icon-liebiaomoshi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-liebiao"></use>
</svg>
<div class="name">列表</div>
<div class="code-name">#icon-liebiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bt_duigou_B"></use>
</svg>
<div class="name">AK-BT_对勾_B</div>
... ...
@font-face {
font-family: "iconfont"; /* Project id 2843738 */
src: url('iconfont.woff2?t=1632921801844') format('woff2'),
url('iconfont.woff?t=1632921801844') format('woff'),
url('iconfont.ttf?t=1632921801844') format('truetype');
src: url('iconfont.woff2?t=1633773106250') format('woff2'),
url('iconfont.woff?t=1633773106250') format('woff'),
url('iconfont.ttf?t=1633773106250') format('truetype');
}
.iconfont {
... ... @@ -13,6 +13,82 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-icon--mubiaoku:before {
content: "\e610";
}
.icon-icon--download:before {
content: "\e612";
}
.icon-icon--shangchuan:before {
content: "\e616";
}
.icon-icon--tongji:before {
content: "\e61b";
}
.icon-icon--quanxian:before {
content: "\e61c";
}
.icon-icon--yingbing:before {
content: "\e61d";
}
.icon-icon--yes:before {
content: "\e61e";
}
.icon-icon--shanchu:before {
content: "\e621";
}
.icon-icon-rizhi:before {
content: "\e625";
}
.icon-icon-gaojing:before {
content: "\e626";
}
.icon-icon-liucheng:before {
content: "\e62e";
}
.icon-yuangongchelianglika:before {
content: "\e65d";
}
.icon-yuangongcheliangjinr:before {
content: "\e65e";
}
.icon-lunxun:before {
content: "\e660";
}
.icon-haoyou:before {
content: "\e60f";
}
.icon-yonghu:before {
content: "\e8c8";
}
.icon-jiaoseguanli:before {
content: "\ea62";
}
.icon-liebiaomoshi:before {
content: "\e60d";
}
.icon-liebiao:before {
content: "\e62d";
}
.icon-bt_duigou_B:before {
content: "\e60c";
}
... ...
... ... @@ -6,6 +6,139 @@
"description": "",
"glyphs": [
{
"icon_id": "6501157",
"name": "目标库",
"font_class": "icon--mubiaoku",
"unicode": "e610",
"unicode_decimal": 58896
},
{
"icon_id": "6501167",
"name": "下载",
"font_class": "icon--download",
"unicode": "e612",
"unicode_decimal": 58898
},
{
"icon_id": "6501175",
"name": "上传",
"font_class": "icon--shangchuan",
"unicode": "e616",
"unicode_decimal": 58902
},
{
"icon_id": "6501180",
"name": "统计",
"font_class": "icon--tongji",
"unicode": "e61b",
"unicode_decimal": 58907
},
{
"icon_id": "6501181",
"name": "权限",
"font_class": "icon--quanxian",
"unicode": "e61c",
"unicode_decimal": 58908
},
{
"icon_id": "6501197",
"name": "迎宾",
"font_class": "icon--yingbing",
"unicode": "e61d",
"unicode_decimal": 58909
},
{
"icon_id": "6501235",
"name": "对",
"font_class": "icon--yes",
"unicode": "e61e",
"unicode_decimal": 58910
},
{
"icon_id": "6501295",
"name": "删除",
"font_class": "icon--shanchu",
"unicode": "e621",
"unicode_decimal": 58913
},
{
"icon_id": "6501299",
"name": "日志",
"font_class": "icon-rizhi",
"unicode": "e625",
"unicode_decimal": 58917
},
{
"icon_id": "6501308",
"name": "告警",
"font_class": "icon-gaojing",
"unicode": "e626",
"unicode_decimal": 58918
},
{
"icon_id": "6501325",
"name": "流程",
"font_class": "icon-liucheng",
"unicode": "e62e",
"unicode_decimal": 58926
},
{
"icon_id": "7087610",
"name": "人员离开",
"font_class": "yuangongchelianglika",
"unicode": "e65d",
"unicode_decimal": 58973
},
{
"icon_id": "7087612",
"name": "人员进入",
"font_class": "yuangongcheliangjinr",
"unicode": "e65e",
"unicode_decimal": 58974
},
{
"icon_id": "7098261",
"name": "轮巡",
"font_class": "lunxun",
"unicode": "e660",
"unicode_decimal": 58976
},
{
"icon_id": "1260",
"name": "好友",
"font_class": "haoyou",
"unicode": "e60f",
"unicode_decimal": 58895
},
{
"icon_id": "1727459",
"name": "224用户",
"font_class": "yonghu",
"unicode": "e8c8",
"unicode_decimal": 59592
},
{
"icon_id": "742126",
"name": "角色管理",
"font_class": "jiaoseguanli",
"unicode": "ea62",
"unicode_decimal": 60002
},
{
"icon_id": "201552",
"name": "列表模式",
"font_class": "liebiaomoshi",
"unicode": "e60d",
"unicode_decimal": 58893
},
{
"icon_id": "1304951",
"name": "列表",
"font_class": "liebiao",
"unicode": "e62d",
"unicode_decimal": 58925
},
{
"icon_id": "4198630",
"name": "AK-BT_对勾_B",
"font_class": "bt_duigou_B",
... ...
<el-dialog :top="top" :title="title" v-model="show" custom-class="config-dialog"
:fullscreen="fullscreen" :show-close="showFooter"
:width="width" destroy-on-close @before-close="hideElDialog" :close-on-click-modal="false" :close-on-press-escape="false">
<slot>弹框内容</slot>
<template #footer v-if="showFooter">
<span class="dialog-footer">
<el-button @click="hideElDialog">{{cancelText}}</el-button>
<el-button type="primary" @click="okFunc">{{okText}}</el-button>
</span>
</template>
</el-dialog>
... ...
/**
* 分页表格组件
*/
export default {
name: 'dialogIndex',
template: '',
components: {},
props: {
top: {
type: String,
default: '2vh'
},
// 标题
title: {
type: String,
default: "新建"
},
// 取消文本
cancelText: {
type: String,
default: "取消"
},
// 确定文本
okText: {
type: String,
default: "确定"
},
showFooter:{
type: Boolean,
default: true
},
showDialogVisible: {
type: Boolean,
default: false
},
width: {
type: String,
default: '80%'
},
// 是否为全屏 Dialog
fullscreen: {
type: Boolean,
default: false
}
},
data() {
return {}
},
setup(props, {attrs, slots, emit}) {
let show = Vue.ref(false);
let hideElDialog = () =>{
emit('hidedialog');
}
let okFunc = () =>{
emit('okfunc');
}
// 监听编辑状态
Vue.watch(() => props.showDialogVisible, (newValue, oldVlaue) => {
// 编辑
show.value = newValue;
});
return {
show,
okFunc,
hideElDialog
}
}
}
... ...
<div>
<el-row :gutter="5">
<el-col :span="layout.left">
<div style="border-radius: 3px;background-color: white"
:style="{'height':height+'px','max-height':height + 'px','overflow':'auto'}">
<div style="text-align: left;padding-left: 10px;padding-top: 3px;font-weight: bold">
<el-link type="info" :underline="false"><i class="iconfont icon-ziliaoku"></i> 文档管理</el-link>
</div>
<el-tree ref="tree" style="padding:6px;" :props="props" :data="treeData" node-key="id"
:expand-on-click-node="false" :expand-on-click-node="true"
:default-expanded-keys="[defaultKeys]" >
<template #default="{ node, data }">
<div style="display: flex;flex-direction: row;width: 100%;">
<div style="width: calc(100% - 85px);max-width: calc(100% - 85px);overflow: hidden;text-overflow: ellipsis;text-align: left;" @click="nodeClick(node, data)" :title="node.label">
{{node.label }}
</div>
<div style="width: 60px;">
<a @click="showFolder(true)" style="margin-right: 10px;">
<i class="el-icon-plus"></i>
</a>
<a @click="deleteDocument(data.id,'folder')">
<i class="el-icon-delete"></i>
</a>
</div>
</div>
</template>
</el-tree>
</div>
</el-col>
<el-col :span="layout.right">
<div style="border-radius: 3px"
:style="{'height':height+'px','max-height':height + 'px','overflow':'hidden'}">
<div style="display: flex;flex-direction: row;padding: 3px;background-color: white;padding-bottom: 5px;height:45px;border-bottom: solid 1px #EBEEF5">
<div style="width: calc(100% - 150px);padding-left: 6px;text-align: left;">
<el-input v-model="keyWord" placeholder="请输入关键字" :size="$global.elementSize"
style="width: 220px;margin-right:10px" clearable/>
<el-button icon="el-icon-search" :size="$global.elementSize" @click="searchFile">搜索</el-button>
<el-button :size="$global.elementSize" @click="showUserDialog(true)">
<i class="iconfont icon-icon--quanxian"></i>
授权
</el-button>
<el-button :size="$global.elementSize" @click="uploadFile">
<i class="iconfont icon-icon--download"></i>
下载
</el-button>
<el-button type="primary" :size="$global.elementSize" @click="showUploadFile(true)">
<i class="iconfont icon-icon--shangchuan"></i>
上传
</el-button>
</div>
<div style="text-align: right;width: 150px">
<el-button-group>
<el-button :size="$global.elementSize" :type="activeBtn == 'view' ? 'primary' : ''"
@click="activeModel('view')">
<i class="iconfont icon-liebiaomoshi"></i>
</el-button>
<el-button :size="$global.elementSize" :type="activeBtn == 'list' ? 'primary' : ''"
@click="activeModel('list')">
<i class="iconfont icon-liebiao"></i>
</el-button>
</el-button-group>
</div>
</div>
<!--列表-->
<div v-if="activeBtn == 'list'">
<cm-table-page :columns="columns" :dataList="dataList" @loaddata="getPage" :showIndex="false"
:showBorder="false" :showSelection="true"
:showPage="false" :height="height - 54"></cm-table-page>
</div>
<div v-if="activeBtn == 'view'" style="display: flex;flex-wrap: wrap;background-color: white" :style="{'height':(height -50) +'px','max-height':(height -50) + 'px','overflow':'auto'}">
<div v-for="file in dataList" style="width: 120px;margin: 10px;position: relative">
<div style="position: absolute;right: 5px">
<el-checkbox v-model="file.checked" label="" :size="$global.elementSize"></el-checkbox>
<!--<el-link type="primary" :underline="false" @click="getFile(file)" style="margin-left: 5px">
<i class="iconfont icon-icon&#45;&#45;download"></i>
</el-link>-->
</div>
<el-link type="primary" :underline="false" @click="getFile(file)">
<i class="iconfont "
:class="iconclass[file.type] == undefined ? 'icon-wenjian' : iconclass[file.type]"
style="font-size: 50px;margin-right: 10px;"/>
</el-link>
<br/>
<el-link type="info" :underline="false" @click="getFile(file)">
{{file.fileName}}
</el-link>
</div>
<div v-if="dataList.length == 0" style=" text-align: center; width: 100%;">
<el-empty description="没有文件哦！"></el-empty>
</div>
</div>
</div>
</el-col>
</el-row>
<cm-dialog :title="'新建“' + currentNodeData.name + '“子文件夹'" width="500px" :showDialogVisible="addDialogVisible" :showFooter="false">
<template v-slot>
<el-form
label-width="120px"
ref="ruleForm"
:model="docForm"
:rules="docRulesForm"
label-position="right"
label-width="120px">
<el-form-item label="文档名称" prop="name">
<el-input :size="$global.elementSize" v-model="docForm.name" clearable ></el-input>
</el-form-item>
<el-form-item label="文档编号" prop="docNo">
<el-input :size="$global.elementSize" v-model="docForm.docNo" clearable></el-input>
</el-form-item>
<el-form-item label="文档类型" prop="type">
<el-input :size="$global.elementSize" v-model="docForm.type" clearable></el-input>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input :size="$global.elementSize" type="number" v-model="docForm.sort" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button :size="$global.elementSize" type="primary" @click="addFolder('ruleForm')">保存</el-button>
<el-button :size="$global.elementSize" @click="showFolder(false)">取消</el-button>
</el-form-item>
</el-form>
</template>
</cm-dialog>
<cm-userright :showDialogVisible="showUserDialogVisible" :users="userFileRight.usernames" @callback="selectUser"
@hideDialog="showUserDialog"></cm-userright>
<cm-upload :showDialogVisible="showUploadDialogVisible" @callback="uploadCallBack" @hideDialog="showUploadFile(false)"></cm-upload>
</div>
... ...
/**
* 分页表格组件
*/
export default {
name: 'DocumentIndex',
template: '',
components: {},
props: {},
data() {
return {
props: {
label: 'name',
children: 'children'
},
docRulesForm: {
name: [
{
required: true,
message: '请填写文档名称！',
trigger: 'blur',
}
]
}
}
},
setup() {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight - 20);
let defaultKeys = Vue.ref('');
let iconclass = {
'folder': 'icon-wenjianjia',
'docx': 'icon-word-full',
'doc': 'icon-word-full',
'ppt': 'icon-ppt-full',
'xlsx': 'icon-excel-full',
'xls': 'icon-excel-full',
'pdf': 'icon-pdf-full',
'txt': 'icon-txt-full',
'mp3': 'icon-audio',
'json': 'icon-json-full',
'bmp': 'icon-image-full',
'jpg': 'icon-image-full',
'png': 'icon-image-full',
'tif': 'icon-image-full',
'gif': 'icon-image-full',
'pcx': 'icon-image-full',
'tga': 'icon-image-full',
'exif': 'icon-image-full',
'fpx': 'icon-image-full',
'svg': 'icon-image-full',
'psd': 'icon-image-full',
'cdr': 'icon-image-full',
'pcd': 'icon-image-full',
'dxf': 'icon-image-full',
'ufo': 'icon-image-full',
'eps': 'icon-image-full',
'ai': 'icon-image-full',
'raw': 'icon-image-full',
'WMF': 'icon-image-full',
'webp': 'icon-image-full',
'avif': 'icon-image-full',
'avi': 'icon-avi',
'rmvb': 'icon-avi',
'rm': 'icon-avi',
'asf': 'icon-avi',
'divx': 'icon-avi',
'mpg': 'icon-avi',
'mpeg': 'icon-avi',
'mpe': 'icon-avi',
'wmv': 'icon-avi',
'mp4': 'icon-avi',
'mkv': 'icon-avi',
'vob': 'icon-avi',
'zip': 'icon-zip-full',
}
let treeData = Vue.ref([]);
let currentNodeData = Vue.ref({});
// 获取文件列表或者打开文件
let getFile = (item) => {
let id = item.id;
let type = item.type;
if (id && type && type == 'folder') {
getPage(id);
} else {
proxy.$global.viewer(item.localPath);
}
}
let columns = Vue.ref([{
prop: 'fileName',
label: '文档名称',
sortable: true,
align: 'left',
click: function (row) {
getFile(row);
},
render: function (row) {
let cls = iconclass[row.type] == undefined ? 'icon-wenjian' : iconclass[row.type];
return `<i class="iconfont ${cls}" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
}, {
prop: 'createUser',
label: '提交人',
sortable: true,
width: '120px'
}, {
prop: 'createTime',
label: '提交时间',
sortable: true,
width: '180px'
}]);
// 表格数据
let dataList = Vue.ref([]);
// 总数
let total = Vue.ref(0);
// 当前展示视图
let activeBtn = Vue.ref('view');
// // 当前展示视图
// let viewEdit = Vue.ref(false);
// 布局
let layout = Vue.ref({
left: 4,
right: 20
});
let keyWord = Vue.ref('');
// 左侧树
let getTree = () => {
// 加载列表
proxy.$http.get("/inspection-report/doc/type/tree", {}, function (res) {
if (res && res.data) {
treeData.value = res.data;
currentNodeData.value = res.data[0];
let firstId = res.data[0].id;
defaultKeys.value = firstId;
// 加载所有
getPage('');
}
})
}
// 获取表格树
let getPage = (id) => {
let params = {
id: id,
name: keyWord.value,
types:null
}
// 加载列表
proxy.$http.get(`/inspection-report/file/file/documentPage`, params, function (res) {
if (res && res.data) {
dataList.value = res.data;
}
})
}
/**
* 树节点点击
* @param node
* @param data
*/
let nodeClick = (node, data) => {
let id = data.id;
currentNodeData.value = data;
getPage(id);
}
/**
* 视图按钮切换
* @param code
*/
let activeModel = (code) => {
activeBtn.value = code;
}
// 刷新
let reload = () => {
// 属性tree
setTimeout(function () {
let id = currentNodeData.value.id;
getPage(id);
getTree();
}, 1000)
}
/**
* 删除文档
* @param id 文档id
* @param type 文件夹或者文档
*/
let deleteDocument = (id, type) => {
let msg = "您确认删除该文件？";
if (type == 'folder') {
msg = "您确认删除该文件以及文件下的文件？";
}
proxy.$global.confirm(msg, function () {
// ok
proxy.$http.get(`/inspection-report/file/file/delete`, {id: id, type: type}, function (res) {
if (res && res.code == 0) {
proxy.$global.showMsg('删除成功！');
reload();
}
})
});
}
/**
* 展示添加弹框
* @param id 文档id
* @param type 文件夹或者文档
*/
let addDialogVisible = Vue.ref(false);
let docForm = Vue.ref({
name: '',
docNo: '',
type: '',
sort: 100
});
let showFolder = (flg) => {
docForm.value = {
name: '',
docNo: '',
type: '',
sort: 100
};
addDialogVisible.value = flg;
}
/**
* 添加文件夹
* @param id 文档id
* @param type 文件夹或者文档
*/
let addFolder = (id) => {
proxy.$refs[id].validate((valid) => {
if (valid) {
let params = docForm.value;
params.pid = currentNodeData.value.id;
// 新增
proxy.$http.get(`/inspection-report/file/file/insertFolder`, params, function (res) {
if (res && res.code == 0) {
proxy.$global.showMsg("新建成功！");
}
})
// 属性tree
reload();
showFolder(false);
} else {
console.log('error submit!!')
return false
}
})
}
/**
* 搜索
*/
let searchFile = () => {
getPage('');
// let id = currentNodeData.value.id;
// if (id) {
// getPage(id);
// } else {
// // 浏览器地址传文档id参数
// let docId = proxy.$global.getQueryVariable('docId');
// if (docId) {
// getPage(docId);
// } else {
// proxy.$global.showMsg('请选择文档类型!', 'warning');
// }
// }
}
// 用户授权
let showUserDialogVisible = Vue.ref(false);
let userFileRight = Vue.ref({}); // {roleIds: ["1"], usernames: ["admin"]}
let getCheckedFile = () => {
let arr = dataList.value.filter(function (v){
if(v.checked != undefined && v.checked == true){
return v;
}
})
if(arr.length == 0){
proxy.$global.showMsg('请选择需要授权的文档!', 'warning');
return;
}
if(arr.length == 1){
// 查询文件的权限
proxy.$http.get(`/inspection-report/doc/doc/auth/getGrant`, {docId:arr[0].id}, function (res) {
if (res && res.code == 0) {
let map = res.map;
if(map){
userFileRight.value = res.map;
}
}
})
} else {
// 多文件不查询权限
userFileRight.value = {};
}
return arr;
}
// 用户授权弹框
let showUserDialog = (flg) => {
if(flg){
let arr = getCheckedFile();
if(arr && arr.length > 0){
showUserDialogVisible.value = flg;
}
} else {
showUserDialogVisible.value = flg;
}
}
// 获取用户选择的权限
let selectUser = (userObj) => {
let userIds = userObj.user.map(function (v) {
return v.username;
});
let roleCodes = userObj.role.map(function (v) {
return v.code;
});
let docIds = getCheckedFile().map(function (v){
return v.id;
});
// 保存用户权限
let params = {
docIds:docIds.join(','),
roleIds:roleCodes.join(','),
usernames:userIds.join(',')
}
proxy.$http.get(`/inspection-report/doc/doc/auth/grant`, params, function (res) {
if (res && res.code == 0) {
proxy.$global.showMsg('授权成功!');
} else {
proxy.$global.showMsg('授权失败!', 'warning');
}
})
// 隐藏授权弹框
showUserDialog(false);
}
// 上传
let showUploadDialogVisible = Vue.ref(false);
/**
* 上传
*/
let showUploadFile = (flg) => {
showUploadDialogVisible.value = flg;
}
let uploadCallBack = () =>{
}
/**
* 挂载完
*/
Vue.onMounted(() => {
// 参数是否传文档id
let docId = proxy.$global.getQueryVariable('docId');
if (!docId) {
getTree();
} else {
layout.value = {
left: 0,
right: 24
}
getPage(docId);
}
})
return {
/* viewEdit,*/
iconclass,
layout,
height,
treeData,
getFile,
columns,
dataList,
total,
defaultKeys,
nodeClick,
keyWord,
searchFile,
showUploadFile,
activeBtn,
activeModel,
deleteDocument,
currentNodeData,
docForm,
addFolder,
addDialogVisible,
showFolder,
showUserDialogVisible,
userFileRight,
selectUser,
showUserDialog,
showUploadDialogVisible
}
}
}
... ...
... ... @@ -114,7 +114,6 @@ export default {
},
watch: {},
mounted() {
console.log(111111111111);
let that = this;
//加载资源列表
const { proxy } = Vue.getCurrentInstance()
... ...
<div class="tree-container" :style="{'height':height+'px','max-height':height+'px','overflow':'hidden','padding':'0px'}">
<div class="filter-view">
<div class="filter-view" v-if="showSearch">
<el-input v-model="filterText" size="samll" placeholder="请输入关键字" />
</div>
<div :style="{'height':height+'px','max-height':(height - 54)+'px','overflow':'auto','padding':'0px'}">
... ... @@ -7,7 +7,7 @@
<template #default="{ node, data }">
<div class="tree-node">
<div class="tree-node-label">{{ node.label }}</div>
<div class="tree-node-tools">
<div class="tree-node-tools" v-if="showTools">
<a @click="append(data)">
<i class="el-icon-plus"></i>
</a>
... ...
... ... @@ -5,6 +5,11 @@ export default {
name: 'restypetree',
template: '',
components: {},
props:{
treeData:[],
showTools:false,
showSearch:false
},
data() {
return {
props : {
... ... @@ -15,9 +20,9 @@ export default {
},
setup() {
let height = Vue.ref(window.innerHeight - 130);
const treeNodeData = Vue.ref('');
const filterText = Vue.ref('');
const {proxy} = Vue.getCurrentInstance();
const treeData = Vue.ref([]);
// 添加树节点
let append = (data) => {
... ... @@ -67,7 +72,7 @@ export default {
return {
height,
treeData,
treeNodeData,
append,
remove,
filterText,
... ...
<div>
<!-- 表格-->
<el-table :border="showBorder" v-loading="loading" :data="dataList" stripe header-row-class-name="tbl-header-class" :height="height"
style="width: 100%;margin: 0px 0px;">
<el-table-column v-if="showIndex" type="index" :label="indexLabel" align="center" width="50"/>
<el-table-column v-if="showSelection" type="selection" width="55" />
<el-table-column v-for="item in columns" :prop="item.prop" :label="item.label" :sortable="item.sortable == undefined ? false : item.sortable" :align="item.align == undefined ? 'center' : item.align "
:width="item.width">
<template #default="scope" v-if="item.prop =='resName'">
<el-link type="primary" @click="openDetailPage(scope.row)">{{scope.row.resName}}</el-link>
</template>
<template #default="scope" v-else>
<div v-if="typeof(item.render) == 'function'" >
<div v-if="typeof(item.click) == 'function'">
<el-link type="primary" @click="item.click(scope.row)" v-html="item.render(scope.row)"></el-link>
</div>
<div v-else>
<el-link type="primary" v-html="item.render(scope.row)"></el-link>
</div>
</div>
<span v-else>
{{scope.row[item.prop]}}
</span>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div style='text-align: center;background-color: white' v-if="showPage">
<el-pagination
@size-change="handleSizeChange"
@prev-click="prePage"
@next-click="nextPage"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
:layout="layout"
:total="total">
</el-pagination>
</div>
</div>
... ...
/**
* 分页表格组件
*/
export default {
name: 'tablePageIndex',
template: '',
components: {},
props: {
// 展示分页
showPage: {
type: Boolean,
default: true
},
showBorder: {
type: Boolean,
default: true
},
// 高度
height: {
type: Number,
default: window.innerHeight
},
// 展示下标
showIndex: {
type: Boolean,
default: true
},
showSelection: {
type: Boolean,
default: false
},
indexLabel: {
type: String,
default: '序号'
},
currentPage: {
type: Number,
default: 1
},
// 分页页码设置
pageSizes: {
type: Array,
default: [50,100, 200, 300, 400]
},
// 默认展示
pageSize: {
type: Number,
default: 100
},
// 总数
total: {
type: Number,
default: 0
},
// 展示组件
layout: {
type: String,
default: "total, sizes, prev, pager, next, jumper"
},
// 列
columns: {
type: Array,
default: []
},
// 数据
dataList: {
type: Array,
default: []
},
loading:{
type: Boolean,
default: false
},
},
data() {
return {}
},
setup(props, {attrs, slots, emit}) {
let callback = () =>{
emit('loaddata',props)
console.log("sssssssssssssssssssssss")
}
// 每页展示多少条
let handleSizeChange = (val) => {
// console.log(`每页 ${val} 条`)
props.pageSize = val;
callback();
}
// 切换页码
let handleCurrentChange = (val) => {
// console.log(`当前页: ${val}`)
props.currentPage = val;
callback();
}
// 切换页码
let prePage = (val) => {
// console.log(`当前页: ${val}`)
props.currentPage = val - 1;
callback();
}
// 切换页码
let nextPage = (val) => {
// console.log(`当前页: ${val}`)
props.currentPage = val + 1;
callback();
}
// 监听编辑状态
// Vue.watch(() => filterText.value, (newValue, oldVlaue) => {
// proxy.$refs.tree.filter(newValue)
// });
// 挂载完
Vue.onMounted(() => {
})
return {
handleSizeChange,
handleCurrentChange,
prePage,
nextPage
}
}
}
... ...
<cm-dialog title="文件上传" width="500px" :showDialogVisible="show" @hidedialog="hidedialog" @okfunc="uploadFile" okText="上传">
<template v-slot>
<el-upload
:accept="accept"
ref="upload"
:http-request="getFile"
:multiple="true"
:auto-upload="false">
<template #trigger>
<el-button size="small" type="primary">选择则文件</el-button>
</template>
支持格式：
<el-tooltip placement="top" effect="light">
<template #content>
{{accept}}
</template>
<i class="el-icon-chat-round"></i>
</el-tooltip>
<template #tip>
<div class="el-upload__tip">
文件命名规范建议：以文档编号+"-" 开头，如：3101-基本信息.xls
</div>
</template>
</el-upload>
</template>
</cm-dialog>
... ...
/**
* 分页表格组件
*/
export default {
name: 'upLoadIndex',
template: '',
components: {},
props: {
showDialogVisible: {
type: Boolean,
default: false
},
fileList: {
type: Array,
default: []
},
callbackApi:{
type: String,
default: ''
},
accept: {
type: String,
default: [".3gpp",
'.ac3',
'.asf',
'.au',
'.csv',
'.doc',
'.dot',
'.dtd',
'.dwg',
'.dxf',
'.gif',
'.jp2',
'.jpe',
'.jpeg',
'.jpg',
'.json',
'.mp2',
'.mp3',
'.mp4',
'.mpeg',
'.mpg',
'.mpp',
'.ogg',
'.pdf',
'.png',
'.pot',
'.pps',
'.ppt',
'.rtf',
'.svf',
'.tif',
'.tiff',
'.txt',
'.wdb',
'.wps',
'.xlc',
'.xlm',
'.xls',
'.xlt',
'.xlw',
'.xml',
'.zip',
'.rar',
'.docx',
'.xlsx',
'.sql',
'.html',
'.js',
'.css'].join(',')
}
},
data() {
return {}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 展示弹框
let show = Vue.ref(false);
let hidedialog = () => {
emit('hideDialog', false);
}
let getFile = (param) =>{
console.log(param)
let fileObj = param.file
}
// 上传按钮点击
let uploadFile = () => {
proxy.$refs.upload.submit()
}
// 监听编辑状态
Vue.watch(
() => props.showDialogVisible, (newValue, oldVlaue) => {
show.value = newValue;
}
);
/**
* 挂载完
*/
Vue.onMounted(() => {
})
return {
getFile,
show,
uploadFile,
hidedialog
}
}
}
... ...
<cm-dialog title="用户授权" width="900px" :showDialogVisible="show" @hidedialog="hidedialog" @okfunc="getUser">
<template v-slot>
<el-transfer v-model="value" :props="props" filterable
:render-content="renderFunc"
:data="userArr" :titles="['所有用户/角色', '已授权用户/角色']"
:button-texts="['取消', '授权']">
<!--<template #left-footer>
<el-button class="transfer-footer" size="small">Operation</el-button>
</template>-->
</el-transfer>
</template>
</cm-dialog>
... ...
/**
* 分页表格组件
*/
export default {
name: 'userRightIndex',
template: '',
components: {},
props: {
showDialogVisible: {
type: Boolean,
default: false
},
users: {
type: Array,
default: []
}
},
data() {
return {
props: {key: 'value', label: 'desc'}
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let v = Vue.ref(props.users);
let userArr = Vue.ref([]);
const getAllUser = () => {
// 查询全部用户
proxy.$http.get("/api-user/users?page=1&limit=10000&username=&nickname=&enabled=&orgId=&roles=", {}, function (res) {
if (res && res.data) {
res.data.map(function (v) {
let desc = [];
let orgName = v.orgName;
let nickname = v.nickname;
if (orgName) {
desc.push(orgName);
}
if (nickname) {
desc.push(nickname);
}
userArr.value.push({
value: v.username,
type:'USER',
desc: `${desc.join(' / ')}`,
props : v
})
});
}
})
// 查询全部角色
proxy.$http.get("/api-user/roles?page=1&limit=10000", {}, function (res) {
if (res && res.data) {
res.data.map(function (v) {
let desc = [];
let code = v.code;
let name = v.name;
if (name) {
desc.push(name);
}
if (code) {
desc.push(code);
}
userArr.value.push({
value: v.id,
type:'ROLE',
desc: `${desc.join(' / ')}`,
props : v
})
});
}
})
}
let hidedialog = () => {
emit('hideDialog', false);
}
let getUser = () => {
let arr = v.value;
if (!arr || arr.length == 0) {
proxy.$global.showMsg("您没有选择用户！", "warning")
return;
}
let user = [];
let role = [];
userArr.value.filter(function (v){
if(arr.indexOf(v.value) != -1){
if(v.type == 'ROLE'){
role.push(v.props);
} else {
user.push(v.props);
}
}
})
let data = {
user:user,
role:role
}
emit('callback', data);
}
let renderFunc = (h, option) =>{
let desc = option.desc;
let type = option.type;
let tag = "用户";
let isUser = true;
if(type == 'ROLE'){
isUser = false;
tag = "角色";
}
return h('div',{
class: {
'userright': true
}
}, [
h('span',{
class: {
'userright-desc': true
},
title:desc
}, desc),
h('span',{
class: {
'userright-tag': true,
'users': isUser,
'roles': !isUser
}
},tag)
])
}
// 展示弹框
let show = Vue.ref(false);
// 监听编辑状态
Vue.watch(
() => props.showDialogVisible, (newValue, oldVlaue) => {
show.value = newValue;
},
() => props.users, (newValue, oldVlaue) => {
v.value = newValue;
}
);
/**
* 挂载完
*/
Vue.onMounted(() => {
getAllUser();
})
return {
show,
hidedialog,
userArr,
value: v,
getUser,
renderFunc
}
}
}
... ...
... ... @@ -40,5 +40,5 @@ export default {
oldVal,
changeProperty
};
},
}
}
... ...
... ... @@ -23,11 +23,21 @@ Promise.all([
// 全局注册公共组件
// 下拉列表资源树
.component('res-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputrestypetree/index')))
.component('cm-res-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputrestypetree/index')))
// 机房下拉
.component('machine-room',Vue.defineAsyncComponent(() => myImport('components/common/machineroom/index')))
.component('cm-machine-room',Vue.defineAsyncComponent(() => myImport('components/common/machineroom/index')))
// 资源类型树
.component('res-type-tree-view',Vue.defineAsyncComponent(() => myImport('components/common/restypetree/index')));
.component('cm-res-type-tree-view',Vue.defineAsyncComponent(() => myImport('components/common/restypetree/index')))
// 资源类型树
.component('cm-table-page',Vue.defineAsyncComponent(() => myImport('components/common/table-page/index')))
// 弹框
.component('cm-dialog',Vue.defineAsyncComponent(() => myImport('components/common/dialog/index')))
// 用户授权
.component('cm-userright',Vue.defineAsyncComponent(() => myImport('components/common/userright/index')))
// 上传组件
.component('cm-upload',Vue.defineAsyncComponent(() => myImport('components/common/upload/index')))
// 文档管理
.component('cm-document',Vue.defineAsyncComponent(() => myImport('components/common/document/index')));
app.config.globalProperties.$global = res[3].default
app.config.globalProperties.$http = res[4].default
... ...
... ... @@ -3,7 +3,7 @@ window.myImport = (url) => {
return new Promise((resolve, reject) => {
const ver = window.__ver || ''
const baseUrl = window.__basrUrl || '/src/'
console.log("加载组件===>"+baseUrl + url)
// console.log("加载组件===>"+baseUrl + url)
// 先加载js
import(baseUrl + url + '.js' + ver).then((resjs) => {
const js = resjs.default
... ...
... ... @@ -29,12 +29,87 @@ global.showLoading = (callback) => {
return loading;
}
/**
* 提示消息
* @param msg
* @param type "success", "warning", "info", "error"
*/
global.showMsg = (msg, type) => {
if(!type){
type = 'success';
}
global.showMsg = (msg, type = 'success') => {
if(type == 'success'){
ElementPlus.ElMessage.success({
showClose: true,
message: msg,
type: type,
})
} else if(type == 'warning'){
ElementPlus.ElMessage.warning({
showClose: true,
message: msg,
type: type,
})
} else if(type == 'info'){
ElementPlus.ElMessage.info({
showClose: true,
message: msg,
type: type,
})
}else if(type == 'error'){
ElementPlus.ElMessage.error({
showClose: true,
message: msg,
type: type,
})
}
}
global.confirm = (msg,okFunc,cancelFunc) =>{
ElementPlus.ElMessageBox.confirm(
msg,
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
if(typeof(okFunc) == 'function'){
okFunc();
}
}).catch(() => {
if(typeof(cancelFunc) == 'function'){
cancelFunc();
}
})
}
/**
* 获取url参数
* @param variable
* @returns {string|boolean}
*/
global.getQueryVariable = (variable) => {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
global.viewer = (path) =>{
window.open("/src/lib/extend/pdfjs/web/viewer.html?test=" + encodeURIComponent(path));
}
// 组件默认大小
global.elementSize = 'small';
export default global
... ...
... ... @@ -5,11 +5,11 @@
</el-input>
</el-form-item>
<el-form-item label="" :disabled="initFlga">
<res-type-tree-input multiple clearable collapseTags @callback="getResType" />
<cm-res-type-tree-input multiple clearable collapseTags @callback="getResType" />
</el-form-item>
<el-form-item label="">
<machine-room @callback="getMachineRoom"></machine-room>
<cm-machine-room @callback="getMachineRoom"></cm-machine-room>
</el-form-item>
<el-form-item>
... ...
<title>文档管理</title>
<iframe src="/vue3/index.html#/documentationManagement" class="layadmin-iframe"/>
<iframe src="/vue3/index.html#/documentationManagement" class="layadmin-iframe" style="height: 99.5%!important;"/>
... ...
... ... @@ -21,8 +21,7 @@
.tree-config .tree-node .tree-node-label{
width: calc(100% - 40px);
text-align: left;
width: calc(100% - 40px);text-align: left;
}
.tree-config .tree-node .tree-node-tools{
... ...
<div class="assets-configmanagers">
<!-- 文档管理-->
<div>
<!-- 左侧树结构 -->
<el-row>
<el-col :span="6" class='col-class'>
<el-tree :data="dataSource" :default-expanded-keys="[1]" :props="defaultProps" @node-click="handleNodeClick" />
</el-col>
<!-- 右侧显示 -->
<el-col :span="17" class='col-class'>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="<" name="first">
<el-table :data="tableData" header-row-class-name="tbl-header-class" height="800px" style="width: 100%;margin: 20px 0;">
<el-table-column type="index" label="序号" align="center" width="50" />
<el-table-column prop="name" label="文件" min-width="380" >
<template #default="scope">
<el-link type="primary">{{scope.row.name}}</el-link>
</template>
</el-table-column>
<el-table-column prop="createTime" label="时间" align="center" min-width="180" />
</el-table>
</el-tab-pane>
<el-tab-pane label=">" name="second">
<el-table :data="tableData" header-row-class-name="tbl-header-class" height="800px" style="width: 100%;margin: 20px 0;">
<el-table-column type="index" label="序号" align="center" width="50" />
<el-table-column prop="name" label="文件" min-width="380" >
<template #default="scope">
<img style="width: 50px; height: 50px" src="./1.png"/>
<span>{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column prop="createTime" label="时间" align="center" min-width="180" />
<!-- <el-table-column prop="name" label="文件名称" align="center" min-width="180" >-->
<!-- <template #default="scope">-->
<!-- <span>{{scope.row.name}}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</el-tab-pane>
</el-tabs>
<div style="text-align: center">
<el-pagination @size-change="handleSizeChange"
@prev-click="prePage"
@next-click="nextPage"
@current-change="handleCurrentChange"
:current-page="pageInfo.page" :page-sizes="[50,100, 150, 200]" :page-size="pageInfo.limit"
layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" />
</div>
</el-col>
</el-row>
</div>
<div class="container">
<cm-document></cm-document>
</div>
... ...
... ... @@ -3,135 +3,13 @@ export default {
template: '',
setup(props, {attrs, slots, emit}) {
const { proxy } = Vue.getCurrentInstance()
let options= Vue.ref([
{
value: 'HTML',
label: 'HTML',
},
{
value: 'CSS',
label: 'CSS',
},
{
value: 'JavaScript',
label: 'JavaScript',
},
])
let activeName= Vue.ref('first')
let value= Vue.ref([])
let imageUrl = Vue.ref('')
let rowData = Vue.ref('5')
let dialogVisible = Vue.ref(false)
let dialogVisibles = Vue.ref(false)
let tableData = Vue.ref([])
let dataSource = Vue.ref([]);
let ruleForm = Vue.ref({
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
})
// 分页信息
const pageInfo = Vue.reactive({
total: 0,
limit: 50,
page: 1,
keyWords:''
})
let handleCell=(row)=>{
// this.$set(row,'show',true)
console.log(data)
}
// 搜索
let onSearch = () => {
var params = {
// page: pageInfo.page,
// limit: pageInfo.limit,
resName: 'admin',
// sortKey: '',
// resType: resTypeArr.value.join(','),
// resPositon: machineRoom.value,
// addr: '',
// maintenanceTimeEnd: '',
// maintenanceTimeStart: '',
// resCategory: 'assets'
};
proxy.$http.get("/inspection-report/file/file/all", params, function (res) {
if (res && res.data) {
tableData.value = res.data;
console.log(tableData,'tableDatatableData');
} else {
proxy.$global.showMsg('暂无数据！');
}
},function (){
proxy.$global.showMsg('没有查询到记录！');
});
var obj={
category:'id_fxbg_netsys_month',
name:'网络系统月度报告',
id:'id_fxbg_netsys_month',
}
proxy.$http.get("/inspection-report/file/file/page", obj, function (res) {
if (res && res.data) {
tableData.value = res.data;
} else {
proxy.$global.showMsg('暂无数据！');
}
},function (){
proxy.$global.showMsg('没有查询到记录！');
});
proxy.$http.get("/inspection-report/file/file/count",'', function (res) {
if (res && res.data) {
tableData.value = res.data;
} else {
proxy.$global.showMsg('暂无数据！');
}
},function (){
proxy.$global.showMsg('没有查询到记录！');
});
handleTree()
}
let handleNodeClick=(data)=> {
handleTree(data.id)
console.log(data)
}
let handleTree=(id)=>{
id=id?id:'分析报告'
var objs={
id:id
}
proxy.$http.get("/inspection-report/file/file/sort", objs, function (res) {
if (res && res.data) {
dataSource.value = res.data;
} else {
proxy.$global.showMsg('暂无数据！');
}
},function (){
proxy.$global.showMsg('没有查询到记录！');
});
}
Vue.onMounted(() => {
onSearch()
})
return {
activeName,
handleNodeClick,
handleTree,
pageInfo,
onSearch,
tableData,
value,
options,
handleCell,
ruleForm,
dataSource,
};
},
}
... ...
... ... @@ -8,134 +8,7 @@
</el-col>
<!-- 右侧显示 -->
<el-col :span="19" class='col-class'>
<div>
<div>
<!-- 人员信息总汇-->
<el-divider content-position="left">人员信息总汇</el-divider>
<el-table border :data="tableData" stripe header-row-class-name="tbl-header-class" height="200px" style="width: 100%;margin: 20px 0;">
<el-table-column type="index" label="序号" align="center" width="50" />
<el-table-column prop="date" sortable label="运维人员姓名" align="center" min-width="180" />
<el-table-column prop="name" sortable label="在职状态" align="center" min-width="180" />
<el-table-column prop="name" sortable label="个人信息" align="center" min-width="180" >
<template #default="scope">
<span
:class="[scope.row.address == '√' ? 'yes': '',scope.row.address == '×' ? 'no': '',]"
>
{{scope.row.name}}
</span>
</template>
</el-table-column>
<el-table-column prop="name" sortable label="个人保密协议" align="center" width="180">
<template #default="scope">
<span
:class="[scope.row.address == '√' ? 'yes': '',scope.row.address == '×' ? 'no': '',]"
>
{{scope.row.name}}
</span>
</template>
</el-table-column>
<el-table-column prop="name" sortable label="月度总结" align="center" width="180" >
<template #default="scope">
<span
:class="[scope.row.address == '√' ? 'yes': '',scope.row.address == '×' ? 'no': '',]"
>
{{scope.row.name}}
</span>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div style='text-align: left;'>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</div>
<div>
<!-- 项目评价总汇-->
<el-divider content-position="left">项目评价总汇</el-divider>
<el-table border :data="tableData" stripe header-row-class-name="tbl-header-class" height="200px" style="width: 100%;margin: 20px 0;">
<el-table-column type="index" label="序号" align="center" width="50" />
<el-table-column prop="date" label="年度" align="center" width="100" />
<el-table-column prop="name" label="1月" align="center" width="100" />
<el-table-column prop="name" label="2月" align="center" width="100" />
<el-table-column prop="name" label="3月" align="center" width="100" />
<el-table-column prop="name" label="4月" align="center" width="100" />
<el-table-column prop="name" label="5月" align="center" width="100" />
<el-table-column prop="name" label="6月" align="center" width="100" />
<el-table-column prop="name" label="7月" align="center" width="100" />
<el-table-column prop="name" label="8月" align="center" width="100" />
<el-table-column prop="name" label="9月" align="center" width="100" />
<el-table-column prop="name" label="10月" align="center" width="100" />
<el-table-column prop="name" label="11月" align="center" width="100" />
<el-table-column prop="name" label="12月" align="center" width="100" />
</el-table>
<!-- 分页 -->
<div style='text-align: left;'>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</div>
<div>
<!-- 项目资料总汇-->
<el-divider content-position="left">项目资料总汇</el-divider>
<el-table border :data="tableData" stripe header-row-class-name="tbl-header-class" height="200px" style="width: 100%;margin: 20px 0;">
<el-table-column prop="date" label="日常资料" align="center" min-width="100" >
<template #default="scope">
<span
:class="[scope.row.address == '√' ? 'yes': '',scope.row.address == '×' ? 'no': '',]"
>
{{scope.row.name}}
</span>
</template>
</el-table-column>
<el-table-column prop="date" label="文档资料" align="center" min-width="100" >
<template #default="scope">
<span
:class="[scope.row.address == '√' ? 'yes': '',scope.row.address == '×' ? 'no': '',]"
>
{{scope.row.name}}
</span>
</template>
</el-table-column>
<el-table-column prop="name" label="项目保密协议" align="center" min-width="100" >
<template #default="scope">
<span
:class="[scope.row.address == '√' ? 'yes': '',scope.row.address == '×' ? 'no': '',]"
>
{{scope.row.name}}
</span>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div style='text-align: left;'>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</div>
</div>
<!-- 表单 -->
<div>
<el-form
... ...
<!--:style="{'height':height+'px','max-height':height+'px','overflow':'auto'}"-->
<div class="container tree-config" >
<div class="container tree-config" :style="{'height':height+'px','max-height':height+'px','overflow':'auto'}">
<el-row :gutter="5">
<el-col :span="4" >
<div class="card-item">
<div class="filter-view">
<el-input v-model="filterText" size="samll" placeholder="请输入关键字" />
</div>
<div :style="{'height':height+'px','max-height':(height - 54)+'px','overflow':'auto','padding':'0px'}">
<el-tree ref="tree" style="padding:6px;" :props="props" :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false">
<template #default="{ node, data }">
<div class="tree-node">
<div class="tree-node-label">{{ node.label }}</div>
</div>
</template>
</el-tree>
</div>
</div>
<cm-res-type-tree-view :treeData="treeData" :show-tools="true"></cm-res-type-tree-view>
</el-col>
<el-col :span="20" >
<div class="card-item">
... ...
... ... @@ -16,7 +16,7 @@ export default {
},
setup() {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight);
let height = Vue.ref(window.innerHeight - 50);
const treeData = Vue.ref([]);
const tableData = Vue.ref([]);
... ...