release-v1.0 #1
@ -75,11 +75,11 @@ body #app .hideSidebar .sidebar-container {
|
||||
width: 65px !important;
|
||||
}
|
||||
body #app .openSidebar .sidebar-container {
|
||||
width:205px !important;
|
||||
width:180px !important;
|
||||
}
|
||||
body #app .sidebar-container .nest-menu .el-sub-menu>.el-sub-menu__title,
|
||||
body #app .sidebar-container .el-sub-menu .el-menu-item {
|
||||
min-width: 205px!important;
|
||||
min-width: 180px!important;
|
||||
}
|
||||
body #app .sidebar-container .scrollbar-wrapper {
|
||||
padding-bottom: 95px;
|
||||
@ -336,7 +336,7 @@ body .hideSidebar .el-submenu__title i.icon-zhiliang-xianxing{
|
||||
}
|
||||
body #app .sidebar-container .el-submenu .el-menu-item,
|
||||
body #app .sidebar-container .nest-menu .el-submenu>.el-submenu__title {
|
||||
min-width: 205px!important;
|
||||
min-width: 180px!important;
|
||||
}
|
||||
|
||||
/*main-container 右侧内容*/
|
||||
@ -344,7 +344,7 @@ body #app .hideSidebar .main-container {
|
||||
margin-left: 65px;
|
||||
}
|
||||
body #app .main-container {
|
||||
margin-left: 205px;
|
||||
margin-left: 180px;
|
||||
background:#f9fafe;
|
||||
background-size:100%;
|
||||
}
|
||||
@ -372,10 +372,10 @@ body #app .main-container .el-breadcrumb{
|
||||
margin: 0 40px 0 40px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
body #app .main-container .el-breadcrumb .float-right{
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
body #app .main-container .app-breadcrumb.el-breadcrumb .no-redirect{
|
||||
color: #a4a4a4 !important;
|
||||
}
|
||||
@ -386,7 +386,7 @@ body #app .main-container .app-breadcrumb.el-breadcrumb .el-breadcrumb__inner:ho
|
||||
body #app .main-container .app-breadcrumb.el-breadcrumb .el-breadcrumb__inner:hover a,
|
||||
body #app .main-container .app-breadcrumb.el-breadcrumb .el-breadcrumb__inner a:hover{
|
||||
color:#004098 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*hamburger-container 展开折叠菜单按钮*/
|
||||
body #app .app-wrapper .main-container .navbar .hamburger-container{
|
||||
@ -403,16 +403,16 @@ body #app .app-wrapper .main-container .navbar .hamburger-container{
|
||||
font-size:22px !important;
|
||||
background:#fff;
|
||||
transition: width .28s;
|
||||
}
|
||||
}
|
||||
body #app .app-wrapper.hideSidebar .navbar .hamburger-container{
|
||||
width: 65px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
body #app .main-container .navbar .hamburger-container *{
|
||||
color:#5F5E5E !important;
|
||||
font-size:22px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*navbar 顶部导航*/
|
||||
body #app .main-container .navbar{
|
||||
@ -558,14 +558,14 @@ body #app .main-container .tags-view-container{
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .scroll-container{
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .scroll-container .el-scrollbar__wrap{
|
||||
height: 61px;
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .scroll-container .el-scrollbar__wrap .el-scrollbar__view{
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .scroll-container .el-scrollbar__wrap .el-scrollbar__view .tags-view-item{
|
||||
margin-top: 10px;
|
||||
margin-left:0;
|
||||
@ -577,10 +577,10 @@ body #app .main-container .tags-view-container .scroll-container .el-scrollbar_
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding:0 15px;
|
||||
position:relative;
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .scroll-container .el-scrollbar__wrap .el-scrollbar__view>.tags-view-item:first-child{
|
||||
margin-left:20px !important;
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .scroll-container .el-scrollbar__wrap .el-scrollbar__view .tags-view-item:before{
|
||||
content:"";
|
||||
display:block;
|
||||
@ -590,27 +590,27 @@ body #app .main-container .tags-view-container .scroll-container .el-scrollbar_
|
||||
width:1px;
|
||||
height:10px;
|
||||
background:#B4B0B0;
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .scroll-container .el-scrollbar__wrap .el-scrollbar__view>.tags-view-item:first-child:before{
|
||||
content:none;
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .scroll-container .el-scrollbar__wrap .el-scrollbar__view .tags-view-item.active:before{
|
||||
content:none;
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .scroll-container .el-scrollbar__wrap .el-scrollbar__view .tags-view-item.active+.tags-view-item:before{
|
||||
content:none;
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .scroll-container .el-scrollbar__wrap .el-scrollbar__view .tags-view-item.active,
|
||||
body #app .main-container .tags-view-container .scroll-container .el-scrollbar__wrap .el-scrollbar__view .tags-view-item.active:hover{
|
||||
background:#0E48AD !important;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .scroll-container .el-scrollbar__wrap .el-scrollbar__view .tags-view-item:hover{
|
||||
color:#013A9D;
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .scroll-container .el-scrollbar__wrap .el-scrollbar__view .tags-view-item.active:before{
|
||||
content:none;
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .tags-view-wrapper .tags-view-item .el-icon-close{
|
||||
font-size: 14px;
|
||||
vertical-align: 1px;
|
||||
@ -620,22 +620,22 @@ body #app .main-container .tags-view-container .tags-view-wrapper .tags-view-it
|
||||
height: 15px;
|
||||
color: #707070;
|
||||
margin: 0 0 0 6px;
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .tags-view-wrapper .tags-view-item .el-icon-close:hover{
|
||||
background:#aaa;
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .tags-view-wrapper .tags-view-item .el-icon-close:before{
|
||||
vertical-align: -1px;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .tags-view-wrapper .tags-view-item.active .el-icon-close{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
body #app .main-container .tags-view-container .tags-view-wrapper .tags-view-item.active .el-icon-close:hover{
|
||||
background:#fff;
|
||||
color:#013A9D;
|
||||
}
|
||||
}
|
||||
|
||||
/*el-row*/
|
||||
body .el-row+.el-row{
|
||||
@ -664,15 +664,15 @@ body .el-card{
|
||||
body .el-card .el-card__body{
|
||||
position:relative;
|
||||
padding: 16px !important;
|
||||
}
|
||||
}
|
||||
body .el-card .no-cont{
|
||||
padding: 75px 0;
|
||||
height: 275px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
body .el-card .no-cont .img img{
|
||||
width:100px;
|
||||
}
|
||||
}
|
||||
body .el-card .el-card__header{
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
@ -681,7 +681,7 @@ body .el-card .el-card__header{
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
background:transparent;
|
||||
}
|
||||
}
|
||||
body .el-card .el-card__header .title{
|
||||
display: inline-block;
|
||||
position:relative;
|
||||
@ -695,7 +695,7 @@ body .el-card .el-card__header .title:before{
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
background: #004098;
|
||||
}
|
||||
}
|
||||
body .el-card .el-card__header .clearfix{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -737,7 +737,7 @@ body .el-card .el-card__header .clearfix .header-button .el-button.el-button--pr
|
||||
background:#3071b9;
|
||||
border-color:#3071b9;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
body .el-card .el-card__header .clearfix .header-button .el-button.el-button--info{
|
||||
background: #F2F3F5;
|
||||
border: 1px dashed #E5E6EB;
|
||||
@ -751,12 +751,12 @@ body .el-card .el-card__header .clearfix .header-button .el-button.el-button--in
|
||||
body .el-card .el-card__header .small-title{
|
||||
color: #141414;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
body .el-card .el-card__header .el-button{
|
||||
line-height: 22px;
|
||||
height: 24px;
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
}
|
||||
body .el-drawer .el-drawer__body .el-card.box-card{
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
@ -777,10 +777,10 @@ body .el-drawer__wrapper.no-padding .el-drawer .el-drawer__body{
|
||||
/*el-form 表单组件*/
|
||||
body .el-form-item{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
body .el-form .el-row{
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
body .el-form-item .el-form-item__label {
|
||||
color: #5e5e5e;
|
||||
font-weight:normal;
|
||||
@ -886,7 +886,7 @@ body .el-form-border .el-form-item .el-checkbox-group .el-checkbox{
|
||||
body .el-input-group{
|
||||
background: transparent;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
body .el-input-group .el-input__inner{
|
||||
background: #fff;
|
||||
border-color: #DCDFE6;
|
||||
@ -894,20 +894,20 @@ body .el-input-group .el-input__inner{
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-width:0px;
|
||||
}
|
||||
}
|
||||
body .el-input-group .el-input__inner:hover{
|
||||
border-color: #DCDFE6;
|
||||
}
|
||||
}
|
||||
body .el-input.el-input-group .el-input__inner:focus,
|
||||
body .el-input.el-input-group .el-input__inner:hover {
|
||||
border-color:#DCDFE6;
|
||||
}
|
||||
.el-input-group .el-input__prefix{
|
||||
}
|
||||
}
|
||||
.el-input-group .el-input__prefix .el-icon-search{
|
||||
color: #A7A7A7;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.el-input-group .el-input-group__append,
|
||||
.el-input-group .el-input-group__append:hover{
|
||||
background: transparent;
|
||||
@ -916,10 +916,10 @@ body .el-input.el-input-group .el-input__inner:hover {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
position:relative;
|
||||
}
|
||||
}
|
||||
.el-input-group .el-input-group__append:before{
|
||||
content:none;
|
||||
}
|
||||
}
|
||||
.el-input-group .el-input-group__append .el-button,
|
||||
.el-input-group .el-input-group__append .el-button:hover{
|
||||
width: auto;
|
||||
@ -931,19 +931,19 @@ body .el-input.el-input-group .el-input__inner:hover {
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
border-radius: 0 2px 2px 0 !important;
|
||||
}
|
||||
}
|
||||
.el-input-group .el-input-group__append .el-button:hover{
|
||||
|
||||
}
|
||||
}
|
||||
.el-input-group .el-input-group__append .el-button i{
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
line-height:32px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.el-input-group .el-input-group__append .el-button:hover i{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*el-button 组件按钮*/
|
||||
body .el-button{
|
||||
@ -954,33 +954,49 @@ body .el-button{
|
||||
padding-bottom: 0;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
body .el-button,body .el-button:focus{
|
||||
background: #fff;
|
||||
border-color: #DCDFE6;
|
||||
color: #515151;
|
||||
}
|
||||
}
|
||||
body .el-button:hover{
|
||||
background:#fff;
|
||||
border-color:#004098;
|
||||
color:#004098;
|
||||
}
|
||||
body .el-button.el-button--primary{
|
||||
}
|
||||
body .el-button.el-button--primary,
|
||||
body .el-button.el-button--primary.is-plain,
|
||||
body .el-button.el-button--primary:focus,
|
||||
body .el-button.el-button--primary.is-plain:focus{
|
||||
background:#004098;
|
||||
border-color:#004098;
|
||||
color: #fff;
|
||||
}
|
||||
body .el-button.el-button--primary:hover{
|
||||
}
|
||||
body .el-button.el-button--primary:hover,
|
||||
body .el-button.el-button--primary.is-plain:hover{
|
||||
background:#3071b9;
|
||||
border-color:#3071b9;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
body .el-button.el-button--primary.is-disabled,
|
||||
body .el-button.el-button--primary[disabled],
|
||||
body .el-button.el-button--primary.is-disabled:hover,
|
||||
body .el-button.el-button--primary[disabled]:hover,
|
||||
body .el-button.el-button--primary.is-plain.is-disabled,
|
||||
body .el-button.el-button--primary.is-plain[disabled],
|
||||
body .el-button.el-button--primary.is-plain.is-disabled:hover,
|
||||
body .el-button.el-button--primary.is-plain[disabled]:hover{
|
||||
background: #7F9FCB;
|
||||
border-color: #7F9FCB;
|
||||
color: #fff;
|
||||
}
|
||||
body .el-button.el-button--text{
|
||||
color: #3071b9;
|
||||
}
|
||||
}
|
||||
body .el-button.el-button--text:hover{
|
||||
color: #0656e4;
|
||||
}
|
||||
}
|
||||
body .el-button+.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
@ -1013,15 +1029,22 @@ body .el-drawer .el-drawer__header{
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid rgba(0 0 0 / 5%);
|
||||
}
|
||||
}
|
||||
body .el-drawer .el-drawer__header .title{
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
color: #141414;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
body .el-drawer .el-drawer__header .drawer-head-btn .el-card.is-always-shadow,
|
||||
body .el-drawer .el-drawer__header .drawer-head-btn .el-card.is-hover-shadow{
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
body .el-drawer .el-drawer__header .drawer-head-btn .el-card .el-card__body{
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
.el-drawer .el-drawer__header .el-drawer__close-btn{
|
||||
display: inline-block;
|
||||
color: #666;
|
||||
@ -1030,17 +1053,17 @@ body .el-drawer .el-drawer__header .drawer-head-btn .el-card .el-card__body{
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.el-drawer .el-drawer__header .el-drawer__close-btn i{
|
||||
line-height: 26px;
|
||||
padding: 0;
|
||||
color: #515151;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
body .el-drawer .el-drawer__body{
|
||||
padding: 16px 32px;
|
||||
}
|
||||
}
|
||||
.el-drawer .el-drawer__body .registerbox {
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
@ -1049,22 +1072,22 @@ body .el-drawer .el-drawer__body{
|
||||
/*pagination-container 分页*/
|
||||
body .apparatus-card>.el-card__body .el-card.gray-card+.pagination-container{
|
||||
padding-bottom:20px !important;
|
||||
}
|
||||
}
|
||||
body .apparatus-card>.el-card__body .el-card.gray-card+.pagination-container .el-pagination{
|
||||
right:15px;
|
||||
}
|
||||
}
|
||||
body .el-card.gray-card+.pagination-container{
|
||||
margin-top: -3px !important;
|
||||
}
|
||||
}
|
||||
body .pagination-container{
|
||||
height: 28px !important;
|
||||
box-sizing: content-box !important;
|
||||
margin: 15px 0 0 !important;
|
||||
padding: 0 20px !important;
|
||||
}
|
||||
}
|
||||
body .pagination-container .el-pagination{
|
||||
padding:0 !important;
|
||||
}
|
||||
}
|
||||
body .el-pagination.is-background .el-pager li:not(.disabled).active,
|
||||
body .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
|
||||
background-color:#004098;
|
||||
@ -1075,7 +1098,7 @@ body .el-pagination.is-background .el-pager li:not(.disabled):hover{
|
||||
}
|
||||
body .el-pager li:hover{
|
||||
color: #004098;
|
||||
}
|
||||
}
|
||||
body .el-pager li.active {
|
||||
color: #004098;
|
||||
}
|
||||
@ -1098,11 +1121,11 @@ body .el-pagination{
|
||||
text-align: right;
|
||||
justify-content: flex-end;
|
||||
padding: 15px 0 0 0;
|
||||
}
|
||||
}
|
||||
body .news-card>.el-card__body .gray-card+.el-pagination,
|
||||
body .gray-card+.el-pagination{
|
||||
padding-top:0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*el-message-box 确认框组件*/
|
||||
.el-message-box .el-message-box__btns .el-button.el-button--default.el-button--primary,
|
||||
@ -1110,58 +1133,58 @@ body .gray-card+.el-pagination{
|
||||
background:#004098;
|
||||
border-color:#004098;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.el-message-box .el-message-box__btns .el-button.el-button--default.el-button--primary:hover,
|
||||
.el-message-box .el-message-box__btns .el-button.el-button--primary:hover{
|
||||
background:#3071b9;
|
||||
border-color:#3071b9;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.el-message-box .el-message-box__headerbtn:hover .el-message-box__close{
|
||||
color: #004098;
|
||||
}
|
||||
}
|
||||
|
||||
/*el-dialog 对话框组件*/
|
||||
body .el-dialog{
|
||||
border-radius:10px;
|
||||
}
|
||||
}
|
||||
body .el-dialog>.el-dialog__header{
|
||||
border-bottom: 1px solid #D5D3D3;
|
||||
padding: 15px 30px;
|
||||
height: 55px;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
body .el-dialog>.el-dialog__header .el-dialog__title{
|
||||
color: #000;
|
||||
font-size:16px;
|
||||
font-weight:bold;
|
||||
}
|
||||
}
|
||||
body .el-dialog>.el-dialog__header .el-dialog__headerbtn{
|
||||
top: 15px;
|
||||
font-size: 22px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
body .el-dialog>.el-dialog__header .el-dialog__headerbtn:hover,
|
||||
body .el-dialog>.el-dialog__header .el-dialog__headerbtn:hover i{
|
||||
color: #004098;
|
||||
}
|
||||
}
|
||||
body .el-dialog>.el-dialog__body,
|
||||
body .el-overlay .el-overlay-dialog .el-dialog>.el-dialog__body{
|
||||
padding:20px 30px !important;
|
||||
}
|
||||
}
|
||||
body .el-dialog>.el-dialog__footer{
|
||||
padding: 10px 30px;
|
||||
height: 55px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
body .el-dialog>.el-dialog__footer .dialog-footer{
|
||||
}
|
||||
}
|
||||
body .el-dialog>.el-dialog__footer .dialog-footer .el-button{
|
||||
padding: 9.5px 22px;
|
||||
}
|
||||
padding: 0 22px;
|
||||
}
|
||||
|
||||
/*el-input 输入框选择框文本框组件*/
|
||||
body .el-input__prefix{
|
||||
@ -1217,7 +1240,7 @@ body .el-textarea__inner{
|
||||
font-size: 14px;
|
||||
color: #141414;
|
||||
font-family: "-apple-system","BlinkMacSystemFont","Microsoft YaHei","system-ui";
|
||||
}
|
||||
}
|
||||
body .el-input__inner::-webkit-input-placeholder,
|
||||
body .el-textarea__inner::-webkit-input-placeholder {
|
||||
color:#B4B0B0;
|
||||
@ -1243,12 +1266,12 @@ body .el-date-editor .el-range-separator{
|
||||
body .el-switch{
|
||||
line-height: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
body .el-input__inner{
|
||||
height:34px;
|
||||
line-height:32px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
body .el-input .el-input__icon,
|
||||
body .el-select .el-input__icon{
|
||||
line-height:32px;
|
||||
@ -1257,30 +1280,30 @@ body .el-select .el-input__icon{
|
||||
body .el-input-number .el-input-number__decrease,
|
||||
body .el-input-number .el-input-number__increase{
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
body .el-input-number .el-input-number__decrease i,
|
||||
body .el-input-number .el-input-number__increase i{
|
||||
line-height:32px;
|
||||
}
|
||||
}
|
||||
body .el-input i,body .el-select i{
|
||||
line-height:32px;
|
||||
}
|
||||
}
|
||||
body .el-input .el-date-editor i{
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
color: #4E5969;
|
||||
}
|
||||
}
|
||||
body .el-date-editor.el-range-editor i{
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
color: #4E5969;
|
||||
}
|
||||
}
|
||||
body .el-radio-group .el-radio{
|
||||
line-height:34px;
|
||||
}
|
||||
}
|
||||
body .el-textarea__inner{
|
||||
min-height:100% !important;
|
||||
}
|
||||
}
|
||||
body .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
|
||||
body .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
|
||||
border-color: #004098;
|
||||
@ -1368,7 +1391,7 @@ body .el-select-dropdown__item:hover {
|
||||
.el-dropdown-menu .el-dropdown-menu__item:hover{
|
||||
background-color: #E5EFFF;
|
||||
color: #004098;
|
||||
}
|
||||
}
|
||||
|
||||
/*el-checkbox 多选组件*/
|
||||
body .el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
@ -1421,35 +1444,35 @@ body .registerbox .avatar-uploader .el-upload{
|
||||
color:#004098 !important;
|
||||
border-radius: 2px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
body .el-upload:hover,
|
||||
body .registerbox .avatar-uploader .el-upload:hover{
|
||||
background:#004098;
|
||||
border-color:#004098;
|
||||
color:#fff !important;
|
||||
}
|
||||
}
|
||||
body .el-upload i,
|
||||
body .registerbox .avatar-uploader .el-upload i{
|
||||
color:#004098 !important;
|
||||
}
|
||||
}
|
||||
body .el-upload:hover i,
|
||||
body .registerbox .avatar-uploader .el-upload:hover i{
|
||||
color:#fff !important;
|
||||
}
|
||||
}
|
||||
body .el-upload:hover .el-upload-dragger i{
|
||||
color:#004098 !important;
|
||||
}
|
||||
}
|
||||
body .el-upload .el-button,
|
||||
body .el-upload .el-button:hover{
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
body .el-upload .el-button{
|
||||
color:#004098 !important;
|
||||
}
|
||||
}
|
||||
body .el-upload:hover .el-button{
|
||||
color:#fff !important;
|
||||
}
|
||||
}
|
||||
body .el-upload .el-button{
|
||||
border-radius: 0 !important;
|
||||
display: block;
|
||||
@ -1476,7 +1499,7 @@ body .el-upload-list__item.is-success .el-upload-list__item-name:hover {
|
||||
margin: 0;
|
||||
font-size:14px;
|
||||
color:#434344;
|
||||
}
|
||||
}
|
||||
.el-tree .el-tree-node .el-tree-node__content:hover {
|
||||
background-color: #E5EFFF ;
|
||||
color:#004098;
|
||||
@ -1593,14 +1616,14 @@ body .el-table td .el-form-item{
|
||||
border:0 !important;
|
||||
background: transparent !important;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
.el-table td .el-button:hover{
|
||||
font-size:14px !important;
|
||||
padding:0 !important;
|
||||
color: #1890FF !important;
|
||||
border:0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
.el-table td .el-input-group .el-input-group__append,
|
||||
.el-table td .el-input-group .el-input-group__append:hover{
|
||||
background: #004098;
|
||||
@ -1665,6 +1688,37 @@ body .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
|
||||
body .el-tabs--top .el-tabs__item.is-top:last-child{
|
||||
padding-right: 20px;
|
||||
}
|
||||
body .el-card>.el-card__body .el-tabs--border-card{
|
||||
box-shadow: none;
|
||||
}
|
||||
body .el-card>.el-card__body .search-btn .el-tabs--border-card{
|
||||
border: 0;
|
||||
}
|
||||
body .el-card>.el-card__body .search-btn .el-tabs--border-card>.el-tabs__header{
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
background: transparent;
|
||||
}
|
||||
body .el-card>.el-card__body .search-btn .el-tabs--border-card>.el-tabs__header .el-tabs__item{
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
body .el-card>.el-card__body .search-btn .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #034aac;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
body .el-card>.el-card__body .search-btn .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active::after{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #004098;
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
/*.el-dropdown-link*/
|
||||
body .el-table .el-dropdown-link {
|
||||
|
||||
376
src/components/FileUpload/optimizeUpload.vue
Normal file
376
src/components/FileUpload/optimizeUpload.vue
Normal file
@ -0,0 +1,376 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload class="upload-demo" ref="upload" action="#"
|
||||
:before-upload="beforeUpload"
|
||||
:on-change="onChange"
|
||||
:on-remove="handleRemove"
|
||||
:multiple="isMultiple"
|
||||
:on-exceed="handleExceed"
|
||||
:accept="acceptType"
|
||||
:limit="limit"
|
||||
:file-list="fileList"
|
||||
:auto-upload="true"
|
||||
:http-request="uploadFile"
|
||||
show-file-list>
|
||||
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传{{acceptType}}文件</div>
|
||||
</el-upload>
|
||||
<div v-show="progressFlag" class="head-img">
|
||||
<el-progress :text-inside="true" :stroke-width="14" :percentage="progressPercent" status="success"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import {
|
||||
getToken
|
||||
} from "@/utils/auth";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
uploadUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
headers: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
extraData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
onSuccess: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
},
|
||||
onError: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
},
|
||||
// 是否多选
|
||||
isMultiple: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false
|
||||
}
|
||||
},
|
||||
// 文件类型
|
||||
type: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
//上传类型
|
||||
acceptType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
// 上传数量
|
||||
limit: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 1
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fileList: [],
|
||||
progress: 0,
|
||||
isUploading: false,
|
||||
progressFlag: false, //进度条初始值隐藏
|
||||
progressPercent: 0, //进度条初始值
|
||||
partSize: 5 * 1024 * 1024,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 上传前
|
||||
beforeUpload(file) {
|
||||
/* const fileType = file.type.toLowerCase()
|
||||
console.info("fileType=======", fileType)
|
||||
const typeFlag = this.type.some(item => {
|
||||
return fileType.indexOf(item) != -1
|
||||
})
|
||||
if (!typeFlag) {
|
||||
this.$message.error('上传类型有误，请重新上传')
|
||||
return false
|
||||
}*/
|
||||
},
|
||||
/* //上传函数
|
||||
submitUpload(file) {
|
||||
//重新命名 方便setTimeout函数 --因为setTimeout函数在vue内部中无效
|
||||
var that = this;
|
||||
// that.$refs.upload.submit();
|
||||
//判断上传文件数量
|
||||
if (this.fileList.length == 0) {
|
||||
that.$message({
|
||||
message: '请选择导入的文件',
|
||||
type: 'warning',
|
||||
duration: '2000'
|
||||
});
|
||||
return;
|
||||
}
|
||||
//创建FormData();主要用于发送表单数据
|
||||
let paramFormData = new FormData();
|
||||
//遍历 fileList
|
||||
that.fileList.forEach(file => {
|
||||
paramFormData.append("file", file.raw);
|
||||
});
|
||||
//修改progressFlag值
|
||||
that.progressFlag = true;
|
||||
//axios 发出请求
|
||||
axios({
|
||||
url: that.uploadUrl,
|
||||
method: 'post',
|
||||
data: paramFormData,
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + getToken(),
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
onUploadProgress: progressEvent => {
|
||||
// progressEvent.loaded:已上传文件大小
|
||||
// progressEvent.total:被上传文件的总大小
|
||||
//进度条
|
||||
that.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
|
||||
}
|
||||
}).then(res => {
|
||||
console.info("res===========", res)
|
||||
if (res.data.code == 200 && that.progressPercent === 100) {
|
||||
setTimeout(function () {
|
||||
that.$message({
|
||||
message: '上传成功！',
|
||||
type: 'success',
|
||||
duration: '2000'
|
||||
});
|
||||
that.progressFlag = false;
|
||||
that.progressPercent = 0
|
||||
}, 500);
|
||||
}
|
||||
}).catch(error => {
|
||||
that.progressFlag = false;
|
||||
that.progressPercent = 0
|
||||
that.$refs.upload.clearFiles();
|
||||
that.$message({
|
||||
message: '上传失败！',
|
||||
type: 'error',
|
||||
duration: '2000'
|
||||
});
|
||||
})
|
||||
},*/
|
||||
//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
|
||||
onChange(file, fileList) {
|
||||
this.fileList = fileList;
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.fileList = fileList;
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(
|
||||
"最多之能上传"+ this.limit +"个附件"
|
||||
);
|
||||
},
|
||||
async uploadFile({ data, file }) {
|
||||
let self = this
|
||||
//初始化参数
|
||||
this.progress++
|
||||
if (file.size < this.partSize) {
|
||||
let formData = new FormData()
|
||||
formData.append("file", file)
|
||||
self.progressFlag = true;
|
||||
axios({
|
||||
url: self.uploadUrl,
|
||||
method: 'post',
|
||||
data: formData,
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + getToken(),
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
onUploadProgress: progressEvent => {
|
||||
// progressEvent.loaded:已上传文件大小
|
||||
// progressEvent.total:被上传文件的总大小
|
||||
//进度条
|
||||
self.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
|
||||
}
|
||||
}).then(res => {
|
||||
setTimeout(() => {
|
||||
if (res.data.code == 200 && self.progressPercent === 100) {
|
||||
setTimeout(function () {
|
||||
self.$message({
|
||||
message: '上传成功！',
|
||||
type: 'success',
|
||||
duration: '2000'
|
||||
});
|
||||
self.progressFlag = false;
|
||||
self.progressPercent = 0
|
||||
}, 500);
|
||||
} else {
|
||||
self.$message({
|
||||
message: '上传失败！',
|
||||
type: 'error',
|
||||
duration: '2000'
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
}).catch(error => {
|
||||
console.error(error)
|
||||
self.progressFlag = false;
|
||||
self.progressPercent = 0
|
||||
self.$refs.upload.clearFiles();
|
||||
self.$message({
|
||||
message: '上传失败！',
|
||||
type: 'error',
|
||||
duration: '2000'
|
||||
});
|
||||
})
|
||||
} else {
|
||||
console.info("111111111111")
|
||||
file._shardCount = Math.ceil(file.size / this.partSize) //总片数
|
||||
file.uploaded = 0
|
||||
let formData = new FormData()
|
||||
formData.append('fileName', file.name)
|
||||
let self = this
|
||||
|
||||
//大文件上传初始化,返回uploadId initUpload(formData)
|
||||
axios({
|
||||
url: process.env.VUE_APP_BASE_API + "/common/initUpload",
|
||||
method: 'post',
|
||||
data: formData,
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + getToken(),
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
}).then(function (res) {
|
||||
console.info("res=====initUpload=======", res)
|
||||
if (res.status == 200) {
|
||||
//从第0块开始上传
|
||||
file.uploadId = res.data.uploadId
|
||||
file.objectKey = res.data
|
||||
file.chunkId = 0
|
||||
self.uploadByChunk(file)
|
||||
} else {
|
||||
this.progress--
|
||||
self.$message.error(res.msg)
|
||||
}
|
||||
}).catch(error => {
|
||||
self.progressPercent = 0
|
||||
self.progressFlag = false;
|
||||
console.error(error)
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
//分片上传大文件
|
||||
uploadByChunk(file) {
|
||||
this._start = file.chunkId * this.partSize
|
||||
this._end = Math.min(file.size, this._start + this.partSize)//结束时总大小，和 开始的大小+之前的大小比较
|
||||
let self = this
|
||||
let fileData = file.slice(this._start, this._end)
|
||||
//获取文件块MD5
|
||||
let reader = new FileReader()
|
||||
reader.readAsBinaryString(fileData)
|
||||
// 读取成功后的回调
|
||||
// reader.onloadend = function(e) {
|
||||
// 用hex_md5生成md5值，与OSS的算法对应，并转换为大写，不是直接md5-js的算法
|
||||
// self.md5Str[index] = (CryptoJS(this.result)).toLocaleUpperCase()
|
||||
// self.md5Str[index] = CryptoJS.MD5(e.target.result)
|
||||
// }
|
||||
let form1 = new FormData()//new一个form的实例，可以进行键值对的添加，
|
||||
form1.append('chunkFile', fileData) //slice方法用于切出文件的一部分
|
||||
form1.append('uploadId', file.uploadId)
|
||||
form1.append('chunkId', (file.chunkId + 1).toString())
|
||||
form1.append('shardCount', file._shardCount.toString()) //是否最后一片
|
||||
self.progressFlag = true;
|
||||
//上传大文件的Chunk 返回chunk的MD5 uploadChunk(form1)
|
||||
axios({
|
||||
url: process.env.VUE_APP_BASE_API + "/common/uploadChunk",
|
||||
method: 'post',
|
||||
data: form1,
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + getToken(),
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
onUploadProgress: progressEvent => {
|
||||
// progressEvent.loaded:已上传文件大小
|
||||
// progressEvent.total:被上传文件的总大小
|
||||
//进度条
|
||||
self.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
|
||||
}
|
||||
}).then(response => {
|
||||
console.info("response=======uploadChunk=====", response)
|
||||
if (response.status == 200) {
|
||||
//判断返回的MD5值是否一致，一致继续传下一块，否则重传本块（这里目前前后端MD5一直不一致，暂时先注释掉，有时间了我再研究一下）
|
||||
// self.md5Str[index] === response.msg ||
|
||||
if (true) {
|
||||
// this.$message.success('第' + (index + 1).toString() + '块文件上传成功')
|
||||
file.uploaded++
|
||||
self.percentageSend(file)
|
||||
//如果没上传完成，继续上传一下块
|
||||
file.chunkId++
|
||||
if (file.chunkId < file._shardCount) {
|
||||
this.uploadByChunk(file)
|
||||
}
|
||||
} else {
|
||||
//不一致，重新传本块
|
||||
this.$message.success('第' + (file.chunkId + 1).toString() + '块文件上传不成功，重新上传')
|
||||
this.uploadByChunk(file.chunkId)
|
||||
}
|
||||
} else {
|
||||
//出错，跳出循环显示错误
|
||||
this.progress--
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
//接收上传的百分值回调
|
||||
percentageSend(file) {
|
||||
let self = this
|
||||
let perNum = Math.floor((file.uploaded / file._shardCount) * 100)
|
||||
this.progressPercent = perNum
|
||||
//如果上传完成，合并文件
|
||||
if (perNum === 100) {
|
||||
let form2 = new FormData()//new一个form的实例，可以进行键值对的添加，
|
||||
form2.append('uploadId', file.uploadId)
|
||||
form2.append('fileName', file.name)
|
||||
// 大文件上传完成后合并
|
||||
// 返回文件访问的URL
|
||||
axios({
|
||||
url: process.env.VUE_APP_BASE_API + "/common/mergeFile",
|
||||
method: 'post',
|
||||
data: form2,
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + getToken(),
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
}).then(response => {
|
||||
console.info("response====mergeFile========", response)
|
||||
if (response.status == 200) {
|
||||
setTimeout(function () {
|
||||
self.$message({
|
||||
message: '上传成功！',
|
||||
type: 'success',
|
||||
duration: '2000'
|
||||
});
|
||||
self.progressFlag = false;
|
||||
self.progressPercent = 0
|
||||
}, 500);
|
||||
} else {
|
||||
self.$message({
|
||||
message: '上传失败！',
|
||||
type: 'error',
|
||||
duration: '2000'
|
||||
});
|
||||
}
|
||||
console.info("file===============", file)
|
||||
})
|
||||
}
|
||||
},
|
||||
resetData() {
|
||||
this.progress = 0;
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -3,21 +3,32 @@
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="150px">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<!--<el-form-item label="文档类别" required>
|
||||
<el-select placeholder="请选择">
|
||||
<el-option label="管理手册" value=""></el-option>
|
||||
<el-option label="操作手册" value=""></el-option>
|
||||
<el-option label="程序文件" value=""></el-option>
|
||||
<el-option label="需求文档" value=""></el-option>
|
||||
</el-select>
|
||||
</el-form-item>-->
|
||||
<el-form-item label="文档类别" prop="docType">
|
||||
<el-input v-model="form.docType" placeholder="请输入文档类别" />
|
||||
<el-form-item label="文件分类" prop="docCode">
|
||||
<treeselect v-model="form.categoryId" :options="docCategory" :show-count="true" placeholder="请选择文件分类"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-form-item label="文档编号" prop="docCode">
|
||||
<el-input v-model="form.docCode" placeholder="请输入文档编号" maxlength="50" show-word-limit/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-form-item label="文档名称" prop="docName">
|
||||
<el-input v-model="form.docName" placeholder="请输入文档名称" maxlength="200" show-word-limit/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-form-item label="文档类别" prop="docType">
|
||||
<el-input v-model="form.docType" placeholder="请输入文档类别" maxlength="50" show-word-limit/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-form-item label="文档来源" prop="docSource">
|
||||
<el-input v-model="form.docSource" placeholder="请输入文档来源" />
|
||||
<el-input v-model="form.docSource" placeholder="请输入文档来源" maxlength="50" show-word-limit/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
@ -27,16 +38,26 @@
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="负责人" prop="docPrincipals">
|
||||
<el-input v-model="form.docPrincipals" placeholder="请输入负责人" />
|
||||
<el-input v-model="form.docPrincipals" placeholder="请输入负责人" maxlength="50" show-word-limit/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="归属部门" prop="docRespDept">
|
||||
<el-input v-model="form.docRespDept" placeholder="请输入归属部门" />
|
||||
<el-form-item label="归属单位" prop="docRespDept">
|
||||
<treeselect v-model="form.docRespDept" :options="deptOptions" :show-count="true" placeholder="请输入归属单位" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="文件" required>
|
||||
<uploadVue
|
||||
:uploadUrl="uploadFileUrl"
|
||||
:type="['.txt','.doc','.docx','.pdf','.mp4','.zip','.rar','.7z','.png','.jpg','.jpeg']"
|
||||
:acceptType="acceptType"
|
||||
:limit="1"
|
||||
:onSuccess="handleUploadSuccess"
|
||||
:onError="handleUploadError"
|
||||
/>
|
||||
<!-- <uploadVue-->
|
||||
<!-- <upload-progress/>
|
||||
<el-upload
|
||||
class="upload-component"
|
||||
ref="upload"
|
||||
@ -50,7 +71,7 @@
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
<div slot="tip" class="el-upload__tip"><el-progress :percentage="progress"></el-progress></div>
|
||||
</el-upload>
|
||||
</el-upload>-->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
@ -71,7 +92,7 @@
|
||||
</el-table-column>-->
|
||||
<el-table-column align="center" width="55">
|
||||
<template slot-scope="scope">
|
||||
<el-radio v-model="templateSelection" :label="scope.row.prop1"> </el-radio>
|
||||
<el-radio v-model="templateSelection" :label="scope.row.prop1"></el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="prop1" label="工具编号"></el-table-column>
|
||||
@ -93,8 +114,15 @@
|
||||
import { addDocument, updateDocument } from "@/api/document/document";
|
||||
import axios from 'axios';
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { deptTreeSelect } from "@/api/system/user";
|
||||
import { documentTree } from "@/api/documentCategory/documentCategory.js";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import uploadProgress from "./uploadProgress";
|
||||
import uploadVue from '@/components/FileUpload/optimizeUpload.vue'
|
||||
|
||||
export default {
|
||||
name: 'editDocument',
|
||||
components: { Treeselect, uploadProgress, uploadVue},
|
||||
props: {
|
||||
tooId: {
|
||||
type: String,
|
||||
@ -124,10 +152,12 @@
|
||||
],
|
||||
// 表单参数
|
||||
form: {
|
||||
categoryId: undefined,
|
||||
docCode: '',
|
||||
docName: '',
|
||||
docType: '',
|
||||
docPrincipals: '',
|
||||
docRespDept: '',
|
||||
docRespDept: undefined,
|
||||
docSource: '',
|
||||
toolId: ''
|
||||
},
|
||||
@ -135,16 +165,29 @@
|
||||
progress: 0,
|
||||
// 表单校验
|
||||
rules: {
|
||||
docCode: [
|
||||
{ required: true, message: "文档编号不能为空", trigger: "blur" }
|
||||
],
|
||||
docName: [
|
||||
{ required: true, message: "文档名称不能为空", trigger: "blur" }
|
||||
],
|
||||
docType: [
|
||||
{ required: true, message: "类别不能为空", trigger: "blur" }
|
||||
],
|
||||
docSource: [
|
||||
{ required: true, message: "文档来源不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
},
|
||||
docCategory:[],
|
||||
deptOptions:[],
|
||||
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
|
||||
fileData: null,
|
||||
acceptType: ".txt,.doc,.docx,.pdf,.mp4,.zip,.rar,.7z,.png,.jpg,.jpeg"
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getDeptTree();
|
||||
this.getDocumentTree();
|
||||
},
|
||||
mounted(){
|
||||
/* this.$nextTick(() => {
|
||||
@ -153,7 +196,8 @@
|
||||
},
|
||||
methods:{
|
||||
chooseToolConfirm(){
|
||||
this.form.toolId = this.templateSelection
|
||||
this.$set(this.form, "toolId", this.templateSelection)
|
||||
this.drawer1 = false;
|
||||
},
|
||||
singleElection(row) {
|
||||
this.templateSelection = row.prop1
|
||||
@ -182,7 +226,7 @@
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.drawer1 = false;
|
||||
this.reset();
|
||||
},
|
||||
onChange(file, fileList) {
|
||||
@ -285,6 +329,46 @@
|
||||
console.error('Failed to upload file:', error);
|
||||
});
|
||||
},
|
||||
/** 查询部门下拉树结构 */
|
||||
getDeptTree() {
|
||||
deptTreeSelect().then(response => {
|
||||
this.deptOptions = response.data;
|
||||
});
|
||||
},
|
||||
/** 查询树形下拉树结构 */
|
||||
getDocumentTree() {
|
||||
documentTree().then(response => {
|
||||
this.docCategory = response.data;
|
||||
});
|
||||
},
|
||||
/** 转换部门数据结构 */
|
||||
normalizer(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children;
|
||||
}
|
||||
return {
|
||||
id: node.deptId,
|
||||
label: node.deptName,
|
||||
children: node.children
|
||||
};
|
||||
},
|
||||
// flag 为true表示新增
|
||||
getData(data, flag, index) {
|
||||
console.info("data============", data)
|
||||
console.info("flag============", flag)
|
||||
console.info("index============", index)
|
||||
},
|
||||
getError(message) {
|
||||
this.$message.error(message);
|
||||
},
|
||||
handleUploadSuccess(response) {
|
||||
alert('File uploaded successfully');
|
||||
// 处理上传成功后的逻辑
|
||||
},
|
||||
handleUploadError(error) {
|
||||
alert('Failed to upload file');
|
||||
// 处理上传失败后的逻辑
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -23,26 +23,21 @@
|
||||
</el-card>
|
||||
<el-card class="lrtt">
|
||||
<div class="lt">
|
||||
<el-input
|
||||
v-model="deptName"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
size="small"
|
||||
prefix-icon="el-icon-search"
|
||||
style="margin-bottom: 20px"
|
||||
/>
|
||||
<el-input placeholder="请输入..." prefix-icon="el-icon-search"></el-input>
|
||||
<div class="divide"></div><!--divide 分隔-->
|
||||
<el-tree
|
||||
:data="deptOptions"
|
||||
:props="defaultProps"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
<el-tree :data="docCategory" :props="docCategoryProps" @node-click="handleNodeClick">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span>{{ node.label }}</span>
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link"><i class="el-icon-more"></i></span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="handleDocCategoryAdd(data)"><i class="el-icon-plus"></i>添加</el-dropdown-item>
|
||||
<el-dropdown-item v-if="data.types != 'system'" @@click.native="handleDocCategoryUpdate(data)"><i class="el-icon-edit"></i>编辑</el-dropdown-item>
|
||||
<el-dropdown-item v-if="data.types != 'system'" @@click.native="handleDocCategoryDelete(data)"><i class="el-icon-delete"></i>删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div><!--lt 左-->
|
||||
<div class="rt">
|
||||
<div class="operate">
|
||||
@ -106,6 +101,28 @@
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
|
||||
|
||||
<el-dialog :title="docCategoryTitle" :visible.sync="docCategoryOpen" width="50%" append-to-body>
|
||||
<el-form ref="docCategoryForm" :model="docCategoryForm" :rules="docCategoryRules" label-width="80px">
|
||||
<el-form-item label="父分类" prop="parentId">
|
||||
<treeselect v-model="docCategoryForm.parentId" :options="docCategory" :show-count="true" placeholder="如果不选择，默认为顶级节点" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类名称" prop="categoryName">
|
||||
<el-input v-model="docCategoryForm.categoryName" placeholder="请输入分类名称" maxlength="50" show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类描述" prop="categoryDescription">
|
||||
<el-input v-model="docCategoryForm.categoryDescription"
|
||||
type="textarea" :rows="3" maxlength="500" show-word-limit
|
||||
placeholder="请输入分类描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="docCategorySubmitForm">确 定</el-button>
|
||||
<el-button @click="docCategoryCancel">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :title="viewDialogTitle" :visible.sync="viewDialogOpen" fullscreen width="500px" append-to-body>
|
||||
<i-frame :src="previewUrl" />
|
||||
</el-dialog>
|
||||
@ -128,15 +145,18 @@
|
||||
<script>
|
||||
import { listDocument, getDocument, delDocument, addDocument, updateDocument } from "@/api/document/document";
|
||||
import { deptTreeSelect } from "@/api/system/user";
|
||||
import { documentTree,addCategory,updateCategory,delCategory,getCategory } from "@/api/documentCategory/documentCategory.js";
|
||||
|
||||
import { Base64 } from 'js-base64';
|
||||
import iFrame from "@/components/iFrame/index"
|
||||
import editDocument from "./editDocument";
|
||||
import uploadProgress from "./uploadProgress";
|
||||
import { w3cwebsocket as WebSocket } from 'websocket';
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
|
||||
export default {
|
||||
name: "Document",
|
||||
components: { iFrame, editDocument, uploadProgress },
|
||||
components: { iFrame, editDocument, uploadProgress, Treeselect},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
@ -157,6 +177,12 @@ export default {
|
||||
children: "children",
|
||||
label: "label"
|
||||
},
|
||||
// 文档树
|
||||
docCategory: undefined,
|
||||
docCategoryProps: {
|
||||
children: "children",
|
||||
label: "label"
|
||||
},
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 表格数据
|
||||
@ -194,12 +220,35 @@ export default {
|
||||
docSource: [
|
||||
{ required: true, message: "文档来源不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
},
|
||||
docCategoryRules: {
|
||||
categoryName: [
|
||||
{ required: true, message: "分类名称不能为空", trigger: "blur" }
|
||||
],
|
||||
createBy: [
|
||||
{ required: true, message: "创建人名称不能为空", trigger: "blur" }
|
||||
],
|
||||
createById: [
|
||||
{ required: true, message: "创建人id不能为空", trigger: "blur" }
|
||||
],
|
||||
createTime: [
|
||||
{ required: true, message: "创建时间不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
docCategoryTitle: "",
|
||||
docCategoryOpen: false,
|
||||
// 文档资源参数
|
||||
docCategoryForm: {
|
||||
categoryName: null,
|
||||
categoryDescription: null,
|
||||
parentId: null
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getDeptTree();
|
||||
this.getDocumentTree();
|
||||
},
|
||||
methods: {
|
||||
/** 查询部门下拉树结构 */
|
||||
@ -208,6 +257,12 @@ export default {
|
||||
this.deptOptions = response.data;
|
||||
});
|
||||
},
|
||||
/** 查询树形下拉树结构 */
|
||||
getDocumentTree() {
|
||||
documentTree().then(response => {
|
||||
this.docCategory = response.data;
|
||||
});
|
||||
},
|
||||
// 筛选节点
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
@ -268,8 +323,71 @@ export default {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleDocCategoryAdd(data) {
|
||||
console.info("data================", data)
|
||||
this.docCategoryOpen = true;
|
||||
// this.docCategoryForm.parentId = data.id;
|
||||
this.$nextTick(() => {
|
||||
this.resetDocCategoryForm();
|
||||
this.docCategoryForm.parentId = data.id;
|
||||
})
|
||||
this.docCategoryTitle = "添加文档资源分类";
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDocCategoryDelete(row) {
|
||||
this.$modal.confirm('是否删除该项数据？').then(function() {
|
||||
return delCategory(row.id);
|
||||
}).then(() => {
|
||||
this.getDocumentTree();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch((err) => {
|
||||
console.info("err============", err)
|
||||
});
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleDocCategoryUpdate(row) {
|
||||
this.resetDocCategoryForm();
|
||||
const id = row.id;
|
||||
getCategory(id).then(response => {
|
||||
this.docCategoryForm = response.data;
|
||||
this.docCategoryOpen = true;
|
||||
this.docCategoryTitle = "修改文档资源分类";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
docCategorySubmitForm() {
|
||||
this.$refs["docCategoryForm"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.docCategoryForm.id != null) {
|
||||
updateCategory(this.docCategoryForm).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.docCategoryOpen = false;
|
||||
this.getDocumentTree();
|
||||
});
|
||||
} else {
|
||||
this.$set(this.docCategoryForm, "type", "user")
|
||||
addCategory(this.docCategoryForm).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.docCategoryOpen = false;
|
||||
this.getDocumentTree();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
docCategoryCancel() {
|
||||
this.docCategoryOpen = false;
|
||||
this.resetDocCategoryForm();
|
||||
},
|
||||
/** 重置 **/
|
||||
resetDocCategoryForm(){
|
||||
this.$refs.docCategoryForm.resetFields();
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -124,7 +124,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -146,7 +146,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.register {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user