修改

dsk-operate-ui/src/assets/styles/sidebar.scss

@@ -3,7 +3,7 @@
     height: 100%;
     transition: margin-left 0.28s;
     margin-left: $base-sidebar-width;
-    width: calc(100% - $base-sidebar-width);
+    width: calc(100% - #{$base-sidebar-width});
     position: relative;
     background: #f5f5f5;
   }

dsk-operate-ui/src/views/custom/customList/index.vue

@@ -52,18 +52,21 @@
                     <!--</el-input>-->
                   <!--</div>-->
                   <!-- 未点击前的输入框样式 -->
-                  <div class="normal-search-container" @click="showSearchBox = true" v-if="!showSearchBox">
+                  <div class="normal-search-container" :class="{'is-hover-search' : hover}" @mouseover="searchHover($event)"
+                       @mouseleave="searchUnHover($event,searchParam.companyName)">
                     <img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
-                    <span>搜索</span>
+                    <span v-show="!hover && !searchParam.companyName">搜索</span>
+                    <el-input v-model="searchParam.companyName" placeholder="输入关键词查询"
+                              @focus="searchFocus($event)" @blur="searchBlur($event)"
+                              @input="value => searchInput(value)" v-show="hover || searchParam.companyName">
+                      <template slot="suffix">
+                        <transition mode="out-in" appear name="fade">
+                          <img src="@/assets/images/enterprise/search-input-clear-icon.svg" alt="" @click.stop="searchParam.companyName = '';handleSearch()"
+                               v-show="showClearIcon">
+                        </transition>
+                      </template>
+                    </el-input>
                   </div>
-                  <!-- 输入框展开后样式 -->
-                  <transition @enter="onEnter" appear mode="out-in">
-                    <div class="cooperate-name enterprise-search-container" id="focus1" v-if="showSearchBox">
-                      <el-input clearable @clear="handleSearch" @focus="clickFocus('focus1')" @blur="clickFocus('focus1')" v-model="searchParam.companyName"
-                                placeholder="输入关键词查询"></el-input>
-                      <span @click="handleSearch">搜索</span>
-                    </div>
-                  </transition>
                 </el-form-item>
               </el-form>
             </div>
@@ -386,7 +389,9 @@
       inputID2:this.getUid(),
       inputID3:this.getUid(),
       inputID4:this.getUid(),
-      showSearchBox: false
+      showClearIcon: false,
+      hover: false,
+
     }
   },
   created() {
@@ -550,6 +555,28 @@
       // }
       this.$router.push({path:'/enterprise/'+encodeStr(companyId),query:{customerId:customerId,path:path}})
     },
+    searchFocus(event) {
+      const { target } = event;
+      if (target?.value?.length) {
+        this.showClearIcon=true
+      }
+    },
+    searchBlur(event) {
+      this.showClearIcon=false
+    },
+    searchInput(value) {
+      if (value?.length) {
+        this.showClearIcon=true
+      }
+    },
+    searchHover(event) {
+      this.hover=true
+    },
+    searchUnHover(event, value) {
+      if (!value) {
+        this.hover=false
+      }
+    },
     handleSearch(){
       this.$nextTick(() => {
         this.searchParam.pageNum = 1
@@ -863,6 +890,78 @@
       }
 
     }
+    ::v-deep .normal-search-container {
+      display: flex;
+      align-items: center;
+
+      &.is-hover-search {
+        width: 238px;
+        background: #f4f6f9;
+        border-radius: 4px 4px 4px 4px;
+
+        & > img {
+          cursor: unset;
+        }
+      }
+
+      &:hover {
+        & > span {
+          color: #0081ff;
+        }
+      }
+
+      & > img {
+        width: 16px;
+        height: 16px;
+        margin-left: 12px;
+        cursor: pointer;
+      }
+
+      & > span {
+        color: rgba(35, 35, 35, 0.8);
+        font-weight: 400;
+        margin-left: 8px;
+        line-height: 22px;
+        font-size: 14px;
+        cursor: pointer;
+      }
+
+      .el-input {
+        & > .el-input__inner {
+          border: none;
+          height: 32px;
+          line-height: 32px;
+          caret-color: #0081ff;
+          color: rgba(35, 35, 35, 0.8);
+          font-size: 14px;
+          background: #f4f6f9;
+          padding-right: 26px;
+          padding-left: 8px;
+
+          &::placeholder {
+            color: rgba(35, 35, 35, 0.4) !important;
+            font-size: 14px !important;
+            line-height: 32px;
+          }
+        }
+        .el-input__suffix {
+          right: 12px;
+          display: flex;
+          align-items: center;
+
+          .el-input__suffix-inner {
+            height: 14px;
+            width: 14px;
+          }
+
+          img {
+            cursor: pointer;
+            vertical-align: unset;
+            margin-bottom: 14px;
+          }
+        }
+      }
+    }
   }
 
 

dsk-operate-ui/src/views/system/user/index.vue

@@ -151,7 +151,7 @@
           <el-table-column type="selection" width="50" align="center" />
           <el-table-column label="用户编号" align="center" :key='mathkey+1' prop="userId" v-if="columns[0].visible" />
           <!--<el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />-->
-          <el-table-column label="用户昵称" align="center" :key='mathkey+2' prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="用户名称" align="center" :key='mathkey+2' prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
           <el-table-column label="组织" align="center" :key='mathkey+3' prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
           <el-table-column label="手机号码" align="center" :key='mathkey+4' prop="phonenumber" v-if="columns[4].visible" width="120" />
           <el-table-column label="状态" align="center" :key='mathkey+5' v-if="columns[5].visible">