mz666
/
bocai_supplyChain_pc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加筛选

Browse Source
cyl/dev
jscyl13849007907 1 year ago
parent bad88e38c0
commit c3f3c866b9
1 changed files with 591 additions and 316 deletions
Show Stats Download Patch File Download Diff File

907
src/components/FirstJob/joblist.vue
Unescape Escape View File

@ -50,9 +50,270 @@
</a-input> </a-input>
</div> </div>
<div class="g_flex_none g_ml_12"> <div class="g_flex_none g_ml_12">
<a style="font-size: 14px;" @click="hideFilterContent"> <a-dropdown :trigger="['click']">
筛选 <a-icon type="down" style="font-size: 14px;" /> <a style="font-size: 14px;"@click="e => e.preventDefault()">
</a> 筛选 <a-icon type="down" style="font-size: 14px;" />
</a>
<div slot="overlay" class="model-obj">
<div class="filter" :class="[filterStatus == 0 ? '' : 'nobd']" style>
<div class="filter-title" :style="{ top: filterStatus == 0 ? '-32px' : '-21px' }" v-if="false">
<span>
<span>
所有筛选
<i class="iconfont icon-youjiantou"></i>
</span>
<span class="filter-show">
<span @click="delFilter($event, 'price')" v-show="filterObj.price">
{{ filterObj.price }}
<i class="iconfont icon-guanbi2" v-show="filterObj.price"></i>
</span>
<span @click="delFilter($event, 'gender')" v-show="filterObj.gender">
{{ filterObj.gender }}
<i class="iconfont icon-guanbi2" v-show="filterObj.gender"></i>
</span>
<span @click="delFilter($event, 'age')" v-show="filterObj.age">
{{ filterObj.age }}
<i class="iconfont icon-guanbi2" v-show="filterObj.age"></i>
</span>
<span @click="delFilter($event, 'special', item)" v-for="(item, index) in filterObj.specialactive" :key="index">
{{ item.name }}
<i class="iconfont icon-guanbi2"></i>
</span>
<i v-show="showDotted" style="line-height: 24px">...</i>
</span>
</span>
<span>
<span class="toggleFilter" @click="hideFilterContent">
{{ filterStatus == 0 ? "收起筛选" : "展开筛选" }}
<i
class="iconfont icon-sousuoxiala"
:style="{
transform: filterStatus == 0 ? 'rotate(180deg) scale(.6)' : '',
}"
></i>
</span>
<a-dropdown :trigger="['click']" overlayClassName="sortClass" placement="bottomRight">
<span class="sort">{{ sortStr }}</span>
<a-menu slot="overlay">
<a-menu-item>
<div class="sortMenu" :class="sortNum == 1 ? 'active' : ''" @click="sortList('price')">工价优先</div>
</a-menu-item>
<a-menu-item>
<div class="sortMenu" :class="sortNum == 2 ? 'active' : ''" @click="sortList('juli')">距离优先</div>
</a-menu-item>
<a-menu-item>
<div class="sortMenu" :class="sortNum == 3 ? 'active' : ''" @click="sortList('fuwufei')">佣金优先</div>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</div>
<div class="filter-content" style="transition: height 0.2s">
<dl class="price">
<dt>工价：</dt>
<dd>
<div class="ageinputbox">
<!-- <div> -->
<a-input
class="ageinput"
v-model="minMonthlyPay"
:maxLength="5"
type="text"
allow-clear
prefix="￥"
@input="resetPriceSearch"
@click.stop="
() => {
return false;
}
"
></a-input>
<span class="middle-line">-</span>
<a-input
class="ageinput"
v-model="maxMonthlyPay"
:maxLength="5"
type="text"
allow-clear
prefix="￥"
@input="resetPriceSearch"
@click.stop="
() => {
return false;
}
"
></a-input>
<div class="confirm">
<button @click="searchPrice">确定</button>
</div>
<!-- </div> -->
</div>
<i @click="searchPrice">
<br>
<div class="g_flex_row_start g_mt_12">
<span class="g_mr_40 dav"
:style="{
color: filterObj.price == '3000-4000' ? '#1890ff' : '',
}"
>3000-4000</span
>
<span class="g_mr_40 dav"
:style="{
color: filterObj.price == '4000-5000' ? '#1890ff' : '',
}"
>4000-5000</span
>
<span
class="g_mr_40 dav"
:style="{
color: filterObj.price == '5000-6000' ? '#1890ff' : '',
}"
>5000-6000</span
>
<span class="dav"
:style="{
color: filterObj.price == '6000-7000' ? '#1890ff' : '',
}"
>6000-7000</span
>
</div>
</i>
</dd>
</dl>
<dl class="price" style="padding-bottom: 14px;">
<dt>年龄：</dt>
<dd>
<div class="ageinputbox">
<!-- <div> -->
<a-input
class="ageinput age"
v-model="minAge"
:maxLength="3"
type="text"
allow-clear
suffix="岁"
@input="resetAgeSearch"
@click.stop="
() => {
return false;
}
"
></a-input>
<span class="middle-line">-</span>
<a-input
class="ageinput age"
v-model="maxAge"
:maxLength="3"
type="text"
allow-clear
suffix="岁"
@input="resetAgeSearch"
@click.stop="
() => {
return false;
}
"
></a-input>
<div class="confirm">
<button @click="searchAge">确定</button>
</div>
<!-- </div> -->
</div>
</dd>
</dl>
<dl>
<dt>性别：</dt>
<dd @click="searchGender">
<span :style="{ color: filterObj.gender == '男' ? '#1890ff' : '' }">男</span>
<span :style="{ color: filterObj.gender == '女' ? '#1890ff' : '' }">女</span>
<span
:style="{
color: filterObj.gender == '男女不限' ? '#1890ff' : '',
}"
>男女不限</span
>
</dd>
</dl>
<dl>
<dt>分类：</dt>
<dd>
<span v-for="(item, index) in classifyList" :key="index" :class="{ 'special-active': filterObj.specialactive.indexOf(item) > -1 }" @click.stop="classifyClick(index, item)">{{ item.name }}</span>
</dd>
</dl>
<dl>
<dt>薪资福利：</dt>
<dd>
<span
v-for="(item, index) in tagArray1"
:key="index"
:class="{
'special-active': filterObj.specialactive.indexOf(item) > -1,
}"
@click.stop="specialclick(index, item)"
>{{ item.name }}</span
>
</dd>
</dl>
<dl>
<dt>宿舍保障：</dt>
<dd>
<span
v-for="(item, index) in tagArray3"
:key="index"
:class="{
'special-active': filterObj.specialactive.indexOf(item) > -1,
}"
@click.stop="specialclick(index, item)"
>{{ item.name }}</span
>
</dd>
</dl>
<dl>
<dt>班制休息：</dt>
<dd>
<span
v-for="(item, index) in tagArray0"
:key="index"
:class="{
'special-active': filterObj.specialactive.indexOf(item) > -1,
}"
@click.stop="specialclick(index, item)"
>{{ item.name }}</span
>
</dd>
</dl>
<dl>
<dt>面试特色：</dt>
<dd>
<span
v-for="(item, index) in tagArray4"
:key="index"
:class="{
'special-active': filterObj.specialactive.indexOf(item) > -1,
}"
@click.stop="specialclick(index, item)"
>{{ item.name }}</span
>
</dd>
</dl>
<dl>
<dt>其他特色：</dt>
<dd>
<span
v-for="(item, index) in tagArray2"
:key="index"
:class="{
'special-active': filterObj.specialactive.indexOf(item) > -1,
}"
@click.stop="specialclick(index, item)"
>{{ item.name }}</span
>
</dd>
</dl>
</div>
</div>
</div>
</a-dropdown>
</div> </div>
</div> </div>
<ul class="hotTag" style="display: none"> <ul class="hotTag" style="display: none">
@ -92,7 +353,7 @@
<!-- v-if="loginValue.agencyName == '郑州一才工作' || loginValue.agencyName == '一才工作'" --> <!-- v-if="loginValue.agencyName == '郑州一才工作' || loginValue.agencyName == '一才工作'" -->
<!-- <div class="tabSubset" :class="{ active: signType == 2 }" data-type="2">三方</div> --> <!-- <div class="tabSubset" :class="{ active: signType == 2 }" data-type="2">三方</div> -->
</div> </div>
<div class="filter" v-show="signType == ''" :class="[filterStatus == 0 ? '' : 'nobd']" style> <div class="filter" v-if="false" :class="[filterStatus == 0 ? '' : 'nobd']" style>
<div class="filter-title" :style="{ top: filterStatus == 0 ? '-32px' : '-21px' }" v-if="false"> <div class="filter-title" :style="{ top: filterStatus == 0 ? '-32px' : '-21px' }" v-if="false">
<span> <span>
<span> <span>
@ -2473,318 +2734,8 @@ export default {
} }
} }
} }
.filter {
position: relative;
width: 100%;
top: -10px;
margin-top: 10px;
margin-bottom: 6px;
box-sizing: border-box;
border: 1px solid #ededed;
border-radius: 6px;
// background-color: pink;
padding: 0 12px;
.filter-title {
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
width: 100%;
height: 24px;
top: -34px;
left: 0;
padding-left: 20px;
z-index: 10;
span i {
font-size: 12px;
}
.toggleFilter {
height: 24px;
padding: 0px 2px 0 4px;
line-height: 22px;
border: 1px solid #ededed;
background-color: #f5f5f5;
border-radius: 4px;
color: #666;
cursor: pointer;
user-select: none;
i {
// line-height: 28px;
height: 100%;
line-height: 22px;
display: inline-block;
transform-origin: center;
transform: scale(0.6);
margin-left: 2px;
}
}
.sort {
width: 86px;
height: 22px;
margin-left: 16px;
display: inline-block;
text-align: center;
padding: 0px 2px 0 4px;
line-height: 20px;
border: 1px solid #ededed;
background-color: #f5f5f5;
border-radius: 4px;
color: #666;
cursor: pointer;
user-select: none;
}
> span:first-child {
display: flex;
align-items: center;
justify-content: start;
line-height: 22px;
> span:first-child {
margin-right: 14px;
i {
margin-left: 4px;
}
}
}
.filter-show {
display: flex;
line-height: 1;
color: #666;
> span:nth-child(-n + 6) {
display: inline-block;
}
> span {
display: none;
height: 24px;
line-height: 22px;
padding: 0 2px 0 4px;
background-color: #f5f5f5;
border: 1px solid #ededed;
margin-right: 8px;
user-select: none;
border-radius: 4px;
cursor: pointer;
&:hover {
border-color: #1890ff;
background: #f4faff;
color: #1890ff;
i {
color: #1890ff;
}
}
i {
font-size: 14px;
margin-left: 4px;
color: #666;
}
}
}
}
.filter-content {
overflow: hidden;
// background-color: skyblue;
dl {
display: flex;
justify-content: start;
padding: 8px 8px 4px 8px;
font-size: 14px;
line-height: 1.5;
user-select: none;
.special-active {
color: #1890ff !important;
// background-color: rgba(255, 106, 0, 0.1) !important;
}
&:first-child {
padding-bottom: 7px;
dd {
> i {
> span {
color: #333;
&:hover {
color: #1890ff;
}
}
}
}
}
&:not(:last-child) {
border-bottom: 1px dotted #ededed;
}
&:not(:first-child) {
dd {
display: flex;
justify-content: start;
flex-wrap: wrap;
> span {
margin-bottom: 4px;
color: #333;
cursor: pointer;
&:hover {
color: #1890ff;
}
}
}
}
dt {
width: 74px;
margin-right: 16px;
text-align: left;
color: #888;
}
dd {
flex: 1;
.ageinputbox {
position: relative;
display: inline-block;
margin-right: 16px;
> span:nth-of-type(2) {
position: relative;
z-index: 2;
}
&:hover .confirm {
display: block;
}
.ageinput:not(.age) {
position: relative;
z-index: 3;
padding: 0;
// margin: 0 5px;
height: 26px;
width: 80px;
border-color: #ddd;
.ant-input-prefix {
left: 3px;
top: 51%;
}
&:hover {
input {
border-color: #1890ff;
}
}
input {
border-radius: 4px;
text-indent: 20px;
height: 26px;
padding: 0;
padding-right: unset;
border-color: #ddd;
&::placeholder {
// text-indent: 30px;
font-size: 14px !important;
}
&:hover {
border-color: #1890ff;
box-shadow: none;
}
&:focus {
border-color: #1890ff;
box-shadow: none;
}
}
.ant-input-suffix {
right: 3px;
}
}
.ageinput {
position: relative;
z-index: 3;
padding: 0;
// margin: 0 5px;
height: 26px;
width: 80px;
border-color: #ddd;
.ant-input-prefix {
left: 3px;
top: 51%;
}
&:hover {
input {
border-color: #1890ff;
}
}
input {
border-radius: 4px;
text-indent: 10px;
height: 26px;
padding: 0;
padding-right: unset;
border-color: #ddd;
&::placeholder {
// text-indent: 30px;
font-size: 14px !important;
}
&:hover {
border-color: #1890ff;
box-shadow: none;
}
&:focus {
border-color: #1890ff;
box-shadow: none;
}
}
.ant-input-suffix {
right: 3px;
}
}
.confirm {
position: absolute;
display: none;
width: 254px;
height: 46px;
line-height: 46px;
left: -8px;
top: -11px;
z-index: 1;
border: 1px solid #eee;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 0px 10px 5px #eee;
button {
position: relative;
width: 44px;
height: 26px;
line-height: 26px;
top: 52%;
transform: translateY(-50%);
margin-right: 8px;
float: right;
background-color: #1890ff;
border-radius: 4px;
border: none;
color: #fff;
&:hover {
background-color: #1890ffdd;
}
&:active {
background-color: #1890ffdd;
}
}
}
}
> span {
margin-right: 40px;
> span {
cursor: pointer;
margin-right: 40px;
}
}
}
}
.price {
dd i {
span {
cursor: pointer;
margin-right: 40px;
}
}
}
}
}
.nodata { .nodata {
overflow: hidden; overflow: hidden;
@ -3293,4 +3244,328 @@ export default {
p { p {
margin-bottom: 0; margin-bottom: 0;
} }
.model-obj{
background-color: #ffffff;
position: absolute;
left: -592px;
top: 14px;
width: 640px;
border-radius: 6px;
.filter {
// position: relative;
// width: 100%;
// top: -10px;
// margin-top: 10px;
// margin-bottom: 6px;
box-sizing: border-box;
border: 1px solid #ededed;
// background-color: pink;
padding: 12px;
.filter-title {
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
width: 100%;
height: 24px;
top: -34px;
left: 0;
padding-left: 20px;
z-index: 10;
span i {
font-size: 12px;
}
.toggleFilter {
height: 24px;
padding: 0px 2px 0 4px;
line-height: 22px;
border: 1px solid #ededed;
background-color: #f5f5f5;
border-radius: 4px;
color: #666;
cursor: pointer;
user-select: none;
i {
// line-height: 28px;
height: 100%;
line-height: 22px;
display: inline-block;
transform-origin: center;
transform: scale(0.6);
margin-left: 2px;
}
}
.sort {
width: 86px;
height: 22px;
margin-left: 16px;
display: inline-block;
text-align: center;
padding: 0px 2px 0 4px;
line-height: 20px;
border: 1px solid #ededed;
background-color: #f5f5f5;
border-radius: 4px;
color: #666;
cursor: pointer;
user-select: none;
}
> span:first-child {
display: flex;
align-items: center;
justify-content: start;
line-height: 22px;
> span:first-child {
margin-right: 14px;
i {
margin-left: 4px;
}
}
}
.filter-show {
display: flex;
line-height: 1;
color: #666;
> span:nth-child(-n + 6) {
display: inline-block;
}
> span {
display: none;
height: 24px;
line-height: 22px;
padding: 0 2px 0 4px;
background-color: #f5f5f5;
border: 1px solid #ededed;
margin-right: 8px;
user-select: none;
border-radius: 4px;
cursor: pointer;
&:hover {
border-color: #1890ff;
background: #f4faff;
color: #1890ff;
i {
color: #1890ff;
}
}
i {
font-size: 14px;
margin-left: 4px;
color: #666;
}
}
}
}
.filter-content {
overflow: hidden;
// background-color: skyblue;
dl {
display: flex;
justify-content: start;
padding: 8px 8px 4px 8px;
font-size: 14px;
line-height: 1.5;
user-select: none;
.special-active {
color: #1890ff !important;
// background-color: rgba(255, 106, 0, 0.1) !important;
}
&:first-child {
padding-bottom: 7px;
dd {
> i {
> span {
color: #333;
&:hover {
color: #1890ff;
}
}
}
}
}
&:not(:last-child) {
border-bottom: 1px dotted #ededed;
}
&:not(:first-child) {
dd {
display: flex;
justify-content: start;
flex-wrap: wrap;
> span {
margin-bottom: 4px;
color: #333;
cursor: pointer;
&:hover {
color: #1890ff;
}
}
}
}
dt {
width: 74px;
margin-right: 16px;
text-align: left;
color: #888;
}
dd {
flex: 1;
.ageinputbox {
position: relative;
display: inline-block;
margin-right: 16px;
> span:nth-of-type(2) {
position: relative;
z-index: 2;
}
&:hover .confirm {
display: block;
}
.ageinput:not(.age) {
position: relative;
z-index: 3;
padding: 0;
// margin: 0 5px;
height: 26px;
width: 80px;
border-color: #ddd;
.ant-input-prefix {
left: 3px;
top: 51%;
}
&:hover {
input {
border-color: #1890ff;
}
}
input {
border-radius: 4px;
text-indent: 20px;
height: 26px;
padding: 0;
padding-right: unset;
border-color: #ddd;
&::placeholder {
// text-indent: 30px;
font-size: 14px !important;
}
&:hover {
border-color: #1890ff;
box-shadow: none;
}
&:focus {
border-color: #1890ff;
box-shadow: none;
}
}
.ant-input-suffix {
right: 3px;
}
}
.ageinput {
position: relative;
z-index: 3;
padding: 0;
// margin: 0 5px;
height: 26px;
width: 80px;
border-color: #ddd;
.ant-input-prefix {
left: 3px;
top: 51%;
}
&:hover {
input {
border-color: #1890ff;
}
}
input {
border-radius: 4px;
text-indent: 10px;
height: 26px;
padding: 0;
padding-right: unset;
border-color: #ddd;
&::placeholder {
// text-indent: 30px;
font-size: 14px !important;
}
&:hover {
border-color: #1890ff;
box-shadow: none;
}
&:focus {
border-color: #1890ff;
box-shadow: none;
}
}
.ant-input-suffix {
right: 3px;
}
}
.confirm {
position: absolute;
display: none;
width: 254px;
height: 46px;
line-height: 46px;
left: -8px;
top: -11px;
z-index: 1;
border: 1px solid #eee;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 0px 10px 5px #eee;
button {
position: relative;
width: 44px;
height: 26px;
line-height: 26px;
top: 52%;
transform: translateY(-50%);
margin-right: 8px;
float: right;
background-color: #1890ff;
border-radius: 4px;
border: none;
color: #fff;
&:hover {
background-color: #1890ffdd;
}
&:active {
background-color: #1890ffdd;
}
}
}
}
> span {
margin-right: 40px;
> span {
cursor: pointer;
margin-right: 40px;
}
}
}
}
.price {
dd i {
span {
cursor: pointer;
margin-right: 40px;
}
}
}
}
}
}
.dav{
&:hover{
color: rgb(24, 144, 255);
}
}
</style> </style>

Write Preview
Loading…
Cancel
Save