优化input

src/views/manage/css/kingdeeLog.scss

+.paperview-input-text {
+  border: 0;
+  color: #fafcff;
+  background-color: #303133;
+}
+
+.input-class {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px #dcdfe6 inset;
+  padding: 0 10px;
+
+  .range-input {
+    appearance: none;
+    border: none;
+    outline: 0;
+    display: inline-block;
+    height: 30px;
+    line-height: 30px;
+    margin: 0;
+    padding: 0;
+    width: 38%;
+    text-align: center;
+    font-size: 14px;
+    color: #606266;
+    background-color: transparent;
+  }
+
+  .range-separator {
+    flex: 1;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    padding: 0 5px;
+    margin: 0;
+    font-size: 14px;
+    word-break: keep-all;
+    color: var(--el-text-color-primary);
+  }
+
+  .range-icon {
+    position: absolute;
+    right: 2%;
+    display: none;
+    cursor: pointer;
+    color: #a8abb2;
+  }
+}
+
+.input-class:hover {
+  box-shadow: 0 0 0 1px #b1b3b8 inset;
+}
+
+input::-webkit-input-placeholder {
+  /* WebKit browsers */
+  color: #b1b3b8;
+}
+
+input:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  color: #b1b3b8;
+}
+
+input::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  color: #b1b3b8;
+}
+
+input:-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+  color: #b1b3b8;
+}

src/views/manage/kingdeeLog.vue

@@ -24,12 +24,15 @@
               <span style="margin: 0 10px">至</span>
               <el-input v-model="filterForm.costTimeTo" controls-position="right" placeholder="结束同步时长"
                 @change="handleNumberChangeTo" :input-style="{ width: '46.5%' }" /> -->
-              <div class="input-class" id="input-class">
+              <div class="input-class" id="input-class" @mouseover="mouseover" @mouseleave="mouseleave">
                 <input type="text" class="range-input" placeholder="开始同步时长" v-model="filterForm.costTimeFrom"
                   @focus="onFocus" @blur="onBlur" @input="handleNumberChangeFrom" />
                 <span class="range-separator">至</span>
                 <input type="text" class="range-input" placeholder="结束同步时长" v-model="filterForm.costTimeTo"
                   @focus="onFocus" @blur="onBlur" @input="handleNumberChangeTo" />
+                <el-icon class="range-icon" id="range-icon" @click="handleClickIcon">
+                  <CircleClose />
+                </el-icon>
               </div>
             </el-form-item>
           </el-col>
@@ -160,8 +163,7 @@ const indexMethod = (index: number) => {
   return index++;
 };
 const visible = ref(false);
-// 多选框
-const multipleSelection = ref<List[]>([]);
+
 // 分页
 const disabled = ref(false);
 const filters = ref();
@@ -215,7 +217,7 @@ const cancelVisible1 = () => {
 const handleScreen = () => {
   if (+filterForm.value.costTimeFrom < +filterForm.value.costTimeTo ||
     filterForm.value.costTimeFrom === undefined ||
-    filterForm.value.costTimeFrom === undefined) {
+    filterForm.value.costTimeTo === undefined) {
     store.commit('search/setkingdeeSearch', filterForm.value)
     page(
       currentPage.value,
@@ -289,11 +291,6 @@ const handleNumberChangeTo = () => {
   }
 };
 
-
-const onFocus = () => document.getElementById('input-class')!.style.boxShadow = '0 0 0 1px #409EFF inset'
-
-const onBlur = () => document.getElementById('input-class')!.style.boxShadow = '0 0 0 1px #dcdfe6 inset'
-
 const initfilter = () => {
   let data: any = store.state.search.kingdeeSearch
   setTimeout(() => {
@@ -311,6 +308,33 @@ const initfilter = () => {
   }, 50)
 }
 initfilter()
+
+const onFocus = () => {
+  activeElement.value = document.activeElement?.tagName
+  document.getElementById('input-class')?.setAttribute('style', 'box-shadow: 0 0 0 1px #409EFF inset !important')
+}
+
+let activeElement = ref()
+const onBlur = () => {
+  activeElement.value = document.activeElement?.tagName
+  document.getElementById('input-class')!.style.boxShadow = '0 0 0 1px #dcdfe6 inset'
+}
+
+const mouseover = () => {
+  document.getElementById('range-icon')!.style.display = 'block'
+  document.getElementById('input-class')!.style.boxShadow = '0 0 0 1px #b1b3b8 inset'
+}
+
+const mouseleave = () => {
+  document.getElementById('range-icon')!.style.display = 'none'
+  if (activeElement.value === 'INPUT') document.getElementById('input-class')?.setAttribute('style', 'box-shadow: 0 0 0 1px #409EFF inset !important')
+  else document.getElementById('input-class')!.style.boxShadow = '0 0 0 1px #dcdfe6 inset'
+}
+
+const handleClickIcon = () => {
+  filterForm.value.costTimeFrom = ''
+  filterForm.value.costTimeTo = ''
+}
 // 筛选
 const page = (
   pageNo?: number,
@@ -341,69 +365,6 @@ const page = (
   });
 };
 </script>
-<style scoped>
-.paperview-input-text {
-  border: 0;
-  color: #fafcff;
-  background-color: #303133;
-}
-
-.input-class {
-  width: 100%;
-  height: 100%;
-  display: inline-flex;
-  align-items: center;
-  border-radius: 4px;
-  box-shadow: 0 0 0 1px #dcdfe6 inset;
-  padding: 0 10px;
-}
-
-.range-input {
-  appearance: none;
-  border: none;
-  outline: 0;
-  display: inline-block;
-  height: 30px;
-  line-height: 30px;
-  margin: 0;
-  padding: 0;
-  width: 39%;
-  text-align: center;
-  font-size: 14px;
-  color: #606266;
-  background-color: transparent;
-}
-
-.range-separator {
-  flex: 1;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  padding: 0 5px;
-  margin: 0;
-  font-size: 14px;
-  word-break: keep-all;
-  color: var(--el-text-color-primary);
-}
-
-input::-webkit-input-placeholder {
-  /* WebKit browsers */
-  color: #b1b3b8;
-}
-
-input:-moz-placeholder {
-  /* Mozilla Firefox 4 to 18 */
-  color: #b1b3b8;
-}
-
-input::-moz-placeholder {
-  /* Mozilla Firefox 19+ */
-  color: #b1b3b8;
-}
-
-input:-ms-input-placeholder {
-  /* Internet Explorer 10+ */
-  color: #b1b3b8;
-}
+<style lang="scss" scoped>
+@import './css/kingdeeLog.scss'
 </style>

src/views/manage/thirdPartyLog.vue

@@ -5,18 +5,18 @@
             <el-form :model="filterForm" label-width="100px" style="margin-top: 30px;">
                 <el-row>
                     <el-col :span="8">
-                        <el-form-item label="选择时间：">
+                        <el-form-item label="选择时间">
                             <el-date-picker v-model="dateTime" type="datetimerange" range-separator="至"
                                 start-placeholder="开始时间" end-placeholder="结束时间" @change="dateChange" />
                         </el-form-item>
                     </el-col>
                     <el-col :span="6">
-                        <el-form-item label="名称：">
+                        <el-form-item label="名称">
                             <el-input v-model="filterForm.name" placeholder="请输入名称" clearable />
                         </el-form-item>
                     </el-col>
                     <el-col :span="6">
-                        <el-form-item label="唯一标识：">
+                        <el-form-item label="唯一标识">
                             <el-input v-model="filterForm.queueId" placeholder="请输入唯一标识" clearable />
                         </el-form-item>
                     </el-col>