public/css/tool.css

@@ -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 {

src/components/FileUpload/optimizeUpload.vue

@@ -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>

src/views/document/editDocument.vue

@@ -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-form-item label="文件分类" prop="docCode">
-            <el-select placeholder="请选择">
+            <treeselect v-model="form.categoryId" :options="docCategory" :show-count="true" 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>
         </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-form-item label="归属单位" prop="docRespDept">
-            <el-input v-model="form.docRespDept" placeholder="请输入归属部门" />
+            <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">&nbsp;</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>

src/views/document/index.vue

@@ -23,26 +23,21 @@
     </el-card>
     <el-card class="lrtt">
       <div class="lt">
-        <el-input
+        <el-input placeholder="请输入..." prefix-icon="el-icon-search"></el-input>
-          v-model="deptName"
-          placeholder="请输入部门名称"
-          clearable
-          size="small"
-          prefix-icon="el-icon-search"
-          style="margin-bottom: 20px"
-        />
         <div class="divide"></div><!--divide 分隔-->
-        <el-tree
+        <el-tree :data="docCategory" :props="docCategoryProps" @node-click="handleNodeClick">
-          :data="deptOptions"
+					<span class="custom-tree-node" slot-scope="{ node, data }">
-          :props="defaultProps"
+					    <span>{{ node.label }}</span>
-          :expand-on-click-node="false"
+                <el-dropdown>
-          :filter-node-method="filterNode"
+                  <span class="el-dropdown-link"><i class="el-icon-more"></i></span>
-          ref="tree"
+                  <el-dropdown-menu slot="dropdown">
-          node-key="id"
+                    <el-dropdown-item  @click.native="handleDocCategoryAdd(data)"><i class="el-icon-plus"></i>添加</el-dropdown-item>
-          default-expand-all
+                    <el-dropdown-item v-if="data.types != 'system'" @@click.native="handleDocCategoryUpdate(data)"><i class="el-icon-edit"></i>编辑</el-dropdown-item>
-          highlight-current
+                    <el-dropdown-item v-if="data.types != 'system'" @@click.native="handleDocCategoryDelete(data)"><i class="el-icon-delete"></i>删除</el-dropdown-item>
-          @node-click="handleNodeClick"
+                  </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>
 

src/views/login.vue

@@ -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;

src/views/register.vue

@@ -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;