优化

src/views/mdp/arc/tag/TagMng.vue

@@ -1,61 +1,104 @@
-<template>
-  <section> 
-    <el-row v-if="editVisible==false"> 
-      <el-col :span="14"> 
-        <el-button @click="getTags" v-loading="sectionLoading" style="">查询</el-button>
-        <el-button type="primary" v-if="jump==true" @click="selectConfirm">确认</el-button>  
-        <el-button type="text"  @click="editVisible=true" icon="el-icon-edit">管理标签</el-button>
-      </el-col> 
-    </el-row> 
-    <el-row v-else>
-      <el-col :span="6">
-        <el-input style="width:99%;" v-model="needAddTagCategoryNameInputValue" placeholder="标签分类，回车直接添加"
-          @keyup.enter.native="addTagCategorySubmitMethod"></el-input> 
-      </el-col>
-      <el-col :span="14">
-        <el-checkbox v-if="userInfo.isPlatformAdmin||userInfo.isSuperAdmin" v-model="isPub" true-label='1'
-          false-label='0'>公共分类</el-checkbox>
-        <el-button @click="getTags" v-loading="sectionLoading" style="">查询</el-button>
-        <el-button type="primary"  @click="editVisible=false">确认</el-button>
-
-
-      </el-col> 
-    </el-row> 
-    <el-row class="page-container border" v-if="editVisible==false">
-
+<template>  
+  <section class="page-container page-full-height padding border">
+    <el-row >
+      <el-row v-if="editVisible==false">
+        <el-col :span="10"> 
+          <el-button type="primary"  @click="selectConfirm" icon="el-icon-finished">确认选择</el-button>
+          <el-button  @click="getAllHrSkill" v-loading="sectionLoading" icon="el-icon-search">刷新标签</el-button>
+        </el-col> 
+        <el-col :span="14"> 
+           <el-button type="text"  @click="editVisible=true" icon="el-icon-edit">管理技能</el-button> 
+          <el-tooltip content="黄色表示已经有的技能">
+            <span class="addTagSquare"></span>
+          </el-tooltip>
+          <el-tooltip content="白色表示尚未拥有的技能">
+            <span class="closeTagSquare"></span>
+          </el-tooltip>
+        </el-col> 
+      </el-row>
+      <el-row v-else>
+        <el-col :span="10"> 
+          <el-button type="primary"  @click="editVisible=false" icon="el-icon-finished">确认</el-button> 
+        </el-col> 
+        <el-col :span="14">
+          <el-checkbox 
+            v-model="isPub"
+            true-label="1"
+            false-label="0"
+          >公共分类</el-checkbox>
+          <el-input
+            style="width:50%;"
+            v-model="needAddTagCategoryNameInputValue"
+            placeholder="回车直接快速添加技能分类"
+            @keyup.enter.native="addTagCategorySubmitMethod"
+          ></el-input>
+          <el-button type="primary"  @click="addTagCategorySubmitMethod" icon="el-icon-finished">保存分类</el-button>
+          <el-tooltip content="黄色表示已经有的技能">
+            <span class="addTagSquare"></span>
+          </el-tooltip>
+          <el-tooltip content="白色表示尚未拥有的技能">
+            <span class="closeTagSquare"></span>
+          </el-tooltip>
+        </el-col> 
+      </el-row>
+    </el-row>
+    <el-row class="app-container max-height-box" v-if="editVisible==false">
       <el-row v-for="(item,index) in convertTags" :key="item.categoryId" class="padding">
         <h3>
-          <div>{{item.categoryName+(item.pubc=='1'?'(公共)':'')}} </div> 
-        </h3> 
-
-        <el-tag :key="valueIndex" v-for="(i,valueIndex) in item.values"   :disable-transitions="false"  
-            :color="i.checked?'':'#ffffff'" :effect="i.checked?'dark':'light'"  @click="clickTagMethod(index,valueIndex)">
-          {{i.tagName +(i.pubTag=='1'?'(公共)':'')}}
-        </el-tag> 
+          <div>
+            {{item.categoryName+(item.pubc=='1'?'(公共)':'')}} 
+          </div>
+        </h3>
+        <el-col :span="24" style="margin-left:30px;display:flex;flex-wrap: wrap;width: 100%;">
+          <div
+            :class="v.checked?'checkCopyButton':'copyButton'"
+            v-for="(v,valueIndex) in item.values"
+            :key="valueIndex"
+            @click="clickTagMethod(index,valueIndex)"
+          >
+            {{v.tagName +(v.pubTag=='1'?'':'')}} 
+          </div>  
+        </el-col>
       </el-row>
-
-
     </el-row>
