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-10">
                            <div class="col col-6">
                                <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.problemSources }}</span>
                            </div>
                        </div>
                        <div class="row mt-10">
                            <div class="col col-6">
                                <label>投诉反映人</label>
                                <span>{{ row.responderName }}</span>
                            </div>
                            <div class="col col-6">
                                <label>联系电话</label>
                                <span>{{ row.contactPhone }}</span>
                            </div>
                        </div>
                        <div class="row mt-10">
                            <div class="col col-6">
                                <label>业务类别</label>
                                <span>{{ row.businessTypeName }}</span>
                            </div>
                            <div class="col col-6">
                                <label>涉嫌问题</label>
                                <span>{{}}</span>
                            </div>
                        </div>
                        <div class="row mt-10">
                            <div class="col col-6">
                                <label>涉及警种</label>
                                <span>{{ row.policeTypeName }}</span>
                            </div>
                            <div class="col col-6">
                                <label>涉及单位</label>
                                <span>{{ row.involveDepartName }}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="问题发现时间"
                    prop="discoveryTime"
                    width="164"
                />
                <el-table-column
                    label="问题来源"
                    prop="problemSources"
                    width="84"
                />
                <el-table-column
                    label="业务类别"
                    prop="businessTypeName"
                    width="98"
                />
                <el-table-column
                    label="问题内容"
                    prop="thingDesc"
                    show-overflow-tooltip
                />
                <el-table-column label="办理状态" width="98">
                    <template #default="{ row }">
                        <el-tag>{{
                            getDictLable(
                                dict.processingStatus,
                                row.processingStatus
                            )
                        }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="流程节点" prop="" width="98" />
                <el-table-column label="操作" width="98">
                    <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="emit('refresh')"
        @close="show = false"
        :disabled="false"
    />

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

const dict = useCatchStore().getDicts(["processingStatus"]);

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) => {
        todos.value = val;
        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, (val) => {
    if (val === ALL_LABEL) {
        todos.value = props.data;
    } else {
        todos.value = props.data.filter((item) => item.problemSources === val);
    }
});

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);
</script>
<style lang="scss" scoped>
.add-btn {
    position: absolute;
    top: 0;
    right: 0;
}
</style>