supervision-vue/src/components/home/work/my-todo.vue

<template>
    <div>
        <div class="relative">
            <el-tabs v-model="myTodoActionTab">
                <el-tab-pane
                    v-for="item in tabs"
                    :key="item.name"
                    :name="item.name"
                >
                    <template #label>
                        <el-badge :value="item.total">
                            <span class="tab-nav-title_second">{{
                                item.name
                            }}</span>
                        </el-badge>
                    </template>
                </el-tab-pane>
            </el-tabs>
            <el-button
                type="primary"
                @click="addShow = true"
                v-perms="['negative:add']"
                plain
                class="add-btn"
                ><template #icon> <icon name="el-icon-Plus" /> </template
                >问题下发</el-button
            >
        </div>
        <div class="table-container">
            <el-table :data="todos">
                <el-table-column type="expand">
                    <template #default="{ row }">
                        <div class="row mt-12">
                            <div class="col col-12">
                                <label>样本源头编号</label>
                                <span>{{ row.originId }}</span>
                            </div>
                            <div class="col col-6">
                                <label>问题发现时间</label>
                                <span>{{ row.discoveryTime }}</span>
                            </div>
                            <div class="col col-6">
                                <label>问题发生时间</label>
                                <span>{{ row.happenTime || "/" }}</span>
                            </div>
                            <div class="col col-6">
                                <label>问题录入时间</label>
                                <span>{{ row.crtTime || "/" }}</span>
                            </div>
                            <div class="col col-6">
                                <label>问题来源</label>
                                <span>{{ row.problemSources }}</span>
                            </div>
                            <div class="col col-6">
                                <label>业务类别</label>
                                <span>{{ row.businessTypeName }}</span>
                            </div>
                            <div class="col col-6">
                                <label>涉及警种</label>
                                <span>{{ row.policeTypeName || "/" }}</span>
                            </div>
                            <div class="col col-12">
                                <label>涉嫌问题</label>
                                <span>{{
                                    getInvolveProblem(row.involveProblem, dict.suspectProblem) || "/"
                                }}</span>
                            </div>
                            <div class="col col-6" v-if="row.responderName">
                                <label>投诉反映人</label>
                                <span>{{ row.responderName }}</span>
                            </div>
                            <div class="col col-6" v-if="row.contactPhone">
                                <label>联系电话</label>
                                <span>{{ row.contactPhone }}</span>
                            </div>
                            <div class="col col-6">
                                <label>涉及单位</label>
                                <span>{{ row.involveDepartName || "/" }}</span>
                            </div>
                        </div>
                        <div class="row mt-12">
                            <div class="col col-24">
                                <label>事情简要描述</label>
                                <span>{{ row.thingDesc }}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="问题发现时间"
                    prop="discoveryTime"
                    width="156"
                />
                <el-table-column
                    label="问题来源"
                    prop="problemSources"
                    width="108"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="业务类别"
                    prop="businessTypeName"
                    width="98"
                />
                <el-table-column
                    label="问题内容"
                    prop="thingDesc"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="是否属实"
                    prop="checkStatusName"
                    width="100"
                    align="center"
                />
                <el-table-column label="办理状态" width="140" align="center">
                    <template #default="{ row }">
                        <el-tag
                            >{{
                                getDictLable(
                                    dict.processingStatus,
                                    row.processingStatus
                                )
                            }}{{
                                row.extensionApplyFlag ? "" : "(延期申请)"
                            }}{{
                                row.workFlowKey === 'countersign' ? "(单位会签)" : ""
                            }}</el-tag
                        >
                    </template>
                </el-table-column>
                <el-table-column label="流程节点" width="120" show-overflow-tooltip>
                    <template #default="{ row }">
                        <span>{{
                            flowNodes.filter(
                                (item) => item.flowKey === row.flowKey
                            )[0]?.flowName
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="90">
                    <template #default="{ row }">
                        <el-button
                            type="primary"
                            link
                            @click="handleAction(row)"
                            >立即处理</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <negative-dialog
        v-model="show"
        :id="activeNegativeId"
        @change="handleUpdate"
        @close="show = false"
        :disabled="false"
    />

    <negative-add v-model="addShow" @close="addShow = false" />
</template>
<script setup>
import { listTodos } from "@/api/work";
import { getDictLable, getInvolveProblem } from "@/utils/util";
import useCatchStore from "@/stores/modules/catch";

const catchStore = useCatchStore();
const dict = catchStore.getDicts(["processingStatus", "suspectProblem"]);
const flowNodes = catchStore.getFlowNodes();

const props = defineProps({
    data: {
        type: Array,
        required: [],
    },
});

const emit = defineEmits(["refresh"]);

const ALL_LABEL = "全部";
const tabs = ref([
    {
        name: ALL_LABEL,
        total: 0,
    },
]);

const todos = ref([]);
watch(
    () => props.data,
    (val) => {
        getTodos()
        tabs.value = [];
        tabs.value.push({
            name: "全部",
            total: val.length,
        });
        new Set(val.map((item) => item.problemSources)).forEach(
            (problemSources) => {
                tabs.value.push({
                    name: problemSources,
                    total: val.filter(
                        (item) => item.problemSources === problemSources
                    ).length,
                });
            }
        );
    }
);

const myTodoActionTab = ref(ALL_LABEL);
watch(myTodoActionTab, getTodos);

function getTodos() {
    if (myTodoActionTab.value === ALL_LABEL) {
        todos.value = props.data;
    } else {
        todos.value = props.data.filter((item) => item.problemSources === myTodoActionTab.value);
        if (todos.value.length === 0) {
            todos.value = ALL_LABEL
        }
    }
}

const show = ref(false);
const activeNegativeId = ref("");
const activeWork = ref({});
provide("work", activeWork);

function handleAction(row) {
    show.value = true;
    activeNegativeId.value = row.negativeId;
    activeWork.value = row;
}

const addShow = ref(false);

function handleUpdate() {
    emit('refresh')
    
}
</script>
<style lang="scss" scoped>
.add-btn {
    position: absolute;
    top: 0;
    right: 0;
}
</style>