-    <el-row class="page-container border" v-else>
-
+    <el-row class="app-container max-height-box" v-else>
       <el-row v-for="(item,index) in convertTags" :key="item.categoryId" class="padding">
         <h3>
-          <div>{{item.categoryName+(item.pubc=='1'?'(公共)':'')}}<i class="el-icon-close closeStyle"
-              @click.stop="delTagCategoryMethod(item.categoryId,index)"></i></div>
-
-        </h3> 
-
-        <el-tag :key="valueIndex" v-for="(i,valueIndex) in item.values" closable :disable-transitions="false"  
-          @close="delTagMethod(i.tagId,index,valueIndex)" :color="i.checked?'':'#ffffff'" :effect="i.checked?'dark':'light'"  @click="clickTagMethod(index,valueIndex)">
-          {{i.tagName +(i.pubTag=='1'?'(公共)':'')}}
-        </el-tag>
-        <el-input class="input-new-tag" v-if="item.showAddButtonVisible" v-model="item.showAddButtonInputValue"
-          ref="saveTagInput" size="small" @keyup.enter.native="addTagMethod(index)" @blur="addTagMethod(index)">
-        </el-input>
-        <el-button v-else class="button-new-tag" size="small" @click="showAddButtonMethod(index)">+ 标签</el-button> 
+          <div>
+            {{item.categoryName+(item.pubc=='1'?'(公共)':'')}}
+            <i
+              class="el-icon-close closeStyle"
+              @click.stop="delTagCategoryMethod(item.categoryId,index)"
+            ></i>:
+          </div>
+        </h3>
+        <el-col :span="24" style="margin-left:30px;display:flex;flex-wrap: wrap;width: 100%;">
+          <div
+            :class="'copyButton'"
+            v-for="(v,valueIndex) in item.values"
+            :key="valueIndex"
+            @click="clickTagMethod(index,valueIndex)"
+          >
+            {{v.tagName +(v.pubTag=='1'?'':'')}}
+            <i
+              class="el-icon-close closeStyle"
+              @click.stop="delTagMethod(v.tagId,index,valueIndex)"
+            ></i>
+          </div>
+          <div class="input-tag" v-if="item.showAddButtonVisible">
+            <el-input
+              style="200px;"
+              v-model="item.showAddButtonInputValue"
+              placeholder="请输入技能,回车即可"
+              @keyup.enter.native="addTagMethod(index)"
+              autofocus
+            ></el-input>
+          </div>
+          <div v-else class="add" @click="showAddButtonMethod(index)">
+            <i class="el-icon-circle-plus-outline" style="font-size:35px;"></i>
+          </div>
+        </el-col>
       </el-row>
-
-
     </el-row>
   </section>
 </template>
@@ -615,133 +658,100 @@
 </script>
 
 <style scoped>
