Zlpt_Portal/src/views/parity/index.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">
            <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'

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>