需求大厅开发

components.d.ts

@@ -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']

src/views/parity/index.vue

@@ -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>
-    <!-- 寻源比价 -->
+    <div class="equipList">
-    <NavMenu />
+        <NavMenu></NavMenu>
 
-    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+        <div class="screen">
-        <el-tab-pane
+            <div class="choose">
-            :label="item.v_label"
+                <template v-for="(v, i) in screenChooseList" :key="i">
-            :name="item.v_name"
+                    <div class="line">
-            v-for="item in activeList"
+                        <div class="label">
-            :key="item.v_name">
+                            {{ v.name }}
-            <router-view />
+                        </div>
-        </el-tab-pane>
+                        <div class="select">
-    </el-tabs>
+                            <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">
+const router = useRouter()
-    .el-tabs {
+const route: any = useRoute()
-        padding: 15px 0;
+
+//筛选条件列表数据
+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>

src/views/parity/indexold.vue

@@ -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>

src/views/user/sourcingNeed/index.vue

@@ -92,8 +92,8 @@
         :data="leaseList"
         show-overflow-tooltip
         :header-cell-style="{
-            background: '#17907f',
+            background: '#fafafa',
-            color: '#fff',
+            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 {
+:deep.el-pagination.is-background .el-pager li.is-active {
-//     background-color: #3cb4a6;
+    background-color: #3cb4a6;
-// }
+}
+:deep.el-form--inline .el-form-item {
+    margin-right: 6px;
+    width: 95%;
+}
 </style>