667 lines
20 KiB
Vue
667 lines
20 KiB
Vue
<template>
|
||
<div class="equipList">
|
||
<NavMenu></NavMenu>
|
||
|
||
<div class="screen">
|
||
<div class="choose">
|
||
<template v-for="(v, i) in screenChooseList" :key="i">
|
||
<div class="line">
|
||
<div class="label">
|
||
{{ v.name }}
|
||
</div>
|
||
<div class="select">
|
||
<div
|
||
class="item"
|
||
:class="{
|
||
active: val.isChecked,
|
||
}"
|
||
@click="selectScreen(v.type, val, i)"
|
||
v-for="(val, index) in v.list"
|
||
:key="index"
|
||
>
|
||
{{ val.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div class="line" v-if="screenTags.length > 0">
|
||
<div class="label">已选条件：</div>
|
||
<div class="select tags">
|
||
<el-tag
|
||
v-for="(tag, i) in screenTags"
|
||
:key="i"
|
||
class="item"
|
||
@close="handleClose(tag)"
|
||
closable
|
||
>
|
||
{{ tag.name }}
|
||
</el-tag>
|
||
|
||
<span class="clear-btn" @click="onClearTags"> 清除选项 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btns">
|
||
<div
|
||
class="item"
|
||
@click="changeOption(v)"
|
||
:class="v.id == optionActive && 'active'"
|
||
v-for="(v, i) in screenOptionList"
|
||
:key="i"
|
||
>
|
||
{{ v.name }}
|
||
<template v-if="v.sort">
|
||
<el-icon class="icon" v-show="v.sort == 'DESC'">
|
||
<CaretBottom />
|
||
</el-icon>
|
||
<el-icon class="icon" v-show="v.sort == 'ASC'">
|
||
<CaretTop />
|
||
</el-icon>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="showList" v-if="leaseList.length > 0">
|
||
<div class="demand-card" v-for="item in leaseList" :key="item.id">
|
||
<div class="count-down">
|
||
<!-- <el-icon style="margin-right: 10px"><Warning /></el-icon> -->
|
||
<svg
|
||
class="icon"
|
||
aria-hidden="true"
|
||
style="width: 24px; height: 24px; margin-right: 10px"
|
||
>
|
||
<use xlink:href="#icon-daojishi-copy"></use>
|
||
</svg>
|
||
<!-- 剩余：08天12小时24分 -->
|
||
<div>
|
||
<el-countdown
|
||
format="剩余： DD [天] HH [小时] mm [分]"
|
||
:value="moment(item.endTime, 'YYYY-MM-DD HH:mm:ss').valueOf()"
|
||
>
|
||
</el-countdown>
|
||
</div>
|
||
</div>
|
||
<el-row>
|
||
<el-col :span="18">
|
||
<div style="font-size: 20px; font-weight: bold; letter-spacing: 1px">
|
||
{{ item.leaseName }}
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6"> </el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="2">
|
||
<div>装备类目</div>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<div>{{ item.groupName }}</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="2">
|
||
<div>租赁公司</div>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<div>{{ item.companyName }}</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div>预估数量</div>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<div>{{ item.leaseTotalNum }}</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="2">
|
||
<div>联系人</div>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<div>{{ item.person }}</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div>联系电话</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div>{{ item.personPhone }}</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="2">
|
||
<div>租赁开始日期</div>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<div>{{ item.leaseStartTime }}</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div>租赁结束日期</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div>{{ item.leaseEndTime }}</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="2">
|
||
<div>发布时间</div>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<div>{{ item.startTime }}</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div>截止时间</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div>{{ item.endTime }}</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<div class="btn-items">
|
||
<!-- <el-button
|
||
@click="router.push({ name: 'demand-details', query: { id: item.id } })"
|
||
>
|
||
需求详情
|
||
</el-button>
|
||
<el-button
|
||
:disabled="userId == item.publishUser"
|
||
@click="onAcceptOrders(item.id)"
|
||
>
|
||
接单
|
||
</el-button> -->
|
||
|
||
<div
|
||
@click="router.push({ name: 'demand-details', query: { id: item.id } })"
|
||
style="margin-bottom: 26px; border: 1px solid #00ae9c; color: #00ae9c"
|
||
>
|
||
需求详情
|
||
</div>
|
||
|
||
<div>
|
||
<el-button
|
||
v-if="rolesType != '2'"
|
||
style="
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #00ae9c;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 0;
|
||
"
|
||
:disabled="
|
||
userId == item.publishUser || companyId == item.publishCompany
|
||
"
|
||
:style="
|
||
userId == item.publishUser || companyId == item.publishCompany
|
||
? 'opacity:0.5;color:#fff'
|
||
: ''
|
||
"
|
||
@click="onAcceptOrders(item.id)"
|
||
>
|
||
接单
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="noData" v-else>
|
||
<el-empty :image-size="200" />
|
||
</div>
|
||
|
||
<div class="pagination" v-if="leaseList.length > 0">
|
||
<el-pagination
|
||
size="small"
|
||
background
|
||
layout="prev, pager, next"
|
||
:page-size="pageData.pageSize"
|
||
:total="total"
|
||
class="mt-4"
|
||
@current-change="onCurrentChange"
|
||
v-if="total > 0"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { getTypeListApi, getDeviceListApi } from 'http/api/equip'
|
||
import { getCompanyListApi, getLeaseListApi, setAcceptByIdApi, getAreaApi } from 'http/api/home'
|
||
import $bus from 'utils/bus'
|
||
import NavMenu from 'components/Navmenu/index.vue'
|
||
import moment from 'moment'
|
||
import { mainStore } from 'store/main'
|
||
const router = useRouter()
|
||
const route: any = useRoute()
|
||
const store: any = mainStore()
|
||
const userId = store.userInfo.userId
|
||
const companyId = store.userInfo.companyId
|
||
const leaseList = ref<any>([])
|
||
const rolesType = localStorage.getItem('rolesType')
|
||
|
||
//筛选条件列表数据
|
||
const screenChooseList: any = reactive([
|
||
{
|
||
type: 'deviceClass',
|
||
name: '装备分类：',
|
||
list: [
|
||
{
|
||
name: '全部',
|
||
value: '',
|
||
isChecked: true,
|
||
index: 0,
|
||
},
|
||
],
|
||
},
|
||
|
||
{
|
||
type: 'companyId',
|
||
name: '项目所在地：',
|
||
list: [
|
||
{
|
||
isChecked: true,
|
||
name: '全部',
|
||
value: '',
|
||
index: 1,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: 'companyId',
|
||
name: '需求单位：',
|
||
list: [
|
||
{
|
||
isChecked: true,
|
||
name: '全部',
|
||
value: '',
|
||
index: 2,
|
||
},
|
||
],
|
||
},
|
||
])
|
||
|
||
// 已选条件的tag标签
|
||
const screenTags = computed(() => {
|
||
const selectTagList: any = []
|
||
screenChooseList.forEach((e: any) => {
|
||
e.list.forEach((j: any) => {
|
||
if (j.isChecked && j.name !== '全部') {
|
||
selectTagList.push(j)
|
||
}
|
||
})
|
||
})
|
||
|
||
return selectTagList
|
||
})
|
||
// 综合排序 更新时间 月租金 排序按钮
|
||
const screenOptionList: any = reactive([
|
||
{
|
||
name: '发布时间',
|
||
id: 0,
|
||
sort: 'DESC',
|
||
},
|
||
{
|
||
name: '租期',
|
||
id: 1,
|
||
sort: 'DESC',
|
||
},
|
||
{
|
||
name: '截止时间',
|
||
id: 2,
|
||
sort: 'DESC', //desc or desc
|
||
},
|
||
{
|
||
name: '租赁数量',
|
||
id: 3,
|
||
sort: 'DESC', //desc or desc
|
||
},
|
||
])
|
||
//激活 排序按钮
|
||
const optionActive = ref(0)
|
||
|
||
//分页参数
|
||
const pageData = reactive({
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
})
|
||
|
||
// 总条数
|
||
const total = ref(0)
|
||
|
||
//装备列表
|
||
const equipList: any = ref([])
|
||
|
||
// 获取装备分类
|
||
const getTypeListData = async () => {
|
||
const res: any = await getTypeListApi()
|
||
const typeList = res.data.map((e: any) => {
|
||
return { ...e, name: e.typeName, value: e.typeId, isChecked: false, index: 0 }
|
||
})
|
||
screenChooseList[0].list.push(...typeList)
|
||
}
|
||
getTypeListData()
|
||
|
||
// 获取设备所在地
|
||
const getCompanyAddressListData = async () => {
|
||
const res: any = await getCompanyListApi()
|
||
const result: any = await getAreaApi(34)
|
||
const addressList = result.data.map((e: any) => {
|
||
return { ...e, name: e.areaName, value: e.areaCode, isChecked: false, index: 1 }
|
||
})
|
||
const companyList = res.data.map((e: any) => {
|
||
return { ...e, name: e.companyName, value: e.companyId, isChecked: false, index: 2 }
|
||
})
|
||
|
||
screenChooseList[1].list.push(...addressList)
|
||
screenChooseList[2].list.push(...companyList)
|
||
}
|
||
getCompanyAddressListData()
|
||
|
||
const getLeaseListData = async (keyWord: any = '') => {
|
||
const searchParams: any = {
|
||
keyWord: keyWordsSearch.value ? keyWordsSearch.value : '',
|
||
companyId: '',
|
||
typeId: '',
|
||
level: '',
|
||
cityCode: '',
|
||
startTime: optionActive.value == 0 ? screenOptionList[optionActive.value].sort : '',
|
||
rentDay: optionActive.value == 1 ? screenOptionList[optionActive.value].sort : '',
|
||
endTime: optionActive.value == 2 ? screenOptionList[optionActive.value].sort : '',
|
||
rentNum: optionActive.value == 3 ? screenOptionList[optionActive.value].sort : '',
|
||
}
|
||
|
||
screenChooseList.forEach((e: any, index: number) => {
|
||
e.list.forEach((j: any) => {
|
||
if (index === 0 && j.isChecked) {
|
||
searchParams.typeId = j.value
|
||
searchParams.level = j.value ? 1 : ''
|
||
}
|
||
|
||
if (index == 1 && j.isChecked) {
|
||
searchParams.cityCode = j.value
|
||
}
|
||
if (index == 2 && j.isChecked) {
|
||
searchParams.companyId = j.value
|
||
}
|
||
})
|
||
})
|
||
|
||
Object.assign(searchParams, pageData)
|
||
const { data: res }: any = await getLeaseListApi(searchParams)
|
||
|
||
leaseList.value = res.rows
|
||
total.value = res.total
|
||
}
|
||
|
||
// 清除筛选条件
|
||
const onClearTags = () => {
|
||
screenChooseList.forEach((e: any) => {
|
||
e.list.forEach((j: any, index: number) => {
|
||
j.isChecked = false
|
||
if (index === 0) {
|
||
j.isChecked = true
|
||
}
|
||
})
|
||
})
|
||
getLeaseListData()
|
||
}
|
||
|
||
//删除条件
|
||
const handleClose = (tag: any) => {
|
||
tag.isChecked = false
|
||
screenChooseList[tag.index].list[0].isChecked = true
|
||
// getDeviceListData()
|
||
getLeaseListData()
|
||
}
|
||
|
||
// 排序操作
|
||
const changeOption = (val: any) => {
|
||
if (val.sort && optionActive.value == val.id) {
|
||
val.sort = val.sort == 'ASC' ? 'DESC' : 'ASC'
|
||
}
|
||
|
||
console.log(screenOptionList, 'screenOptionList')
|
||
optionActive.value = val.id
|
||
// getDeviceListData()
|
||
getLeaseListData()
|
||
}
|
||
|
||
//选中后添加到 大类中的select字段
|
||
const selectScreen = (type: any, item: any, index: number) => {
|
||
screenChooseList[index].list.forEach((e: any) => {
|
||
e.isChecked = false
|
||
})
|
||
item.isChecked = !item.isChecked
|
||
// getDeviceListData()
|
||
getLeaseListData()
|
||
}
|
||
|
||
//分页page变化
|
||
const onCurrentChange = (val: number) => {
|
||
pageData.pageNum = val
|
||
// getDeviceListData()
|
||
getLeaseListData()
|
||
}
|
||
|
||
const keyWordsSearch = ref('')
|
||
onMounted(() => {
|
||
getLeaseListData()
|
||
$bus.on('search', (val: any) => {
|
||
keyWordsSearch.value = val
|
||
getLeaseListData(val)
|
||
})
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
$bus.off('search')
|
||
})
|
||
|
||
// 接单
|
||
const onAcceptOrders = (id: any) => {
|
||
ElMessageBox.confirm('确定接单吗?', '温馨提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'success',
|
||
})
|
||
.then(async () => {
|
||
const res: any = await setAcceptByIdApi({ id })
|
||
if (res.code === 200) {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '接单成功',
|
||
})
|
||
|
||
getLeaseListData()
|
||
}
|
||
})
|
||
.catch(() => {})
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.equipList {
|
||
.showScreen {
|
||
margin: 15px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #ccc;
|
||
// height: 30px;
|
||
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #949494;
|
||
}
|
||
}
|
||
|
||
.screen {
|
||
margin-bottom: 20px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid #ccc;
|
||
.choose {
|
||
margin-top: 20px;
|
||
// font-size: 14px;
|
||
|
||
.line {
|
||
padding: 14px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
// border-bottom: 1px solid #dddddd;
|
||
|
||
.label {
|
||
// width: 100px;
|
||
box-sizing: border-box;
|
||
// padding: 0 15px;
|
||
// background: #f3f3f3;
|
||
}
|
||
|
||
.select {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
box-sizing: border-box;
|
||
padding: 0 15px;
|
||
|
||
.item {
|
||
padding: 2px 16px;
|
||
margin-right: 15px;
|
||
cursor: pointer;
|
||
color: #939393;
|
||
font-size: 17px;
|
||
line-height: 25px;
|
||
height: 25px;
|
||
|
||
&:hover {
|
||
color: #3cb4a6;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
background-color: #3cb4a6;
|
||
color: #fff !important;
|
||
border-radius: 25px;
|
||
}
|
||
}
|
||
|
||
.tags {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #138472;
|
||
.item {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.clear-btn {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.el-tag {
|
||
background-color: #fff;
|
||
border: 1px solid #138472;
|
||
color: #138472;
|
||
}
|
||
:deep .el-tag .el-tag__close {
|
||
color: #138472;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.active {
|
||
color: #138472 !important;
|
||
font-weight: bold !important;
|
||
}
|
||
|
||
.btns {
|
||
display: flex;
|
||
align-items: center;
|
||
// margin-top: 20px;
|
||
|
||
.item {
|
||
background: #f7f9fa;
|
||
border-radius: 12px;
|
||
padding: 10px 20px;
|
||
|
||
// font-size: 17px;
|
||
font-weight: 500;
|
||
color: #9d9d9d;
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
|
||
.icon {
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.showList {
|
||
.demand-card {
|
||
margin-bottom: 15px;
|
||
padding: 20px 25px;
|
||
border-radius: 14px;
|
||
background-color: #fff;
|
||
position: relative;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
|
||
position: relative;
|
||
|
||
.el-row {
|
||
padding: 10px 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.count-down {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
background-color: orange;
|
||
width: 30%;
|
||
padding: 12px 0;
|
||
background: linear-gradient(to right, #4dd1c7, #00af9f);
|
||
}
|
||
|
||
.btn-items {
|
||
position: absolute;
|
||
right: 80px;
|
||
bottom: 30px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
div {
|
||
cursor: pointer;
|
||
width: 180px;
|
||
text-align: center;
|
||
// padding: 10px 0;
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
|
||
height: 38px;
|
||
line-height: 38px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pagination {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
|
||
:deep.el-pagination.is-background .el-pager li.is-active {
|
||
background-color: #3cb4a6;
|
||
}
|
||
:deep .el-statistic__content {
|
||
color: #fff;
|
||
font-size: 16px;
|
||
}
|
||
</style>
|