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" 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
                        style="background-color: #00ae9c"
                        @click="onAcceptOrders(item.id, item.publishUser)"
                    >
                        接单
                    </div> -->
                    <div>
                        <el-button
                            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 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,
        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()
}

onMounted(() => {
    getLeaseListData()
    $bus.on('search', (val: any) => {
        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>