usky-web-portal/src/views/job/index.vue

<script lang="ts">
import { ref, reactive, defineComponent } from 'vue'
import { useStore  } from 'vuex'
import { useRouter } from "vue-router";
import banner from '@/components/layout/banner.vue'
import pagination from '@/components/layout/pagination.vue'
export default defineComponent({
    setup(){
        const store = useStore()
        const router = useRouter()
        let requestParams:any = reactive({})//active类型
        let paramsData = reactive({
            params:{
                categoryid: 0,
                pageNum:1,
                pageSize:store.state.pagination.size,
                order:"sortindex",
                acitve:true
            },
            index:"",
            sub:0
        })
        const pageStatus = ref(false)
        let oldCategoryId= ref(store.state.columnTypes[0].id)


        const columnActive=ref({})
        var columnOne= store.state.columnTypes.filter((item:any) => {
            return item.id == store.state.acitveId;
        });
        columnActive.value=columnOne[0]


        //类型切换
        function facilityClick(item:any){
            columnActive.value=item
            //防抖
            if(item.id != oldCategoryId.value){

                requestParams = item;
                paramsData.params.categoryid = item.id;
                paramsData.index = store.state.currentPagePath
                paramsData.sub = store.state.sub
                store.state.acitveId
                // paramsData = {
                //     params:{
                //         categoryid: item.id,
                //         pageNum:1,
                //         pageSize:30,
                //         order:"sortindex",
                //         acitve:true,
                //     },
                //     index:store.state.currentPagePath,
                //     sub:store.state.sub
                // }
                oldCategoryId.value = item.id
                store.dispatch('getPageData',paramsData)
            }
        }
        //详情页
        function details(item:any){
            let params = {
                path: `/job_Read`,
                query: {
                    categoryid: item.categoryid,
                    id: item.id,
                    isUrlId: 1
                }
            }
            store.commit("setRoute",params)
            router.push(params)
        }
        //分页
        function handleCurrentChange(val:number){
            paramsData.params.categoryid = store.state.acitveId
            paramsData.params.pageNum = val
            store.dispatch('getPageData',paramsData)
        }
        setTimeout(()=>{
            pageStatus.value = true
        },300)
        return { store, facilityClick, handleCurrentChange, details, pageStatus,columnActive }
    },
    components:{
        banner,
        pagination
    },
    asyncData({ store,route } :any){
        let params = reactive(route.value) //路由参数
        //获取菜单列表
        return store.dispatch('getMenuList',params).then(()=>{
            const data = reactive(store.state.menuList)
            let paramsData:any = reactive({})//页面主题内容请求参数
            let str = ref("")
            if(params.path.indexOf("_")>-1){
                str.value = params.path.split("_")[0]
            }
            for(let i=0;i<data.length;i++){
                if(!data[i].sname && params.path == data[i].path || data[i].path == str.value){
                    paramsData = {
                        params:{
                            categoryid: data[i].id,
                            pageNum:1,
                            pageSize:store.state.pagination.size,
                        //   order:"sortindex",
                        },
                        index:params.path,
                        sub:i
                    }
                    if(!params.query?.categoryid){
                        paramsData.params.categoryid = data[i].children[0].id
                    }else{
                        paramsData.params.categoryid = params.query.categoryid
                    }
                    return store.dispatch('getPageData',paramsData).then(()=>{
                        store.commit("setColumnTypes",store.state.menuList[store.state.sub].children)
                    })
                }
            }
        })
    }
})
</script>
<template>
    <div class="pageContain">
        <section class="common-bradcrumb-section">
            <banner />
        </section>

        <section class="news-content-section pt-70"  >
            <div class="container">
                <div style="display:flex" class="job-box">
                    <div class=" news-left-list">
                        <div class="title">热门岗位</div>
                        <ul>
                            <li  v-for="(item,index) in store.state.columnTypes" :key="index" style="display:flex">
                                <img src="@/assets/img/news/arrow.svg" alt="" :style="{'opacity':item.id == store.state.acitveId?'1':'0'}" style="width:12px;margin-right:5px">
                                <div  :class="item.id == store.state.acitveId  ? 'active' : ''" v-on:mouseover="facilityClick(item)">{{item.categoryName}} </div>
                            </li>
                        </ul>
                        
                    </div>
                    <div class="news-right-list"  >
                        <div class="title" v-if="columnActive.categoryName">{{columnActive.categoryName}}</div>
                        <ul>
                            <li class="" v-for="(item,index) in store.state.pageContent" :key="index"  v-show="pageStatus">
                                <div  @click="details(item)">
                                    <a class="newsTitleLeft"><span style="width: 8px;height: 8px;background: #B7B7B7;border-radius: 50%;margin-right:30px"></span>{{item.title}}</a>
                                    <span  class="timeRight" >{{ item.createdate.substring(0, 10) }}</span>
                                </div>
                            </li>


                        </ul>
                        <pagination :data="store.state.pagination" @pagination="handleCurrentChange" />

                    </div>
                </div>
                
                
            </div>

        </section>
        <br>
        <br>
        <!-- <section style=" background:#F7F7F7">
            <div class="container">
                <div class="row newTypeBox">
                    <div class="col-lg-6 col-md-6"  v-for="(item,index) in store.state.columnTypes" :key="index">
                        <div class="titleOne" :class="item.id == store.state.acitveId  ? 'active' : ''" v-on:mouseover="facilityClick(item)">{{item.categoryName}} </div>
                    </div>
                </div>
            </div>
        </section> -->
        <!-- <section class="news-content-section pt-70" v-show="pageStatus">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 content">
                            <ul>
                                <div class="row">
                                    <div class="col-md-4 newItemOne lazyContainer" v-for="(item,index) in store.state.pageContent" :key="index" >
                                        <div class="oneInnerBox" @click="details(item)">
                                            <div class="img" style="overflow:hidden">
                                                <el-image  :src="item.image" alt="" :data-src="item.image" fit="contain"  style="display:block"  />   
                                            </div>
                                            <a class="line-two">{{item.title}}</a>
                                            <span>{{ item.createdate }}</span>
                                        </div>
                                    </div>
                                </div>
                            </ul>
                            <pagination :data="store.state.pagination" @pagination="handleCurrentChange" />
                        </div>
                    </div>
                </div>
            </section> -->
    </div>
            
</template>
<style lang="scss" scoped>

</style>