on-site-robots-screen/src/views/home/components/modal-content/inspection-task.vue

<template>
    <!-- 巡视任务 -->
    <DialogModal
        @onHandleCloseModal="onHandleCloseModal"
        :modalTitle="modalTitle"
        :height="`90vh`"
        :width="`90vw`"
    >
        <!-- 巡视任务-->
        <div class="inspection-task-container" ref="inspectionTaskContainer">
            <n-form
                inline
                ref="formRef"
                size="small"
                label-placement="left"
                style="margin-top: 10px"
            >
                <n-form-item>
                    <n-input placeholder="任务名称" clearable style="width: 240px" />
                </n-form-item>
                <n-button type="info" @click="getTaskList"> 查询</n-button>
                <n-button color="#6E90A9" style="margin-left: 8px" @click="onHandleAdd">
                    新增
                </n-button>
            </n-form>

            <n-data-table :columns="columns" :data="tableData" />

            <div style="margin-top: 10px; display: flex; justify-content: flex-end">
                <span>共{{ total }}条</span>
                <n-pagination
                    v-if="total > 0"
                    show-size-picker
                    :item-count="total"
                    :page-sizes="[10, 20, 30, 50]"
                    v-model:page="queryParams.pageNum"
                    v-model:page-size="queryParams.pageSize"
                />
            </div>
        </div>
    </DialogModal>
</template>

<script setup>
import DialogModal from '@/components/DialogModal/index.vue'
import { ref, watch } from 'vue'
import { NButton, NSwitch, useMessage, useDialog } from 'naive-ui'
import {
    getTaskListApi,
    updateTaskEnableApi,
    handleRobotActionApi,
    deleteTaskApi,
} from '@/api/home'

const emits = defineEmits(['onHandleCloseModal', 'onHandleAddInspectionTask'])
const total = ref(0)
const modalTitle = ref('巡视任务') // 弹框标题
const message = useMessage()
const dialog = useDialog()
const props = defineProps({
    isChange: {
        type: Object,
        default: () => ({
            is_change: 'error',
        }),
    },
})

const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    taskName: '',
})

const btnList = [
    {
        label: '编辑',
        type: 'info',
        btnType: 1,
    },
    {
        label: '立即执行',
        type: 'info',
        btnType: 2,
    },
    {
        label: '下发',
        type: 'info',
        btnType: 3,
    },
    {
        label: '删除',
        type: 'info',
        btnType: 4,
    },
]

const columns = ref([
    {
        title: '任务ID',
        key: 'taskId',
        align: 'center',
    },
    {
        title: '任务名',
        key: 'taskName',
        align: 'center',
    },
    {
        title: '设备名称',
        key: 'robotName',
        align: 'center',
    },

    {
        title: '任务频次',
        key: 'count',
        align: 'center',
    },
    // {
    //     title: '执行时间',
    //     key: 'age',
    //     align: 'center',
    // },
    // {
    //     title: '任务状态',
    //     key: 'taskStatus',
    //     align: 'center',
    //     render(row) {
    //         return h(
    //             NTag,
    //             {
    //                 style: {
    //                     marginRight: '6px',
    //                 },
    //                 type: 'info',
    //                 bordered: false,
    //             },
    //             {
    //                 default: () => {
    //                     return row.taskStatus == 1 ? '巡视中' : '未开始'
    //                 },
    //             },
    //         )
    //     },
    // },

    {
        title: '启用',
        key: 'enable',
        align: 'center',
        render(row) {
            return h(NSwitch, {
                value: row.enable == 1 ? true : false,
                'onUpdate:value': (value) => onHandleSwitch(row, value),
            })
        },
    },
    {
        title: '操作',
        key: 'age',
        align: 'center',
        width: 260,
        render(row) {
            const buttonS = btnList
                .filter((btn) => {
                    // 根据条件过滤按钮
                    switch (btn.btnType) {
                        case 1: // 编辑按钮 - 总是显示
                            return true
                        case 2:
                            return row.taskStatus == 1 && row.enable == 1
                        case 3: // 下发 - 只在任务未开始时显示
                            return row.enable == 1
                        case 4: // 删除 - 只在任务未开始时显示
                            return true
                    }
                })
                .map((btn) => {
                    return h(
                        NButton,
                        {
                            size: 'small',
                            type: btn.type,
                            style: {
                                marginRight: '4px',
                            },
                            onClick: () => onHandleBtn(row, btn.btnType),
                        },
                        { default: () => btn.label },
                    )
                })
            return buttonS
        },
    },
])
// 数据
const tableData = ref([])

// 新增按钮
const onHandleAdd = () => {
    emits('onHandleAddInspectionTask', {
        type: '新增',
        id: '',
    })
}

// 获取巡视任务列表
const getTaskList = async () => {
    const { data: res } = await getTaskListApi(queryParams.value)
    total.value = res.total
    tableData.value = res.rows
}

getTaskList()

// 按钮操作组
const onHandleBtn = (row, type) => {
    // 1. 编辑 2. 立即执行 3. 下发 4. 删除
    switch (type) {
        case 1:
            onHandleEditTable(row)
            break
        case 2:
            onHandleImmediateExecution(row)
            break
        case 3:
            onHandleSend(row)
            break
        case 4:
            onHandleDelete(row)
            break
        case 5:
            onHandleStop(row)
            break
    }
}

// 编辑
const onHandleEditTable = (row) => {
    emits('onHandleAddInspectionTask', {
        type: '编辑',
        id: row.id,
    })
}

// 立即执行
const onHandleImmediateExecution = async (row) => {
    const { data: res } = await handleRobotActionApi({
        taskId: row.taskId,
        type: '13',
        puId: row.puid,
    })
}

// 下发
const onHandleSend = async (row) => {
    const { data: res } = await updateTaskEnableApi({
        taskStatus: '1',
        id: row.id,
        puid: row.puid,
    })

    if (res.data.code == 200) {
        message.success('下发成功')
        getTaskList()
    } else {
        message.error('下发失败')
    }
}

// 删除
const onHandleDelete = async (row) => {
    dialog.success({
        title: '温馨提示',
        content: '确定要删除该任务吗？',
        positiveText: '确定',
        negativeText: '取消',
        draggable: true,
        onPositiveClick: async () => {
            const { data: res } = await deleteTaskApi({
                id: row.id,
                puid: row.puid,
            })

            if (res.data.code == 200) {
                message.success('删除成功')
                getTaskList()
            }
        },
        onNegativeClick: () => {},
    })
}

// 关闭弹框外层
const onHandleCloseModal = () => {
    emits('onHandleCloseModal')
}

// 启用开关
const onHandleSwitch = async (row, value) => {
    const { data: res } = await updateTaskEnableApi({
        enable: value ? '1' : '0',
        id: row.id,
        puid: row.puid,
    })

    if (res.data.code == 200) {
        message.success(value ? '启动成功' : '禁用成功')
        getTaskList()
    } else {
        message.error('启动失败')
    }
}

watch(
    props.isChange,
    (newVal) => {
        if (newVal.is_change === 'success') {
            getTaskList()
        }
    },
    { immediate: true },
)
</script>

<style lang="scss" scoped>
.plane-map-container {
    width: 100%;
    height: 100%;
}
</style>