-  .sub-navbar.draft {
-    background: #ffffff;
-  }
-
-
-  .copyButton {
-    margin-left: 5px;
-    border-radius: 20px;
-    padding: 10px 1px;
-    border: 1px solid rgb(220, 223, 230);
-    /* color:#039; */
-  }
-
-  .copyButton:hover {
-    color: #409eff;
-    border-color: #c6e2ff;
-    background-color: #ecf5ff;
-    cursor: default;
-  }
-
-  .checkCopyButton {
-    /*color: #fff;*/
-    margin-left: 5px;
-    border-radius: 20px;
-    padding: 10px;
-    border: 1px solid #FFA00A;
-    /*background-color: rgba(230, 162, 60, .1);*/
-    /* background-color: #f9f9f9; */
-    background-color: #fff;
-    /*border-color: rgba(230,162,60,.2);*/
-    color: #FFA00A;
-  }
-
-  .add {
-    display: flex;
-    align-items: center;
-    margin-left: 10px;
-    margin-top: 2px;
-  }
-
-  .add:hover {
-    cursor: pointer;
-    animation: myrotate 0.5s linear infinite;
-  }
-
-
-  .input-tag {
-    margin-left: 10px;
-    margin-top: 2px;
-    align-self: center;
-  }
-
-  .closeStyle {
-    padding: 1px;
-    margin-left: 10px;
-  }
-
-  .closeStyle:hover {
-    cursor: pointer;
-    /* border-color:#f40; */
-    /* border: 1px solid #f40; */
-    background-color: #FFA00A;
-    color: #fff;
-    border-radius: 50%;
-    padding: 1px;
-    animation: myrotate 1s linear;
-  }
-
-  .addTagSquare {
-    width: 15px;
-    height: 15px;
-    display: inline-block;
-    background-color: #FFA00A;
-    animation: myrotate 2s linear infinite;
-  }
-
-  .closeTagSquare {
-    width: 15px;
-    height: 15px;
-    display: inline-block;
-    background-color: #fff;
-    animation: myrotate 2s linear infinite;
-  }
-
-  @keyframes myrotate {
-    0% {
-      transform: rotate(0deg);
-      box-shadow: 0px 0px 10px #fff;
-    }
-
-    50% {
-      transform: rotate(180deg);
-      box-shadow: 0px 0px 45px #fff;
-    }
-
-    100% {
-      transform: rotate(360deg);
-      box-shadow: 0px 0px 10px #fff;
-    }
-  }
-
-  .el-tag+.el-tag {
-    margin-right: 10px;
-  }
-
-  .button-new-tag {
-    margin-right: 10px;
-    height: 32px;
-    line-height: 30px;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  .input-new-tag {
-    width: 90px;
-    margin-right: 10px;
-    /* vertical-align: bottom; */
+.copyButton {
+  margin-left: 5px;
+  border-radius: 20px;
+  padding: 10px 1px;
+  border: 1px solid rgb(220, 223, 230);
+  /* color:#039; */
+}
+
+.copyButton:hover {
+  color: #409eff;
+  border-color: #c6e2ff;
+  background-color: #ecf5ff;
+  cursor: default;
+}
+
+.checkCopyButton {
+  /*color: #fff;*/
+  margin-left: 5px;
+  border-radius: 20px;
+  padding: 10px 1px;
+  border: 1px solid #ffa00a;
+  /*background-color: rgba(230, 162, 60, .1);*/
+  /* background-color: #f9f9f9; */
+  background-color: #fff;
+  /*border-color: rgba(230,162,60,.2);*/
+  color: #ffa00a;
+}
+
+.add {
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+  margin-top: 2px;
+}
+
+.add:hover {
+  cursor: pointer;
+  animation: myrotate 0.5s linear infinite;
+}
+
+.input-tag {
+  margin-left: 10px;
+  margin-top: 2px;
+  align-self: center;
+}
+.closeStyle {
+  padding: 1px;
+}
+
+.closeStyle:hover {
+  cursor: pointer;
+  /* border-color:#f40; */
+  /* border: 1px solid #f40; */
+  background-color: #ffa00a;
+  color: #fff;
+  border-radius: 50%;
+  padding: 1px;
+  animation: myrotate 1s linear;
+}
+
+.addTagSquare {
+  width: 15px;
+  height: 15px;
+  display: inline-block;
+  background-color: #ffa00a;
+  animation: myrotate 2s linear infinite;
+}
+
+.closeTagSquare {
+  width: 15px;
+  height: 15px;
+  display: inline-block;
+  background-color: #fff;
+  animation: myrotate 2s linear infinite;
+}
+@keyframes myrotate {
+  0% {
+    transform: rotate(0deg);
+    box-shadow: 0px 0px 10px #fff;
   }
 
-  .el-tag--medium {
-    height: 32px;
-    line-height: 32px;
-    margin-right: 10px;
-    margin-bottom: 10px;
+  50% {
+    transform: rotate(180deg);
+    box-shadow: 0px 0px 45px #fff;
   }
 
-  .app-container {
-      padding: 20px 0;
+  100% {
+    transform: rotate(360deg);
+    box-shadow: 0px 0px 10px #fff;
   }
+}
+.max-height-box{
+  max-height: 600px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
 </style>

src/views/xm/core/skill/skillMng.vue

@@ -7,7 +7,7 @@
           <el-button  @click="getAllHrSkill" v-loading="sectionLoading" icon="el-icon-search">刷新标签</el-button>
         </el-col> 
         <el-col :span="14"> 
-           <el-button type="primary"  @click="editVisible=true" icon="el-icon-edit">维护</el-button> 
+           <el-button type="text"  @click="editVisible=true" icon="el-icon-edit">管理技能</el-button> 
           <el-tooltip content="黄色表示已经有的技能">
             <span class="addTagSquare"></span>
           </el-tooltip>

src/views/xm/core/xmTask/XmTaskMng.vue

@@ -955,12 +955,12 @@
         @selected="onProductSelected"
       ></xm-product-select>
     </el-drawer>
-    <el-dialog
-      append-to-body
-      title="标签条件"
+    <el-drawer
+      :title="'标签条件'"
       :visible.sync="tagSelectVisible"
-      class="dialog-body"
-      width="60%"
+      :size="750"
+      append-to-body
+      :close-on-click-modal="false"
     >
       <tag-mng
         :tagIds="filters.tags ? filters.tags.map((i) => i.tagId) : []"
@@ -968,7 +968,7 @@
         @select-confirm="onTagSelected"
       >
       </tag-mng>
-    </el-dialog>
+    </el-drawer>
   </section>
 </template>