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" :class="(activeIndex === 2 && item.operation) || activeIndex === 1 ? 'is-more' : ''">{{ item.time }}</div>
                        <div v-if="(activeIndex === 2 && item.operation) || activeIndex === 1" class="frame-more">
                            <el-dropdown class="outline: none;">
                                <span class="el-dropdown-more">
                                    <el-link :underline="false">
                                        <hc-icon name="more-2" class="more-icon" />
                                    </el-link>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="openPreview(item)">立即处理</el-dropdown-item>
                                        <el-dropdown-item v-yes-com:[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>

        <!-- 工单详情 -->
        <hc-new-dialog v-model="isAgentChargeShow" widths="720px" title="工单详情" save-text="处理" @save="agentChargeSave">
            <table border="1" class="hc-agent-charge-new-table">
                <tbody>
                    <tr>
                        <td class="new-titile">合同名称</td>
                        <td class="new-content">{{ agentChargeData.projectName }}——{{ agentChargeData.contractName }}</td>
                    </tr>
                    <tr>
                        <td class="new-titile">问题描述</td>
                        <td class="new-content" style="color:#EB4D3D">{{ agentChargeData.opinionContent }}</td>
                    </tr>
                    <tr>
                        <td class="new-titile">反馈人员</td>
                        <td class="new-content">{{ agentChargeData.submitUserName }}</td>
                    </tr>
                    <tr>
                        <td class="new-titile">电话</td>
                        <td class="new-content">{{ agentChargeData.submitPhone }}</td>
                    </tr>
                    <tr>
                        <td class="new-titile">岗位</td>
                        <td class="new-content">{{ agentChargeData.submitUserRole }}</td>
                    </tr>
                    <tr>
                        <td class="new-titile">反馈时间</td>
                        <td class="new-content">{{ agentChargeData.manageTime }}</td>
                    </tr>
                    <tr>
                        <td class="new-titile">图片补充</td>
                        <td class="new-content">
                            <div v-if="agentChargeData.fileUrl && agentChargeData.fileUrl.length" class="flex">
                                <div v-for="item in agentChargeData.fileUrl" :key="item">
                                    <div class="new-img">
                                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAQhJREFUOE+lkzFOAzEURN8cASkSoUqOETroOAI3oEgBHekiOuiggxtwBDrSwS2AiiBRcIOJHNmrv85KVsRWu9/2+/4zs+Kfj+rztl+Bk6r+Lul4qFcHsD0BPoGFpLu42fYlcA9MJX3FtQgwcCRpPdTJ9hj4ltS79fbD9hvwLOmhHLZ9mN4l/YTaNXAm6bTUCsA12fYyA26qcXp7dwC2R8A8CLkCHstNbDcBadaLCvBUtGkCwrx7jZC8f4n2ZdWTiJ0r2c7zmInaxnFUvRIvubIetDFbOQU+gKtoZ15L9t1mYK/JUJRTJmZVmFbJ+xImoIPsAFr/VoAcSPrbG5BHGkn63Qat1bG1vgHcfowRy9YlxwAAAABJRU5ErkJggg==" style="margin: 40px 0 0 40px;" alt="">
                                    </div>
                                    <el-image class="h-[100px] w-[100px] border-4" :src="item" :preview-src-list="agentChargeData.fileUrl" />
                                </div>
                            </div>
                            <span v-else>无</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </hc-new-dialog>

        <!-- 处理工单 -->
        <hc-new-dialog v-model="isAgentDisposeShow" widths="400px" title="处理工单" @save="agentDisposeSave">
            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top">
                <el-form-item label="计量期：">
                    <el-select v-model="formModel.currentLink" placeholder="选择提交进度" block>
                        <el-option label="进入人工预处理环节" :value="2" />
                        <el-option label="已解决" :value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item v-show="formModel.currentLink === 2" label="预计处理截止日期：" prop="manageTime">
                    <el-date-picker v-model="formModel.manageTime" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
                </el-form-item>
            </el-form>
        </hc-new-dialog>
    </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 { formValidate, 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 isAgentChargeShow = ref(false)
const agentChargeData = ref({})
const agentChargeRow = ref({})
const openPreview = async (row) => {
    const { data } = await mainApi.queryOpinionDetails({
        userOpinionId : row.userOpinionId,
    })
    agentChargeRow.value = row
    agentChargeData.value = getObjValue(data)
    isAgentChargeShow.value = true
}

//处理工单
const isAgentDisposeShow = ref(false)
const agentChargeSave = () => {
    formModel.value = { currentLink: 2 }
    isAgentDisposeShow.value = true
}

//基础表单
const formRef = ref(null)
const formModel = ref({ currentLink: 2 })
const formRules = {
    manageTime: {
        required: true,
        trigger: 'blur',
        message: '请选择预计处理截止日期',
    },
}

//确认处理工单
const isCancel = ref(true)
const agentDisposeSave = async () => {
    const isForm = await formValidate(formRef.value)
    if (!isForm) return
    //业务人员提交环节操作
    const { manageTime } = formModel.value
    const { currentLinkId, currentLink, newNumber, userOpinionId } = agentChargeRow.value
    const { error, code, msg } = await mainApi.manageUserOperationStatus({
        currentLinkId: currentLinkId,
        currentLink: currentLink,
        newNumber: newNumber,
        userOpinionId: userOpinionId,
        manageTime: manageTime ?? null,
    })
    if (!error && code === 200) {
        window.$message.success('提交成功')
        isAgentDisposeShow.value = false
        isAgentChargeShow.value = false
        //重新刷新列表
        getLoadData(false)
    } else {
        window.$message.error(msg ?? '操作失败')
    }
    //是否前往消息区继续处理
    if (isCancel.value) {
        window?.$messageBox?.alert('是否前往消息区继续处理?', '提示', {
            showCancelButton: true,
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            callback: (action) => {
                if (action === 'confirm') {
                    console.log('前往消息区继续处理')
                } else {
                    isCancel.value = false
                }
            },
        })
    }
}

//忽略
const ignore = async ({ item }, resolve) => {
    const { index } = getObjValue(item)
    const { userOpinionId } = tableData.value[index]
    const { error, code, msg } = await mainApi.isIgnore({
        userOpinionId : userOpinionId,
    })
    resolve()
    if (!error && code === 200) {
        //重新刷新列表
        getLoadData(false)
    } else {
        window.$message.error(msg ?? '操作失败')
    }
}
</script>

<style lang="scss">
@import '~src/styles/home/agent-charge';
</style>