admin/src/views/home/modules/agent-charge.vue

<template>
    <div class="hc-agent-charge border-10">
        <div class="active-menus">
            <div class="active-item" :class="{ 'active-select': activeIndex === 1 }" @click="handleSelect(1)">
                <img :src="activeIndex === 1 ? frame254 : frame257" alt="">
                <div style="margin-top:5px;">
                    <el-badge :value="tags1" :hidden="!tags1" class="item">
                        <span class="font-bold">我的代办工单&nbsp; </span>
                    </el-badge>
                </div>
            </div>
            <div class="triangle-bottomleft" :class="{ 'b-b-b-w': activeIndex === 1 }" />
            <div class="active-item" :class="{ 'active-select': activeIndex === 2 }" @click="handleSelect(2)">
                <img :src="activeIndex === 2 ? frame256 : frame255" alt="">
                <div style="margin-top:5px;">
                    <el-badge :value="tags2" :hidden="!tags2" class="item">
                        <span class="font-bold">所有代办工单&nbsp; </span>
                    </el-badge>
                </div>
            </div>
            <div class="triangle-bottomleft" :class="{ 'b-b-b-w': activeIndex === 2 }" />
        </div>
        <div v-loading="isLoading" class="active-body border-bottom-10 relative h-[250px] bg-white p-3">
            <el-scrollbar>
                <div class="border-bottom-10">
                    <div v-if="tableData.length <= 0">
                        <hc-no-data tip="没有找到代办工单~" />
                    </div>
                    <div v-for="(item, index) in tableData" v-else :key="index" class="info-item">
                        <div class="frame-warning">
                            <img class="h-[14px] w-[14px]" :src="frameWarning" alt="">
                        </div>
                        <div class="frame-content">
                            <span class="title-common">来自</span>
                            <span class="title-text">{{ item.projectContract }}</span>
                            <span class="title-common">的</span>
                            <span class="title-text">{{ item.roleUser }}</span>
                            <span class="title-common">向</span>
                            <span v-if="item.manageUser === '您'" class="title-common">您</span>
                            <span v-else class="title-text">{{ item.manageUser }}</span>
                            <span class="title-common">反馈</span>
                            <span class="title-red">{{ item.title }}</span>
                        </div>
                        <div class="frame-time is-more">{{ item.time }}</div>
                        <!-- v-if="(activeIndex === 2 && item.operation) || activeIndex === 1" -->
                        <div class="frame-more">
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    <el-link icon="el-icon-more" :underline="false" style="transform:rotate(90deg)" />
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="openPreview(item)">立即处理</el-dropdown-item>
                                        <el-dropdown-item @click="ignore(index)">忽略</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                    <div v-if="tableData.length === 1" class="text-align-c" style="color:#CCD0DE;line-height:200px">没有更多数据了~</div>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import frame254 from '~ass/home/Frame254.png'
import frame257 from '~ass/home/Frame257.png'
import frame256 from '~ass/home/Frame256.png'
import frame255 from '~ass/home/Frame255.png'
import frameWarning from '~ass/home/warning.png'
import { getArrValue, getObjValue } from 'js-fast-way'
import mainApi from '~api/home/index'

const props = defineProps({
    active: {
        type: [Number, String],
        default: 1,
    },
})

//事件
const emit = defineEmits(['load'])

//工单数量
const tags1 = ref(0)
const tags2 = ref(0)

//代办工单
const activeIndex = ref(1)

//工单数据
const tableData = ref([])

//监听数据
watch(() => props.active, (active) => {
    activeIndex.value = active ?? 1
}, { immediate: true, deep: true })

//渲染完成
onMounted(() => {
    getLoadData()
})

//工单类型被切换
const handleSelect = (val) => {
    if (activeIndex.value === val) return
    activeIndex.value = val
    getLoadData(false)
}

//获取数据
const isLoading = ref(false)
const getLoadData = (first = true) => {
    isLoading.value = true
    emit('load', activeIndex.value, first, async ({ tag, data }) => {
        tableData.value = getArrValue(data)
        const { tag1, tag2 } = getObjValue(tag)
        tags1.value = tag1 ?? 0
        tags2.value = tag2 ?? 0
        isLoading.value = false
    })
}

//立即处理
const openPreview = async (item) => {
    const { data } = await mainApi.queryOpinionDetails({
        userOpinionId : item.userOpinionId,
    })
    console.log(data)
    //this.curRow = row;
    //this.imgVisible = true;
}

//忽略
const ignore = (val) => {

}
</script>

<style lang="scss" scoped>
.hc-agent-charge {
    position: relative;
    .active-menus {
        flex: 1;
        height: 62px;
        display: flex;
        background-color: #F8F8F8;
        border-radius: 10px 10px 0 0;
    }
    .active-item {
        padding: 10px;
        display: flex;
        cursor: pointer;
    }
    .active-select {
        background-color: #FFFFFF;
        border-radius: 10px 0 0 0 ;
    }
    .triangle-bottomleft {
        width: 0;
        height: 0;
        border-bottom: 64px solid #F8F8F8;
        border-right: 30px solid transparent;
    }
    .b-b-b-w {
        border-bottom-color: #FFFFFF;
    }
    .active-body {
        overflow: hidden;
    }
    .info-item{
        position: relative;
        padding: 10px;
        color: #50545E;
        margin-bottom: 10px;
        background-color: #F8FAFF;
        border: 1px solid #EEEEEE;
        border-radius: 10px;
        .frame-warning {
            position: absolute;
            top: 0;
            left: 10px;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .frame-content {
            position: relative;
            font-size: 14px;
            padding-left: 24px;
            width: calc(100% - 220px);
            line-height: 1.5;
            .title-common{
                color: #838791;
            }
            .title-text{
                color: #50545E;
            }
            .title-red{
                margin-left: 6px;
                color: #EB4D3D;
            }
        }
        .frame-time {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 10px;
            color: #838791;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        .frame-time.is-more {
            margin-right: 20px;
        }
        .frame-more {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 10px;
            display: flex;
            align-items: center;
        }
    }
}
.border-bottom-10 {
    border-radius: 0 0 10px 10px;
}
</style>

<style lang="scss">
.hc-agent-charge .active-body {
    .hc-no-data-box .no-data-c {
        width: 200px;
    }
    .el-scrollbar__bar.is-vertical {
        right: -9px;
    }
}
</style>