需求大厅开发
This commit is contained in:
BianLzhaoMin
parent
d44bb19d90
commit
0592ff5ea1
|
|
@ -9,11 +9,15 @@ declare module 'vue' {
|
|||
export interface GlobalComponents {
|
||||
Breadcrumb: typeof import('./src/components/Breadcrumb/index.vue')['default']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCarousel: typeof import('element-plus/es')['ElCarousel']
|
||||
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
|
||||
ElCascader: typeof import('element-plus/es')['ElCascader']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElEmpty: typeof import('element-plus/es')['ElEmpty']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
|
|
@ -30,6 +34,8 @@ declare module 'vue' {
|
|||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||
ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElUpload: typeof import('element-plus/es')['ElUpload']
|
||||
EquipCard: typeof import('./src/components/equipCard.vue')['default']
|
||||
|
|
|
|||
|
|
@ -1,33 +1,540 @@
|
|||
<script setup lang="ts">
|
||||
import NavMenu from 'components/Navmenu/index.vue'
|
||||
const router = useRouter()
|
||||
const activeName = ref('hall')
|
||||
const activeList = ref([
|
||||
{ v_name: 'hall', v_label: '寻源大厅' },
|
||||
{ v_name: 'notice', v_label: '寻源结果公示公告' }
|
||||
])
|
||||
const handleClick = (tab: any) => {
|
||||
router.push(tab.props.name)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 寻源比价 -->
|
||||
<NavMenu />
|
||||
<div class="equipList">
|
||||
<NavMenu></NavMenu>
|
||||
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane
|
||||
:label="item.v_label"
|
||||
:name="item.v_name"
|
||||
v-for="item in activeList"
|
||||
:key="item.v_name">
|
||||
<router-view />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<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">
|
||||
<div class="demand-card">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<div>国网***工程起重机租赁需求</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div>剩余----</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<div>装备类目</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<div>一级/二级/三级</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<div>租赁公司</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<div>一级/二级/三级</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<div>联系人</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<div>一级/二级/三级</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div>装备类目</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<div>一级/二级/三级</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div>装备类目</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<div>一级/二级/三级</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="noData">
|
||||
<el-empty :image-size="200" />
|
||||
</div> -->
|
||||
|
||||
<div class="pagination">
|
||||
<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 EquipCard from '@/components/equipCard.vue'
|
||||
import EquipCardHall from '@/components/equipCardHall/index.vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import {
|
||||
apiGetAddressList,
|
||||
apiGetEquipTypeList,
|
||||
getTypeListApi,
|
||||
getDeviceListApi,
|
||||
} from '@/http/api/equip'
|
||||
import { getCompanyListApi } from '@/http/api/home'
|
||||
import $bus from '@/utils/bus'
|
||||
import NavMenu from '@/components/Navmenu/index.vue'
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-tabs {
|
||||
padding: 15px 0;
|
||||
const router = useRouter()
|
||||
const route: any = useRoute()
|
||||
|
||||
//筛选条件列表数据
|
||||
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: 20,
|
||||
})
|
||||
|
||||
// 总条数
|
||||
const total = ref(0)
|
||||
|
||||
//装备列表
|
||||
const equipList: any = ref([])
|
||||
|
||||
// 获取装备分类
|
||||
const getTypeListData = async () => {
|
||||
const res = 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 = await getCompanyListApi()
|
||||
const addressList = res.data.map((e: any) => {
|
||||
return { ...e, name: e.operateAddress, value: e.companyId, 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 getDeviceListData = async (params: any = null, keyWord: any = null) => {
|
||||
// 组装查询参数
|
||||
const searchParams: any = {
|
||||
keyWord: keyWord ? keyWord : '',
|
||||
ageMin: '',
|
||||
ageMax: '',
|
||||
companyId: '',
|
||||
dayLeasePriceMin: '',
|
||||
dayLeasePriceMax: '',
|
||||
typeId: '',
|
||||
level: '',
|
||||
maStatus: 2,
|
||||
dayLeasePriceOrderBy:
|
||||
optionActive.value == 1 ? screenOptionList[optionActive.value].sort : '',
|
||||
updateTimeOrderBy: optionActive.value == 2 ? screenOptionList[optionActive.value].sort : '',
|
||||
}
|
||||
|
||||
screenChooseList.forEach((e: any, index: number) => {
|
||||
e.list.forEach((j: any) => {
|
||||
if (index === 0 && j.isChecked) {
|
||||
searchParams.typeId = j.value
|
||||
}
|
||||
|
||||
if ((index === 1 || index === 2) && j.isChecked) {
|
||||
searchParams.companyId = j.value
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
if (params) {
|
||||
searchParams.level = params.level ? params.level : ''
|
||||
searchParams.typeId = params.typeId ? params.typeId : ''
|
||||
searchParams.companyId = params.companyId ? params.companyId : ''
|
||||
searchParams.keyWord = params.keyWord ? params.keyWord : ''
|
||||
}
|
||||
|
||||
Object.assign(searchParams, pageData)
|
||||
const { data: res } = await getDeviceListApi(searchParams)
|
||||
equipList.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
|
||||
}
|
||||
})
|
||||
})
|
||||
getDeviceListData()
|
||||
}
|
||||
|
||||
//删除条件
|
||||
const handleClose = (tag: any) => {
|
||||
tag.isChecked = false
|
||||
screenChooseList[tag.index].list[0].isChecked = true
|
||||
getDeviceListData()
|
||||
}
|
||||
|
||||
// 排序操作
|
||||
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()
|
||||
}
|
||||
|
||||
//选中后添加到 大类中的select字段
|
||||
const selectScreen = (type: any, item: any, index: number) => {
|
||||
screenChooseList[index].list.forEach((e: any) => {
|
||||
e.isChecked = false
|
||||
})
|
||||
item.isChecked = !item.isChecked
|
||||
getDeviceListData()
|
||||
}
|
||||
|
||||
//分页page变化
|
||||
const onCurrentChange = (val: number) => {
|
||||
pageData.pageNum = val
|
||||
getDeviceListData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
$bus.on('search', (val: any) => {
|
||||
getDeviceListData(null, val)
|
||||
})
|
||||
let routeParams: any = null
|
||||
if (route.query.level && route.query.typeId) {
|
||||
routeParams = {
|
||||
level: route.query.level,
|
||||
typeId: route.query.typeId,
|
||||
}
|
||||
}
|
||||
if (route.query.companyId) {
|
||||
routeParams = {
|
||||
companyId: route.query.companyId,
|
||||
}
|
||||
}
|
||||
if (route.query.keyWord) {
|
||||
routeParams = {
|
||||
keyWord: route.query.keyWord,
|
||||
}
|
||||
}
|
||||
getDeviceListData(routeParams, null)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
$bus.off('search')
|
||||
})
|
||||
|
||||
// 点击跳转装备详情
|
||||
const onHandleDetails = (id: number | string) => {
|
||||
router.push(`/equipDetail/${id}`)
|
||||
}
|
||||
</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: 15px;
|
||||
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 {
|
||||
background-color: orange;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// flex-wrap: wrap;
|
||||
// background-color: pink;
|
||||
|
||||
// .card {
|
||||
// width: calc((100% - 45px) / 4);
|
||||
// margin-right: 15px;
|
||||
// cursor: pointer;
|
||||
// &:nth-child(4n) {
|
||||
// margin-right: 0;
|
||||
// }
|
||||
|
||||
// margin-bottom: 15px !important;
|
||||
// }
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
:deep.el-pagination.is-background .el-pager li.is-active {
|
||||
background-color: #3cb4a6;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<script setup lang="ts">
|
||||
import NavMenu from 'components/Navmenu/index.vue'
|
||||
const router = useRouter()
|
||||
const activeName = ref('hall')
|
||||
const activeList = ref([
|
||||
{ v_name: 'hall', v_label: '寻源大厅' },
|
||||
{ v_name: 'notice', v_label: '寻源结果公示公告' }
|
||||
])
|
||||
const handleClick = (tab: any) => {
|
||||
router.push(tab.props.name)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 寻源比价 -->
|
||||
<NavMenu />
|
||||
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane
|
||||
:label="item.v_label"
|
||||
:name="item.v_name"
|
||||
v-for="item in activeList"
|
||||
:key="item.v_name">
|
||||
<router-view />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-tabs {
|
||||
padding: 15px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -92,8 +92,8 @@
|
|||
:data="leaseList"
|
||||
show-overflow-tooltip
|
||||
:header-cell-style="{
|
||||
background: '#17907f',
|
||||
color: '#fff',
|
||||
background: '#fafafa',
|
||||
color: '#333',
|
||||
}"
|
||||
>
|
||||
<el-table-column align="center" label="序号" type="index" width="80" />
|
||||
|
|
@ -541,7 +541,11 @@ onMounted(() => {
|
|||
justify-content: flex-end;
|
||||
padding: 5px 0;
|
||||
}
|
||||
// :deep.el-pagination.is-background .el-pager li.is-active {
|
||||
// background-color: #3cb4a6;
|
||||
// }
|
||||
:deep.el-pagination.is-background .el-pager li.is-active {
|
||||
background-color: #3cb4a6;
|
||||
}
|
||||
:deep.el-form--inline .el-form-item {
|
||||
margin-right: 6px;
|
||||
width: 95%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue