|
@@ -0,0 +1,231 @@
|
|
|
+<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">我的代办工单 </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">所有代办工单 </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">{{ item.time }}</div>
|
|
|
+ <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'
|
|
|
+
|
|
|
+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 = (item) => {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+//忽略
|
|
|
+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;
|
|
|
+ margin-right: 30px;
|
|
|
+ color: #838791;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+}
|
|
|
+</style>
|