Skip to content

D
dsk-operate-sys-cscec
Commit 0e2f12b4 authored by danfuman's avatar danfuman
Browse files
Options

修改

parent 3f50580f
Hide whitespace changes
Inline Side-by-side
Showing with 218 additions and 21 deletions
dsk-operate-ui/src/views/custom/customList/index.vue
View file @ 0e2f12b4
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
<img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt=""> <img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
<span v-show="!hover && !searchParam.companyName">搜索</span> <span v-show="!hover && !searchParam.companyName">搜索</span>
<el-input v-model="searchParam.companyName" placeholder="输入关键词查询" <el-input v-model="searchParam.companyName" placeholder="输入关键词查询"
@focus="searchFocus($event)" @blur="searchBlur($event)" @focus="searchFocus($event)" @blur="searchBlur($event)" @keydown.native.enter="handleSearch"
@input="value => searchInput(value)" v-show="hover || searchParam.companyName"> @input="value => searchInput(value)" v-show="hover || searchParam.companyName">
<template slot="suffix"> <template slot="suffix">
<transition mode="out-in" appear name="fade"> <transition mode="out-in" appear name="fade">
......
dsk-operate-ui/src/views/custom/historicalCustomers/index.vue
View file @ 0e2f12b4
...@@ -8,10 +8,23 @@ ...@@ -8,10 +8,23 @@
<div class="p2">建议调整关键词或筛选条件，重新搜索</div> <div class="p2">建议调整关键词或筛选条件，重新搜索</div>
</div> </div>
<div class="table_search"> <div class="table_search">
<div class="newSearch"> <div>
<el-input type="text" v-model="searchParam.companyName" clearable placeholder="输入企业名称查询" @change="clearname" > <!-- 未点击前的输入框样式 -->
<i slot="prefix" class="el-input__icon"><img src="@/assets/images/project/sousuo.png" width="16px" @click="handleCurrentChange(1)"></i> <div class="normal-search-container" :class="{'is-hover-search' : hover}" @mouseover="searchHover($event)"
</el-input> @mouseleave="searchUnHover($event,searchParam.companyName)">
<img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
<span v-show="!hover && !searchParam.companyName">搜索</span>
<el-input v-model="searchParam.companyName" placeholder="输入关键词查询"
@focus="searchFocus($event)" @blur="searchBlur($event)" @keydown.native.enter="getCustomerList"
@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 = '';getCustomerList()"
v-show="showClearIcon">
</transition>
</template>
</el-input>
</div>
</div> </div>
<div class="dc"> <div class="dc">
<div class="total">共{{tableData.total}}条</div> <div class="total">共{{tableData.total}}条</div>
...@@ -239,6 +252,8 @@ export default { ...@@ -239,6 +252,8 @@ export default {
keys:1, keys:1,
RLcompanyName:'',//重新认领企业名称 RLcompanyName:'',//重新认领企业名称
isSkeleton:true, isSkeleton:true,
showClearIcon: false,
hover: false,
} }
}, },
created() { created() {
...@@ -336,6 +351,28 @@ export default { ...@@ -336,6 +351,28 @@ export default {
this.searchParam.pageNum=val this.searchParam.pageNum=val
this.getCustomerList() this.getCustomerList()
}, },
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
}
},
} }
} }
</script> </script>
...@@ -358,6 +395,81 @@ export default { ...@@ -358,6 +395,81 @@ export default {
padding-top: 16px; padding-top: 16px;
width: 100%; width: 100%;
height: 100%; height: 100%;
.table_search{
::v-deep .normal-search-container {
display: flex;
align-items: center;
line-height: 32px;
height: 32px;
&.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;
}
}
}
}
}
} }
.box{ .box{
position: relative; position: relative;
......
dsk-operate-ui/src/views/macro/enterprises/index.vue
View file @ 0e2f12b4
...@@ -32,19 +32,35 @@ ...@@ -32,19 +32,35 @@
<!--<i slot="prefix" class="el-icon-search"></i>--> <!--<i slot="prefix" class="el-icon-search"></i>-->
<!--<el-button slot="append" @click="handleSearch()">搜索</el-button>--> <!--<el-button slot="append" @click="handleSearch()">搜索</el-button>-->
<!--</el-input>--> <!--</el-input>-->
<!--&lt;!&ndash; 未点击前的输入框样式 &ndash;&gt;-->
<!--<div class="normal-search-container" @click="showSearchBox = true" v-if="!showSearchBox">-->
<!--<img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">-->
<!--<span>搜索</span>-->
<!--</div>-->
<!--&lt;!&ndash; 输入框展开后样式 &ndash;&gt;-->
<!--<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="queryParams.ename"-->
<!--placeholder="输入关键词查询"></el-input>-->
<!--<span @click="handleSearch">搜索</span>-->
<!--</div>-->
<!--</transition>-->
<!-- 未点击前的输入框样式 --> <!-- 未点击前的输入框样式 -->
<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,queryParams.ename)">
<img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt=""> <img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
<span>搜索</span> <span v-show="!hover && !queryParams.ename">搜索</span>
<el-input v-model="queryParams.ename" placeholder="输入关键词查询"
@focus="searchFocus($event)" @blur="searchBlur($event)" @keydown.native.enter="handleSearch"
@input="value => searchInput(value)" v-show="hover || queryParams.ename">
<template slot="suffix">
<transition mode="out-in" appear name="fade">
<img src="@/assets/images/enterprise/search-input-clear-icon.svg" alt="" @click.stop="queryParams.ename = '';handleSearch()"
v-show="showClearIcon">
</transition>
</template>
</el-input>
</div> </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="queryParams.ename"
placeholder="输入关键词查询"></el-input>
<span @click="handleSearch">搜索</span>
</div>
</transition>
<span class="total">共{{tableDataTotal}}条</span> <span class="total">共{{tableDataTotal}}条</span>
</div> </div>
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton> <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
...@@ -157,7 +173,8 @@ export default { ...@@ -157,7 +173,8 @@ export default {
timePlaceholder:'中标时间', timePlaceholder:'中标时间',
inputID1:this.getUid(), inputID1:this.getUid(),
inputID2:this.getUid(), inputID2:this.getUid(),
showSearchBox: false showClearIcon: false,
hover: false,
} }
}, },
created() { created() {
...@@ -315,6 +332,28 @@ export default { ...@@ -315,6 +332,28 @@ export default {
this.querySubmit() this.querySubmit()
} }
}, },
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
}
},
formatStatus: function(row, column, cellValue) { formatStatus: function(row, column, cellValue) {
return cellValue? cellValue : '-' return cellValue? cellValue : '-'
}, },
...@@ -593,12 +632,21 @@ export default { ...@@ -593,12 +632,21 @@ export default {
margin-bottom: 3px; margin-bottom: 3px;
} }
} }
.normal-search-container { ::v-deep .normal-search-container {
margin-left: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; line-height: 32px;
height: 34px; height: 32px;
&.is-hover-search {
width: 238px;
background: #f4f6f9;
border-radius: 4px 4px 4px 4px;
& > img {
cursor: unset;
}
}
&:hover { &:hover {
& > span { & > span {
color: #0081ff; color: #0081ff;
...@@ -609,15 +657,52 @@ export default { ...@@ -609,15 +657,52 @@ export default {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-left: 12px; margin-left: 12px;
cursor: pointer;
} }
& > span { & > span {
color: #232323;
color: rgba(35, 35, 35, 0.8); color: rgba(35, 35, 35, 0.8);
font-weight: 400; font-weight: 400;
margin-left: 8px; margin-left: 8px;
line-height: 22px; line-height: 22px;
font-size: 14px; 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;
}
}
} }
} }
.cooperate-name { .cooperate-name {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment